124 lines
3.4 KiB
Svelte
124 lines
3.4 KiB
Svelte
<script module>
|
|
import { createTypographyControl } from '$shared/lib';
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import ComboControlV2 from './ComboControlV2.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/ComboControlV2',
|
|
component: ComboControlV2,
|
|
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: {
|
|
orientation: {
|
|
control: 'select',
|
|
options: ['horizontal', 'vertical'],
|
|
description: 'Orientation of the ComboControl',
|
|
defaultValue: 'vertical',
|
|
},
|
|
label: {
|
|
control: 'text',
|
|
description: 'Label for the ComboControl',
|
|
},
|
|
control: {
|
|
control: 'object',
|
|
description: 'TypographyControl instance managing the value and bounds',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
const horizontalControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
|
|
const verticalControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
|
|
const floatControl = createTypographyControl({ min: 0, max: 1, step: 0.01, value: 0.5 });
|
|
const atMinControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 0 });
|
|
const atMaxControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 100 });
|
|
const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10, value: 500 });
|
|
</script>
|
|
|
|
<Story
|
|
name="Horizontal"
|
|
args={{
|
|
control: horizontalControl,
|
|
orientation: 'horizontal',
|
|
label: 'Size',
|
|
}}
|
|
>
|
|
{#snippet template(args)}
|
|
<ComboControlV2 control={horizontalControl} orientation="horizontal" label="Size" {...args} />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="Vertical"
|
|
args={{
|
|
control: verticalControl,
|
|
orientation: 'vertical',
|
|
label: 'Size',
|
|
}}
|
|
>
|
|
{#snippet template(args)}
|
|
<ComboControlV2 control={verticalControl} orientation="vertical" class="h-48" label="Size" {...args} />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="With Float Values"
|
|
args={{
|
|
control: floatControl,
|
|
orientation: 'vertical',
|
|
label: 'Opacity',
|
|
}}
|
|
>
|
|
{#snippet template(args)}
|
|
<ComboControlV2 control={floatControl} orientation="vertical" class="h-48" label="Opacity" {...args} />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="At Minimum"
|
|
args={{
|
|
control: atMinControl,
|
|
orientation: 'horizontal',
|
|
label: 'Size',
|
|
}}
|
|
>
|
|
{#snippet template(args)}
|
|
<ComboControlV2 control={atMinControl} orientation="horizontal" label="Size" {...args} />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="At Maximum"
|
|
args={{
|
|
control: atMaxControl,
|
|
orientation: 'horizontal',
|
|
label: 'Size',
|
|
}}
|
|
>
|
|
{#snippet template(args)}
|
|
<ComboControlV2 control={atMaxControl} orientation="horizontal" label="Size" {...args} />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="Large Range"
|
|
args={{
|
|
control: largeRangeControl,
|
|
orientation: 'horizontal',
|
|
label: 'Scale',
|
|
}}
|
|
>
|
|
{#snippet template(args)}
|
|
<ComboControlV2 control={largeRangeControl} orientation="horizontal" label="Scale" {...args} />
|
|
{/snippet}
|
|
</Story>
|