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

package/src/stories/ButtonGroup/ButtonGroupModifiers.stories.ts

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
-import { argTypes, defaultArgs } from './ButtonGroup.settings'
-import { Default } from './ButtonGroup.stories'
-
-const meta: Meta<typeof VvButtonGroup> = {
-    title: 'Components/ButtonGroup/Modifiers',
-    component: VvButtonGroup,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvButtonGroup>
-
-export const Compact: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        modifiers: 'compact',
-    },
-}
-
-export const Vertical: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        modifiers: 'vertical',
-    },
-}
-
-export const Block: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        modifiers: 'block',
-    },
-}

package/src/stories/ButtonGroup/ButtonGroupSlots.stories.ts

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
-import { argTypes, defaultArgs } from './ButtonGroup.settings'
-import { defaultTest } from './ButtonGroup.test'
-
-const meta: Meta<typeof VvButtonGroup> = {
-    title: 'Components/ButtonGroup/Slots',
-    component: VvButtonGroup,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvButtonGroup>
-
-export const Default: Story = {
-    args: {
-        ...defaultArgs,
-    },
-    render: args => ({
-        components: { VvButton, VvButtonGroup },
-        setup() {
-            return { args }
-        },
-        data: () => ({ value: undefined }),
-        template: /* html */ `
-			<vv-button-group v-bind="args" v-model="value" data-testId="button-group">
-				<vv-button modifiers="primary" name="1a" data-testId="first-button">Button 1</vv-button>
-				<vv-button modifiers="secondary" name="2b">Button 2</vv-button>
-				<vv-button modifiers="danger" name="3c">Button 3</vv-button>
-			</vv-button-group>
-			<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>
-		`,
-    }),
-    play: defaultTest,
-}

package/src/stories/ButtonGroup/ButtonGroupToggle.stories.ts

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
-import { argTypes, defaultArgs } from './ButtonGroup.settings'
-import { Default } from './ButtonGroup.stories'
-
-const meta: Meta<typeof VvButtonGroup> = {
-    title: 'Components/ButtonGroup/Toggle',
-    component: VvButtonGroup,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvButtonGroup>
-
-export const Toggle: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        toggle: true,
-    },
-}
-
-export const Multiple: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        toggle: true,
-        multiple: true,
-    },
-}
-
-export const Unselectable: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        toggle: true,
-        unselectable: true,
-    },
-}

package/src/stories/Card/Card.settings.ts

@@ -1,56 +0,0 @@
-import type { ArgTypes } from '@storybook/vue3'
-import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
-
-export const defaultArgs = {
-    title: 'Card title',
-    content:
-		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-}
-
-export const argTypes: ArgTypes = {
-    modifiers: {
-        ...ModifiersArgTypes.modifiers,
-        options: ['glass'],
-    },
-    title: {
-        description: 'The title of the card',
-        control: { type: 'text' },
-    },
-    ...DefaultSlotArgTypes,
-    header: {
-        description: 'The header slot',
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-    content: {
-        description: 'The content slot',
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-    footer: {
-        description: 'The footer slot',
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-}

package/src/stories/Card/Card.stories.ts

@@ -1,46 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCard from '@/components/VvCard/VvCard.vue'
-import { argTypes, defaultArgs } from './Card.settings'
-import { defaulTest } from './Card.test'
-
-const meta: Meta<typeof VvCard> = {
-    title: 'Components/Card',
-    component: VvCard,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCard>
-
-const Template: Story = {
-    args: {
-        ...defaultArgs,
-    },
-    render: args => ({
-        components: { VvCard },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-			<vv-card v-bind="args" data-testId="card">
-				<template #default v-if="args.default"><div v-html="args.default"></div></template>
-				<template #header v-if="args.header"><div v-html="args.header"></div></template>
-				<template #content v-if="args.content"><div v-html="args.content"></div></template>
-				<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
-			</vv-card>
-		`,
-    }),
-    play: defaulTest,
-}
-
-export const Default: Story = {
-    ...Template,
-    args: {
-        ...defaultArgs,
-        content:
-			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-    },
-}

package/src/stories/Card/Card.test.ts

@@ -1,21 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-import { within } from '@storybook/test'
-
-export async function defaulTest({ canvasElement, args }: PlayAttributes) {
-    const element = await within(canvasElement).findByTestId('card')
-    const modifiers
-		= !args.modifiers || Array.isArray(args.modifiers)
-		    ? args.modifiers
-		    : [args.modifiers]
-
-    // check modifiers
-    if (modifiers) {
-        for (const modifier of modifiers) {
-            await expect(element).toHaveClass(`vv-card--${modifier}`)
-        }
-    }
-
-    // check accessibility
-    await expect(element).toHaveNoViolations()
-}

package/src/stories/Card/CardSlots.stories.ts

@@ -1,81 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCard from '@/components/VvCard/VvCard.vue'
-import { argTypes, defaultArgs } from './Card.settings'
-import { defaulTest } from './Card.test'
-
-const meta: Meta<typeof VvCard> = {
-    title: 'Components/Card/Slots',
-    component: VvCard,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCard>
-
-const Template: Story = {
-    args: {
-        ...defaultArgs,
-    },
-    render: args => ({
-        components: { VvCard },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-			<vv-card v-bind="args" data-testId="card">
-				<template #default v-if="args.default"><div v-html="args.default"></div></template>
-				<template #header v-if="args.header"><div v-html="args.header"></div></template>
-				<template #content v-if="args.content"><div v-html="args.content"></div></template>
-				<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
-			</vv-card>
-		`,
-    }),
-    play: defaulTest,
-}
-
-export const Default: Story = {
-    args: {
-        ...defaultArgs,
-    },
-    render: args => ({
-        components: { VvCard },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-		<vv-card v-bind="args" class="max-w-max" data-testId="card">
-			<picture>
-				<img class="aspect-photo h-300" src="https://unsplash.it/300" alt="Card picture"/>
-			</picture>
-		</vv-card>
-	`,
-    }),
-    play: defaulTest,
-}
-
-export const Header: Story = {
-    ...Template,
-    args: {
-        ...defaultArgs,
-        header: 'Header <em class="italic">slot!</em>',
-    },
-}
-
-export const Content: Story = {
-    ...Template,
-    args: {
-        ...defaultArgs,
-        content:
-			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-    },
-}
-
-export const Footer: Story = {
-    ...Template,
-    args: {
-        ...defaultArgs,
-        footer: 'Footer <em class="italic">slot!</em>',
-    },
-}

package/src/stories/Checkbox/Checkbox.settings.ts

@@ -1,42 +0,0 @@
-import type { ArgTypes } from '@storybook/vue3'
-import { CheckboxRadioArgTypes } from '@/stories/argTypes'
-
-export const defaultArgs = {
-    name: 'checkbox',
-    label: 'Option',
-    value: 'my-value',
-    tabindex: 0,
-    disabled: false,
-    switch: false,
-    readonly: false,
-    invalid: false,
-    valid: false,
-    indeterminate: false,
-    uncheckedValue: undefined,
-}
-
-export const argTypes: ArgTypes = {
-    ...CheckboxRadioArgTypes,
-    indeterminate: {
-        description: 'If true, the input will be indeterminated',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-    uncheckedValue: {
-        description: 'Value associated with the unchecked state.',
-        control: {
-            type: 'text',
-        },
-    },
-    switch: {
-        description: 'If true, the input will be displayed as a switch.',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-}

package/src/stories/Checkbox/Checkbox.stories.ts

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
-import { argTypes, defaultArgs } from './Checkbox.settings'
-import { defaultTest } from './Checkbox.test'
-
-const meta: Meta<typeof VvCheckbox> = {
-    title: 'Components/Checkbox',
-    component: VvCheckbox,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCheckbox>
-
-export const Default: Story = {
-    args: {
-        ...defaultArgs,
-    },
-    render: args => ({
-        components: { VvCheckbox },
-        setup() {
-            return { args }
-        },
-        data: () => ({ inputValue: args.uncheckedValue }),
-        template: /* html */ `
-			<vv-checkbox 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>
-			<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 Switch: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        switch: true,
-    },
-}
-
-export const Invalid: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        invalid: true,
-        invalidLabel: 'You must accept terms and conditions',
-        label: 'Accept terms and conditions',
-    },
-}
-
-export const Valid: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        valid: true,
-        validLabel: 'Thank you for accepting terms and conditions',
-        label: 'Accept terms and conditions',
-    },
-}
-
-export const Indeterminate: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        indeterminate: true,
-    },
-}
-
-export const Hint: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        hintLabel: 'Please accept terms and conditions',
-    },
-}

package/src/stories/Checkbox/Checkbox.test.ts

@@ -1,78 +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 input = element.getElementsByTagName('input')[0]
-    const hint = element.getElementsByClassName('vv-checkbox__hint')[0]
-
-    // unchecked value
-    if (args.uncheckedValue !== undefined) {
-        expect(value.innerHTML).toEqual(String(args.uncheckedValue))
-    }
-
-    // checked value
-    if (!args.invalid && !args.indeterminate) {
-        element.addEventListener('click', async () => {
-            await sleep()
-            if (!args.disabled && !args.readonly) {
-                expect(value.innerHTML).toEqual(String(args.value))
-            }
-        })
-        if (args.disabled || args.readonly) {
-            await expect(input).not.toBeChecked()
-        }
-        else {
-            await expect(input).toBeChecked()
-        }
-    }
-
-    // disabled
-    if (args.disabled) {
-        await expect(element).toHaveClass('vv-checkbox--disabled')
-        await expect(input).toHaveProperty('disabled')
-        await expect(input).not.toBeChecked()
-    }
-
-    // readonly
-    if (args.readonly) {
-        await expect(element).toHaveClass('vv-checkbox--readonly')
-        await expect(input).toHaveProperty('disabled')
-        await expect(input).not.toBeChecked()
-    }
-
-    // indeterminate
-    if (args.indeterminate) {
-        await expect(element).toHaveClass('vv-checkbox--indeterminate')
-        await expect(input).toHaveProperty('indeterminate')
-    }
-
-    // invalid
-    if (args.invalid) {
-        await expect(element).toHaveClass('vv-checkbox--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--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/Checkbox/CheckboxBinary.stories.ts

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
-import { argTypes, defaultArgs } from './Checkbox.settings'
-import { Default } from './Checkbox.stories'
-
-const meta: Meta<typeof VvCheckbox> = {
-    title: 'Components/Checkbox/Binary',
-    component: VvCheckbox,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCheckbox>
-
-export const TrueFalse: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        value: true,
-        uncheckedValue: false,
-    },
-}
-
-export const YesNo: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        value: 'Yes',
-        uncheckedValue: 'No',
-    },
-}

package/src/stories/Checkbox/CheckboxSlots.stories.ts

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
-import { argTypes, defaultArgs } from './Checkbox.settings'
-import { Default as DefaultStory } from './Checkbox.stories'
-
-const meta: Meta<typeof VvCheckbox> = {
-    title: 'Components/Checkbox/Slots',
-    component: VvCheckbox,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvCheckbox>
-
-export const Default: Story = {
-    ...DefaultStory,
-    args: {
-        ...defaultArgs,
-        default: 'DefaultStory <em class="italic">slot!</em>',
-    },
-}
-
-export const HintSlot: Story = {
-    ...DefaultStory,
-    args: {
-        ...defaultArgs,
-        hint: 'Hint <em class="italic">slot!</em>',
-    },
-}

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

@@ -1,15 +0,0 @@
-import { CheckboxRadioGroupArgTypes } from '@/stories/argTypes'
-
-export const defaultArgs = {
-    name: 'checkbox-group',
-    label: 'Select an option',
-    options: ['Option 1', 'Option 2', 'Option 3'],
-    disabled: false,
-    readonly: false,
-    vertical: false,
-    invalid: false,
-    valid: false,
-    tabindex: 0,
-}
-
-export const argTypes = CheckboxRadioGroupArgTypes