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

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'
 

package/src/stories/Dropdown/Dropdown.stories.mdx

@@ -1,13 +1,14 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
-import { VvDropdownProps } from '../../components/VvDropdown/VvDropdown'
-import ObjectUtilities from '../../utils/ObjectUtilities'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import { VvDropdownProps } from '@/components/VvDropdown'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import { dropdownTest } from './Dropdown.test'
 
 <Meta
 	title="Components/Dropdown"
 	component={VvDropdown}
 	args={{
-		...ObjectUtilities.propsToObject(VvDropdownProps),
+		...propsToObject(VvDropdownProps),
 		options: [
 			{
 				label: 'Option 1',
@@ -35,8 +36,9 @@ export const Template = (args) => ({
 			value: ''
 		}
 	},
-	template: `<div class="mb-lg">Value: {{ value }}</div>
-		<vv-dropdown v-bind="args" v-model:modelValue="value" class="w-1/2 ml-lg" />
+	template: `
+		<vv-dropdown v-bind="args" v-model="value" class="max-w-224 relative" />
+		<div class="mt-24">Selected: <span data-testId="selected">{{ value }}</span></div>
 		`
 })
 
@@ -46,5 +48,7 @@ Stories of `VvDropdown`.
 Let's define a story for our playground `dropdown`:
 
 <Canvas>
-	<Story name="vv-dropdown">{Template.bind({})}</Story>
+	<Story name="vv-dropdown" play={dropdownTest}>
+		{Template.bind({})}
+	</Story>
 </Canvas>

package/src/stories/Dropdown/Dropdown.test.ts

@@ -0,0 +1,80 @@
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
+import { within } from '@storybook/testing-library'
+import { expect } from '@/test/expect'
+
+export async function dropdownTest(
+	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes,
+	{ isClickDisabled = false, className = null }: ComponentConfig = {}
+) {
+	const dropdown = await within(canvasElement).findByRole('listbox')
+
+	// class test
+	expect(dropdown).toHaveClass('vv-dropdown')
+	className && expect(dropdown).toHaveClass(className)
+
+	// options test
+	const dropdownItems = dropdown.children
+	const propOptions = data.args.options
+	const value = (await within(canvasElement).findByTestId(
+		'selected'
+	)) as HTMLSpanElement
+
+	if (data.args.labelNoResult && propOptions.length == 0) {
+		const optionLabel = dropdownItems[0].firstChild as HTMLInputElement
+		expect(optionLabel.innerText).toEqual(data.args.labelNoResult)
+	}
+	if (propOptions.length > 0) {
+		let checkedOptions = 0
+
+		// tests all the options
+		for (let index = 0; index < dropdownItems.length; index++) {
+			const option = dropdownItems[index]
+			const optionLabel = option.children[0] as HTMLInputElement
+			const optionRadio = optionLabel.children[0] as HTMLInputElement
+
+			// disabled test
+			isClickDisabled && expect(optionLabel).not.toBeClicked()
+			data.args.disabled && expect(optionRadio).toHaveProperty('disabled')
+
+			// click test
+			isClickDisabled
+				? await expect(optionLabel).not.toBeClicked()
+				: await expect(optionLabel).toBeClicked()
+
+			// radio checked and maxValue test
+			if (!isClickDisabled) {
+				data.args.maxValues && checkedOptions == data.args.maxValues
+					? expect(optionRadio.checked).toBe(false)
+					: expect(optionRadio.checked).toBe(true)
+			}
+			optionRadio.checked && checkedOptions++
+
+			// label and value test
+			const propOptionLabel =
+				propOptions[index].label || propOptions[index]
+			const propOptionValue =
+				propOptions[index].value || propOptions[index]
+			await expect(optionLabel.innerText.trim()).toEqual(propOptionLabel)
+			await expect(optionRadio.value).toEqual(`${propOptionValue}`)
+
+			// useObject test
+			data.args.useObject &&
+				expect(value?.innerText).toBe(
+					`{ "label": "${propOptionLabel}", "value": ${propOptionValue} }`
+				)
+		}
+
+		// multiple test
+		if (data.args.multiple) {
+			let checkedOptions = 0
+			for (let index = 0; index < dropdownItems.length; index++) {
+				const option = dropdownItems[index]
+				const optionLabel = option.children[0] as HTMLInputElement
+				const optionRadio = optionLabel.children[0] as HTMLInputElement
+				optionRadio.checked && checkedOptions++
+			}
+			expect(checkedOptions).toBeGreaterThan(0)
+		}
+	}
+	await expect(dropdown).toHaveNoViolations()
+}

package/src/stories/Dropdown/DropdownDisabled.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 import { Template } from './Dropdown.stories.mdx'
+import { dropdownTest } from './Dropdown.test.ts'
 
 <Meta title="Components/Dropdown/Props/disabled" />
 
@@ -11,6 +12,12 @@ Let's define a story for our `disabled` dropdown.
 <Canvas>
 	<Story
 		name="disabled"
+		play={async (ctx) => {
+			dropdownTest(ctx, {
+				className: 'vv-dropdown--disabled',
+				isClickDisabled: true
+			})
+		}}
 		args={{
 			options: ['Option 4', 'Option 5', 'Option 6'],
 			disabled: true
@@ -21,5 +28,5 @@ Let's define a story for our `disabled` dropdown.
 
 <Source
 	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" disabled />`}
+	code={`<vv-dropdown v-model="value" :options="options" disabled />`}
 />

package/src/stories/Dropdown/DropdownLabelNoResults.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 import { Template } from './Dropdown.stories.mdx'
 
 <Meta title="Components/Dropdown/Props/labelNoResults" />
@@ -21,5 +21,5 @@ Let's define a story for our multple `max-values` dropdown.
 
 <Source
 	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" label-no-results="Non sono presenti elementi!" />`}
+	code={`<vv-dropdown v-model="value" :options="options" label-no-results="Non sono presenti elementi!" />`}
 />

package/src/stories/Dropdown/DropdownMaxValues.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 import { Template } from './Dropdown.stories.mdx'
+import { dropdownTest } from './Dropdown.test.ts'
 
 <Meta title="Components/Dropdown/Props/maxValues" />
 
@@ -11,6 +12,7 @@ Let's define a story for our multple `max-values` dropdown.
 <Canvas>
 	<Story
 		name="maxValues"
+		play={dropdownTest}
 		args={{
 			options: ['Option 4', 'Option 5', 'Option 6'],
 			multiple: true,
@@ -22,5 +24,5 @@ Let's define a story for our multple `max-values` dropdown.
 
 <Source
 	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" multiple max-values="2" />`}
+	code={`<vv-dropdown v-model="value" :options="options" multiple max-values="2" />`}
 />