@volverjs/ui-vue 0.0.1-beta.6 → 0.0.1

package/src/components/common/HintSlot.ts

@@ -1,21 +1,25 @@
-import { h, type Component, type ExtractPropTypes, type Slots } from 'vue'
-import { computed, toRefs } from 'vue'
-import ObjectUtilities from '../../utils/ObjectUtilities'
+import {
+	type Component,
+	type ExtractPropTypes,
+	type Slots,
+	type Ref,
+	computed,
+	toRefs,
+	h,
+} from 'vue'
+import { toReactive } from '@vueuse/core'
+import { isString, resolveFieldData, isEmpty } from '@/utils/ObjectUtilities'
 
 /**
  * Merge errors from Array<string> to string errors separated from new line (\n)
  * @param {Array<string> | string} errors
  * @returns {string}
  */
-function joinErrors(errors: Array<string> | string) {
-	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
+function joinLines(errors: Array<string> | string | unknown[] | undefined) {
+	if (Array.isArray(errors)) {
+		return errors.filter((e) => isString(e)).join(' ')
+	}
+	return errors
 }
 
 interface HintSlotProps {
@@ -27,8 +31,8 @@ interface HintSlotProps {
 	modelValue: null
 	valid: BooleanConstructor
 	validLabel: (StringConstructor | ArrayConstructor)[]
-	error: BooleanConstructor
-	errorLabel: (StringConstructor | ArrayConstructor)[]
+	invalid: BooleanConstructor
+	invalidLabel: (StringConstructor | ArrayConstructor)[]
 }
 
 interface HintSlotPropsWithLoading extends HintSlotProps {
@@ -38,126 +42,170 @@ interface HintSlotPropsWithLoading extends HintSlotProps {
 
 /**
  * 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
+ * @param {Readonly<ExtractPropTypes<HintSlotProps | HintSlotPropsWithLoading>>} parentProps vue props
+ * @param {Slots} parentSlots vue slots
  * @returns {Component} vue component
  */
 export function HintSlotFactory(
-	pProps: Readonly<
+	parentProps: Readonly<
 		ExtractPropTypes<HintSlotProps | HintSlotPropsWithLoading>
 	>,
-	pSlots: Slots
-): Component {
+	parentSlots: Slots,
+): {
+	HintSlot: Component
+	hasHint: Ref<boolean>
+	hasInvalid: Ref<boolean>
+	hasValid: Ref<boolean>
+	hasLoading: Ref<boolean>
+} {
+	// slots
+	const {
+		invalid: invalidSlot,
+		valid: validSlot,
+		hint: hintSlot,
+		loading: loadingSlot,
+	} = parentSlots
+
+	// props
+	const {
+		hintLabel,
+		modelValue,
+		valid,
+		validLabel,
+		invalid,
+		invalidLabel,
+		...otherProps
+	} = toRefs(parentProps)
+
+	const loading = resolveFieldData(otherProps, 'loading') as
+		| Ref<boolean>
+		| undefined
+	const loadingLabel = resolveFieldData(otherProps, 'loadingLabel') as
+		| Ref<string>
+		| undefined
+
+	const hasInvalid = computed(() => {
+		if (!invalid.value) {
+			return false
+		}
+		if (invalid.value && invalidSlot) {
+			return true
+		}
+		if (
+			invalidLabel?.value &&
+			Array.isArray(invalidLabel.value) &&
+			invalidLabel.value.length > 0
+		) {
+			return true
+		}
+		if (invalidLabel?.value && !isEmpty(invalidLabel)) {
+			return true
+		}
+		return false
+	})
+
+	const hasHint = computed(
+		() => !!((hintLabel && hintLabel.value) || hintSlot),
+	)
+
+	const hasValid = computed(
+		() => !!((validLabel && validLabel.value) || validSlot),
+	)
+
+	const hasLoading = computed(
+		() =>
+			!!(
+				(loading?.value && loadingSlot) ||
+				(loading?.value && loadingLabel?.value)
+			),
+	)
+
+	const isVisible = computed(
+		() =>
+			hasHint.value ||
+			hasValid.value ||
+			hasInvalid.value ||
+			hasLoading.value,
+	)
+
 	return {
-		name: 'HintSlot',
-		setup() {
-			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 joinErrors(errorLabel?.value || '')
-				else return errorLabel?.value
-			})
-
-			const hintContent = computed(() => {
-				const slotProps = { modelValue, error, valid }
-
-				if (error?.value) {
-					return (
-						errorSlot?.(slotProps) ||
-						errorMessage?.value ||
-						hintLabel?.value
-					)
-				}
+		hasInvalid,
+		hasHint,
+		hasValid,
+		hasLoading,
+		HintSlot: {
+			name: 'HintSlot',
+			props: {
+				params: {
+					type: Object,
+					default: () => ({}),
+				},
+			},
+			setup(props) {
+				const hintContent = computed(() => {
+					const slotProps = toReactive({
+						hintLabel,
+						modelValue,
+						valid,
+						validLabel,
+						invalid,
+						invalidLabel,
+						loading,
+						loadingLabel,
+						...props.params,
+					})
+
+					if (invalid?.value) {
+						return (
+							invalidSlot?.(slotProps) ||
+							joinLines(invalidLabel?.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
+						)
 
-				if (valid?.value)
 					return (
-						validSlot?.(slotProps) ||
-						validLabel?.value ||
+						hintSlot?.(slotProps) ||
+						joinLines(hintLabel?.value) ||
 						hintLabel?.value
 					)
+				})
 
-				if (loading?.value)
-					return (
-						loadingSlot?.(slotProps) ||
-						loadingLabel?.value ||
-						hintLabel?.value
+				return {
+					isVisible,
+					hasInvalid,
+					hasValid,
+					hintContent,
+				}
+			},
+			render() {
+				if (this.isVisible) {
+					return h(
+						'small',
+						{
+							role:
+								this.hasInvalid || this.hasValid
+									? 'alert'
+									: undefined,
+						},
+						this.hintContent,
 					)
-
-				return (
-					hintSlot?.(slotProps) ||
-					hintLabel?.value ||
-					hintLabel?.value
-				)
-			})
-
-			return {
-				hasHint,
-				hintContent
-			}
+				}
+			},
 		},
-		render() {
-			if (this.hasHint) {
-				return h('span', null, this.hintContent)
-			}
-		}
 	}
 }
 

package/src/components/index.ts

@@ -1,12 +1,19 @@
-export { default as VvButton } from '@/components/VvButton/VvButton.vue'
-export { default as VvIcon } from '@/components/VvIcon/VvIcon.vue'
-export { default as VvBadge } from '@/components/VvBadge/VvBadge.vue'
-export { default as VvButtonGroup } from '@/components/VvButtonGroup/VvButtonGroup.vue'
-export { default as VvAccordion } from '@/components/VvAccordion/VvAccordion.vue'
-export { default as VvAccordionGroup } from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
-export { default as VvBreadcrumb } from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
-export { default as VvCard } from '@/components/VvCard/VvCard.vue'
-export { default as VvCheck } from '@/components/VvCheck/VvCheck.vue'
-export { default as VvCheckGroup } from '@/components/VvCheckGroup/VvCheckGroup.vue'
-export { default as VvDialog } from '@/components/VvDialog/VvDialog.vue'
-export { default as VvDropdown } from '@/components/VvDropdown/VvDropdown.vue'
+export { default as VvAccordion } from './VvAccordion/VvAccordion.vue'
+export { default as VvAccordionGroup } from './VvAccordionGroup/VvAccordionGroup.vue'
+export { default as VvBadge } from './VvBadge/VvBadge.vue'
+export { default as VvBreadcrumb } from './VvBreadcrumb/VvBreadcrumb.vue'
+export { default as VvButton } from './VvButton/VvButton.vue'
+export { default as VvButtonGroup } from './VvButtonGroup/VvButtonGroup.vue'
+export { default as VvCard } from './VvCard/VvCard.vue'
+export { default as VvCheckbox } from './VvCheckbox/VvCheckbox.vue'
+export { default as VvCheckboxGroup } from './VvCheckboxGroup/VvCheckboxGroup.vue'
+export { default as VvCombobox } from './VvCombobox/VvCombobox.vue'
+export { default as VvDialog } from './VvDialog/VvDialog.vue'
+export { default as VvDropdown } from './VvDropdown/VvDropdown.vue'
+export { default as VvIcon } from './VvIcon/VvIcon.vue'
+export { default as VvInputText } from './VvInputText/VvInputText.vue'
+export { default as VvProgress } from './VvProgress/VvProgress.vue'
+export { default as VvRadio } from './VvRadio/VvRadio.vue'
+export { default as VvRadioGroup } from './VvRadioGroup/VvRadioGroup.vue'
+export { default as VvSelect } from './VvSelect/VvSelect.vue'
+export { default as VvTextarea } from './VvTextarea/VvTextarea.vue'

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

@@ -3,10 +3,9 @@ import type { Ref } from 'vue'
 import type IGroupState from './IGroupState'
 
 /**
- * Stato condiviso per un gruppo di pulsanti
+ * State shared in a group of accordions
  */
 export default interface IAccordionGroupState extends IGroupState {
-	iconRight: Ref<boolean>
-	bordered: Ref<boolean>
-	accordion: Ref<boolean>
+	collapse: Ref<boolean>
+	modifiers: Ref<Array<string> | string | undefined>
 }

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

@@ -3,19 +3,13 @@ import type { Ref } from 'vue'
 import type IGroupState from './IGroupState'
 
 /**
- * Stato condiviso per un gruppo di pulsanti
+ * State shared in a group of buttons
  */
 export default interface IButtonGroupState extends IGroupState {
-	/**
-	 * Singolo bottone selezionato - utilizzo un id (o un name)
-	 */
-	modelValue: Ref<string | undefined>
-	/**
-	 * Stato disabilitato
-	 */
+	modelValue: Ref<string | Array<string> | undefined>
 	disabled: Ref<boolean>
-	/**
-	 * True = gruppo di pulsanti è in modalità TOGGLE (come i radio buttons)
-	 */
 	toggle: Ref<boolean>
+	multiple: Ref<boolean>
+	unselectable: Ref<boolean>
+	modifiers: Ref<string | Array<string> | undefined>
 }

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

@@ -1,12 +1,10 @@
 import type { Ref } from 'vue'
 
 /**
- * Stato condiviso per un gruppo di elementi
+ * State shared for a group of elements
  */
 export default interface IGroupState {
-	[key: string]: Ref<any> | symbol
-	/**
-	 * Chiave usata per il provide del gruppo
-	 */
-	key: symbol
+	[itemKey: string]: Ref<unknown> | string
+	// The key of the group
+	key: string
 }

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

@@ -3,11 +3,8 @@ import type { Ref } from 'vue'
 import type IGroupState from './IGroupState'
 
 /**
- * Stato condiviso per in un gruppo di inputs
+ * State shared in a group of inputs
  */
 export interface IInputGroupState extends IGroupState {
-	/**
-	 * True = gruppo di elementi di input è in readonly
-	 */
 	readonly: Ref<boolean>
 }

package/src/composables/group/useInjectedGroupState.ts

@@ -1,64 +1,52 @@
-import type IGroupState from './types/IGroupState'
-import { toRef, unref, type Ref } from 'vue'
-
-import { inject, computed } from 'vue'
-import ObjectUtilities from '../../utils/ObjectUtilities'
+import { type Ref, toRef, unref, inject, computed } from 'vue'
+import type IGroupState from '@/composables/group/types/IGroupState'
+import { isEmpty } from '@/utils/ObjectUtilities'
 
 /**
- * Esegue l'inject dello stato condiviso da un componente padre.
+ * Injects a group state
  */
 export function useInjectedGroupState<TGroup extends IGroupState>(
-	groupKey: symbol
+	groupKey: string,
 ) {
-	//Recupera, se esiste, lo stato condiviso fornito da un parent "group"
+	// Get group state
 	const group = inject<Ref<TGroup> | undefined>(groupKey, undefined)
 
-	console.log('Inject - ', group)
-
-	//Check if component is in group
-	const isInGroup = computed(() => ObjectUtilities.isNotEmpty(group))
+	// Check if component is in group
+	const isInGroup = computed(() => !isEmpty(group))
 
 	/**
-	 * Crea una computed ref (writable) che può utilizzare esporre il valore o dall'oggetto props oppure dal group
+	 * Get a group or local property
 	 */
 	function getGroupOrLocalRef<T extends object>(
 		propName: keyof TGroup,
 		props: T,
-		emit?: (event: any, ...args: any[]) => void
+		emit?: (event: string, ...args: unknown[]) => 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>
+			const groupPropValue = unref(group.value)[propName] as Ref<unknown>
 			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)
-				}
 			})
 		}
+		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
+		getGroupOrLocalRef,
 	}
 }

package/src/composables/group/useProvideGroupState.ts

@@ -1,23 +1,21 @@
-import type IGroupState from './types/IGroupState'
 import { provide, computed, isRef } from 'vue'
+import type IGroupState from '@/composables/group/types/IGroupState'
 
 /**
- * Condividi parte dello stato del componente con tutti i suoi figli.
+ * Share part of the state of the component with all its children.
  * @param {IGroupState} groupState the group state with all group options
  */
 export function useProvideGroupState<TGroup extends IGroupState>(
-	groupState: TGroup
+	groupState: TGroup,
 ) {
 	if (
 		Object.keys(groupState).some(
-			(k) => k !== 'key' && !isRef(groupState[k])
+			(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)
+		computed(() => groupState),
 	)
 }

package/src/composables/useComponentFocus.ts

@@ -0,0 +1,17 @@
+import { watch, unref } from 'vue'
+import { useFocus, type MaybeElement, type MaybeElementRef } from '@vueuse/core'
+
+export function useComponentFocus(
+	inputTemplateRef: MaybeElementRef<MaybeElement>,
+	emit: (event: 'focus' | 'blur', value: unknown) => void,
+) {
+	const { focused } = useFocus(inputTemplateRef)
+
+	watch(focused, (newValue) => {
+		emit(newValue ? 'focus' : 'blur', unref(inputTemplateRef))
+	})
+
+	return {
+		focused,
+	}
+}

package/src/composables/useComponentIcons.ts

@@ -0,0 +1,96 @@
+import { type Slot, type Ref, 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 | object | undefined> | undefined,
+	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
+			),
+	)
+	const hasIcon = computed(() => {
+		if (typeof icon?.value === 'string') {
+			return { name: icon?.value }
+		}
+		return icon?.value
+	})
+	return {
+		hasIcon,
+		hasIconLeft,
+		hasIconRight,
+		hasIconTop,
+		hasIconBottom,
+	}
+}

package/src/composables/useDebouncedInput.ts

@@ -0,0 +1,25 @@
+import { type Ref, computed } from 'vue'
+
+export function useDebouncedInput(
+	modelValue: Ref | undefined,
+	emit: (event: string, value: unknown) => void,
+	ms: string | number = 0,
+): Ref {
+	let timeout: NodeJS.Timeout
+
+	if (typeof ms === 'string') {
+		ms = parseInt(ms)
+	}
+
+	return computed({
+		get: () => modelValue?.value,
+		set: (value) => {
+			if (timeout) {
+				clearTimeout(timeout)
+			}
+			timeout = setTimeout(() => {
+				emit('update:modelValue', value)
+			}, ms as number)
+		},
+	})
+}