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

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

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
-import { defaultArgs, argTypes } from './RadioGroup.settings'
+import { argTypes, defaultArgs } from './RadioGroup.settings'
 import { defaultTest } from './RadioGroup.test'
 
 const meta: Meta<typeof VvRadioGroup> = {
-	title: 'Components/RadioGroup',
-	component: VvRadioGroup,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/RadioGroup',
+    component: VvRadioGroup,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,73 +16,72 @@ export default meta
 type Story = StoryObj<typeof VvRadioGroup>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvRadioGroup },
-		setup() {
-			return { args }
-		},
-		data: () => ({ inputValue: undefined }),
-		template: /* html */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvRadioGroup },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
 			<vv-radio-group 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-group>
 			<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 Vertical: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		vertical: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        vertical: true,
+    },
 }
 
 export const Invalid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		invalid: true,
-		invalidLabel: 'This field is required.',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        invalid: true,
+        invalidLabel: 'This field is required.',
+    },
 }
 
-
 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 Hint: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		hintLabel: 'Please fill the input above.',
-	},
-}
+    ...Default,
+    args: {
+        ...defaultArgs,
+        hintLabel: 'Please fill the input above.',
+    },
+}

package/src/stories/RadioGroup/RadioGroup.test.ts

@@ -1,83 +1,79 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
 import { getOptionValue } from '@/test/options'
+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 radio = element.getElementsByClassName('vv-radio')[0]
-	const input = radio.getElementsByTagName('input')[0]
-	const hint = element.getElementsByClassName('vv-radio-group__hint')[0]
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    const radio = element.getElementsByClassName('vv-radio')[0]
+    const input = radio.getElementsByTagName('input')[0]
+    const hint = element.getElementsByClassName('vv-radio-group__hint')[0]
 
-	// unchecked value
-	if (args.uncheckedValue !== undefined) {
-		expect(value.innerHTML).toEqual(String(args.uncheckedValue))
-	}
+    // unchecked value
+    if (args.uncheckedValue !== undefined) {
+        expect(value.innerHTML).toEqual(String(args.uncheckedValue))
+    }
 
-	// checked value
-	if (
-		!args.invalid &&
-		!args.disabled &&
-		!args.readonly &&
-		args.options &&
-		args.options.length > 0
-	) {
-		radio.addEventListener('click', async () => {
-			await sleep()
-			const firstValue = getOptionValue(args, 0)
-			expect(value.innerHTML).toEqual(firstValue)
-		})
-		await expect(input).toBeChecked()
-	}
+    // checked value
+    if (
+        !args.invalid
+        && !args.disabled
+        && !args.readonly
+        && args.options
+        && args.options.length > 0
+    ) {
+        radio.addEventListener('click', async () => {
+            await sleep()
+            const firstValue = getOptionValue(args, 0)
+            expect(value.innerHTML).toEqual(firstValue)
+        })
+        await expect(input).toBeChecked()
+    }
 
-	// disabled
-	if (args.disabled) {
-		await expect(element).toHaveClass('vv-radio-group--disabled')
-		await expect(input).toHaveProperty('disabled')
-		await expect(input).not.toBeChecked()
-	}
+    // disabled
+    if (args.disabled) {
+        await expect(element).toHaveClass('vv-radio-group--disabled')
+        await expect(input).toHaveProperty('disabled')
+        await expect(input).not.toBeChecked()
+    }
 
-	// readonly
-	if (args.readonly) {
-		await expect(element).toHaveClass('vv-radio-group--readonly')
-		await expect(input).toHaveProperty('disabled')
-		await expect(input).not.toBeChecked()
-	}
+    // readonly
+    if (args.readonly) {
+        await expect(element).toHaveClass('vv-radio-group--readonly')
+        await expect(input).toHaveProperty('disabled')
+        await expect(input).not.toBeChecked()
+    }
 
-	// vertical
-	if (!args.vertical) {
-		await expect(element).toHaveClass('vv-radio-group--horizontal')
-	}
+    // vertical
+    if (!args.vertical) {
+        await expect(element).toHaveClass('vv-radio-group--horizontal')
+    }
 
-	// invalid
-	if (args.invalid) {
-		await expect(element).toHaveClass('vv-radio-group--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-group--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-group--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-group--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/RadioGroup/RadioGroupOptions.stories.ts

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import { argTypes, defaultArgs } from './RadioGroup.settings'
 import { Default } from './RadioGroup.stories'
-import { defaultArgs, argTypes } from './RadioGroup.settings'
 
 const meta: Meta<typeof VvRadioGroup> = {
-	title: 'Components/RadioGroup/Options',
-	component: VvRadioGroup,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/RadioGroup/Options',
+    component: VvRadioGroup,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,39 +15,39 @@ export default meta
 type Story = StoryObj<typeof VvRadioGroup>
 
 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' },
+        ],
+    },
+}

package/src/stories/RadioGroup/RadioGroupSlots.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
 import VvRadio from '@/components/VvRadio/VvRadio.vue'
-import { defaultArgs, argTypes } from './RadioGroup.settings'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import { argTypes, defaultArgs } from './RadioGroup.settings'
 import { defaultTest } from './RadioGroup.test'
 
 const meta: Meta<typeof VvRadioGroup> = {
-	title: 'Components/RadioGroup/Slots',
-	component: VvRadioGroup,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/RadioGroup/Slots',
+    component: VvRadioGroup,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -16,16 +16,16 @@ export default meta
 type Story = StoryObj<typeof VvRadioGroup>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvRadioGroup, VvRadio },
-		setup() {
-			return { args }
-		},
-		data: () => ({ inputValue: undefined }),
-		template: /* html */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvRadioGroup, VvRadio },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
 			<vv-radio-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
 				<vv-radio id="o1" name="opts" value="1">Option 1</vv-radio>
 				<vv-radio id="o2" name="opts" value="2">Option 2</vv-radio>
@@ -34,14 +34,14 @@ export const Default: Story = {
 			</vv-radio-group>
 			<div>Value: <span data-testId="value">{{inputValue}}</span></div>	
 		`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }
 
 export const Hint: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		hint: 'Hint <em class="italic">slot!</em>',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        hint: 'Hint <em class="italic">slot!</em>',
+    },
 }

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

@@ -1,80 +1,81 @@
+import type { ArgTypes } from '@storybook/vue3'
+import { VvSelectProps } from '@/components/VvSelect'
 import {
-	ValidArgTypes,
-	InvalidArgTypes,
-	HintArgTypes,
-	LoadingArgTypes,
-	DisabledArgTypes,
-	ReadonlyArgTypes,
-	ModifiersArgTypes,
-	OptionsArgTypes,
-	IconArgTypes,
-	TabindexArgTypes,
-	IdNameArgTypes,
-	FloatingLabelArgTypes,
-	UnselectableArgTypes,
-	AutofocusArgTypes,
-	AutocompleteArgTypes,
+    AutocompleteArgTypes,
+    AutofocusArgTypes,
+    DisabledArgTypes,
+    FloatingLabelArgTypes,
+    HintArgTypes,
+    IconArgTypes,
+    IdNameArgTypes,
+    InvalidArgTypes,
+    LoadingArgTypes,
+    ModifiersArgTypes,
+    OptionsArgTypes,
+    ReadonlyArgTypes,
+    TabindexArgTypes,
+    UnselectableArgTypes,
+    ValidArgTypes,
 } from '@/stories/argTypes'
-import { VvSelectProps } from '@/components/VvSelect'
 
 export const defaultArgs = {
-	...propsToObject(VvSelectProps),
-	name: 'vv-select',
-	options: ['Option 1', 'Option 2', 'Option 3'],
-	placeholder: 'Select an option',
-	label: 'Select label',
+    ...propsToObject(VvSelectProps),
+    name: 'vv-select',
+    options: ['Option 1', 'Option 2', 'Option 3'],
+    placeholder: 'Select an option',
+    label: 'Select label',
 }
-export const argTypes = {
-	...IdNameArgTypes,
-	...AutofocusArgTypes,
-	...AutocompleteArgTypes,
-	...TabindexArgTypes,
-	...ValidArgTypes,
-	...InvalidArgTypes,
-	...HintArgTypes,
-	...LoadingArgTypes,
-	...DisabledArgTypes,
-	...ReadonlyArgTypes,
-	...ModifiersArgTypes,
-	...OptionsArgTypes,
-	...IconArgTypes,
-	...FloatingLabelArgTypes,
-	...UnselectableArgTypes,
-	multiple: {
-		description:
+export const argTypes: ArgTypes = {
+    ...IdNameArgTypes,
+    ...AutofocusArgTypes,
+    ...AutocompleteArgTypes,
+    ...TabindexArgTypes,
+    ...ValidArgTypes,
+    ...InvalidArgTypes,
+    ...HintArgTypes,
+    ...LoadingArgTypes,
+    ...DisabledArgTypes,
+    ...ReadonlyArgTypes,
+    ...ModifiersArgTypes,
+    ...OptionsArgTypes,
+    ...IconArgTypes,
+    ...FloatingLabelArgTypes,
+    ...UnselectableArgTypes,
+    multiple: {
+        description:
 			'This Boolean attribute indicates that multiple options can be selected in the list.',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	required: {
-		description:
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    required: {
+        description:
 			'A Boolean attribute indicating that an option with a non-empty string value must be selected.',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	size: {
-		description:
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    size: {
+        description:
 			'If the control is presented as a scrolling list box this attribute represents the number of rows in the list.',
-		control: {
-			type: 'text',
-		},
-	},
-	label: {
-		description: '<label> value for the select',
-		control: {
-			type: 'text',
-		},
-	},
-	placeholder: {
-		description: 'Text that appears when it has no value set.',
-		control: {
-			type: 'text',
-		},
-	},
+        control: {
+            type: 'text',
+        },
+    },
+    label: {
+        description: '<label> value for the select',
+        control: {
+            type: 'text',
+        },
+    },
+    placeholder: {
+        description: 'Text that appears when it has no value set.',
+        control: {
+            type: 'text',
+        },
+    },
 }