@volverjs/ui-vue 0.0.1-beta.11 → 0.0.1-beta.16

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

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 import { Template } from './Dropdown.stories.mdx'
+import { dropdownTest } from './Dropdown.test.ts'
 
 <Meta title="Components/Dropdown/Props/multiple" />
 
@@ -29,6 +30,7 @@ Let's define a story for our `multiple` dropdown.
 <Canvas>
 	<Story
 		name="multiple"
+		play={dropdownTest}
 		args={{
 			options: [
 				{
@@ -52,5 +54,5 @@ Let's define a story for our `multiple` dropdown.
 
 <Source
 	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" multiple />`}
+	code={`<vv-dropdown v-model="value" :options="options" multiple />`}
 />

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

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 
 <Meta title="Components/Dropdown/Props/options" />
 
@@ -58,11 +58,11 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 					}
 				},
 				template: `<div class="h-100 mb-xl">
-						<vv-dropdown v-model:modelValue="value" :options="options" class="w-1/2 ml-lg" />
+						<vv-dropdown v-model="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" />
+						<vv-dropdown v-model="objectValue" :options="optionsObject" class="w-1/2 ml-lg" />
 						<div class="flex justify-end">Value: {{ objectValue }}</div>
 					</div>`
 			}
@@ -72,5 +72,5 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 
 <Source
 	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" />`}
+	code={`<vv-dropdown v-model="value" :options="options" />`}
 />

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

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
 import { Template } from './Dropdown.stories.mdx'
+import { dropdownTest } from './Dropdown.test.ts'
 
 <Meta title="Components/Dropdown/Props/useObject" />
 
@@ -31,6 +32,7 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 <Canvas>
 	<Story
 		name="useObject"
+		play={dropdownTest}
 		args={{
 			options: [
 				{
@@ -54,5 +56,5 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 
 <Source
 	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" use-object />`}
+	code={`<vv-dropdown v-model="value" :options="options" use-object />`}
 />

package/src/stories/Icon/Icon.stories.mdx

@@ -1,26 +1,26 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import { VvIconProps } from '../../components/VvIcon/VvIcon'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { VvIconProps } from '@/components/VvIcon'
 
 <Meta
 	title="Components/Icon"
 	component={VvIcon}
 	args={{
-		...ObjectUtilities.propsToObject(VvIconProps),
+		...propsToObject(VvIconProps),
 		name: 'add-circle'
 	}}
 	argTypes={{
 		mode: {
+			options: ['style', 'bg', 'mask', 'svg'],
 			control: {
-				type: 'select',
-				options: ['style', 'bg', 'mask', 'svg']
+				type: 'select'
 			}
 		},
 		prefix: {
+			options: ['simple', 'normal', 'detailed'],
 			control: {
-				type: 'select',
-				options: ['simple', 'normal', 'detailed']
+				type: 'select'
 			}
 		}
 	}}

package/src/stories/Icon/{IconTest.js → Icon.test.js}

@@ -1,6 +1,5 @@
-import { expect } from '@storybook/jest'
+import { expect } from '@/test/expect'
 import { within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
 
 async function iconTest({ canvasElement, functions, ...args }) {
 	const icon = await within(canvasElement).findByTestId('img')
@@ -9,9 +8,7 @@ async function iconTest({ canvasElement, functions, ...args }) {
 			await func({ icon, ...args })
 		})
 	}
-	// Accessibility Test
-	expect.extend(toHaveNoViolations)
-	expect(await axe(icon)).toHaveNoViolations()
+	await expect(icon).toHaveNoViolations()
 }
 
 async function classTest({ icon, classNames = [] }) {

package/src/stories/Icon/IconList.vue

@@ -1,15 +1,14 @@
 <template>
 	<div class="vv-input-text">
-		<label for="search">Search</label>
 		<div class="vv-input-text__wrapper">
-			<input id="search" v-model="search" type="text" />
+			<input v-model="search" type="search" placeholder="Search.." />
 		</div>
 	</div>
-	<div class="flex justify-center gap-16 flex-wrap mt-lg">
+	<div class="grid grid-cols-5 gap-16 mt-lg">
 		<div
 			v-for="iconName in icons"
 			:key="iconName"
-			class="icon-item flex items-center xl:w-1/6 md:w-1/5 sm:w-1/3 xs:w-full">
+			class="flex items-center">
 			<VvIcon :name="iconName" width="25" class="mr-md" />
 			{{ iconName }}
 		</div>
@@ -17,8 +16,8 @@
 </template>
 
 <script setup lang="ts">
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import IconsNormal from '../../assets/icons/normal.json'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import IconsNormal from '@/assets/icons/normal.json'
 import { ref, watch, type Ref } from 'vue'
 
 const allIcons = Object.keys(IconsNormal.icons)

package/src/stories/Icon/IconPrefix.stories.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import { iconTest, classTest } from './IconTest.js'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { iconTest, classTest } from './Icon.test'
 
 <Meta title="Components/Icon/Props/prefix" />
 

package/src/stories/Icon/IconRemote.stories.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import { iconTest, classTest, childElementCountTest } from './IconTest.js'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { iconTest, classTest, childElementCountTest } from './Icon.test'
 
 <Meta title="Components/Icon/Props/remote" />
 

package/src/stories/Icon/IconsList.stories.mdx

@@ -1,12 +1,6 @@
-import {
-	Canvas,
-	Meta,
-	Story,
-	IconGallery,
-	IconItem
-} from '@storybook/addon-docs'
+import { Canvas, Meta, Story, IconItem } from '@storybook/addon-docs'
 import IconList from './IconList.vue'
-import IconsNormal from '../../assets/icons/normal.json'
+import IconsNormal from '@/assets/icons/normal.json'
 
 # Iconography
 
@@ -23,13 +17,3 @@ export const Template = (args) => ({
 <Story name="iconography" args={{}}>
 	{Template.bind({})}
 </Story>
-
-<IconGallery>
-	{/* {Object.keys(IconsNormal.icons).map((key) => {
-		return (
-			<IconItem key={key} name={key}>
-				{Template.bind({})}
-			</IconItem>
-		)
-	})} */}
-</IconGallery>

package/src/stories/InputText/InputText.stories.mdx

@@ -1,7 +1,6 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
 
 <Meta title="Components/InputText" component={VvInputText} />
 
@@ -14,8 +13,8 @@ export const Template = (args, { argTypes }) => ({
 	data: () => ({ value: args.modelValue || '' }),
 	template: `
 		<div class="flex flex-col justify-between">
-			<vv-input-text v-bind="args" v-model:modelValue="value"/>
-			<strong v-if="value">Valore: {{value}} </strong> 
+			<vv-input-text v-bind="args" v-model="value"/>
+			<strong v-if="value">Value: {{value}} </strong> 
 		</div>
         `
 })
@@ -27,16 +26,16 @@ export const Template = (args, { argTypes }) => ({
 			text: 'text',
 			id: 'vv-input-text',
 			name: 'vv-input-text',
-			placeholder: 'Prova input',
-			label: 'Campo di prova',
-			hintLabel: 'Hint label text',
+			placeholder: 'Placeholder',
+			label: 'Label',
+			hintLabel: 'Hint label',
 			autocomplete: 'off',
 			disabled: false,
 			readonly: false,
 			valid: false,
 			error: false,
 			loading: false,
-			loadingLabel: 'Ciao sono il loading',
+			loadingLabel: 'Loading...',
 			icon: '',
 			iconPosition: null,
 			floating: false,
@@ -47,45 +46,52 @@ export const Template = (args, { argTypes }) => ({
 		}}
 		argTypes={{
 			id: {
-				description: 'Id input element.',
+				description: 'Input id',
 				table: { category: 'Attributes' }
 			},
 			name: {
-				description: 'Nome input element',
+				description: 'Input name',
 				table: { category: 'Attributes' }
 			},
 			placeholder: {
-				description: 'Placeholder input',
+				description: 'Input placeholder',
 				table: { category: 'Attributes' }
 			},
 			iconPosition: {
+				options: [null, 'left', 'right'],
+				control: {
+					type: 'select'
+				},
+				table: { category: 'Attributes' }
+			},
+			limit: {
+				options: [true, false, 'countdown'],
 				control: {
-					type: 'select',
-					options: [null, 'left', 'right']
+					type: 'select'
 				},
 				table: { category: 'Attributes' }
 			},
 			type: {
+				options: ['text', 'password', 'date', 'datetime-local'],
 				control: {
-					type: 'select',
-					options: ['text', 'password', 'date', 'datetime-local']
+					type: 'select'
 				},
 				table: { category: 'Attributes' }
 			},
 			minlength: {
-				description: 'Lunghezza minima testo',
+				description: 'Min length',
 				table: { category: 'Attributes' }
 			},
 			maxlength: {
-				description: 'Lunghezza massima testo',
+				description: 'Max length',
 				table: { category: 'Attributes' }
 			},
 			min: {
-				description: 'Valore minimo',
+				description: 'Min value',
 				table: { category: 'Attributes' }
 			},
 			max: {
-				description: 'Valore massimo',
+				description: 'Max value',
 				table: { category: 'Attributes' }
 			}
 		}}>

package/src/stories/InputText/InputText.test.ts

@@ -0,0 +1,156 @@
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
+import { within, userEvent } from '@storybook/testing-library'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+
+export async function testInputText(
+	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes,
+	{
+		isClickDisabled = false,
+		className = null,
+		customText = null
+	}: ComponentConfig = {}
+) {
+	const inputTextWrapperParent = await within(canvasElement).findByTestId(
+		'input-text'
+	)
+	const inputText = document.querySelector('input') as HTMLInputElement
+	if (isClickDisabled) {
+		await expect(inputText).not.toBeClicked()
+	} else {
+		await expect(inputText).toBeClicked()
+		await userEvent.click
+		if (
+			inputText.type == 'text' ||
+			inputText.type == 'password' ||
+			inputText.type == 'search'
+		) {
+			const text = customText || 'Lorem ipsum'
+			userEvent.keyboard(text)
+			if (!data.args.limit && data.args.maxlength) {
+				data.args.maxlength >= text.length
+					? expect(inputText.value).toEqual(text)
+					: expect(inputText.value.length).toEqual(
+							data.args.maxlength
+					  )
+			} else if (!data.args.limit) {
+				expect(inputText.value).toEqual(data.args.modelValue || text)
+			}
+		}
+	}
+	const baseAttrs = [
+		'id',
+		'name',
+		'placeholder',
+		'required',
+		'type',
+		'max',
+		'maxlength',
+		'min',
+		'minlength'
+	]
+	baseAttrs.forEach((attr) => {
+		if (data.args[attr] !== undefined) {
+			expect(String(inputText.getAttribute(attr))).toEqual(
+				String(data.args[attr])
+			)
+		}
+	})
+	data.args.label &&
+		expect(
+			(inputTextWrapperParent.firstChild as HTMLElement)?.innerText
+		).toEqual(data.args.label)
+	data.args.hintLabel &&
+		expect(
+			(inputTextWrapperParent.lastChild as HTMLElement)?.innerText
+		).toEqual(data.args.hintLabel)
+	data.args.modelValue &&
+		expect(inputText.value).toEqual(data.args.modelValue)
+	data.args.readonly && expect(inputText.readOnly).toEqual(data.args.readonly)
+	await sleep()
+	expect(inputTextWrapperParent).toHaveClass('vv-input-text')
+	if (inputText.value) {
+		expect(inputTextWrapperParent).toHaveClass('vv-input-text--dirty')
+	}
+	className && expect(inputTextWrapperParent).toHaveClass(className)
+	await expect(inputTextWrapperParent).toHaveNoViolations()
+}
+
+export async function limitTest({ canvasElement, ...data }: PlayAttributes) {
+	const inputText = document.querySelector('input') as HTMLInputElement
+	await testInputText({ canvasElement, ...data })
+	const limit = document.getElementsByClassName(
+		'vv-input-text__limit'
+	)[0] as HTMLElement
+	if (data.args.maxlength) {
+		while (inputText.value.length < data.args.maxlength)
+			await userEvent.keyboard(
+				' dolor sit amet, consectetur adipiscing elit'
+			)
+		data.args.limit === true &&
+			expect(limit.innerText).toEqual(
+				`${inputText.value.length}/${data.args.maxlength}`
+			)
+		data.args.limit === 'countdown' &&
+			expect(limit.innerHTML).toBe(
+				`${data.args.maxlength - inputText.value.length}`
+			)
+	}
+}
+
+export async function iconTest(
+	{ canvasElement, ...data }: PlayAttributes,
+	customElement: ComponentConfig
+) {
+	const icon = customElement || document.querySelector('svg')
+	expect(icon.customElement || icon).toHaveClass([
+		'vv-icon',
+		'iconify',
+		'iconify--normal',
+		'iconify--ds'
+	])
+	const inputTextWrapperParent = await within(canvasElement).findByTestId(
+		'input-text'
+	)
+	data.args.iconPosition &&
+		expect(inputTextWrapperParent).toHaveClass(
+			`vv-input-text--icon-${data.args.iconPosition}`
+		)
+	testInputText({ canvasElement, ...data })
+}
+
+export async function slotsTest({ canvasElement, ...data }: PlayAttributes) {
+	const inputTextWrapperParent = await within(canvasElement).findByTestId(
+		'input-text'
+	)
+	const inputTextWrapper = inputTextWrapperParent.children[0]
+	const icon = inputTextWrapper.firstElementChild as HTMLElement
+	iconTest({ canvasElement, ...data }, { customElement: icon })
+	const button = inputTextWrapper.lastElementChild as HTMLButtonElement
+	expect(button).toHaveClass('vv-button')
+	expect(button.innerText).toBe('Here!')
+}
+
+export async function inputNumberTest({
+	canvasElement,
+	...data
+}: PlayAttributes) {
+	const inputText = document.querySelector('input') as HTMLInputElement
+	const actionButtonGroup = document.getElementsByClassName(
+		'vv-input-text__actions-group'
+	)
+	const buttonUp = actionButtonGroup[0].firstElementChild as HTMLButtonElement
+	const buttonDown = actionButtonGroup[0]
+		.lastElementChild as HTMLButtonElement
+	userEvent.click(inputText)
+	for (let i = 1; i < 4; i++) {
+		buttonUp.click()
+		expect(inputText.value).toEqual(`${data.args.step * i}`)
+	}
+	const inputValue: number = parseFloat(inputText.value)
+	for (let i = inputValue; i > data.args.step; i--) {
+		buttonDown.click()
+		expect(inputText.value).toEqual(`${i - data.args.step}`)
+	}
+	await testInputText({ canvasElement, ...data })
+}

package/src/stories/InputText/InputTextAutocomplete.stories.mdx

@@ -1,15 +1,22 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
 
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
 import { Template } from './InputText.stories.mdx'
+import { testInputText } from './InputText.test.ts'
 
 <Meta title="Components/InputText/Autocomplete" component={VvInputText} />
 
 <Canvas>
 	<Story
 		name="Autocomplete"
-		args={{ name: 'input-text-autocomplete', autocomplete: 'on' }}>
+		play={testInputText}
+		args={{
+			name: 'input-text-autocomplete',
+			label: 'Input Text Autocomplete',
+			autocomplete: 'on',
+			'data-testId': 'input-text'
+		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>

package/src/stories/InputText/InputTextAutofocus.stories.mdx

@@ -1,19 +1,22 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
 
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
 import { Template } from './InputText.stories.mdx'
+import { testInputText } from './InputText.test.ts'
 
 <Meta title="Components/InputText/Autofocus" component={VvInputText} />
 
 <Canvas>
 	<Story
 		name="Autofocus"
+		play={testInputText}
 		args={{
 			name: 'input-text-autofocus',
-			label: 'Campo in autofocus',
+			label: 'Input Text Autofocus',
 			autofocus: true,
-			type: 'text'
+			type: 'text',
+			'data-testId': 'input-text'
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/InputText/InputTextDisabled.stories.mdx

@@ -1,18 +1,26 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
 
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
 import { Template } from './InputText.stories.mdx'
+import { testInputText } from './InputText.test.ts'
 
 <Meta title="Components/InputText/Disabled" component={VvInputText} />
 
 <Canvas>
 	<Story
 		name="Disabled"
+		play={(ctx) => {
+			testInputText(ctx, {
+				isClickDisabled: true
+			})
+		}}
 		args={{
 			name: 'input-text-disabled',
+			label: 'Input Text Disabled',
 			disabled: true,
-			modelValue: 'Prova'
+			modelValue: 'Test',
+			'data-testId': 'input-text'
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/InputText/InputTextError.stories.mdx

@@ -1,18 +1,26 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
 
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
 import { Template } from './InputText.stories.mdx'
+import { testInputText } from './InputText.test.ts'
 
 <Meta title="Components/InputText/Error" component={VvInputText} />
 
 <Canvas>
 	<Story
 		name="Error"
+		play={async (ctx) => {
+			testInputText(ctx, {
+				className: 'vv-input-text--invalid'
+			})
+		}}
 		args={{
 			name: 'input-text-error',
+			label: 'Input Text Error',
 			error: true,
-			errorLabel: 'Error message!'
+			errorLabel: 'Error message!',
+			'data-testId': 'input-text'
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/InputText/InputTextFloating.stories.mdx

@@ -1,19 +1,26 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
 
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
 import { Template } from './InputText.stories.mdx'
+import { testInputText } from './InputText.test.ts'
 
 <Meta title="Components/InputText/Floating" component={VvInputText} />
 
 <Canvas>
 	<Story
 		name="Floating"
+		play={(ctx) => {
+			testInputText(ctx, {
+				className: 'vv-input-text--floating'
+			})
+		}}
 		args={{
 			name: 'input-text-floating',
-			label: 'Label di prova',
+			label: 'Input Text Floating',
 			floating: true,
-			type: 'text'
+			type: 'text',
+			'data-testId': 'input-text'
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/InputText/InputTextHintLabel.stories.mdx

@@ -1,17 +1,25 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
 
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
 import { Template } from './InputText.stories.mdx'
+import { testInputText } from './InputText.test.ts'
 
 <Meta title="Components/InputText/HintLabel" component={VvInputText} />
 
 <Canvas>
 	<Story
 		name="HintLabel"
+		play={async (ctx) => {
+			testInputText(ctx, {
+				className: null
+			})
+		}}
 		args={{
 			name: 'input-text-hint',
-			hintLabel: 'Help text di prova!'
+			label: 'Input Text with Hint Label',
+			hintLabel: 'Lorem ipsum dolor sit amet',
+			'data-testId': 'input-text'
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/InputText/InputTextIcon.stories.mdx

@@ -1,17 +1,21 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
 
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
 import { Template } from './InputText.stories.mdx'
+import { iconTest } from './InputText.test.ts'
 
 <Meta title="Components/InputText/Icon" component={VvInputText} />
 
 <Canvas>
 	<Story
 		name="Icon"
+		play={iconTest}
 		args={{
 			name: 'input-text-icon',
-			icon: 'add'
+			label: 'Input Text with Icon',
+			icon: 'add',
+			'data-testId': 'input-text'
 		}}>
 		{Template.bind({})}
 	</Story>