@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.41

package/src/composables/alert/useAlert.ts

@@ -1,17 +1,19 @@
 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_MODIFIERS,
+    DEFAULT_ALERT_INFO_ICON,
+    DefaultAlertIconMap,
 } from '@/constants'
-import type { Alert, AlertModifiers } from '@/types/alert'
+import type { Alert } 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/useInjectAlert.ts

@@ -4,5 +4,5 @@ import { INJECTION_KEY_ALERT_GROUP } from '../../constants'
  * Injects alert group name
  */
 export function useInjectedAlertGroup() {
-	return inject(INJECTION_KEY_ALERT_GROUP, {})
+    return inject(INJECTION_KEY_ALERT_GROUP, {})
 }

package/src/composables/alert/useProvideAlert.ts

@@ -7,17 +7,17 @@ import { INJECTION_KEY_ALERT_GROUP } from '@/constants'
  * @param {Ref<string | undefined>} name the alert group name
  */
 export function useProvideAlertGroup({
-	name,
+    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/useInjectDropdown.ts

@@ -1,26 +1,26 @@
 import {
-	INJECTION_KEY_DROPDOWN_TRIGGER,
-	INJECTION_KEY_DROPDOWN_ACTION,
-	INJECTION_KEY_DROPDOWN_ITEM,
+    INJECTION_KEY_DROPDOWN_TRIGGER,
+    INJECTION_KEY_DROPDOWN_ACTION,
+    INJECTION_KEY_DROPDOWN_ITEM,
 } 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/useProvideDropdown.ts

@@ -1,12 +1,13 @@
 import { type Ref, Fragment } from 'vue'
 import mitt from 'mitt'
 import {
-	INJECTION_KEY_DROPDOWN_TRIGGER,
-	INJECTION_KEY_DROPDOWN_ACTION,
-	INJECTION_KEY_DROPDOWN_ITEM,
-	DropdownRole,
-	DropdownItemRole,
-	ActionRoles,
+    type DropdownItemState,
+    INJECTION_KEY_DROPDOWN_TRIGGER,
+    INJECTION_KEY_DROPDOWN_ACTION,
+    INJECTION_KEY_DROPDOWN_ITEM,
+    DropdownRole,
+    DropdownItemRole,
+    ActionRoles,
 } from '../../constants'
 
 /**
@@ -14,45 +15,45 @@ import {
  * @param {Ref<HTMLElement | null>} reference the dropdown reference
  */
 export function useProvideDropdownTrigger({
-	reference,
-	id,
-	expanded,
-	aria,
+    reference,
+    id,
+    expanded,
+    aria,
 }: {
-	reference: Ref<HTMLElement | null>
-	id: Ref<string | number>
-	expanded: Ref<boolean>
-	aria: Ref<{
-		'aria-controls': string
-		'aria-haspopup': boolean
-		'aria-expanded': boolean
-	}>
+    reference: Ref<HTMLElement | null>
+    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?.())
-		},
-	})
+    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,
-	}
+    return {
+        bus,
+        component,
+    }
 }
 
 /**
@@ -60,22 +61,21 @@ export function useProvideDropdownTrigger({
  * @param {Ref<string>} role the dropdown item role
  */
 export function useProvideDropdownItem({
-	role,
-	expanded,
-}: {
-	role: Ref<`${DropdownRole}`>
-	expanded: Ref<boolean>
+    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,
-		expanded,
-	})
-	return { itemRole }
+    const itemRole = computed(() =>
+        role.value === DropdownRole.listbox
+            ? DropdownItemRole.option
+            : DropdownItemRole.presentation,
+    )
+    provide(INJECTION_KEY_DROPDOWN_ITEM, {
+        role: itemRole,
+        ...others,
+    })
+    return { itemRole }
 }
 
 /**
@@ -83,12 +83,12 @@ export function useProvideDropdownItem({
  * @param {Ref<string>} role the dropdown item role
  */
 export function useProvideDropdownAction({
-	expanded,
+    expanded,
 }: {
-	expanded?: Ref<boolean>
+    expanded?: Ref<boolean>
 }) {
-	provide(INJECTION_KEY_DROPDOWN_ACTION, {
-		role: ref(ActionRoles.menuitem),
-		expanded,
-	})
+    provide(INJECTION_KEY_DROPDOWN_ACTION, {
+        role: ref(ActionRoles.menuitem),
+        expanded,
+    })
 }

package/src/composables/group/useInjectedGroupState.ts

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

package/src/composables/group/useProvideGroupState.ts

@@ -1,20 +1,14 @@
-import type GroupState from '../../types/group'
+import type { Ref, InjectionKey } from 'vue'
+import type { Emitter } from 'mitt'
 
 /**
  * Share part of the state of the component with all its children.
- * @param {IGroupState} groupState the group state with all group options
  */
-export function useProvideGroupState<GroupStateType extends GroupState>(
-	groupState: GroupStateType,
-) {
-	if (
-		Object.keys(groupState).some(
-			(k) => k !== 'key' && !isRef(groupState[k]),
-		)
-	)
-		throw Error("One or more groupState props aren't ref.")
-	provide(
-		groupState.key,
-		computed(() => groupState),
-	)
+export function useProvideGroupState<
+	TGroupState extends Record<
+		string,
+		Ref<unknown> | Emitter<any>
+	>,
+>(key: InjectionKey<TGroupState>, groupState: TGroupState) {
+    provide(key, groupState)
 }

package/src/composables/index.ts

@@ -1 +1,2 @@
 export { useAlert } from './alert/useAlert'
+export { useBlurhash } from './useBlurhash'

package/src/composables/useBlurhash.ts

@@ -0,0 +1,68 @@
+import { wrap } from 'comlink'
+import Pica from 'pica'
+import type { BlurhashWorkerType } from '@/types/blurhash'
+import BlurhashWorker from '@/workers/blurhash?worker&inline'
+
+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,
+    }
 }