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

package/src/components/common/HintSlot.ts

@@ -1,7 +1,14 @@
+import {
+	type Component,
+	type ExtractPropTypes,
+	type Slots,
+	type Ref,
+	computed,
+	toRefs,
+	h
+} from 'vue'
 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'
+import { isString, resolveFieldData, isEmpty } from '@/utils/ObjectUtilities'
 
 /**
  * Merge errors from Array<string> to string errors separated from new line (\n)
@@ -9,14 +16,10 @@ import ObjectUtilities from '../../utils/ObjectUtilities'
  * @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
+	if (Array.isArray(errors)) {
+		return errors.filter((e) => isString(e)).join(' ')
+	}
+	return errors
 }
 
 interface HintSlotProps {
@@ -39,146 +42,164 @@ 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 {
-	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'
+	parentSlots: Slots
+): {
+	HintSlot: Component
+	hasHint: Ref<boolean>
+	hasErrors: Ref<boolean>
+	hasValid: Ref<boolean>
+	hasLoading: Ref<boolean>
+} {
+	// slots
+	const {
+		error: errorSlot,
+		valid: validSlot,
+		hint: hintSlot,
+		loading: loadingSlot
+	} = parentSlots
+
+	// props
+	const {
+		hintLabel,
+		modelValue,
+		valid,
+		validLabel,
+		error,
+		errorLabel,
+		...otherProps
+	} = toRefs(parentProps)
+
+	const loading = resolveFieldData(otherProps, 'loading') as
+		| Ref<boolean>
+		| undefined
+	const loadingLabel = resolveFieldData(otherProps, 'loadingLabel') as
+		| Ref<string>
+		| undefined
+
+	const hasErrors = computed(() => {
+		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 && !isEmpty(errorLabel)) {
+			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 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
-				})
+	const isVisible = computed(
+		() => hasHint.value || hasValid || hasErrors.value || hasLoading.value
+	)
 
-				if (error?.value) {
-					return (
-						errorSlot?.(slotProps) ||
-						joinLines(errorLabel?.value) ||
-						hintLabel?.value
-					)
+	return {
+		hasErrors,
+		hasHint,
+		hasValid,
+		hasLoading,
+		HintSlot: {
+			name: 'HintSlot',
+			props: {
+				params: {
+					type: Object,
+					default: () => ({})
 				}
+			},
+			setup(props) {
+				const hintContent = computed(() => {
+					const slotProps = toReactive({
+						hintLabel,
+						modelValue,
+						valid,
+						validLabel,
+						error,
+						errorLabel,
+						loading,
+						loadingLabel,
+						...props.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
+						)
 
-				if (valid?.value)
 					return (
-						validSlot?.(slotProps) ||
-						joinLines(validLabel?.value) ||
+						hintSlot?.(slotProps) ||
+						joinLines(hintLabel?.value) ||
 						hintLabel?.value
 					)
+				})
 
-				if (loading?.value)
-					return (
-						loadingSlot?.(slotProps) ||
-						joinLines(loadingLabel?.value) ||
-						hintLabel?.value
+				return {
+					isVisible,
+					hasErrors,
+					hasValid,
+					hintContent
+				}
+			},
+			render() {
+				if (this.isVisible) {
+					return h(
+						'small',
+						{
+							role:
+								this.hasErrors || this.hasValid
+									? 'alert'
+									: undefined
+						},
+						this.hintContent
 					)
-
-				return (
-					hintSlot?.(slotProps) ||
-					joinLines(hintLabel?.value) ||
-					hintLabel?.value
-				)
-			})
-
-			return {
-				hasHint,
-				hintContent
-			}
-		},
-		render() {
-			if (this.hasHint) {
-				return h(
-					'pre',
-					{ style: { 'white-space': 'pre' } },
-					this.hintContent
-				)
+				}
 			}
 		}
 	}

package/src/components/index.ts

@@ -1,12 +1,19 @@
-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 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 VvCheck } from './VvCheck/VvCheck.vue'
-export { default as VvCheckGroup } from './VvCheckGroup/VvCheckGroup.vue'
+export { default as VvCheckbox } from './VvCheckbox/VvCheckbox.vue'
+export { default as VvCheckboxGroup } from './VvCheckboxGroup/VvCheckboxGroup.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 VvNativeSelect } from './VvNativeSelect/VvNativeSelect.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/debouncedInput/useDebouncedInput.ts

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

package/src/composables/focus/useComponentFocus.ts

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

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

@@ -6,7 +6,5 @@ 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>
+	collapse: Ref<boolean>
 }

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

@@ -18,4 +18,8 @@ export default interface IButtonGroupState extends IGroupState {
 	 * True = gruppo di pulsanti è in modalità TOGGLE (come i radio buttons)
 	 */
 	toggle: Ref<boolean>
+	/**
+	 * add modifiers to buttons
+	 */
+	modifiers: Ref<Array<string> | string | undefined>
 }

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

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

package/src/composables/group/useInjectedGroupState.ts

@@ -1,35 +1,29 @@
-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)
 
-	//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
@@ -38,20 +32,16 @@ export function useInjectedGroupState<TGroup extends IGroupState>(
 					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 {

package/src/composables/group/useProvideGroupState.ts

@@ -1,5 +1,5 @@
-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.
@@ -14,7 +14,6 @@ export function useProvideGroupState<TGroup extends IGroupState>(
 		)
 	)
 		throw Error("One or more groupState props aren't ref.")
-
 	provide(
 		groupState.key,
 		computed(() => groupState)

package/src/composables/icons/useComponentIcons.ts

@@ -1,5 +1,4 @@
-import type { Slot, Ref } from 'vue'
-import { computed } from 'vue'
+import { type Slot, type Ref, computed } from 'vue'
 
 interface ComponentIconProps {
 	icon: Ref<string>
@@ -52,7 +51,7 @@ export function useComponentIcons(
 }
 
 export function useComponentIcon(
-	icon: Ref<string>,
+	icon: Ref<string | object>,
 	iconPosition: Ref<string>,
 	slots: ComponentIconSlots
 ) {

package/src/composables/options/useOptions.ts

@@ -1,8 +1,10 @@
 import { toRefs } from 'vue'
 
+// eslint-disable-next-line
 export function useOptions(props: any) {
 	const { options, optionLabel, optionValue } = toRefs(props)
 
+	// eslint-disable-next-line
 	const getOptionLabel = (o: any) => {
 		if (typeof o !== 'object' && o !== null) return o
 
@@ -11,6 +13,7 @@ export function useOptions(props: any) {
 			: o[optionLabel.value]
 	}
 
+	// eslint-disable-next-line
 	const getOptionValue = (o: any) => {
 		if (typeof o !== 'object' && o !== null) return o
 

package/src/composables/textLimit/useTextLimit.ts

@@ -1,14 +1,11 @@
-import { isString } from '@vueuse/core'
 import { computed, unref, type Ref } from 'vue'
+import { isString } from '@vueuse/core'
 
 interface useTextOptions {
 	mode: string | boolean
 	upperLimit: number
 }
 
-/**
- *
- */
 export function useTextLimit(inputText: Ref<string>, options: useTextOptions) {
 	const textLength = computed(() => {
 		const _text = unref(inputText)

package/src/composables/useModifiers.ts

@@ -1,5 +1,5 @@
 import { computed, unref, type Ref } from 'vue'
-import ObjectUtilities from '@/utils/ObjectUtilities'
+import { kebabCase } from '@/utils/ObjectUtilities'
 
 interface IBemModifiers {
 	[key: string]:
@@ -23,24 +23,24 @@ export function useBemModifiers(prefix: string, modifiers: IBemModifiers) {
 
 	const bemCssClasses = computed(() => {
 		return (
-			Object.keys(modifiers).reduce((acc, k) => {
-				const _modifier = unref(modifiers[k] as Ref<any>) || false
+			Object.keys(modifiers).reduce((acc, item) => {
+				const _modifier =
+					unref(modifiers[item] as Ref<string | string[]>) || false
 
 				if (!_modifier) return acc
 
-				if (k === 'modifiers') {
+				if (item === 'modifiers') {
 					const _reduceModifiers = Array.isArray(_modifier)
 						? _modifier
-						: [_modifier]
+						: _modifier.split(' ')
 					return {
 						...acc,
 						..._reduceModifiers.reduce(
 							(accVariant: object, currentVariant: string) => {
 								return {
 									...accVariant,
-									[`${prefix}--${ObjectUtilities.kebabCase(
-										currentVariant
-									)}`]: true
+									[`${prefix}--${kebabCase(currentVariant)}`]:
+										true
 								}
 							},
 							{}
@@ -49,8 +49,7 @@ export function useBemModifiers(prefix: string, modifiers: IBemModifiers) {
 				} else {
 					return {
 						...acc,
-						[`${prefix}--${ObjectUtilities.kebabCase(k)}`]:
-							_modifier
+						[`${prefix}--${kebabCase(item)}`]: _modifier
 					}
 				}
 			}, baseCssClass) || {}
@@ -67,7 +66,7 @@ export function toBem(prefix: string, modifiers: IBemModifiers) {
 
 	return (
 		Object.keys(modifiers).reduce((acc, k) => {
-			const _modifier = unref(modifiers[k] as Ref<any>) || false
+			const _modifier = unref(modifiers[k] as Ref<unknown>) || false
 
 			if (!_modifier) return acc
 
@@ -81,9 +80,8 @@ export function toBem(prefix: string, modifiers: IBemModifiers) {
 						(accVariant: object, currentVariant: string) => {
 							return {
 								...accVariant,
-								[`${prefix}--${ObjectUtilities.kebabCase(
-									currentVariant
-								)}`]: true
+								[`${prefix}--${kebabCase(currentVariant)}`]:
+									true
 							}
 						},
 						{}
@@ -92,7 +90,7 @@ export function toBem(prefix: string, modifiers: IBemModifiers) {
 			} else {
 				return {
 					...acc,
-					[`${prefix}--${ObjectUtilities.kebabCase(k)}`]: _modifier
+					[`${prefix}--${kebabCase(k)}`]: _modifier
 				}
 			}
 		}, baseCssClass) || {}