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

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

@@ -1,152 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-<Meta title="Components/CheckGroup/Slots" component={VvCheckGroup} />
-
-# Default
-
-<Canvas>
-	<Story
-		name="Default"
-		args={{
-			name: 'story-slot-default'
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheckGroup, VvCheck },
-				data: () => ({ selected: args.modelValue || [] }),
-				setup() {
-					return { args }
-				},
-				template:
-					/**html */
-					`
-                    <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>
-
-# Hint
-
-<Canvas>
-	<Story
-		name="Hint"
-		args={{
-			name: 'story-slot-hint'
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheckGroup, VvCheck },
-				data: () => ({ selected: args.modelValue || [] }),
-				setup() {
-					return { args }
-				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-check-group v-bind="args" v-model:modelValue="selected">
-                            <template v-slot:default>
-                                <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>
-                            </template>
-                            <template v-slot:hint="slotProps">
-                                <p>Ciao sono lo slot HINT!</p>
-								<p>{{slotProps}}</p> 
-                            </template>
-                        </vv-check-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>
-
-# Valid
-
-<Canvas>
-	<Story
-		name="Valid"
-		args={{
-			name: 'story-slot-valid',
-			valid: true
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheckGroup, VvCheck },
-				data: () => ({ selected: args.modelValue || [] }),
-				setup() {
-					return { args }
-				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-check-group v-bind="args" v-model:modelValue="selected">
-                            <template v-slot:default>
-                                <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>
-                            </template>
-                            <template v-slot:valid>
-                                <p>Ciao sono lo slot VALID!</p>
-                            </template>
-                        </vv-check-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>
-
-# Error
-
-<Canvas>
-	<Story
-		name="Error"
-		args={{
-			name: 'story-slot-error',
-			error: true
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheckGroup, VvCheck },
-				data: () => ({ selected: args.modelValue || [] }),
-				setup() {
-					return { args }
-				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-check-group v-bind="args" v-model:modelValue="selected">
-                            <template v-slot:default>
-                                <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>
-                            </template>
-                            <template v-slot:error>
-                                <p>Ciao sono lo slot ERROR!</p>
-                            </template>
-                        </vv-check-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupValid.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/Valid" component={VvCheckGroup} />
-
-# Valid & Valid label
-
-<Canvas>
-	<Story
-		name="Valid"
-		args={{
-			name: 'vv-group-options-valid-label',
-			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
-			],
-			optionLabel: (o) => `Frutto: ${o.name}`,
-			valid: true,
-			validLabel: 'Campo corretto'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupVertical.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/Vertical" component={VvCheckGroup} />
-
-# Vertical
-
-<Canvas>
-	<Story
-		name="Vertical"
-		args={{
-			name: 'story-vertical',
-			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
-			],
-			vertical: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/RadioGroup/RadioOption.test.ts

@@ -1,45 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
-import { expect } from '@/test/expect'
-import { radioGroupTest } from './RadioProperty.test'
-
-type optionFn = (a: { [key: string]: string }) => string
-
-function getValueToTest(
-	option: { [key: string]: string },
-	key: string | optionFn
-) {
-	return typeof key == 'string' ? `${option[key]}` : `${key(option)}`
-}
-
-async function radioOptionsTest({ canvasElement, ...data }: PlayAttributes) {
-	const radioGroup = await within(canvasElement).findByRole('radiogroup')
-	const radioGroupWrapper = radioGroup.children[0]
-	const optionParamLabel = data.args.optionLabel || 'label'
-	const optionParamValue = data.args.optionValue || 'value'
-	const options: { [key: string]: string }[] = data.args.options
-	options.forEach((option, index: number) => {
-		const radio = radioGroupWrapper.children[index] as HTMLElement
-		const radioValue = radio.children[0]
-		const radioLabel = radio.innerText
-		expect(radioLabel).toEqual(getValueToTest(option, optionParamLabel))
-		expect(radioValue).toEqual(getValueToTest(option, optionParamValue))
-	})
-	radioGroupTest({ canvasElement, ...data })
-}
-
-async function arrayOptionsTest({ canvasElement, ...data }: PlayAttributes) {
-	const radioGroup = await within(canvasElement).findByRole('radiogroup')
-	const radioGroupWrapper = radioGroup.children[0]
-	const options: { [key: string]: string }[] = data.args.options
-	options.forEach((option, index: number) => {
-		const radio = radioGroupWrapper.children[index] as HTMLElement
-		const radioValue = radio.children[0]
-		const radioLabel = radio.innerText
-		expect(radioLabel).toEqual(option)
-		expect(radioValue).toEqual(option)
-	})
-	radioGroupTest({ canvasElement, ...data })
-}
-
-export { radioOptionsTest, arrayOptionsTest }

package/src/stories/RadioGroup/RadioProperty.test.ts

@@ -1,87 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
-import { expect } from '@/test/expect'
-
-interface RadioConfig {
-	isClickDisabled?: boolean
-	isVertical?: boolean
-	className?: string | string[] | null
-	child?: number
-	propName?: string
-}
-
-async function radioGroupTest(
-	{ canvasElement }: PlayAttributes = {} as PlayAttributes,
-	{
-		isClickDisabled = false,
-		className = null,
-		isVertical = false
-	}: RadioConfig = {}
-) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	const radios = document.getElementsByClassName('vv-input-radio__input')
-	const radio1 = radios[0] as HTMLInputElement
-	const radio2 = radios[1] as HTMLInputElement
-	expect(radioGroupParent).toHaveClass('vv-input-radio-group')
-	if (!isVertical) {
-		expect(radioGroupParent).toHaveClass([
-			'vv-input-radio-group--horizontal'
-		])
-	} else {
-		expect(radioGroupParent).not.toHaveClass('vv-input-radio--horizontal')
-	}
-	if (className) {
-		expect(radioGroupParent).toHaveClass(className)
-	}
-	if (isClickDisabled) {
-		await expect(radio1).not.toBeClicked()
-		expect(radio1).toHaveClass('vv-input-radio__input--disabled')
-	} else {
-		await expect(radio1).toBeClicked()
-		await expect(radio1).toHaveClass([
-			'focus-visible',
-			'vv-input-radio__input--checked'
-		])
-		radioCheck(radio1, true)
-		radioCheck(radio2, false)
-	}
-	expect(radioGroupParent).toHaveNoViolations()
-}
-
-async function labelTest(
-	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes,
-	{ child = 0, propName = '' }: RadioConfig = {}
-) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	const labelInnerHTML = radioGroupParent.children[child].innerHTML
-	const propLabel = data.args[propName]
-	expect(labelInnerHTML).toBeTruthy()
-	expect(propLabel).toBeTruthy()
-	expect(labelInnerHTML).toEqual(propLabel)
-	await radioGroupTest({ canvasElement, ...data })
-}
-
-async function readonlyTest(
-	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes
-) {
-	const radioGroupWrapper = await document.getElementsByClassName(
-		'vv-input-radio-group__wrapper'
-	)[0]
-	const radioLabels = [...radioGroupWrapper.children]
-	radioLabels.forEach((label) => {
-		const radio = label.children[0]
-		expect(radio).toHaveClass('vv-input-radio__input--readonly')
-	})
-	radioGroupTest({ canvasElement, ...data })
-}
-
-async function radioCheck(radio: HTMLInputElement, value: boolean) {
-	expect(radio.ariaChecked).toBe(`${value}`)
-	expect(radio.checked).toBe(value)
-}
-
-export { radioGroupTest, labelTest, readonlyTest }

package/src/stories/RadioGroup/RadioSlots.test.ts

@@ -1,29 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
-import { expect } from '@/test/expect'
-import { radioGroupTest } from './RadioProperty.test'
-
-interface RadioConfig {
-	className?: string
-}
-
-async function slotsTest(
-	{ canvasElement, ...args }: PlayAttributes = {} as PlayAttributes,
-	{ className }: RadioConfig = {} as RadioConfig
-) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	const slot = radioGroupParent.lastElementChild as HTMLElement
-	expect(slot).toHaveClass('vv-input-radio-group__hint')
-	expect(slot.innerText).toBeTruthy()
-	if (className) {
-		expect(radioGroupParent).toHaveClass(
-			`vv-input-radio-group--${className}`
-		)
-	}
-	expect(slot).toHaveNoViolations()
-	await radioGroupTest({ canvasElement, ...args })
-}
-
-export { slotsTest }

package/src/stories/stories.scss

@@ -1,13 +0,0 @@
-// $zero-specificity-for-utilities: false;
-@use '@volverjs/style/scss';
-@use '@volverjs/style/scss/themes/dark';
-
-//Custom classes for stories
-.vv-textarea {
-    &--variante-1 {
-        --vv-textarea-element-input-color: red;
-    }
-    &--variante-2 {
-        --vv-textarea-element-wrapper-background-color: green;
-    }
-}