@volverjs/ui-vue 0.0.10-beta.35 → 0.0.10-beta.36

package/src/composables/dropdown/useProvideDropdown.ts

@@ -1,13 +1,13 @@
 import { type Ref, Fragment } from 'vue'
 import mitt from 'mitt'
 import {
-	type DropdownItemState,
-	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'
 
 /**
@@ -15,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,
+    }
 }
 
 /**
@@ -61,21 +61,21 @@ export function useProvideDropdownTrigger({
  * @param {Ref<string>} role the dropdown item role
  */
 export function useProvideDropdownItem({
-	role,
-	...others
+    role,
+    ...others
 }: Omit<DropdownItemState, 'role'> & {
-	role: Ref<`${DropdownRole}`>
+    role: Ref<`${DropdownRole}`>
 }) {
-	const itemRole = computed(() =>
-		role.value === DropdownRole.listbox
-			? DropdownItemRole.option
-			: DropdownItemRole.presentation,
-	)
-	provide(INJECTION_KEY_DROPDOWN_ITEM, {
-		role: itemRole,
-		...others,
-	})
-	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

@@ -4,52 +4,52 @@ import type { Ref, InjectionKey } from 'vue'
  * Injects a group state
  */
 export function useInjectedGroupState<GroupStateType>(
-	groupKey: InjectionKey<GroupStateType>,
+    groupKey: InjectionKey<GroupStateType>,
 ) {
-	// Get group state
-	const group = inject<GroupStateType | undefined>(groupKey, undefined)
+    // Get group state
+    const group = inject<GroupStateType | undefined>(groupKey, undefined)
 
-	// Check if component is in group
-	const isInGroup = computed(() => group !== undefined)
+    // Check if component is in group
+    const isInGroup = computed(() => group !== undefined)
 
-	/**
-	 * Get a group or local property
-	 */
-	function getGroupOrLocalRef<
+    /**
+     * 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]
-	}
+        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

@@ -7,9 +7,8 @@ import type { Emitter } from 'mitt'
 export function useProvideGroupState<
 	TGroupState extends Record<
 		string,
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		Ref<unknown> | Emitter<any>
 	>,
 >(key: InjectionKey<TGroupState>, groupState: TGroupState) {
-	provide(key, groupState)
+    provide(key, groupState)
 }

package/src/composables/useBlurhash.ts

@@ -1,76 +1,68 @@
 import { wrap } from 'comlink'
-import pica from 'pica'
+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
-	})
+    return new Promise((resolve, reject) => {
+        const img = new Image()
+        img.onload = () => resolve(img)
+        img.onerror = (...args) => reject(args)
+        img.src = src
+    })
 }
 
-const 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,
-	}
+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,
+    }
 }
 
-const resizeImage = async (
-	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
+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 const 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,
+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,
-				)
-			}
-		}
-	}
+            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 }
+    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: (event: 'focus' | 'blur', value: unknown) => 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

@@ -3,40 +3,40 @@ import type { VvIconProps } from '../components/VvIcon'
 import { Position, Side } from '../constants'
 
 export function useComponentIcon(
-	icon?: Ref<string | VvIconProps | undefined>,
-	iconPosition?: Ref<string | undefined>,
+    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,
-	}
+    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)
+        },
+    })
 }