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

package/src/composables/alert/useAlert.ts

@@ -1,17 +1,19 @@
+import type { Alert } from '@/types/alert'
 import {
-	DEFAULT_ALERT_AUTO_CLOSE,
-	DEFAULT_ALERT_DISMISSABLE,
-	DEFAULT_ALERT_GROUP,
-	DEFAULT_ALERT_MODIFIERS,
-	DEFAULT_ALERT_INFO_ICON,
-	DefaultAlertIconMap,
+    DEFAULT_ALERT_AUTO_CLOSE,
+    DEFAULT_ALERT_DISMISSABLE,
+    DEFAULT_ALERT_GROUP,
+    DEFAULT_ALERT_INFO_ICON,
+    DEFAULT_ALERT_MODIFIERS,
+    DefaultAlertIconMap,
 } from '@/constants'
-import type { Alert, AlertModifiers } from '@/types/alert'
+
+type AlertInGroup = Alert & { timestamp: number, group: string }
 
 const groups = reactive(
-	new Map<string, Map<string, Alert>>([
-		[DEFAULT_ALERT_GROUP, new Map<string, Alert>()],
-	]),
+    new Map<string, Map<string, AlertInGroup>>([
+        [DEFAULT_ALERT_GROUP, new Map<string, AlertInGroup>()],
+    ]),
 )
 
 /**
@@ -31,73 +33,74 @@ const groups = reactive(
  *      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 const 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,
-		} = {} as Partial<Alert>,
-	) => {
-		if (!groups.has(group)) {
-			groups.set(group, new Map<string, Alert>())
-		}
-		const groupMap = groups.get(group)
-		const normalizedModifiers =
-			typeof modifiers === 'string' ? modifiers.split(' ') : modifiers
+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 as AlertModifiers),
-			) as AlertModifiers | undefined
+        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: Date.now(),
-		})
-	}
+            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 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,
-				  )
-				: []
-		})
-	}
+    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,
-	}
+    return {
+        groups,
+        alerts: getAlerts(),
+        addAlert,
+        removeAlert,
+        getAlerts,
+    }
 }

package/src/composables/alert/{useProvideAlert.ts → useAlertProvide.ts}

@@ -1,23 +1,23 @@
 import type { Ref } from 'vue'
-import mitt from 'mitt'
 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 useProvideAlertGroup({
-	name,
+export function useAlertProvideGroup({
+    name,
 }: {
-	name: Ref<string | undefined>
+    name: Ref<string | undefined>
 }) {
-	const bus = mitt<{
-		close: string
-	}>()
-	provide(INJECTION_KEY_ALERT_GROUP, {
-		name,
-		bus,
-	})
+    const bus = mitt<{
+        close: string
+    }>()
+    provide(INJECTION_KEY_ALERT_GROUP, {
+        name,
+        bus,
+    })
 
-	return bus
+    return bus
 }

package/src/composables/dropdown/useDropdownContextmenu.ts

@@ -0,0 +1,22 @@
+import type VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import { computed, getCurrentInstance, onMounted, onUnmounted, type Ref, 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/{useInjectDropdown.ts → useDropdownInject.ts}

@@ -1,26 +1,26 @@
 import {
-	INJECTION_KEY_DROPDOWN_TRIGGER,
-	INJECTION_KEY_DROPDOWN_ACTION,
-	INJECTION_KEY_DROPDOWN_ITEM,
+    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, {})
+    return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {})
 }
 
 /**
  * Injects dropdown item role
  */
 export function useInjectedDropdownItem() {
-	return inject(INJECTION_KEY_DROPDOWN_ITEM, {})
+    return inject(INJECTION_KEY_DROPDOWN_ITEM, {})
 }
 
 /**
  * Injects dropdown action role
  */
 export function useInjectedDropdownAction() {
-	return inject(INJECTION_KEY_DROPDOWN_ACTION, {})
+    return inject(INJECTION_KEY_DROPDOWN_ACTION, {})
 }

package/src/composables/dropdown/useDropdownProvide.ts

@@ -0,0 +1,94 @@
+import mitt from 'mitt'
+import { Fragment, type Ref } from 'vue'
+import {
+    ActionRoles,
+    DropdownItemRole,
+    type DropdownItemState,
+    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

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

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

package/src/composables/useBlurhash.ts

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

package/src/composables/useComponentIcon.ts

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