@volverjs/ui-vue 0.0.10-beta.60 → 0.0.10-beta.61

package/src/stories/Icon/Icon.stories.ts

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import NormalIcons from '@/assets/icons/normal.json'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import { argTypes, defaultArgs } from './Icon.settings'
-
-const meta: Meta<typeof VvIcon> = {
-    title: 'Components/Icon',
-    component: VvIcon,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvIcon>
-
-export const Default: Story = {
-    args: {
-        ...defaultArgs,
-    },
-    render: args => ({
-        components: { VvIcon },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `<vv-icon v-bind="args" />`,
-    }),
-}
-
-export const Remote: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        name: 'fingerprint',
-        src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/action/fingerprint/materialicons/24px.svg',
-    },
-}
-
-export const Inline: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        name: 'bell-2',
-        svg: `<svg viewBox="0 0 24 24">${NormalIcons.icons.bell.body}</svg>`,
-    },
-}

package/src/stories/Icon/IconsCollection.stories.ts

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { icons as NormalIcons } from '@/assets/icons/normal.json'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import { ref, watch } from 'vue'
-import { argTypes, defaultArgs } from './Icon.settings'
-
-const meta: Meta<typeof VvIcon> = {
-    title: 'Components/Icon/Collection',
-    component: VvIcon,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvIcon>
-
-export const Default: Story = {
-    args: {
-        ...defaultArgs,
-        width: 24,
-    },
-    render: args => ({
-        components: { VvIcon },
-        setup() {
-            const allIcons = Object.keys(NormalIcons)
-            const icons = ref(allIcons)
-            const search = ref('')
-            watch(search, (newValue) => {
-                icons.value = allIcons.filter(icon => icon.includes(newValue))
-            })
-            return { args, search, icons }
-        },
-        template: /* html */ `
-			<div class="absolute inset-0 overflow-y-auto p-16">
-				<div class="vv-input-text">
-					<div class="vv-input-text__wrapper">
-						<input v-model="search" type="search" placeholder="Search..." />
-					</div>
-				</div>
-				<div class="grid grid-cols-5 gap-16 mt-16">
-					<div
-						v-for="iconName in icons"
-						:key="iconName"
-						class="flex items-center gap-16">
-						<VvIcon v-bind="args" :name="iconName" />
-						{{ iconName }}
-					</div>
-				</div>
-			</div>
-		`,
-    }),
-}

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

@@ -1,37 +0,0 @@
-import type { ArgTypes } from '@storybook/vue3'
-import { VvInputFileProps } from '@/components/VvInputFile'
-import { HintArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
-
-export const defaultArgs = {
-    ...propsToObject(VvInputFileProps),
-    name: 'vv-input-file',
-    label: 'Upload file',
-}
-
-export const argTypes: ArgTypes = {
-    ...HintArgTypes,
-    'modifiers': {
-        ...ModifiersArgTypes.modifiers,
-        options: ['hidden', 'square', 'circle'],
-    },
-    'drop-area': {
-        description: 'Drop area slot',
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-    'update:model-value': {
-        table: {
-            category: 'Events',
-            type: {
-                summary: 'File | File[]',
-            },
-        },
-    },
-}

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

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-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['drop-area']"><div v-html="args['drop-area']"></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

@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-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

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-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

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-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',
-        'drop-area': 'Drag one or more files to this drop zone.',
-        'dropArea': true,
-    },
-}
-
-export const Hint: Story = {
-    ...DefaultStory,
-    args: {
-        ...DefaultStory.args,
-        hint: 'Hint <em class="italic">slot!</em>',
-    },
-}

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

@@ -1,261 +0,0 @@
-import type { ArgTypes } from '@storybook/vue3'
-import normal from '@/assets/icons/normal.json'
-import { VvInputTextProps } from '@/components/VvInputText'
-import { HintArgTypes, InputTextareaArgTypes } from '@/stories/argTypes'
-
-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',
-            },
-        },
-    },
-}