@volverjs/ui-vue 0.0.10-beta.35 → 0.0.10-beta.37

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

@@ -1,79 +1,79 @@
+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/test'
 import { getOptionValue } from '@/test/options'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = await within(canvasElement).findByTestId('element')
-	const value = await within(canvasElement).findByTestId('value')
-	const checkbox = element.getElementsByClassName('vv-checkbox')[0]
-	const input = checkbox.getElementsByTagName('input')[0]
-	const hint = element.getElementsByClassName('vv-checkbox-group__hint')[0]
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    const checkbox = element.getElementsByClassName('vv-checkbox')[0]
+    const input = checkbox.getElementsByTagName('input')[0]
+    const hint = element.getElementsByClassName('vv-checkbox-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
-	) {
-		checkbox.addEventListener('click', async () => {
-			await sleep()
-			const firstValue = getOptionValue(args, 0)
-			expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
-		})
-		await expect(input).toBeChecked()
-	}
+    // checked value
+    if (
+        !args.invalid
+        && !args.disabled
+        && !args.readonly
+        && args.options
+        && args.options.length > 0
+    ) {
+        checkbox.addEventListener('click', async () => {
+            await sleep()
+            const firstValue = getOptionValue(args, 0)
+            expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
+        })
+        await expect(input).toBeChecked()
+    }
 
-	// disabled
-	if (args.disabled) {
-		await expect(element).toHaveClass('vv-checkbox-group--disabled')
-		await expect(input).toHaveProperty('disabled')
-		await expect(input).not.toBeChecked()
-	}
+    // disabled
+    if (args.disabled) {
+        await expect(element).toHaveClass('vv-checkbox-group--disabled')
+        await expect(input).toHaveProperty('disabled')
+        await expect(input).not.toBeChecked()
+    }
 
-	// readonly
-	if (args.readonly) {
-		await expect(element).toHaveClass('vv-checkbox-group--readonly')
-		await expect(input).toHaveProperty('disabled')
-		await expect(input).not.toBeChecked()
-	}
+    // readonly
+    if (args.readonly) {
+        await expect(element).toHaveClass('vv-checkbox-group--readonly')
+        await expect(input).toHaveProperty('disabled')
+        await expect(input).not.toBeChecked()
+    }
 
-	// vertical
-	if (!args.vertical) {
-		await expect(element).toHaveClass('vv-checkbox-group--horizontal')
-	}
+    // vertical
+    if (!args.vertical) {
+        await expect(element).toHaveClass('vv-checkbox-group--horizontal')
+    }
 
-	// invalid
-	if (args.invalid) {
-		await expect(element).toHaveClass('vv-checkbox-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-checkbox-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-checkbox-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-checkbox-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/CheckboxGroup/CheckboxGroupOptions.stories.ts

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

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
-import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
 import { defaultArgs, argTypes } from './CheckboxGroup.settings'
 import { defaultTest } from './CheckboxGroup.test'
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
 
 const meta: Meta<typeof VvCheckboxGroup> = {
-	title: 'Components/CheckboxGroup/Slots',
-	component: VvCheckboxGroup,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/CheckboxGroup/Slots',
+    component: VvCheckboxGroup,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -16,16 +16,16 @@ export default meta
 type Story = StoryObj<typeof VvCheckboxGroup>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvCheckboxGroup, VvCheckbox },
-		setup() {
-			return { args }
-		},
-		data: () => ({ inputValue: undefined }),
-		template: /* html */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvCheckboxGroup, VvCheckbox },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
 			<vv-checkbox-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
 				<vv-checkbox id="o1" name="opts" value="1">Option 1</vv-checkbox>
 				<vv-checkbox id="o2" name="opts" value="2">Option 2</vv-checkbox>
@@ -34,14 +34,14 @@ export const Default: Story = {
 			</vv-checkbox-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>',
+    },
 }