@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.41

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

@@ -1,15 +1,15 @@
 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 VvInputText from '@/components/VvInputText/VvInputText.vue'
 import { Position } from '@/constants'
 
 const meta: Meta<typeof VvInputText> = {
-	title: 'Components/InputText',
-	component: VvInputText,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/InputText',
+    component: VvInputText,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -17,16 +17,16 @@ 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 */ `
+    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>
@@ -35,79 +35,79 @@ export const Default: Story = {
 			<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,
+    }),
+    play: defaultTest,
 }
 
 export const Disabled: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		disabled: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        disabled: true,
+    },
 }
 
 export const Readonly: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		readonly: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        readonly: true,
+    },
 }
 
 export const Valid: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		valid: true,
-		validLabel: 'The field is valid.',
-		icon: 'check',
-		iconPosition: Position.after,
-	},
+    ...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,
-	},
+    ...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.',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        hintLabel: 'Please enter your name.',
+    },
 }
 
 export const Loading: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		loading: true,
-		loadingLabel: 'Loading...',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        loading: true,
+        loadingLabel: 'Loading...',
+    },
 }
 
 export const Floating: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		floating: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        floating: true,
+    },
 }
 
 export const Unit: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		unit: 'km',
-		autoWidth: true,
-		type: 'number',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        unit: 'km',
+        autoWidth: true,
+        type: 'number',
+    },
 }

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

@@ -1,144 +1,141 @@
+import { within, userEvent } from '@storybook/test'
 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:
+function 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 }
-	}
+                }
+            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]
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    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)
-			}
-		}
-	}
+    // 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()
-	}
+    // 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')
-	}
+    // 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)
-		}
-	}
+    // 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)
-		}
-	}
+    // 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))
-	}
+    //   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.max) {
+        await expect(input).toHaveProperty('max', String(args.max))
+    }
 
-	if (args.minlength) {
-		await expect(input).toHaveProperty('minLength', args.minlength)
-	}
+    if (args.minlength) {
+        await expect(input).toHaveProperty('minLength', args.minlength)
+    }
 
-	if (args.maxlength) {
-		await expect(input).toHaveProperty('maxLength', args.maxlength)
-	}
+    if (args.maxlength) {
+        await expect(input).toHaveProperty('maxLength', args.maxlength)
+    }
 
-	// floating
-	if (args.floating) {
-		await expect(element).toHaveClass('vv-input-text--floating')
-	}
+    // floating
+    if (args.floating) {
+        await expect(element).toHaveClass('vv-input-text--floating')
+    }
 
-	// loading
-	if (args.loading) {
-		await expect(element).toHaveClass('vv-input-text--loading')
-	}
+    // loading
+    if (args.loading) {
+        await expect(element).toHaveClass('vv-input-text--loading')
+    }
 
-	// hint
-	if (args.hintLabel) {
-		await expect(hint.innerHTML).toEqual(args.hintLabel)
-	}
+    // hint
+    if (args.hintLabel) {
+        await expect(hint.innerHTML).toEqual(args.hintLabel)
+    }
 
-	// check accessibility
-	await expect(element).toHaveNoViolations()
+    // check accessibility
+    await expect(element).toHaveNoViolations()
 }

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

@@ -1,13 +1,13 @@
 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'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
 
 const meta: Meta<typeof VvInputText> = {
-	title: 'Components/InputText/Icon',
-	component: VvInputText,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/InputText/Icon',
+    component: VvInputText,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,29 +15,29 @@ export default meta
 type Story = StoryObj<typeof VvInputText>
 
 export const DefaultPosition: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'heart',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        icon: 'heart',
+    },
 }
 
 export const After: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		icon: 'heart',
-		iconPosition: 'after',
-	},
+    ...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',
-		},
-	},
+    ...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,13 +1,13 @@
 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'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
 
 const meta: Meta<typeof VvInputText> = {
-	title: 'Components/InputText/Length',
-	component: VvInputText,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/InputText/Length',
+    component: VvInputText,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,44 +15,44 @@ export default meta
 type Story = StoryObj<typeof VvInputText>
 
 export const MaxLength: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		maxlength: 5,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        maxlength: 5,
+    },
 }
 
 export const MinLength: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		minlength: 5,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        minlength: 5,
+    },
 }
 
 export const Count: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		count: true,
-		minlength: 100,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        count: true,
+        minlength: 100,
+    },
 }
 
 export const Limit: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		count: 'limit',
-		maxlength: 100,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        count: 'limit',
+        maxlength: 100,
+    },
 }
 
 export const Countdown: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		count: 'countdown',
-		maxlength: 100,
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        count: 'countdown',
+        maxlength: 100,
+    },
 }