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

package/src/stories/RadioGroup/RadioGroup.test.ts

@@ -1,79 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-import { getOptionValue } from '@/test/options'
-import { sleep } from '@/test/sleep'
-import { within } from '@storybook/test'
-
-export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-    const element = await within(canvasElement).findByTestId('element')
-    const value = await within(canvasElement).findByTestId('value')
-    const radio = element.getElementsByClassName('vv-radio')[0]
-    const input = radio.getElementsByTagName('input')[0]
-    const hint = element.getElementsByClassName('vv-radio-group__hint')[0]
-
-    // unchecked value
-    if (args.uncheckedValue !== undefined) {
-        expect(value.innerHTML).toEqual(String(args.uncheckedValue))
-    }
-
-    // checked value
-    if (
-        !args.invalid
-        && !args.disabled
-        && !args.readonly
-        && args.options
-        && args.options.length > 0
-    ) {
-        radio.addEventListener('click', async () => {
-            await sleep()
-            const firstValue = getOptionValue(args, 0)
-            expect(value.innerHTML).toEqual(firstValue)
-        })
-        await expect(input).toBeChecked()
-    }
-
-    // disabled
-    if (args.disabled) {
-        await expect(element).toHaveClass('vv-radio-group--disabled')
-        await expect(input).toHaveProperty('disabled')
-        await expect(input).not.toBeChecked()
-    }
-
-    // readonly
-    if (args.readonly) {
-        await expect(element).toHaveClass('vv-radio-group--readonly')
-        await expect(input).toHaveProperty('disabled')
-        await expect(input).not.toBeChecked()
-    }
-
-    // vertical
-    if (!args.vertical) {
-        await expect(element).toHaveClass('vv-radio-group--horizontal')
-    }
-
-    // invalid
-    if (args.invalid) {
-        await expect(element).toHaveClass('vv-radio-group--invalid')
-        await expect(input).toHaveProperty('ariaInvalid')
-        if (args.invalidLabel) {
-            await expect(hint.innerHTML).toEqual(args.invalidLabel)
-        }
-    }
-
-    // valid
-    if (args.valid) {
-        await expect(element).toHaveClass('vv-radio-group--valid')
-        await expect(input).toHaveProperty('ariaInvalid', 'false')
-        if (args.validLabel) {
-            await expect(hint.innerHTML).toEqual(args.validLabel)
-        }
-    }
-
-    // hint
-    if (args.hintLabel) {
-        await expect(hint.innerHTML).toEqual(args.hintLabel)
-    }
-
-    // check accessibility
-    await expect(element).toHaveNoViolations()
-}

package/src/stories/RadioGroup/RadioGroupOptions.stories.ts

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
-import { argTypes, defaultArgs } from './RadioGroup.settings'
-import { Default } from './RadioGroup.stories'
-
-const meta: Meta<typeof VvRadioGroup> = {
-    title: 'Components/RadioGroup/Options',
-    component: VvRadioGroup,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvRadioGroup>
-
-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' },
-        ],
-    },
-}

package/src/stories/RadioGroup/RadioGroupSlots.stories.ts

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvRadio from '@/components/VvRadio/VvRadio.vue'
-import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
-import { argTypes, defaultArgs } from './RadioGroup.settings'
-import { defaultTest } from './RadioGroup.test'
-
-const meta: Meta<typeof VvRadioGroup> = {
-    title: 'Components/RadioGroup/Slots',
-    component: VvRadioGroup,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvRadioGroup>
-
-export const Default: Story = {
-    args: {
-        ...defaultArgs,
-    },
-    render: args => ({
-        components: { VvRadioGroup, VvRadio },
-        setup() {
-            return { args }
-        },
-        data: () => ({ inputValue: undefined }),
-        template: /* html */ `
-			<vv-radio-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-				<vv-radio id="o1" name="opts" value="1">Option 1</vv-radio>
-				<vv-radio id="o2" name="opts" value="2">Option 2</vv-radio>
-				<vv-radio id="o3" name="opts" value="3">Option 3</vv-radio>
-				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
-			</vv-radio-group>
-			<div>Value: <span data-testId="value">{{inputValue}}</span></div>	
-		`,
-    }),
-    play: defaultTest,
-}
-
-export const Hint: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        hint: 'Hint <em class="italic">slot!</em>',
-    },
-}

package/src/stories/Select/Select.settings.ts

@@ -1,81 +0,0 @@
-import type { ArgTypes } from '@storybook/vue3'
-import { VvSelectProps } from '@/components/VvSelect'
-import {
-    AutocompleteArgTypes,
-    AutofocusArgTypes,
-    DisabledArgTypes,
-    FloatingLabelArgTypes,
-    HintArgTypes,
-    IconArgTypes,
-    IdNameArgTypes,
-    InvalidArgTypes,
-    LoadingArgTypes,
-    ModifiersArgTypes,
-    OptionsArgTypes,
-    ReadonlyArgTypes,
-    TabindexArgTypes,
-    UnselectableArgTypes,
-    ValidArgTypes,
-} from '@/stories/argTypes'
-
-export const defaultArgs = {
-    ...propsToObject(VvSelectProps),
-    name: 'vv-select',
-    options: ['Option 1', 'Option 2', 'Option 3'],
-    placeholder: 'Select an option',
-    label: 'Select label',
-}
-export const argTypes: ArgTypes = {
-    ...IdNameArgTypes,
-    ...AutofocusArgTypes,
-    ...AutocompleteArgTypes,
-    ...TabindexArgTypes,
-    ...ValidArgTypes,
-    ...InvalidArgTypes,
-    ...HintArgTypes,
-    ...LoadingArgTypes,
-    ...DisabledArgTypes,
-    ...ReadonlyArgTypes,
-    ...ModifiersArgTypes,
-    ...OptionsArgTypes,
-    ...IconArgTypes,
-    ...FloatingLabelArgTypes,
-    ...UnselectableArgTypes,
-    multiple: {
-        description:
-			'This Boolean attribute indicates that multiple options can be selected in the list.',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-    required: {
-        description:
-			'A Boolean attribute indicating that an option with a non-empty string value must be selected.',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-    size: {
-        description:
-			'If the control is presented as a scrolling list box this attribute represents the number of rows in the list.',
-        control: {
-            type: 'text',
-        },
-    },
-    label: {
-        description: '<label> value for the select',
-        control: {
-            type: 'text',
-        },
-    },
-    placeholder: {
-        description: 'Text that appears when it has no value set.',
-        control: {
-            type: 'text',
-        },
-    },
-}

package/src/stories/Select/Select.stories.ts

@@ -1,122 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvSelect from '@/components/VvSelect/VvSelect.vue'
-import { argTypes, defaultArgs } from './Select.settings'
-import { defaultTest } from './Select.test'
-
-const meta: Meta<typeof VvSelect> = {
-    title: 'Components/Select',
-    // @ts-expect-error missing generic components support
-    component: VvSelect,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvSelect>
-
-export const Default: Story = {
-    args: {
-        ...defaultArgs,
-    },
-    render: args => ({
-        components: { VvSelect },
-        setup() {
-            return { args }
-        },
-        data: () => ({ inputValue: undefined }),
-        template: /* html */ `
-			<vv-select v-bind="args" v-model="inputValue" :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-select>
-			<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 Multiple: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        multiple: 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 Floating: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        floating: true,
-    },
-}
-
-export const AutoselectFirst: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        autoselectFirst: true,
-    },
-}

package/src/stories/Select/Select.test.ts

@@ -1,82 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-import { sleep } from '@/test/sleep'
-import { within } from '@storybook/test'
-
-export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-    const element = await within(canvasElement).findByTestId('element')
-    const value = await within(canvasElement).findByTestId('value')
-    const select = element.getElementsByTagName('select')[0]
-    const hint = element.getElementsByClassName('vv-select__hint')[0]
-
-    const { getOptionValue } = useOptions(args)
-
-    if (
-        !args.invalid
-        && !args.disabled
-        && !args.readonly
-        && args.options
-        && args.options.length > 0
-    ) {
-        // select first value
-        const firstValue = getOptionValue(
-            args.options[0].options?.[0] ?? args.options[0],
-        )
-        if (!args.autoselectFirst) {
-            select.value = firstValue
-            select.dispatchEvent(new Event('change'))
-            await sleep()
-        }
-        if (args.multiple) {
-            await expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
-        }
-        else {
-            await expect(value.innerHTML).toEqual(firstValue)
-        }
-    }
-
-    // disabled
-    if (args.disabled) {
-        await expect(element).toHaveClass('vv-select--disabled')
-        await expect(select).toHaveProperty('disabled')
-        await expect(select).not.toBeClicked()
-    }
-
-    // readonly
-    if (args.readonly) {
-        await expect(element).toHaveClass('vv-select--readonly')
-        await expect(select).toHaveProperty('disabled')
-        await expect(select).not.toBeClicked()
-    }
-
-    // invalid
-    if (args.invalid) {
-        await expect(element).toHaveClass('vv-select--invalid')
-        await expect(select).toHaveProperty('ariaInvalid')
-        if (args.invalidLabel) {
-            await expect(hint.innerHTML).toEqual(args.invalidLabel)
-        }
-    }
-
-    // valid
-    if (args.valid) {
-        await expect(element).toHaveClass('vv-select--valid')
-        await expect(select).toHaveProperty('ariaInvalid', 'false')
-        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/Select/SelectIconPosition.stories.ts

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

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

package/src/stories/Select/SelectSlots.stories.ts

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvSelect from '@/components/VvSelect/VvSelect.vue'
-import { argTypes, defaultArgs } from './Select.settings'
-import { Default } from './Select.stories'
-
-const meta: Meta<typeof VvSelect> = {
-    title: 'Components/Select/Slots',
-    // @ts-expect-error missing generic components support
-    component: VvSelect,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvSelect>
-
-export const Before: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        before: '<div class="vv-badge vv-badge--sm uppercase">Before</div>',
-    },
-}
-
-export const After: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        after: '<div class="vv-badge vv-badge--sm uppercase">After</div>',
-    },
-}
-
-export const Hint: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        hint: 'Hint <em class="italic">slot!</em>',
-    },
-}

package/src/stories/Tab/Tab.settings.ts

@@ -1,41 +0,0 @@
-import type { VvTab } from '@/components'
-import type { ArgTypes, Meta } from '@storybook/vue3'
-import { VvTabProps } from '@/components/VvTab'
-
-export const defaultArgs: Meta<typeof VvTab>['args'] = {
-    ...propsToObject(VvTabProps),
-    items: [
-        {
-            tab: 'tab-1',
-            label: 'Item 1',
-        },
-        {
-            tab: 'tab-2',
-            label: 'Item 2',
-        },
-        {
-            label: 'Item 3',
-            on: {
-                click: () => {
-                    // eslint-disable-next-line no-console
-                    console.log('clicked Item 3')
-                },
-            },
-        },
-    ],
-}
-
-export const defaultArgTypes: ArgTypes = {
-    tabId: {
-        description: 'Slot by tab-id',
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-}