@volverjs/ui-vue 0.0.10-beta.25 → 0.0.10-beta.27

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -20,7 +20,14 @@
 	const emit = defineEmits(VvAccordionGroupEvents)
 
 	// data
-	const { disabled, modifiers, itemModifiers, items } = toRefs(props)
+	const {
+		disabled,
+		modifiers,
+		itemModifiers,
+		items,
+		storageKey,
+		storageType,
+	} = toRefs(props)
 	watchEffect(() => {
 		if (typeof props.modelValue === 'string' && props.collapse) {
 			// eslint-disable-next-line no-console
@@ -31,33 +38,21 @@
 	})
 
 	const accordionNames = reactive(new Set<string>())
-	let storeModelValue: Ref<string | string[] | undefined> = ref()
-	watch(
-		() => props.storeKey,
-		(newKey, oldKey) => {
-			if (oldKey && oldKey !== newKey) {
-				localStorage.removeItem(oldKey)
-			}
-			if (newKey) {
-				storeModelValue = useLocalStorage(newKey, storeModelValue.value)
-				return
-			}
-			storeModelValue = ref(storeModelValue.value)
-		},
-		{
-			immediate: true,
-		},
+	const storageModelValue = usePersistence<string | string[] | undefined>(
+		storageKey,
+		storageType,
+		[],
 	)
 	const localModelValue = computed({
 		get: () => {
 			if (props.modelValue !== null && props.modelValue !== undefined) {
 				return props.modelValue
 			}
-			return storeModelValue.value
+			return storageModelValue.value
 		},
 		set: (newValue) => {
 			emit('update:modelValue', newValue)
-			storeModelValue.value = newValue
+			storageModelValue.value = newValue
 		},
 	})
 	const expandedAccordions = computed<Set<string>>({

package/src/components/VvAccordionGroup/index.ts

@@ -1,4 +1,4 @@
-import { ModifiersProps } from '@/props'
+import { ModifiersProps, StorageProps } from '@/props'
 
 export interface VvAccordionGroupItem {
 	title: string
@@ -10,6 +10,7 @@ export interface VvAccordionGroupItem {
 
 export const VvAccordionGroupProps = {
 	...ModifiersProps,
+	...StorageProps,
 	/**
 	 * VModel
 	 */
@@ -44,10 +45,6 @@ export const VvAccordionGroupProps = {
 	 * If true, the accordion items will be opened by default
 	 */
 	not: Boolean,
-	/**
-	 * Enable local storage persistence
-	 */
-	storeKey: String,
 }
 
 export const VvAccordionGroupEvents = ['update:modelValue']

package/src/components/VvCombobox/VvCombobox.vue

@@ -526,6 +526,7 @@
 									}"
 									:key="i"
 									class="vv-dropdown-option"
+									focus-on-hover
 									@click.passive="onInput(item)"
 								>
 									<!-- @slot Slot for option customization -->
@@ -556,6 +557,7 @@
 										propsDefaults.selectedHintLabel,
 								}"
 								class="vv-dropdown-option"
+								focus-on-hover
 								@click.passive="onInput(option)"
 							>
 								<!-- @slot Slot for option customization -->

package/src/components/VvDropdown/VvDropdown.vue

@@ -299,9 +299,7 @@
 		})
 	bus.on('click', toggle)
 
-	// provide top dropdown item
 	const { role, modifiers } = toRefs(props)
-	const { itemRole } = useProvideDropdownItem({ role, expanded })
 
 	// styles
 	const bemCssClasses = useModifiers(
@@ -376,6 +374,17 @@
 		})
 	}
 
+	// hover
+	const hovered = useElementHover(floatingEl)
+
+	// provide top dropdown item
+	const { itemRole } = useProvideDropdownItem({
+		role,
+		expanded,
+		focused,
+		hovered,
+	})
+
 	// keyboard
 	onKeyStroke('Escape', (e) => {
 		if (expanded.value) {

package/src/components/VvDropdown/VvDropdownItem.vue

@@ -5,6 +5,9 @@
 </script>
 
 <script setup lang="ts">
+	import { VvDropdownItemProps } from '.'
+
+	const props = defineProps(VvDropdownItemProps)
 	const { role, expanded } = useInjectedDropdownItem()
 	const element = ref(null)
 	useProvideDropdownAction({ expanded })
@@ -14,7 +17,7 @@
 
 	// focus item on hover
 	watch(hovered, (newValue) => {
-		if (newValue) {
+		if (newValue && props.focusOnHover) {
 			focused.value = true
 		}
 	})

package/src/components/VvDropdown/VvDropdownOption.vue

@@ -5,30 +5,11 @@
 </script>
 
 <script setup lang="ts">
+	import { VvDropdownOptionProps } from '.'
 	import VvDropdownItem from './VvDropdownItem.vue'
-	import {
-		DisabledProps,
-		ModifiersProps,
-		SelectedProps,
-		UnselectableProps,
-	} from '../../props'
 
 	// props
-	const props = defineProps({
-		...DisabledProps,
-		...SelectedProps,
-		...UnselectableProps,
-		...ModifiersProps,
-		deselectHintLabel: {
-			type: String,
-		},
-		selectHintLabel: {
-			type: String,
-		},
-		selectedHintLabel: {
-			type: String,
-		},
-	})
+	const props = defineProps(VvDropdownOptionProps)
 
 	// style
 	const { modifiers } = toRefs(props)
@@ -61,6 +42,7 @@
 		:tabindex="disabled ? -1 : 0"
 		:aria-selected="selected"
 		:aria-disabled="disabled"
+		:focus-on-hover="focusOnHover"
 	>
 		<slot />
 		<span class="vv-dropdown-option__hint" :title="hintLabel">

package/src/components/VvDropdown/index.ts

@@ -1,5 +1,12 @@
 import type { PropType } from 'vue'
-import { DropdownProps, IdProps, ModifiersProps } from '../../props'
+import {
+	DropdownProps,
+	IdProps,
+	DisabledProps,
+	ModifiersProps,
+	SelectedProps,
+	UnselectableProps,
+} from '../../props'
 import { DropdownRole } from '../../constants'
 
 export const VvDropdownProps = {
@@ -30,3 +37,30 @@ export const VvDropdownProps = {
 			Object.values(DropdownRole).includes(value),
 	},
 }
+
+export const VvDropdownItemProps = {
+	focusOnHover: {
+		type: Boolean,
+		default: false,
+	},
+}
+
+export const VvDropdownOptionProps = {
+	...DisabledProps,
+	...SelectedProps,
+	...UnselectableProps,
+	...ModifiersProps,
+	deselectHintLabel: {
+		type: String,
+	},
+	selectHintLabel: {
+		type: String,
+	},
+	selectedHintLabel: {
+		type: String,
+	},
+	focusOnHover: {
+		type: Boolean,
+		default: false,
+	},
+}

package/src/components/VvInputText/VvInputText.vue

@@ -11,6 +11,8 @@
 	import VvIcon from '../VvIcon/VvIcon.vue'
 	import { ACTION_ICONS } from '../VvIcon'
 	import VvInputTextActionsFactory from '../VvInputText/VvInputTextActions'
+	import VvDropdown from '../VvDropdown/VvDropdown.vue'
+	import VvDropdownOption from '../VvDropdown/VvDropdownOption.vue'
 	import {
 		VvInputTextEvents,
 		VvInputTextProps,
@@ -34,6 +36,7 @@
 		id,
 		icon,
 		iconPosition,
+		iconRemoveSuggestion,
 		label,
 		modelValue,
 		count,
@@ -46,6 +49,8 @@
 		type,
 		iMask,
 		step,
+		storageKey,
+		storageType,
 	} = toRefs(props)
 	const hasId = useUniqueId(id)
 	const hasHintId = computed(() => `${hasId.value}-hint`)
@@ -54,7 +59,7 @@
 		props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder,
 	)
 
-	// template refs
+	// mask
 	const maskReady = ref(false)
 	const { el, mask, typed, masked, unmasked } = useIMask(
 		computed(
@@ -170,8 +175,12 @@
 			masked.value = newValue ?? ''
 		},
 	)
+
+	// template refs
 	const inputEl = el as Ref<HTMLInputElement>
-	const innerEl = ref()
+	const innerEl = ref<HTMLInputElement>()
+	const wrapperEl = ref<HTMLDivElement>()
+	const dropdownEl = ref<typeof VvDropdown>()
 
 	defineExpose({ $inner: innerEl })
 
@@ -191,6 +200,26 @@
 		if (newValue && propsDefaults.value.selectOnFocus && inputEl.value) {
 			inputEl.value.select()
 		}
+		if (newValue) {
+			dropdownEl.value?.show()
+			return
+		}
+		setTimeout(() => {
+			if (isDirty.value && suggestions.value) {
+				const suggestionsLimit = props.maxSuggestions - 1
+				if (
+					suggestions.value.size > suggestionsLimit &&
+					!suggestions.value.has(localModelValue.value)
+				) {
+					suggestions.value = new Set(
+						[...suggestions.value].slice(
+							suggestions.value.size - suggestionsLimit,
+						),
+					)
+				}
+				suggestions.value.add(localModelValue.value)
+			}
+		}, 300)
 	})
 
 	// visibility
@@ -267,6 +296,8 @@
 		}
 		return undefined
 	})
+	const { hasIcon: hasIconRemoveSuggestion } =
+		useComponentIcon(iconRemoveSuggestion)
 
 	// count
 	const { formatted: countFormatted } = useTextCount(localModelValue, {
@@ -295,6 +326,41 @@
 		return undefined
 	})
 
+	// suggestions
+	const suggestions = usePersistence<Set<string>>(
+		storageKey,
+		storageType,
+		new Set(),
+	)
+	const filteredSuggestions = computed(() => {
+		if (!suggestions.value) {
+			return []
+		}
+		return [...suggestions.value]
+			.filter(
+				(suggestion) =>
+					isEmpty(localModelValue.value) ||
+					(`${suggestion}`
+						.toLowerCase()
+						.includes(`${localModelValue.value}`.toLowerCase()) &&
+						suggestion !== localModelValue.value),
+			)
+			.reverse()
+	})
+	const hasSuggestions = computed(
+		() =>
+			storageKey?.value &&
+			suggestions.value &&
+			suggestions.value.size > 0,
+	)
+	const onSuggestionSelect = (suggestion: string) => {
+		localModelValue.value = suggestion
+		dropdownEl.value?.hide()
+	}
+	const onSuggestionRemove = (suggestion: string) => {
+		suggestions.value?.delete(suggestion)
+	}
+
 	// styles
 	const { modifiers } = toRefs(props)
 	const bemCssClasses = useModifiers(
@@ -463,7 +529,7 @@
 		<label v-if="label" :for="hasId" class="vv-input-text__label">
 			{{ label }}
 		</label>
-		<div class="vv-input-text__wrapper">
+		<div ref="wrapperEl" class="vv-input-text__wrapper">
 			<div v-if="$slots.before" class="vv-input-text__input-before">
 				<!-- @slot Slot before input icon -->
 				<slot name="before" v-bind="slotProps" />
@@ -542,5 +608,36 @@
 				<slot name="invalid" v-bind="hintSlotScope" />
 			</template>
 		</HintSlot>
+		<VvDropdown
+			v-if="hasSuggestions"
+			ref="dropdownEl"
+			:reference="wrapperEl"
+			:autofocus-first="false"
+			:trigger-width="true"
+		>
+			<template #items>
+				<VvDropdownOption
+					v-for="value in filteredSuggestions"
+					:key="value"
+					@click.stop="onSuggestionSelect(value)"
+				>
+					<div class="flex-1">
+						<slot name="suggestion" v-bind="{ value }">
+							{{ value }}
+						</slot>
+					</div>
+					<button
+						v-if="suggestions && hasIconRemoveSuggestion"
+						type="button"
+						tabindex="-1"
+						class="cursor-pointer"
+						:title="labelRemoveSuggestion"
+						@click.stop="onSuggestionRemove(value)"
+					>
+						<VvIcon v-bind="hasIconRemoveSuggestion" />
+					</button>
+				</VvDropdownOption>
+			</template>
+		</VvDropdown>
 	</div>
 </template>

package/src/components/VvInputText/index.ts

@@ -1,6 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue'
 import type { FactoryOpts } from 'imask'
-import { InputTextareaProps } from '../../props'
+import { InputTextareaProps, StorageProps } from '../../props'
 import { type VvIconProps, ACTION_ICONS } from '../VvIcon'
 
 export const INPUT_TYPES = {
@@ -40,6 +40,7 @@ export const VvInputTextEvents = [
 
 export const VvInputTextProps = {
 	...InputTextareaProps,
+	...StorageProps,
 	/**
 	 * Input value
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
@@ -109,6 +110,14 @@ export const VvInputTextProps = {
 		type: [String, Object] as PropType<string | VvIconProps>,
 		default: ACTION_ICONS.clear,
 	},
+	/**
+	 * VvIcon name for remove suggestion button
+	 * @see VVIcon
+	 */
+	iconRemoveSuggestion: {
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: ACTION_ICONS.remove,
+	},
 	/**
 	 * Label for step up button
 	 */
@@ -144,6 +153,13 @@ export const VvInputTextProps = {
 		type: String,
 		default: 'Clear',
 	},
+	/**
+	 * Label for remove suggestion button
+	 */
+	labelRemoveSuggestion: {
+		type: String,
+		default: 'Remove suggestion',
+	},
 	/**
 	 * iMask options
 	 * @see https://imask.js.org/guide.html
@@ -186,6 +202,13 @@ export const VvInputTextProps = {
 		type: Boolean,
 		default: false,
 	},
+	/**
+	 * Maximum number of suggestions
+	 */
+	maxSuggestions: {
+		type: Number,
+		default: 5,
+	},
 }
 
 export type VvInputTextPropsTypes = ExtractPropTypes<typeof VvInputTextProps>

package/src/composables/dropdown/useProvideDropdown.ts

@@ -1,6 +1,7 @@
 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,
@@ -61,10 +62,9 @@ export function useProvideDropdownTrigger({
  */
 export function useProvideDropdownItem({
 	role,
-	expanded,
-}: {
+	...others
+}: Omit<DropdownItemState, 'role'> & {
 	role: Ref<`${DropdownRole}`>
-	expanded: Ref<boolean>
 }) {
 	const itemRole = computed(() =>
 		role.value === DropdownRole.listbox
@@ -73,7 +73,7 @@ export function useProvideDropdownItem({
 	)
 	provide(INJECTION_KEY_DROPDOWN_ITEM, {
 		role: itemRole,
-		expanded,
+		...others,
 	})
 	return { itemRole }
 }

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/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