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

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
-	 */
-	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
+	 * Masked value
 	 */
-	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
 	 */
@@ -196,6 +187,13 @@ export const VvInputTextProps = {
 	unit: {
 		type: String,
 	},
+	/**
+	 * Select input text on focus
+	 */
+	selectOnFocus: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export type VvInputTextPropsTypes = ExtractPropTypes<typeof VvInputTextProps>

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/constants.ts

@@ -5,6 +5,11 @@ import type { AlertModifiers } from './types/alert'
 
 export const DEFAULT_ICONIFY_PROVIDER = 'vv'
 
+export enum Strategy {
+	absolute = 'absolute',
+	fixed = 'fixed',
+}
+
 export enum Side {
 	left = 'left',
 	right = 'right',

package/src/props/index.ts

@@ -9,6 +9,7 @@ import type {
 } from '../types/floating-ui'
 import {
 	Placement,
+	Strategy,
 	Position,
 	Side,
 	AnchorTarget,
@@ -228,22 +229,17 @@ export const DropdownProps = {
 	placement: {
 		type: String as PropType<`${Side}` | `${Placement}`>,
 		default: Side.bottom,
-		validator: (value: Side & Placement) => {
-			return (
-				Object.values(Side).includes(value) ||
-				Object.values(Placement).includes(value)
-			)
-		},
+		validator: (value: Side & Placement) =>
+			Object.values(Side).includes(value) ||
+			Object.values(Placement).includes(value),
 	},
 	/**
 	 * Dropdown strategy
 	 */
 	strategy: {
-		type: String as PropType<'fixed' | 'absolute'>,
-		default: 'absolute',
-		validator: (value: 'fixed' | 'absolute') => {
-			return ['fixed', 'absolute'].includes(value)
-		},
+		type: String as PropType<`${Strategy}`>,
+		default: undefined,
+		validator: (value: Strategy) => Object.values(Strategy).includes(value),
 	},
 	/**
 	 * Dropdown show / hide transition name

package/src/stories/Combobox/Combobox.settings.ts

@@ -187,6 +187,14 @@ export const argTypes = {
 			},
 		},
 	},
+	searchFunction: {
+		description: 'Search function to filter options',
+		table: {
+			defaultValue: {
+				summary: undefined,
+			},
+		},
+	},
 	searchPlaceholder: {
 		description:
 			'Text that appears in the in the search input when it has no value set..',

package/src/stories/Combobox/Combobox.test.ts

@@ -62,7 +62,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 		}
 
 		// select second value
-		if (args.options.length > 1) {
+		if (args.options && args.options.length > 1) {
 			await expect(dropdownSecondItem).toBeClicked()
 			await sleep()
 			const secondValue = getOptionValue(

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

@@ -174,43 +174,64 @@ export const argTypes = {
 			},
 		},
 	},
-	mask: {
-		description: 'Input mask, only for text type',
-
+	iMask: {
+		description: '[iMask](https://imask.js.org/guide.html) options',
+		control: {
+			type: 'object',
+		},
+	},
+	masked: {
+		description: 'Masked input',
 		control: {
 			type: 'text',
 		},
 	},
-	maskEager: {
-		description: 'Show mask before typing',
+	autoWidth: {
+		description: 'Adjust input width to content',
+		control: {
+			type: 'boolean',
+		},
 		table: {
 			defaultValue: {
 				summary: false,
 			},
+			type: {
+				summary: 'boolean',
+			},
 		},
 	},
-	maskReversed: {
-		description: 'Write typing reverse (ex. for numbers)',
+	hideActions: {
+		description: 'Hide type number, password and search actions',
+		control: {
+			type: 'boolean',
+		},
 		table: {
 			defaultValue: {
 				summary: false,
 			},
+			type: {
+				summary: 'boolean',
+			},
 		},
 	},
-	maskTokens: {
-		description: 'Add mask custom tokens',
-		table: {
-			defaultValue: {
-				summary: 'undefined',
-			},
+	unit: {
+		description: 'Add unit label to input',
+		control: {
+			type: 'text',
 		},
 	},
-	maskTokensReplace: {
-		description: 'Replace default tokens',
+	selectOnFocus: {
+		description: 'Select input text on focus',
+		control: {
+			type: 'boolean',
+		},
 		table: {
 			defaultValue: {
 				summary: false,
 			},
+			type: {
+				summary: 'boolean',
+			},
 		},
 	},
 	before: {

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

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

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { Default } from './InputText.stories'
+import { defaultArgs, argTypes } from './InputText.settings'
+
+const meta: Meta<typeof VvInputText> = {
+	title: 'Components/InputText/Mask',
+	component: VvInputText,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputText>
+
+export const RegExp: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		id: 'regexp',
+		iMask: {
+			mask: /^\d+$/,
+		},
+	},
+}
+
+export const PhoneNumber: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		id: 'phone-number',
+		iMask: {
+			mask: '+{39}(000)000-00-00',
+		},
+	},
+}
+
+export const Pattern: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		id: 'pattern',
+		iMask: {
+			mask: 'XXX-XX-00000',
+			definitions: {
+				X: {
+					mask: '0',
+					displayChar: 'X',
+					placeholderChar: '#',
+				},
+			},
+			lazy: false,
+			overwrite: 'shift',
+		},
+	},
+}
+
+export const IntlNumber: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		id: 'intl-number',
+		type: 'number',
+		iMask: {
+			mask: Number,
+			thousandsSeparator: '.',
+			radix: ',',
+		},
+	},
+}
+
+export const DatePlaceholder: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		id: 'date-placeholder',
+		type: 'date',
+		iMask: {
+			mask: Date,
+			pattern: 'd.m.Y',
+			lazy: false,
+		},
+	},
+}
+
+export const PhoneOrEmail: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		id: 'phone-or-email',
+		iMask: {
+			mask: [
+				{
+					mask: '+{39}(000)000-00-00',
+				},
+				{
+					mask: /^\S*@?\S*$/,
+				},
+			],
+		},
+	},
+}
+
+export const Currency: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		id: 'currency',
+		type: 'number',
+		iMask: {
+			mask: '€ num',
+			blocks: {
+				num: {
+					mask: Number,
+					thousandsSeparator: '.',
+					radix: ',',
+				},
+			},
+		},
+	},
+}