@volverjs/ui-vue 0.0.1-beta.11

package/src/stories/RadioGroup/RadioPropertyTest.js

@@ -0,0 +1,131 @@
+import { expect } from '@storybook/jest'
+import { userEvent, within } from '@storybook/testing-library'
+import { toHaveNoViolations, axe } from 'jest-axe'
+
+async function radioGroupTest({ canvasElement }) {
+	const radioGroupParent = await within(canvasElement).findByRole(
+		'radiogroup'
+	)
+	const radio1 = document.getElementById('o1')
+	const radio2 = document.getElementById('o2')
+	radioCheck(radio1, false)
+	await expect(radio1).toBeClicked()
+	classTest(radioGroupParent, [
+		'vv-input-radio-group',
+		'vv-input-radio-group--horizontal'
+	])
+	classTest(radio1, ['focus-visible', 'vv-input-radio__input--checked'])
+	radioCheck(radio1, true)
+	radioCheck(radio2, false)
+	accessibilityTest(radioGroupParent)
+}
+
+async function disabledTest() {
+	const radio = document.getElementById('disabled_opt0')
+	expect(radio).toHaveClass('vv-input-radio__input--disabled')
+	expect(radio).toBeDisabled()
+	await radioCheck(radio, false)
+	await userEvent.click(radio)
+	await expect(radio).not.toBeClicked()
+	await radioCheck(radio, false)
+	accessibilityTest(radio.parentElement)
+}
+
+async function errorLabelTest({ canvasElement }) {
+	const radioGroupParent = await within(canvasElement).findByRole(
+		'radiogroup'
+	)
+	expect(radioGroupParent).toHaveClass('vv-input-radio-group--invalid')
+	accessibilityTest(radioGroupParent)
+}
+
+async function hintLabelTest({ canvasElement, ...data }) {
+	const radioGroupParent = await within(canvasElement).findByRole(
+		'radiogroup'
+	)
+	const labelInnerHTML = radioGroupParent.lastChild.innerHTML
+	const hintLabel = data.args.hintLabel
+	expect(labelInnerHTML).toBeTruthy()
+	expect(hintLabel).toBeTruthy()
+	expect(labelInnerHTML).toEqual(hintLabel)
+}
+
+async function labelTest({ canvasElement, ...data }) {
+	const radioGroupParent = await within(canvasElement).findByRole(
+		'radiogroup'
+	)
+	const labelInnerHTML = radioGroupParent.firstChild.innerHTML
+	const hintLabel = data.args.label
+	expect(labelInnerHTML).toBeTruthy()
+	expect(hintLabel).toBeTruthy()
+	expect(labelInnerHTML).toEqual(hintLabel)
+}
+
+async function readonlyTest() {
+	const radios = ['readonly_opt0', 'readonly_opt1', 'readonly_opt2']
+	radios.forEach((radio) => {
+		expect(document.getElementById(radio)).toHaveClass(
+			'vv-input-radio__input--readonly'
+		)
+	})
+}
+
+async function validTest({ canvasElement }) {
+	const radioGroupParent = await within(canvasElement).findByRole(
+		'radiogroup'
+	)
+	expect(radioGroupParent).toHaveClass('vv-input-radio-group--valid')
+	accessibilityTest(radioGroupParent)
+}
+
+async function verticalTest({ canvasElement }) {
+	const radioGroupParent = await within(canvasElement).findByRole(
+		'radiogroup'
+	)
+	expect(radioGroupParent).not.toHaveClass('vv-input-radio-group--horizontal')
+}
+
+expect.extend({
+	async toBeClicked(radioInput) {
+		let result = {
+			pass: false,
+			message: `Click event doesn't work`
+		}
+		await userEvent.click(radioInput)
+		await radioInput.click()
+		if (radioInput.checked) {
+			result = {
+				pass: true,
+				message: `Click event work!`
+			}
+		}
+		return result
+	}
+})
+
+async function classTest(input, classNames = []) {
+	classNames.forEach((cssClass) => {
+		expect(input).toHaveClass(cssClass)
+	})
+}
+
+async function accessibilityTest(element) {
+	expect.extend(toHaveNoViolations)
+	expect(await axe(element)).toHaveNoViolations()
+}
+
+async function radioCheck(radio, value) {
+	expect(radio.ariaChecked).toBe(`${value}`)
+	expect(radio.checked).toBe(value)
+}
+
+export {
+	radioGroupTest,
+	errorLabelTest,
+	hintLabelTest,
+	labelTest,
+	disabledTest,
+	readonlyTest,
+	validTest,
+	verticalTest
+}

package/src/stories/RadioGroup/RadioSlotsTest.js

@@ -0,0 +1,20 @@
+import { expect } from '@storybook/jest'
+import { within } from '@storybook/testing-library'
+import { toHaveNoViolations, axe } from 'jest-axe'
+
+async function slotsTest({ canvasElement }, radioGroup) {
+	const radioGroupParent = await within(canvasElement).findByRole(
+		'radiogroup'
+	)
+	const slot = radioGroupParent.lastElementChild
+	expect(slot).toHaveClass('vv-input-radio-group__hint')
+	expect(slot.innerText).toBeTruthy
+	if (radioGroup) {
+		expect(radioGroupParent).toHaveClass(
+			`vv-input-radio-group--${radioGroup}`
+		)
+	}
+	expect.extend(toHaveNoViolations)
+	expect(await axe(slot)).toHaveNoViolations()
+}
+export { slotsTest }

package/src/stories/Select/Select.stories.mdx

@@ -0,0 +1,55 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import { VvSelectProps } from '../../components/VvSelect/VvSelect'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+
+<Meta
+	title="Components/Select"
+	component={VvSelect}
+	args={{
+		...ObjectUtilities.propsToObject(VvSelectProps),
+		maxValues: -1,
+		label: 'Lorem Ipsum',
+		placeholder: 'Placeholder',
+		options: [
+			{
+				label: 'Option 1',
+				value: 1
+			},
+			{
+				label: 'Option 2',
+				value: 2
+			},
+			{
+				label: 'Option 3',
+				value: 3
+			}
+		]
+	}}
+/>
+
+export const Template = (args) => ({
+	components: { VvSelect },
+	setup() {
+		return { args }
+	},
+	data() {
+		return {
+			value: '',
+			optionsString: ['Option 4', 'Option 5', 'Option 6']
+		}
+	},
+	template: `<div class="w-1/2">
+            <vv-select v-bind="args" v-model:modelValue="value" />
+			value: {{ value }}
+        </div>`
+})
+
+# VvSelect
+
+Stories of `VvSelect`.
+Let's define a story for our playground `select`:
+
+<Canvas>
+	<Story name="vv-select">{Template.bind({})}</Story>
+</Canvas>

package/src/stories/Select/SelectDisabled.stories.mdx

@@ -0,0 +1,32 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvSelect from '../../components/VvSelect/VvSelect.vue'
+
+<Meta title="Components/Select/Props/disabled" />
+
+# VvSelect disabled
+
+Let's define a story for our `disabled` select.
+
+<Canvas>
+	<Story name="disabled">
+		{() => {
+			return {
+				components: { VvSelect },
+				data() {
+					return {
+						value: '',
+						options: ['Option 1', 'Option 2', 'Option 3']
+					}
+				},
+				template: `<div class="w-1/2">
+						<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="html"
+	code={`<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />`}
+/>

package/src/stories/Select/SelectMaxValues.stories.mdx

@@ -0,0 +1,33 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvSelect from '../../components/VvSelect/VvSelect.vue'
+
+<Meta title="Components/Select/Props/maxValues" />
+
+# VvSelect maxValues
+
+Let's define a story for our multple `max-values` select.
+
+<Canvas>
+	<Story name="maxValues">
+		{() => {
+			return {
+				components: { VvSelect },
+				data() {
+					return {
+						value: '',
+						options: ['Option 4', 'Option 5', 'Option 6']
+					}
+				},
+				template: `<div class="w-1/2">
+						<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple max-values="2" />
+						value: {{ value }}
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="html"
+	code={`<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple max-values="2" />`}
+/>

package/src/stories/Select/SelectMultiple.stories.mdx

@@ -0,0 +1,64 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvSelect from '../../components/VvSelect/VvSelect.vue'
+
+<Meta title="Components/Select/Props/multiple" />
+
+# VvSelect multiple
+
+Let's define a story for our `multiple` select.
+
+<Source
+	language="json"
+	code={`[
+	{
+		"label": "Option 1",
+		"value": 1
+	},
+	{
+		"label": "Option 2",
+		"value": 2
+	},
+	{
+		"label": "Option 3",
+		"value": 3
+	}
+]`}
+/>
+
+<Canvas>
+	<Story name="multiple">
+		{() => {
+			return {
+				components: { VvSelect },
+				data() {
+					return {
+						value: '',
+						options: [
+							{
+								label: 'Option 1',
+								value: 1
+							},
+							{
+								label: 'Option 2',
+								value: 2
+							},
+							{
+								label: 'Option 3',
+								value: 3
+							}
+						]
+					}
+				},
+				template: `<div class="w-1/2">
+						<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple />
+						value: {{ value }}
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="html"
+	code={`<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple />`}
+/>

package/src/stories/Select/SelectOptions.stories.mdx

@@ -0,0 +1,78 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvSelect from '../../components/VvSelect/VvSelect.vue'
+
+<Meta title="Components/Select/Props/options" />
+
+# VvSelect options
+
+Let's define a story for our `options` select.
+
+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
+	}
+]`}
+/>
+
+<Canvas>
+	<Story name="options">
+		{() => {
+			return {
+				components: { VvSelect },
+				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
+							}
+						]
+					}
+				},
+				template: `<div class="flex gap-32">
+						<div class="w-1/2">
+							<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" />
+							value: {{ value }}
+						</div>
+						<div class="w-1/2">
+							<vv-select v-model:modelValue="objectValue" :options="optionsObject" placeholder="Placeholder" label="Label 1" />
+							value: {{ objectValue }}
+						</div>
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="html"
+	code={`<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" />`}
+/>

package/src/stories/Select/SelectSearchable.stories.mdx

@@ -0,0 +1,80 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvSelect from '../../components/VvSelect/VvSelect.vue'
+
+<Meta title="Components/Select/Props/searchable" />
+
+# VvSelect searchable
+
+Let's define a story for our select with props:
+
+`searchable` `label-no-result` `search-placeholder` and `debounce-search`
+
+<Source
+	language="json"
+	code={`[
+	{
+		"label": "Option 1",
+		"value": 1
+	},
+	{
+		"label": "Option 2",
+		"value": 2
+	},
+	{
+		"label": "Option 3",
+		"value": 3
+	}
+]`}
+/>
+
+<Canvas>
+	<Story name="searchable">
+		{() => {
+			return {
+				components: { VvSelect },
+				data() {
+					return {
+						value: '',
+						searchText: '',
+						options: [
+							{
+								label: 'Option 1',
+								value: 1
+							},
+							{
+								label: 'Option 2',
+								value: 2
+							},
+							{
+								label: 'Option 3',
+								value: 3
+							}
+						]
+					}
+				},
+				template: `<div class="w-1/2 flex gap-32">
+						<vv-select v-model:modelValue="value" @change:search="searchText = $event" :options="options" label="Label 1" searchable label-no-result="No results" search-placeholder="Search" debounce-search="1000" />
+						<div class="my-auto">
+							search text: {{ searchText }}
+						</div>
+						<div class="my-auto">
+							value: {{ value }}
+						</div>
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="html"
+	code={`<vv-select
+	v-model:modelValue="value"
+	:options="options"
+	label="Label 1"
+	searchable
+	label-no-result="No results"
+	search-placeholder="Search"
+	debounce-search="1000"
+/>`}
+/>

package/src/stories/Select/SelectSeparator.stories.mdx

@@ -0,0 +1,64 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvSelect from '../../components/VvSelect/VvSelect.vue'
+
+<Meta title="Components/Select/Props/separator" />
+
+# VvSelect separator
+
+Let's define a story for our `separator` select.
+
+<Source
+	language="json"
+	code={`[
+	{
+		"label": "Option 1",
+		"value": 1
+	},
+	{
+		"label": "Option 2",
+		"value": 2
+	},
+	{
+		"label": "Option 3",
+		"value": 3
+	}
+]`}
+/>
+
+<Canvas>
+	<Story name="separator">
+		{() => {
+			return {
+				components: { VvSelect },
+				data() {
+					return {
+						value: '',
+						options: [
+							{
+								label: 'Option 1',
+								value: 1
+							},
+							{
+								label: 'Option 2',
+								value: 2
+							},
+							{
+								label: 'Option 3',
+								value: 3
+							}
+						]
+					}
+				},
+				template: `<div class="w-1/2">
+						<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple separator=" - " />
+						value: {{ value }}
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="html"
+	code={`<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple separator=" - " />`}
+/>

package/src/stories/Select/SelectUseObject.stories.mdx

@@ -0,0 +1,66 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvSelect from '../../components/VvSelect/VvSelect.vue'
+
+<Meta title="Components/Select/Props/useObject" />
+
+# VvSelect useObject
+
+Let's define a story for our `useObject` select.
+
+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
+	}
+]`}
+/>
+
+<Canvas>
+	<Story name="useObject">
+		{() => {
+			return {
+				components: { VvSelect },
+				data() {
+					return {
+						value: '',
+						options: [
+							{
+								label: 'Option 1',
+								value: 1
+							},
+							{
+								label: 'Option 2',
+								value: 2
+							},
+							{
+								label: 'Option 3',
+								value: 3
+							}
+						]
+					}
+				},
+				template: `<div class="w-1/2">
+						<vv-select v-model:modelValue="value" :options="options" label="Label 1" use-object />
+						value: {{ value }}
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="html"
+	code={`<vv-select v-model:modelValue="value" :options="options" label="Label 1" use-object />`}
+/>

package/src/stories/Textarea/Textarea.stories.mdx

@@ -0,0 +1,66 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import { toGroup } from '../utils'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { VvTextareaProps } from '../../components/VvTextarea/VvTextarea'
+
+<Meta title="Components/Textarea" component={VvTextarea} />
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvTextarea },
+	setup() {
+		return { args }
+	},
+	data: () => ({ value: args.modelValue || '' }),
+	template: `
+		<div class="flex flex-col justify-between">
+			<vv-textarea v-bind="args" v-model:modelValue="value"/>
+			<strong v-if="value">Valore: {{value}} </strong> 
+		</div>
+        `
+})
+
+# VvTextarea
+
+`VvTextarea` is a multi-line text input element.
+
+<Canvas>
+	<Story
+		name="vv-textarea"
+		args={{
+			...ObjectUtilities.propsToObject(VvTextareaProps),
+			maxlength: null
+		}}
+		argTypes={{
+			...toGroup(
+				['required', 'minlength', 'maxlength'],
+				'Data validation'
+			),
+			...toGroup(
+				[
+					'disabled',
+					'readonly',
+					'valid',
+					'validLabel',
+					'error',
+					'errorLabel',
+					'loading',
+					'loadingLabel'
+				],
+				'State'
+			),
+			...toGroup(['floating'], 'Floating'),
+			...toGroup(['modifiers'], 'Modifiers'),
+			...toGroup(['icon', 'iconPosition'], 'Icon'),
+			...toGroup(['hintLabel'], 'Hint text'),
+			...toGroup(['limit'], 'Text limit count'),
+			...toGroup(['autoclear'], 'Experimental feature')
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<ArgsTable story="vv-textarea" />