Ilia Mashkov
48 lines
1.3 KiB
Svelte
48 lines
1.3 KiB
Svelte
<script module>
|
|
import { createTypographyControl } from '$shared/lib';
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import ComboControl from './ComboControl.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/ComboControl',
|
|
component: ComboControl,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'ComboControl with input field and slider. Simplified version without increase/decrease buttons.',
|
|
},
|
|
story: { inline: false }, // Render stories in iframe for state isolation
|
|
},
|
|
},
|
|
argTypes: {
|
|
label: {
|
|
control: 'text',
|
|
description: 'Label for the ComboControl',
|
|
},
|
|
control: {
|
|
control: 'object',
|
|
description: 'TypographyControl instance managing the value and bounds',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { ComponentProps } from 'svelte';
|
|
const horizontalControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
|
|
</script>
|
|
|
|
<Story
|
|
name="Horizontal"
|
|
args={{
|
|
control: horizontalControl,
|
|
label: 'Size',
|
|
}}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof ComboControl>)}
|
|
<ComboControl {...args} />
|
|
{/snippet}
|
|
</Story>
|