@volverjs/ui-vue 0.0.10-beta.24 → 0.0.10-beta.26

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/constants.ts

@@ -11,6 +11,11 @@ import type {
 
 export const DEFAULT_ICONIFY_PROVIDER = 'vv'
 
+export enum StorageType {
+	local = 'local',
+	session = 'session',
+}
+
 export enum Strategy {
 	absolute = 'absolute',
 	fixed = 'fixed',
@@ -68,13 +73,6 @@ export enum DropdownItemRole {
 	presentation = 'presentation',
 }
 
-export enum AnchorTarget {
-	_blank = '_blank',
-	_self = '_self',
-	_parent = '_parent',
-	_top = '_top',
-}
-
 // volver
 export const INJECTION_KEY_VOLVER = Symbol.for('volver') as InjectionKey<Volver>
 
@@ -93,9 +91,7 @@ export const INJECTION_KEY_ACCORDION_GROUP = Symbol.for(
 ) 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<{
@@ -109,19 +105,28 @@ 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(

package/src/props/index.ts

@@ -13,9 +13,9 @@ import {
 	Strategy,
 	Position,
 	Side,
-	AnchorTarget,
 	ButtonType,
 	ActionTag,
+	StorageType,
 } from '@/constants'
 import type { VvIconProps } from '@/components/VvIcon'
 
@@ -34,12 +34,7 @@ export const LinkProps = {
 	/**
 	 * Anchor target
 	 */
-	target: {
-		type: String as PropType<`${AnchorTarget}`>,
-		default: undefined,
-		validator: (value: AnchorTarget) =>
-			Object.values(AnchorTarget).includes(value),
-	},
+	target: String,
 	/**
 	 * Anchor rel
 	 */
@@ -549,3 +544,13 @@ export const NavProps = {
 		default: () => [],
 	},
 }
+
+export const StorageProps = {
+	storageType: {
+		type: String as PropType<`${StorageType}`>,
+		default: StorageType.local,
+		validator: (value: StorageType) =>
+			Object.values(StorageType).includes(value),
+	},
+	storageKey: String,
+}

package/src/stories/AccordionGroup/AccordionGroup.settings.ts

@@ -65,12 +65,12 @@ export const argTypes = {
 	},
 	modifiers: {
 		...ModifiersArgTypes.modifiers,
-		options: ['compact', 'bordered'],
+		options: ['condensed'],
 	},
 	itemModifiers: {
 		description: 'Accordion items BEM modifiers',
 		control: 'check',
-		options: ['marker-right', 'bordered'],
+		options: ['marker-right', 'bordered', 'square'],
 	},
 	...DisabledArgTypes,
 	...DefaultSlotArgTypes,

package/src/stories/AccordionGroup/AccordionGroup.test.ts

@@ -29,10 +29,10 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 
 	// open
 	if (!args.disabled && args.items && args.items.length > 0) {
-		expect(firstChild.open).toBe(false)
+		expect(firstChild.open).toBe(args.not ?? false)
 		expect(firstChildSummary).toBeClicked()
 		await sleep()
-		expect(firstChild.open).toBe(true)
+		expect(firstChild.open).toBe(!args.not)
 		if (firstChild.open) {
 			if (args.not) {
 				expect(JSON.stringify(JSON.parse(value.innerText))).toBe(
@@ -51,10 +51,10 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 			} else {
 				expect(value.innerText).toBe(args.items[0].name)
 			}
+			expect(firstChildSummary.getAttribute('aria-expanded')).toBe('true')
+			const content = firstChild.lastChild as HTMLElement
+			expect(content.getAttribute('aria-hidden')).toBe('false')
 		}
-		expect(firstChildSummary.getAttribute('aria-expanded')).toBe('true')
-		const content = firstChild.lastChild as HTMLElement
-		expect(content.getAttribute('aria-hidden')).toBe('false')
 	}
 
 	// accessibility

package/src/stories/Button/Button.settings.ts

@@ -121,11 +121,8 @@ export const argTypes = {
 		control: { type: 'text' },
 	},
 	target: {
-		options: ['', '_blank', '_self', '_parent', '_top'],
 		description: 'The target attribute',
-		control: {
-			type: 'select',
-		},
+		control: { type: 'text' },
 	},
 	to: {
 		description: 'The router link / nuxt link settings',

package/src/types/nav.ts

@@ -1,12 +1,10 @@
-import type { AnchorTarget } from '@/constants'
-
 export type NavItem = {
 	label: string
 	ariaLabel?: string
 	title?: string
 	to?: string | Record<string, unknown>
 	href?: string
-	target?: `${AnchorTarget}`
+	target?: string
 	rel?: string
 	disabled?: boolean
 	current?: boolean