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

package/src/stories/Check/Check.stories.mdx

@@ -1,62 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-<Meta
-	title="Components/Check"
-	args={{
-		modelValue: []
-	}}
-	component={VvCheck}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvCheck },
-	setup() {
-		return { args }
-	},
-	data: () => ({ ckValue: [] }),
-	template: `
-		<div :data-testData="ckValue" data-testId="checkbox" class="flex flex-row justify-between">
-			<vv-check v-bind="args" v-model:modelValue="ckValue" class="ciccio"/>
-			<strong v-if="ckValue">Valore selez: {{ckValue}} </strong> 
-		</div>
-        `
-})
-
-<Source language="jsx" code={'<vv-check/>'} />
-
-<Canvas>
-	<Story
-		name="vv-check"
-		args={{
-			id: 1,
-			label: 'opzione 1',
-			name: 'ck1',
-			disabled: false,
-			switch: false,
-			binary: false,
-			modelValue: [],
-			value: 1
-		}}
-		argTypes={{
-			id: {
-				description: 'Id input element.',
-				table: { category: 'Attributes' }
-			},
-			name: {
-				description: 'Nome input element',
-				table: { category: 'Attributes' }
-			},
-			value: {
-				description: 'Valore input element',
-				table: { category: 'Attributes' }
-			}
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<ArgsTable story="vv-check" />

package/src/stories/Check/CheckBinary.stories.mdx

@@ -1,80 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-import { checkTest, booleanTest, binaryTest } from './CheckPropertyTest.js'
-import { Template } from './Check.stories.mdx'
-
-<Meta
-	title="Components/Check/Binary"
-	args={{
-		modelValue: []
-	}}
-	component={VvCheck}
-/>
-
-# Binary True/false (sperimentale)
-
-<Canvas>
-	<Story
-		name="True/false"
-		play={(ctx) =>
-			checkTest({
-				...ctx,
-				functions: [booleanTest]
-			})
-		}
-		args={{
-			id: 4,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck4',
-			binary: true,
-			modelValue: false
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-# Binary "Si"/"No" (sperimentale)
-
-<Canvas>
-	<Story
-		name="Binario Si/No (sperimentale)"
-		play={({ canvasElement }) => {
-			console.log({ canvasElement })
-		}}
-		args={{
-			id: 5,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck5',
-			binary: true,
-			trueValue: 'Si',
-			falseValue: 'No'
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheck },
-				setup() {
-					return { args }
-				},
-				data() {
-					return {
-						checkValue: 'No'
-					}
-				},
-				watch: {
-					checkValue: {
-						immediate: true,
-						handler(newValue) {
-							console.log(newValue)
-						}
-					}
-				},
-				template: `<div :data-testData="checkValue" :key="checkValue">
-						<vv-check v-model:modelValue="checkValue" v-bind="args"  />
-						<strong v-if="checkValue">Valore selez: {{checkValue}} </strong>
-					</div>`
-			}
-		}}
-	</Story>
-</Canvas>

package/src/stories/Check/CheckDisabled.stories.mdx

@@ -1,30 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './Check.stories.mdx'
-
-<Meta
-	title="Components/Check/Disabled"
-	args={{
-		modelValue: []
-	}}
-	component={VvCheck}
-/>
-
-# Disabled
-
-<Canvas>
-	<Story
-		name="Disabled"
-		args={{
-			id: 1,
-			label: 'opzione 1',
-			name: 'ck1',
-			disabled: true,
-			value: 1
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Check/CheckError.stories.mdx

@@ -1,64 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './Check.stories.mdx'
-
-<Meta
-	title="Components/Check/Error"
-	args={{
-		modelValue: []
-	}}
-	component={VvCheck}
-/>
-
-# Error
-
-<Canvas>
-	<Story
-		name="Invalid"
-		args={{
-			id: 6,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck6',
-			modelValue: false,
-			error: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-# Error with message
-
-<Canvas>
-	<Story
-		name="Error with message"
-		args={{
-			id: 7,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck7',
-			modelValue: false,
-			error: true,
-			errorLabel: 'Sbagliato!'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-# Error with messages
-
-<Canvas>
-	<Story
-		name="Error with messages"
-		args={{
-			id: 8,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck8',
-			modelValue: false,
-			error: true,
-			errorLabel: ['Sbagliato!', 'Mona!']
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Check/CheckErrorTests.js

@@ -1,72 +0,0 @@
-import { expect } from '@storybook/jest'
-import { userEvent, within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function disabledTest() {
-	const checkInput = document.getElementById('1')
-	await expect(checkInput).toHaveClass('vv-input-check__input--disabled')
-	await expect(checkInput).toBeDisabled()
-	await expect(checkInput).toHaveProperty('disabled')
-	await expect(checkInput).not.toBeChecked()
-	await expect(checkInput.value).toBe('')
-	await accessibilityTest(checkInput)
-}
-
-async function readOnlyTest() {
-	const checkInput = document.getElementById('2')
-	const value = document.getElementById('value')
-	console.log(checkInput.modelValue)
-	expect(checkInput).toHaveProperty('readOnly')
-	await expect(checkInput).toHaveClass('vv-input-check__input--readonly')
-	userEvent.click(checkInput)
-	await expect(checkInput).toBeChecked()
-	await console.log({ checkInput })
-	await classTest(checkInput, [
-		'focus-visible',
-		'vv-input-check__input--checked',
-		'vv-input-check__input--readonly'
-	])
-	accessibilityTest(checkInput)
-}
-
-async function switchTest() {
-	const checkInput = document.getElementById('3')
-	await expect(checkInput.parentElement).toHaveClass(
-		'vv-input-checkbox--switch'
-	)
-	userEvent.click(checkInput)
-	await expect(checkInput).toBeChecked()
-	console.log(checkInput.parentElement)
-	accessibilityTest(checkInput)
-}
-
-expect.extend({
-	async toBeChecked(checkInput) {
-		let result = {
-			pass: false,
-			message: `Click event doesn't work`
-		}
-		// await userEvent.click(checkInput)
-		await checkInput.click()
-		if (checkInput.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()
-}
-
-export { disabledTest, readOnlyTest, switchTest }

package/src/stories/Check/CheckHintLabel.stories.mdx

@@ -1,30 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './Check.stories.mdx'
-
-<Meta
-	title="Components/Check/HintLabel"
-	args={{
-		modelValue: []
-	}}
-	component={VvCheck}
-/>
-
-# Hint label
-
-<Canvas>
-	<Story
-		name="Hint label"
-		args={{
-			id: 9,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck9',
-			modelValue: false,
-			hintLabel: 'Aiuto! Son qui!'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Check/CheckPropertyTest.js

@@ -1,101 +0,0 @@
-import { expect } from '@storybook/jest'
-import { userEvent, within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function checkTest({ canvasElement, functions, ...data }) {
-	const checkboxParent = await within(canvasElement).findByTestId('checkbox')
-	const checkbox = document.getElementById(`${data.args.id}`)
-	console.log(data)
-	expect(checkbox).toBeChecked()
-	if (functions) {
-		functions.forEach(async (func) => {
-			await func({ checkboxParent, ...data })
-		})
-	}
-	// Accessibility Test
-	expect.extend(toHaveNoViolations)
-	expect(await axe(checkboxParent)).toHaveNoViolations()
-}
-
-async function booleanTest(checkboxParent) {
-	const checkbox = document.getElementById(`${checkboxParent.args.id}`)
-	console.log([checkboxParent.checkboxParent.attributes[0]])
-	// expect(checkboxParent.children[0]).toHaveClass('vv-input-checkbox')
-	checkbox.addEventListener('change', (event) => {
-		expect(event).toBeTruthy
-	})
-	await userEvent.click(checkbox)
-	await classTest(checkbox, [
-		'focus-visible',
-		'vv-input-check__input--checked'
-	])
-}
-
-async function binaryTest() {
-	const checkbox = document.getElementById('5')
-	expect(checkbox.parentElement).toHaveClass('vv-input-checkbox')
-	// userEvent.click(checkbox)
-	userEvent.click(checkbox)
-	accessibilityTest(checkbox)
-	checkbox.addEventListener('change', (event) => {
-		console.log(event)
-	})
-}
-
-async function disabledTest() {
-	const checkInput = document.getElementById('1')
-	await expect(checkInput).toHaveClass('vv-input-check__input--disabled')
-	await expect(checkInput).toBeDisabled()
-	await expect(checkInput).toHaveProperty('disabled')
-	await expect(checkInput).not.toBeChecked()
-	await expect(checkInput.value).toBe('')
-	await accessibilityTest(checkInput)
-}
-
-async function readOnlyTest() {
-	const checkInput = document.getElementById('2')
-	const value = document.getElementById('value')
-	console.log(checkInput.modelValue)
-	expect(checkInput).toHaveProperty('readOnly')
-	await expect(checkInput).toHaveClass('vv-input-check__input--readonly')
-	userEvent.click(checkInput)
-	await expect(checkInput).toBeChecked()
-	await console.log({ checkInput })
-	await classTest(checkInput, [
-		'focus-visible',
-		'vv-input-check__input--checked',
-		'vv-input-check__input--readonly'
-	])
-	accessibilityTest(checkInput)
-}
-
-expect.extend({
-	async toBeChecked(checkInput) {
-		let result = {
-			pass: false,
-			message: `Click event doesn't work`
-		}
-		// await userEvent.click(checkInput)
-		await checkInput.click()
-		if (checkInput.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()
-}
-
-export { checkTest, booleanTest, binaryTest, disabledTest, readOnlyTest }

package/src/stories/Check/CheckReadonly.stories.mdx

@@ -1,30 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './Check.stories.mdx'
-
-<Meta
-	title="Components/Check/Readonly"
-	args={{
-		modelValue: []
-	}}
-	component={VvCheck}
-/>
-
-# Readonly
-
-<Canvas>
-	<Story
-		name="Readonly"
-		args={{
-			id: 2,
-			label: 'opzione 1',
-			name: 'ck2',
-			readonly: true,
-			value: 'Pera'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Check/CheckSlots.stories.mdx

@@ -1,51 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-<Meta title="Components/Check/Slots" component={VvCheck} />
-
-# Slot default
-
-Slot default define the content of Check
-
-<Source
-	language="jsx"
-	code={'<vv-check name="r1" value="1">My content</vv-check>'}
-/>
-
-# Slot default
-
-<Canvas>
-	<Story name="default">
-		{() => {
-			return {
-				components: { VvCheck },
-				template: `
-					<vv-check name="r1" value="1">
-						My content
-					</vv-check>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>
-
-# Slot hint
-
-<Canvas>
-	<Story name="hint">
-		{() => {
-			return {
-				components: { VvCheck },
-				template: `
-					<vv-check name="r1" value="1">
-						My content
-						<template #hint="{value}">
-							Valore selezionato: {{value}}
-						</template>
-					</vv-check>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>

package/src/stories/Check/CheckSwitch.stories.mdx

@@ -1,30 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './Check.stories.mdx'
-
-<Meta
-	title="Components/Check/Switch"
-	args={{
-		modelValue: []
-	}}
-	component={VvCheck}
-/>
-
-# Switch
-
-<Canvas>
-	<Story
-		name="Switch"
-		args={{
-			id: 3,
-			label: 'opzione 1',
-			name: 'ck3',
-			switch: true,
-			value: { a: 'Banana' }
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroup.stories.mdx

@@ -1,69 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-<Meta title="Components/CheckGroup" component={VvCheckGroup} />
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvCheckGroup, VvCheck },
-	setup() {
-		return { args }
-	},
-	data: () => ({ selected: args.modelValue || [] }),
-	template: `
-		<div class="flex flex-row justify-between">
-            <vv-check-group v-bind="args" v-model:modelValue="selected">
-                <template v-slot:hint>
-                    <p>Ciao sono un hint di default. Piacere.</p>
-                </template> 
-            </vv-check-group>
-            <strong v-if="selected">Selezione: {{selected}} </strong> 
-        </div>
-        `
-})
-
-# VvCheckGroup
-
-A group of checks.
-
-<Source language="jsx" code={'<vv-radio-group>...</vv-radio-group>'} />
-
-<Canvas>
-	<Story
-		name="vv-check-group"
-		args={{
-			name: 'story1',
-			label: 'Prova',
-			vertical: false,
-			disabled: false,
-			readonly: false,
-			options: [],
-			optionLabel: 'label',
-			optionValue: 'value',
-			hintLabel: 'Ciccio'
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheckGroup, VvCheck },
-				data: () => ({ selected: args.modelValue || [] }),
-				setup() {
-					return { args }
-				},
-				template: `
-                    <div class="flex flex-row justify-between">
-                        <vv-check-group v-bind="args" v-model:modelValue="selected">
-                            <vv-check id="o1" name="opts" value="1">Opt 1</vv-check>
-                            <vv-check id="o2" name="opts" value="2">Opt 2</vv-check>
-                            <vv-check id="o3" name="opts" value="3">Opt 3</vv-check>
-                        </vv-check-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong> 
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>
-
-<ArgsTable of={VvCheckGroup} />

package/src/stories/CheckGroup/CheckGroupDisabled.stories.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/Disabled" component={VvCheckGroup} />
-
-# Disabled
-
-<Canvas>
-	<Story
-		name="Disabled"
-		args={{
-			name: 'story-disabled',
-			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
-			],
-			disabled: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupError.stories.mdx

@@ -1,28 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/Error" component={VvCheckGroup} />
-
-# Error & Error message
-
-<Canvas>
-	<Story
-		name="Error"
-		args={{
-			name: 'vv-group-options-error-label',
-			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
-			],
-			optionLabel: (o) => `Frutto: ${o.name}`,
-			error: true,
-			errorLabel: ['Errore 1', 'Errore 2']
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>