@volverjs/ui-vue 0.0.13-beta.9 → 0.0.13

package/src/types/blurhash.ts

@@ -0,0 +1,21 @@
+class ValidationError extends Error {}
+export type BlurhashWorkerType = {
+    encode: (
+        pixels: Uint8ClampedArray,
+        width: number,
+        height: number,
+        componentX: number,
+        componentY: number,
+    ) => string
+    decode: (
+        blurhash: string,
+        width: number,
+        height: number,
+        punch?: number,
+    ) => Uint8ClampedArray
+    isBlurhashValid: (blurhash: string) => {
+        result: boolean
+        errorReason?: string
+    }
+    ValidationError: ValidationError
+}

package/src/types/floating-ui.ts

@@ -0,0 +1,18 @@
+import type { autoPlacement, flip, offset, shift, size } from '@floating-ui/vue'
+
+export type { MiddlewareState } from '@floating-ui/core'
+export type { Middleware } from '@floating-ui/vue'
+
+/**
+ * Drop the `Derivable` (callback) variant from a floating-ui option type.
+ * The components only ever pass plain option objects, and keeping the
+ * callback variant leaks non-portable floating-ui internals
+ * (`Derivable`, `MiddlewareState`) into the emitted declaration files.
+ */
+type NonDerivable<T> = Exclude<T, (...args: never[]) => unknown>
+
+export type AutoPlacementOptions = NonDerivable<Parameters<typeof autoPlacement>[0]>
+export type FlipOptions = NonDerivable<Parameters<typeof flip>[0]>
+export type ShiftOptions = NonDerivable<Parameters<typeof shift>[0]>
+export type OffsetOptions = NonDerivable<Parameters<typeof offset>[0]>
+export type SizeOptions = NonDerivable<Parameters<typeof size>[0]>

package/src/types/generic.ts

@@ -0,0 +1,5 @@
+export type Nullable<T> = T | null | undefined
+
+export type Option = Record<string | number | symbol, any> & {
+    options?: Option[]
+}

package/src/types/group.ts

@@ -0,0 +1,52 @@
+import type { Emitter } from 'mitt'
+import type { Ref } from 'vue'
+
+/**
+ * State shared in a group of inputs
+ */
+export type InputGroupState = {
+    modelValue: Ref<unknown>
+    readonly: Ref<boolean>
+    disabled: Ref<boolean>
+    valid: Ref<boolean>
+    invalid: Ref<boolean>
+}
+
+/**
+ * State shared in a group of buttons
+ */
+export type ButtonGroupState = {
+    modelValue: Ref<
+		string | number | boolean | (string | number | boolean)[] | undefined
+    >
+    disabled: Ref<boolean>
+    toggle: Ref<boolean>
+    multiple: Ref<boolean>
+    unselectable: Ref<boolean>
+    modifiers: Ref<string | string[] | undefined>
+}
+
+/**
+ * State shared in a group of accordions
+ */
+export type AccordionGroupBusEvents = {
+    toggle: { name: string, value: boolean }
+    register: { name: string }
+    unregister: { name: string }
+    expand: { name?: string | string[] }
+    collapse: { name?: string | string[] }
+}
+export type AccordionGroupState = {
+    disabled: Ref<boolean>
+    modifiers: Ref<string[] | string | undefined>
+    bus: Emitter<AccordionGroupBusEvents>
+}
+
+/**
+ * State shared in a group of alerts
+ */
+export type AlertGroupBusEvents = { close: string }
+export type AlertGroupState = {
+    name?: Ref<string | undefined>
+    bus?: Emitter<AlertGroupBusEvents>
+}

package/src/types/index.ts

@@ -0,0 +1,7 @@
+export * from './alert'
+export * from './blurhash'
+export * from './floating-ui'
+export * from './generic'
+export * from './group'
+export * from './input-file'
+export * from './nav'

package/src/types/input-file.ts

@@ -0,0 +1,10 @@
+export type UploadedFile<Source = unknown>
+    = {
+        name: string
+        size: number
+        type: string
+        url?: string
+        thumbnailUrl?: string
+        lastModified?: number
+        source?: Source
+    }

package/src/types/nav.ts

@@ -0,0 +1,18 @@
+export type NavItem = {
+    label: string
+    ariaLabel?: string
+    title?: string
+    to?: string | Record<string, unknown>
+    href?: string
+    target?: string
+    rel?: string
+    disabled?: boolean
+    current?: boolean
+    class?: string | string[]
+    on?: Record<'click' | string, () => void>
+    data?: Record<string, unknown>
+}
+
+export type NavItemTab = NavItem & {
+    tab?: string
+}

package/src/utils/DateUtilities.ts

@@ -0,0 +1,120 @@
+/**
+ * Pads a number with leading zero if less than 10
+ * @param num - Number to pad
+ * @returns Padded number as string
+ * @example
+ * padTwoDigits(5) // '05'
+ */
+const padTwoDigits = (num: number) => num.toString().padStart(2, '0')
+
+/**
+ * Checks if a string is a valid ISO date string
+ * @param dateString
+ * @returns True if valid ISO date string
+ * @example
+ * isDateIsoString('2021-12-31T23:59:59') // 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})?$/
+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
+    }
+    const d = new Date(dateString)
+    return !Number.isNaN(d.getTime()) && d.toISOString() === dateString
+}
+
+/**
+ * Converts a Date object to a string value for input element
+ * @param date - Date object or string
+ * @param typeOfInput - Type of HTML input element
+ * @param withSeconds - Include seconds in time value
+ * @returns String value for input element
+ * @example
+ * getInputValueFromDate(new Date(), 'date') // '2021-12-31'
+ * getInputValueFromDate(new Date(), 'time') // '23:59'
+ * getInputValueFromDate(new Date(), 'datetime-local') // '2021-12-31T23:59'
+ */
+export function getInputValueFromDate(date: Date | string, typeOfInput: 'date' | 'time' | 'month' | 'datetime-local' = 'date', withSeconds?: boolean) {
+    if (typeof date === 'string') {
+        if (!isDateIsoString(date)) {
+            return ''
+        }
+    }
+    const currentDate = new Date(date)
+    if (Number.isNaN(currentDate.getTime())) {
+        return ''
+    }
+    let toReturn = `${currentDate.getFullYear()}-${padTwoDigits(currentDate.getMonth() + 1)}`
+    if (typeOfInput === 'month') {
+        return toReturn
+    }
+    toReturn += `-${padTwoDigits(currentDate.getDate())}`
+    if (typeOfInput === 'date') {
+        return toReturn
+    }
+    const time = withSeconds
+        ? `${padTwoDigits(currentDate.getHours())}:${padTwoDigits(currentDate.getMinutes())}:${padTwoDigits(currentDate.getSeconds())}`
+        : `${padTwoDigits(currentDate.getHours())}:${padTwoDigits(currentDate.getMinutes())}`
+    if (typeOfInput === 'time') {
+        return time
+    }
+    return `${toReturn}T${time}`
+}
+
+/**
+ * Converts an input string to a Date object based on input type
+ * @param value - String value from input element
+ * @param typeOfInput - Type of HTML input element
+ * @returns Date object or null if invalid
+ * @throws Error for invalid input format
+ * @example
+ * getDateFromInputValue('2021-12-31', 'date') // Date('2021-12-31T00:00:00')
+ * getDateFromInputValue('23:59', 'time') // Date('2021-12-31T23:59:00')
+ */
+const DATE_REGEX = /^\d{4}-\d{2}-\d{2}$/
+const MONTH_REGEX = /^\d{4}-\d{2}$/
+const TIME_REGEX = /^(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d)?$/
+const DATETIME_REGEX = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2})?$/
+export function getDateFromInputValue(value: string, typeOfInput: 'date' | 'time' | 'month' | 'datetime-local' = 'date') {
+    if (!value?.trim()) {
+        return null
+    }
+
+    const today = new Date()
+    const currentYear = today.getFullYear()
+    const currentMonth = today.getMonth()
+    const currentDate = today.getDate()
+
+    if (typeOfInput === 'date') {
+        if (!DATE_REGEX.test(value)) {
+            throw new Error('Invalid date format. Expected: YYYY-MM-DD')
+        }
+        return new Date(`${value}T00:00:00`)
+    }
+    if (typeOfInput === 'month') {
+        if (!MONTH_REGEX.test(value)) {
+            throw new Error('Invalid month format. Expected: YYYY-MM')
+        }
+        return new Date(`${value}-01T00:00:00`)
+    }
+    if (typeOfInput === 'time') {
+        if (!TIME_REGEX.test(value)) {
+            throw new Error('Invalid time format. Expected: HH:mm or HH:mm:ss')
+        }
+        if (value.length === 8) {
+            return new Date(`${currentYear}-${padTwoDigits(currentMonth + 1)}-${padTwoDigits(currentDate)}T${value}`)
+        }
+        return new Date(`${currentYear}-${padTwoDigits(currentMonth + 1)}-${padTwoDigits(currentDate)}T${value}:00`)
+    }
+    if (!DATETIME_REGEX.test(value)) {
+        throw new Error('Invalid datetime format. Expected: YYYY-MM-DDThh:mm or YYYY-MM-DDThh:mm:ss')
+    }
+    if (value.length === 16) {
+        return new Date(`${value}:00`)
+    }
+    return new Date(`${value}`)
+}

package/src/utils/DomUtilities.ts

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

package/src/utils/FileUtilities.ts

@@ -0,0 +1,104 @@
+function acceptedMimeTypes(acceptValue?: string) {
+    // Arrays to store MIME types and accepted extensions
+    const mimeTypes: string[] = []
+    const extensions: string[] = []
+    const wildcards: string[] = []
+
+    // Parse restrictions from the accept attribute
+    const acceptedTypes: string[] | undefined = acceptValue?.split(',').map(type => type.trim().toLowerCase())
+
+    if (acceptedTypes?.length) {
+    // Categorize restrictions
+        acceptedTypes.forEach((type: string) => {
+            if (type.startsWith('.')) {
+            // It's an extension (.jpg, .png, etc.)
+                extensions.push(type)
+            } else if (type.includes('/*')) {
+            // It's a MIME type wildcard (image/*, video/*, etc.)
+                wildcards.push(type.replace('/*', ''))
+            } else {
+            // It's a specific MIME type (image/jpeg, application/pdf, etc.)
+                mimeTypes.push(type)
+            }
+        })
+    }
+
+    return {
+        mimeTypes,
+        extensions,
+        wildcards,
+    }
+}
+
+/**
+ * Validates if all files in a FileList meet the restrictions of the accept attribute
+ * @param {FileList} fileList - The FileList object to validate
+ * @param {string} [acceptValue] - The value of the accept attribute (e.g. ".jpg,.png,image/*")
+ * @returns {boolean} - true if all files are valid, false otherwise
+ */
+export function validateFileList(fileList: FileList, acceptValue?: string): boolean {
+    // If there are no restrictions, accept any file
+    if (!acceptValue || acceptValue.trim() === '' || acceptValue === '*') {
+        return true
+    }
+
+    // Arrays to store MIME types and accepted extensions
+    const { mimeTypes, extensions, wildcards } = acceptedMimeTypes(acceptValue)
+
+    // Check each file
+    for (const file of fileList) {
+        const fileType = file.type.toLowerCase()
+        const fileExtension = `.${file.name.split('.').pop()?.toLowerCase()}`
+
+        // Check MIME type
+        const mimeMatches: boolean = mimeTypes.includes(fileType)
+
+        // Check wildcards
+        const wildcardMatches: boolean = wildcards.some(wildcard => fileType.startsWith(`${wildcard}/`))
+
+        // Check extension
+        const extensionMatches: boolean = extensions.some(ext => fileExtension === ext.toLowerCase())
+
+        // If the file doesn't match any restrictions, the FileList is not valid
+        if (!mimeMatches && !wildcardMatches && !extensionMatches) {
+            return false
+        }
+    }
+
+    // All files meet the restrictions
+    return true
+}
+
+/**
+ * Filters a FileList and returns only the files that match the accept attribute criteria
+ * @param {FileList} fileList - The FileList object to filter
+ * @param {string} [acceptValue] - The value of the accept attribute (e.g. ".jpg,.png,image/*")
+ * @returns {File[]} - Array of files that match the accept criteria
+ */
+export function filterFileList(fileList: FileList, acceptValue?: string): File[] {
+    // If there are no restrictions, return all files
+    if (!acceptValue || acceptValue.trim() === '' || acceptValue === '*') {
+        return [...fileList]
+    }
+
+    // Arrays to store MIME types and accepted extensions
+    const { mimeTypes, extensions, wildcards } = acceptedMimeTypes(acceptValue)
+
+    // Filter files based on the criteria
+    return [...fileList].filter((file) => {
+        const fileType: string = file.type.toLowerCase()
+        const fileExtension: string = `.${file.name.split('.').pop()?.toLowerCase()}`
+
+        // Check MIME type
+        const mimeMatches: boolean = mimeTypes.includes(fileType)
+
+        // Check wildcards
+        const wildcardMatches: boolean = wildcards.some(wildcard => fileType.startsWith(`${wildcard}/`))
+
+        // Check extension
+        const extensionMatches: boolean = extensions.some(ext => fileExtension === ext.toLowerCase())
+
+        // Return true if the file matches any of the criteria
+        return mimeMatches || wildcardMatches || extensionMatches
+    })
+}

package/src/utils/ObjectUtilities.ts

@@ -0,0 +1,289 @@
+import type { Ref } from 'vue'
+
+/**
+ * Compare objects, primitives, array, dates, regexp
+ * @param {any} obj1 first literal
+ * @param {any} obj2 second literal
+ * @param {string} field optional field of obj1 and obj2 (also nested dotted field "prop1.prop12")
+ * @returns {boolean}
+ */
+
+export function equals(obj1: any, obj2: any, field?: string) {
+    if (field) {
+        return resolveFieldData(obj1, field) === resolveFieldData(obj2, field)
+    }
+    return deepEquals(obj1, obj2)
+}
+
+/**
+ * Compare objects, primitives, array, dates, regexp
+ * @param {any} a first literal
+ * @param {any} b second literal
+ * @returns {boolean}
+ */
+
+export function deepEquals(a: any, b: any) {
+    if (a === b)
+        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
+            }
+
+            return true
+        }
+
+        if (arrA !== arrB)
+            return false
+
+        const dateA = a instanceof Date
+        const dateB = b instanceof Date
+
+        if (dateA !== dateB)
+            return false
+        if (dateA && dateB)
+            return a.getTime() === b.getTime()
+
+        const regexpA = a instanceof RegExp
+        const regexpB = b instanceof RegExp
+
+        if (regexpA !== regexpB)
+            return false
+        if (regexpA && regexpB)
+            return a.toString() === b.toString()
+
+        const keys = Object.keys(a)
+
+        length = keys.length
+
+        if (length !== Object.keys(b).length)
+            return false
+
+        for (i = length; i-- !== 0;) {
+            if (!Object.hasOwn(b, keys[i]))
+                return false
+        }
+
+        for (i = length; i-- !== 0;) {
+            key = keys[i]
+            if (!deepEquals(a[key], b[key]))
+                return false
+        }
+
+        return true
+    }
+    return Number.isNaN(a) && Number.isNaN(b)
+}
+
+/**
+ * Find and return field or nested field from object (also nested dotted field)
+ * @param {object} data object that contains the field
+ * @param {string} field ex: "prop1" or "prop1.prop12"
+ * @returns {boolean} the field value
+ */
+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
+                }
+
+                value = value[fields[i]] as Record<string, unknown>
+            }
+
+            return value
+        }
+    } else {
+        return null
+    }
+}
+
+/**
+ * @param {any} obj data to check
+ * @returns {boolean}
+ */
+
+export function isFunction(obj: any) {
+    return !!(obj && obj.constructor && obj.call && obj.apply)
+}
+
+/**
+ * Return the index of value in list array
+ * @param {any} value the element to find
+ * @param {Array<any>} list array list
+ * @returns {number} the index
+ */
+export function findIndexInList<Type = unknown>(value: Type, list: Type[]) {
+    let index = -1
+
+    if (list) {
+        for (let i = 0; i < list.length; i++) {
+            if (equals(list[i], value)) {
+                index = i
+                break
+            }
+        }
+    }
+
+    return index
+}
+
+/**
+ * Return the index of value in list array
+ * @param {any} value the element to find
+ * @param {Array<any>} list array list
+ * @returns {boolean} the index
+ */
+export function contains<Type = unknown>(value: Type, list: Type[]) {
+    if (value != null && list && list.length) {
+        for (const val of list) {
+            if (equals(value, val)) {
+                return true
+            }
+        }
+    }
+    return false
+}
+
+/**
+ * @param {boolean | string | null | undefined | number | Array<unknown> | object} value element to checj
+ * @returns {boolean} true if value is empty
+ */
+export function isEmpty(
+    value:
+        | boolean
+        | string
+        | null
+        | undefined
+        | number
+        | unknown[]
+        | object
+        | Ref,
+) {
+    return (value =>
+        value === null
+        || value === undefined
+        || value === ''
+        || (Array.isArray(value) && value.length === 0)
+        || (!(value instanceof Date)
+            && typeof value === 'object'
+            && Object.keys(value).length === 0))(unref(value))
+}
+
+/**
+ * Return the object entries that match the predicate passed
+ * @param {object} value
+ * @param {Function} predicate
+ * @returns {object} the object entries
+ */
+export function pickBy(
+    value: Record<string, unknown>,
+    predicate: (k: string) => boolean,
+) {
+    return Object.fromEntries(
+        Object.entries(value).filter(([key]) => predicate(key)),
+    )
+}
+
+/**
+ * Remove a value from an Array
+ * @param {any} value the element to remove
+ * @param {Array<any>} list
+ * @returns {Array<any>} the list without the value
+ */
+export function removeFromList<Type = unknown>(value: Type, list: Type[]) {
+    // check off
+    const indexElToRemove = findIndexInList(value, list)
+    if (indexElToRemove > -1) {
+        return list.filter((el, elIndex) => elIndex !== indexElToRemove)
+    } else {
+        return list
+    }
+}
+
+/**
+ * @param {any} value
+ * @returns {boolean} true if value is a string
+ */
+export function isString(value: unknown) {
+    return typeof value === 'string'
+}
+
+/**
+ * Convert props definition to object with "prop" as key and default as value
+ * @param {ComponentObjectPropsOptions} props vue component props
+ * @returns {object}
+ */
+
+export function propsToObject(props: any) {
+    return Object.keys(props).reduce(
+        (accumulator: Record<string, unknown>, key: string) => {
+            if (key === 'modelValue') {
+                return accumulator
+            }
+            if ('default' in props[key]) {
+                accumulator[key]
+                    = typeof props[key].default === 'function'
+                        ? props[key].default()
+                        : props[key].default
+                return accumulator
+            }
+            if (isFunction(props[key])) {
+                // case prop1: String
+                accumulator[key] = props[key]()
+                return accumulator
+            }
+            if (Array.isArray(props[key])) {
+                // case prop1: [ String, Array ]
+                accumulator[key] = props[key][0]()
+                return accumulator
+            }
+            // case prop1: { type: ... }
+            if (Array.isArray(props[key].type)) {
+                accumulator[key] = props[key]?.type[0]()
+                return accumulator
+            }
+            // case prop1: { type: String }
+            accumulator[key] = props[key]?.type()
+            return accumulator
+        },
+        {} as Record<string, unknown>,
+    )
+}
+
+/**
+ * Filter array objects by filter array
+ * @param {object[]} list the listo to filter
+ * @param {object[] | string[]} filter the filter list, array of string or array of object
+ * @param {string} key
+ * @return {object[]}
+ */
+export function filterArray<T = Record<string, unknown>>(
+    list: T[],
+    filter: T[] | string[],
+    key: string,
+): T[] {
+    return list.filter((el) => {
+        return filter.some((f) => {
+            return typeof f === 'string'
+                ? el[key as keyof typeof el] === f
+                : equals(el[key as keyof typeof el], f[key as keyof typeof f])
+        })
+    })
+}

package/src/workers/blurhash.ts

@@ -0,0 +1,9 @@
+import { decode, encode, isBlurhashValid, ValidationError } from 'blurhash'
+import { expose } from 'comlink'
+
+expose({
+    ValidationError,
+    encode,
+    decode,
+    isBlurhashValid,
+})