@volverjs/ui-vue 0.0.1-beta.2

package/src/composables/group/types/IInputGroup.ts

@@ -0,0 +1,13 @@
+import type { Ref } from 'vue'
+
+import type IGroupState from './IGroupState'
+
+/**
+ * Stato condiviso per in un gruppo di inputs
+ */
+export interface IInputGroupState extends IGroupState {
+	/**
+	 * True = gruppo di elementi di input è in readonly
+	 */
+	readonly: Ref<boolean>
+}

package/src/composables/group/useInjectedGroupState.ts

@@ -0,0 +1,64 @@
+import type IGroupState from './types/IGroupState'
+import { toRef, unref, type Ref } from 'vue'
+
+import { inject, computed } from 'vue'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+
+/**
+ * Esegue l'inject dello stato condiviso da un componente padre.
+ */
+export function useInjectedGroupState<TGroup extends IGroupState>(
+	groupKey: symbol
+) {
+	//Recupera, se esiste, lo stato condiviso fornito da un parent "group"
+	const group = inject<Ref<TGroup> | undefined>(groupKey, undefined)
+
+	console.log('Inject - ', group)
+
+	//Check if component is in group
+	const isInGroup = computed(() => ObjectUtilities.isNotEmpty(group))
+
+	/**
+	 * Crea una computed ref (writable) che può utilizzare esporre il valore o dall'oggetto props oppure dal group
+	 */
+	function getGroupOrLocalRef<T extends object>(
+		propName: keyof TGroup,
+		props: T,
+		emit?: (event: any, ...args: any[]) => void
+	) {
+		//Check se propName non è in gruppo o locale -> Spaccarsi
+		if (group?.value) {
+			// if (!Object.keys(group.value).includes(propName as string))
+			// 	throw Error(`${propName as string} is not a group valid prop`)
+
+			const groupPropValue = unref(group.value)[propName] as Ref<any>
+			return computed({
+				get() {
+					return groupPropValue?.value
+				},
+				set(value) {
+					groupPropValue.value = value
+				}
+			})
+		} else {
+			// if (!Object.keys(props).includes(propName as string))
+			// 	throw Error(`${propName as string} is not a valid prop`)
+
+			const propRef = toRef(props, propName as keyof T)
+			return computed({
+				get() {
+					return propRef.value
+				},
+				set(value) {
+					if (emit) emit(`update:${propName as string}`, value)
+				}
+			})
+		}
+	}
+
+	return {
+		group,
+		isInGroup,
+		getGroupOrLocalRef
+	}
+}

package/src/composables/group/useProvideGroupState.ts

@@ -0,0 +1,23 @@
+import type IGroupState from './types/IGroupState'
+import { provide, computed, isRef } from 'vue'
+
+/**
+ * Condividi parte dello stato del componente con tutti i suoi figli.
+ * @param {IGroupState} groupState the group state with all group options
+ */
+export function useProvideGroupState<TGroup extends IGroupState>(
+	groupState: TGroup
+) {
+	if (
+		Object.keys(groupState).some(
+			(k) => k !== 'key' && !isRef(groupState[k])
+		)
+	)
+		throw Error("One or more groupState props aren't ref.")
+
+	console.log('PRovide - ', groupState)
+	provide(
+		groupState.key,
+		computed(() => groupState)
+	)
+}

package/src/composables/icons/useComponentIcons.ts

@@ -0,0 +1,52 @@
+import type { Slot, Ref } from 'vue'
+import { computed } from 'vue'
+
+interface ComponentIconProps {
+	icon: Ref<string>
+	iconPosition: Ref<string>
+}
+
+interface ComponentIconSlots {
+	iconLeft?: Slot | undefined
+	iconRight?: Slot | undefined
+	iconTop?: Slot | undefined
+	iconBottom?: Slot | undefined
+}
+
+export function useComponentIcons(
+	props: ComponentIconProps,
+	slots: ComponentIconSlots
+) {
+	const { icon, iconPosition } = props
+
+	const hasIconLeft = computed(
+		() =>
+			!!((icon.value && iconPosition.value === 'left') || slots.iconLeft)
+	)
+	const hasIconRight = computed(
+		() =>
+			!!(
+				(icon.value && iconPosition.value === 'right') ||
+				slots.iconRight
+			)
+	)
+	const hasIconTop = computed(
+		() => !!((icon.value && iconPosition.value === 'top') || slots.iconTop)
+	)
+	const hasIconBottom = computed(
+		() =>
+			!!(
+				(icon.value && iconPosition.value === 'bottom') ||
+				slots.iconBottom
+			)
+	)
+
+	return {
+		icon,
+		iconPosition,
+		hasIconLeft,
+		hasIconRight,
+		hasIconTop,
+		hasIconBottom
+	}
+}

package/src/composables/options/useOptions.ts

@@ -0,0 +1,27 @@
+import { toRefs } from 'vue'
+
+export function useOptions(props: any) {
+	const { options, optionLabel, optionValue } = toRefs(props)
+
+	const getOptionLabel = (o: any) => {
+		if (typeof o !== 'object' && o !== null) return o
+
+		return typeof optionLabel.value === 'function'
+			? optionLabel.value(o)
+			: o[optionLabel.value]
+	}
+
+	const getOptionValue = (o: any) => {
+		if (typeof o !== 'object' && o !== null) return o
+
+		return typeof optionValue.value === 'function'
+			? optionValue.value(o)
+			: o[optionValue.value]
+	}
+
+	return {
+		options,
+		getOptionLabel,
+		getOptionValue
+	}
+}

package/src/composables/useModifiers.ts

@@ -0,0 +1,54 @@
+import { computed, unref, type Ref } from 'vue'
+import ObjectUtilities from '@/utils/ObjectUtilities'
+
+interface IBemModifiers {
+	[key: string]:
+		| Ref<boolean>
+		| Ref<string | unknown[] | undefined>
+		| undefined
+	modifiers?: Ref<string | unknown[] | undefined> | undefined
+}
+
+export function useBemModifiers(prefix: string, modifiers: IBemModifiers) {
+	const baseCssClass: object = { [`${prefix}`]: true }
+
+	const bemCssClasses = computed(() => {
+		return (
+			Object.keys(modifiers).reduce((acc, k) => {
+				const _modifier = unref(modifiers[k] as Ref<any>) || false
+
+				if (!_modifier) return acc
+
+				if (k === 'modifiers') {
+					const _reduceModifiers = Array.isArray(_modifier)
+						? _modifier
+						: [_modifier]
+					return {
+						...acc,
+						..._reduceModifiers.reduce(
+							(accVariant: object, currentVariant: string) => {
+								return {
+									...accVariant,
+									[`${prefix}--${ObjectUtilities.kebabCase(
+										currentVariant
+									)}`]: true
+								}
+							},
+							{}
+						)
+					}
+				} else {
+					return {
+						...acc,
+						[`${prefix}--${ObjectUtilities.kebabCase(k)}`]:
+							_modifier
+					}
+				}
+			}, baseCssClass) || {}
+		)
+	})
+
+	return {
+		bemCssClasses
+	}
+}

package/src/constants.ts

@@ -0,0 +1,7 @@
+export const VV_BUTTON_GROUP = Symbol('VV_BUTTON_GROUP')
+
+export const VV_RADIO_GROUP = Symbol('VV_RADIO_GROUP')
+
+export const VV_CHECK_GROUP = Symbol('VV_CHECK_GROUP')
+
+export const VV_ACCORDION_GROUP = Symbol('VV_ACCORDION_GROUP')

package/src/index.ts

@@ -0,0 +1,7 @@
+// export all components as vue plugin
+export * from './components'
+
+// export IconifyJSON default icons
+export { default as iconsSimple } from './assets/icons/simple.json'
+export { default as iconsNormal } from './assets/icons/normal.json'
+export { default as iconsDetailed } from './assets/icons/detailed.json'

package/src/props/index.ts

@@ -0,0 +1,45 @@
+export const ValidProps = {
+	valid: Boolean,
+	validLabel: [String, Array]
+}
+
+export const ErrorProps = {
+	error: Boolean,
+	errorLabel: [String, Array]
+}
+
+export const LoadingProps = {
+	loading: Boolean,
+	loadingLabel: String
+}
+
+export const DisabledProps = {
+	disabled: Boolean
+}
+
+export const ReadonlyProps = {
+	readonly: Boolean
+}
+
+export const ModifiersProps = {
+	modifiers: [String, Array]
+}
+
+export const HintProps = {
+	hintLabel: { type: String, default: '' }
+}
+
+export const OptionsProps = {
+	/**
+	 * Lista delle radio options
+	 */
+	options: { type: Array, default: () => [] },
+	/**
+	 * Se options è un array di oggetti, optionLabel = nome del campo da utilizzare come label oppure una funzione per ricavare la label
+	 */
+	optionLabel: { type: [String, Function], default: () => 'label' },
+	/**
+	 * Se options è un array di oggetti, optionValue = nome del campo da utilizzare come value oppure una funzione per ricavare il value
+	 */
+	optionValue: { type: [String, Function], default: () => 'value' }
+}

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

@@ -0,0 +1,37 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
+
+import { accordionTest } from './accordionTest.js'
+
+<Meta
+	title="Components/Accordion"
+	component={VvAccordion}
+	args={{
+		open: false,
+		title: 'Lorem Ipsum',
+		content:
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+	}}
+/>
+
+export const Template = (args) => ({
+	components: { VvAccordion },
+	setup() {
+		return { args }
+	},
+	template: `<div class="w-1/2">
+            <vv-accordion data-testId="accordion" v-bind="args" v-model:open="args.open" />
+        </div>
+        `
+})
+
+# VvAccordion
+
+Stories of `VvAccordion`.
+Let's define a story for our playground `accordion`:
+
+<Canvas>
+	<Story name="vv-accordion" play={accordionTest} args={{}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,32 @@
+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/AccordionSlots.stories.mdx

@@ -0,0 +1,82 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
+import { slotsTest } from './accordionTest.js'
+
+<Meta title="Components/Accordion/Slots" />
+
+# VvAccordion slots
+
+Stories of `VvAccordion` with `slot`.
+
+## Slot header
+
+Let's define a story for our accordion with `header` slot.
+
+<Canvas>
+	<Story name="slot-header" play={slotsTest}>
+		{() => {
+			return {
+				components: { VvAccordion },
+				data() {
+					return {
+						title: 'Slot title',
+						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 :content="content"  bordered icon-right>
+							<template #header>
+								<p data-testId="slot" class="text-word-3">{{ title }}</p>
+							</template>
+						</vv-accordion>
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-accordion :content="content" bordered icon-right>
+	<template #header>
+		<p class="text-word-3">Slot title</p>
+	</template>
+</vv-accordion>`}
+/>
+
+## Slot details
+
+Let's define a story for our accordion with `details` slot.
+
+<Canvas>
+	<Story name="slot-details" play={slotsTest}>
+		{() => {
+			return {
+				components: { VvAccordion },
+				data() {
+					return {
+						details:
+							'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 title="Slot details" bordered icon-right>
+							<template #details>
+								<p data-testId="slot" class='font-light text-word-3'>{{ details }}</p>
+							</template>
+						</vv-accordion>
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-accordion title="Slot details" bordered icon-right>
+	<template #details>
+		<p class='font-light text-word-3'>{{ details }}</p>
+	</template>
+</vv-accordion>`}
+/>

package/src/stories/Accordion/accordionTest.js

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,42 @@
+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/AccordionGroup/AccordionGroup.stories.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvAccordionGroup from '../../components/VvAccordionGroup/VvAccordionGroup.vue'
+import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
+import { accordionGroupTest } from './accordionGroupTest.js'
+
+<Meta
+	title="Components/AccordionGroup"
+	component={VvAccordionGroup}
+	args={{}}
+/>
+
+export const Template = (args) => ({
+	components: { VvAccordionGroup, VvAccordion },
+	data() {
+		return {
+			disabled: false,
+			accordion: '',
+			content:
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+		}
+	},
+	setup() {
+		return { args }
+	},
+	template: `<div class="w-1/2">
+			<vv-accordion-group data-testId="accordion-group" v-bind="args" :disabled="disabled" v-model:modelValue="accordion">
+				<vv-accordion data-testId="accordion-1" title="Details 1" :content="content" />
+				<vv-accordion title="Details 2" :content="content" />
+				<vv-accordion title="Details 3" :content="content" />
+			</vv-accordion-group>
+        </div>`
+})
+
+# VvAccordionGroup
+
+Stories of `VvAccordionGroup`.
+Let's define a story for our playground `accordion-group`:
+
+<Canvas>
+	<Story name="vv-accordion-group" play={accordionGroupTest} args={{}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/AccordionGroup/AccordionItems.stories.mdx

@@ -0,0 +1,51 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvAccordionGroup from '../../components/VvAccordionGroup/VvAccordionGroup.vue'
+import { itemsTest } from './accordionGroupTest.js'
+
+<Meta title="Components/AccordionGroup/Props/items" />
+
+# VvAccordionGroup items
+
+Stories of `VvAccordionGroup` with `items`.
+
+<Canvas>
+	<Story name="items" args={{}} play={itemsTest}>
+		{(args) => ({
+			components: { VvAccordionGroup },
+			data() {
+				return {
+					selected: [],
+					content:
+						'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
+					items: [
+						{
+							name: 'a-1',
+							title: 'Details 1',
+							content:
+								'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+						},
+						{
+							name: 'a-2',
+							title: 'Details 2',
+							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 data-testId="accordion-group" v-model:modelValue="selected" :items="items" icon-right bordered />
+					</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 />`}
+/>