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

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,
+    }
 }

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,
+    }
 }

package/src/composables/useDebouncedInput.ts

@@ -1,32 +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
-	} = {},
+    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
+    let timeout: NodeJS.Timeout
 
-	if (typeof ms === 'string') {
-		ms = parseInt(ms)
-	}
+    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)
-		},
-	})
+    return computed({
+        get: () => getter(modelValue?.value),
+        set: (value) => {
+            if (timeout) {
+                clearTimeout(timeout)
+            }
+            timeout = setTimeout(() => {
+                emit('update:modelValue', setter(value))
+            }, ms as number)
+        },
+    })
 }