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

package/src/composables/dropdown/useDropdownVirtualElement.ts

@@ -0,0 +1,54 @@
+import type { Ref } from 'vue'
+import type VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import { onMounted, ref } from 'vue'
+
+export function useDropdownVirtualElement(dropdownEl: Ref<typeof VvDropdown>) {
+    const x = ref(0)
+    const y = ref(0)
+
+    const scrollContainerEl = ref<HTMLElement>()
+    let scrollXDelta = 0
+    let scrollYDelta = 0
+    let lastScrollTop = 0
+    let lastScrollLeft = 0
+    const onScroll = (event: HTMLElementEventMap['scroll']) => {
+        const scrollEl = event.target as HTMLElement
+        scrollXDelta = scrollEl.scrollLeft - lastScrollLeft
+        scrollYDelta = scrollEl.scrollTop - lastScrollTop
+        y.value = y.value - scrollYDelta
+        x.value = x.value - scrollXDelta
+        lastScrollLeft = scrollEl.scrollLeft
+        lastScrollTop = scrollEl.scrollTop
+    }
+    const getBoundingClientRect = () => ({
+        width: 0,
+        height: 0,
+        x: x.value,
+        y: y.value,
+        top: y.value,
+        left: x.value,
+        right: x.value,
+        bottom: y.value,
+    })
+
+    if (getCurrentInstance()) {
+        onMounted(() => {
+            if (dropdownEl.value) {
+                dropdownEl.value.init({
+                    getBoundingClientRect,
+                })
+                scrollContainerEl.value = findScrollContainer(dropdownEl.value.$el)
+                if (scrollContainerEl.value) {
+                    scrollContainerEl.value.addEventListener('scroll', onScroll)
+                }
+            }
+        })
+
+        onUnmounted(() => {
+            if (scrollContainerEl.value) {
+                scrollContainerEl.value.removeEventListener('scroll', onScroll)
+            }
+        })
+    }
+    return { x, y, getBoundingClientRect, onScroll }
+}

package/src/composables/group/useGroupStateInject.ts

@@ -0,0 +1,55 @@
+import type { InjectionKey, Ref } from 'vue'
+
+/**
+ * Injects a group state
+ */
+export function useGroupStateInject<GroupStateType>(
+    groupKey: InjectionKey<GroupStateType>,
+) {
+    // Get group state
+    const group = inject<GroupStateType | undefined>(groupKey, undefined)
+
+    // Check if component is in group
+    const isInGroup = computed(() => group !== undefined)
+
+    /**
+     * Get a group or local property
+     */
+    function getGroupOrLocalRef<
+        TProps extends object,
+        TName extends keyof GroupStateType,
+    >(
+        propName: TName,
+        props: TProps,
+        emit?: (event: string, ...args: unknown[]) => void,
+    ) {
+        const groupPropValue = group?.[propName] as Ref | undefined
+        if (groupPropValue) {
+            return computed({
+                get() {
+                    return groupPropValue.value
+                },
+                set(value: unknown) {
+                    groupPropValue.value = value
+                },
+            }) as GroupStateType[TName]
+        }
+        const propRef = toRef(props, propName as unknown as keyof TProps)
+        return computed({
+            get() {
+                return propRef.value
+            },
+            set(value: unknown) {
+                if (emit) {
+                    emit(`update:${propName as string}`, value)
+                }
+            },
+        }) as GroupStateType[TName]
+    }
+
+    return {
+        group,
+        isInGroup,
+        getGroupOrLocalRef,
+    }
+}

package/src/composables/group/useGroupStateProvide.ts

@@ -0,0 +1,14 @@
+import type { Emitter } from 'mitt'
+import type { InjectionKey, Ref } from 'vue'
+
+/**
+ * Share part of the state of the component with all its children.
+ */
+export function useGroupStateProvide<
+    TGroupState extends Record<
+        string,
+		Ref<unknown> | Emitter<any>
+    >,
+>(key: InjectionKey<TGroupState>, groupState: TGroupState) {
+    provide(key, groupState)
+}

package/src/composables/index.ts

@@ -0,0 +1,5 @@
+export { useAlert } from './alert/useAlert'
+export { useDropdownContextmenu } from './dropdown/useDropdownContextmenu'
+export { useDropdownVirtualElement } from './dropdown/useDropdownVirtualElement'
+export { useBlurhash } from './useBlurhash'
+export { useVirtualScroll } from './useVirtualScroll'

package/src/composables/useBlurhash.ts

@@ -0,0 +1,79 @@
+import type { BlurhashWorkerType } from '@/types/blurhash'
+import { wrap } from 'comlink'
+import Pica from 'pica'
+import BlurhashWorker from '@/workers/blurhash?worker&inline'
+
+let remoteFunction: ReturnType<typeof wrap<BlurhashWorkerType>>
+
+function getRemoteFunction() {
+    if (!remoteFunction) {
+        remoteFunction = wrap<BlurhashWorkerType>(new BlurhashWorker())
+    }
+    return remoteFunction
+}
+
+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.src = src
+    })
+}
+
+function getWidthHeightFromMaxSize(width: number,	height: number,	maxSize: number) {
+    if (width > height) {
+        return {
+            width: maxSize,
+            height: Math.round(maxSize * (height / width)),
+        }
+    }
+    return {
+        width: Math.round(maxSize * (width / height)),
+        height: maxSize,
+    }
+}
+
+async function resizeImage(image: ImageBitmap | HTMLImageElement | HTMLCanvasElement, width: number, height: number) {
+    const resizer = Pica()
+    const canvas = document.createElement('canvas')
+    canvas.width = width
+    canvas.height = height
+    const result = await resizer.resize(image, canvas)
+    return result.getContext('2d')?.getImageData(0, 0, width, height).data
+}
+
+export function useBlurhash() {
+    async function encode(file: File) {
+        const imageUrl = URL.createObjectURL(file)
+        try {
+            const image = await loadImage(imageUrl)
+            if ('width' in image && 'height' in image) {
+                const { width: newWidth, height: newHeight }
+                    = getWidthHeightFromMaxSize(
+                        image.width as number,
+                        image.height as number,
+                        32,
+                    )
+                const imageData = await resizeImage(
+                    image as ImageBitmap,
+                    newWidth,
+                    newHeight,
+                )
+                if (imageData) {
+                    return getRemoteFunction().encode(
+                        imageData,
+                        newWidth,
+                        newHeight,
+                        4,
+                        4,
+                    )
+                }
+            }
+        } finally {
+            URL.revokeObjectURL(imageUrl)
+        }
+    }
+
+    return { encode, decode: (...args: Parameters<BlurhashWorkerType['decode']>) => getRemoteFunction().decode(...args), loadImage }
+}

package/src/composables/useComponentFocus.ts

@@ -0,0 +1,16 @@
+import type { MaybeElement, MaybeElementRef } from '@vueuse/core'
+
+export function useComponentFocus(
+    inputTemplateRef: MaybeElementRef<MaybeElement>,
+    emit: ((name: 'blur', ...args: any[]) => void) & ((name: 'focus', ...args: any[]) => void) & ((name: any, ...args: any[]) => void),
+) {
+    const { focused } = useFocus(inputTemplateRef)
+
+    watch(focused, (newValue) => {
+        emit(newValue ? 'focus' : 'blur', unref(inputTemplateRef))
+    })
+
+    return {
+        focused,
+    }
+}

package/src/composables/useComponentIcon.ts

@@ -0,0 +1,42 @@
+import type { Ref } from 'vue'
+import type { VvIconProps } from '../components/VvIcon'
+import { Position, Side } from '../constants'
+
+export function useComponentIcon(
+    icon?: Ref<string | VvIconProps | undefined>,
+    iconPosition?: Ref<string | undefined>,
+) {
+    const hasIcon = computed(() => {
+        if (typeof icon?.value === 'string') {
+            return { name: icon?.value }
+        }
+        return icon?.value
+    })
+    const hasIconBefore = computed(() =>
+        iconPosition?.value === Position.before ? hasIcon.value : undefined,
+    )
+    const hasIconAfter = computed(() =>
+        iconPosition?.value === Position.after ? hasIcon.value : undefined,
+    )
+    const hasIconLeft = computed(() =>
+        iconPosition?.value === Side.left ? hasIcon.value : undefined,
+    )
+    const hasIconRight = computed(() =>
+        iconPosition?.value === Side.right ? hasIcon.value : undefined,
+    )
+    const hasIconTop = computed(() =>
+        iconPosition?.value === Side.top ? hasIcon.value : undefined,
+    )
+    const hasIconBottom = computed(() =>
+        iconPosition?.value === Side.bottom ? hasIcon.value : undefined,
+    )
+    return {
+        hasIcon,
+        hasIconLeft,
+        hasIconRight,
+        hasIconTop,
+        hasIconBottom,
+        hasIconBefore,
+        hasIconAfter,
+    }
+}

package/src/composables/useDebouncedInput.ts

@@ -0,0 +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
+    } = {},
+): Ref {
+    let timeout: NodeJS.Timeout
+
+    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)
+        },
+    })
+}

package/src/composables/useDefaults.ts

@@ -0,0 +1,89 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+
+type VueProp
+    = | StringConstructor
+        | NumberConstructor
+        | ObjectConstructor
+        | FunctionConstructor
+        | SymbolConstructor
+        | ArrayConstructor
+        | BooleanConstructor
+        | PropType<unknown>
+
+export function useDefaults<Definition>(
+    componentName: string,
+    propsDefinition: Definition,
+    props: Readonly<ExtractPropTypes<Definition>>,
+) {
+    const volver = useVolver()
+
+    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>
+        >
+    })
+}

package/src/composables/useModifiers.ts

@@ -0,0 +1,36 @@
+import type { Ref } from 'vue'
+
+export function useModifiers(
+    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
+                    }
+                })
+            }
+        }
+
+        // others modifiers
+        if (others) {
+            Object.keys(others.value).forEach((key) => {
+                toReturn[`${prefix}--${key}`] = unref(others.value[key])
+            })
+        }
+
+        return toReturn
+    })
+}

package/src/composables/useOptions.ts

@@ -0,0 +1,56 @@
+import type { Option } from '../types/generic'
+import { getProperty } from 'dot-prop'
+
+export function useOptions(props: any) {
+    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 ? getProperty(option, 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 ? getProperty(option, 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 ? Boolean(getProperty(option, 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,77 @@
+import type { Ref } from 'vue'
+import { isRef, ref, unref, watch } from 'vue'
+import { StorageType } from '@/constants'
+
+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
+    onMounted(() => {
+        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,
+                        )
+                        if (storageValue.value) {
+                            localValue.value = storageValue.value
+                        }
+                        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)
+                    }
+                }
+            })
+        }
+    })
+
+    watch(localValue, (newValue) => {
+        if (storageValue) {
+            storageValue.value = newValue
+        }
+    }, {
+        deep: true,
+        immediate: true,
+    })
+
+    return localValue
+}

package/src/composables/useTextCount.ts

@@ -0,0 +1,54 @@
+import type { Ref } from 'vue'
+
+export function useTextCount(
+    text: Ref<string | undefined | null> | string,
+    options?: {
+        mode?: string | boolean
+        upperLimit?: number
+        lowerLimit?: number
+    },
+) {
+    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) {
+            return options.upperLimit - length.value
+        }
+        return 0
+    })
+
+    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 === 'countdown') {
+            if (gap.value === 0) {
+                return undefined
+            }
+            return gap.value
+        }
+
+        return length.value
+    })
+
+    return {
+        length,
+        gap,
+        formatted,
+    }
+}

package/src/composables/useUniqueId.ts

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