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

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -16,10 +16,18 @@
 
 	// props and emit
 	const props = defineProps(VvAccordionGroupProps)
+	// eslint-disable-next-line
 	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
@@ -30,81 +38,81 @@
 	})
 
 	const accordionNames = reactive(new Set<string>())
-	let modelValue = ref(new Set<string>())
-	watch(
-		() => props.storeKey,
-		(newKey, oldKey) => {
-			if (oldKey && oldKey !== newKey) {
-				localStorage.removeItem(oldKey)
-			}
-			if (newKey) {
-				modelValue = useLocalStorage(newKey, modelValue.value)
-				return
-			}
-			modelValue = ref(new Set<string>(modelValue.value))
-		},
-		{ immediate: true },
+	const storageModelValue = usePersistence<string | string[] | undefined>(
+		storageKey,
+		storageType,
 	)
-	watch(
-		[modelValue, accordionNames, () => props.not, () => props.collapse],
-		() => {
-			if (props.not) {
-				emit(
-					'update:modelValue',
-					[...accordionNames].filter(
-						(name) => !modelValue.value.has(name),
-					),
-				)
-				return
-			}
-			if (props.collapse) {
-				emit('update:modelValue', [...modelValue.value])
-				return
+	const localModelValue = computed({
+		get: () => {
+			if (props.modelValue !== null && props.modelValue !== undefined) {
+				return props.modelValue
 			}
-			emit('update:modelValue', modelValue.value.values().next().value)
+			return storageModelValue.value
 		},
-		{
-			deep: true,
-			immediate: true,
+		set: (newValue) => {
+			emit('update:modelValue', newValue)
+			storageModelValue.value = newValue
 		},
-	)
-	watch(
-		() => props.modelValue,
-		(newValue, oldValue) => {
-			if (
-				newValue === undefined ||
-				newValue === null ||
-				JSON.stringify(newValue) === JSON.stringify(oldValue)
-			) {
-				return
+	})
+	const expandedAccordions = computed<Set<string>>({
+		get: () => {
+			if (localModelValue.value === undefined) {
+				return new Set<string>()
 			}
 			let toReturn = new Set<string>()
 			if (props.not) {
-				if (typeof newValue === 'string') {
+				if (typeof localModelValue.value === 'string') {
 					toReturn = new Set<string>(
-						[...accordionNames].filter((name) => name !== newValue),
+						[...accordionNames].filter(
+							(name) => name !== localModelValue.value,
+						),
 					)
-				} else if (Array.isArray(newValue)) {
+				} else if (Array.isArray(localModelValue.value)) {
 					toReturn = new Set<string>(
 						[...accordionNames].filter(
-							(name) => !newValue.includes(name),
+							(name) =>
+								!(localModelValue.value as string[]).includes(
+									name,
+								),
 						),
 					)
 				}
-			} else if (typeof newValue === 'string') {
-				toReturn = new Set<string>([newValue])
-			} else if (Array.isArray(newValue)) {
-				toReturn = new Set<string>(newValue)
-			}
-			for (const name of accordionNames) {
-				bus.emit('toggle', { name, value: toReturn.has(name) })
+			} else if (typeof localModelValue.value === 'string') {
+				toReturn = new Set<string>([localModelValue.value])
+			} else if (Array.isArray(localModelValue.value)) {
+				toReturn = new Set<string>(localModelValue.value)
 			}
-			modelValue.value = toReturn
+			return toReturn
 		},
-		{
-			immediate: true,
+		set: (newValue) => {
+			if (props.not) {
+				localModelValue.value = [...accordionNames].filter(
+					(name) => !newValue.has(name),
+				)
+				return
+			}
+			if (props.collapse) {
+				localModelValue.value = [...newValue]
+				return
+			}
+			localModelValue.value = newValue.values().next().value
 		},
-	)
+	})
+	onMounted(() => {
+		if (props.not && localModelValue.value === undefined) {
+			localModelValue.value = props.collapse
+				? []
+				: [...accordionNames.values()].splice(1, accordionNames.size)
+		}
+		nextTick(() => {
+			for (const name of accordionNames) {
+				bus.emit('toggle', {
+					name,
+					value: expandedAccordions.value.has(name),
+				})
+			}
+		})
+	})
 
 	// provide
 	const bus = mitt<AccordionGroupBusEvents>()
@@ -120,19 +128,22 @@
 		accordionNames.delete(name)
 	})
 	bus.on('toggle', ({ name, value }) => {
+		const newValue = new Set<string>(expandedAccordions.value)
 		if (value) {
 			if (!props.collapse) {
-				for (const item of modelValue.value) {
+				for (const item of newValue) {
 					if (item !== name) {
 						bus.emit('toggle', { name: item, value: false })
 					}
 				}
-				modelValue.value.clear()
+				newValue.clear()
 			}
-			modelValue.value.add(name)
+			newValue.add(name)
+			expandedAccordions.value = newValue
 			return
 		}
-		modelValue.value.delete(name)
+		newValue.delete(name)
+		expandedAccordions.value = newValue
 	})
 	const expand = (name?: string | string[]) => {
 		if (typeof name === 'string') {
@@ -169,7 +180,7 @@
 	bus.on('collapse', ({ name }) => collapse(name))
 
 	// expose
-	defineExpose({ modelValue, expand, collapse })
+	defineExpose({ expandedAccordions, expand, collapse })
 
 	// styles
 	const bemCssClasses = useModifiers(
@@ -186,7 +197,7 @@
 		<!-- @slot Default slot -->
 		<slot
 			v-bind="{
-				modelValue,
+				expandedAccordions,
 				expand,
 				collapse,
 			}"
@@ -200,13 +211,19 @@
 					content: item.content,
 				}"
 			>
-				<template #header="data">
+				<template
+					v-if="$slots[`summary::${item.name}`]"
+					#summary="data"
+				>
 					<!-- @slot Slot for accordion header -->
-					<slot v-bind="data" :name="`header::${item.name}`" />
+					<slot v-bind="data" :name="`summary::${item.name}`" />
 				</template>
-				<template #details="data">
+				<template
+					v-if="$slots[`content::${item.name}`]"
+					#default="data"
+				>
 					<!-- @slot Slot for accordion details -->
-					<slot v-bind="data" :name="`details::${item.name}`" />
+					<slot v-bind="data" :name="`content::${item.name}`" />
 				</template>
 			</VvAccordion>
 		</slot>

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,11 +10,13 @@ export interface VvAccordionGroupItem {
 
 export const VvAccordionGroupProps = {
 	...ModifiersProps,
+	...StorageProps,
 	/**
 	 * VModel
 	 */
 	modelValue: {
 		type: [String, Array] as PropType<string | string[] | undefined>,
+		default: undefined,
 	},
 	/**
 	 * Accordion items
@@ -43,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,39 @@
 		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),
+		)
+	})
+	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 +527,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 +606,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 }
 }