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

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

@@ -1,14 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
 import { defaultTest } from './Combobox.test'
 import { defaultArgs, argTypes } from './Combobox.settings'
+import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
 
 const meta: Meta<typeof VvCombobox> = {
-	title: 'Components/Combobox',
-	component: VvCombobox,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Combobox',
+    // @ts-expect-error missing generic components support
+    component: VvCombobox,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,16 +17,16 @@ export default meta
 type Story = StoryObj<typeof VvCombobox>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvCombobox },
-		setup() {
-			return { args }
-		},
-		data: () => ({ inputValue: undefined }),
-		template: /* html */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvCombobox },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
 			<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
 				<template #dropdown::before v-if="args['dropdown::before']"><div class="flex" v-html="args['dropdown::before']"></div></template>
 				<template #dropdown::after v-if="args['dropdown::after']"><div class="flex" v-html="args['dropdown::after']"></div></template>
@@ -35,142 +36,150 @@ export const Default: Story = {
 			</vv-combobox>
 			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
 		`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }
 
 export const Disabled: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		disabled: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        disabled: true,
+    },
 }
 
 export const Readonly: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		readonly: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        readonly: true,
+    },
 }
 
 export const Unselectable: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		unselectable: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        unselectable: true,
+    },
 }
 
 export const Valid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		valid: true,
-		validLabel: 'Selected response is valid.',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        valid: true,
+        validLabel: 'Selected response is valid.',
+    },
 }
 
 export const Invalid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		invalid: true,
-		invalidLabel: 'Selected response is invalid.',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        invalid: true,
+        invalidLabel: 'Selected response is invalid.',
+    },
 }
 
 export const Hint: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		hintLabel: 'Please fill the input above.',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        hintLabel: 'Please fill the input above.',
+    },
 }
 
 export const Loading: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		loading: true,
-		loadingLabel: 'Loading...',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        loading: true,
+        loadingLabel: 'Loading...',
+    },
 }
 
 export const Searchable: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		searchable: true,
-		searchPlaceholder: 'Search...',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        searchable: true,
+        searchPlaceholder: 'Search...',
+    },
 }
 
 export const Floating: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		floating: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        floating: true,
+    },
 }
 
 export const Native: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		native: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        native: true,
+    },
 }
 
 export const Arrow: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		arrow: true,
-		offset: 10,
-		triggerWidth: false,
-		placement: 'bottom-end',
-		dropdownModifiers: 'full-bleed rounded',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        arrow: true,
+        offset: 10,
+        triggerWidth: false,
+        placement: 'bottom-end',
+        dropdownModifiers: 'full-bleed rounded',
+    },
 }
 
 export const Badges: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		badges: true,
-		multiple: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        badges: true,
+        multiple: true,
+    },
 }
 
 export const AutoOpen: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		autoOpen: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        autoOpen: true,
+    },
 }
 
 export const KeepOpen: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		keepOpen: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        keepOpen: true,
+    },
+}
+
+export const autoselectFirst: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        autoselectFirst: true,
+    },
 }
 
 export const Size: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		'dropdown::before':
+    ...Default,
+    args: {
+        ...defaultArgs,
+        'dropdown::before':
 			'<div class="bg-brand text-white flex-1 text-center uppercase">Before</div>',
-		'dropdown::after':
+        'dropdown::after':
 			'<div class="bg-brand text-white flex-1 text-center uppercase">After</div>',
-		options: Array.from({ length: 30 }, (_, i) => ({
-			label: `Option ${i + 1}`,
-			value: String(i + 1),
-		})),
-	},
+        'options': Array.from({ length: 30 }, (_, i) => ({
+            label: `Option ${i + 1}`,
+            value: String(i + 1),
+        })),
+    },
 }

package/src/stories/Combobox/Combobox.test.ts

@@ -1,110 +1,110 @@
+import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
 import { sleep } from '@/test/sleep'
 import { defaultTest as selectDefaultTest } from '@/stories/Select/Select.test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	// native
-	if (args.native) {
-		await selectDefaultTest({ canvasElement, args })
-		return
-	}
+    // native
+    if (args.native) {
+        await selectDefaultTest({ canvasElement, args })
+        return
+    }
 
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-	const value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
-	const dropdown = element.getElementsByClassName(
-		'vv-dropdown',
-	)[0] as HTMLElement
-	const dropdownFirstItem = dropdown.querySelectorAll(
-		'div[role="option"]',
-	)[0] as HTMLElement
-	const dropdownSecondItem = dropdown.querySelectorAll(
-		'div[role="option"]',
-	)[1] as HTMLElement
-	const hint = element.getElementsByClassName('vv-select__hint')[0]
+    const { getOptionValue } = useOptions(args)
 
-	// disabled
-	if (args.disabled) {
-		await expect(element).toHaveClass('vv-select--disabled')
-	}
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    const dropdown = element.getElementsByClassName(
+        'vv-dropdown',
+    )[0] as HTMLElement
+    const dropdownFirstItem = dropdown.querySelectorAll(
+        'div[role="option"]',
+    )[0] as HTMLElement
+    const dropdownSecondItem = dropdown.querySelectorAll(
+        'div[role="option"]',
+    )[1] as HTMLElement
+    const hint = element.getElementsByClassName('vv-select__hint')[0]
 
-	// readonly
-	if (args.readonly) {
-		await expect(element).toHaveClass('vv-select--readonly')
-	}
+    // disabled
+    if (args.disabled) {
+        await expect(element).toHaveClass('vv-select--disabled')
+    }
 
-	if (
-		!args.invalid &&
-		!args.disabled &&
-		!args.readonly &&
-		args.options &&
-		args.options.length > 0
-	) {
-		// select first value
-		await expect(dropdownFirstItem).toBeClicked()
-		await sleep()
+    // readonly
+    if (args.readonly) {
+        await expect(element).toHaveClass('vv-select--readonly')
+    }
 
-		const { getOptionValue } = useOptions(args)
+    if (
+        !args.invalid
+        && !args.disabled
+        && !args.readonly
+        && args.options
+        && args.options.length > 0
+    ) {
+        // select first value
+        if (!args.autoselectFirst) {
+            await expect(dropdownFirstItem).toBeClicked()
+            await sleep()
+        }
 
-		const firstValue = getOptionValue(
-			args.options[0].options?.[0] ?? args.options[0],
-		)
-		// in grouped options the first element is not selectable
-		if (args.multiple) {
-			await expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
-		} else {
-			await expect(value.innerHTML).toEqual(firstValue)
-		}
+        const firstValue = getOptionValue(
+            args.options[0].options?.[0] ?? args.options[0],
+        )
+        // in grouped options the first element is not selectable
+        if (args.multiple) {
+            await expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
+        }
+        else {
+            await expect(value.innerHTML).toEqual(firstValue)
+        }
 
-		// select second value
-		if (args.options && args.options.length > 1) {
-			await expect(dropdownSecondItem).toBeClicked()
-			await sleep()
-			const secondValue = getOptionValue(
-				args.options[0].options?.[1] ?? args.options[1],
-			)
-			if (args.multiple) {
-				await expect(JSON.parse(value.innerHTML)).toEqual([
-					firstValue,
-					secondValue,
-				])
-			} else {
-				await expect(value.innerHTML).toEqual(secondValue)
-			}
-		}
-	}
+        // select second value
+        if (args.options && args.options.length > 1) {
+            await expect(dropdownSecondItem).toBeClicked()
+            await sleep()
+            const secondValue = getOptionValue(
+                args.options[0].options?.[1] ?? args.options[1],
+            )
+            if (args.multiple) {
+                await expect(JSON.parse(value.innerHTML)).toEqual([
+                    firstValue,
+                    secondValue,
+                ])
+            }
+            else {
+                await expect(value.innerHTML).toEqual(secondValue)
+            }
+        }
+    }
 
-	// invalid
-	if (args.invalid) {
-		await expect(element).toHaveClass('vv-select--invalid')
-		if (args.invalidLabel) {
-			await expect(hint.innerHTML).toEqual(args.invalidLabel)
-		}
-	}
+    // invalid
+    if (args.invalid) {
+        await expect(element).toHaveClass('vv-select--invalid')
+        if (args.invalidLabel) {
+            await expect(hint.innerHTML).toEqual(args.invalidLabel)
+        }
+    }
 
-	// valid
-	if (args.valid) {
-		await expect(element).toHaveClass('vv-select--valid')
-		if (args.validLabel) {
-			await expect(hint.innerHTML).toEqual(args.validLabel)
-		}
-	}
+    // valid
+    if (args.valid) {
+        await expect(element).toHaveClass('vv-select--valid')
+        if (args.validLabel) {
+            await expect(hint.innerHTML).toEqual(args.validLabel)
+        }
+    }
 
-	// loading
-	if (args.loading) {
-		await expect(element).toHaveClass('vv-select--loading')
-	}
+    // loading
+    if (args.loading) {
+        await expect(element).toHaveClass('vv-select--loading')
+    }
 
-	// hint
-	if (args.hintLabel) {
-		await expect(hint.innerHTML).toEqual(args.hintLabel)
-	}
+    // hint
+    if (args.hintLabel) {
+        await expect(hint.innerHTML).toEqual(args.hintLabel)
+    }
 
-	// check accessibility
-	await expect(element).toHaveNoViolations()
+    // check accessibility
+    await expect(element).toHaveNoViolations()
 }

package/src/stories/Combobox/ComboboxIconPosition.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/Icon',
-	component: VvCombobox,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Combobox/Icon',
+    // @ts-expect-error missing generic components support
+    component: VvCombobox,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,29 +16,29 @@ export default meta
 type Story = StoryObj<typeof VvCombobox>
 
 export const DefaultIconPosition: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'heart',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: 'heart',
+    },
 }
 
 export const After: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'heart',
-		iconPosition: 'after',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: 'heart',
+        iconPosition: 'after',
+    },
 }
 
 export const Src: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: {
-			name: 'engineering',
-			src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/social/engineering/materialicons/24px.svg',
-		},
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: {
+            name: 'engineering',
+            src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/social/engineering/materialicons/24px.svg',
+        },
+    },
 }

package/src/stories/Combobox/ComboboxMultiple.stories.ts

@@ -1,13 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
 import { defaultArgs, argTypes } from './Combobox.settings'
 import { Default } from './Combobox.stories'
+import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
 
 const meta: Meta<typeof VvCombobox> = {
-	title: 'Components/Combobox/Multiple',
-	component: VvCombobox,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Combobox/Multiple',
+    // @ts-expect-error missing generic components support
+    component: VvCombobox,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,27 +16,36 @@ export default meta
 type Story = StoryObj<typeof VvCombobox>
 
 export const DefaultMultiple: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		multiple: true,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        multiple: true,
+    },
+}
+
+export const MinValues: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        multiple: true,
+        minValues: 2,
+    },
 }
 
 export const MaxValues: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		multiple: true,
-		maxValues: 2,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        multiple: true,
+        maxValues: 2,
+    },
 }
 
 export const Separator: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		multiple: true,
-		separator: ' | ',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        multiple: true,
+        separator: ' | ',
+    },
 }