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

package/src/stories/InputFile/InputFile.stories.ts

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { argTypes, defaultArgs } from './InputFile.settings'
+
+const meta: Meta = {
+    title: 'Components/InputFile',
+    component: VvInputFile,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const Default: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvInputFile },
+        setup() {
+            const files = ref([])
+            return {
+                args,
+                files,
+            }
+        },
+        template: /* html */ `
+			<vv-input-file v-bind="args" v-model="files">
+				<template #drop-area v-if="args.dropAreaSlot"><div v-html="args.dropAreaSlot"></div></template>
+				<template #hint v-if="args['hint']"><div v-html="args['hint']"></div></template>
+			</vv-input-file>
+		`,
+    }),
+}
+
+export const Readonly: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        readonly: true,
+    },
+}
+
+export const Disabled: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        disabled: true,
+    },
+}
+
+export const Valid: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        valid: true,
+        validLabel: 'The field is valid.',
+    },
+}
+
+export const Invalid: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        invalid: true,
+        invalidLabel: 'The field is required.',
+    },
+}
+
+export const Hint: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        hintLabel: 'Please upload a file.',
+    },
+}
+
+export const Loading: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        loading: true,
+        loadingLabel: 'Loading...',
+    },
+}
+
+export const Progress: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        progress: 30,
+        hintLabel: '30%',
+    },
+}

package/src/stories/InputFile/InputFileDropArea.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { argTypes, defaultArgs } from './InputFile.settings'
+import { Default as DefaultStory } from './InputFile.stories'
+
+const meta: Meta<typeof VvInputFile> = {
+    title: 'Components/InputFile/DropArea',
+    component: VvInputFile,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const Default: Story = {
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        label: 'Drop area',
+        dropArea: true,
+    },
+}
+
+export const InputHidden: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Drop area hidden input',
+        dropArea: true,
+        modifiers: 'hidden',
+    },
+}
+
+export const Square: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        class: 'max-w-192',
+        label: 'Drop area square',
+        dropArea: true,
+        modifiers: 'square hidden',
+    },
+}
+
+export const Circle: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        class: 'max-w-192',
+        label: 'Drop area circle',
+        dropArea: true,
+        modifiers: 'circle hidden',
+    },
+}

package/src/stories/InputFile/InputFileIconPosition.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { argTypes, defaultArgs } from './InputFile.settings'
+import { Default } from './InputFile.stories'
+
+const meta: Meta<typeof VvInputFile> = {
+    title: 'Components/InputFile/Icon',
+    component: VvInputFile,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+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/InputFile/InputFileSlots.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { argTypes, defaultArgs } from './InputFile.settings'
+import { Default as DefaultStory } from './InputFile.stories'
+
+const meta: Meta<typeof VvInputFile> = {
+    title: 'Components/InputFile/Slots',
+    component: VvInputFile,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const DropArea: Story = {
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        class: 'max-w-320',
+        dropArea: true,
+        // @ts-expect-error - dropAreaSlot is a Storybook control for slot content
+        dropAreaSlot: 'Drag one or more files to this drop zone.',
+    },
+}
+
+export const Hint: Story = {
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        hint: 'Hint <em class="italic">slot!</em>',
+    },
+}

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

@@ -0,0 +1,262 @@
+import type { ArgTypes } from '@storybook/vue3-vite'
+import normal from '@/assets/icons/normal.json'
+import { VvInputTextProps } from '@/components/VvInputText'
+import { HintArgTypes, InputTextareaArgTypes } from '@/stories/argTypes'
+import { propsToObject } from '@/utils/ObjectUtilities'
+
+export const defaultArgs = {
+    ...propsToObject(VvInputTextProps),
+    name: 'vv-input-text',
+    label: 'Input label',
+    placeholder: 'Input placeholder',
+    min: undefined,
+    max: undefined,
+    minlength: undefined,
+    maxlength: undefined,
+}
+
+// @ts-expect-error to be fixed
+export const argTypes: ArgTypes = {
+    ...InputTextareaArgTypes,
+    ...HintArgTypes,
+    type: {
+        description: 'Type of form control',
+        options: [
+            'color',
+            'date',
+            'datetime-local',
+            'email',
+            'month',
+            'number',
+            'password',
+            'search',
+            'tel',
+            'text',
+            'time',
+            'url',
+            'week',
+        ],
+        control: {
+            type: 'select',
+        },
+        table: {
+            defaultValue: {
+                summary: 'text',
+            },
+        },
+    },
+    min: {
+        description:
+			'Minimum value. Available for input types: date, month, week, time, datetime-local, number, range.',
+        control: {
+            type: 'text',
+        },
+    },
+    max: {
+        description:
+			'Maximum value. Available for input types: date, month, week, time, datetime-local, number, range.',
+        control: {
+            type: 'text',
+        },
+    },
+    step: {
+        description:
+			'Incremental values that are valid. Available for input types: date, month, week, time, datetime-local and number.',
+        table: {
+            defaultValue: {
+                summary: '1',
+            },
+        },
+    },
+    pattern: {
+        description:
+			'Pattern the value must match to be valid. Available for input types: text, search, url, tel, email and password.',
+        control: {
+            type: 'text',
+        },
+    },
+    multiple: {
+        description:
+			'Whether to allow multiple values. Available for input type email.',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    iconShowPassword: {
+        description: 'VvIcon name for show password button',
+        options: ['', ...Object.keys(normal.icons)],
+        control: {
+            type: 'select',
+        },
+        table: {
+            defaultValue: {
+                summary: 'eye-on',
+            },
+        },
+    },
+    iconHidePassword: {
+        description: 'VvIcon name for hide password button',
+        options: ['', ...Object.keys(normal.icons)],
+        control: {
+            type: 'select',
+        },
+        table: {
+            defaultValue: {
+                summary: 'eye-off',
+            },
+        },
+    },
+    iconClear: {
+        description: 'VvIcon name for clear button',
+        options: ['', ...Object.keys(normal.icons)],
+        control: {
+            type: 'select',
+        },
+        table: {
+            defaultValue: {
+                summary: 'close',
+            },
+        },
+    },
+    labelStepUp: {
+        description: 'Label for step up button',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'Increase value',
+            },
+        },
+    },
+    labelStepDown: {
+        description: 'Label for step down button',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'Decrease value',
+            },
+        },
+    },
+    labelShowPassword: {
+        description: 'Label for show password button',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'Show password',
+            },
+        },
+    },
+    labelHidePassword: {
+        description: 'Label for hide password button',
+
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'Hide password',
+            },
+        },
+    },
+    labelClear: {
+        description: 'Label for clear button',
+
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'Clear',
+            },
+        },
+    },
+    iMask: {
+        description: '[iMask](https://imask.js.org/guide.html) options',
+        control: {
+            type: 'object',
+        },
+    },
+    masked: {
+        description: 'Masked input',
+        control: {
+            type: 'text',
+        },
+    },
+    autoWidth: {
+        description: 'Adjust input width to content',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+            type: {
+                summary: 'boolean',
+            },
+        },
+    },
+    hideActions: {
+        description: 'Hide type number, password and search actions',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+            type: {
+                summary: 'boolean',
+            },
+        },
+    },
+    unit: {
+        description: 'Add unit label to input',
+        control: {
+            type: 'text',
+        },
+    },
+    selectOnFocus: {
+        description: 'Select input text on focus',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+            type: {
+                summary: 'boolean',
+            },
+        },
+    },
+    before: {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    after: {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+}

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

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { Position } from '@/constants'
+import { argTypes, defaultArgs } from './InputText.settings'
+import { checkNullTest, checkUndefinedTest, defaultTest } from './InputText.test'
+
+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 Null: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvInputText },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: null, maskedInputValue: undefined }),
+        template: /* html */ `
+			<vv-input-text v-bind="args" v-model="inputValue" v-model:masked="maskedInputValue" :data-testData="inputValue" data-testId="element" />
+			<div>Value: <span data-testId="value">{{ JSON.stringify(inputValue) }}</span></div>
+		`,
+    }),
+    play: checkNullTest,
+}
+
+export const Undefined: 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" />
+			<div>Value: <span data-testId="value">{{ inputValue === undefined ? 'undefined' : inputValue }}</span></div>
+		`,
+    }),
+    play: checkUndefinedTest,
+}
+
+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',
+    },
+}