@volverjs/ui-vue 0.0.9-beta.9 → 0.0.10-beta.1

package/src/components/VvCombobox/VvCombobox.vue

@@ -12,6 +12,7 @@
 
 <script setup lang="ts">
 	import type { Ref } from 'vue'
+	import { toRefs } from 'vue'
 	import { VvComboboxProps, VvComboboxEvents } from '.'
 	import VvIcon from '../VvIcon/VvIcon.vue'
 	import VvDropdown from '../VvDropdown/VvDropdown.vue'
@@ -84,7 +85,7 @@
 	const searchText = ref('')
 	const debouncedSearchText = refDebounced(
 		searchText,
-		Number(props.debounceSearch),
+		computed(() => Number(props.debounceSearch)),
 	)
 	watch(debouncedSearchText, () =>
 		emit('change:search', debouncedSearchText.value),
@@ -105,7 +106,7 @@
 		expanded.value = false
 	}
 	const onAfterExpand = () => {
-		if (searchable.value) {
+		if (propsDefaults.value.searchable) {
 			if (inputSearchEl.value) {
 				inputSearchEl.value.focus({
 					preventScroll: true,
@@ -114,7 +115,7 @@
 		}
 	}
 	const onAfterCollapse = () => {
-		if (searchable.value) {
+		if (propsDefaults.value.searchable) {
 			searchText.value = ''
 		}
 	}
@@ -131,7 +132,6 @@
 		valid,
 		invalid,
 		floating,
-		searchable,
 	} = toRefs(props)
 	const hasId = useUniqueId(id)
 	const hasHintId = computed(() => `${hasId.value}-hint`)
@@ -139,6 +139,10 @@
 	const hasSearchId = computed(() => `${hasId.value}-search`)
 	const hasLabelId = computed(() => `${hasId.value}-label`)
 
+	// loading
+	const localLoading = ref(false)
+	const isLoading = computed(() => localLoading.value || loading.value)
+
 	// ref
 	const dropdownEl = ref()
 
@@ -162,7 +166,7 @@
 		modifiers,
 		computed(() => ({
 			disabled: disabled.value,
-			loading: loading.value,
+			loading: isLoading.value,
 			readonly: readonly.value,
 			'icon-before': Boolean(hasIconBefore.value),
 			'icon-after': Boolean(hasIconAfter.value),
@@ -178,12 +182,23 @@
 	const {
 		getOptionLabel,
 		getOptionValue,
-		getOptionDisabled,
 		getOptionGrouped,
+		isOptionDisabled,
 	} = useOptions(props)
 
 	// options filtered by search text
-	const filteredOptions = computed(() => {
+	const filteredOptions = computedAsync(async () => {
+		if (propsDefaults.value.searchFunction) {
+			localLoading.value = true
+			const toReturn = await Promise.resolve(
+				propsDefaults.value.searchFunction(
+					debouncedSearchText.value,
+					props.options,
+				),
+			)
+			localLoading.value = false
+			return toReturn
+		}
 		return props.options?.filter((option) => {
 			return getOptionLabel(option)
 				.toLowerCase()
@@ -195,7 +210,7 @@
 	 * Check if an option exist into modelValue array (multiple) or is equal to modelValue (single)
 	 * @param {String | Option} option
 	 */
-	function getOptionSelected(option: string | Option) {
+	function isOptionSelected(option: string | Option) {
 		if (Array.isArray(props.modelValue)) {
 			// check if contain whole option or option value
 			return (
@@ -215,26 +230,17 @@
 	 * Check if is multiple mode, object mode or "string" mode
 	 */
 	const selectedOptions = computed(() => {
-		let selectedValues: Array<typeof props.modelValue> = []
-		if (Array.isArray(props.modelValue)) {
-			selectedValues = props.modelValue as Array<typeof props.modelValue>
-		} else if (props.modelValue) {
-			selectedValues = [props.modelValue]
-		}
-		const options = props.options.reduce((acc, value) => {
-			if (isGroup(value)) {
-				return [...acc, ...getOptionGrouped(value)]
-			}
-			return [...acc, value]
-		}, [] as Array<Option | string>)
-
+		const options = props.options.reduce<Array<Option | string>>(
+			(acc, value) => {
+				if (isGroup(value)) {
+					return [...acc, ...getOptionGrouped(value)]
+				}
+				return [...acc, value]
+			},
+			[],
+		)
 		return options.filter((option) => {
-			if (isGroup(option)) {
-				return getOptionGrouped(option).some((item) =>
-					selectedValues.includes(getOptionValue(item)),
-				)
-			}
-			return selectedValues.includes(getOptionValue(option))
+			return isOptionSelected(option)
 		})
 	})
 
@@ -304,7 +310,7 @@
 		invalid: invalid.value,
 		invalidLabel: propsDefaults.value.invalidLabel,
 		hintLabel: propsDefaults.value.hintLabel,
-		loading: loading.value,
+		loading: isLoading.value,
 		loadingLabel: propsDefaults.value.loadingLabel,
 		disabled: disabled.value,
 		readonly: readonly.value,
@@ -333,7 +339,7 @@
 		flip: propsDefaults.value.flip,
 		autoPlacement: propsDefaults.value.autoPlacement,
 		arrow: propsDefaults.value.arrow,
-		autofocusFirst: searchable.value
+		autofocusFirst: propsDefaults.value.searchable
 			? true
 			: propsDefaults.value.autofocusFirst,
 		triggerWidth: propsDefaults.value.triggerWidth,
@@ -369,7 +375,7 @@
 		<label
 			v-if="label"
 			:id="hasLabelId"
-			:for="searchable ? hasSearchId : undefined"
+			:for="propsDefaults.searchable ? hasSearchId : undefined"
 		>
 			{{ label }}
 		</label>
@@ -383,13 +389,15 @@
 				@after-collapse="onAfterCollapse"
 			>
 				<template
-					v-if="searchable || $slots['dropdown::before']"
+					v-if="
+						propsDefaults.searchable || $slots['dropdown::before']
+					"
 					#before
 				>
 					<!-- @slot Slot before dropdown items -->
 					<slot name="dropdown::before" />
 					<input
-						v-if="searchable"
+						v-if="propsDefaults.searchable && !disabled"
 						:id="hasSearchId"
 						ref="inputSearchEl"
 						v-model="searchText"
@@ -460,6 +468,7 @@
 											:aria-label="
 												propsDefaults.deselectActionLabel
 											"
+											type="button"
 											@click.stop="onInput(option)"
 										>
 											<VvIcon name="close" />
@@ -483,7 +492,7 @@
 					</div>
 				</template>
 				<template #items>
-					<template v-if="filteredOptions.length">
+					<template v-if="!disabled && filteredOptions?.length">
 						<template
 							v-for="(option, index) in filteredOptions"
 							:key="index"
@@ -497,8 +506,8 @@
 										option,
 									)"
 									v-bind="{
-										disabled: getOptionDisabled(item),
-										selected: getOptionSelected(item),
+										selected: isOptionSelected(item),
+										disabled: isOptionDisabled(item),
 										unselectable,
 										deselectHintLabel:
 											propsDefaults.deselectHintLabel,
@@ -517,8 +526,8 @@
 										v-bind="{
 											option,
 											selectedOptions,
-											selected: getOptionSelected(item),
-											disabled: getOptionDisabled(item),
+											selected: isOptionSelected(item),
+											disabled: isOptionDisabled(item),
 										}"
 									>
 										{{ getOptionLabel(item) }}
@@ -528,8 +537,8 @@
 							<VvDropdownOption
 								v-else
 								v-bind="{
-									disabled: getOptionDisabled(option),
-									selected: getOptionSelected(option),
+									selected: isOptionSelected(option),
+									disabled: isOptionDisabled(option),
 									unselectable,
 									deselectHintLabel:
 										propsDefaults.deselectHintLabel,
@@ -547,8 +556,8 @@
 									v-bind="{
 										option,
 										selectedOptions,
-										selected: getOptionSelected(option),
-										disabled: getOptionDisabled(option),
+										selected: isOptionSelected(option),
+										disabled: isOptionDisabled(option),
 									}"
 								>
 									{{ getOptionLabel(option) }}
@@ -565,7 +574,7 @@
 							{{ propsDefaults.noOptionsLabel }}
 						</slot>
 					</VvDropdownOption>
-					<VvDropdownOption v-else modifiers="inert">
+					<VvDropdownOption v-else-if="!disabled" modifiers="inert">
 						<!-- @slot Slot for no results available -->
 						<slot name="no-results">
 							{{ propsDefaults.noResultsLabel }}

package/src/components/VvCombobox/index.ts

@@ -16,6 +16,7 @@ import {
 	DropdownProps,
 	LabelProps,
 } from '../../props'
+import type { Option } from '../../types/generic'
 
 export const VvComboboxEvents = [
 	'update:modelValue',
@@ -90,6 +91,18 @@ export const VvComboboxProps = {
 	 * Use input text to search on options
 	 */
 	searchable: Boolean,
+	/**
+	 * Search function to filter options
+	 */
+	searchFunction: {
+		type: Function as PropType<
+			(
+				search: string,
+				options: (Option | string)[],
+			) => (Option | string)[] | Promise<(Option | string)[]>
+		>,
+		default: undefined,
+	},
 	/**
 	 * On searchable select is the input search placeholder
 	 */

package/src/components/VvDialog/VvDialog.vue

@@ -49,12 +49,16 @@
 	const transitioName = computed(() => `vv-dialog--${props.transition}`)
 	const dialogTransitionHandlers = {
 		'before-enter': () => {
-			dialogEl.value?.showModal()
+			if (!dialogEl.value?.open) {
+				dialogEl.value?.showModal()
+			}
 			emit('open')
 			emit('before-enter')
 		},
 		'after-leave': () => {
-			dialogEl.value?.close()
+			if (dialogEl.value?.open) {
+				dialogEl.value?.close()
+			}
 			emit('close')
 			emit('after-leave')
 		},

package/src/components/VvDropdown/VvDropdown.vue

@@ -25,6 +25,7 @@
 		ShiftOptions,
 		SizeOptions,
 	} from '../../types/floating-ui'
+	import { Side, Strategy } from '../../constants'
 
 	// props, emit and attrs
 	const props = defineProps(VvDropdownProps)
@@ -96,7 +97,7 @@
 			}
 		} else if (props.flip) {
 			if (typeof props.flip === 'boolean') {
-				toReturn.push(flip())
+				toReturn.push(flip({ fallbackStrategy: 'initialPlacement' }))
 			} else {
 				toReturn.push(flip(props.flip as FlipOptions))
 			}
@@ -157,13 +158,13 @@
 
 		return toReturn
 	})
-	const { x, y, strategy, middlewareData, placement } = useFloating(
+	const { x, y, middlewareData, placement, strategy } = useFloating(
 		referenceEl,
 		floatingEl,
 		{
 			whileElementsMounted: (...args) => {
 				return autoUpdate(...args, {
-					animationFrame: props.strategy === 'fixed',
+					animationFrame: props.strategy === Strategy.fixed,
 				})
 			},
 			placement: computed(() => props.placement),
@@ -175,16 +176,17 @@
 		if (hasCustomPosition.value) {
 			return undefined
 		}
+		const width =
+			props.triggerWidth && referenceEl.value
+				? `${referenceEl.value?.offsetWidth}px`
+				: undefined
 		return {
 			position: strategy.value,
 			top: `${y.value ?? 0}px`,
 			left: `${x.value ?? 0}px`,
-			maxWidth: maxWidth.value,
+			maxWidth: width ? undefined : maxWidth.value,
 			maxHeight: maxHeight.value,
-			width:
-				props.triggerWidth && referenceEl.value
-					? `${referenceEl.value.offsetWidth}px`
-					: undefined,
+			width,
 		}
 	})
 
@@ -192,20 +194,20 @@
 	const side = computed(
 		() =>
 			placement.value.split('-')[0] as
-				| 'top'
-				| 'right'
-				| 'bottom'
-				| 'left',
+				| Side.top
+				| Side.right
+				| Side.bottom
+				| Side.left,
 	)
 	const arrowPlacement = computed(() => {
 		if (hasCustomPosition.value) {
 			return undefined
 		}
 		const staticSide = {
-			top: 'bottom',
-			right: 'left',
-			bottom: 'top',
-			left: 'right',
+			[Side.top]: Side.bottom,
+			[Side.right]: Side.left,
+			[Side.bottom]: Side.top,
+			[Side.left]: Side.right,
 		}[side.value]
 		return {
 			left:

package/src/components/VvInputText/VvInputText.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 	import type { InputHTMLAttributes } from 'vue'
-	import { Mask } from 'maska'
+	import { useIMask } from 'vue-imask'
 	import HintSlotFactory from '../common/HintSlot'
 	import VvIcon from '../VvIcon/VvIcon.vue'
 	import VvInputTextActionsFactory from '../VvInputText/VvInputTextActions'
@@ -29,12 +29,6 @@
 		props,
 	)
 
-	// template refs
-	const inputEl = ref()
-	const innerEl = ref()
-
-	defineExpose({ $inner: innerEl })
-
 	// data
 	const {
 		id,
@@ -46,6 +40,12 @@
 		valid,
 		invalid,
 		loading,
+		debounce,
+		maxlength,
+		minlength,
+		type,
+		iMask,
+		step,
 	} = toRefs(props)
 	const hasId = useUniqueId(id)
 	const hasHintId = computed(() => `${hasId.value}-hint`)
@@ -54,35 +54,144 @@
 		props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder,
 	)
 
-	// debounce
-	const localModelValue = useDebouncedInput(
-		modelValue,
-		emit,
-		props.debounce,
+	// template refs
+	const maskReady = ref(false)
+	const { el, mask, typed, masked, unmasked } = useIMask(
+		computed(
+			() =>
+				iMask?.value ?? {
+					mask: /./,
+				},
+		),
 		{
-			getter: (value) => {
-				if (mask.value) {
-					return mask.value.masked(value ?? '')
+			emit,
+			onAccept: () => {
+				if (!maskReady.value) {
+					return
 				}
-				return value
-			},
-			setter: (value) => {
-				if (mask.value) {
-					value = mask.value.unmasked(value)
+				emit('update:masked', masked.value)
+				if (type.value === INPUT_TYPES.NUMBER) {
+					if (masked.value === '') {
+						if (
+							localModelValue.value === null ||
+							localModelValue.value === undefined
+						) {
+							return
+						}
+						localModelValue.value = undefined
+						return
+					}
+					if (typeof typed.value !== 'number') {
+						localModelValue.value = Number(typed.value)
+						return
+					}
+					localModelValue.value = typed.value
+					return
+				}
+				if (type.value === INPUT_TYPES.DATE) {
+					if (
+						el.value instanceof HTMLInputElement &&
+						el.value.type === 'date'
+					) {
+						localModelValue.value = el.value.value
+						return
+					}
+					let date = typed.value
+					if (date === null || date === '') {
+						if (!localModelValue.value) {
+							return
+						}
+						localModelValue.value = ''
+						return
+					}
+					if (!(date instanceof Date)) {
+						date = new Date(date)
+					}
+					localModelValue.value = `${date.getFullYear()}-${(
+						'0' +
+						(date.getMonth() + 1)
+					).slice(-2)}-${('0' + date.getDate()).slice(-2)}`
+					return
+				}
+				if (type.value === INPUT_TYPES.DATETIME_LOCAL) {
+					if (
+						el.value instanceof HTMLInputElement &&
+						el.value.type === 'datetime-local'
+					) {
+						localModelValue.value = el.value.value
+						return
+					}
+					let date = typed.value
+					if (date === null || date === '') {
+						if (!localModelValue.value) {
+							return
+						}
+						localModelValue.value = ''
+						return
+					}
+					if (!(typed.value instanceof Date)) {
+						date = new Date(date)
+					}
+					localModelValue.value = `${date.getFullYear()}-${(
+						'0' +
+						(date.getMonth() + 1)
+					).slice(-2)}-${('0' + date.getDate()).slice(-2)}T${(
+						'0' + date.getHours()
+					).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`
+					return
 				}
-				if (props.type === INPUT_TYPES.NUMBER) {
-					return Number(value)
+				if (!localModelValue.value && !unmasked.value) {
+					return
 				}
-				return value
+				localModelValue.value = unmasked.value
 			},
 		},
 	)
+	onMounted(() => {
+		if (mask.value) {
+			maskReady.value = true
+			typed.value = localModelValue.value ?? ''
+		}
+	})
+	watch(
+		() => props.modelValue,
+		(newValue) => {
+			if (mask.value) {
+				typed.value =
+					newValue && iMask?.value?.mask === Date
+						? new Date(newValue)
+						: newValue ?? ''
+			}
+		},
+	)
+	watch(
+		() => props.masked,
+		(newValue) => {
+			masked.value = newValue ?? ''
+		},
+	)
+	const inputEl = el as Ref<HTMLInputElement>
+	const innerEl = ref()
+
+	defineExpose({ $inner: innerEl })
+
+	// debounce
+	const localModelValue = useDebouncedInput(
+		modelValue,
+		emit,
+		debounce?.value ?? 0,
+	)
 
 	// focus
 	const { focused } = useComponentFocus(inputEl, emit)
 	const isFocused = computed(
 		() => focused.value && !props.disabled && !props.readonly,
 	)
+	watch(isFocused, (newValue) => {
+		if (newValue && propsDefaults.value.selectOnFocus && inputEl.value) {
+			inputEl.value.select()
+		}
+	})
 
 	// visibility
 	const isVisible = useElementVisibility(inputEl)
@@ -113,12 +222,21 @@
 	const isNumber = computed(() => props.type === INPUT_TYPES.NUMBER)
 	const onStepUp = () => {
 		if (isClickable.value) {
+			if (iMask?.value) {
+				typed.value = typed.value + Number(step?.value ?? 1)
+				return
+			}
 			inputEl.value.stepUp()
 			localModelValue.value = unref(inputEl).value
 		}
 	}
 	const onStepDown = () => {
 		if (isClickable.value) {
+			if (iMask?.value) {
+				typed.value = typed.value - Number(step?.value ?? 1)
+
+				return
+			}
 			inputEl.value.stepDown()
 			localModelValue.value = unref(inputEl).value
 		}
@@ -127,7 +245,7 @@
 	// search
 	const isSearch = computed(() => props.type === INPUT_TYPES.SEARCH)
 	const onClear = () => {
-		localModelValue.value = undefined
+		localModelValue.value = ''
 	}
 
 	// icons
@@ -153,9 +271,9 @@
 
 	// count
 	const { formatted: countFormatted } = useTextCount(localModelValue, {
-		mode: props.count,
-		upperLimit: Number(props.maxlength),
-		lowerLimit: Number(props.minlength),
+		mode: count.value,
+		upperLimit: Number(maxlength?.value),
+		lowerLimit: Number(minlength?.value),
 	})
 
 	// tabindex
@@ -207,6 +325,9 @@
 			if (isDateTime.value && !isDirty.value && !focused.value) {
 				return INPUT_TYPES.TEXT
 			}
+			if (iMask?.value) {
+				return INPUT_TYPES.TEXT
+			}
 			return props.type
 		})()
 		const toReturn: InputHTMLAttributes = {
@@ -299,33 +420,6 @@
 		props,
 	)
 
-	// mask
-	const mask = ref()
-	watch(
-		[
-			() => props.mask,
-			() => props.type,
-			() => props.maskEager,
-			() => props.maskReversed,
-			() => props.maskTokens,
-			() => props.maskTokensReplace,
-		],
-		([newMask, newType, eager, reversed, tokens, tokensReplace]) => {
-			if (newMask && newType === INPUT_TYPES.TEXT) {
-				mask.value = new Mask({
-					mask: newMask,
-					eager,
-					reversed,
-					tokens,
-					tokensReplace,
-				})
-				return
-			}
-			mask.value = undefined
-		},
-		{ immediate: true },
-	)
-
 	// auto-width
 	const onClickInner = () => {
 		if (isClickable.value) {
@@ -343,6 +437,26 @@
 					: undefined,
 		}
 	})
+
+	// keydown
+	const onKeyDown = (event: KeyboardEvent) => {
+		switch (event.code) {
+			case 'ArrowUp':
+				if (isNumber.value) {
+					onStepUp()
+					event.preventDefault()
+				}
+				break
+
+			case 'ArrowDown':
+				if (isNumber.value) {
+					onStepDown()
+					event.preventDefault()
+				}
+				break
+		}
+		emit('keydown', event)
+	}
 </script>
 
 <template>
@@ -368,10 +482,11 @@
 				<input
 					:id="hasId"
 					ref="inputEl"
-					v-model="localModelValue"
 					v-bind="hasAttrs"
 					:style="hasStyle"
 					@keyup="emit('keyup', $event)"
+					@keydown="onKeyDown"
+					@keypress="emit('keypress', $event)"
 				/>
 				<div
 					v-if="(unit || $slots.unit) && isDirty"