@volverjs/ui-vue 0.0.10-beta.60 → 0.0.10-beta.61

package/src/composables/alert/useAlert.ts

@@ -1,106 +0,0 @@
-import type { Alert } from '@/types/alert'
-import {
-    DEFAULT_ALERT_AUTO_CLOSE,
-    DEFAULT_ALERT_DISMISSABLE,
-    DEFAULT_ALERT_GROUP,
-    DEFAULT_ALERT_INFO_ICON,
-    DEFAULT_ALERT_MODIFIERS,
-    DefaultAlertIconMap,
-} from '@/constants'
-
-type AlertInGroup = Alert & { timestamp: number, group: string }
-
-const groups = reactive(
-    new Map<string, Map<string, AlertInGroup>>([
-        [DEFAULT_ALERT_GROUP, new Map<string, AlertInGroup>()],
-    ]),
-)
-
-/**
- * @description Composable to access alert groups, alerts and functions to add, remove and get alerts by group.
- * @example
- *  const { groups, alerts, addAlert, removeAlert, getAlerts } = useAlert()
- *  addAlert({
- *      title: 'Success!',
- *      modifiers: 'success',
- *  })
- *
- *  `<vv-alert-group :items="alerts" :onClose="removeAlert" />`
- *
- *  @returns  {
- *      alerts: ComputedRef<Alert[]> reactive list of alerts default group,
- *      groups: ReactiveRef<Map<string, Map<string, Alert>>>,
- *      addAlert: Function to add alert,
- *      removeAlert: Function to remove alert,
- *      getAlerts: Function to get alerts by group
- *  } the reactive list of alerts, groups, addAlert, removeAlert and getAlerts functions
- */
-export function useAlert() {
-    const addAlert = (
-        {
-            id = crypto.randomUUID(),
-            group = DEFAULT_ALERT_GROUP,
-            title,
-            icon = DEFAULT_ALERT_INFO_ICON,
-            content,
-            footer,
-            modifiers = DEFAULT_ALERT_MODIFIERS,
-            dismissable = DEFAULT_ALERT_DISMISSABLE,
-            autoClose = DEFAULT_ALERT_AUTO_CLOSE,
-            timestamp = Date.now(),
-        } = {} as Partial<AlertInGroup>,
-    ) => {
-        if (!groups.has(group)) {
-            groups.set(group, new Map<string, AlertInGroup>())
-        }
-        const groupMap = groups.get(group)
-        const normalizedModifiers
-			= typeof modifiers === 'string' ? modifiers.split(' ') : modifiers
-
-        if (!icon) {
-            const alertModifier = normalizedModifiers.find(modifier =>
-                DefaultAlertIconMap.has(modifier),
-            )
-
-            if (alertModifier) {
-                icon = DefaultAlertIconMap.get(alertModifier) as string
-            }
-        }
-        groupMap?.set(id.toString(), {
-            id,
-            group,
-            title,
-            icon,
-            content,
-            footer,
-            modifiers,
-            dismissable,
-            autoClose,
-            timestamp,
-        })
-    }
-
-    const removeAlert = (id: string | number, group = DEFAULT_ALERT_GROUP) => {
-        const groupMap = groups.get(group)
-        groupMap?.delete(id.toString())
-    }
-
-    const getAlerts = (group = DEFAULT_ALERT_GROUP) => {
-        return computed(() => {
-            const groupMap = groups.get(group)
-            return groupMap && groupMap instanceof Map
-                ? Array.from(groupMap?.values()).sort(
-                        (a, b) => a.timestamp - b.timestamp,
-                    )
-                : []
-        })
-    }
-
-    return {
-        groups,
-        alerts: getAlerts(),
-        addAlert,
-        removeAlert,
-        getAlerts,
-    }
-}

package/src/composables/alert/useAlertProvide.ts

@@ -1,23 +0,0 @@
-import type { Ref } from 'vue'
-import { INJECTION_KEY_ALERT_GROUP } from '@/constants'
-import mitt from 'mitt'
-
-/**
- * Share the alert group name with all its children.
- * @param {Ref<string | undefined>} name the alert group name
- */
-export function useAlertProvideGroup({
-    name,
-}: {
-    name: Ref<string | undefined>
-}) {
-    const bus = mitt<{
-        close: string
-    }>()
-    provide(INJECTION_KEY_ALERT_GROUP, {
-        name,
-        bus,
-    })
-
-    return bus
-}

package/src/composables/dropdown/useDropdownContextmenu.ts

@@ -1,23 +0,0 @@
-import type VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
-import type { Ref } from 'vue'
-import { computed, getCurrentInstance, onMounted, onUnmounted, unref } from 'vue'
-
-export function useDropdownContextmenu(dropdownEl: Ref<typeof VvDropdown>, targetEl?: Ref<HTMLElement> | HTMLElement) {
-    const { x, y, getBoundingClientRect, onScroll } = useDropdownVirtualElement(dropdownEl)
-    const onContextmenu = (event: MouseEvent) => {
-        x.value = event.clientX
-        y.value = event.clientY
-        event.preventDefault()
-        dropdownEl.value.show()
-    }
-    const target = computed(() => unref(targetEl))
-    if (target && getCurrentInstance()) {
-        onMounted(() => {
-            target.value?.addEventListener('contextmenu', onContextmenu, false)
-        })
-        onUnmounted(() => {
-            target.value?.removeEventListener('contextmenu', onContextmenu)
-        })
-    }
-    return { x, y, getBoundingClientRect, onContextmenu, onScroll }
-}

package/src/composables/dropdown/useDropdownInject.ts

@@ -1,26 +0,0 @@
-import {
-    INJECTION_KEY_DROPDOWN_ACTION,
-    INJECTION_KEY_DROPDOWN_ITEM,
-    INJECTION_KEY_DROPDOWN_TRIGGER,
-} from '../../constants'
-
-/**
- * Injects dropdown reference and the event bus
- */
-export function useInjectedDropdownTrigger() {
-    return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {})
-}
-
-/**
- * Injects dropdown item role
- */
-export function useInjectedDropdownItem() {
-    return inject(INJECTION_KEY_DROPDOWN_ITEM, {})
-}
-
-/**
- * Injects dropdown action role
- */
-export function useInjectedDropdownAction() {
-    return inject(INJECTION_KEY_DROPDOWN_ACTION, {})
-}

package/src/composables/dropdown/useDropdownProvide.ts

@@ -1,96 +0,0 @@
-import type { Ref } from 'vue'
-import type { DropdownItemState } from '../../constants'
-import mitt from 'mitt'
-import { Fragment } from 'vue'
-import {
-    ActionRoles,
-    DropdownItemRole,
-
-    DropdownRole,
-    INJECTION_KEY_DROPDOWN_ACTION,
-    INJECTION_KEY_DROPDOWN_ITEM,
-    INJECTION_KEY_DROPDOWN_TRIGGER,
-} from '../../constants'
-
-/**
- * Share the dropdown reference and the event bus with all its children.
- * @param {Ref<HTMLElement | null>} reference the dropdown reference
- */
-export function useDropdownProvideTrigger({
-    reference,
-    id,
-    expanded,
-    aria,
-}: {
-    reference: Ref<HTMLElement | null | undefined>
-    id: Ref<string | number>
-    expanded: Ref<boolean>
-    aria: Ref<{
-        'aria-controls': string
-        'aria-haspopup': boolean
-        'aria-expanded': boolean
-    }>
-}) {
-    const bus = mitt<{
-        click: Event
-        mouseover: Event
-        mouseleave: Event
-    }>()
-    const component = defineComponent({
-        name: 'VvDropdownTriggerProvider',
-        setup() {
-            provide(INJECTION_KEY_DROPDOWN_TRIGGER, {
-                reference,
-                id,
-                expanded,
-                aria,
-                bus,
-            })
-        },
-        render() {
-            return h(Fragment, {}, this.$slots.default?.())
-        },
-    })
-
-    return {
-        bus,
-        component,
-    }
-}
-
-/**
- * Share the dropdown item role with all its children.
- * @param {Ref<string>} role the dropdown item role
- */
-export function useDropdownProvideItem({
-    role,
-    ...others
-}: Omit<DropdownItemState, 'role'> & {
-    role: Ref<`${DropdownRole}`>
-}) {
-    const itemRole = computed(() =>
-        role.value === DropdownRole.listbox
-            ? DropdownItemRole.option
-            : DropdownItemRole.presentation,
-    )
-    provide(INJECTION_KEY_DROPDOWN_ITEM, {
-        role: itemRole,
-        ...others,
-    })
-    return { itemRole }
-}
-
-/**
- * Share the dropdown item role with all its children.
- * @param {Ref<string>} role the dropdown item role
- */
-export function useDropdownProvideAction({
-    expanded,
-}: {
-    expanded?: Ref<boolean>
-}) {
-    provide(INJECTION_KEY_DROPDOWN_ACTION, {
-        role: ref(ActionRoles.menuitem),
-        expanded,
-    })
-}

package/src/composables/dropdown/useDropdownVirtualElement.ts

@@ -1,54 +0,0 @@
-import type VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
-import type { Ref } from '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

@@ -1,55 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

package/src/composables/useBlurhash.ts

@@ -1,68 +0,0 @@
-import type { BlurhashWorkerType } from '@/types/blurhash'
-import BlurhashWorker from '@/workers/blurhash?worker&inline'
-import { wrap } from 'comlink'
-import Pica from 'pica'
-
-const remoteFunction = wrap<BlurhashWorkerType>(new BlurhashWorker())
-
-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 = new 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)
-        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 remoteFunction.encode(
-                    imageData,
-                    newWidth,
-                    newHeight,
-                    4,
-                    4,
-                )
-            }
-        }
-    }
-
-    return { encode, decode: remoteFunction.decode, loadImage }
-}

package/src/composables/useComponentFocus.ts

@@ -1,16 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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>
-        >
-    })
-}