@volverjs/ui-vue 0.0.1-beta.8 → 0.0.1

package/src/stories/Combobox/ComboboxSlots.stories.mdx

@@ -0,0 +1,48 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import { Template } from './Combobox.stories.mdx'
+import { defaultTest } from './Combobox.test.ts'
+import { defaultArgs, argTypes } from './Combobox.settings'
+
+<Meta
+	title="Components/Combobox/Slots"
+	component={VvCombobox}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="Before"
+		play={defaultTest}
+		args={{
+			before: '<div class="vv-badge vv-badge--sm uppercase">Before</vv-badge>',
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="After"
+		play={defaultTest}
+		args={{
+			after: '<div class="vv-badge vv-badge--sm uppercase">After</vv-badge>',
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Hint"
+		play={defaultTest}
+		args={{
+			hint: 'Hint <em class="italic">slot!</em>',
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Dialog/Dialog.settings.ts

@@ -0,0 +1,45 @@
+import { DefaultSlotArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	id: 'dialog',
+	title: 'Dialog Title',
+	transition: 'fade-block',
+	size: 'standard',
+	autoClose: false,
+	default: 'Default slot content',
+}
+
+export const argTypes = {
+	title: { control: 'text' },
+	transition: {
+		control: 'radio',
+		options: ['fade-block', 'fade-inline', 'scale'],
+	},
+	size: {
+		control: 'radio',
+		options: ['standard', 'small', 'fullscreen'],
+	},
+	...DefaultSlotArgTypes,
+	header: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	footer: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+}

package/src/stories/Dialog/Dialog.stories.mdx

@@ -1,29 +1,55 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
+import { defaultTest } from './Dialog.test'
+import { defaultArgs, argTypes } from './Dialog.settings'
 
-import VvDialog from '../../components/VvDialog/VvDialog.vue'
+<Meta
+	title="Components/Dialog"
+	component={VvDialog}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
-<Meta title="Components/Dialog" component={VvDialog} />
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
+export const Template = (args) => ({
 	components: { VvDialog },
 	setup() {
 		return { args }
 	},
 	data: () => ({ open: false }),
+	methods: {
+		onClick() {
+			this.open = !this.open
+		},
+	},
 	template: `
-		<div class="flex flex-column">
-			<button class="vv-button" @click="open=true">Open</button>
-            <vv-dialog v-bind="args" v-model:open="open">
-                Contenuto di prova
-            </vv-dialog>
-		</div>
-        `
+		<vv-dialog v-bind="args" v-model="open" data-testId="element">
+			<template #header v-if="args.header"><div v-html="args.header"></div></template>
+			<template #default v-if="args.default"><div v-html="args.default"></div></template>
+			<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
+		</vv-dialog>
+		<button class="vv-button" @click="onClick" data-testId="button">Toggle</button>
+        `,
 })
 
 <Canvas>
-	<Story name="Dialog" args={{ id: 'dialog' }}>
-		{Template.bind({})}
+	<Story name="Dialog" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Auto close"
+		play={defaultTest}
+		args={{ autoClose: true }}
+		argTypes={{
+			autoClose: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>

package/src/stories/Dialog/Dialog.test.ts

@@ -0,0 +1,69 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { userEvent } from '@storybook/testing-library'
+import { within } from '@storybook/testing-library'
+import { sleep } from '@/test/sleep'
+
+export async function defaultTest(
+	{ canvasElement, args }: PlayAttributes = {} as PlayAttributes,
+) {
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLDialogElement
+	const button = (await within(canvasElement).findByTestId(
+		'button',
+	)) as HTMLButtonElement
+
+	// hidden
+	expect(element?.style.display).toEqual('none')
+
+	// open
+	await userEvent.click(button)
+	expect(element).toHaveProperty('open', true)
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+
+	// size
+	if (args.size) {
+		await expect(element).toHaveClass(`vv-dialog--${args.size}`)
+	}
+
+	// default slot
+	if (args.default) {
+		const defaultSlot = element.getElementsByClassName(
+			'vv-dialog__content',
+		)[0].firstElementChild as HTMLElement
+		await expect(
+			defaultSlot.innerHTML.replace(/<!--(.*?)-->/g, ''),
+		).toEqual(args.default)
+	}
+
+	// header slot
+	if (args.header) {
+		const headerSlot = element.getElementsByClassName(
+			'vv-dialog__header',
+		)[0].firstElementChild as HTMLElement
+		await expect(headerSlot.innerHTML.replace(/<!--(.*?)-->/g, '')).toEqual(
+			args.header,
+		)
+	}
+
+	// footer slot
+	if (args.footer) {
+		const headerSlot = element.getElementsByClassName(
+			'vv-dialog__footer',
+		)[0].firstElementChild as HTMLElement
+		await expect(headerSlot.innerHTML.replace(/<!--(.*?)-->/g, '')).toEqual(
+			args.footer,
+		)
+	}
+
+	// auto close
+	if (args.autoClose) {
+		await userEvent.click(element)
+		await sleep(1000)
+		expect(element).toHaveProperty('open', false)
+		expect(element?.style.display).toEqual('none')
+	}
+}

package/src/stories/Dialog/DialogSlots.stories.mdx

@@ -0,0 +1,63 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
+import { defaultTest } from './Dialog.test'
+import { defaultArgs, argTypes } from './Dialog.settings'
+import { Template } from './Dialog.stories.mdx'
+
+<Meta
+	title="Components/Dialog/Slots"
+	component={VvDialog}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="Default"
+		play={defaultTest}
+		args={{ default: 'Default <em class="italic">slot!</em>' }}
+		argTypes={{
+			default: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Header"
+		play={defaultTest}
+		args={{ header: 'Header <em class="italic">slot!</em>' }}
+		argTypes={{
+			header: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Footer"
+		play={defaultTest}
+		args={{ footer: 'Footer <em class="italic">slot!</em>' }}
+		argTypes={{
+			footer: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Dropdown/Dropdown.settings.ts

@@ -0,0 +1,42 @@
+import { ModifiersArgTypes, OptionsArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	disabled: false,
+	valueObject: false,
+	multiple: false,
+	labelKey: 'label',
+	valueKey: 'value',
+	options: [
+		{
+			label: 'Option 1',
+			value: 1,
+		},
+		{
+			label: 'Option 2',
+			value: 2,
+		},
+		{
+			label: 'Option 3',
+			value: 3,
+		},
+	],
+}
+
+export const argTypes = {
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['place-top'],
+	},
+	...OptionsArgTypes,
+	labelNoResults: {
+		control: { type: 'text' },
+		table: {
+			defaultValue: {
+				summary: 'No results',
+			},
+		},
+	},
+	maxValues: {
+		control: { type: 'number' },
+	},
+}

package/src/stories/Dropdown/Dropdown.stories.mdx

@@ -1,28 +1,13 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
-import { VvDropdownProps } from '../../components/VvDropdown/VvDropdown'
-import ObjectUtilities from '../../utils/ObjectUtilities'
+import { Meta, Story } from '@storybook/addon-docs'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import { defaultTest } from './Dropdown.test'
+import { defaultArgs, argTypes } from './Dropdown.settings'
 
 <Meta
 	title="Components/Dropdown"
 	component={VvDropdown}
-	args={{
-		...ObjectUtilities.propsToObject(VvDropdownProps),
-		options: [
-			{
-				label: 'Option 1',
-				value: 1
-			},
-			{
-				label: 'Option 2',
-				value: 2
-			},
-			{
-				label: 'Option 3',
-				value: 3
-			}
-		]
-	}}
+	argTypes={argTypes}
+	args={defaultArgs}
 />
 
 export const Template = (args) => ({
@@ -32,19 +17,90 @@ export const Template = (args) => ({
 	},
 	data() {
 		return {
-			value: ''
+			value: undefined,
 		}
 	},
-	template: `<div class="mb-lg">Value: {{ value }}</div>
-		<vv-dropdown v-bind="args" v-model:modelValue="value" class="w-1/2 ml-lg" />
-		`
+	template: `
+		<vv-dropdown v-bind="args" v-model="value" class="max-w-224 relative" data-testId="element" />
+		<div class="mt-24">Value: <span data-testId="value">{{ value }}</span></div>
+	`,
 })
 
-# VvDropdown
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
-Stories of `VvDropdown`.
-Let's define a story for our playground `dropdown`:
+<Canvas>
+	<Story
+		name="Disabled"
+		play={defaultTest}
+		args={{ disabled: true }}
+		argTypes={{
+			disabled: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
 <Canvas>
-	<Story name="vv-dropdown">{Template.bind({})}</Story>
+	<Story
+		name="Multiple"
+		play={defaultTest}
+		args={{ multiple: true }}
+		argTypes={{
+			multiple: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Max values"
+		play={defaultTest}
+		args={{ multiple: true, maxValues: 2 }}
+		argTypes={{
+			multiple: {
+				control: {
+					disable: true,
+				},
+			},
+			maxValues: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="No results"
+		play={defaultTest}
+		args={{ options: [] }}
+		argTypes={{
+			options: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
 </Canvas>

package/src/stories/Dropdown/Dropdown.test.ts

@@ -0,0 +1,43 @@
+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 label = element.getElementsByTagName('label')[0]
+	const input = label.getElementsByTagName('input')[0]
+
+	// checked value
+	if (!args.invalid && args.options && args.options.length > 0) {
+		label.addEventListener('click', async () => {
+			await sleep()
+			if (!args.disabled && !args.readonly) {
+				const firstValue = getOptionValue(args, 0)
+				expect(JSON.parse(value.innerHTML)).toEqual(
+					args.multiple ? [firstValue] : firstValue,
+				)
+			}
+		})
+		if (args.disabled || args.readonly) {
+			await expect(input).not.toBeChecked()
+		} else {
+			await expect(input).toBeChecked()
+		}
+	}
+
+	// disabled
+	if (args.disabled) {
+		await expect(input).toHaveProperty('disabled')
+		await expect(input).not.toBeChecked()
+	}
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}

package/src/stories/Dropdown/DropdownOptions.stories.mdx

@@ -1,76 +1,96 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import { Template } from './Dropdown.stories.mdx'
+import { defaultArgs, argTypes } from './Dropdown.settings'
+import { defaultTest } from './Dropdown.test'
 
-<Meta title="Components/Dropdown/Props/options" />
-
-# VvDropdown options
-
-Let's define a story for our `options` dropdown.
-
-Options string array:
-
-<Source language="json" code={`[ "Option 4", "Option 5", "Option 6" ]`} />
-
-Options object array and default `valueKey` ("value") and `labelKey` ("label"):
-
-<Source
-	language="json"
-	code={`[
-	{
-		"label": "Option 1",
-		"value": 1
-	},
-	{
-		"label": "Option 2",
-		"value": 2
-	},
-	{
-		"label": "Option 3",
-		"value": 3
-	}
-]`}
+<Meta
+	title="Components/Dropdown/Options"
+	component={VvDropdown}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
 <Canvas>
-	<Story name="options">
-		{() => {
-			return {
-				components: { VvDropdown },
-				data() {
-					return {
-						value: '',
-						objectValue: '',
-						options: ['Option 4', 'Option 5', 'Option 6'],
-						optionsObject: [
-							{
-								label: 'Option 1',
-								value: 1
-							},
-							{
-								label: 'Option 2',
-								value: 2
-							},
-							{
-								label: 'Option 3',
-								value: 3
-							}
-						]
-					}
+	<Story
+		name="Array of Objects"
+		play={defaultTest}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
 				},
-				template: `<div class="h-100 mb-xl">
-						<vv-dropdown v-model:modelValue="value" :options="options" class="w-1/2 ml-lg" />
-						<div class="flex justify-end">Value: {{ value }}</div>
-					</div>
-					<div class="h-100 pt-lg">
-						<vv-dropdown v-model:modelValue="objectValue" :options="optionsObject" class="w-1/2 ml-lg" />
-						<div class="flex justify-end">Value: {{ objectValue }}</div>
-					</div>`
-			}
+			},
 		}}
+		args={{
+			options: [
+				{ value: 'first', label: 'First' },
+				{ value: 'second', label: 'Second' },
+				{ value: 'third', label: 'Third' },
+			],
+		}}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-<Source
-	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" />`}
-/>
+<Canvas>
+	<Story
+		name="Option label key"
+		play={defaultTest}
+		args={{
+			labelKey: 'name',
+			options: [
+				{ value: 'first', name: 'First' },
+				{ value: 'second', name: 'Second' },
+				{ value: 'third', name: 'Third' },
+			],
+		}}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
+				},
+			},
+			labelKey: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Option value key"
+		play={defaultTest}
+		args={{
+			valueKey: 'id',
+			options: [
+				{ id: 'first', label: 'First' },
+				{ id: 'second', label: 'Second' },
+				{ id: 'third', label: 'Third' },
+			],
+		}}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
+				},
+			},
+			valueKey: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>