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

package/src/stories/Checkbox/Checkbox.settings.ts

@@ -1,41 +1,42 @@
+import type { ArgTypes } from '@storybook/vue3'
 import { CheckboxRadioArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
-	name: 'checkbox',
-	label: 'Option',
-	value: 'my-value',
-	tabindex: 0,
-	disabled: false,
-	switch: false,
-	readonly: false,
-	invalid: false,
-	valid: false,
-	indeterminate: false,
-	uncheckedValue: undefined,
+    name: 'checkbox',
+    label: 'Option',
+    value: 'my-value',
+    tabindex: 0,
+    disabled: false,
+    switch: false,
+    readonly: false,
+    invalid: false,
+    valid: false,
+    indeterminate: false,
+    uncheckedValue: undefined,
 }
 
-export const argTypes = {
-	...CheckboxRadioArgTypes,
-	indeterminate: {
-		description: 'If true, the input will be indeterminated',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	uncheckedValue: {
-		description: 'Value associated with the unchecked state.',
-		control: {
-			type: 'text',
-		},
-	},
-	switch: {
-		description: 'If true, the input will be displayed as a switch.',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
+export const argTypes: ArgTypes = {
+    ...CheckboxRadioArgTypes,
+    indeterminate: {
+        description: 'If true, the input will be indeterminated',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    uncheckedValue: {
+        description: 'Value associated with the unchecked state.',
+        control: {
+            type: 'text',
+        },
+    },
+    switch: {
+        description: 'If true, the input will be displayed as a switch.',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
 }

package/src/stories/Checkbox/Checkbox.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
 import { defaultArgs, argTypes } from './Checkbox.settings'
 import { defaultTest } from './Checkbox.test'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
 
 const meta: Meta<typeof VvCheckbox> = {
-	title: 'Components/Checkbox',
-	component: VvCheckbox,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Checkbox',
+    component: VvCheckbox,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,82 +16,82 @@ export default meta
 type Story = StoryObj<typeof VvCheckbox>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvCheckbox },
-		setup() {
-			return { args }
-		},
-		data: () => ({ inputValue: args.uncheckedValue }),
-		template: /* html */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvCheckbox },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: args.uncheckedValue }),
+        template: /* html */ `
 			<vv-checkbox 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-checkbox>
 			<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 Switch: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		switch: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        switch: 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 Indeterminate: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		indeterminate: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        indeterminate: true,
+    },
 }
 
 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/Checkbox/Checkbox.test.ts

@@ -1,81 +1,78 @@
+import { within } from '@storybook/test'
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
 
 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-checkbox__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-checkbox__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.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()
-		}
-	}
+    // checked value
+    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-checkbox--disabled')
-		await expect(input).toHaveProperty('disabled')
-		await expect(input).not.toBeChecked()
-	}
+    // disabled
+    if (args.disabled) {
+        await expect(element).toHaveClass('vv-checkbox--disabled')
+        await expect(input).toHaveProperty('disabled')
+        await expect(input).not.toBeChecked()
+    }
 
-	// readonly
-	if (args.readonly) {
-		await expect(element).toHaveClass('vv-checkbox--readonly')
-		await expect(input).toHaveProperty('disabled')
-		await expect(input).not.toBeChecked()
-	}
+    // readonly
+    if (args.readonly) {
+        await expect(element).toHaveClass('vv-checkbox--readonly')
+        await expect(input).toHaveProperty('disabled')
+        await expect(input).not.toBeChecked()
+    }
 
-	// indeterminate
-	if (args.indeterminate) {
-		await expect(element).toHaveClass('vv-checkbox--indeterminate')
-		await expect(input).toHaveProperty('indeterminate')
-	}
+    // indeterminate
+    if (args.indeterminate) {
+        await expect(element).toHaveClass('vv-checkbox--indeterminate')
+        await expect(input).toHaveProperty('indeterminate')
+    }
 
-	// invalid
-	if (args.invalid) {
-		await expect(element).toHaveClass('vv-checkbox--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-checkbox--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-checkbox--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-checkbox--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/Checkbox/CheckboxBinary.stories.ts

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
 import { defaultArgs, argTypes } from './Checkbox.settings'
 import { Default } from './Checkbox.stories'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
 
 const meta: Meta<typeof VvCheckbox> = {
-	title: 'Components/Checkbox/Binary',
-	component: VvCheckbox,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Checkbox/Binary',
+    component: VvCheckbox,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,19 +15,19 @@ export default meta
 type Story = StoryObj<typeof VvCheckbox>
 
 export const TrueFalse: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		value: true,
-		uncheckedValue: false,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        value: true,
+        uncheckedValue: false,
+    },
 }
 
 export const YesNo: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		value: 'Yes',
-		uncheckedValue: 'No',
-	},
-}
+    ...Default,
+    args: {
+        ...defaultArgs,
+        value: 'Yes',
+        uncheckedValue: 'No',
+    },
+}

package/src/stories/Checkbox/CheckboxSlots.stories.ts

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

package/src/stories/CheckboxGroup/CheckboxGroup.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

package/src/stories/CheckboxGroup/CheckboxGroup.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
 import { defaultArgs, argTypes } from './CheckboxGroup.settings'
 import { defaultTest } from './CheckboxGroup.test'
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
 
 const meta: Meta<typeof VvCheckboxGroup> = {
-	title: 'Components/CheckboxGroup',
-	component: VvCheckboxGroup,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/CheckboxGroup',
+    component: VvCheckboxGroup,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,72 +16,72 @@ export default meta
 type Story = StoryObj<typeof VvCheckboxGroup>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvCheckboxGroup },
-		setup() {
-			return { args }
-		},
-		data: () => ({ inputValue: undefined }),
-		template: /* html */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvCheckboxGroup },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
 			<vv-checkbox-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-checkbox-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,
-		hint: 'Please fill the input above.',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        hint: 'Please fill the input above.',
+    },
 }