@volverjs/ui-vue 0.0.13-beta.8 → 0.0.13

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

@@ -0,0 +1,108 @@
+import type { PlayAttributes } from '@/test/types'
+import { within } from 'storybook/test'
+import { defaultTest as selectDefaultTest } from '@/stories/Select/Select.test'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+
+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

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

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

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

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

@@ -0,0 +1,54 @@
+import type { ArgTypes } from '@storybook/vue3-vite'
+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',
+            },
+        },
+    },
+}

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
+import { argTypes, defaultArgs } from './Dialog.settings'
+import { defaultTest } from './Dialog.test'
+
+const meta: Meta<typeof VvDialog> = {
+    title: 'Components/Dialog',
+    component: VvDialog,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvDialog>
+
+export const Default: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvDialog },
+        setup() {
+            return { args }
+        },
+        data: () => ({ open: false }),
+        methods: {
+            onClick() {
+                this.open = !this.open
+            },
+        },
+        template: /* html */ `
+			<vv-dialog v-bind="args" v-model="open" data-testId="element">
+				<template #header v-if="args.header"><div v-html="args.header"></div></template>
+				<template #default v-if="args.default"><div v-html="args.default"></div></template>
+				<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
+			</vv-dialog>
+			<button class="vv-button" @click="onClick" data-testId="button">Toggle</button>
+		`,
+    }),
+    play: defaultTest,
+}
+
+export const KeepOpen: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        keepOpen: true,
+    },
+}

package/src/stories/Dialog/Dialog.test.ts

@@ -0,0 +1,64 @@
+import type { PlayAttributes } from '@/test/types'
+import { userEvent, within } from 'storybook/test'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+
+export async function defaultTest(
+    { canvasElement, args }: PlayAttributes = {} as PlayAttributes,
+) {
+    const element = await within(canvasElement).findByTestId('element')
+    const button = await within(canvasElement).findByTestId('button')
+
+    // hidden
+    await expect(element?.style.display).toEqual('none')
+
+    // open
+    await userEvent.click(button)
+    await expect(element).toHaveProperty('open', true)
+
+    // check accessibility
+    await expect(element).toHaveNoViolations()
+
+    // size
+    if (args.size) {
+        await expect(element).toHaveClass(`vv-dialog--${args.size}`)
+    }
+
+    // default slot
+    if (args.default) {
+        const defaultSlot = element.getElementsByClassName(
+            'vv-dialog__content',
+        )[0].firstElementChild as HTMLElement
+        await expect(
+            defaultSlot.innerHTML.replace(/<!--(.*?)-->/g, ''),
+        ).toEqual(args.default)
+    }
+
+    // header slot
+    if (args.header) {
+        const headerSlot = element.getElementsByClassName(
+            'vv-dialog__header',
+        )[0].firstElementChild as HTMLElement
+        await expect(headerSlot.innerHTML.replace(/<!--(.*?)-->/g, '')).toEqual(
+            args.header,
+        )
+    }
+
+    // footer slot
+    if (args.footer) {
+        const headerSlot = element.getElementsByClassName(
+            'vv-dialog__footer',
+        )[0].firstElementChild as HTMLElement
+        await expect(headerSlot.innerHTML.replace(/<!--(.*?)-->/g, '')).toEqual(
+            args.footer,
+        )
+    }
+
+    // keep open
+    if (!args.keepOpen) {
+        await userEvent.click(element)
+        await sleep(1000)
+        await expect(element).toHaveProperty('open', false)
+        await expect(element?.style.display).toEqual('none')
+    }
+}

package/src/stories/Dialog/DialogModifiers.stories.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
+import { argTypes, defaultArgs } from './Dialog.settings'
+import { Default } from './Dialog.stories'
+
+const meta: Meta<typeof VvDialog> = {
+    title: 'Components/Dialog/Modifiers',
+    component: VvDialog,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvDialog>
+
+export const Standard: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        title: 'Standard',
+        modifiers: 'standard',
+    },
+}
+
+export const Small: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        title: 'Small',
+        modifiers: 'small',
+    },
+}
+
+export const Fullscreen: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        title: 'Fullscreen',
+        modifiers: 'fullscreen',
+    },
+}

package/src/stories/Dialog/DialogSlots.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
+import { argTypes, defaultArgs } from './Dialog.settings'
+import { Default as DefaultStory } from './Dialog.stories'
+
+const meta: Meta<typeof VvDialog> = {
+    title: 'Components/Dialog/Slots',
+    component: VvDialog,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvDialog>
+
+export const Default: Story = {
+    ...DefaultStory,
+    args: {
+        ...defaultArgs,
+        default: 'DefaultStory <em class="italic">slot!</em>',
+    },
+}
+
+export const HeaderSlot: Story = {
+    ...DefaultStory,
+    args: {
+        ...defaultArgs,
+        header: 'Header <em class="italic">slot!</em>',
+    },
+}
+
+export const FooterSlot: Story = {
+    ...DefaultStory,
+    args: {
+        ...defaultArgs,
+        footer: 'Footer <em class="italic">slot!</em>',
+    },
+}