45 lines
1.0 KiB
Svelte
45 lines
1.0 KiB
Svelte
<script module>
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import SearchBar from './SearchBar.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/SearchBar',
|
|
component: SearchBar,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: 'Wrapper around Input with a search icon',
|
|
},
|
|
story: { inline: false }, // Render stories in iframe for state isolation
|
|
},
|
|
},
|
|
argTypes: {
|
|
value: {
|
|
control: 'text',
|
|
description: 'Current search value (two-way bindable)',
|
|
},
|
|
placeholder: {
|
|
control: 'text',
|
|
description: 'Placeholder text for the input',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
let defaultSearchValue = $state('');
|
|
</script>
|
|
|
|
<Story
|
|
name="Default"
|
|
args={{
|
|
value: defaultSearchValue,
|
|
placeholder: 'Type here...',
|
|
}}
|
|
>
|
|
{#snippet template(args)}
|
|
<SearchBar variant="filled" {...args} />
|
|
{/snippet}
|
|
</Story>
|