@volverjs/ui-vue 0.0.13 → 0.0.15

package/src/components/VvInputText/VvInputText.vue

@@ -20,6 +20,8 @@ import {
 } from '../VvInputText'
 import VvInputTextActionsFactory from '../VvInputText/VvInputTextActions'
 
+type SuggestionValue = string | number | Date
+
 // props, emit, slots and attrs
 const props = defineProps(VvInputTextProps)
 
@@ -117,80 +119,14 @@ const { el, mask, typed, masked, unmasked } = useIMask(
             }
             emit('update:masked', masked.value)
             if (type.value === INPUT_TYPES.NUMBER) {
-                if (MASK_NUMBER_REGEX.test(unmasked.value)) {
-                    if (
-                        localModelValue.value === null
-                        || localModelValue.value === undefined
-                    ) {
-                        return
-                    }
-                    localModelValue.value = undefined
-                    return
-                }
-                if (NEGATIVE_ZERO_REGEX.test(unmasked.value)) {
-                    localModelValue.value = 0
-                    return
-                }
-                if (typeof typed.value !== 'number') {
-                    localModelValue.value = Number(typed.value)
-                    return
-                }
-                localModelValue.value = typed.value
+                handleNumberAccept()
                 return
             }
             if (type.value === INPUT_TYPES.DATETIME_LOCAL
                 || type.value === INPUT_TYPES.DATE
                 || type.value === INPUT_TYPES.TIME
                 || type.value === INPUT_TYPES.MONTH) {
-                if (!typed.value) {
-                    if (!localModelValue.value) {
-                        return
-                    }
-                    if (modelValueDate.value) {
-                        localModelValue.value = undefined
-                        return
-                    }
-                    localModelValue.value = ''
-                    return
-                }
-                if (!(typed.value instanceof Date) && !modelValueDate.value && !modelValueDateIsoString.value) {
-                    localModelValue.value = typed.value
-                    return
-                }
-
-                let date = typed.value
-                if (!(date instanceof Date)) {
-                    date = getDateFromInputValue(typed.value, type.value)
-                }
-                if (modelValueDate.value || modelValueDateIsoString.value) {
-                    const toReturn = new Date(modelValueDate.value || modelValueDateIsoString.value as string)
-                    if (type.value === INPUT_TYPES.DATETIME_LOCAL
-                        || type.value === INPUT_TYPES.DATE
-                        || type.value === INPUT_TYPES.MONTH) {
-                        toReturn.setFullYear(date.getFullYear())
-                        toReturn.setMonth(date.getMonth())
-                    }
-                    if (type.value === INPUT_TYPES.DATETIME_LOCAL
-                        || type.value === INPUT_TYPES.DATE) {
-                        toReturn.setDate(date.getDate())
-                    }
-                    if (type.value === INPUT_TYPES.DATETIME_LOCAL
-                        || type.value === INPUT_TYPES.TIME) {
-                        toReturn.setHours(date.getHours())
-                        toReturn.setMinutes(date.getMinutes())
-                        toReturn.setSeconds(date.getSeconds())
-                    }
-                    if (modelValueDate.value instanceof Date) {
-                        if (localModelValue.value?.getTime() === toReturn.getTime()) {
-                            return
-                        }
-                        localModelValue.value = toReturn
-                        return
-                    }
-                    localModelValue.value = toReturn.toISOString()
-                    return
-                }
-                localModelValue.value = getInputValueFromDate(date, type.value, hasSeconds.value)
+                handleDateAccept()
                 return
             }
             if (!localModelValue.value && !unmasked.value) {
@@ -200,7 +136,88 @@ const { el, mask, typed, masked, unmasked } = useIMask(
         },
     },
 )
-function updateMaskValue(newValue: string | number | Date | undefined | null) {
+
+function handleNumberAccept() {
+    if (MASK_NUMBER_REGEX.test(unmasked.value)) {
+        if (
+            localModelValue.value === null
+            || localModelValue.value === undefined
+        ) {
+            return
+        }
+        localModelValue.value = undefined
+        return
+    }
+    if (NEGATIVE_ZERO_REGEX.test(unmasked.value)) {
+        localModelValue.value = 0
+        return
+    }
+    if (typeof typed.value !== 'number') {
+        localModelValue.value = Number(typed.value)
+        return
+    }
+    localModelValue.value = typed.value
+}
+
+function mergeDateIntoModelValue(date: Date) {
+    const toReturn = new Date(modelValueDate.value || modelValueDateIsoString.value as string)
+    if (type.value === INPUT_TYPES.DATETIME_LOCAL
+        || type.value === INPUT_TYPES.DATE
+        || type.value === INPUT_TYPES.MONTH) {
+        toReturn.setFullYear(date.getFullYear())
+        toReturn.setMonth(date.getMonth())
+    }
+    if (type.value === INPUT_TYPES.DATETIME_LOCAL
+        || type.value === INPUT_TYPES.DATE) {
+        toReturn.setDate(date.getDate())
+    }
+    if (type.value === INPUT_TYPES.DATETIME_LOCAL
+        || type.value === INPUT_TYPES.TIME) {
+        toReturn.setHours(date.getHours())
+        toReturn.setMinutes(date.getMinutes())
+        toReturn.setSeconds(date.getSeconds())
+    }
+    if (modelValueDate.value instanceof Date) {
+        if (localModelValue.value?.getTime() === toReturn.getTime()) {
+            return
+        }
+        localModelValue.value = toReturn
+        return
+    }
+    localModelValue.value = toReturn.toISOString()
+}
+
+function handleDateAccept() {
+    // onAccept only calls this for date-like input types
+    const dateType = type.value as 'date' | 'time' | 'month' | 'datetime-local'
+    if (!typed.value) {
+        if (!localModelValue.value) {
+            return
+        }
+        if (modelValueDate.value) {
+            localModelValue.value = undefined
+            return
+        }
+        localModelValue.value = ''
+        return
+    }
+    if (!(typed.value instanceof Date) && !modelValueDate.value && !modelValueDateIsoString.value) {
+        localModelValue.value = typed.value
+        return
+    }
+
+    let date = typed.value
+    if (!(date instanceof Date)) {
+        date = getDateFromInputValue(typed.value, dateType)
+    }
+    if (modelValueDate.value || modelValueDateIsoString.value) {
+        mergeDateIntoModelValue(date)
+        return
+    }
+    localModelValue.value = getInputValueFromDate(date, dateType, hasSeconds.value)
+}
+
+function updateMaskValue(newValue: SuggestionValue | undefined | null) {
     // Handle empty values
     if (newValue === undefined || newValue === null) {
         typed.value = ''
@@ -439,13 +456,13 @@ const isInvalid = computed(() => {
 
 // suggestions
 const storageKey = computed(() => props.storageKey ?? (volver?.experimentalFeatures.forceInputSuggestions ? props.name : undefined))
-const storageSuggestions = usePersistence<Set<string | number | Date>>(
+const storageSuggestions = usePersistence<Set<SuggestionValue>>(
     storageKey,
     storageType,
     new Set(),
 )
 const allSuggestions = computed(() => {
-    const merged = new Map<string | number | Date, { isFromStorage: boolean }>()
+    const merged = new Map<SuggestionValue, { isFromStorage: boolean }>()
 
     // Add storage suggestions
     if (storageSuggestions.value) {
@@ -483,12 +500,12 @@ const hasSuggestions = computed(
     () =>
         allSuggestions.value.size > 0,
 )
-function onSuggestionSelect(suggestion: string | number | Date) {
+function onSuggestionSelect(suggestion: SuggestionValue) {
     localModelValue.value = suggestion
     suggestionsDropdownEl.value?.hide()
     emit('suggestion:selected', suggestion)
 }
-function onSuggestionRemove(suggestion: string | number | Date) {
+function onSuggestionRemove(suggestion: SuggestionValue) {
     // Only remove from storage if it came from storage
     if (allSuggestions.value.get(suggestion)?.isFromStorage) {
         storageSuggestions.value?.delete(suggestion)
@@ -588,8 +605,8 @@ const hasAttrs = computed(() => {
             max = '9999-12-31'
         }
         toReturn.step = props.step
-        toReturn.max = max !== undefined ? String(max) : undefined
-        toReturn.min = props.min !== undefined ? String(props.min) : undefined
+        toReturn.max = max === undefined ? undefined : String(max)
+        toReturn.min = props.min === undefined ? undefined : String(props.min)
     }
 
     // Text-like types with placeholder
@@ -657,9 +674,9 @@ const hasStyle = computed(() => {
         return undefined
     }
     return {
-        width: localModelValue.value !== undefined
-            ? `${String(localModelValue.value).length + 1}ch`
-            : undefined,
+        width: localModelValue.value === undefined
+            ? undefined
+            : `${String(localModelValue.value).length + 1}ch`,
     }
 })
 

package/src/components/VvRadioGroup/index.ts

@@ -1,5 +1,3 @@
-import { CheckboxRadioGroupProps } from '../../props'
-
-export const VvRadioGroupProps = CheckboxRadioGroupProps
+export { CheckboxRadioGroupProps as VvRadioGroupProps } from '../../props'
 
 export const VvRadioGroupEvents = ['update:modelValue', 'change']

package/src/composables/useBlurhash.ts

@@ -16,7 +16,7 @@ function loadImage(src: string): Promise<CanvasImageSource> {
     return new Promise((resolve, reject) => {
         const img = new Image()
         img.onload = () => resolve(img)
-        img.onerror = (...args) => reject(args)
+        img.onerror = () => reject(new Error(`Failed to load image: ${src}`))
         img.src = src
     })
 }

package/src/composables/useDebouncedInput.ts

@@ -26,7 +26,7 @@ export function useDebouncedInput(
             }
             timeout = setTimeout(() => {
                 emit('update:modelValue', setter(value))
-            }, ms as number)
+            }, ms)
         },
     })
 }

package/src/composables/useDefaults.ts

@@ -10,6 +10,53 @@ type VueProp
         | BooleanConstructor
         | PropType<unknown>
 
+type PropDefinition
+    = | VueProp
+        | VueProp[]
+        | { type: VueProp | VueProp[], default?: unknown }
+
+/**
+ * Returns the value a prop should take: either the provided `propValue` or the
+ * `componentDefault` when `propValue` still matches the prop definition default.
+ * The three checks are intentionally independent (an array definition satisfies
+ * both `Array.isArray` and `typeof === 'object'`).
+ */
+function resolveDefaultedProp(
+    definition: PropDefinition,
+    propValue: unknown,
+    componentDefault: unknown,
+): unknown {
+    let value = propValue
+    // array of types
+    if (Array.isArray(definition) && definition.length) {
+        const typeFunction = definition[0] as <T>() => T
+        if (typeFunction() === propValue) {
+            value = componentDefault
+        }
+    }
+    // single type
+    if (typeof definition === 'function') {
+        const typeFunction = definition as <T>() => T
+        if (typeFunction() === propValue) {
+            value = componentDefault
+        }
+    }
+    // object with type and default
+    if (typeof definition === 'object') {
+        let defaultValue = (definition as { default: unknown }).default
+        if (typeof defaultValue === 'function') {
+            defaultValue = defaultValue()
+        }
+        const matches = typeof defaultValue === 'object'
+            ? JSON.stringify(defaultValue) === JSON.stringify(propValue)
+            : defaultValue === propValue
+        if (matches) {
+            value = componentDefault
+        }
+    }
+    return value
+}
+
 export function useDefaults<Definition>(
     componentName: string,
     propsDefinition: Definition,
@@ -18,7 +65,7 @@ export function useDefaults<Definition>(
     const volver = useVolver()
 
     const volverComponentDefaults = computed(() => {
-        if (!volver || !volver.defaults.value?.[componentName]) {
+        if (!volver?.defaults.value?.[componentName]) {
             return undefined
         }
         return volver.defaults.value[componentName]
@@ -38,49 +85,13 @@ export function useDefaults<Definition>(
         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]
-                    }
-                }
-            }
+            acc[key] = key in componentDefaults
+                ? resolveDefaultedProp(
+                        simplifiedPropsDefinition[key],
+                        propValue,
+                        componentDefaults[key],
+                    )
+                : propValue
             return acc
         }, {} as Record<string, unknown>) as Readonly<
             ExtractPropTypes<Definition>

package/src/composables/useModifiers.ts

@@ -2,7 +2,7 @@ import type { Ref } from 'vue'
 
 export function useModifiers(
     prefix: string,
-    modifiers?: Ref<string | string[] | unknown | unknown[] | undefined>,
+    modifiers?: Ref<unknown>,
     others?: Ref<Record<string, boolean>>,
 ) {
     return computed(() => {

package/src/index.ts

@@ -1,9 +1,9 @@
-import type { Volver, VolverOptions } from './Volver'
+import type { Volver } from './Volver'
 import VolverPlugin from './Volver'
 
 export { VolverPlugin }
 export * from './types'
-export type { Volver, VolverOptions }
+export type { Volver, VolverOptions } from './Volver'
 
 // https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
 // Add custom property and extend vue type definition

package/src/resolvers/unplugin.ts

@@ -35,12 +35,12 @@ export interface VolverResolverOptions {
     cherryPick?: boolean
 }
 
-const STYLE_EXCLUDE = ['vv-icon', 'vv-action']
+const STYLE_EXCLUDE = new Set(['vv-icon', 'vv-action'])
 const VOLVER_PREFIX = 'vv'
-const DIRECTIVES = ['v-tooltip', 'v-contextmenu']
+const DIRECTIVES = new Set(['v-tooltip', 'v-contextmenu'])
 
 export function getStyleNames(kebabName: string) {
-    if (STYLE_EXCLUDE.includes(kebabName)) {
+    if (STYLE_EXCLUDE.has(kebabName)) {
         return undefined
     }
     if (kebabName === 'vv-dropdown') {
@@ -125,7 +125,7 @@ export function VolverResolver({
                     `${VOLVER_PREFIX}-`,
                 )
 
-                if (ignore && ignore.includes(kebabName)) {
+                if (ignore?.includes(kebabName)) {
                     return
                 }
 
@@ -153,11 +153,11 @@ export function VolverResolver({
                 const kebabName = `v-${kebabCase(name)}`
 
                 // filter directive
-                if (!DIRECTIVES.includes(kebabName)) {
+                if (!DIRECTIVES.has(kebabName)) {
                     return
                 }
 
-                if (ignore && ignore.includes(kebabName)) {
+                if (ignore?.includes(kebabName)) {
                     return
                 }
 

package/src/types/alert.ts

@@ -8,7 +8,7 @@ export type AlertModifier
         | 'danger'
         | 'brand'
         | 'accent'
-        | string
+        | (string & {})
 
 export type Alert = {
     id: string | number

package/src/types/nav.ts

@@ -9,7 +9,7 @@ export type NavItem = {
     disabled?: boolean
     current?: boolean
     class?: string | string[]
-    on?: Record<'click' | string, () => void>
+    on?: Record<'click' | (string & {}), () => void>
     data?: Record<string, unknown>
 }
 

package/src/utils/DateUtilities.ts

@@ -12,14 +12,14 @@ const padTwoDigits = (num: number) => num.toString().padStart(2, '0')
  * @param dateString
  * @returns True if valid ISO date string
  * @example
- * isDateIsoString('2021-12-31T23:59:59') // true
+ * isDateIsoString('2021-12-31T23:59:59.000Z') // true
  */
-const ISO_DATE_REGEX = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?(?:Z|[+-]\d{2}:?\d{2})?$/
+// Canonical UTC form, matching what `Date.prototype.toISOString()` produces.
+const ISO_DATE_REGEX = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/
 export function isDateIsoString(dateString: unknown) {
     if (typeof dateString !== 'string') {
         return false
     }
-    // Support both with/without milliseconds and timezone variations
     if (!ISO_DATE_REGEX.test(dateString)) {
         return false
     }

package/src/utils/DomUtilities.ts

@@ -2,9 +2,15 @@ export function findScrollContainer(element: HTMLElement | null) {
     if (!element) {
         return undefined
     }
+    if (
+        typeof globalThis.getComputedStyle !== 'function'
+        || typeof document === 'undefined'
+    ) {
+        return undefined
+    }
     let parent = element.parentElement
     while (parent) {
-        const { overflow } = window.getComputedStyle(parent)
+        const { overflow } = globalThis.getComputedStyle(parent)
         if (overflow.split(' ').every(item => item === 'auto' || item === 'scroll')) {
             return parent
         }

package/src/utils/ObjectUtilities.ts

@@ -22,67 +22,69 @@ export function equals(obj1: any, obj2: any, field?: string) {
  * @returns {boolean}
  */
 
-export function deepEquals(a: any, b: any) {
-    if (a === b)
-        return true
+function deepEqualsArray(a: any[], b: any[]) {
+    if (a.length !== b.length)
+        return false
+    for (let i = a.length; i-- !== 0;) {
+        if (!deepEquals(a[i], b[i]))
+            return false
+    }
+    return true
+}
 
-    if (a && b && typeof a == 'object' && typeof b == 'object') {
-        const arrA = Array.isArray(a)
-        const arrB = Array.isArray(b)
-        let i, length, key
-
-        if (arrA && arrB) {
-            length = a.length
-            if (length !== b.length)
-                return false
-            for (i = length; i-- !== 0;) {
-                if (!deepEquals(a[i], b[i]))
-                    return false
-            }
+function deepEqualsObject(a: any, b: any) {
+    const keys = Object.keys(a)
+    const { length } = keys
 
-            return true
-        }
+    if (length !== Object.keys(b).length)
+        return false
 
-        if (arrA !== arrB)
+    for (let i = length; i-- !== 0;) {
+        if (!Object.hasOwn(b, keys[i]))
             return false
+    }
 
-        const dateA = a instanceof Date
-        const dateB = b instanceof Date
-
-        if (dateA !== dateB)
+    for (let i = length; i-- !== 0;) {
+        const key = keys[i]
+        if (!deepEquals(a[key], b[key]))
             return false
-        if (dateA && dateB)
-            return a.getTime() === b.getTime()
+    }
 
-        const regexpA = a instanceof RegExp
-        const regexpB = b instanceof RegExp
+    return true
+}
 
-        if (regexpA !== regexpB)
-            return false
-        if (regexpA && regexpB)
-            return a.toString() === b.toString()
+export function deepEquals(a: any, b: any) {
+    if (a === b)
+        return true
 
-        const keys = Object.keys(a)
+    if (!a || !b || typeof a !== 'object' || typeof b !== 'object')
+        return Number.isNaN(a) && Number.isNaN(b)
 
-        length = keys.length
+    const arrA = Array.isArray(a)
+    const arrB = Array.isArray(b)
 
-        if (length !== Object.keys(b).length)
-            return false
+    if (arrA !== arrB)
+        return false
+    if (arrA && arrB)
+        return deepEqualsArray(a, b)
 
-        for (i = length; i-- !== 0;) {
-            if (!Object.hasOwn(b, keys[i]))
-                return false
-        }
+    const dateA = a instanceof Date
+    const dateB = b instanceof Date
 
-        for (i = length; i-- !== 0;) {
-            key = keys[i]
-            if (!deepEquals(a[key], b[key]))
-                return false
-        }
+    if (dateA !== dateB)
+        return false
+    if (dateA && dateB)
+        return a.getTime() === b.getTime()
 
-        return true
-    }
-    return Number.isNaN(a) && Number.isNaN(b)
+    const regexpA = a instanceof RegExp
+    const regexpB = b instanceof RegExp
+
+    if (regexpA !== regexpB)
+        return false
+    if (regexpA && regexpB)
+        return a.toString() === b.toString()
+
+    return deepEqualsObject(a, b)
 }
 
 /**
@@ -95,20 +97,19 @@ export function resolveFieldData(data: Record<string, unknown>, field: string) {
     if (data && Object.keys(data).length && field) {
         if (!field.includes('.')) {
             return data[field]
-        } else {
-            const fields = field.split('.')
-            let value = data
-
-            for (let i = 0, len = fields.length; i < len; ++i) {
-                if (data == null) {
-                    return null
-                }
+        }
+        const fields = field.split('.')
+        let value = data
 
-                value = value[fields[i]] as Record<string, unknown>
+        for (let i = 0, len = fields.length; i < len; ++i) {
+            if (value == null) {
+                return null
             }
 
-            return value
+            value = value[fields[i]] as Record<string, unknown>
         }
+
+        return value
     } else {
         return null
     }
@@ -120,7 +121,7 @@ export function resolveFieldData(data: Record<string, unknown>, field: string) {
  */
 
 export function isFunction(obj: any) {
-    return !!(obj && obj.constructor && obj.call && obj.apply)
+    return !!(obj?.constructor && obj.call && obj.apply)
 }
 
 /**
@@ -151,7 +152,7 @@ export function findIndexInList<Type = unknown>(value: Type, list: Type[]) {
  * @returns {boolean} the index
  */
 export function contains<Type = unknown>(value: Type, list: Type[]) {
-    if (value != null && list && list.length) {
+    if (value != null && list?.length) {
         for (const val of list) {
             if (equals(value, val)) {
                 return true