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

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

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

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

@@ -1,110 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { defaultTest as selectDefaultTest } from '@/stories/Select/Select.test'
-import { expect } from '@/test/expect'
-import { sleep } from '@/test/sleep'
-import { within } from '@storybook/test'
-
-export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-    // native
-    if (args.native) {
-        await selectDefaultTest({ canvasElement, args })
-        return
-    }
-
-    const { getOptionValue } = useOptions(args)
-
-    const element = await within(canvasElement).findByTestId('element')
-    const value = await within(canvasElement).findByTestId('value')
-    const dropdown = element.getElementsByClassName(
-        'vv-dropdown',
-    )[0] as HTMLElement
-    const dropdownFirstItem = dropdown.querySelectorAll(
-        'div[role="option"]',
-    )[0] as HTMLElement
-    const dropdownSecondItem = dropdown.querySelectorAll(
-        'div[role="option"]',
-    )[1] as HTMLElement
-    const hint = element.getElementsByClassName('vv-select__hint')[0]
-
-    // disabled
-    if (args.disabled) {
-        await expect(element).toHaveClass('vv-select--disabled')
-    }
-
-    // readonly
-    if (args.readonly) {
-        await expect(element).toHaveClass('vv-select--readonly')
-    }
-
-    if (
-        !args.invalid
-        && !args.disabled
-        && !args.readonly
-        && args.options
-        && args.options.length > 0
-    ) {
-        // select first value
-        if (!args.autoselectFirst) {
-            await expect(dropdownFirstItem).toBeClicked()
-            await sleep()
-        }
-
-        const firstValue = getOptionValue(
-            args.options[0].options?.[0] ?? args.options[0],
-        )
-        // in grouped options the first element is not selectable
-        if (args.multiple) {
-            await expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
-        }
-        else {
-            await expect(value.innerHTML).toEqual(firstValue)
-        }
-
-        // select second value
-        if (args.options && args.options.length > 1) {
-            await expect(dropdownSecondItem).toBeClicked()
-            await sleep()
-            const secondValue = getOptionValue(
-                args.options[0].options?.[1] ?? args.options[1],
-            )
-            if (args.multiple) {
-                await expect(JSON.parse(value.innerHTML)).toEqual([
-                    firstValue,
-                    secondValue,
-                ])
-            }
-            else {
-                await expect(value.innerHTML).toEqual(secondValue)
-            }
-        }
-    }
-
-    // invalid
-    if (args.invalid) {
-        await expect(element).toHaveClass('vv-select--invalid')
-        if (args.invalidLabel) {
-            await expect(hint.innerHTML).toEqual(args.invalidLabel)
-        }
-    }
-
-    // valid
-    if (args.valid) {
-        await expect(element).toHaveClass('vv-select--valid')
-        if (args.validLabel) {
-            await expect(hint.innerHTML).toEqual(args.validLabel)
-        }
-    }
-
-    // loading
-    if (args.loading) {
-        await expect(element).toHaveClass('vv-select--loading')
-    }
-
-    // hint
-    if (args.hintLabel) {
-        await expect(hint.innerHTML).toEqual(args.hintLabel)
-    }
-
-    // check accessibility
-    await expect(element).toHaveNoViolations()
-}

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

@@ -1,44 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
-import { argTypes, defaultArgs } from './Combobox.settings'
-import { Default } from './Combobox.stories'
-
-const meta: Meta<typeof VvCombobox> = {
-    title: 'Components/Combobox/Icon',
-    // @ts-expect-error missing generic components support
-    component: VvCombobox,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCombobox>
-
-export const DefaultIconPosition: 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/Combobox/ComboboxMultiple.stories.ts

@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
-import { argTypes, defaultArgs } from './Combobox.settings'
-import { Default } from './Combobox.stories'
-
-const meta: Meta<typeof VvCombobox> = {
-    title: 'Components/Combobox/Multiple',
-    // @ts-expect-error missing generic components support
-    component: VvCombobox,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCombobox>
-
-export const DefaultMultiple: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        multiple: true,
-    },
-}
-
-export const MinValues: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        multiple: true,
-        minValues: 2,
-    },
-}
-
-export const MaxValues: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        multiple: true,
-        maxValues: 2,
-    },
-}
-
-export const Separator: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        multiple: true,
-        separator: ' | ',
-    },
-}

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

@@ -1,111 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
-import { argTypes, defaultArgs } from './Combobox.settings'
-import { Default } from './Combobox.stories'
-
-const meta: Meta<typeof VvCombobox> = {
-    title: 'Components/Combobox/Options',
-    // @ts-expect-error missing generic components support
-    component: VvCombobox,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCombobox>
-
-export const ArrayOfObjects: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        options: [
-            { value: 'first', label: 'First' },
-            { value: 'second', label: 'Second' },
-            { value: 'third', label: 'Third' },
-        ],
-    },
-}
-
-export const OptionLabelKey: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        labelKey: 'name',
-        options: [
-            { value: 'first', name: 'First' },
-            { value: 'second', name: 'Second' },
-
-            { value: 'third', name: 'Third' },
-        ],
-    },
-}
-
-export const OptionValueKey: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        valueKey: 'id',
-        options: [
-            { id: 'first', label: 'First' },
-            { id: 'second', label: 'Second' },
-            { id: 'third', label: 'Third' },
-        ],
-    },
-}
-
-export const GroupedOptions: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        options: [
-            {
-                label: 'Group 1',
-                options: [
-                    { value: 'first', label: 'First' },
-                    { value: 'second', label: 'Second' },
-                ],
-            },
-            {
-                label: 'Group 2',
-                options: [
-                    { value: 'third', label: 'Third' },
-
-                    { value: 'fourth', label: 'Fourth' },
-                ],
-            },
-        ],
-    },
-}
-
-export const DotPathOptions: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        valueKey: 'value.id',
-        labelKey: 'label.en',
-        options: [
-            { value: { id: 'first' }, label: { it: 'Primo', en: 'First' } },
-            {
-                value: { id: 'second' },
-                label: { it: 'Secondo', en: 'Second' },
-            },
-            { value: { id: 'third' }, label: { it: 'Terzo', en: 'Third' } },
-            { value: { id: 'fourth' }, label: { it: 'Quarto', en: 'Fourth' } },
-        ],
-    },
-}
-
-export const ObjectValue: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        multiple: true,
-        labelKey: 'name',
-        valueKey: '',
-        options: [
-            { name: 'John Doe', email: 'john.doe@test.com' },
-            { name: 'Jane Doe', email: 'jane.doe@test.com' },
-        ],
-    },
-}

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

@@ -1,105 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import { argTypes, defaultArgs } from './Combobox.settings'
-import { Default } from './Combobox.stories'
-import { defaultTest } from './Combobox.test'
-
-const meta: Meta<typeof VvCombobox> = {
-    title: 'Components/Combobox/Slots',
-    // @ts-expect-error missing generic components support
-    component: VvCombobox,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCombobox>
-
-export const Before: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        before: '<div class="vv-badge vv-badge--sm vv-badge--gray vv-badge--outline uppercase">Before</div>',
-    },
-}
-
-export const After: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        after: '<div class="vv-badge vv-badge--sm vv-badge--gray vv-badge--outline uppercase">After</div>',
-    },
-}
-
-export const Value: Story = {
-    args: {
-        ...Default.args,
-        multiple: true,
-    },
-    render: args => ({
-        components: { VvCombobox },
-        setup() {
-            return { args }
-        },
-        data() {
-            return {
-                inputValue: undefined,
-            }
-        },
-        template: /* html */ `
-				<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-					<template #before v-if="args.before"><div class="pl-sm flex" v-html="args.before"></div></template>
-					<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
-					<template #after v-if="args.after"><div class="pr-sm flex" v-html="args.after"></div></template>
-					<template #value="{ selectedOptions }">
-						<div v-for="(option, index) in selectedOptions" :key="index" class="vv-badge vv-badge--sm vv-badge--rounded vv-badge--outline uppercase">{{option}}</div>
-					</template>
-				</vv-combobox>
-				<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-			`,
-    }),
-    play: defaultTest,
-}
-
-export const Option: Story = {
-    args: {
-        ...Default.args,
-        multiple: true,
-    },
-    render: args => ({
-        components: { VvCombobox, VvIcon },
-        setup() {
-            return { args }
-        },
-        data() {
-            return {
-                inputValue: undefined,
-            }
-        },
-        template: /* html */ `
-				<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-					<template #before v-if="args.before"><div class="pl-sm flex" v-html="args.before"></div></template>
-					<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
-					<template #after v-if="args.after"><div class="pr-sm flex" v-html="args.after"></div></template>
-					<template #option="{ option, selected }">
-						<div class="flex flex-1 items-center">
-							<vv-icon :name="selected ? 'check-circle' : 'circle'" />
-							<div class="flex-1 pl-sm">{{ option }}</div>
-						</div>
-					</template>
-				</vv-combobox>
-				<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-			`,
-    }),
-    play: defaultTest,
-}
-
-export const Hint: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        hint: 'Hint <em class="italic">slot!</em>',
-    },
-}

package/src/stories/Dialog/Dialog.settings.ts

@@ -1,54 +0,0 @@
-import type { ArgTypes } from '@storybook/vue3'
-import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
-
-export const defaultArgs = {
-    id: 'dialog',
-    title: 'Dialog Title',
-    transition: 'fade-block',
-    size: 'standard',
-    keepOpen: false,
-    default: 'Default slot content',
-}
-
-export const argTypes: ArgTypes = {
-    title: { control: 'text' },
-    transition: {
-        control: 'radio',
-        options: ['fade-block', 'fade-inline', 'scale'],
-    },
-    modifiers: {
-        ...ModifiersArgTypes.modifiers,
-        options: [
-            'standard',
-            'small',
-            'fullscreen',
-        ],
-    },
-    size: {
-        control: 'radio',
-        options: ['standard', 'small', 'fullscreen'],
-    },
-    ...DefaultSlotArgTypes,
-    header: {
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-    footer: {
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-}