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

package/src/components/VvButton/useButtonGroupProps.ts

@@ -1,51 +0,0 @@
-import { toRefs } from 'vue'
-import type IButtonGroupState from '../../composables/group/types/IButtonGroupState'
-
-//Composables
-import { useInjectedGroupState } from '../../composables/group/useInjectedGroupState'
-
-//Constasts
-import { VV_BUTTON_GROUP } from '../../constants'
-
-import type { VvButtonPropsTypes } from './VvButton'
-
-/**
- * Estreae tutte le prop del componente VvButton che possono essere
- * "sovrascritte" quando il buttone si trova in un gruppo.
- */
-export function toButtonRefs(props: VvButtonPropsTypes) {
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<IButtonGroupState>(VV_BUTTON_GROUP)
-
-	//Local props
-	const { modifiers, fullBleed, iconPosition, icon, label, block, selected } =
-		toRefs(props)
-
-	//Group based props
-	const modelValue = getGroupOrLocalRef('modelValue', props)
-	const disabled = getGroupOrLocalRef('disabled', props)
-	const toggle = getGroupOrLocalRef('toggle', props)
-	const rounded = getGroupOrLocalRef('rounded', props)
-	const action = getGroupOrLocalRef('action', props)
-	const actionQuiet = getGroupOrLocalRef('actionQuiet', props)
-
-	return {
-		//Group based props
-		modelValue,
-		disabled,
-		toggle,
-		isInGroup,
-		group,
-		//Local props
-		modifiers,
-		action,
-		actionQuiet,
-		selected,
-		block,
-		rounded,
-		fullBleed,
-		iconPosition,
-		icon,
-		label
-	}
-}

package/src/components/VvCheck/VvCheck.ts

@@ -1,48 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { ValidProps, ErrorProps } from '../../props'
-
-export const VvCheckProps = {
-	...ValidProps,
-	...ErrorProps,
-	/**
-	 * Valore della check
-	 */
-	value: null,
-	/**
-	 * VModel
-	 * @description
-	 * Se Binary = true, modelValue puo essere Object,Boolean,Number
-	 * Altrimenti modelValue sarà un Array
-	 */
-	modelValue: null,
-	/**
-	 * True - ritorna un valore del checkbox binario (es True/False) invece di un valori multipli
-	 */
-	binary: Boolean,
-	/**
-	 * Se binary=true, valore associato allo stato checked (ritornato al posto di TRUE)
-	 */
-	trueValue: { type: null, default: true },
-	/**
-	 * Se binary=true, valore associato allo stato unchecked (ritornato al posto di FALSE)
-	 */
-	falseValue: { type: null, default: false },
-	/**
-	 * True - visualizza il VvCheck come un pulsante Switch/Toggle
-	 */
-	switch: Boolean,
-	label: String,
-	disabled: Boolean,
-	readonly: Boolean
-}
-
-export const VvCheckEvents = [
-	'click',
-	'update:modelValue',
-	'change',
-	'focus',
-	'blur'
-]
-
-type _VvCheckPropsType = typeof VvCheckProps
-export type VvCheckPropsTypes = ExtractPropTypes<_VvCheckPropsType>

package/src/components/VvCheck/VvCheck.vue

@@ -1,147 +0,0 @@
-<template>
-	<label :class="checkClass" v-bind="checkAttrs" @click="onClick">
-		<input
-			ref="input"
-			:class="checkInputClass"
-			v-bind="checkInputAttrs"
-			@input="onChange" />
-		<!-- @slot Use this slot for check label -->
-		<slot :value="modelValue">
-			{{ label }}
-		</slot>
-	</label>
-</template>
-
-<script setup lang="ts">
-import type { InputHTMLAttributes, LabelHTMLAttributes } from 'vue'
-
-import { computed, useAttrs, ref } from 'vue'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import { VvCheckProps, VvCheckEvents } from './VvCheck'
-
-//Composables
-import { toCheckInputRefs } from './useCheckProps'
-import { useComponentFocus } from '../../composables/focus/useComponentFocus'
-import { useBemModifiers } from '@/composables/useModifiers'
-
-//Props, Emits, Slots e Attrs
-const props = defineProps(VvCheckProps)
-const emit = defineEmits(VvCheckEvents)
-const attrs = useAttrs()
-
-//Data
-const { disabled, readonly, valid, error, propsSwitch, modelValue } =
-	toCheckInputRefs(props, emit)
-
-//Template References
-const input = ref()
-
-// FOCUS
-const { focused } = useComponentFocus(input, emit)
-
-//Component computed
-const isChecked = computed(() => {
-	if (props.binary)
-		return ObjectUtilities.equals(modelValue.value, props.trueValue)
-
-	return Array.isArray(modelValue.value)
-		? ObjectUtilities.contains(props.value, modelValue.value)
-		: ObjectUtilities.equals(props.value, modelValue.value)
-})
-
-// Styles & Bindings
-const { bemCssClasses: bemCheckClass } = useBemModifiers('vv-input-checkbox', {
-	switch: propsSwitch,
-	valid,
-	invalid: error
-})
-const { bemCssClasses: bemCheckInputClass } = useBemModifiers(
-	'vv-input-check__input',
-	{
-		checked: isChecked,
-		disabled,
-		readonly
-	}
-)
-const checkClass = computed(() => {
-	const cssClass = attrs.class as string
-	return {
-		[cssClass]: true,
-		...bemCheckClass.value
-	}
-})
-const checkInputClass = computed(() => {
-	return {
-		...bemCheckInputClass.value,
-		'focus-visible': focused.value
-	}
-})
-const checkAttrs = computed(() => {
-	const { id, name, style } = attrs
-	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
-		k.startsWith('data-')
-	)
-	return {
-		for: (id || name) as string,
-		style,
-		...dataAttrs
-	} as LabelHTMLAttributes
-})
-const checkInputAttrs = computed(() => {
-	const { id = '', name = '' } = attrs
-	return {
-		type: 'checkbox',
-		id: id || name,
-		name,
-		value: props.value,
-		disabled: disabled.value,
-		readonly: readonly.value,
-		checked: isChecked.value,
-		...checkInputAriaAttrs.value
-	} as InputHTMLAttributes
-})
-const checkInputAriaAttrs = computed(() => {
-	const { name } = attrs
-	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
-		k.startsWith('aria-')
-	)
-	return {
-		'aria-label': name,
-		'aria-checked': isChecked.value,
-		...dataAttrs
-	}
-})
-
-//Methods
-function onChange() {
-	if (props.binary) {
-		modelValue.value = isChecked.value ? props.falseValue : props.trueValue
-		return
-	}
-
-	if (modelValue.value === null) {
-		modelValue.value = [props.value]
-		return
-	}
-
-	if (Array.isArray(modelValue.value)) {
-		modelValue.value = !isChecked.value
-			? [...modelValue.value, props.value]
-			: ObjectUtilities.removeFromList(props.value, modelValue.value)
-		return
-	}
-}
-function onClick(event: MouseEvent | undefined) {
-	if (!disabled.value) {
-		emit('click', event)
-		emit('change', isChecked.value ? props.value : null)
-		focused.value = true
-	}
-}
-</script>
-
-<script lang="ts">
-export default {
-	inheritAttrs: false
-}
-</script>

package/src/components/VvCheck/useCheckProps.ts

@@ -1,41 +0,0 @@
-import type { VvCheckPropsTypes } from './VvCheck'
-import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
-
-import { toRefs } from 'vue'
-
-//Composables
-import { useInjectedGroupState } from '../../composables/group/useInjectedGroupState'
-
-//Constasts
-import { VV_CHECK_GROUP } from '../../constants'
-
-/**
- * Estreae tutte le prop del componente VvButton che possono essere
- * "sovrascritte" quando il buttone si trova in un gruppo.
- */
-export function toCheckInputRefs(
-	props: VvCheckPropsTypes,
-	emit: (event: any, ...args: any[]) => void
-) {
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<IInputGroupState>(VV_CHECK_GROUP)
-
-	//Local props
-	const { valid, error, switch: propsSwitch } = toRefs(props)
-
-	//Global props
-	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const readonly = getGroupOrLocalRef('readonly', props)
-	const disabled = getGroupOrLocalRef('disabled', props)
-
-	return {
-		group,
-		isInGroup,
-		valid,
-		error,
-		propsSwitch,
-		modelValue,
-		readonly,
-		disabled
-	}
-}

package/src/components/VvDialog/VvDialog.ts

@@ -1,17 +0,0 @@
-import { VV_DIALOG_SIZES } from './constants'
-
-export const VvDialogEvents = ['open', 'close', 'update:open']
-
-export const VvDialogProps = {
-	id: { type: String, required: true },
-	title: String,
-	open: Boolean,
-	transition: { type: String, default: 'fade-block' },
-	size: {
-		type: String,
-		default: VV_DIALOG_SIZES.normal,
-		validator: (value: string) =>
-			Object.values(VV_DIALOG_SIZES).includes(value)
-	},
-	autoClose: { type: Boolean, default: true }
-}

package/src/components/VvDialog/constants.ts

@@ -1,5 +0,0 @@
-export const VV_DIALOG_SIZES = {
-	normal: '',
-	small: 'small',
-	fullscreen: 'fullscreen'
-}

package/src/components/VvInputText/VvInputText.ts

@@ -1,66 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import {
-	ValidProps,
-	ErrorProps,
-	HintProps,
-	LoadingProps,
-	ModifiersProps,
-	LimitProps
-} from '../../props'
-import { TYPES, ICON_POSITIONS } from './constants'
-
-export const VvInputTextEvents = ['update:modelValue', 'focus', 'blur']
-
-export const VvInputTextProps = {
-	...ValidProps,
-	...ErrorProps,
-	...HintProps,
-	...LoadingProps,
-	...ModifiersProps,
-	...LimitProps,
-	modelValue: null,
-	type: {
-		type: String,
-		default: TYPES.TEXT,
-		validator: (value: string) => Object.values(TYPES).includes(value)
-	},
-	id: String,
-	name: { type: String, required: true },
-	autocomplete: { type: String, default: 'off' },
-	autofocus: Boolean,
-	minlength: Number,
-	maxlength: Number,
-	min: [Number, Date],
-	max: [Number, Date],
-	step: Number,
-	label: String,
-	disabled: Boolean,
-	readonly: Boolean,
-	placeholder: String,
-	/**
-	 * Nome dell'icona
-	 * @see DsIcon
-	 */
-	icon: { type: String, default: '' },
-	/**
-	 * Posizione dell'icona
-	 */
-	iconPosition: {
-		type: String,
-		validation: (value: string) =>
-			Object.values(ICON_POSITIONS).includes(value),
-		default: ICON_POSITIONS.RIGHT
-	},
-	/**
-	 * True = label flottante
-	 */
-	floating: Boolean,
-	debounce: Number,
-	/**
-	 * Se true, attiva la possibilità di cancellare il testo nella textarea
-	 */
-	autoclear: Boolean
-}
-
-type VvInputTextPropsType = typeof VvInputTextProps
-export type VvInputTextPropsTypes = ExtractPropTypes<VvInputTextPropsType>

package/src/components/VvInputText/constants.ts

@@ -1,34 +0,0 @@
-export const TYPES = {
-	TEXT: 'text',
-	PASSWORD: 'password',
-	DATE: 'date',
-	DATETIME_LOCAL: 'datetime-local',
-	NUMBER: 'number',
-	TIME: 'time',
-	EMAIL: 'email',
-	TEL: 'tel',
-	URL: 'url',
-	COLOR: 'color',
-	SEARCH: 'search',
-	FILE: 'file'
-}
-
-export const ICON_POSITIONS = {
-	LEFT: 'left',
-	RIGHT: 'right'
-}
-
-export const TYPES_ICON = {
-	PASSWORD_ON: 'eye-on',
-	PASSWORD_OFF: 'eye-off',
-	DATE: 'calendar',
-	TIME: 'time',
-	COLOR: 'color',
-	SEARCH: 'search'
-}
-
-export default {
-	TYPES,
-	ICON_POSITIONS,
-	TYPES_ICON
-}

package/src/components/VvRadio/VvRadio.ts

@@ -1,25 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { ValidProps, ErrorProps } from '../../props'
-
-export const VvRadioProps = {
-	...ValidProps,
-	...ErrorProps,
-	/**
-	 * Valore del radio
-	 */
-	value: null,
-	modelValue: { type: [Object, Number, Boolean, String] },
-	label: { type: String, default: '' },
-	disabled: Boolean,
-	readonly: Boolean
-}
-
-export const VvRadioEvents = [
-	'click',
-	'update:modelValue',
-	'change',
-	'focus',
-	'blur'
-]
-
-export type VvRadioPropsType = ExtractPropTypes<typeof VvRadioProps>

package/src/components/VvRadio/useRadioProps.ts

@@ -1,40 +0,0 @@
-import type { VvRadioPropsType } from '../VvRadio/VvRadio'
-import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
-
-import { toRefs } from 'vue'
-
-//Composables
-import { useInjectedGroupState } from '../../composables/group/useInjectedGroupState'
-
-//Constasts
-import { VV_RADIO_GROUP } from '../../constants'
-
-/**
- * Estreae tutte le prop del componente VvButton che possono essere
- * "sovrascritte" quando il buttone si trova in un gruppo.
- */
-export function toRadioInputRefs(
-	props: VvRadioPropsType,
-	emit: (event: any, ...args: any[]) => void
-) {
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<IInputGroupState>(VV_RADIO_GROUP)
-
-	//Local props
-	const { valid, error } = toRefs(props)
-
-	//Global props
-	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const readonly = getGroupOrLocalRef('readonly', props)
-	const disabled = getGroupOrLocalRef('disabled', props)
-
-	return {
-		group,
-		isInGroup,
-		valid,
-		error,
-		modelValue,
-		readonly,
-		disabled
-	}
-}

package/src/components/VvTextarea/constants.ts

@@ -1,14 +0,0 @@
-export const ICON_POSITIONS = {
-	LEFT: 'left',
-	RIGHT: 'right'
-}
-
-export const WRAP = {
-	hard: 'hard',
-	soft: 'soft'
-}
-
-export default {
-	ICON_POSITIONS,
-	WRAP
-}

package/src/stories/Accordion/AccordionBordered.stories.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
-import { Template } from './Accordion.stories.mdx'
-import { propsTest } from './accordionTest.js'
-
-<Meta title="Components/Accordion/Props/bordered" />
-
-# VvAccordion bordered
-
-Let's define a story for our `bordered` accordion.
-
-<Canvas>
-	<Story
-		name="bordered"
-		play={async ({ canvasElement }) => {
-			propsTest({ canvasElement }, 'bordered')
-		}}
-		args={{
-			bordered: true,
-			title: 'Accoridon with borders',
-			content:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Accordion/AccordionIconRight.stories.mdx

@@ -1,32 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
-import { propsTest } from './accordionTest.js'
-
-<Meta title="Components/Accordion/Props/icon-right" />
-
-# VvAccordion icon-right
-
-Let's define a story for our `icon-right` accordion.
-
-<Canvas>
-	<Story
-		name="icon-right"
-		play={async ({ canvasElement }) => {
-			propsTest({ canvasElement }, 'marker-right')
-		}}>
-		{() => {
-			return {
-				components: { VvAccordion },
-				data() {
-					return {
-						content:
-							'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
-					}
-				},
-				template: `<div class="w-1/2">
-						<vv-accordion data-testid="accordion" title="Icon right" :content="content" icon-right />
-					</div>`
-			}
-		}}
-	</Story>
-</Canvas>

package/src/stories/Accordion/accordionTest.js

@@ -1,36 +0,0 @@
-import { expect } from '@storybook/jest'
-import { within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function accordionTest({ canvasElement, ...data }) {
-	const accordion = await within(canvasElement).findByTestId('accordion')
-	const title = accordion.firstChild
-	expect(accordion).toHaveClass('vv-accordion')
-	expect(title.innerText).toEqual(data.args.title)
-	expect(title).toHaveClass('vv-collapse__summary')
-	expect(accordion.open).toBe(false)
-	title.click()
-	expect(accordion.open).toBeTruthy()
-	const content = accordion.lastChild
-	expect(content).toHaveClass('vv-collapse__content')
-	expect(content.innerText).toEqual(data.args.content)
-	accessibilityTest(accordion)
-}
-
-async function propsTest({ canvasElement }, className) {
-	const accordion = await within(canvasElement).findByTestId('accordion')
-	expect(accordion).toHaveClass(`vv-accordion--${className}`)
-	accessibilityTest(accordion)
-}
-
-async function slotsTest({ canvasElement }) {
-	const slot = await within(canvasElement).findByTestId('slot')
-	expect(slot.innerHTML).toBeTruthy
-}
-
-async function accessibilityTest(element) {
-	expect.extend(toHaveNoViolations)
-	expect(await axe(element)).toHaveNoViolations()
-}
-
-export { accordionTest, propsTest, slotsTest }

package/src/stories/AccordionGroup/Accordion.stories.mdx

@@ -1,42 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvAccordionGroup from '../../components/VvAccordionGroup/VvAccordionGroup.vue'
-import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
-import { accordionTest } from './accordionGroupTest.js'
-
-<Meta title="Components/AccordionGroup/Props/accordion" />
-
-# VvAccordionGroup accordion
-
-Stories of `VvAccordionGroup` with `accordion`.
-
-<Canvas>
-	<Story name="accordion" play={accordionTest}>
-		{(args) => ({
-			components: { VvAccordionGroup, VvAccordion },
-			data() {
-				return {
-					selected: '',
-					content:
-						'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
-				}
-			},
-			template: `<div class="flex">
-					<div class="w-1/2">
-						<vv-accordion-group v-model:modelValue="selected" icon-right bordered accordion>
-							<vv-accordion data-testId="accordion-1" name="accordion 1" title="Details 1" :content="content" />
-							<vv-accordion name="accordion 2" title="Details 2" :content="content" />
-							<vv-accordion name="accordion 3" title="Details 3" :content="content" />
-						</vv-accordion-group>
-					</div>
-					<div data-testId="selected" v-if="selected" class="w-1/2 flex justify-end" >
-						selected: {{ selected }}
-					</div>
-				</div>`
-		})}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={`<vv-accordion-group v-model:modelValue="accordion" :items="items" icon-right bordered />`}
-/>

package/src/stories/Badge/BadgeTest.js

@@ -1,21 +0,0 @@
-import { axe, toHaveNoViolations } from 'jest-axe'
-import { within } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
-
-export const variantTest = async ({ badge, color }) => {
-	expect(badge).toHaveClass(`vv-badge--${color}`)
-}
-
-export const accessibilityTest = async (badge) => {
-	expect.extend(toHaveNoViolations)
-	expect(await axe(badge)).toHaveNoViolations()
-}
-
-// Test Variants function
-export const testBadgeVariant = async ({ canvasElement, name }) => {
-	const badge = await within(canvasElement).findByRole('status')
-	await accessibilityTest(badge)
-	await variantTest({ badge, color: name })
-}
-
-export default testBadgeVariant