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

package/src/stories/Nav/Nav.test.ts

@@ -1,21 +1,19 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
+    const element = await within(canvasElement).findByTestId('element')
 
-	const menuEl = element.getElementsByClassName('vv-nav__menu')[0]
+    const menuEl = element.getElementsByClassName('vv-nav__menu')[0]
 
-	if (!args.items || !args.items?.length) {
-		throw new Error('No items passed')
-	}
+    if (!args.items?.length) {
+        throw new Error('No items passed')
+    }
 
-	// check children number the same of items prop
-	expect(menuEl.children.length).toEqual(args.items?.length)
+    // check children number the same of items prop
+    expect(menuEl.children.length).toEqual(args.items?.length)
 
-	// check accessibility
-	await expect(element).toHaveNoViolations()
+    // check accessibility
+    await expect(element).toHaveNoViolations()
 }

package/src/stories/Nav/NavModifiers.stories.ts

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvNav from '@/components/VvNav/VvNav.vue'
-import { defaultArgs, argTypes } from './Nav.settings'
+import { argTypes, defaultArgs } from './Nav.settings'
 import { Default } from './Nav.stories'
 
 const meta: Meta<typeof VvNav> = {
-	title: 'Components/Nav/Modifiers',
-	component: VvNav,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Nav/Modifiers',
+    component: VvNav,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,33 +15,33 @@ export default meta
 type Story = StoryObj<typeof VvNav>
 
 export const Sidebar: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		modifiers: 'sidebar',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        modifiers: 'sidebar',
+    },
 }
 
 export const Aside: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		modifiers: 'aside',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        modifiers: 'aside',
+    },
 }
 
 export const Tabs: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		modifiers: 'tabs',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        modifiers: 'tabs',
+    },
 }
 
 export const TabsFull: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		modifiers: 'tabs full',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        modifiers: 'tabs full',
+    },
 }

package/src/stories/Progress/Progress.settings.ts

@@ -1,30 +1,31 @@
+import type { ArgTypes } from '@storybook/vue3'
 import { ModifiersArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
-	max: undefined,
-	value: undefined,
-	label: 'Progress bar',
+    max: undefined,
+    value: undefined,
+    label: 'Progress bar',
 }
-export const argTypes = {
-	...ModifiersArgTypes,
-	max: {
-		description:
+export const argTypes: ArgTypes = {
+    ...ModifiersArgTypes,
+    max: {
+        description:
 			'This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.',
-		control: {
-			type: 'text',
-		},
-	},
-	value: {
-		description:
+        control: {
+            type: 'text',
+        },
+    },
+    value: {
+        description:
 			'This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate.',
-		control: {
-			type: 'text',
-		},
-	},
-	label: {
-		description: 'Progress aria-label',
-		control: {
-			type: 'text',
-		},
-	},
+        control: {
+            type: 'text',
+        },
+    },
+    label: {
+        description: 'Progress aria-label',
+        control: {
+            type: 'text',
+        },
+    },
 }

package/src/stories/Progress/Progress.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvProgress from '@/components/VvProgress/VvProgress.vue'
+import { argTypes, defaultArgs } from './Progress.settings'
 import { defaultTest } from './Progress.test'
-import { defaultArgs, argTypes } from './Progress.settings'
 
 const meta: Meta<typeof VvProgress> = {
-	title: 'Components/Progress',
-	component: VvProgress,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Progress',
+    component: VvProgress,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,26 +16,26 @@ export default meta
 type Story = StoryObj<typeof VvProgress>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvProgress },
-		setup() {
-			return { args }
-		},
-		template: /* html */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvProgress },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<vv-progress v-bind="args" />
 		`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }
 
 export const Determinate: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		max: '100',
-		value: '25',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        max: '100',
+        value: '25',
+    },
 }

package/src/stories/Progress/Progress.test.ts

@@ -1,9 +1,9 @@
-import { expect } from '@/test/expect'
 import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
+import { expect } from '@/test/expect'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement }: PlayAttributes) {
-	const progress = await within(canvasElement).findByRole('progressbar')
-	await expect(progress).toHaveClass('vv-progress')
-	await expect(progress).toHaveNoViolations()
+    const progress = await within(canvasElement).findByRole('progressbar')
+    await expect(progress).toHaveClass('vv-progress')
+    await expect(progress).toHaveNoViolations()
 }

package/src/stories/Radio/Radio.settings.ts

@@ -1,15 +1,15 @@
 import { CheckboxRadioArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
-	name: 'radio',
-	label: 'Option',
-	value: 'my-value',
-	tabindex: 0,
-	disabled: false,
-	readonly: false,
-	invalid: false,
-	valid: false,
-	indeterminate: false,
+    name: 'radio',
+    label: 'Option',
+    value: 'my-value',
+    tabindex: 0,
+    disabled: false,
+    readonly: false,
+    invalid: false,
+    valid: false,
+    indeterminate: false,
 }
 
 export const argTypes = CheckboxRadioArgTypes

package/src/stories/Radio/Radio.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvRadio from '@/components/VvRadio/VvRadio.vue'
-import { defaultArgs, argTypes } from './Radio.settings'
+import { argTypes, defaultArgs } from './Radio.settings'
 import { defaultTest } from './Radio.test'
 
 const meta: Meta<typeof VvRadio> = {
-	title: 'Components/Radio',
-	component: VvRadio,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Radio',
+    component: VvRadio,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,66 +16,66 @@ export default meta
 type Story = StoryObj<typeof VvRadio>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvRadio },
-		setup() {
-			return { args }
-		},
-		data: () => ({ inputValue: undefined }),
-		template: /* html */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvRadio },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
 			<vv-radio v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
 				<template #default v-if="args.default"><span v-html="args.default"></span></template>
 				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
 			</vv-radio>
 			<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 Invalid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		invalid: true,
-		invalidLabel: 'You must accept terms and conditions',
-		label: 'Accept terms and conditions',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        invalid: true,
+        invalidLabel: 'You must accept terms and conditions',
+        label: 'Accept terms and conditions',
+    },
 }
 
 export const Valid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		valid: true,
-		validLabel: 'Thank you for accepting terms and conditions',
-		label: 'Accept terms and conditions',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        valid: true,
+        validLabel: 'Thank you for accepting terms and conditions',
+        label: 'Accept terms and conditions',
+    },
 }
 
 export const Hint: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		hintLabel: 'Please accept terms and conditions',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        hintLabel: 'Please accept terms and conditions',
+    },
 }

package/src/stories/Radio/Radio.test.ts

@@ -1,70 +1,67 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+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 input = element.getElementsByTagName('input')[0]
-	const hint = element.getElementsByClassName('vv-radio__hint')[0]
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    const input = element.getElementsByTagName('input')[0]
+    const hint = element.getElementsByClassName('vv-radio__hint')[0]
 
-	// click
-	if (!args.invalid && !args.indeterminate) {
-		element.addEventListener('click', async () => {
-			await sleep()
-			if (!args.disabled && !args.readonly) {
-				expect(value.innerHTML).toEqual(String(args.value))
-			}
-		})
-		if (args.disabled || args.readonly) {
-			await expect(input).not.toBeChecked()
-		} else {
-			await expect(input).toBeChecked()
-		}
-	}
+    // click
+    if (!args.invalid && !args.indeterminate) {
+        element.addEventListener('click', async () => {
+            await sleep()
+            if (!args.disabled && !args.readonly) {
+                expect(value.innerHTML).toEqual(String(args.value))
+            }
+        })
+        if (args.disabled || args.readonly) {
+            await expect(input).not.toBeChecked()
+        }
+        else {
+            await expect(input).toBeChecked()
+        }
+    }
 
-	// disabled
-	if (args.disabled) {
-		await expect(element).toHaveClass('vv-radio--disabled')
-		await expect(input).toHaveProperty('disabled')
-		await expect(input).not.toBeChecked()
-	}
+    // disabled
+    if (args.disabled) {
+        await expect(element).toHaveClass('vv-radio--disabled')
+        await expect(input).toHaveProperty('disabled')
+        await expect(input).not.toBeChecked()
+    }
 
-	// readonly
-	if (args.readonly) {
-		await expect(element).toHaveClass('vv-radio--readonly')
-		await expect(input).toHaveProperty('disabled')
-		await expect(input).not.toBeChecked()
-	}
+    // readonly
+    if (args.readonly) {
+        await expect(element).toHaveClass('vv-radio--readonly')
+        await expect(input).toHaveProperty('disabled')
+        await expect(input).not.toBeChecked()
+    }
 
-	// invalid
-	if (args.invalid) {
-		await expect(element).toHaveClass('vv-radio--invalid')
-		await expect(input).toHaveProperty('ariaInvalid')
-		if (args.invalidLabel) {
-			await expect(hint.innerHTML).toEqual(args.invalidLabel)
-		}
-	}
+    // invalid
+    if (args.invalid) {
+        await expect(element).toHaveClass('vv-radio--invalid')
+        await expect(input).toHaveProperty('ariaInvalid')
+        if (args.invalidLabel) {
+            await expect(hint.innerHTML).toEqual(args.invalidLabel)
+        }
+    }
 
-	// valid
-	if (args.valid) {
-		await expect(element).toHaveClass('vv-radio--valid')
-		await expect(input).toHaveProperty('ariaInvalid', 'false')
-		if (args.validLabel) {
-			await expect(hint.innerHTML).toEqual(args.validLabel)
-		}
-	}
+    // valid
+    if (args.valid) {
+        await expect(element).toHaveClass('vv-radio--valid')
+        await expect(input).toHaveProperty('ariaInvalid', 'false')
+        if (args.validLabel) {
+            await expect(hint.innerHTML).toEqual(args.validLabel)
+        }
+    }
 
-	// 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/Radio/RadioSlots.stories.ts

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvRadio from '@/components/VvRadio/VvRadio.vue'
-import { defaultArgs, argTypes } from './Radio.settings'
+import { argTypes, defaultArgs } from './Radio.settings'
 import { Default as DefaultStory } from './Radio.stories'
 
 const meta: Meta<typeof VvRadio> = {
-	title: 'Components/Radio/Slots',
-	component: VvRadio,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Radio/Slots',
+    component: VvRadio,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,17 +15,17 @@ export default meta
 type Story = StoryObj<typeof VvRadio>
 
 export const Default: Story = {
-	...DefaultStory,
-	args: {
-		...DefaultStory.args,
-		default: 'DefaultStory <em class="italic">slot!</em>',
-	},
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        default: 'DefaultStory <em class="italic">slot!</em>',
+    },
 }
 
 export const HintSlot: Story = {
-	...DefaultStory,
-	args: {
-		...DefaultStory.args,
-		hint: 'Hint <em class="italic">slot!</em>',
-	},
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        hint: 'Hint <em class="italic">slot!</em>',
+    },
 }

package/src/stories/RadioGroup/RadioGroup.settings.ts

@@ -1,15 +1,15 @@
 import { CheckboxRadioGroupArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
-	name: 'checkbox-group',
-	label: 'Select an option',
-	options: ['Option 1', 'Option 2', 'Option 3'],
-	disabled: false,
-	readonly: false,
-	vertical: false,
-	invalid: false,
-	valid: false,
-	tabindex: 0,
+    name: 'checkbox-group',
+    label: 'Select an option',
+    options: ['Option 1', 'Option 2', 'Option 3'],
+    disabled: false,
+    readonly: false,
+    vertical: false,
+    invalid: false,
+    valid: false,
+    tabindex: 0,
 }
 
 export const argTypes = CheckboxRadioGroupArgTypes