@volverjs/ui-vue 0.0.9-beta.2 → 0.0.9-beta.21

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: ',',
+				},
+			},
+		},
+	},
+}

package/src/stories/Nav/Nav.settings.ts

@@ -1,7 +1,9 @@
+import type { Meta } from '@storybook/vue3'
+import type { VvNav } from '@/components'
 import { VvNavProps } from '@/components/VvNav'
 import { ModifiersArgTypes } from '@/stories/argTypes'
 
-export const defaultArgs = {
+export const defaultArgs: Meta<typeof VvNav>['args'] = {
 	...propsToObject(VvNavProps),
 	items: [
 		{

package/src/stories/Tab/Tab.stories.ts

@@ -20,9 +20,9 @@ export const Default: Story = {
 		...defaultArgs,
 	},
 	render: (args) => ({
-		components: {VvTab},
+		components: { VvTab },
 		setup() {
-			return {args}
+			return { args }
 		},
 		template: /* html */ `
 			<div class="m-md w-1/2">
@@ -64,7 +64,7 @@ export const Default: Story = {
 						</p>
 					</template>
 				</vv-tab>
-			</div>`
+			</div>`,
 	}),
 	play: defaultTest,
 }

package/src/stories/Textarea/TextareaLength.stories.ts

@@ -35,7 +35,7 @@ export const Count: Story = {
 	args: {
 		...Default.args,
 		count: true,
-		minLength: 100,
+		minlength: 100,
 	},
 }
 

package/src/types/alert.d.ts

@@ -0,0 +1,20 @@
+export type AlertModifiers =
+	| 'success'
+	| 'info'
+	| 'warning'
+	| 'danger'
+	| 'brand'
+	| 'accent'
+
+export type Alert = {
+	id: string | number
+	group: string
+	title?: string
+	icon: string | Record<string, unknown>
+	content?: string
+	footer?: string
+	modifiers: AlertModifiers
+	dismissable: boolean
+	autoClose: number
+	timestamp: number
+}