65 lines
1.5 KiB
Svelte
65 lines
1.5 KiB
Svelte
|
<script module>
|
||
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||
|
|
|
||
|
|
const { Story } = defineMeta({
|
||
|
|
title: 'Shared/UI/ComboControl',
|
||
|
|
component: ComboControl,
|
||
|
|
tags: ['autodocs'],
|
||
|
|
argTypes: {
|
||
|
|
value: { control: 'number' },
|
||
|
|
minValue: { control: 'number' },
|
||
|
|
maxValue: { control: 'number' },
|
||
|
|
step: { control: 'number' },
|
||
|
|
increaseDisabled: { control: 'boolean' },
|
||
|
|
decreaseDisabled: { control: 'boolean' },
|
||
|
|
onChange: { action: 'onChange' },
|
||
|
|
onIncrease: { action: 'onIncrease' },
|
||
|
|
onDecrease: { action: 'onDecrease' },
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import ComboControl from './ComboControl.svelte';
|
||
|
|
|
||
|
|
let integerStep = 1;
|
||
|
|
let decimalStep = 0.05;
|
||
|
|
|
||
|
|
let integerValue = 16;
|
||
|
|
let decimalValue = 1.5;
|
||
|
|
|
||
|
|
let integerMinValue = 8;
|
||
|
|
let decimalMinValue = 1;
|
||
|
|
|
||
|
|
let integerMaxValue = 100;
|
||
|
|
let decimalMaxValue = 2;
|
||
|
|
|
||
|
|
function onChange() {}
|
||
|
|
function onIncrease() {}
|
||
|
|
function onDecrease() {}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<Story name="Integer Step">
|
||
|
|
<ComboControl
|
||
|
|
value={integerValue}
|
||
|
|
step={integerStep}
|
||
|
|
onChange={onChange}
|
||
|
|
onIncrease={onIncrease}
|
||
|
|
onDecrease={onDecrease}
|
||
|
|
minValue={integerMinValue}
|
||
|
|
maxValue={integerMaxValue}
|
||
|
|
/>
|
||
|
|
</Story>
|
||
|
|
|
||
|
|
<Story name="Decimal Step">
|
||
|
|
<ComboControl
|
||
|
|
value={decimalValue}
|
||
|
|
step={decimalStep}
|
||
|
|
onChange={onChange}
|
||
|
|
onIncrease={onIncrease}
|
||
|
|
onDecrease={onDecrease}
|
||
|
|
minValue={decimalMinValue}
|
||
|
|
maxValue={decimalMaxValue}
|
||
|
|
/>
|
||
|
|
</Story>
|