@volverjs/ui-vue 0.0.1-beta.11

package/src/components/common/HintSlot.ts

@@ -0,0 +1,187 @@
+import { toReactive } from '@vueuse/core'
+import { h, type Component, type ExtractPropTypes, type Slots } from 'vue'
+import { computed, toRefs } from 'vue'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+
+/**
+ * Merge errors from Array<string> to string errors separated from new line (\n)
+ * @param {Array<string> | string} errors
+ * @returns {string}
+ */
+function joinLines(errors: Array<string> | string | unknown[] | undefined) {
+	if (Array.isArray(errors))
+		return errors
+			.filter((e) => ObjectUtilities.isString(e))
+			.reduce((prevVal, currVal) => {
+				if (prevVal.length > 0) return prevVal + '\n' + currVal
+				return currVal
+			}, '')
+	else return errors
+}
+
+interface HintSlotProps {
+	hintLabel: {
+		type: StringConstructor
+		default: ''
+		required: true
+	}
+	modelValue: null
+	valid: BooleanConstructor
+	validLabel: (StringConstructor | ArrayConstructor)[]
+	error: BooleanConstructor
+	errorLabel: (StringConstructor | ArrayConstructor)[]
+}
+
+interface HintSlotPropsWithLoading extends HintSlotProps {
+	loading: BooleanConstructor
+	loadingLabel: StringConstructor
+}
+
+/**
+ * Return a vue component (HintSlot) to render and manage hint, errors, valid, loading state and messages
+ * @param {Readonly<ExtractPropTypes<HintSlotProps | HintSlotPropsWithLoading>>} pProps vue props
+ * @param {Slots} pSlots vue slots
+ * @returns {Component} vue component
+ */
+export function HintSlotFactory(
+	pProps: Readonly<
+		ExtractPropTypes<HintSlotProps | HintSlotPropsWithLoading>
+	>,
+	pSlots: Slots
+): Component {
+	return {
+		name: 'HintSlot',
+		props: {
+			params: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			}
+		},
+		setup(hProps) {
+			const props = toRefs(pProps)
+
+			//Slots
+			const {
+				error: errorSlot,
+				valid: validSlot,
+				hint: hintSlot,
+				loading: loadingSlot
+			} = pSlots
+
+			//Props hint + errors
+			const {
+				hintLabel,
+				modelValue,
+				valid,
+				validLabel,
+				error,
+				errorLabel
+			} = props
+			const loading = ObjectUtilities.resolveFieldData(props, 'loading')
+			const loadingLabel = ObjectUtilities.resolveFieldData(
+				props,
+				'loadingLabel'
+			)
+
+			const hasErrors = computed(() => {
+				//No error
+				if (!error.value) return false
+
+				if (error.value && errorSlot) return true
+
+				if (
+					errorLabel?.value &&
+					Array.isArray(errorLabel.value) &&
+					errorLabel.value.length > 0
+				)
+					return true
+
+				if (
+					errorLabel?.value &&
+					ObjectUtilities.isNotEmpty(errorLabel.value)
+				)
+					return true
+
+				return false
+			})
+
+			const hasHint = computed(() => {
+				return !!(
+					(hintLabel && hintLabel.value) ||
+					hintSlot ||
+					validSlot ||
+					(validLabel && validLabel.value) ||
+					hasErrors.value ||
+					(loading?.value && loadingSlot) ||
+					(loading?.value && loadingLabel?.value)
+				)
+			})
+
+			// const errorMessage = computed(() => {
+			// 	if (Array.isArray(errorLabel?.value))
+			// 		return joinLines(errorLabel?.value || '')
+			// 	else return errorLabel?.value
+			// })
+
+			const hintContent = computed(() => {
+				const slotProps = toReactive({
+					hintLabel,
+					modelValue,
+					valid,
+					validLabel,
+					error,
+					errorLabel,
+					loading,
+					loadingLabel,
+					...hProps.params
+				})
+
+				if (error?.value) {
+					return (
+						errorSlot?.(slotProps) ||
+						joinLines(errorLabel?.value) ||
+						hintLabel?.value
+					)
+				}
+
+				if (valid?.value)
+					return (
+						validSlot?.(slotProps) ||
+						joinLines(validLabel?.value) ||
+						hintLabel?.value
+					)
+
+				if (loading?.value)
+					return (
+						loadingSlot?.(slotProps) ||
+						joinLines(loadingLabel?.value) ||
+						hintLabel?.value
+					)
+
+				return (
+					hintSlot?.(slotProps) ||
+					joinLines(hintLabel?.value) ||
+					hintLabel?.value
+				)
+			})
+
+			return {
+				hasHint,
+				hintContent
+			}
+		},
+		render() {
+			if (this.hasHint) {
+				return h(
+					'pre',
+					{ style: { 'white-space': 'pre' } },
+					this.hintContent
+				)
+			}
+		}
+	}
+}
+
+export default HintSlotFactory

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export { default as VvButton } from './VvButton/VvButton.vue'
+export { default as VvIcon } from './VvIcon/VvIcon.vue'
+export { default as VvBadge } from './VvBadge/VvBadge.vue'
+export { default as VvButtonGroup } from './VvButtonGroup/VvButtonGroup.vue'
+export { default as VvAccordion } from './VvAccordion/VvAccordion.vue'
+export { default as VvAccordionGroup } from './VvAccordionGroup/VvAccordionGroup.vue'
+export { default as VvBreadcrumb } from './VvBreadcrumb/VvBreadcrumb.vue'
+export { default as VvCard } from './VvCard/VvCard.vue'
+export { default as VvCheck } from './VvCheck/VvCheck.vue'
+export { default as VvCheckGroup } from './VvCheckGroup/VvCheckGroup.vue'
+export { default as VvDialog } from './VvDialog/VvDialog.vue'
+export { default as VvDropdown } from './VvDropdown/VvDropdown.vue'

package/src/composables/debouncedInput/useDebouncedInput.ts

@@ -0,0 +1,19 @@
+import type { Ref } from 'vue'
+
+import { refDebounced } from '@vueuse/core'
+
+import { watch, ref } from 'vue'
+
+export function useDebouncedInput(
+	inputText: Ref<any> | undefined,
+	debounced: number | undefined,
+	emit: (event: any, ...args: any[]) => void
+): Ref<any> {
+	const _text = ref(inputText?.value)
+	const debouncedInputTextData = refDebounced(
+		_text as Ref<any>,
+		debounced || 0
+	)
+	watch(debouncedInputTextData, (v) => emit('update:modelValue', v))
+	return _text
+}

package/src/composables/focus/useComponentFocus.ts

@@ -0,0 +1,22 @@
+import type { Ref } from 'vue'
+import { watch } from 'vue'
+import { useFocus } from '@vueuse/core'
+
+/**
+ *
+ */
+export function useComponentFocus(
+	inputTemplateRef: Ref<HTMLInputElement>,
+	emit: (event: any, ...args: any[]) => void
+) {
+	const { focused } = useFocus(inputTemplateRef)
+
+	watch(focused, (bFocus) => {
+		if (bFocus) emit('focus', inputTemplateRef.value)
+		else emit('blur', inputTemplateRef.value)
+	})
+
+	return {
+		focused
+	}
+}

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

@@ -0,0 +1,12 @@
+import type { Ref } from 'vue'
+
+import type IGroupState from './IGroupState'
+
+/**
+ * Stato condiviso per un gruppo di pulsanti
+ */
+export default interface IAccordionGroupState extends IGroupState {
+	iconRight: Ref<boolean>
+	bordered: Ref<boolean>
+	accordion: Ref<boolean>
+}

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

@@ -0,0 +1,21 @@
+import type { Ref } from 'vue'
+
+import type IGroupState from './IGroupState'
+
+/**
+ * Stato condiviso per un gruppo di pulsanti
+ */
+export default interface IButtonGroupState extends IGroupState {
+	/**
+	 * Singolo bottone selezionato - utilizzo un id (o un name)
+	 */
+	modelValue: Ref<string | undefined>
+	/**
+	 * Stato disabilitato
+	 */
+	disabled: Ref<boolean>
+	/**
+	 * True = gruppo di pulsanti è in modalità TOGGLE (come i radio buttons)
+	 */
+	toggle: Ref<boolean>
+}

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

@@ -0,0 +1,12 @@
+import type { Ref } from 'vue'
+
+/**
+ * Stato condiviso per un gruppo di elementi
+ */
+export default interface IGroupState {
+	[key: string]: Ref<any> | symbol
+	/**
+	 * Chiave usata per il provide del gruppo
+	 */
+	key: symbol
+}

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,62 @@
+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)
+
+	//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,22 @@
+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.")
+
+	provide(
+		groupState.key,
+		computed(() => groupState)
+	)
+}

package/src/composables/icons/useComponentIcons.ts

@@ -0,0 +1,87 @@
+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
+	}
+}
+
+export function useComponentIcon(
+	icon: Ref<string>,
+	iconPosition: Ref<string>,
+	slots: ComponentIconSlots
+) {
+	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 {
+		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/textLimit/useTextLimit.ts

@@ -0,0 +1,44 @@
+import { isString } from '@vueuse/core'
+import { computed, unref, type Ref } from 'vue'
+
+interface useTextOptions {
+	mode: string | boolean
+	upperLimit: number
+}
+
+/**
+ *
+ */
+export function useTextLimit(inputText: Ref<string>, options: useTextOptions) {
+	const textLength = computed(() => {
+		const _text = unref(inputText)
+		return isString(_text) ? _text.length : 0
+	})
+
+	const textLimitLength = computed(() => {
+		const _text = unref(inputText) || ''
+
+		if (!isString(_text) || options.mode === false) return 0
+
+		if (options.mode === true) return _text.length
+		else return unref(options.upperLimit) - _text.length
+	})
+
+	const formattedTextLimitLength = computed(() => {
+		if (options.mode === false) return ''
+
+		if (
+			options.mode === true &&
+			options.upperLimit &&
+			options.upperLimit > 0
+		)
+			return `${textLimitLength.value}/${unref(options.upperLimit)}`
+		else return textLimitLength.value
+	})
+
+	return {
+		textLength,
+		textLimitLength,
+		formattedTextLimitLength
+	}
+}

package/src/composables/useModifiers.ts

@@ -0,0 +1,100 @@
+import { computed, unref, type Ref } from 'vue'
+import ObjectUtilities from '@/utils/ObjectUtilities'
+
+interface IBemModifiers {
+	[key: string]:
+		| Ref<boolean>
+		| Ref<string | unknown[] | undefined>
+		| boolean
+		| string
+		| string[]
+		| undefined
+		| unknown[]
+	modifiers?:
+		| Ref<string | unknown[] | undefined>
+		| undefined
+		| string[]
+		| string
+		| unknown[]
+}
+
+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
+	}
+}
+
+export function toBem(prefix: string, modifiers: IBemModifiers) {
+	const baseCssClass: object = { [`${prefix}`]: true }
+
+	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) || {}
+	)
+}

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,15 @@
+import VolverPlugin from './Volver'
+import type { Volver } from './Volver'
+
+// export all components as vue plugin
+export * from './components/index'
+
+export { VolverPlugin }
+
+// https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
+// Add custom property and extend vue type definition
+declare module 'vue' {
+	interface ComponentCustomProperties {
+		$ds?: typeof Volver.prototype
+	}
+}