@volverjs/ui-vue 0.0.10-beta.3 → 0.0.10-beta.30

package/src/composables/group/useInjectedGroupState.ts

@@ -1,46 +1,50 @@
-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)
+	const group = inject<GroupStateType | undefined>(groupKey, undefined)
 
 	// Check if component is in group
-	const isInGroup = computed(() => !isEmpty(group))
+	const isInGroup = computed(() => group !== undefined)
 
 	/**
 	 * Get a group or local property
 	 */
-	function getGroupOrLocalRef<PropsType extends object>(
-		propName: keyof GroupStateType,
-		props: PropsType,
+	function getGroupOrLocalRef<
+		TProps extends object,
+		TName extends keyof GroupStateType,
+	>(
+		propName: TName,
+		props: TProps,
 		emit?: (event: string, ...args: unknown[]) => void,
 	) {
-		if (group?.value) {
-			const groupPropValue = unref(group.value)[propName] as Ref<unknown>
+		const groupPropValue = group?.[propName] as Ref | undefined
+		if (groupPropValue) {
 			return computed({
 				get() {
-					return groupPropValue?.value
+					return groupPropValue.value
 				},
 				set(value: unknown) {
 					groupPropValue.value = value
 				},
-			})
+			}) as GroupStateType[TName]
 		}
-		const propRef = toRef(props, propName as keyof PropsType)
+		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)
+				if (emit) {
+					emit(`update:${propName as string}`, value)
+				}
 			},
-		})
+		}) as GroupStateType[TName]
 	}
 
 	return {

package/src/composables/group/useProvideGroupState.ts

@@ -1,20 +1,15 @@
-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,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		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,76 @@
+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
+	})
+}
+
+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,
+	}
+}
+
+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
+}
+
+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,
+				)
+			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/useComponentIcon.ts

@@ -1,34 +1,35 @@
 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 hasIcon = computed(() => {
+		if (typeof icon?.value === 'string') {
+			return { name: icon?.value }
+		}
+		return icon?.value
+	})
 	const hasIconBefore = computed(() =>
-		Boolean(icon?.value && iconPosition.value === Position.before),
+		iconPosition?.value === Position.before ? hasIcon.value : undefined,
 	)
 	const hasIconAfter = computed(() =>
-		Boolean(icon?.value && iconPosition.value === Position.after),
+		iconPosition?.value === Position.after ? hasIcon.value : undefined,
 	)
 	const hasIconLeft = computed(() =>
-		Boolean(icon?.value && iconPosition.value === Side.left),
+		iconPosition?.value === Side.left ? hasIcon.value : undefined,
 	)
 	const hasIconRight = computed(() =>
-		Boolean(icon?.value && iconPosition.value === Side.right),
+		iconPosition?.value === Side.right ? hasIcon.value : undefined,
 	)
 	const hasIconTop = computed(() =>
-		Boolean(icon?.value && iconPosition.value === Side.top),
+		iconPosition?.value === Side.top ? hasIcon.value : undefined,
 	)
 	const hasIconBottom = computed(() =>
-		Boolean(icon?.value && iconPosition.value === Side.bottom),
+		iconPosition?.value === Side.bottom ? hasIcon.value : undefined,
 	)
-	const hasIcon = computed(() => {
-		if (typeof icon?.value === 'string') {
-			return { name: icon?.value }
-		}
-		return icon?.value
-	})
 	return {
 		hasIcon,
 		hasIconLeft,

package/src/composables/usePersistence.ts

@@ -0,0 +1,76 @@
+import { StorageType } from '@/constants'
+
+export const usePersistence = <T>(
+	storageKey: Ref<string | undefined> | undefined,
+	storageType: Ref<`${StorageType}`> | `${StorageType}` = StorageType.local,
+	defaultValue?: T,
+) => {
+	const localValue: Ref<T | undefined> = ref()
+	if (defaultValue) {
+		localValue.value = defaultValue
+	}
+	let storageValue: Ref<T | undefined> | undefined
+	if (storageKey) {
+		watch(
+			storageKey,
+			(newKey, oldKey) => {
+				const storage =
+					unref(storageType) === StorageType.session
+						? sessionStorage
+						: localStorage
+				if (oldKey && oldKey !== newKey) {
+					storage.removeItem(oldKey)
+				}
+				if (newKey) {
+					storageValue = useStorage(
+						newKey,
+						storageValue?.value ?? localValue.value,
+						storage,
+					)
+					return
+				}
+				storageValue = undefined
+			},
+			{
+				immediate: true,
+			},
+		)
+	}
+	if (isRef(storageType)) {
+		watch(storageType, (newType, oldType) => {
+			if (storageKey?.value) {
+				if (newType) {
+					const storage =
+						newType === StorageType.session
+							? sessionStorage
+							: localStorage
+					storageValue = useStorage(
+						storageKey.value,
+						storageValue?.value ?? localValue.value,
+						storage,
+					)
+				}
+				if (oldType && oldType !== newType) {
+					const oldStorage =
+						oldType === StorageType.session
+							? sessionStorage
+							: localStorage
+					oldStorage.removeItem(storageKey.value)
+				}
+			}
+		})
+	}
+
+	return computed<T | undefined>({
+		get: () => {
+			return storageValue?.value ?? localValue.value
+		},
+		set: (value) => {
+			if (storageValue) {
+				storageValue.value = value
+				return
+			}
+			localValue.value = value
+		},
+	})
+}

package/src/composables/useUniqueId.ts

@@ -1,5 +1,5 @@
-import { nanoid } from 'nanoid'
+import { uid } from 'uid'
 import type { Ref } from 'vue'
 
 export const useUniqueId = (id?: Ref<string | number | undefined>) =>
-	computed(() => String(id?.value || nanoid()))
+	computed(() => String(id?.value || uid()))

package/src/constants.ts

@@ -1,10 +1,21 @@
 import type { InjectionKey, Ref } from 'vue'
 import type { Emitter } from 'mitt'
 import type { Volver } from './Volver'
-import type { AlertModifiers } from './types/alert'
+import type {
+	AccordionGroupState,
+	InputGroupState,
+	ButtonGroupState,
+	AlertGroupState,
+	AlertModifier,
+} from './types'
 
 export const DEFAULT_ICONIFY_PROVIDER = 'vv'
 
+export enum StorageType {
+	local = 'local',
+	session = 'session',
+}
+
 export enum Strategy {
 	absolute = 'absolute',
 	fixed = 'fixed',
@@ -62,26 +73,30 @@ export enum DropdownItemRole {
 	presentation = 'presentation',
 }
 
-export enum AnchorTarget {
-	_blank = '_blank',
-	_self = '_self',
-	_parent = '_parent',
-	_top = '_top',
+export enum AlertRole {
+	alert = 'alert',
+	alertdialog = 'alertdialog',
 }
 
 // volver
 export const INJECTION_KEY_VOLVER = Symbol.for('volver') as InjectionKey<Volver>
 
 // groups
-export const INJECTION_KEY_BUTTON_GROUP = Symbol.for('buttonGroup')
-export const INJECTION_KEY_RADIO_GROUP = Symbol.for('radioGroup')
-export const INJECTION_KEY_CHECK_GROUP = Symbol.for('checkGroup')
-export const INJECTION_KEY_ACCORDION_GROUP = Symbol.for('accordionGroup')
+export const INJECTION_KEY_BUTTON_GROUP = Symbol.for(
+	'buttonGroup',
+) as InjectionKey<ButtonGroupState>
+export const INJECTION_KEY_RADIO_GROUP = Symbol.for(
+	'radioGroup',
+) as InjectionKey<InputGroupState>
+export const INJECTION_KEY_CHECK_GROUP = Symbol.for(
+	'checkGroup',
+) as InjectionKey<InputGroupState>
+export const INJECTION_KEY_ACCORDION_GROUP = Symbol.for(
+	'accordionGroup',
+) as InjectionKey<AccordionGroupState>
 
 // dropdown
-export const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
-	'dropdownTrigger',
-) as InjectionKey<{
+export type DropdownTriggerState = {
 	id?: Ref<string | number>
 	reference?: Ref<HTMLElement | null>
 	bus?: Emitter<{
@@ -95,27 +110,33 @@ export const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
 		'aria-haspopup': boolean
 		'aria-expanded': boolean
 	}>
-}>
+}
+export const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
+	'dropdownTrigger',
+) as InjectionKey<DropdownTriggerState>
+
+export type DropdownItemState = {
+	role?: Ref<`${DropdownItemRole}`>
+	expanded?: Ref<boolean>
+	focused?: Ref<boolean>
+	hovered?: Ref<boolean>
+}
 export const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
 	'dropdownItem',
-) as InjectionKey<{
-	role?: Ref<`${DropdownItemRole}`>
+) as InjectionKey<DropdownItemState>
+
+export type DropdownActionState = {
+	role?: Ref<`${ActionRoles}`>
 	expanded?: Ref<boolean>
-}>
+}
 export const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
 	'dropdownAction',
-) as InjectionKey<{
-	role?: Ref<`${ActionRoles}`>
-	expanded?: Ref<boolean>
-}>
+) as InjectionKey<DropdownActionState>
 
 // alert
 export const INJECTION_KEY_ALERT_GROUP = Symbol.for(
 	'alertGroup',
-) as InjectionKey<{
-	name?: Ref<string | undefined>
-	bus?: Emitter<{ close: string }>
-}>
+) as InjectionKey<AlertGroupState>
 export const DEFAULT_ALERT_AUTO_CLOSE = 10000
 export const DEFAULT_ALERT_MODIFIERS = 'info'
 export const DEFAULT_ALERT_DISMISSABLE = true
@@ -124,15 +145,9 @@ export const DEFAULT_ALERT_INFO_ICON = 'information'
 export const DEFAULT_ALERT_SUCCESS_ICON = 'check-circle'
 export const DEFAULT_ALERT_WARNING_ICON = 'warning'
 export const DEFAULT_ALERT_DANGER_ICON = 'error'
-export const DefaultAlertIconMap = new Map<AlertModifiers, string>([
+export const DefaultAlertIconMap = new Map<AlertModifier, string>([
 	['success', DEFAULT_ALERT_SUCCESS_ICON],
 	['info', DEFAULT_ALERT_INFO_ICON],
 	['warning', DEFAULT_ALERT_WARNING_ICON],
 	['danger', DEFAULT_ALERT_DANGER_ICON],
 ])
-// {
-// 	success: DEFAULT_ALERT_SUCCESS_ICON,
-// 	info: DEFAULT_ALERT_INFO_ICON,
-// 	warning: DEFAULT_ALERT_WARNING_ICON,
-// 	danger: DEFAULT_ALERT_DANGER_ICON,
-// }

package/src/directives/index.ts

@@ -1,7 +1,4 @@
-import tooltip from '../directives/v-tooltip'
-import contextmenu from '../directives/v-contextmenu'
+import vTooltip from '../directives/v-tooltip'
+import vContextmenu from '../directives/v-contextmenu'
 
-export default {
-	tooltip,
-	contextmenu,
-}
+export { vTooltip, vContextmenu }

package/src/directives/v-tooltip.ts

@@ -1,15 +1,24 @@
 import { render, type Directive, type DirectiveBinding } from 'vue'
 import VvTooltip from '../components/VvTooltip/VvTooltip.vue'
-import type { Side } from '../constants'
+import { Side } from '../constants'
 
-const tooltip: Directive = {
-	beforeMount(el: HTMLElement, binding: DirectiveBinding) {
-		const tooltip = h(VvTooltip, {
-			value: binding.value,
-			position: binding.arg as Side,
-		})
-		render(tooltip, el)
-	},
-}
+const tooltip: Directive = (() => {
+	return {
+		beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+			const tooltip = h(VvTooltip, {
+				value: binding.value,
+				position: binding.arg as Side,
+			})
+			render(tooltip, el)
+		},
+		updated(el: HTMLElement, binding: DirectiveBinding) {
+			const tooltip = h(VvTooltip, {
+				value: binding.value,
+				position: binding.arg as Side,
+			})
+			render(tooltip, el)
+		},
+	}
+})()
 
 export default tooltip

package/src/index.ts

@@ -1,7 +1,9 @@
 import VolverPlugin from './Volver'
-import type { Volver } from './Volver'
+import type { Volver, VolverOptions } from './Volver'
 
 export { VolverPlugin }
+export * from './types'
+export type { Volver, VolverOptions }
 
 // https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
 // Add custom property and extend vue type definition