@volverjs/ui-vue 0.0.6-beta.7 → 0.0.7-beta.1

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

@@ -17,7 +17,6 @@ export const defaultArgs = {
 export const argTypes = {
 	...CheckboxRadioArgTypes,
 	indeterminate: {
-		type: 'boolean',
 		description: 'If true, the input will be indeterminated',
 		table: {
 			defaultValue: {
@@ -32,7 +31,6 @@ export const argTypes = {
 		},
 	},
 	switch: {
-		type: 'boolean',
 		description: 'If true, the input will be displayed as a switch.',
 		table: {
 			defaultValue: {

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

@@ -0,0 +1,97 @@
+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/CheckboxBinary.stories.ts

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,31 @@
+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.stories.ts

@@ -0,0 +1,87 @@
+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/CheckboxGroupOptions.stories.ts

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,47 @@
+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>',
+	},
+}

package/src/stories/Combobox/Combobox.settings.ts

@@ -47,7 +47,6 @@ export const argTypes = {
 		},
 	},
 	multiple: {
-		type: 'boolean',
 		description:
 			' This Boolean attribute indicates that multiple options can be selected in the list.',
 		table: {
@@ -57,14 +56,12 @@ export const argTypes = {
 		},
 	},
 	label: {
-		type: 'string',
 		description: '<label> value for the combobox',
 		control: {
 			type: 'text',
 		},
 	},
 	noResultsLabel: {
-		type: 'string',
 		description: 'Label of "no results" options',
 		control: {
 			type: 'text',
@@ -76,14 +73,12 @@ export const argTypes = {
 		},
 	},
 	placeholder: {
-		type: 'string',
 		description: 'Text that appears when it has no value set.',
 		control: {
 			type: 'text',
 		},
 	},
 	searchable: {
-		type: 'boolean',
 		description: 'Enable search in options',
 		table: {
 			defaultValue: {
@@ -92,7 +87,6 @@ export const argTypes = {
 		},
 	},
 	searchPlaceholder: {
-		type: 'string',
 		description:
 			'Text that appears in the in the search input when it has no value set..',
 		control: {
@@ -100,7 +94,6 @@ export const argTypes = {
 		},
 	},
 	debounceSearch: {
-		type: 'number',
 		description: 'Debounce milliseconds for search',
 		control: {
 			type: 'number',
@@ -108,15 +101,12 @@ export const argTypes = {
 	},
 	maxValues: {
 		description: 'Max number of selected values',
-		type: {
-			summary: ['string', 'string[]'],
-		},
+
 		control: {
 			type: 'text',
 		},
 	},
 	separator: {
-		type: 'string',
 		description: 'Separator of selected values',
 		control: {
 			type: 'text',
@@ -128,7 +118,6 @@ export const argTypes = {
 		},
 	},
 	native: {
-		type: 'boolean',
 		description: 'Show native select',
 		table: {
 			defaultValue: {
@@ -137,7 +126,6 @@ export const argTypes = {
 		},
 	},
 	badges: {
-		type: 'boolean',
 		description: 'Show badges for selected values',
 		table: {
 			defaultValue: {
@@ -146,9 +134,6 @@ export const argTypes = {
 		},
 	},
 	badgeModifiers: {
-		type: {
-			summary: ['string', 'string[]'],
-		},
 		description: 'Modifiers for badges',
 		control: {
 			type: 'text',
@@ -160,16 +145,12 @@ export const argTypes = {
 		},
 	},
 	dropdownModifiers: {
-		type: {
-			summary: ['string', 'string[]'],
-		},
 		control: {
 			type: 'text',
 		},
 		description: 'Modifiers for dropdown',
 	},
 	autoOpen: {
-		type: 'boolean',
 		description: 'Open dropdown on focus',
 		table: {
 			defaultValue: {
@@ -177,9 +158,8 @@ export const argTypes = {
 			},
 		},
 	},
-	autoClose: {
-		type: 'boolean',
-		description: 'Close dropdown on select of an option (not multiple)',
+	keepOpen: {
+		description: 'Keep open dropdown on signle select',
 		table: {
 			defaultValue: {
 				summary: false,

package/src/stories/Combobox/Combobox.stories.ts

@@ -0,0 +1,176 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import { defaultTest } from './Combobox.test'
+import { defaultArgs, argTypes } from './Combobox.settings'
+
+const meta: Meta<typeof VvCombobox> = {
+	title: 'Components/Combobox',
+	component: VvCombobox,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvCombobox>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvCombobox },
+		setup() {
+			return { args }
+		},
+		data: () => ({ inputValue: undefined }),
+		template: /* html */ `
+			<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<template #dropdown::before v-if="args['dropdown::before']"><div class="flex" v-html="args['dropdown::before']"></div></template>
+				<template #dropdown::after v-if="args['dropdown::after']"><div class="flex" v-html="args['dropdown::after']"></div></template>
+				<template #before v-if="args.before"><div class="flex" v-html="args.before"></div></template>
+				<template #after v-if="args.after"><div class="flex" v-html="args.after"></div></template>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			</vv-combobox>
+			<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 Unselectable: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		unselectable: true,
+	},
+}
+
+export const Valid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		valid: true,
+		validLabel: 'Selected response is valid.',
+	},
+}
+
+export const Invalid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		invalid: true,
+		invalidLabel: 'Selected response is invalid.',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		hintLabel: 'Please fill the input above.',
+	},
+}
+
+export const Loading: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		loading: true,
+		loadingLabel: 'Loading...',
+	},
+}
+
+export const Searchable: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		searchable: true,
+		searchPlaceholder: 'Search...',
+	},
+}
+
+export const Floating: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		floating: true,
+	},
+}
+
+export const Native: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		native: true,
+	},
+}
+
+export const Arrow: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		arrow: true,
+		offset: 10,
+		triggerWidth: false,
+		placement: 'bottom-end',
+		dropdownModifiers: 'full-bleed rounded',
+	},
+}
+
+export const Badges: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		badges: true,
+		multiple: true,
+	},
+}
+
+export const AutoOpen: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		autoOpen: true,
+	},
+}
+
+export const KeepOpen: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		keepOpen: true,
+	},
+}
+
+export const Size: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		'dropdown::before':
+			'<div class="bg-brand text-white flex-1 text-center uppercase">Before</div>',
+		'dropdown::after':
+			'<div class="bg-brand text-white flex-1 text-center uppercase">After</div>',
+		options: Array.from({ length: 30 }, (_, i) => ({
+			label: `Option ${i + 1}`,
+			value: String(i + 1),
+		})),
+	},
+}

package/src/stories/Combobox/Combobox.test.ts

@@ -22,10 +22,10 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 		'vv-dropdown',
 	)[0] as HTMLElement
 	const dropdownFirstItem = dropdown.querySelectorAll(
-		'li[role="option"]',
+		'div[role="option"]',
 	)[0] as HTMLElement
 	const dropdownSecondItem = dropdown.querySelectorAll(
-		'li[role="option"]',
+		'div[role="option"]',
 	)[1] as HTMLElement
 	const hint = element.getElementsByClassName('vv-select__hint')[0]