@volverjs/ui-vue 0.0.10-beta.9 → 0.0.11

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

@@ -1,113 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvInputText from '@/components/VvInputText/VvInputText.vue'
-import { defaultArgs, argTypes } from './InputText.settings'
-import { defaultTest } from './InputText.test'
-import { Position } from '@/constants'
-
-const meta: Meta<typeof VvInputText> = {
-	title: 'Components/InputText',
-	component: VvInputText,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvInputText>
-
-export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvInputText },
-		setup() {
-			return { args }
-		},
-		data: () => ({ inputValue: undefined, maskedInputValue: undefined }),
-		template: /* html */ `
-			<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 v-if="args.iMask" class="mt-sm">Masked Value: <span data-testId="masked-value">{{ maskedInputValue }}</span></div> 
-		`,
-	}),
-	play: defaultTest,
-}
-
-export const Disabled: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		disabled: true,
-	},
-}
-
-export const Readonly: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		readonly: true,
-	},
-}
-
-export const Valid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		valid: true,
-		validLabel: 'The field is valid.',
-		icon: 'check',
-		iconPosition: Position.after,
-	},
-}
-
-export const Invalid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		invalid: true,
-		invalidLabel: 'The field is required.',
-		icon: 'error-2',
-		iconPosition: Position.after,
-	},
-}
-
-export const Hint: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		hintLabel: 'Please enter your name.',
-	},
-}
-
-export const Loading: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		loading: true,
-		loadingLabel: 'Loading...',
-	},
-}
-
-export const Floating: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		floating: true,
-	},
-}
-
-export const Unit: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		unit: 'km',
-		autoWidth: true,
-		type: 'number',
-	},
-}

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

@@ -1,144 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-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, id?: string) => {
-	if (mask) {
-		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 { toType: 'Lorem ipsum' }
-		case INPUT_TYPES.NUMBER:
-			return { toType: '1' }
-		case INPUT_TYPES.EMAIL:
-			return { toType: 'test@test.com' }
-		case INPUT_TYPES.TEL:
-			return { toType: '+1234567890' }
-		case INPUT_TYPES.URL:
-			return { toType: 'https://www.test.com' }
-		case INPUT_TYPES.DATE:
-			return { toType: new Date().toISOString().split('T')[0] }
-		case INPUT_TYPES.TIME:
-			return { toType: '12:00' }
-		case INPUT_TYPES.COLOR:
-		case INPUT_TYPES.DATETIME_LOCAL:
-		case INPUT_TYPES.MONTH:
-		case INPUT_TYPES.WEEK:
-			return { toType: undefined }
-	}
-}
-
-export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-	const value = (await within(canvasElement).findByTestId(
-		'value',
-	)) as HTMLElement
-	const input = element.getElementsByTagName('input')[0]
-	const hint = element.getElementsByClassName('vv-input-text__hint')[0]
-
-	// value
-	if (!args.invalid && !args.disabled && !args.readonly) {
-		const { toType, toCheck } = valueByType(args.type, args.iMask, args.id)
-		if (toType) {
-			await expect(input).toBeClicked()
-			await userEvent.keyboard(toType)
-			await sleep()
-			if (args.maxlength) {
-				await expect(value.innerHTML).toEqual(
-					toType.slice(0, args.maxlength),
-				)
-			} else {
-				await expect(value.innerHTML).toEqual(toCheck ?? toType)
-			}
-		}
-	}
-
-	// disabled
-	if (args.disabled) {
-		await expect(element).toHaveClass('vv-input-text--disabled')
-		await expect(input).toHaveProperty('disabled')
-		await expect(input).not.toBeClicked()
-	}
-
-	// readonly
-	if (args.readonly) {
-		await expect(element).toHaveClass('vv-input-text--readonly')
-		await expect(input).toHaveProperty('readOnly')
-	}
-
-	// invalid
-	if (args.invalid) {
-		await expect(element).toHaveClass('vv-input-text--invalid')
-		await expect(input).toHaveProperty('ariaInvalid')
-		if (args.invalidLabel) {
-			await expect(hint.innerHTML).toEqual(args.invalidLabel)
-		}
-	}
-
-	// valid
-	if (args.valid) {
-		await expect(element).toHaveClass('vv-input-text--valid')
-		await expect(input).toHaveProperty('ariaInvalid', 'false')
-		if (args.validLabel) {
-			await expect(hint.innerHTML).toEqual(args.validLabel)
-		}
-	}
-
-	//   min / max / minlength / maxlength
-	if (args.min) {
-		await expect(input).toHaveProperty('min', String(args.min))
-	}
-
-	if (args.max) {
-		await expect(input).toHaveProperty('max', String(args.max))
-	}
-
-	if (args.minlength) {
-		await expect(input).toHaveProperty('minLength', args.minlength)
-	}
-
-	if (args.maxlength) {
-		await expect(input).toHaveProperty('maxLength', args.maxlength)
-	}
-
-	// floating
-	if (args.floating) {
-		await expect(element).toHaveClass('vv-input-text--floating')
-	}
-
-	// loading
-	if (args.loading) {
-		await expect(element).toHaveClass('vv-input-text--loading')
-	}
-
-	// hint
-	if (args.hintLabel) {
-		await expect(hint.innerHTML).toEqual(args.hintLabel)
-	}
-
-	// check accessibility
-	await expect(element).toHaveNoViolations()
-}

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

@@ -1,43 +0,0 @@
-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/Icon',
-	component: VvInputText,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvInputText>
-
-export const DefaultPosition: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'heart',
-	},
-}
-
-export const After: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'heart',
-		iconPosition: 'after',
-	},
-}
-
-export const Src: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: {
-			name: 'engineering',
-			src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/social/engineering/materialicons/24px.svg',
-		},
-	},
-}

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

@@ -1,58 +0,0 @@
-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/Length',
-	component: VvInputText,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvInputText>
-
-export const MaxLength: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		maxlength: 5,
-	},
-}
-
-export const MinLength: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		minlength: 5,
-	},
-}
-
-export const Count: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		count: true,
-		minlength: 100,
-	},
-}
-
-export const Limit: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		count: 'limit',
-		maxlength: 100,
-	},
-}
-
-export const Countdown: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		count: 'countdown',
-		maxlength: 100,
-	},
-}

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

@@ -1,122 +0,0 @@
-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 Regex: 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/InputText/InputTextMinMax.stories.ts

@@ -1,51 +0,0 @@
-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/MinMax',
-	component: VvInputText,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvInputText>
-
-export const MinNumber: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'number',
-		min: -15,
-	},
-}
-
-export const MaxNumber: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'number',
-		max: 15,
-	},
-}
-
-export const MinDate: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'date',
-		min: new Date().toISOString().split('T')[0],
-	},
-}
-
-export const MaxDate: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'date',
-		max: new Date().toISOString().split('T')[0],
-	},
-}

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

@@ -1,39 +0,0 @@
-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/Slots',
-	component: VvInputText,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvInputText>
-
-export const Before: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		before: '<div class="vv-badge vv-badge--sm uppercase">Before</div>',
-	},
-}
-
-export const After: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		after: '<div class="vv-badge vv-badge--sm uppercase">After</div>',
-	},
-}
-
-export const Hint: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		hint: 'Hint <em class="italic">slot!</em>',
-	},
-}

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

@@ -1,119 +0,0 @@
-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/Type',
-	component: VvInputText,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvInputText>
-
-export const Text: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'text',
-	},
-}
-
-export const Password: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'password',
-	},
-}
-
-export const Date: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'date',
-	},
-}
-
-export const DateTime: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'datetime-local',
-	},
-}
-
-export const Time: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'time',
-	},
-}
-
-export const Month: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'month',
-	},
-}
-
-export const Week: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'week',
-	},
-}
-
-export const Number: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'number',
-	},
-}
-
-export const Email: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'email',
-	},
-}
-
-export const Tel: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'tel',
-	},
-}
-
-export const Url: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'url',
-	},
-}
-
-export const Color: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'color',
-	},
-}
-
-export const Search: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		type: 'search',
-	},
-}