@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.51

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

@@ -1,14 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { argTypes, defaultArgs } from './Select.settings'
 import { defaultTest } from './Select.test'
-import { defaultArgs, argTypes } from './Select.settings'
 
 const meta: Meta<typeof VvSelect> = {
-	title: 'Components/Select',
-	component: VvSelect,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Select',
+    // @ts-expect-error missing generic components support
+    component: VvSelect,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,16 +17,16 @@ export default meta
 type Story = StoryObj<typeof VvSelect>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvSelect },
-		setup() {
-			return { args }
-		},
-		data: () => ({ inputValue: undefined }),
-		template: /*html*/ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvSelect },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
 			<vv-select v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
 				<template #before v-if="args.before"><div class="flex" v-html="args.before"></div></template>
 				<template #after v-if="args.after"><div class="flex" v-html="args.after"></div></template>
@@ -33,81 +34,89 @@ export const Default: Story = {
 			</vv-select>
 			<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 Multiple: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		multiple: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        multiple: 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 Floating: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		floating: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        floating: true,
+    },
+}
+
+export const AutoselectFirst: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        autoselectFirst: true,
+    },
 }

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

@@ -1,85 +1,82 @@
 import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-	const value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
-	const select = element.getElementsByTagName(
-		'select',
-	)[0] as HTMLSelectElement
-	const hint = element.getElementsByClassName('vv-select__hint')[0]
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    const select = element.getElementsByTagName('select')[0]
+    const hint = element.getElementsByClassName('vv-select__hint')[0]
 
-	const { getOptionValue } = useOptions(args)
+    const { getOptionValue } = useOptions(args)
 
-	if (
-		!args.invalid &&
-		!args.disabled &&
-		!args.readonly &&
-		args.options &&
-		args.options.length > 0
-	) {
-		// select first value
-		const firstValue = getOptionValue(
-			args.options[0].options?.[0] ?? args.options[0],
-		)
-		select.value = firstValue
-		select.dispatchEvent(new Event('change'))
-		await sleep()
-		if (args.multiple) {
-			await expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
-		} else {
-			await expect(value.innerHTML).toEqual(firstValue)
-		}
-	}
+    if (
+        !args.invalid
+        && !args.disabled
+        && !args.readonly
+        && args.options
+        && args.options.length > 0
+    ) {
+        // select first value
+        const firstValue = getOptionValue(
+            args.options[0].options?.[0] ?? args.options[0],
+        )
+        if (!args.autoselectFirst) {
+            select.value = firstValue
+            select.dispatchEvent(new Event('change'))
+            await sleep()
+        }
+        if (args.multiple) {
+            await expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
+        }
+        else {
+            await expect(value.innerHTML).toEqual(firstValue)
+        }
+    }
 
-	// disabled
-	if (args.disabled) {
-		await expect(element).toHaveClass('vv-select--disabled')
-		await expect(select).toHaveProperty('disabled')
-		await expect(select).not.toBeClicked()
-	}
+    // disabled
+    if (args.disabled) {
+        await expect(element).toHaveClass('vv-select--disabled')
+        await expect(select).toHaveProperty('disabled')
+        await expect(select).not.toBeClicked()
+    }
 
-	// readonly
-	if (args.readonly) {
-		await expect(element).toHaveClass('vv-select--readonly')
-		await expect(select).toHaveProperty('disabled')
-		await expect(select).not.toBeClicked()
-	}
+    // readonly
+    if (args.readonly) {
+        await expect(element).toHaveClass('vv-select--readonly')
+        await expect(select).toHaveProperty('disabled')
+        await expect(select).not.toBeClicked()
+    }
 
-	// invalid
-	if (args.invalid) {
-		await expect(element).toHaveClass('vv-select--invalid')
-		await expect(select).toHaveProperty('ariaInvalid')
-		if (args.invalidLabel) {
-			await expect(hint.innerHTML).toEqual(args.invalidLabel)
-		}
-	}
+    // invalid
+    if (args.invalid) {
+        await expect(element).toHaveClass('vv-select--invalid')
+        await expect(select).toHaveProperty('ariaInvalid')
+        if (args.invalidLabel) {
+            await expect(hint.innerHTML).toEqual(args.invalidLabel)
+        }
+    }
 
-	// valid
-	if (args.valid) {
-		await expect(element).toHaveClass('vv-select--valid')
-		await expect(select).toHaveProperty('ariaInvalid', 'false')
-		if (args.validLabel) {
-			await expect(hint.innerHTML).toEqual(args.validLabel)
-		}
-	}
+    // valid
+    if (args.valid) {
+        await expect(element).toHaveClass('vv-select--valid')
+        await expect(select).toHaveProperty('ariaInvalid', 'false')
+        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/Select/SelectIconPosition.stories.ts

@@ -1,13 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { argTypes, defaultArgs } from './Select.settings'
 import { Default } from './Select.stories'
-import { defaultArgs, argTypes } from './Select.settings'
 
 const meta: Meta<typeof VvSelect> = {
-	title: 'Components/Select/Icon',
-	component: VvSelect,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Select/Icon',
+    // @ts-expect-error missing generic components support
+    component: VvSelect,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,29 +16,29 @@ export default meta
 type Story = StoryObj<typeof VvSelect>
 
 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',
-	},
+export const After: Story = {
+    ...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/Select/SelectOptions.stories.ts

@@ -1,13 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { argTypes, defaultArgs } from './Select.settings'
 import { Default } from './Select.stories'
-import { defaultArgs, argTypes } from './Select.settings'
 
 const meta: Meta<typeof VvSelect> = {
-	title: 'Components/Select/Options',
-	component: VvSelect,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Select/Options',
+    // @ts-expect-error missing generic components support
+    component: VvSelect,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,63 +16,62 @@ export default meta
 type Story = StoryObj<typeof VvSelect>
 
 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' },
-			{ value: 'third', name: 'Third' },
-		],
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        labelKey: 'name',
+        options: [
+            { value: 'first', name: 'First' },
+            { value: 'second', name: 'Second' },
+            { 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' },
-					{ value: 'fourth', label: 'Fourth' },
-				],
-			},
-		],
-	},
+    ...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' },
+                ],
+            },
+        ],
+    },
 }

package/src/stories/Select/SelectSlots.stories.ts

@@ -1,13 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { argTypes, defaultArgs } from './Select.settings'
 import { Default } from './Select.stories'
-import { defaultArgs, argTypes } from './Select.settings'
 
 const meta: Meta<typeof VvSelect> = {
-	title: 'Components/Select/Slots',
-	component: VvSelect,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Select/Slots',
+    // @ts-expect-error missing generic components support
+    component: VvSelect,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,25 +16,25 @@ export default meta
 type Story = StoryObj<typeof VvSelect>
 
 export const Before: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		before: '<div class="vv-badge vv-badge--sm uppercase">Before</div>',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        before: '<div class="vv-badge vv-badge--sm uppercase">Before</div>',
+    },
 }
 
 export const After: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		after: '<div class="vv-badge vv-badge--sm uppercase">After</div>',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        after: '<div class="vv-badge vv-badge--sm uppercase">After</div>',
+    },
 }
 
 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>',
+    },
 }