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

package/src/stories/RadioGroup/RadioGroupSlots.stories.mdx

@@ -1,9 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-import { slotsTest } from './RadioSlots.test.ts'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { slotsTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/Slots" component={VvRadioGroup} />
 
@@ -22,17 +20,13 @@ import { slotsTest } from './RadioSlots.test.ts'
 				setup() {
 					return { args }
 				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected">
-                            <vv-radio id="o1" name="opts" value="1">Opt 1</vv-radio>
-                            <vv-radio id="o2" name="opts" value="2">Opt 2</vv-radio>
-                            <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                        </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong> 
-                    </div>
+				template: `
+					<vv-radio-group v-bind="args" v-model="selected" data-testId="radiogroup">
+						<vv-radio id="o1" name="opts" value="1">Option 1</vv-radio>
+						<vv-radio id="o2" name="opts" value="2">Option 2</vv-radio>
+						<vv-radio id="o3" name="opts" value="3">Option 3</vv-radio>
+					</vv-radio-group>
+					<strong v-if="selected">Selected options: {{selected}} </strong> 
                     `
 			}
 		}}
@@ -56,22 +50,17 @@ import { slotsTest } from './RadioSlots.test.ts'
 				setup() {
 					return { args }
 				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected" role="radiogroup">
-                            <template v-slot:default>
-                                <vv-radio id="o1" name="opts" value="1">Opt 1</vv-radio>
-                                <vv-radio id="o2" name="opts" value="2">Opt 2</vv-radio>
-                                <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                            </template>
-                            <template v-slot:hint="slotProps">
-                                <p>Ciao sono lo slot HINT! {{slotProps}}</p> 
-                            </template>
-                        </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
+				template: `
+					<vv-radio-group v-model="selected" v-bind="args" data-testId="radiogroup">
+						<vv-radio id="o1" name="opts" value="1">Option 1</vv-radio>
+						<vv-radio id="o2" name="opts" value="2">Option 2</vv-radio>
+						<vv-radio id="o3" name="opts" value="3">Option 3</vv-radio>
+						<template #hint="slotProps">
+							<div>Hint label</div>
+							<div>{{slotProps}}</div> 
+						</template>
+					</vv-radio-group>
+					<strong v-if="selected">Selected options: {{selected}} </strong>
                     `
 			}
 		}}
@@ -98,22 +87,16 @@ import { slotsTest } from './RadioSlots.test.ts'
 				setup() {
 					return { args }
 				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected" role="radiogroup">
-                            <template v-slot:default>
-                                <vv-radio id="o1" name="opts" value="1">Opt 1</vv-radio>
-                                <vv-radio id="o2" name="opts" value="2">Opt 2</vv-radio>
-                                <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                            </template>
-                            <template v-slot:valid>
-                                <p>Ciao sono lo slot VALID!</p>
-                            </template>
-                        </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
+				template: `
+					<vv-radio-group v-model="selected" v-bind="args" data-testId="radiogroup">
+						<vv-radio id="o1" name="opts" value="1">Option 1</vv-radio>
+						<vv-radio id="o2" name="opts" value="2">Option 2</vv-radio>
+						<vv-radio id="o3" name="opts" value="3">Option 3</vv-radio>
+						<template #valid>
+							Valid message
+						</template>
+					</vv-radio-group>
+					<strong v-if="selected">Selected options: {{selected}} </strong>
                     `
 			}
 		}}
@@ -140,22 +123,16 @@ import { slotsTest } from './RadioSlots.test.ts'
 				setup() {
 					return { args }
 				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected" role="radiogroup">
-                            <template v-slot:default>
-                                <vv-radio id="o1" name="opts" value="1">Opt 1</vv-radio>
-                                <vv-radio id="o2" name="opts" value="2">Opt 2</vv-radio>
-                                <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                            </template>
-                            <template v-slot:error>
-                                <p>Ciao sono lo slot ERROR!</p>
+				template: `
+                        <vv-radio-group v-model="selected" v-bind="args" data-testId="radiogroup">
+							<vv-radio id="o1" name="opts" value="1">Option 1</vv-radio>
+							<vv-radio id="o2" name="opts" value="2">Option 2</vv-radio>
+							<vv-radio id="o3" name="opts" value="3">Option 3</vv-radio>
+                            <template #error>
+                               Error message
                             </template>
                         </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
+                        <strong v-if="selected">Selected options: {{selected}} </strong>
                     `
 			}
 		}}

package/src/stories/RadioGroup/RadioGroupValid.stories.mdx

@@ -1,10 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-import { radioGroupTest } from './RadioProperty.test.ts'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './RadioGroup.stories.mdx'
+import { radioGroupTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/Valid" component={VvRadioGroup} />
 
@@ -15,19 +13,19 @@ import { Template } from './RadioGroup.stories.mdx'
 		name="Valid"
 		play={async (ctx) => {
 			radioGroupTest(ctx, {
-				className: 'vv-input-radio-group--valid'
+				className: 'vv-radio-group--valid'
 			})
 		}}
 		args={{
 			name: 'vv-group-options-valid-label',
 			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`,
 			valid: true,
-			validLabel: 'Campo corretto',
+			validLabel: 'Valid label',
 			role: 'radiogroup'
 		}}>
 		{Template.bind({})}

package/src/stories/RadioGroup/RadioGroupVertical.stories.mdx

@@ -1,10 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-import { radioGroupTest } from './RadioProperty.test.ts'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './RadioGroup.stories.mdx'
+import { radioGroupTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/Vertical" component={VvRadioGroup} />
 
@@ -21,9 +19,9 @@ import { Template } from './RadioGroup.stories.mdx'
 		args={{
 			name: 'vertical',
 			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' }
 			],
 			vertical: true,
 			role: 'radiogroup'

package/src/stories/Select/Select.stories.mdx

@@ -1,31 +1,32 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
-import { VvSelectProps } from '../../components/VvSelect/VvSelect'
-import ObjectUtilities from '../../utils/ObjectUtilities'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { VvSelectProps } from '@/components/VvSelect'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import { selectTest } from './Select.test'
 
 <Meta
 	title="Components/Select"
 	component={VvSelect}
-	args={{
-		...ObjectUtilities.propsToObject(VvSelectProps),
-		maxValues: -1,
-		label: 'Lorem Ipsum',
-		placeholder: 'Placeholder',
-		options: [
-			{
-				label: 'Option 1',
-				value: 1
-			},
-			{
-				label: 'Option 2',
-				value: 2
-			},
-			{
-				label: 'Option 3',
-				value: 3
-			}
-		]
-	}}
+    args={{
+    	...propsToObject(VvSelectProps),
+    	label: 'Lorem Ipsum',
+    	placeholder: 'Placeholder',
+    	options: [
+    		{
+    			label: 'Option 1',
+    			value: 1
+    		},
+    		{
+    			label: 'Option 2',
+    			value: 2
+    		},
+    		{
+    			label: 'Option 3',
+    			value: 3
+    		}
+    	]
+    }}
+
 />
 
 export const Template = (args) => ({
@@ -35,14 +36,14 @@ export const Template = (args) => ({
 	},
 	data() {
 		return {
-			value: '',
+			value: undefined,
 			optionsString: ['Option 4', 'Option 5', 'Option 6']
 		}
 	},
-	template: `<div class="w-1/2">
-            <vv-select v-bind="args" v-model:modelValue="value" />
-			value: {{ value }}
-        </div>`
+	template: `
+		<vv-select v-bind="args" v-model="value" data-testId="select" />
+		<div>Selected: {{ value }} </div>
+		`
 })
 
 # VvSelect
@@ -51,5 +52,7 @@ Stories of `VvSelect`.
 Let's define a story for our playground `select`:
 
 <Canvas>
-	<Story name="vv-select">{Template.bind({})}</Story>
+	<Story name="vv-select" play={selectTest}>
+		{Template.bind({})}
+	</Story>
 </Canvas>

package/src/stories/Select/Select.test.ts

@@ -0,0 +1,104 @@
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
+import { expect } from '@/test/expect'
+import { userEvent } from '@storybook/testing-library'
+import { within } from '@storybook/testing-library'
+
+export async function selectTest(
+	{ canvasElement, ...data }: PlayAttributes,
+	{ isClickDisabled = false, className = null }: ComponentConfig = {}
+) {
+	const selectParent = (await within(canvasElement).findByTestId(
+		'select'
+	)) as HTMLDetailsElement
+	// classes test
+	expect(selectParent).toHaveClass('vv-select')
+	className && expect(selectParent).toHaveClass(className)
+	const select = document.getElementsByClassName(
+		'vv-dropdown'
+	)[0] as HTMLInputElement
+	expect(select.parentElement).toHaveClass('vv-select__wrapper')
+	const selectInput = document.getElementsByClassName(
+		'vv-select__input'
+	)[0] as HTMLInputElement
+
+	// placeholder test
+	data.args.placeholder &&
+		expect(select.outerHTML).toContain(
+			`placeholder="${data.args.placeholder}"`
+		)
+
+	// test every select option
+	const selectItems = Array.from(select.children)
+	let checkedOptions = 0
+	for (let index = 0; index < selectItems.length; index++) {
+		const label = selectItems[index].children[0]
+
+		// click test
+		if (isClickDisabled) {
+			await expect(label).not.toBeClicked()
+		} else {
+			await expect(label).toBeClicked()
+			const option = data.args.options[index]
+
+			//  value and useObject test
+			const inputRadio = label.children[0] as HTMLInputElement
+			data.args.useObject
+				? expect(document.getElementById('value')?.innerText).toEqual(
+						`Value: { "label": "${option.label}", "value": ${option.value} }`
+				  )
+				: expect(inputRadio.value).toEqual(
+						option.value ? `${option.value}` : `${option}`
+				  )
+
+			// maxValues, label and v-model test
+			if (data.args.multiple) {
+				if (checkedOptions == data.args.maxValues) {
+					expect(inputRadio.checked).toBe(false)
+				} else {
+					expect(inputRadio.checked).toEqual(true)
+					expect(
+						label.textContent && selectInput.innerText
+					).toContain(option.label ? `${option.label}` : `${option}`)
+
+					// separator test
+					data.args.separator &&
+						index > 0 &&
+						expect(selectInput.innerText).toContain(
+							data.args.separator
+						)
+				}
+			} else {
+				expect(label.textContent && selectInput.innerText).toEqual(
+					option.label ? `${option.label}` : `${option}`
+				)
+			}
+			inputRadio.checked && checkedOptions++
+		}
+	}
+
+	// multiple test
+	if (data.args.multiple) {
+		let checkedOptions = 0
+		for (let index = 0; index < selectItems.length; index++) {
+			const option = selectItems[index]
+			const optionLabel = option.children[0] as HTMLInputElement
+			const optionRadio = optionLabel.children[0] as HTMLInputElement
+			optionRadio.checked && checkedOptions++
+		}
+		expect(checkedOptions).toBeGreaterThan(0)
+	}
+
+	expect(selectParent).toHaveNoViolations()
+}
+
+export async function searchableTest() {
+	const summary = document.getElementsByTagName('summary')[0]
+	await userEvent.click(summary)
+	setTimeout(() => {
+		userEvent.keyboard('Option 1')
+	}, 700)
+	const optionsList = Array.from(
+		document.getElementsByClassName('vv-dropdown')
+	)
+	expect(optionsList.length).toBe(1)
+}

package/src/stories/Select/SelectDisabled.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 <Meta title="Components/Select/Props/disabled" />
 
@@ -19,7 +19,7 @@ Let's define a story for our `disabled` select.
 					}
 				},
 				template: `<div class="w-1/2">
-						<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />
+						<vv-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />
 					</div>`
 			}
 		}}
@@ -28,5 +28,5 @@ Let's define a story for our `disabled` select.
 
 <Source
 	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />`}
+	code={`<vv-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />`}
 />

package/src/stories/Select/SelectMaxValues.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 <Meta title="Components/Select/Props/maxValues" />
 
@@ -19,7 +19,7 @@ Let's define a story for our multple `max-values` select.
 					}
 				},
 				template: `<div class="w-1/2">
-						<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple max-values="2" />
+						<vv-select v-model="value" :options="options" label="Label 1" multiple max-values="2" />
 						value: {{ value }}
 					</div>`
 			}
@@ -29,5 +29,5 @@ Let's define a story for our multple `max-values` select.
 
 <Source
 	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple max-values="2" />`}
+	code={`<vv-select v-model="value" :options="options" label="Label 1" multiple max-values="2" />`}
 />

package/src/stories/Select/SelectMultiple.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 <Meta title="Components/Select/Props/multiple" />
 
@@ -49,10 +49,9 @@ Let's define a story for our `multiple` select.
 						]
 					}
 				},
-				template: `<div class="w-1/2">
-						<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple />
-						value: {{ value }}
-					</div>`
+				template: `
+					<vv-select v-model="value" :options="options" label="Label 1" multiple placeholder="Select" />
+					<div>Value: {{ value }}</div>`
 			}
 		}}
 	</Story>
@@ -60,5 +59,5 @@ Let's define a story for our `multiple` select.
 
 <Source
 	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple />`}
+	code={`<vv-select v-model="value" :options="options" label="Label 1" multiple />`}
 />

package/src/stories/Select/SelectNative.stories.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
 import { Template } from './Select.stories.mdx'
-import { VvSelectProps } from '../../components/VvSelect/VvSelect'
-import ObjectUtilities from '../../utils/ObjectUtilities'
+import { VvSelectProps } from '@/components/VvSelect'
+import { propsToObject } from '@/utils/ObjectUtilities'
 
 <Meta title="Components/Select/Props/native" />
 
@@ -14,8 +14,7 @@ Let's define a story for our `native` select.
 	<Story
 		name="native"
 		args={{
-			...ObjectUtilities.propsToObject(VvSelectProps),
-			maxValues: -1,
+			...propsToObject(VvSelectProps),
 			label: 'Lorem Ipsum',
 			placeholder: 'Placeholder',
 			options: [
@@ -32,8 +31,7 @@ Let's define a story for our `native` select.
 					value: 3
 				}
 			],
-			native: true,
-			value: ''
+			native: true
 		}}>
 		{Template.bind()}
 	</Story>
@@ -41,5 +39,5 @@ Let's define a story for our `native` select.
 
 <Source
 	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" native />`}
+	code={`<vv-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" native />`}
 />

package/src/stories/Select/SelectOptions.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 <Meta title="Components/Select/Props/options" />
 
@@ -59,11 +59,11 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 				},
 				template: `<div class="flex gap-32">
 						<div class="w-1/2">
-							<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" />
+							<vv-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" />
 							value: {{ value }}
 						</div>
 						<div class="w-1/2">
-							<vv-select v-model:modelValue="objectValue" :options="optionsObject" placeholder="Placeholder" label="Label 1" />
+							<vv-select v-model="objectValue" :options="optionsObject" placeholder="Placeholder" label="Label 1" />
 							value: {{ objectValue }}
 						</div>
 					</div>`
@@ -74,5 +74,5 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 
 <Source
 	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" />`}
+	code={`<vv-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" />`}
 />

package/src/stories/Select/SelectSearchable.stories.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { searchableTest } from './Select.test'
 
 <Meta title="Components/Select/Props/searchable" />
 
@@ -28,7 +29,7 @@ Let's define a story for our select with props:
 />
 
 <Canvas>
-	<Story name="searchable">
+	<Story name="searchable" play={searchableTest}>
 		{() => {
 			return {
 				components: { VvSelect },
@@ -52,15 +53,15 @@ Let's define a story for our select with props:
 						]
 					}
 				},
-				template: `<div class="w-1/2 flex gap-32">
-						<vv-select v-model:modelValue="value" @change:search="searchText = $event" :options="options" label="Label 1" searchable label-no-result="No results" search-placeholder="Search" debounce-search="1000" />
-						<div class="my-auto">
-							search text: {{ searchText }}
-						</div>
-						<div class="my-auto">
-							value: {{ value }}
-						</div>
-					</div>`
+				template: `
+					<vv-select v-model="value" @change:search="searchText = $event" :options="options" label="Label 1" searchable label-no-result="No results" search-placeholder="Search" debounce-search="1000" />
+					<div>
+						Search: {{ searchText }}
+					</div>
+					<div>
+						Selected: {{ value }}
+					</div>
+				`
 			}
 		}}
 	</Story>
@@ -69,7 +70,7 @@ Let's define a story for our select with props:
 <Source
 	language="html"
 	code={`<vv-select
-	v-model:modelValue="value"
+	v-model="value"
 	:options="options"
 	label="Label 1"
 	searchable

package/src/stories/Select/SelectSeparator.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 <Meta title="Components/Select/Props/separator" />
 
@@ -50,7 +50,7 @@ Let's define a story for our `separator` select.
 					}
 				},
 				template: `<div class="w-1/2">
-						<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple separator=" - " />
+						<vv-select v-model="value" :options="options" label="Label 1" multiple separator=" - " />
 						value: {{ value }}
 					</div>`
 			}
@@ -60,5 +60,5 @@ Let's define a story for our `separator` select.
 
 <Source
 	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple separator=" - " />`}
+	code={`<vv-select v-model="value" :options="options" label="Label 1" multiple separator=" - " />`}
 />

package/src/stories/Select/SelectUseObject.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 <Meta title="Components/Select/Props/useObject" />
 
@@ -52,7 +52,7 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 					}
 				},
 				template: `<div class="w-1/2">
-						<vv-select v-model:modelValue="value" :options="options" label="Label 1" use-object />
+						<vv-select v-model="value" :options="options" label="Label 1" use-object />
 						value: {{ value }}
 					</div>`
 			}
@@ -62,5 +62,5 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 
 <Source
 	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" label="Label 1" use-object />`}
+	code={`<vv-select v-model="value" :options="options" label="Label 1" use-object />`}
 />