@volverjs/ui-vue 0.0.1-beta.12 → 0.0.1-beta.16

package/src/stories/{Check/CheckSwitch.stories.mdx → Checkbox/CheckboxSwitch.stories.mdx}

@@ -1,16 +1,15 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './Check.stories.mdx'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { Template } from './Checkbox.stories.mdx'
+import { switchTest } from './Checkbox.test'
 
 <Meta
-	title="Components/Check/Switch"
+	title="Components/Checkbox/Switch"
 	args={{
 		modelValue: []
 	}}
-	component={VvCheck}
+	component={VvCheckbox}
 />
 
 # Switch
@@ -18,12 +17,13 @@ import { Template } from './Check.stories.mdx'
 <Canvas>
 	<Story
 		name="Switch"
+		play={switchTest}
 		args={{
 			id: 3,
-			label: 'opzione 1',
+			label: 'Option 1',
 			name: 'ck3',
 			switch: true,
-			value: { a: 'Banana' }
+			value: { a: 'Option 3' }
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/CheckboxGroup/CheckboxGroup.stories.mdx

@@ -0,0 +1,69 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+<Meta title="Components/CheckboxGroup" component={VvCheckboxGroup} />
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvCheckboxGroup, VvCheckbox },
+	setup() {
+		return { args }
+	},
+	data: () => ({ selected: args.modelValue || [] }),
+	template: `
+		<div class="flex flex-row justify-between">
+            <vv-checkbox-group v-bind="args" v-model="selected">
+                <template v-slot:hint>
+                    <p>Lorem ipsum dolor sit amet</p>
+                </template> 
+            </vv-checkbox-group>
+            <strong v-if="selected">Selected options: {{selected}} </strong> 
+        </div>
+        `
+})
+
+# VvCheckboxGroup
+
+A group of checks.
+
+<Source language="jsx" code={'<vv-checkbox-group>...</vv-checkbox-group>'} />
+
+<Canvas>
+	<Story
+		name="vv-checkbox-group"
+		args={{
+			name: 'story1',
+			label: 'Label',
+			vertical: false,
+			disabled: false,
+			readonly: false,
+			options: [],
+			optionLabel: 'label',
+			optionValue: 'value',
+			hintLabel: 'Lorem ipsum dolor sit amet'
+		}}>
+		{(args) => {
+			return {
+				components: { VvCheckboxGroup, VvCheckbox },
+				data: () => ({ selected: args.modelValue || [] }),
+				setup() {
+					return { args }
+				},
+				template: `
+                    <div class="flex flex-row justify-between">
+                        <vv-checkbox-group v-bind="args" v-model="selected">
+                            <vv-checkbox id="o1" name="opts" value="1">Option 1</vv-checkbox>
+                            <vv-checkbox id="o2" name="opts" value="2">Option 2</vv-checkbox>
+                            <vv-checkbox id="o3" name="opts" value="3">Option 3</vv-checkbox>
+                        </vv-checkbox-group>
+                        <strong v-if="selected">Selected options: {{selected}} </strong> 
+                    </div>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>
+
+<ArgsTable of={VvCheckboxGroup} />

package/src/stories/CheckboxGroup/CheckboxGroupDisabled.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+import { Template } from './CheckboxGroup.stories.mdx'
+
+<Meta title="Components/CheckboxGroup/Disabled" component={VvCheckboxGroup} />
+
+# Disabled
+
+<Canvas>
+	<Story
+		name="Disabled"
+		args={{
+			name: 'story-disabled',
+			options: [
+				{ value: 1, label: 'Option 1' },
+				{ value: 2, label: 'Option 2' },
+				{ value: 3, label: 'Option 3' }
+			],
+			disabled: true
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/CheckboxGroup/CheckboxGroupError.stories.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+import { Template } from './CheckboxGroup.stories.mdx'
+
+<Meta title="Components/CheckboxGroup/Error" component={VvCheckboxGroup} />
+
+# Error & Error message
+
+<Canvas>
+	<Story
+		name="Error"
+		args={{
+			name: 'vv-group-options-error-label',
+			options: [
+				{ value: 1, name: 'First' },
+				{ value: 2, name: 'Second' },
+				{ value: 3, name: 'Third' }
+			],
+			optionLabel: (o) => `${o.name} option`,
+			error: true,
+			errorLabel: ['First error', 'Second error']
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/CheckboxGroup/CheckboxGroupHintLabel.stories.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+import { Template } from './CheckboxGroup.stories.mdx'
+
+<Meta title="Components/CheckboxGroup/HintLabel" component={VvCheckboxGroup} />
+
+# HintLabel
+
+<Canvas>
+	<Story
+		name="HintLabel"
+		args={{
+			name: 'vv-group-options-hint-label',
+			options: [
+				{ value: 1, name: 'First' },
+				{ value: 2, name: 'Second' },
+				{ value: 3, name: 'Third' }
+			],
+			optionLabel: (o) => `${o.name} option`,
+			hintLabel: 'Lorem ipsum dolor sit amet'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/CheckboxGroup/CheckboxGroupLabel.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+import { Template } from './CheckboxGroup.stories.mdx'
+
+<Meta title="Components/CheckboxGroup/Label" component={VvCheckboxGroup} />
+
+# Label
+
+<Canvas>
+	<Story
+		name="Label"
+		args={{
+			name: 'story-label',
+			options: [
+				{ value: 1, label: 'Option 1' },
+				{ value: 2, label: 'Option 2' },
+				{ value: 3, label: 'Option 3' }
+			],
+			label: 'Custom label'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/{CheckGroup/CheckGroupOptionLabel.stories.mdx → CheckboxGroup/CheckboxGroupOptionLabel.stories.mdx}

@@ -1,11 +1,14 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
 
-import { Template } from './CheckGroup.stories.mdx'
+import { Template } from './CheckboxGroup.stories.mdx'
 
-<Meta title="Components/CheckGroup/OptionLabel" component={VvCheckGroup} />
+<Meta
+	title="Components/CheckboxGroup/OptionLabel"
+	component={VvCheckboxGroup}
+/>
 
 # OptionLabel
 
@@ -17,9 +20,9 @@ Change object prop for label
 		args={{
 			name: 'vv-group-options-label-string',
 			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
+				{ value: 1, name: 'Option 1' },
+				{ value: 2, name: 'Option 2' },
+				{ value: 3, name: 'Option 3' }
 			],
 			optionLabel: 'name'
 		}}>
@@ -37,11 +40,11 @@ Use function to define option label
 		args={{
 			name: 'vv-group-options-label-function',
 			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
+				{ value: 1, name: 'First' },
+				{ value: 2, name: 'Second' },
+				{ value: 3, name: 'Third' }
 			],
-			optionLabel: (o) => `Frutto: ${o.name}`
+			optionLabel: (o) => `${o.name} option`
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/{CheckGroup/CheckGroupOptionValue.stories.mdx → CheckboxGroup/CheckboxGroupOptionValue.stories.mdx}

@@ -1,11 +1,14 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
 
-import { Template } from './CheckGroup.stories.mdx'
+import { Template } from './CheckboxGroup.stories.mdx'
 
-<Meta title="Components/CheckGroup/OptionValue" component={VvCheckGroup} />
+<Meta
+	title="Components/CheckboxGroup/OptionValue"
+	component={VvCheckboxGroup}
+/>
 
 # OptionValue
 
@@ -17,9 +20,9 @@ Change object prop for value
 		args={{
 			name: 'vv-group-options-value-string',
 			options: [
-				{ qta: 1, label: 'Mela' },
-				{ qta: 2, label: 'Pera' },
-				{ qta: 3, label: 'Banana' }
+				{ qta: 1, label: 'Option 1' },
+				{ qta: 2, label: 'Option 2' },
+				{ qta: 3, label: 'Option 3' }
 			],
 			optionValue: 'qta'
 		}}>
@@ -37,9 +40,9 @@ Use function to define option value
 		args={{
 			name: 'vv-group-options-value-function',
 			options: [
-				{ qta: 1, label: 'Mela' },
-				{ qta: 2, label: 'Pera' },
-				{ qta: 3, label: 'Banana' }
+				{ qta: 1, label: 'Option 1' },
+				{ qta: 2, label: 'Option 2' },
+				{ qta: 3, label: 'Option 3' }
 			],
 			optionValue: (o) => `${o.qta}_${o.label}`
 		}}>

package/src/stories/{CheckGroup/CheckGroupOptions.stories.mdx → CheckboxGroup/CheckboxGroupOptions.stories.mdx}

@@ -1,11 +1,11 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
 
-import { Template } from './CheckGroup.stories.mdx'
+import { Template } from './CheckboxGroup.stories.mdx'
 
-<Meta title="Components/CheckGroup/Options" component={VvCheckGroup} />
+<Meta title="Components/CheckboxGroup/Options" component={VvCheckboxGroup} />
 
 # Options
 
@@ -17,9 +17,9 @@ Check group based on list of object list
 		args={{
 			name: 'story-options',
 			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
+				{ value: 1, label: 'Option 1' },
+				{ value: 2, label: 'Option 2' },
+				{ value: 3, label: 'Option 3' }
 			]
 		}}>
 		{Template.bind({})}
@@ -33,7 +33,7 @@ Check group based on list of object list
 		name="Options as Array"
 		args={{
 			name: 'story-options-strings',
-			options: ['Primo', 'Secondo', 'Terzo']
+			options: ['First', 'Second', 'Third']
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/CheckboxGroup/CheckboxGroupReadonly.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+import { Template } from './CheckboxGroup.stories.mdx'
+
+<Meta title="Components/CheckboxGroup/Readonly" component={VvCheckboxGroup} />
+
+# Readonly
+
+<Canvas>
+	<Story
+		name="Readonly"
+		args={{
+			name: 'story-readonly',
+			options: [
+				{ value: 1, label: 'Option 1' },
+				{ value: 2, label: 'Option 2' },
+				{ value: 3, label: 'Option 3' }
+			],
+			readonly: true
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/CheckboxGroup/CheckboxGroupSlots.stories.mdx

@@ -0,0 +1,152 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+<Meta title="Components/CheckboxGroup/Slots" component={VvCheckboxGroup} />
+
+# Default
+
+<Canvas>
+	<Story
+		name="Default"
+		args={{
+			name: 'story-slot-default'
+		}}>
+		{(args) => {
+			return {
+				components: { VvCheckboxGroup, VvCheckbox },
+				data: () => ({ selected: args.modelValue || [] }),
+				setup() {
+					return { args }
+				},
+				template:
+					/**html */
+					`
+                    <div class="flex flex-row justify-between">
+                        <vv-checkbox-group v-bind="args" v-model="selected">
+                            <vv-checkbox id="o1" name="opts" value="1">Option 1</vv-checkbox>
+                            <vv-checkbox id="o2" name="opts" value="2">Option 2</vv-checkbox>
+                            <vv-checkbox id="o3" name="opts" value="3">Option 3</vv-checkbox>
+                        </vv-checkbox-group>
+                        <strong v-if="selected">Selected options: {{selected}} </strong> 
+                    </div>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>
+
+# Hint
+
+<Canvas>
+	<Story
+		name="Hint"
+		args={{
+			name: 'story-slot-hint'
+		}}>
+		{(args) => {
+			return {
+				components: { VvCheckboxGroup, VvCheckbox },
+				data: () => ({ selected: args.modelValue || [] }),
+				setup() {
+					return { args }
+				},
+				template:
+					/**html */
+					`
+                    <div class="flex flex-row justify-between">
+                        <vv-checkbox-group v-bind="args" v-model="selected">
+                            <template v-slot:default>
+                                <vv-checkbox id="o1" name="opts" value="1">Option 1</vv-checkbox>
+                                <vv-checkbox id="o2" name="opts" value="2">Option 2</vv-checkbox>
+                                <vv-checkbox id="o3" name="opts" value="3">Option 3</vv-checkbox>
+                            </template>
+                            <template v-slot:hint="slotProps">
+                                <div>Hint label</div>
+								<div>{{slotProps}}</div> 
+                            </template>
+                        </vv-checkbox-group>
+                        <strong v-if="selected">Selected options: {{selected}} </strong>
+                    </div>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>
+
+# Valid
+
+<Canvas>
+	<Story
+		name="Valid"
+		args={{
+			name: 'story-slot-valid',
+			valid: true
+		}}>
+		{(args) => {
+			return {
+				components: { VvCheckboxGroup, VvCheckbox },
+				data: () => ({ selected: args.modelValue || [] }),
+				setup() {
+					return { args }
+				},
+				template:
+					/**html */
+					`
+                    <div class="flex flex-row justify-between">
+                        <vv-checkbox-group v-bind="args" v-model="selected">
+                            <template v-slot:default>
+                                <vv-checkbox id="o1" name="opts" value="1">Option 1</vv-checkbox>
+                                <vv-checkbox id="o2" name="opts" value="2">Option 2</vv-checkbox>
+                                <vv-checkbox id="o3" name="opts" value="3">Option 3</vv-checkbox>
+                            </template>
+                            <template v-slot:valid>
+                               Valid message
+                            </template>
+                        </vv-checkbox-group>
+                        <strong v-if="selected">Selected options: {{selected}} </strong>
+                    </div>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>
+
+# Error
+
+<Canvas>
+	<Story
+		name="Error"
+		args={{
+			name: 'story-slot-error',
+			error: true
+		}}>
+		{(args) => {
+			return {
+				components: { VvCheckboxGroup, VvCheckbox },
+				data: () => ({ selected: args.modelValue || [] }),
+				setup() {
+					return { args }
+				},
+				template:
+					/**html */
+					`
+                    <div class="flex flex-row justify-between">
+                        <vv-checkbox-group v-bind="args" v-model="selected">
+                            <template v-slot:default>
+                                <vv-checkbox id="o1" name="opts" value="1">Option 1</vv-checkbox>
+                                <vv-checkbox id="o2" name="opts" value="2">Option 2</vv-checkbox>
+                                <vv-checkbox id="o3" name="opts" value="3">Option 3</vv-checkbox>
+                            </template>
+                            <template v-slot:error>
+                               Error message
+                            </template>
+                        </vv-checkbox-group>
+                        <strong v-if="selected">Selected options: {{selected}} </strong>
+                    </div>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>

package/src/stories/CheckboxGroup/CheckboxGroupValid.stories.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+import { Template } from './CheckboxGroup.stories.mdx'
+
+<Meta title="Components/CheckboxGroup/Valid" component={VvCheckboxGroup} />
+
+# Valid & Valid label
+
+<Canvas>
+	<Story
+		name="Valid"
+		args={{
+			name: 'vv-group-options-valid-label',
+			options: [
+				{ value: 1, name: 'First' },
+				{ value: 2, name: 'Second' },
+				{ value: 3, name: 'Third' }
+			],
+			optionLabel: (o) => `${o.name} option`,
+			valid: true,
+			validLabel: 'Campo corretto'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/CheckboxGroup/CheckboxGroupVertical.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+import { Template } from './CheckboxGroup.stories.mdx'
+
+<Meta title="Components/CheckboxGroup/Vertical" component={VvCheckboxGroup} />
+
+# Vertical
+
+<Canvas>
+	<Story
+		name="Vertical"
+		args={{
+			name: 'story-vertical',
+			options: [
+				{ value: 1, label: 'Option 1' },
+				{ value: 2, label: 'Option 2' },
+				{ value: 3, label: 'Option 3' }
+			],
+			vertical: true
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Dialog/Dialog.stories.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvDialog from '../../components/VvDialog/VvDialog.vue'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
+import { dialogTest } from './Dialog.test'
 
 <Meta title="Components/Dialog" component={VvDialog} />
 
@@ -15,15 +15,15 @@ export const Template = (args, { argTypes }) => ({
 	template: `
 		<div class="flex flex-column">
 			<button class="vv-button" @click="open=true">Open</button>
-            <vv-dialog v-bind="args" v-model:open="open">
-                Contenuto di prova
+            <vv-dialog v-bind="args" v-model="open">
+               Lorem ipsum dolor sit amet
             </vv-dialog>
 		</div>
         `
 })
 
 <Canvas>
-	<Story name="Dialog" args={{ id: 'dialog' }}>
+	<Story name="Dialog" args={{ id: 'dialog' }} play={dialogTest}>
 		{Template.bind({})}
 	</Story>
 </Canvas>

package/src/stories/Dialog/Dialog.test.ts

@@ -0,0 +1,26 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { userEvent } from '@storybook/testing-library'
+
+export async function dialogTest(data: PlayAttributes = {} as PlayAttributes) {
+	const button = document.getElementsByClassName('vv-button')[0]
+	const dialog = document.getElementById(data.args.id)
+
+	//display test
+	expect(dialog?.style.display).toEqual('none')
+	await userEvent.click(button)
+	expect(dialog?.style.display).toEqual('')
+
+	// dialog component class test
+	expect(dialog).toHaveClass('vv-dialog')
+	data.args.size && expect(dialog).toHaveClass(`vv-dialog--${data.args.size}`)
+	const dialogWrapper = dialog?.firstElementChild
+	expect(dialogWrapper).toHaveClass('vv-dialog__wrapper')
+	const dialogContent = dialogWrapper?.children[0] as HTMLDivElement
+	expect(dialogContent).toHaveClass('vv-dialog__content')
+	// slot test
+	expect(dialogContent?.innerText).toEqual('Lorem ipsum dolor sit amet')
+
+	data.args.autoClose && expect(dialog).toHaveProperty('open', true)
+	await expect(dialog).toHaveNoViolations()
+}

package/src/stories/Dialog/DialogAutoClose.stories.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
 
-import VvDialog from '../../components/VvDialog/VvDialog.vue'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
 
 import { Template } from './Dialog.stories.mdx'
 

package/src/stories/Dialog/DialogSize.stories.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
 
-import VvDialog from '../../components/VvDialog/VvDialog.vue'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
 
 import { Template } from './Dialog.stories.mdx'