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

package/src/stories/Combobox/Combobox.settings.ts

@@ -0,0 +1,446 @@
+import type { ArgTypes, Meta } from '@storybook/vue3-vite'
+import type { VvCombobox } from '@/components'
+import { VvComboboxProps } from '@/components/VvCombobox'
+import {
+    DisabledArgTypes,
+    DropdownArgTypes,
+    FloatingLabelArgTypes,
+    HintArgTypes,
+    IconArgTypes,
+    InvalidArgTypes,
+    LoadingArgTypes,
+    ModifiersArgTypes,
+    OptionsArgTypes,
+    ReadonlyArgTypes,
+    TabindexArgTypes,
+    UnselectableArgTypes,
+    ValidArgTypes,
+} from '@/stories/argTypes'
+import { propsToObject } from '@/utils/ObjectUtilities'
+
+export const defaultArgs: Meta<typeof VvCombobox>['args'] = {
+    ...propsToObject(VvComboboxProps),
+    name: 'vv-combobox',
+    maxValues: undefined,
+    options: [
+        'Option 1',
+        'Option 2',
+        'Option 3',
+        'Option 4',
+        'Option 5',
+        'Option 6',
+        'Option 7',
+        'Option 8',
+        'Option 9',
+        'Option 10',
+        'Option 11',
+        'Option 12',
+        'Option 13',
+        'Option 14',
+        'Option 15',
+        'Option 16',
+        'Option 17',
+        'Option 18',
+        'Option 19',
+        'Option 20',
+    ],
+    placeholder: 'Select an option',
+    label: 'Combobox label',
+    strategy: 'fixed',
+}
+
+export const argTypes: ArgTypes = {
+    ...TabindexArgTypes,
+    ...ValidArgTypes,
+    ...InvalidArgTypes,
+    ...HintArgTypes,
+    ...LoadingArgTypes,
+    ...DisabledArgTypes,
+    ...ReadonlyArgTypes,
+    ...ModifiersArgTypes,
+    ...OptionsArgTypes,
+    ...IconArgTypes,
+    ...FloatingLabelArgTypes,
+    ...DropdownArgTypes,
+    ...UnselectableArgTypes,
+    'triggerWidth': {
+        ...DropdownArgTypes.triggerWidth,
+        table: {
+            defaultValue: {
+                summary: 'true',
+            },
+        },
+    },
+    'multiple': {
+        description:
+			' This Boolean attribute indicates that multiple options can be selected in the list.',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    'label': {
+        description: '<label> value for the combobox',
+        control: {
+            type: 'text',
+        },
+    },
+    'noResultsLabel': {
+        description: 'Label for no search results',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'No results',
+            },
+        },
+    },
+    'noOptionsLabel': {
+        description: 'Label for no options available',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'No options available',
+            },
+        },
+    },
+    'selectedHintLabel': {
+        description: 'Label for selected option hint',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'Selected',
+            },
+        },
+    },
+    'deselectActionLabel': {
+        description: 'Label for deselect action button',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'Deselect',
+            },
+        },
+    },
+    'selectHintLabel': {
+        description: 'Label for select option hint',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'Press enter to select',
+            },
+        },
+    },
+    'deselectHintLabel': {
+        description: 'Label for deselected option hint',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'Press enter to remove',
+            },
+        },
+    },
+    'addOptionHintLabel': {
+        description: 'Label for add new option hint',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'Press enter to add',
+            },
+        },
+    },
+    'closeLabel': {
+        description: 'Label for close button',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'Close',
+            },
+        },
+    },
+    'loadingLabel': {
+        description: 'Label for loading',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'Loading...',
+            },
+        },
+    },
+    'placeholder': {
+        description: 'Text that appears when it has no value set.',
+        control: {
+            type: 'text',
+        },
+    },
+    'addable': {
+        description: 'Enable adding new options',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    'searchable': {
+        description: 'Enable search in options',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    'keepSearch': {
+        description: 'If true, the search input will retain its value even when the dropdown is closed',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    'searchFunction': {
+        description: 'Search function to filter options',
+        table: {
+            defaultValue: {
+                summary: undefined,
+            },
+        },
+    },
+    'searchPlaceholder': {
+        description:
+			'Text that appears in the in the search input when it has no value set..',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'Search...',
+            },
+        },
+    },
+    'debounceSearch': {
+        description: 'Debounce milliseconds for search',
+        control: {
+            type: 'number',
+        },
+    },
+    'maxValues': {
+        description: 'Max number of selected values',
+        control: {
+            type: 'number',
+        },
+        table: {
+            type: {
+                summary: 'number',
+            },
+        },
+    },
+    'minValues': {
+        description: 'Min number of selected values',
+        control: {
+            type: 'number',
+        },
+        table: {
+            type: {
+                summary: 'number',
+            },
+        },
+    },
+    'separator': {
+        description: 'Separator of selected values',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: ', ',
+            },
+        },
+    },
+    'native': {
+        description: 'Show native select',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    'badges': {
+        description: 'Show badges for selected values',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    'badgeModifiers': {
+        description: 'Modifiers for badges',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'action sm',
+            },
+        },
+    },
+    'dropdownModifiers': {
+        control: {
+            type: 'text',
+        },
+        description: 'Modifiers for dropdown',
+        table: {
+            defaultValue: {
+                summary: 'mobile',
+            },
+        },
+    },
+    'transitionName': {
+        control: {
+            type: 'text',
+        },
+        description: 'Transition name for dropdown',
+        table: {
+            defaultValue: {
+                summary: 'vv-dropdown--mobile-fade-block',
+            },
+        },
+    },
+    'autoOpen': {
+        description: 'Open dropdown on focus',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    'keepOpen': {
+        description: 'Keep open dropdown on signle select',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    'autofocusFirst': {
+        description: 'Autofocus first option on open dropdown',
+        table: {
+            defaultValue: {
+                summary: 'true',
+            },
+        },
+    },
+    'before': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'after': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'dropdown::before': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'dropdown::after': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'value': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'option': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'no-options': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'no-results': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'update:search': {
+        table: {
+            category: 'Events',
+            type: {
+                summary: 'string',
+            },
+        },
+    },
+}

package/src/stories/Combobox/Combobox.stories.ts

@@ -0,0 +1,249 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { argTypes, defaultArgs } from './Combobox.settings'
+import { defaultTest } from './Combobox.test'
+
+const meta: Meta<typeof VvCombobox> = {
+    title: 'Components/Combobox',
+    // @ts-expect-error missing generic components support
+    component: VvCombobox,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvCombobox>
+
+export const Default: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvCombobox },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
+			<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<template #dropdown::before v-if="args['dropdown::before']"><div class="flex" v-html="args['dropdown::before']"></div></template>
+				<template #dropdown::after v-if="args['dropdown::after']"><div class="flex" v-html="args['dropdown::after']"></div></template>
+				<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-combobox>
+			<div>Value: <span data-testId="value">{{inputValue}}</span></div>
+		`,
+    }),
+    play: defaultTest,
+}
+
+export const Disabled: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        disabled: true,
+    },
+}
+
+export const Readonly: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        readonly: true,
+    },
+}
+
+export const Unselectable: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        unselectable: true,
+    },
+}
+
+export const Valid: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        valid: true,
+        validLabel: 'Selected response is valid.',
+    },
+}
+
+export const Invalid: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        invalid: true,
+        invalidLabel: 'Selected response is invalid.',
+    },
+}
+
+export const Hint: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        hintLabel: 'Please fill the input above.',
+    },
+}
+
+export const Loading: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        loading: true,
+        loadingLabel: 'Loading...',
+    },
+}
+
+export const Searchable: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        searchable: true,
+        searchPlaceholder: 'Search...',
+    },
+}
+
+export const KeepSearch: Story = {
+    args: {
+        ...defaultArgs,
+        searchable: true,
+        keepSearch: true,
+    },
+    render: args => ({
+        components: { VvInputText, VvCombobox },
+        setup() {
+            const searchValue = ref('Option 2')
+            return { args, searchValue }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
+            <div class="flex flex-col gap-xs">
+                <vv-input-text
+                    v-model="searchValue"
+                    label="Search Input"
+                    name="search-input"
+                    placeholder="Type the initial value of the search"
+                />
+                <vv-combobox
+                    v-bind="args"
+                    v-model="inputValue"
+                    v-model:search="searchValue"
+                    :data-testData="inputValue"
+                    data-testId="element"
+                >
+                    <template #dropdown::before v-if="args['dropdown::before']">
+                        <div class="flex" v-html="args['dropdown::before']"></div>
+                    </template>
+                    <template #dropdown::after v-if="args['dropdown::after']">
+                        <div class="flex" v-html="args['dropdown::after']"></div>
+                    </template>
+                    <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-combobox>
+                <div class="mt-4">
+                    <div>Selected Value: <span data-testId="value">{{inputValue}}</span></div>
+                    <div>Search Value: <span data-testId="search-value">{{searchValue}}</span></div>
+                </div>
+            </div>
+        `,
+    }),
+}
+
+export const Addable: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        searchable: true,
+        addable: true,
+    },
+}
+
+export const Floating: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        floating: true,
+    },
+}
+
+export const Native: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        native: true,
+    },
+}
+
+export const Arrow: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        arrow: true,
+        offset: 10,
+        triggerWidth: false,
+        placement: 'bottom-end',
+        dropdownModifiers: 'full-bleed rounded',
+    },
+}
+
+export const Badges: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        badges: true,
+        multiple: true,
+    },
+}
+
+export const AutoOpen: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        autoOpen: true,
+    },
+}
+
+export const KeepOpen: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        keepOpen: true,
+    },
+}
+
+export const autoselectFirst: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        autoselectFirst: true,
+    },
+}
+
+export const Size: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        'dropdown::before':
+			'<div class="bg-brand text-white flex-1 text-center uppercase">Before</div>',
+        'dropdown::after':
+			'<div class="bg-brand text-white flex-1 text-center uppercase">After</div>',
+        'options': Array.from({ length: 30 }, (_, i) => ({
+            label: `Option ${i + 1}`,
+            value: String(i + 1),
+        })),
+    },
+}