@volverjs/ui-vue 0.0.9-beta.17 → 0.0.9-beta.18

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),
@@ -235,12 +236,15 @@
 		} 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(
+			(acc, value) => {
+				if (isGroup(value)) {
+					return [...acc, ...getOptionGrouped(value)]
+				}
+				return [...acc, value]
+			},
+			[] as Array<Option | string>,
+		)
 
 		return options.filter((option) => {
 			if (isGroup(option)) {

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,29 +54,92 @@
 		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 (typeof typed.value !== 'number') {
+						localModelValue.value = Number(typed.value)
+						return
+					}
+					localModelValue.value = typed.value
+					return
+				}
+				if (type.value === INPUT_TYPES.DATE) {
+					let date = typed.value
+					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 (props.type === INPUT_TYPES.NUMBER) {
-					return Number(value)
+				if (type.value === INPUT_TYPES.DATETIME_LOCAL) {
+					let date = typed.value
+					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
 				}
-				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 ?? null
+			}
+		},
+	)
+	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)
@@ -118,12 +181,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
 		}
@@ -132,7 +204,7 @@
 	// search
 	const isSearch = computed(() => props.type === INPUT_TYPES.SEARCH)
 	const onClear = () => {
-		localModelValue.value = undefined
+		localModelValue.value = ''
 	}
 
 	// icons
@@ -158,9 +230,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
@@ -212,6 +284,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 = {
@@ -304,33 +379,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) {
@@ -348,6 +396,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>
@@ -373,10 +441,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"

package/src/components/VvInputText/index.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import type { MaskTokens } from 'maska'
+import type { FactoryOpts } from 'imask'
 import { InputTextareaProps } from '../../props'
 
 export const INPUT_TYPES = {
@@ -28,7 +28,23 @@ export const TYPES_ICON = {
 	SEARCH: 'close',
 } as const
 
-export const VvInputTextEvents = ['update:modelValue', 'focus', 'blur', 'keyup']
+export const VvInputTextEvents = [
+	'update:modelValue',
+	'update:masked',
+	'accept',
+	'accept:typed',
+	'accept:masked',
+	'accept:unmasked',
+	'complete',
+	'complete:typed',
+	'complete:masked',
+	'complete:unmasked',
+	'focus',
+	'blur',
+	'keyup',
+	'keydown',
+	'keypress',
+]
 
 export const VvInputTextProps = {
 	...InputTextareaProps,
@@ -137,45 +153,20 @@ export const VvInputTextProps = {
 		default: 'Clear',
 	},
 	/**
-	 * Input mask, only for text type
-	 * @see https://beholdr.github.io/maska/
+	 * iMask options
+	 * @see https://imask.js.org/guide.html
 	 */
-	mask: {
-		type: String,
+	iMask: {
+		type: Object as PropType<FactoryOpts>,
 		default: undefined,
 	},
 	/**
-	 * Show mask before typing
-	 * @see https://beholdr.github.io/maska/#/?id=maskinput-options
+	 * Masked value
 	 */
-	maskEager: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * Write values reverse (ex. for numbers)
-	 * @see https://beholdr.github.io/maska/#/?id=maskinput-options
-	 */
-	maskReversed: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * Add mask custom tokens
-	 * @see https://beholdr.github.io/maska/#/?id=custom-tokens
-	 */
-	maskTokens: {
-		type: Object as PropType<MaskTokens>,
+	masked: {
+		type: String,
 		default: undefined,
 	},
-	/**
-	 * Replace default tokens
-	 * @see https://beholdr.github.io/maska/#/?id=custom-tokens
-	 */
-	maskTokensReplace: {
-		type: Boolean,
-		default: false,
-	},
 	/**
 	 * Adjust input width to content
 	 */

package/src/components/VvTextarea/VvTextarea.vue

@@ -37,6 +37,9 @@
 		invalid,
 		loading,
 		modifiers,
+		debounce,
+		minlength,
+		maxlength,
 	} = toRefs(props)
 	const hasId = useUniqueId(id)
 	const hasHintId = computed(() => `${hasId.value}-hint`)
@@ -46,7 +49,7 @@
 	)
 
 	// debounce
-	const localModelValue = useDebouncedInput(modelValue, emit, props.debounce)
+	const localModelValue = useDebouncedInput(modelValue, emit, debounce?.value)
 
 	// icons
 	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
@@ -67,9 +70,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
@@ -143,7 +146,7 @@
 				'aria-errormessage': hasInvalidLabelOrSlot.value
 					? hasHintId.value
 					: undefined,
-			} as TextareaHTMLAttributes),
+			}) as TextareaHTMLAttributes,
 	)
 
 	// slots props

package/src/stories/InputText/InputText.settings.ts

@@ -174,42 +174,16 @@ export const argTypes = {
 			},
 		},
 	},
-	mask: {
-		description: 'Input mask, only for text type',
+	iMask: {
+		description: '[iMask](https://imask.js.org/guide.html) options',
 		control: {
-			type: 'text',
-		},
-	},
-	maskEager: {
-		description: 'Show mask before typing',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	maskReversed: {
-		description: 'Write typing reverse (ex. for numbers)',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	maskTokens: {
-		description: 'Add mask custom tokens',
-		table: {
-			defaultValue: {
-				summary: 'undefined',
-			},
+			type: 'object',
 		},
 	},
-	maskTokensReplace: {
-		description: 'Replace default tokens',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
+	masked: {
+		description: 'Masked input',
+		control: {
+			type: 'text',
 		},
 	},
 	autoWidth: {

package/src/stories/InputText/InputText.stories.ts

@@ -25,14 +25,15 @@ export const Default: Story = {
 		setup() {
 			return { args }
 		},
-		data: () => ({ inputValue: undefined }),
+		data: () => ({ inputValue: undefined, maskedInputValue: undefined }),
 		template: /* html */ `
-			<vv-input-text v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+			<vv-input-text v-bind="args" v-model="inputValue" v-model:masked="maskedInputValue" :data-testData="inputValue" data-testId="element">
 				<template #before v-if="args.before"><div class="flex" v-html="args.before"></div></template>
 				<template #after v-if="args.after"><div class="flex" v-html="args.after"></div></template>
 				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
 			</vv-input-text>
-			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+			<div>Value: <span data-testId="value">{{ inputValue }}</span></div> 
+			<div v-if="args.iMask" class="mt-sm">Masked Value: <span data-testId="masked-value">{{ maskedInputValue }}</span></div> 
 		`,
 	}),
 	play: defaultTest,
@@ -82,7 +83,6 @@ export const Hint: Story = {
 		...defaultArgs,
 		hintLabel: 'Please enter your name.',
 	},
-
 }
 
 export const Loading: Story = {
@@ -102,14 +102,6 @@ export const Floating: Story = {
 	},
 }
 
-export const Mask: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		mask: '##-###-##',
-	},
-}
-
 export const Unit: Story = {
 	...Default,
 	args: {

package/src/stories/InputText/InputText.test.ts

@@ -4,32 +4,48 @@ import { sleep } from '@/test/sleep'
 import { within, userEvent } from '@storybook/testing-library'
 import { INPUT_TYPES, type InputType } from '@/components/VvInputText'
 
-const valueByType = (type: InputType, mask?: string) => {
+const valueByType = (type: InputType, mask?: string, id?: string) => {
 	if (mask) {
-		return '1234567'
+		switch (id) {
+			case 'phone-number':
+				return { toType: '393923847556' }
+			case 'date-placeholder':
+				return { toType: '01011970', toCheck: '1970-01-01' }
+			case 'phone-or-email':
+				return {
+					toType:
+						Math.random() < 0.5 ? '393923847556' : 'test@test.com',
+				}
+			case 'intl-number':
+				return { toType: '1234567890.22' }
+			case 'currency':
+				return { toType: '1234567890.22' }
+			default:
+				return { toType: '1234567890' }
+		}
 	}
 	switch (type) {
 		case INPUT_TYPES.TEXT:
 		case INPUT_TYPES.PASSWORD:
 		case INPUT_TYPES.SEARCH:
-			return 'Lorem ipsum'
+			return { toType: 'Lorem ipsum' }
 		case INPUT_TYPES.NUMBER:
-			return '1'
+			return { toType: '1' }
 		case INPUT_TYPES.EMAIL:
-			return 'test@test.com'
+			return { toType: 'test@test.com' }
 		case INPUT_TYPES.TEL:
-			return '+1234567890'
+			return { toType: '+1234567890' }
 		case INPUT_TYPES.URL:
-			return 'https://www.test.com'
+			return { toType: 'https://www.test.com' }
 		case INPUT_TYPES.DATE:
-			return new Date().toISOString().split('T')[0]
+			return { toType: new Date().toISOString().split('T')[0] }
 		case INPUT_TYPES.TIME:
-			return '12:00'
+			return { toType: '12:00' }
 		case INPUT_TYPES.COLOR:
 		case INPUT_TYPES.DATETIME_LOCAL:
 		case INPUT_TYPES.MONTH:
 		case INPUT_TYPES.WEEK:
-			return undefined
+			return { toType: undefined }
 	}
 }
 
@@ -45,17 +61,17 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 
 	// value
 	if (!args.invalid && !args.disabled && !args.readonly) {
-		const inputValue = valueByType(args.type, args.mask)
-		if (inputValue) {
+		const { toType, toCheck } = valueByType(args.type, args.iMask, args.id)
+		if (toType) {
 			await expect(input).toBeClicked()
-			await userEvent.keyboard(inputValue)
+			await userEvent.keyboard(toType)
 			await sleep()
 			if (args.maxlength) {
 				await expect(value.innerHTML).toEqual(
-					inputValue.slice(0, args.maxlength),
+					toType.slice(0, args.maxlength),
 				)
 			} else {
-				await expect(value.innerHTML).toEqual(inputValue)
+				await expect(value.innerHTML).toEqual(toCheck ?? toType)
 			}
 		}
 	}