@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.41

package/src/stories/Combobox/ComboboxOptions.stories.ts

@@ -1,13 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
 import { Default } from './Combobox.stories'
 import { defaultArgs, argTypes } from './Combobox.settings'
+import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
 
 const meta: Meta<typeof VvCombobox> = {
-	title: 'Components/Combobox/Options',
-	component: VvCombobox,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Combobox/Options',
+    // @ts-expect-error missing generic components support
+    component: VvCombobox,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,100 +16,96 @@ export default meta
 type Story = StoryObj<typeof VvCombobox>
 
 export const ArrayOfObjects: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		options: [
-			{ value: 'first', label: 'First' },
-			{ value: 'second', label: 'Second' },
-			{ value: 'third', label: 'Third' },
-		],
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        options: [
+            { value: 'first', label: 'First' },
+            { value: 'second', label: 'Second' },
+            { value: 'third', label: 'Third' },
+        ],
+    },
 }
 
 export const OptionLabelKey: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		labelKey: 'name',
-		options: [
-			{ value: 'first', name: 'First' },
-			{ value: 'second', name: 'Second' },
+    ...Default,
+    args: {
+        ...Default.args,
+        labelKey: 'name',
+        options: [
+            { value: 'first', name: 'First' },
+            { value: 'second', name: 'Second' },
 
-			{ value: 'third', name: 'Third' },
-		],
-	},
+            { value: 'third', name: 'Third' },
+        ],
+    },
 }
 
 export const OptionValueKey: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		valueKey: 'id',
-		options: [
-			{ id: 'first', label: 'First' },
-			{ id: 'second', label: 'Second' },
-			{ id: 'third', label: 'Third' },
-		],
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        valueKey: 'id',
+        options: [
+            { id: 'first', label: 'First' },
+            { id: 'second', label: 'Second' },
+            { id: 'third', label: 'Third' },
+        ],
+    },
 }
 
 export const GroupedOptions: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		options: [
-			{
-				label: 'Group 1',
-				options: [
-					{ value: 'first', label: 'First' },
-					{ value: 'second', label: 'Second' },
-				],
-			},
-			{
-				label: 'Group 2',
-				options: [
-					{ value: 'third', label: 'Third' },
+    ...Default,
+    args: {
+        ...Default.args,
+        options: [
+            {
+                label: 'Group 1',
+                options: [
+                    { value: 'first', label: 'First' },
+                    { value: 'second', label: 'Second' },
+                ],
+            },
+            {
+                label: 'Group 2',
+                options: [
+                    { value: 'third', label: 'Third' },
 
-					{ value: 'fourth', label: 'Fourth' },
-				],
-			},
-		],
-	},
+                    { value: 'fourth', label: 'Fourth' },
+                ],
+            },
+        ],
+    },
 }
 
 export const DotPathOptions: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		valueKey: 'value.val',
-		labelKey: 'label.en',
-		options: [
-			{ value: { val: 'first' }, label: { it: 'Primo', en: 'First' } },
-			{
-				value: { val: 'second' },
-				label: { it: 'Secondo', en: 'Second' },
-			},
-			{ value: { val: 'third' }, label: { it: 'Terzo', en: 'Third' } },
-			{ value: { val: 'fourth' }, label: { it: 'Quarto', en: 'Fourth' } },
-		],
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        valueKey: 'value.id',
+        labelKey: 'label.en',
+        options: [
+            { value: { id: 'first' }, label: { it: 'Primo', en: 'First' } },
+            {
+                value: { id: 'second' },
+                label: { it: 'Secondo', en: 'Second' },
+            },
+            { value: { id: 'third' }, label: { it: 'Terzo', en: 'Third' } },
+            { value: { id: 'fourth' }, label: { it: 'Quarto', en: 'Fourth' } },
+        ],
+    },
 }
 
 export const ObjectValue: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		multiple: true,
-		options: [
-			{
-				value: { name: 'John Doe', email: 'john.doe@test.com' },
-				label: 'John Doe',
-			},
-			{
-				value: { name: 'Jane Doe', email: 'jane.doe@test.com' },
-				label: 'Jane Doe',
-			},
-		],
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        multiple: true,
+        labelKey: 'name',
+        valueKey: '',
+        options: [
+            { name: 'John Doe', email: 'john.doe@test.com' },
+            { name: 'Jane Doe', email: 'jane.doe@test.com' },
+        ],
+    },
 }

package/src/stories/Combobox/ComboboxSlots.stories.ts

@@ -1,15 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
 import { Default } from './Combobox.stories'
 import { defaultArgs, argTypes } from './Combobox.settings'
 import { defaultTest } from './Combobox.test'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
 
 const meta: Meta<typeof VvCombobox> = {
-	title: 'Components/Combobox/Slots',
-	component: VvCombobox,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Combobox/Slots',
+    // @ts-expect-error missing generic components support
+    component: VvCombobox,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -17,37 +18,37 @@ export default meta
 type Story = StoryObj<typeof VvCombobox>
 
 export const Before: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		before: '<div class="vv-badge vv-badge--sm vv-badge--gray vv-badge--outline uppercase">Before</div>',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        before: '<div class="vv-badge vv-badge--sm vv-badge--gray vv-badge--outline uppercase">Before</div>',
+    },
 }
 
 export const After: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		after: '<div class="vv-badge vv-badge--sm vv-badge--gray vv-badge--outline uppercase">After</div>',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        after: '<div class="vv-badge vv-badge--sm vv-badge--gray vv-badge--outline uppercase">After</div>',
+    },
 }
 
 export const Value: Story = {
-	args: {
-		...Default.args,
-		multiple: true,
-	},
-	render: (args) => ({
-		components: { VvCombobox },
-		setup() {
-			return { args }
-		},
-		data() {
-			return {
-				inputValue: undefined,
-			}
-		},
-		template: /*html*/ `
+    args: {
+        ...Default.args,
+        multiple: true,
+    },
+    render: args => ({
+        components: { VvCombobox },
+        setup() {
+            return { args }
+        },
+        data() {
+            return {
+                inputValue: undefined,
+            }
+        },
+        template: /* html */ `
 				<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
 					<template #before v-if="args.before"><div class="pl-sm flex" v-html="args.before"></div></template>
 					<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
@@ -58,26 +59,26 @@ export const Value: Story = {
 				</vv-combobox>
 				<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
 			`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }
 
 export const Option: Story = {
-	args: {
-		...Default.args,
-		multiple: true,
-	},
-	render: (args) => ({
-		components: { VvCombobox, VvIcon },
-		setup() {
-			return { args }
-		},
-		data() {
-			return {
-				inputValue: undefined,
-			}
-		},
-		template: /*html*/ `
+    args: {
+        ...Default.args,
+        multiple: true,
+    },
+    render: args => ({
+        components: { VvCombobox, VvIcon },
+        setup() {
+            return { args }
+        },
+        data() {
+            return {
+                inputValue: undefined,
+            }
+        },
+        template: /* html */ `
 				<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
 					<template #before v-if="args.before"><div class="pl-sm flex" v-html="args.before"></div></template>
 					<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
@@ -91,14 +92,14 @@ export const Option: Story = {
 				</vv-combobox>
 				<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
 			`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }
 
 export const Hint: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		hint: 'Hint <em class="italic">slot!</em>',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        hint: 'Hint <em class="italic">slot!</em>',
+    },
 }

package/src/stories/Dialog/Dialog.settings.ts

@@ -1,45 +1,54 @@
-import { DefaultSlotArgTypes } from '@/stories/argTypes'
+import type { ArgTypes } from '@storybook/vue3'
+import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
-	id: 'dialog',
-	title: 'Dialog Title',
-	transition: 'fade-block',
-	size: 'standard',
-	keepOpen: false,
-	default: 'Default slot content',
+    id: 'dialog',
+    title: 'Dialog Title',
+    transition: 'fade-block',
+    size: 'standard',
+    keepOpen: false,
+    default: 'Default slot content',
 }
 
-export const argTypes = {
-	title: { control: 'text' },
-	transition: {
-		control: 'radio',
-		options: ['fade-block', 'fade-inline', 'scale'],
-	},
-	size: {
-		control: 'radio',
-		options: ['standard', 'small', 'fullscreen'],
-	},
-	...DefaultSlotArgTypes,
-	header: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	footer: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
+export const argTypes: ArgTypes = {
+    title: { control: 'text' },
+    transition: {
+        control: 'radio',
+        options: ['fade-block', 'fade-inline', 'scale'],
+    },
+    modifiers: {
+        ...ModifiersArgTypes.modifiers,
+        options: [
+            'standard',
+            'small',
+            'fullscreen',
+        ],
+    },
+    size: {
+        control: 'radio',
+        options: ['standard', 'small', 'fullscreen'],
+    },
+    ...DefaultSlotArgTypes,
+    header: {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    footer: {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
 }

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

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvDialog from '@/components/VvDialog/VvDialog.vue'
 import { defaultTest } from './Dialog.test'
 import { defaultArgs, argTypes } from './Dialog.settings'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
 
 const meta: Meta<typeof VvDialog> = {
-	title: 'Components/Dialog',
-	component: VvDialog,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Dialog',
+    component: VvDialog,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,21 +16,21 @@ export default meta
 type Story = StoryObj<typeof VvDialog>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvDialog },
-		setup() {
-			return { args }
-		},
-		data: () => ({ open: false }),
-		methods: {
-			onClick() {
-				this.open = !this.open
-			},
-		},
-		template: /*html*/ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvDialog },
+        setup() {
+            return { args }
+        },
+        data: () => ({ open: false }),
+        methods: {
+            onClick() {
+                this.open = !this.open
+            },
+        },
+        template: /* html */ `
 			<vv-dialog v-bind="args" v-model="open" data-testId="element">
 				<template #header v-if="args.header"><div v-html="args.header"></div></template>
 				<template #default v-if="args.default"><div v-html="args.default"></div></template>
@@ -38,14 +38,14 @@ export const Default: Story = {
 			</vv-dialog>
 			<button class="vv-button" @click="onClick" data-testId="button">Toggle</button>
 		`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }
 
 export const KeepOpen: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		keepOpen: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        keepOpen: true,
+    },
 }

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

@@ -1,69 +1,64 @@
+import { userEvent, within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { userEvent } from '@storybook/testing-library'
-import { within } from '@storybook/testing-library'
 import { sleep } from '@/test/sleep'
 
 export async function defaultTest(
-	{ canvasElement, args }: PlayAttributes = {} as PlayAttributes,
+    { canvasElement, args }: PlayAttributes = {} as PlayAttributes,
 ) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLDialogElement
-	const button = (await within(canvasElement).findByTestId(
-		'button',
-	)) as HTMLButtonElement
+    const element = await within(canvasElement).findByTestId('element')
+    const button = await within(canvasElement).findByTestId('button')
 
-	// hidden
-	await expect(element?.style.display).toEqual('none')
+    // hidden
+    await expect(element?.style.display).toEqual('none')
 
-	// open
-	await userEvent.click(button)
-	await expect(element).toHaveProperty('open', true)
+    // open
+    await userEvent.click(button)
+    await expect(element).toHaveProperty('open', true)
 
-	// check accessibility
-	await expect(element).toHaveNoViolations()
+    // check accessibility
+    await expect(element).toHaveNoViolations()
 
-	// size
-	if (args.size) {
-		await expect(element).toHaveClass(`vv-dialog--${args.size}`)
-	}
+    // size
+    if (args.size) {
+        await expect(element).toHaveClass(`vv-dialog--${args.size}`)
+    }
 
-	// default slot
-	if (args.default) {
-		const defaultSlot = element.getElementsByClassName(
-			'vv-dialog__content',
-		)[0].firstElementChild as HTMLElement
-		await expect(
-			defaultSlot.innerHTML.replace(/<!--(.*?)-->/g, ''),
-		).toEqual(args.default)
-	}
+    // default slot
+    if (args.default) {
+        const defaultSlot = element.getElementsByClassName(
+            'vv-dialog__content',
+        )[0].firstElementChild as HTMLElement
+        await expect(
+            defaultSlot.innerHTML.replace(/<!--(.*?)-->/g, ''),
+        ).toEqual(args.default)
+    }
 
-	// header slot
-	if (args.header) {
-		const headerSlot = element.getElementsByClassName(
-			'vv-dialog__header',
-		)[0].firstElementChild as HTMLElement
-		await expect(headerSlot.innerHTML.replace(/<!--(.*?)-->/g, '')).toEqual(
-			args.header,
-		)
-	}
+    // header slot
+    if (args.header) {
+        const headerSlot = element.getElementsByClassName(
+            'vv-dialog__header',
+        )[0].firstElementChild as HTMLElement
+        await expect(headerSlot.innerHTML.replace(/<!--(.*?)-->/g, '')).toEqual(
+            args.header,
+        )
+    }
 
-	// footer slot
-	if (args.footer) {
-		const headerSlot = element.getElementsByClassName(
-			'vv-dialog__footer',
-		)[0].firstElementChild as HTMLElement
-		await expect(headerSlot.innerHTML.replace(/<!--(.*?)-->/g, '')).toEqual(
-			args.footer,
-		)
-	}
+    // footer slot
+    if (args.footer) {
+        const headerSlot = element.getElementsByClassName(
+            'vv-dialog__footer',
+        )[0].firstElementChild as HTMLElement
+        await expect(headerSlot.innerHTML.replace(/<!--(.*?)-->/g, '')).toEqual(
+            args.footer,
+        )
+    }
 
-	// keep open
-	if (!args.keepOpen) {
-		await userEvent.click(element)
-		await sleep(1000)
-		await expect(element).toHaveProperty('open', false)
-		await expect(element?.style.display).toEqual('none')
-	}
+    // keep open
+    if (!args.keepOpen) {
+        await userEvent.click(element)
+        await sleep(1000)
+        await expect(element).toHaveProperty('open', false)
+        await expect(element?.style.display).toEqual('none')
+    }
 }