@volverjs/ui-vue 0.0.10-beta.7 → 0.0.10-beta.70

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

@@ -1,97 +0,0 @@
-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'
-
-const meta: Meta<typeof VvCheckbox> = {
-	title: 'Components/Checkbox',
-	component: VvCheckbox,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
-}
-
-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 */ `
-			<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,
-}
-
-export const Disabled: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		disabled: true,
-	},
-}
-
-export const Readonly: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		readonly: true,
-	},
-}
-
-export const Switch: Story = {
-	...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',
-	},
-}
-
-export const Valid: Story = {
-	...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,
-	},
-}
-
-export const Hint: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		hintLabel: 'Please accept terms and conditions',
-	},
-}

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

@@ -1,81 +0,0 @@
-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]
-
-	// 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()
-		}
-	}
-
-	// 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()
-	}
-
-	// 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)
-		}
-	}
-
-	// 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)
-	}
-
-	// check accessibility
-	await expect(element).toHaveNoViolations()
-}

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

@@ -1,33 +0,0 @@
-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'
-
-const meta: Meta<typeof VvCheckbox> = {
-	title: 'Components/Checkbox/Binary',
-	component: VvCheckbox,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCheckbox>
-
-export const TrueFalse: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		value: true,
-		uncheckedValue: false,
-	},
-}
-
-export const YesNo: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		value: 'Yes',
-		uncheckedValue: 'No',
-	},
-}

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

@@ -1,31 +0,0 @@
-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'
-
-const meta: Meta<typeof VvCheckbox> = {
-	title: 'Components/Checkbox/Slots',
-	component: VvCheckbox,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCheckbox>
-
-export const Default: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		default: 'DefaultStory <em class="italic">slot!</em>',
-	},
-}
-
-export const HintSlot: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		hint: 'Hint <em class="italic">slot!</em>',
-	},
-}

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

@@ -1,15 +0,0 @@
-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,
-}
-
-export const argTypes = CheckboxRadioGroupArgTypes

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

@@ -1,87 +0,0 @@
-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'
-
-const meta: Meta<typeof VvCheckboxGroup> = {
-	title: 'Components/CheckboxGroup',
-	component: VvCheckboxGroup,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
-}
-
-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 */ `
-			<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,
-}
-
-export const Disabled: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		disabled: true,
-	},
-}
-
-export const Readonly: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		readonly: true,
-	},
-}
-
-export const Vertical: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		vertical: true,
-	},
-}
-
-export const Invalid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		invalid: true,
-		invalidLabel: 'This field is required.',
-	},
-}
-
-export const Valid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		valid: true,
-		validLabel: 'Selected response is valid.',
-	},
-}
-
-export const Hint: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		hint: 'Please fill the input above.',
-	},
-}

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

@@ -1,83 +0,0 @@
-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'
-
-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 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))
-	}
-
-	// 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()
-	}
-
-	// 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')
-	}
-
-	// 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)
-		}
-	}
-
-	// hint
-	if (args.hintLabel) {
-		await expect(hint.innerHTML).toEqual(args.hintLabel)
-	}
-
-	// check accessibility
-	await expect(element).toHaveNoViolations()
-}

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

@@ -1,53 +0,0 @@
-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'
-
-const meta: Meta<typeof VvCheckboxGroup> = {
-	title: 'Components/CheckboxGroup/Options',
-	component: VvCheckboxGroup,
-	args: defaultArgs,
-	argTypes,
-}
-
-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' },
-		],
-	},
-}
-
-export const OptionLabelKey: Story = {
-	...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' },
-		],
-	},
-}

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

@@ -1,47 +0,0 @@
-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'
-
-const meta: Meta<typeof VvCheckboxGroup> = {
-	title: 'Components/CheckboxGroup/Slots',
-	component: VvCheckboxGroup,
-	args: defaultArgs,
-	argTypes,
-}
-
-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 */ `
-			<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>
-				<vv-checkbox id="o3" name="opts" value="3">Option 3</vv-checkbox>
-				<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,
-}
-
-export const Hint: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		hint: 'Hint <em class="italic">slot!</em>',
-	},
-}