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

package/src/components/VvInputText/VvInputText.vue

@@ -9,12 +9,14 @@
 	import { useIMask } from 'vue-imask'
 	import HintSlotFactory from '../common/HintSlot'
 	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,
 		INPUT_TYPES,
-		TYPES_ICON,
 	} from '../VvInputText'
 
 	// props, emit, slots and attrs
@@ -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,14 @@
 		props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder,
 	)
 
-	// template refs
+	// debounce
+	const localModelValue = useDebouncedInput(
+		modelValue,
+		emit,
+		debounce?.value ?? 0,
+	)
+
+	// mask
 	const maskReady = ref(false)
 	const { el, mask, typed, masked, unmasked } = useIMask(
 		computed(
@@ -147,20 +159,32 @@
 			},
 		},
 	)
+	const updateMaskValue = (newValue: string | number | undefined) => {
+		if (iMask) {
+			if (newValue === undefined) {
+				typed.value = ''
+				unmasked.value = ''
+				return
+			}
+			if (iMask.value?.mask === Date) {
+				typed.value = new Date(newValue)
+				return
+			}
+			typed.value = newValue
+			unmasked.value = `${typed.value}`
+		}
+	}
 	onMounted(() => {
 		if (mask.value) {
 			maskReady.value = true
-			typed.value = localModelValue.value ?? ''
+			updateMaskValue(props.modelValue)
 		}
 	})
 	watch(
 		() => props.modelValue,
 		(newValue) => {
 			if (mask.value) {
-				typed.value =
-					newValue && iMask?.value?.mask === Date
-						? new Date(newValue)
-						: newValue ?? ''
+				updateMaskValue(newValue)
 			}
 		},
 	)
@@ -170,18 +194,15 @@
 			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 })
 
-	// debounce
-	const localModelValue = useDebouncedInput(
-		modelValue,
-		emit,
-		debounce?.value ?? 0,
-	)
-
 	// focus
 	const { focused } = useComponentFocus(inputEl, emit)
 	const isFocused = computed(
@@ -191,6 +212,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
@@ -227,7 +268,7 @@
 				return
 			}
 			inputEl.value.stepUp()
-			localModelValue.value = unref(inputEl).value
+			localModelValue.value = Number(unref(inputEl).value)
 		}
 	}
 	const onStepDown = () => {
@@ -238,7 +279,7 @@
 				return
 			}
 			inputEl.value.stepDown()
-			localModelValue.value = unref(inputEl).value
+			localModelValue.value = Number(unref(inputEl).value)
 		}
 	}
 
@@ -249,25 +290,26 @@
 	}
 
 	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
-	const defaultAfterIcon = computed(() => {
+	const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
+	const iconAfter = computed(() => {
+		if (hasIconAfter.value !== undefined) {
+			return hasIconAfter.value
+		}
 		switch (props.type) {
 			case INPUT_TYPES.COLOR:
-				return { name: TYPES_ICON.COLOR }
+				return { name: ACTION_ICONS.showColorPicker }
 			case INPUT_TYPES.DATE:
 			case INPUT_TYPES.DATETIME_LOCAL:
 			case INPUT_TYPES.WEEK:
 			case INPUT_TYPES.MONTH:
-				return { name: TYPES_ICON.DATE }
+				return { name: ACTION_ICONS.showDatePicker }
 			case INPUT_TYPES.TIME:
-				return { name: TYPES_ICON.TIME }
-			default:
-				return ''
+				return { name: ACTION_ICONS.showTimePicker }
 		}
+		return undefined
 	})
+	const { hasIcon: hasIconRemoveSuggestion } =
+		useComponentIcon(iconRemoveSuggestion)
 
 	// count
 	const { formatted: countFormatted } = useTextCount(localModelValue, {
@@ -296,6 +338,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(
@@ -307,8 +384,8 @@
 			loading: loading.value,
 			disabled: props.disabled,
 			readonly: props.readonly,
-			'icon-before': hasIconBefore.value,
-			'icon-after': hasIconAfter.value || !isEmpty(defaultAfterIcon),
+			'icon-before': !!hasIconBefore.value,
+			'icon-after': !!iconAfter.value,
 			floating: props.floating && !isEmpty(props.label),
 			dirty: isDirty.value,
 			focus: isFocused.value,
@@ -464,7 +541,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" />
@@ -476,8 +553,8 @@
 			>
 				<VvIcon
 					v-if="hasIconBefore"
+					v-bind="hasIconBefore"
 					class="vv-input-text__icon"
-					v-bind="hasIcon"
 				/>
 				<input
 					:id="hasId"
@@ -500,9 +577,9 @@
 			</div>
 			<!-- @slot Slot to replace right icon -->
 			<VvIcon
-				v-if="hasIconAfter || defaultAfterIcon"
+				v-if="iconAfter"
+				v-bind="iconAfter"
 				class="vv-input-text__icon vv-input-text__icon-after"
-				v-bind="hasIconAfter ? hasIcon : defaultAfterIcon"
 			/>
 			<PasswordInputActions
 				v-else-if="isPassword && !hideActions && isClickable"
@@ -543,5 +620,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,7 @@
 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 = {
 	TEXT: 'text',
@@ -19,15 +20,6 @@ export const INPUT_TYPES = {
 } as const
 export type InputType = ValueOf<typeof INPUT_TYPES>
 
-export const TYPES_ICON = {
-	PASSWORD_SHOW: 'eye-on',
-	PASSWORD_HIDE: 'eye-off',
-	DATE: 'calendar',
-	TIME: 'time',
-	COLOR: 'color',
-	SEARCH: 'close',
-} as const
-
 export const VvInputTextEvents = [
 	'update:modelValue',
 	'update:masked',
@@ -48,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
@@ -98,24 +91,32 @@ export const VvInputTextProps = {
 	 * @see VVIcon
 	 */
 	iconShowPassword: {
-		type: String,
-		default: TYPES_ICON.PASSWORD_SHOW,
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: ACTION_ICONS.showPassword,
 	},
 	/**
 	 * VvIcon name for hide password button
 	 * @see VVIcon
 	 */
 	iconHidePassword: {
-		type: String,
-		default: TYPES_ICON.PASSWORD_HIDE,
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: ACTION_ICONS.hidePassword,
 	},
 	/**
 	 * VvIcon name for clear button
 	 * @see VVIcon
 	 */
 	iconClear: {
-		type: String,
-		default: TYPES_ICON.SEARCH,
+		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
@@ -152,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
@@ -194,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/components/VvNav/VvNav.vue

@@ -32,12 +32,14 @@
 		>
 			<slot>
 				<VvNavItem
-					v-for="({ on = {}, ...item }, index) in items"
+					v-for="({ on = {}, data, ...item }, index) in items"
 					:key="index"
 					:data-index="index"
 					v-bind="item"
 					v-on="on"
-				/>
+				>
+					<slot name="item" v-bind="{ item, data, index }" />
+				</VvNavItem>
 			</slot>
 		</ul>
 	</nav>

package/src/components/VvRadio/index.ts

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, Ref } from 'vue'
+import type { ExtractPropTypes } from 'vue'
 import type { InputGroupState } from '../../types/group'
 import { CheckboxRadioProps } from '../../props'
 import { INJECTION_KEY_RADIO_GROUP } from '../../constants'
@@ -22,13 +22,13 @@ export function useGroupProps(
 
 	// global props
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
-	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
+	const valid = getGroupOrLocalRef('valid', props)
+	const invalid = getGroupOrLocalRef('invalid', props)
 	const readonly = computed(() =>
-		Boolean(props.readonly || group?.value?.readonly.value),
+		Boolean(props.readonly || group?.readonly.value),
 	)
 	const disabled = computed(() =>
-		Boolean(props.disabled || group?.value?.disabled.value),
+		Boolean(props.disabled || group?.disabled.value),
 	)
 
 	return {

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -29,8 +29,7 @@
 	const { disabled, readonly, vertical, valid, invalid, modifiers } =
 		toRefs(props)
 
-	useProvideGroupState<InputGroupState>({
-		key: INJECTION_KEY_RADIO_GROUP,
+	useProvideGroupState<InputGroupState>(INJECTION_KEY_RADIO_GROUP, {
 		modelValue,
 		disabled,
 		readonly,

package/src/components/VvSelect/VvSelect.vue

@@ -65,10 +65,7 @@
 	})
 
 	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
+	const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
 
 	// dirty
 	const isDirty = computed(() => !isEmpty(props.modelValue))
@@ -100,8 +97,8 @@
 			loading: loading.value,
 			disabled: disabled.value,
 			readonly: readonly.value,
-			'icon-before': hasIconBefore.value,
-			'icon-after': hasIconAfter.value,
+			'icon-before': hasIconBefore.value !== undefined,
+			'icon-after': hasIconAfter.value !== undefined,
 			dirty: isDirty.value,
 			focus: focused.value,
 			floating: floating.value,
@@ -174,8 +171,8 @@
 			<div class="vv-select__inner">
 				<VvIcon
 					v-if="hasIconBefore"
+					v-bind="hasIconBefore"
 					class="vv-select__icon"
-					v-bind="hasIcon"
 				/>
 				<select
 					:id="hasId"
@@ -219,8 +216,8 @@
 				</select>
 				<VvIcon
 					v-if="hasIconAfter"
+					v-bind="hasIconAfter"
 					class="vv-select__icon vv-select__icon-after"
-					v-bind="hasIcon"
 				/>
 			</div>
 			<div v-if="$slots.after" class="vv-select__input-after">

package/src/components/VvTab/VvTab.vue

@@ -59,7 +59,11 @@
 				modifiers: hasNavModifiers,
 			}"
 			@click="onNavClick"
-		/>
+		>
+			<template #item="{ item, data, index }">
+				<slot name="nav-item" v-bind="{ item, data, index }" />
+			</template>
+		</VvNav>
 		<!-- #endregion -->
 
 		<!-- #region panels -->

package/src/components/VvTextarea/VvTextarea.vue

@@ -52,10 +52,7 @@
 	const localModelValue = useDebouncedInput(modelValue, emit, debounce?.value)
 
 	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
+	const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
 
 	// focus
 	const { focused } = useComponentFocus(textarea, emit)
@@ -113,11 +110,11 @@
 			loading: loading.value,
 			disabled: props.disabled,
 			readonly: props.readonly,
-			'icon-before': hasIconBefore.value,
-			'icon-after': hasIconAfter.value,
+			'icon-before': hasIconBefore.value !== undefined,
+			'icon-after': hasIconAfter.value !== undefined,
 			floating: props.floating && !isEmpty(props.label),
 			dirty: isDirty.value,
-			focused: focused.value,
+			focus: focused.value,
 			resizable: props.resizable,
 		})),
 	)
@@ -180,8 +177,8 @@
 			<div class="vv-textarea__inner">
 				<VvIcon
 					v-if="hasIconBefore"
+					v-bind="hasIconBefore"
 					class="vv-textarea__icon"
-					v-bind="hasIcon"
 				/>
 				<textarea
 					:id="hasId"
@@ -192,8 +189,8 @@
 				/>
 				<VvIcon
 					v-if="hasIconAfter"
+					v-bind="hasIconAfter"
 					class="vv-textarea__icon vv-textarea__icon-after"
-					v-bind="hasIcon"
 				/>
 			</div>
 			<div v-if="$slots.after" class="vv-textarea__input-after">

package/src/components/index.ts

@@ -2,6 +2,9 @@ export { default as VvAccordion } from './VvAccordion/VvAccordion.vue'
 export { default as VvAccordionGroup } from './VvAccordionGroup/VvAccordionGroup.vue'
 export { default as VvAction } from './VvAction/VvAction.vue'
 export { default as VvAlert } from './VvAlert/VvAlert.vue'
+export { default as VvAlertGroup } from './VvAlertGroup/VvAlertGroup.vue'
+export { default as VvAvatar } from './VvAvatar/VvAvatar.vue'
+export { default as VvAvatarGroup } from './VvAvatarGroup/VvAvatarGroup.vue'
 export { default as VvBadge } from './VvBadge/VvBadge.vue'
 export { default as VvBreadcrumb } from './VvBreadcrumb/VvBreadcrumb.vue'
 export { default as VvButton } from './VvButton/VvButton.vue'
@@ -12,9 +15,15 @@ export { default as VvCheckboxGroup } from './VvCheckboxGroup/VvCheckboxGroup.vu
 export { default as VvCombobox } from './VvCombobox/VvCombobox.vue'
 export { default as VvDialog } from './VvDialog/VvDialog.vue'
 export { default as VvDropdown } from './VvDropdown/VvDropdown.vue'
+export { default as VvDropdownAction } from './VvDropdown/VvDropdownAction.vue'
+export { default as VvDropdownItem } from './VvDropdown/VvDropdownItem.vue'
+export { default as VvDropdownOptgroup } from './VvDropdown/VvDropdownOptgroup.vue'
+export { default as VvDropdownOption } from './VvDropdown/VvDropdownOption.vue'
 export { default as VvIcon } from './VvIcon/VvIcon.vue'
 export { default as VvInputText } from './VvInputText/VvInputText.vue'
 export { default as VvNav } from './VvNav/VvNav.vue'
+export { default as VvNavItem } from './VvNav/VvNavItem.vue'
+export { default as VvNavSeparator } from './VvNav/VvNavSeparator.vue'
 export { default as VvProgress } from './VvProgress/VvProgress.vue'
 export { default as VvRadio } from './VvRadio/VvRadio.vue'
 export { default as VvRadioGroup } from './VvRadioGroup/VvRadioGroup.vue'
@@ -22,3 +31,4 @@ export { default as VvSelect } from './VvSelect/VvSelect.vue'
 export { default as VvTab } from './VvTab/VvTab.vue'
 export { default as VvTextarea } from './VvTextarea/VvTextarea.vue'
 export { default as VvTooltip } from './VvTooltip/VvTooltip.vue'
+export { default as VvInputFile } from './VvInputFile/VvInputFile.vue'

package/src/composables/alert/useAlert.ts

@@ -6,11 +6,13 @@ import {
 	DEFAULT_ALERT_INFO_ICON,
 	DefaultAlertIconMap,
 } from '@/constants'
-import type { Alert, AlertModifiers } from '@/types/alert'
+import type { Alert, AlertModifier } from '@/types/alert'
+
+type AlertInGroup = Alert & { timestamp: number; group: string }
 
 const groups = reactive(
-	new Map<string, Map<string, Alert>>([
-		[DEFAULT_ALERT_GROUP, new Map<string, Alert>()],
+	new Map<string, Map<string, AlertInGroup>>([
+		[DEFAULT_ALERT_GROUP, new Map<string, AlertInGroup>()],
 	]),
 )
 
@@ -45,10 +47,11 @@ export const useAlert = () => {
 			modifiers = DEFAULT_ALERT_MODIFIERS,
 			dismissable = DEFAULT_ALERT_DISMISSABLE,
 			autoClose = DEFAULT_ALERT_AUTO_CLOSE,
-		} = {} as Partial<Alert>,
+			timestamp = Date.now(),
+		} = {} as Partial<AlertInGroup>,
 	) => {
 		if (!groups.has(group)) {
-			groups.set(group, new Map<string, Alert>())
+			groups.set(group, new Map<string, AlertInGroup>())
 		}
 		const groupMap = groups.get(group)
 		const normalizedModifiers =
@@ -56,8 +59,8 @@ export const useAlert = () => {
 
 		if (!icon) {
 			const alertModifier = normalizedModifiers.find((modifier) =>
-				DefaultAlertIconMap.has(modifier as AlertModifiers),
-			) as AlertModifiers | undefined
+				DefaultAlertIconMap.has(modifier as AlertModifier),
+			) as AlertModifier | undefined
 
 			if (alertModifier) {
 				icon = DefaultAlertIconMap.get(alertModifier) as string
@@ -73,7 +76,7 @@ export const useAlert = () => {
 			modifiers,
 			dismissable,
 			autoClose,
-			timestamp: Date.now(),
+			timestamp,
 		})
 	}
 
@@ -88,7 +91,7 @@ export const useAlert = () => {
 			return groupMap && groupMap instanceof Map
 				? Array.from(groupMap?.values()).sort(
 						(a, b) => a.timestamp - b.timestamp,
-				  )
+					)
 				: []
 		})
 	}

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