Ilia Mashkov
120 lines
3.2 KiB
Svelte
120 lines
3.2 KiB
Svelte
<script module>
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import ContentEditable from './ContentEditable.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/ContentEditable',
|
|
component: ContentEditable,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'A contenteditable div with custom font and text properties. Allows inline text editing with support for font size, line height, and letter spacing. The text is two-way bindable for form use cases.',
|
|
},
|
|
story: { inline: false }, // Render stories in iframe for state isolation
|
|
},
|
|
},
|
|
argTypes: {
|
|
text: {
|
|
control: 'text',
|
|
description: 'Visible text content (two-way bindable)',
|
|
},
|
|
fontSize: {
|
|
control: { type: 'number', min: 8, max: 200 },
|
|
description: 'Font size in pixels',
|
|
},
|
|
lineHeight: {
|
|
control: { type: 'number', min: 0.8, max: 3, step: 0.1 },
|
|
description: 'Line height multiplier',
|
|
},
|
|
letterSpacing: {
|
|
control: { type: 'number', min: -0.5, max: 1, step: 0.05 },
|
|
description: 'Letter spacing in em units',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { ComponentProps } from 'svelte';
|
|
|
|
let value = $state('Here we can type and edit the content. Try it!');
|
|
let smallValue = $state('Small font size for compact text.');
|
|
let largeValue = $state('Large font size for emphasis.');
|
|
let spacedValue = $state('Wide letter spacing.');
|
|
let longValue = $state(
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.',
|
|
);
|
|
</script>
|
|
|
|
<Story
|
|
name="Default"
|
|
args={{
|
|
text: value,
|
|
fontSize: 48,
|
|
lineHeight: 1.2,
|
|
letterSpacing: 0,
|
|
}}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof ContentEditable>)}
|
|
<ContentEditable {...args} />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="Small Font"
|
|
args={{
|
|
text: smallValue,
|
|
fontSize: 16,
|
|
lineHeight: 1.5,
|
|
letterSpacing: 0,
|
|
}}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof ContentEditable>)}
|
|
<ContentEditable {...args} />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="Large Font"
|
|
args={{
|
|
text: largeValue,
|
|
fontSize: 72,
|
|
lineHeight: 1.1,
|
|
letterSpacing: 0,
|
|
}}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof ContentEditable>)}
|
|
<ContentEditable {...args} />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="Wide Letter Spacing"
|
|
args={{
|
|
text: spacedValue,
|
|
fontSize: 32,
|
|
lineHeight: 1.3,
|
|
letterSpacing: 0.3,
|
|
}}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof ContentEditable>)}
|
|
<ContentEditable {...args} />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="Long Text"
|
|
args={{
|
|
text: longValue,
|
|
fontSize: 24,
|
|
lineHeight: 1.6,
|
|
letterSpacing: 0,
|
|
}}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof ContentEditable>)}
|
|
<ContentEditable {...args} />
|
|
{/snippet}
|
|
</Story>
|