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

package/src/stories/CheckboxGroup/CheckboxGroup.stories.ts

@@ -1,87 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
-import { argTypes, defaultArgs } from './CheckboxGroup.settings'
-import { defaultTest } from './CheckboxGroup.test'
-
-const meta: Meta<typeof VvCheckboxGroup> = {
-    title: 'Components/CheckboxGroup',
-    component: VvCheckboxGroup,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCheckboxGroup>
-
-export const Default: Story = {
-    args: {
-        ...defaultArgs,
-    },
-    render: args => ({
-        components: { VvCheckboxGroup },
-        setup() {
-            return { args }
-        },
-        data: () => ({ inputValue: undefined }),
-        template: /* html */ `
-			<vv-checkbox-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-				<template #default v-if="args.default"><span v-html="args.default"></span></template>
-				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
-			</vv-checkbox-group>
-			<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 Vertical: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        vertical: true,
-    },
-}
-
-export const Invalid: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        invalid: true,
-        invalidLabel: 'This field is required.',
-    },
-}
-
-export const Valid: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        valid: true,
-        validLabel: 'Selected response is valid.',
-    },
-}
-
-export const Hint: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        hint: 'Please fill the input above.',
-    },
-}

package/src/stories/CheckboxGroup/CheckboxGroup.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 checkbox = element.getElementsByClassName('vv-checkbox')[0]
-    const input = checkbox.getElementsByTagName('input')[0]
-    const hint = element.getElementsByClassName('vv-checkbox-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
-    ) {
-        checkbox.addEventListener('click', async () => {
-            await sleep()
-            const firstValue = getOptionValue(args, 0)
-            expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
-        })
-        await expect(input).toBeChecked()
-    }
-
-    // disabled
-    if (args.disabled) {
-        await expect(element).toHaveClass('vv-checkbox-group--disabled')
-        await expect(input).toHaveProperty('disabled')
-        await expect(input).not.toBeChecked()
-    }
-
-    // readonly
-    if (args.readonly) {
-        await expect(element).toHaveClass('vv-checkbox-group--readonly')
-        await expect(input).toHaveProperty('disabled')
-        await expect(input).not.toBeChecked()
-    }
-
-    // vertical
-    if (!args.vertical) {
-        await expect(element).toHaveClass('vv-checkbox-group--horizontal')
-    }
-
-    // invalid
-    if (args.invalid) {
-        await expect(element).toHaveClass('vv-checkbox-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-checkbox-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/CheckboxGroup/CheckboxGroupOptions.stories.ts

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

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
-import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
-import { argTypes, defaultArgs } from './CheckboxGroup.settings'
-import { defaultTest } from './CheckboxGroup.test'
-
-const meta: Meta<typeof VvCheckboxGroup> = {
-    title: 'Components/CheckboxGroup/Slots',
-    component: VvCheckboxGroup,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCheckboxGroup>
-
-export const Default: Story = {
-    args: {
-        ...defaultArgs,
-    },
-    render: args => ({
-        components: { VvCheckboxGroup, VvCheckbox },
-        setup() {
-            return { args }
-        },
-        data: () => ({ inputValue: undefined }),
-        template: /* html */ `
-			<vv-checkbox-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-				<vv-checkbox id="o1" name="opts" value="1">Option 1</vv-checkbox>
-				<vv-checkbox id="o2" name="opts" value="2">Option 2</vv-checkbox>
-				<vv-checkbox id="o3" name="opts" value="3">Option 3</vv-checkbox>
-				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
-			</vv-checkbox-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/Combobox/Combobox.settings.ts

@@ -1,418 +0,0 @@
-import type { VvCombobox } from '@/components'
-import type { ArgTypes, Meta } from '@storybook/vue3'
-import { VvComboboxProps } from '@/components/VvCombobox'
-import {
-    DisabledArgTypes,
-    DropdownArgTypes,
-    FloatingLabelArgTypes,
-    HintArgTypes,
-    IconArgTypes,
-    InvalidArgTypes,
-    LoadingArgTypes,
-    ModifiersArgTypes,
-    OptionsArgTypes,
-    ReadonlyArgTypes,
-    TabindexArgTypes,
-    UnselectableArgTypes,
-    ValidArgTypes,
-} from '@/stories/argTypes'
-
-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',
-            },
-        },
-    },
-    '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',
-        },
-    },
-    'searchable': {
-        description: 'Enable search in options',
-        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',
-            },
-        },
-    },
-}