@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.51

package/src/composables/useDebouncedInput.ts

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

package/src/composables/useDefaults.ts

@@ -1,89 +1,90 @@
 import type { ExtractPropTypes, PropType } from 'vue'
 
 type VueProp =
-	| StringConstructor
-	| NumberConstructor
-	| ObjectConstructor
-	| FunctionConstructor
-	| SymbolConstructor
-	| ArrayConstructor
-	| BooleanConstructor
-	| PropType<unknown>
+    | StringConstructor
+    | NumberConstructor
+    | ObjectConstructor
+    | FunctionConstructor
+    | SymbolConstructor
+    | ArrayConstructor
+    | BooleanConstructor
+    | PropType<unknown>
 
 export function useDefaults<Definition>(
-	componentName: string,
-	propsDefinition: Definition,
-	props: Readonly<ExtractPropTypes<Definition>>,
+    componentName: string,
+    propsDefinition: Definition,
+    props: Readonly<ExtractPropTypes<Definition>>,
 ) {
-	const volver = useVolver()
+    const volver = useVolver()
 
-	const volverComponentDefaults = computed(() => {
-		if (!volver || !volver.defaults.value?.[componentName]) {
-			return undefined
-		}
-		return volver.defaults.value[componentName]
-	})
+    const volverComponentDefaults = computed(() => {
+        if (!volver || !volver.defaults.value?.[componentName]) {
+            return undefined
+        }
+        return volver.defaults.value[componentName]
+    })
 
-	return computed(() => {
-		if (volverComponentDefaults.value === undefined) {
-			return props
-		}
-		const componentDefaults = volverComponentDefaults.value
-		const simplifiedPropsDefinition = propsDefinition as {
-			[key: string]:
-				| VueProp
-				| VueProp[]
-				| { type: VueProp | VueProp[]; default?: unknown }
-		}
-		const simplifiedProps = props as Record<string, unknown>
-		return Object.keys(simplifiedPropsDefinition).reduce((acc, key) => {
-			const propValue = simplifiedProps[key]
-			acc[key] = propValue
-			if (key in componentDefaults) {
-				// array of types
-				if (Array.isArray(simplifiedPropsDefinition[key])) {
-					const typeArray = simplifiedPropsDefinition[
-						key
-					] as VueProp[]
-					if (typeArray.length) {
-						const typeFunction = typeArray[0] as <T>() => T
-						if (typeFunction === propValue) {
-							acc[key] = componentDefaults[key]
-						}
-					}
-				}
-				// single type
-				if (typeof simplifiedPropsDefinition[key] === 'function') {
-					const typeFunction = simplifiedPropsDefinition[key] as <
-						T,
-					>() => T
-					if (typeFunction() === propValue) {
-						acc[key] = componentDefaults[key]
-					}
-				}
-				// object with type and default
-				if (typeof simplifiedPropsDefinition[key] === 'object') {
-					let defaultValue = (
-						simplifiedPropsDefinition[key] as { default: unknown }
-					).default
-					if (typeof defaultValue === 'function') {
-						defaultValue = defaultValue()
-					}
-					if (typeof defaultValue === 'object') {
-						if (
-							JSON.stringify(defaultValue) ===
-							JSON.stringify(propValue)
-						) {
-							acc[key] = componentDefaults[key]
-						}
-					} else if (defaultValue === propValue) {
-						acc[key] = componentDefaults[key]
-					}
-				}
-			}
-			return acc
-		}, {} as Record<string, unknown>) as Readonly<
-			ExtractPropTypes<Definition>
-		>
-	})
+    return computed(() => {
+        if (volverComponentDefaults.value === undefined) {
+            return props
+        }
+        const componentDefaults = volverComponentDefaults.value
+        const simplifiedPropsDefinition = propsDefinition as {
+            [key: string]:
+                | VueProp
+                | VueProp[]
+                | { type: VueProp | VueProp[], default?: unknown }
+        }
+        const simplifiedProps = props as Record<string, unknown>
+        return Object.keys(simplifiedPropsDefinition).reduce((acc, key) => {
+            const propValue = simplifiedProps[key]
+            acc[key] = propValue
+            if (key in componentDefaults) {
+                // array of types
+                if (Array.isArray(simplifiedPropsDefinition[key])) {
+                    const typeArray = simplifiedPropsDefinition[
+                        key
+                    ] as VueProp[]
+                    if (typeArray.length) {
+                        const typeFunction = typeArray[0] as <T>() => T
+                        if (typeFunction === propValue) {
+                            acc[key] = componentDefaults[key]
+                        }
+                    }
+                }
+                // single type
+                if (typeof simplifiedPropsDefinition[key] === 'function') {
+                    const typeFunction = simplifiedPropsDefinition[key] as <
+                        T,
+                    >() => T
+                    if (typeFunction() === propValue) {
+                        acc[key] = componentDefaults[key]
+                    }
+                }
+                // object with type and default
+                if (typeof simplifiedPropsDefinition[key] === 'object') {
+                    let defaultValue = (
+                        simplifiedPropsDefinition[key] as { default: unknown }
+                    ).default
+                    if (typeof defaultValue === 'function') {
+                        defaultValue = defaultValue()
+                    }
+                    if (typeof defaultValue === 'object') {
+                        if (
+                            JSON.stringify(defaultValue)
+                            === JSON.stringify(propValue)
+                        ) {
+                            acc[key] = componentDefaults[key]
+                        }
+                    }
+                    else if (defaultValue === propValue) {
+                        acc[key] = componentDefaults[key]
+                    }
+                }
+            }
+            return acc
+        }, {} as Record<string, unknown>) as Readonly<
+            ExtractPropTypes<Definition>
+        >
+    })
 }

package/src/composables/useModifiers.ts

@@ -1,36 +1,36 @@
 import type { Ref } from 'vue'
 
 export function useModifiers(
-	prefix: string,
-	modifiers?: Ref<string | string[] | unknown | unknown[] | undefined>,
-	others?: Ref<Record<string, boolean>>,
+    prefix: string,
+    modifiers?: Ref<string | string[] | unknown | unknown[] | undefined>,
+    others?: Ref<Record<string, boolean>>,
 ) {
-	return computed(() => {
-		const toReturn: Record<string, boolean> = {
-			[prefix]: true,
-		}
-		// props modifiers
-		const modifiersArray =
-			typeof modifiers?.value === 'string'
-				? modifiers.value.split(' ')
-				: modifiers?.value
-		if (modifiersArray) {
-			if (Array.isArray(modifiersArray)) {
-				modifiersArray.forEach((modifier) => {
-					if (modifier) {
-						toReturn[`${prefix}--${modifier}`] = true
-					}
-				})
-			}
-		}
+    return computed(() => {
+        const toReturn: Record<string, boolean> = {
+            [prefix]: true,
+        }
+        // props modifiers
+        const modifiersArray
+			= typeof modifiers?.value === 'string'
+			    ? modifiers.value.split(' ')
+			    : modifiers?.value
+        if (modifiersArray) {
+            if (Array.isArray(modifiersArray)) {
+                modifiersArray.forEach((modifier) => {
+                    if (modifier) {
+                        toReturn[`${prefix}--${modifier}`] = true
+                    }
+                })
+            }
+        }
 
-		// others modifiers
-		if (others) {
-			Object.keys(others.value).forEach((key) => {
-				toReturn[`${prefix}--${key}`] = unref(others.value[key])
-			})
-		}
+        // others modifiers
+        if (others) {
+            Object.keys(others.value).forEach((key) => {
+                toReturn[`${prefix}--${key}`] = unref(others.value[key])
+            })
+        }
 
-		return toReturn
-	})
+        return toReturn
+    })
 }

package/src/composables/useOptions.ts

@@ -1,47 +1,56 @@
 import type { Option } from '../types/generic'
 import { get } from 'ts-dot-prop'
 
-// eslint-disable-next-line
 export function useOptions(props: any) {
-	const { options, labelKey, valueKey, disabledKey } = toRefs(props)
-
-	// eslint-disable-next-line
-	const getOptionLabel = (option: string | Option): string => {
-		if (typeof option !== 'object' && option !== null) return option
-
-		return String(
-			typeof labelKey.value === 'function'
-				? labelKey.value(option)
-				: get(option, labelKey.value),
-		)
-	}
-
-	const getOptionValue = (option: string | Option) => {
-		if (typeof option !== 'object' && option !== null) return option
-
-		return typeof valueKey.value === 'function'
-			? valueKey.value(option)
-			: get(option, valueKey.value)
-	}
-
-	const isOptionDisabled = (option: string | Option): boolean => {
-		if (typeof option !== 'object' && option !== null) return false
-
-		return typeof disabledKey.value === 'function'
-			? disabledKey.value(option)
-			: get(option, disabledKey.value)
-	}
-
-	const getOptionGrouped = (option: string | Option) => {
-		if (typeof option !== 'object' && option !== null) return []
-		return option.options || []
-	}
-
-	return {
-		options,
-		getOptionLabel,
-		getOptionValue,
-		isOptionDisabled,
-		getOptionGrouped,
-	}
+    const { options, labelKey, valueKey, disabledKey } = toRefs(props)
+
+    const getOptionLabel = <T extends string | Option>(option: T): string => {
+        if (typeof option === 'string') {
+            return option
+        }
+        if (typeof labelKey.value === 'function') {
+            return labelKey.value(option)
+        }
+        return String(
+            labelKey.value ? get(option as object, labelKey.value) : option,
+        )
+    }
+
+    const getOptionValue = <T extends string | Option>(option: T) => {
+        if (typeof option === 'string') {
+            return option
+        }
+        if (typeof valueKey.value === 'function') {
+            return valueKey.value(option)
+        }
+        return valueKey.value ? get(option as object, valueKey.value) : option
+    }
+
+    const isOptionDisabled = <T extends string | Option>(option: T): boolean => {
+        if (typeof option === 'string') {
+            return false
+        }
+        if (typeof disabledKey.value === 'function') {
+            return disabledKey.value(option)
+        }
+        return disabledKey.value ? get(option as object, disabledKey.value) : false
+    }
+
+    const getOptionGrouped = <T extends string | Option>(option: T) => {
+        if (typeof option == 'string') {
+            return []
+        }
+        if (typeof option === 'object' && option && 'options' in option) {
+            return option.options as T[]
+        }
+        return []
+    }
+
+    return {
+        options,
+        getOptionLabel,
+        getOptionValue,
+        isOptionDisabled,
+        getOptionGrouped,
+    }
 }

package/src/composables/usePersistence.ts

@@ -0,0 +1,74 @@
+import type { Ref } from 'vue'
+import { StorageType } from '@/constants'
+import { computed, isRef, ref, unref, watch } from 'vue'
+
+export function usePersistence<T>(storageKey: Ref<string | undefined> | undefined,	storageType: Ref<`${StorageType}`> | `${StorageType}` = StorageType.local,	defaultValue?: T) {
+    const localValue: Ref<T | undefined> = ref()
+    if (defaultValue) {
+        localValue.value = defaultValue
+    }
+    let storageValue: Ref<T | undefined> | undefined
+    if (storageKey) {
+        watch(
+            storageKey,
+            (newKey, oldKey) => {
+                const storage
+					= unref(storageType) === StorageType.session
+					    ? sessionStorage
+					    : localStorage
+                if (oldKey && oldKey !== newKey) {
+                    storage.removeItem(oldKey)
+                }
+                if (newKey) {
+                    storageValue = useStorage(
+                        newKey,
+                        storageValue?.value ?? localValue.value,
+                        storage,
+                    )
+                    return
+                }
+                storageValue = undefined
+            },
+            {
+                immediate: true,
+            },
+        )
+    }
+    if (isRef(storageType)) {
+        watch(storageType, (newType, oldType) => {
+            if (storageKey?.value) {
+                if (newType) {
+                    const storage
+						= newType === StorageType.session
+						    ? sessionStorage
+						    : localStorage
+                    storageValue = useStorage(
+                        storageKey.value,
+                        storageValue?.value ?? localValue.value,
+                        storage,
+                    )
+                }
+                if (oldType && oldType !== newType) {
+                    const oldStorage
+						= oldType === StorageType.session
+						    ? sessionStorage
+						    : localStorage
+                    oldStorage.removeItem(storageKey.value)
+                }
+            }
+        })
+    }
+
+    return computed<T | undefined>({
+        get: () => {
+            return storageValue?.value ?? localValue.value
+        },
+        set: (value) => {
+            if (storageValue) {
+                storageValue.value = value
+                return
+            }
+            localValue.value = value
+        },
+    })
+}

package/src/composables/useTextCount.ts

@@ -1,57 +1,57 @@
 import type { Ref } from 'vue'
 
 export function useTextCount(
-	text: Ref<string | undefined | null> | string,
-	options?: {
-		mode?: string | boolean
-		upperLimit?: number
-		lowerLimit?: number
-	},
+    text: Ref<string | undefined | null> | string,
+    options?: {
+        mode?: string | boolean
+        upperLimit?: number
+        lowerLimit?: number
+    },
 ) {
-	const length = computed(() => {
-		return (unref(text) ?? '').length
-	})
+    const length = computed(() => {
+        return (unref(text) ?? '').length
+    })
 
-	const gap = computed(() => {
-		if (
-			options?.lowerLimit !== undefined &&
-			length.value < options?.lowerLimit
-		) {
-			return length.value - options.lowerLimit
-		}
-		if (
-			options?.upperLimit !== undefined &&
-			length.value < options?.upperLimit
-		) {
-			return options.upperLimit - length.value
-		}
-		return 0
-	})
+    const gap = computed(() => {
+        if (
+            options?.lowerLimit !== undefined
+            && length.value < options?.lowerLimit
+        ) {
+            return length.value - options.lowerLimit
+        }
+        if (
+            options?.upperLimit !== undefined
+            && length.value < options?.upperLimit
+        ) {
+            return options.upperLimit - length.value
+        }
+        return 0
+    })
 
-	const formatted = computed(() => {
-		if (options?.mode === false) {
-			return ''
-		}
+    const formatted = computed(() => {
+        if (options?.mode === false) {
+            return ''
+        }
 
-		if (options?.mode === 'limit' && options?.upperLimit) {
-			return `${length.value} / ${
-				options.lowerLimit ? `${options.lowerLimit}-` : ''
-			}${options.upperLimit}`
-		}
+        if (options?.mode === 'limit' && options?.upperLimit) {
+            return `${length.value} / ${
+                options.lowerLimit ? `${options.lowerLimit}-` : ''
+            }${options.upperLimit}`
+        }
 
-		if (options?.mode === 'countdown') {
-			if (gap.value === 0) {
-				return undefined
-			}
-			return gap
-		}
+        if (options?.mode === 'countdown') {
+            if (gap.value === 0) {
+                return undefined
+            }
+            return gap
+        }
 
-		return length.value
-	})
+        return length.value
+    })
 
-	return {
-		length,
-		gap,
-		formatted,
-	}
+    return {
+        length,
+        gap,
+        formatted,
+    }
 }

package/src/composables/useUniqueId.ts

@@ -1,5 +1,5 @@
-import { uid } from 'uid'
-import type { Ref } from 'vue'
+import { type Ref, useId } from 'vue'
 
-export const useUniqueId = (id?: Ref<string | number | undefined>) =>
-	computed(() => String(id?.value || uid()))
+export function useUniqueId(id?: Ref<string | number | undefined>) {
+    return computed(() => String(id?.value || useId()))
+}

package/src/composables/useVolver.ts

@@ -1,5 +1,5 @@
 import { INJECTION_KEY_VOLVER } from '../constants'
 
 export function useVolver() {
-	return inject(INJECTION_KEY_VOLVER)
+    return inject(INJECTION_KEY_VOLVER)
 }