@volverjs/ui-vue 0.0.13-beta.9 → 0.0.14

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

@@ -0,0 +1,184 @@
+import type { InputType } from '@/components/VvInputText'
+import type { PlayAttributes } from '@/test/types'
+import { userEvent, within } from 'storybook/test'
+import { INPUT_TYPES } from '@/components/VvInputText'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+
+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 }
+    }
+}
+
+export async function checkNullTest({ canvasElement }: PlayAttributes) {
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    const input = element.getElementsByTagName('input')[0]
+
+    await expect(input).toHaveProperty('value', '')
+    await expect(value.innerHTML).toEqual('null')
+}
+
+export async function checkUndefinedTest({ canvasElement }: PlayAttributes) {
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    const input = element.getElementsByTagName('input')[0]
+
+    await expect(input).toHaveProperty('value', '')
+    await expect(value.innerHTML).toEqual('undefined')
+}
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+    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)
+            }
+        }
+    }
+
+    // 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()
+}
+
+export async function isoTest({ canvasElement, args }: PlayAttributes) {
+    const element = await within(canvasElement).findByTestId('element')
+    const input = element.getElementsByTagName('input')[0] as HTMLInputElement
+    const value = await within(canvasElement).findByTestId('value')
+
+    const inputDate = getDateFromInputValue(input.value, args.type)
+    if (!inputDate) {
+        await expect(value.innerHTML).toEqual('null')
+        return
+    }
+    const valueDate = new Date(value.innerHTML)
+
+    if (args.type === INPUT_TYPES.TIME || args.type === INPUT_TYPES.DATETIME_LOCAL) {
+        expect(inputDate.getHours()).toEqual(valueDate.getHours())
+        expect(inputDate.getMinutes()).toEqual(valueDate.getMinutes())
+    }
+    if (args.type === INPUT_TYPES.MONTH || args.type === INPUT_TYPES.DATE || args.type === INPUT_TYPES.DATETIME_LOCAL) {
+        expect(inputDate.getMonth()).toEqual(valueDate.getMonth())
+        expect(inputDate.getFullYear()).toEqual(valueDate.getFullYear())
+    }
+    if (args.type === INPUT_TYPES.DATE || args.type === INPUT_TYPES.DATETIME_LOCAL) {
+        expect(inputDate.getDate()).toEqual(valueDate.getDate())
+    }
+}

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { argTypes, defaultArgs } from './InputText.settings'
+import { Default } from './InputText.stories'
+
+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/InputTextIso.stories.ts

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { argTypes, defaultArgs } from './InputText.settings'
+import { isoTest } from './InputText.test'
+
+const meta: Meta<typeof VvInputText> = {
+    title: 'Components/InputText/Iso',
+    component: VvInputText,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputText>
+
+export const TypeDate: Story = {
+    args: {
+        ...defaultArgs,
+        type: 'date',
+    },
+    render: args => ({
+        components: { VvInputText },
+        setup() {
+            return { args }
+        },
+        data: () => ({
+            inputValue: `2024-12-31T23:00:00.000Z`,
+        }),
+        template: /* html */ `
+			<vv-input-text v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element" />
+			<div>Value: <span data-testId="value">{{ inputValue }}</span></div>
+		`,
+    }),
+    play: isoTest,
+}
+
+export const TypeTime: Story = {
+    ...TypeDate,
+    args: {
+        ...defaultArgs,
+        type: 'time',
+    },
+}
+
+export const TypeTimeMinute: Story = {
+    ...TypeDate,
+    args: {
+        ...defaultArgs,
+        type: 'time',
+        step: 60,
+    },
+}
+
+export const TypeMonth: Story = {
+    ...TypeDate,
+    args: {
+        ...defaultArgs,
+        type: 'month',
+    },
+}
+
+export const TypeDateTime: Story = {
+    ...TypeDate,
+    args: {
+        ...defaultArgs,
+        type: 'datetime-local',
+    },
+}

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

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { argTypes, defaultArgs } from './InputText.settings'
+import { Default } from './InputText.stories'
+
+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

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { argTypes, defaultArgs } from './InputText.settings'
+import { Default } from './InputText.stories'
+
+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*$/,
+                },
+            ],
+        },
+    },
+}
+
+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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { argTypes, defaultArgs } from './InputText.settings'
+import { Default } from './InputText.stories'
+
+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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { argTypes, defaultArgs } from './InputText.settings'
+import { Default } from './InputText.stories'
+
+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/InputTextSuggestions.stories.ts

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { argTypes, defaultArgs } from './InputText.settings'
+import { Default } from './InputText.stories'
+
+const meta: Meta<typeof VvInputText> = {
+    title: 'Components/InputText/Suggestions',
+    component: VvInputText,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputText>
+
+export const StorageSuggestions: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'text',
+        label: 'Input with Storage Suggestions',
+        placeholder: 'Start typing to see stored suggestions',
+        storageKey: 'example-input-storage',
+        maxSuggestions: 5,
+    },
+    render: args => ({
+        components: { VvInputText },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
+            <div class="space-y-md">
+                <div>
+                    <p class="text-sm text-gray-600 mb-sm">
+                        Storage suggestions are saved when you blur the input and can be removed by clicking the trash button in the dropdown.
+                    </p>
+                    <vv-input-text 
+                        v-bind="args" 
+                        v-model="inputValue" 
+                        data-testId="element"
+                    />
+                    <div class="mt-sm">Value: <span data-testId="value">{{ inputValue }}</span></div>
+                </div>
+            </div>
+        `,
+    }),
+}
+
+export const ExternalSuggestions: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'text',
+        label: 'Input with External Suggestions',
+        placeholder: 'Type to filter suggestions',
+        suggestions: ['Apple', 'Apricot', 'Avocado', 'Banana', 'Blueberry'],
+    },
+    render: args => ({
+        components: { VvInputText },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
+            <div class="space-y-md">
+                <div>
+                    <p class="text-sm text-gray-600 mb-sm">
+                        External suggestions cannot be removed. They're always available for selection.
+                    </p>
+                    <vv-input-text 
+                        v-bind="args" 
+                        v-model="inputValue" 
+                        data-testId="element"
+                    />
+                    <div class="mt-sm">Value: <span data-testId="value">{{ inputValue }}</span></div>
+                </div>
+            </div>
+        `,
+    }),
+}
+
+export const BothSuggestions: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'text',
+        label: 'Input with Storage + External Suggestions',
+        placeholder: 'Type to see all suggestions',
+        storageKey: 'combined-suggestions-example',
+        suggestions: ['Apple', 'Apricot', 'Avocado'],
+        maxSuggestions: 5,
+    },
+    render: args => ({
+        components: { VvInputText },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
+            <div class="space-y-md">
+                <div>
+                    <p class="text-sm text-gray-600 mb-sm">
+                        <strong>External suggestions:</strong> Apple, Apricot, Avocado (cannot be removed)<br/>
+                        <strong>Storage suggestions:</strong> Saved values from previous inputs (can be removed with trash button)
+                    </p>
+                    <vv-input-text 
+                        v-bind="args" 
+                        v-model="inputValue" 
+                        data-testId="element"
+                    />
+                    <div class="mt-sm">Value: <span data-testId="value">{{ inputValue }}</span></div>
+                </div>
+            </div>
+        `,
+    }),
+}