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

package/src/stories/Button/Button.stories.ts

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { argTypes, defaultArgs } from './Button.settings'
-import { defaultTest } from './Button.test'
-
-const meta: Meta<typeof VvButton> = {
-    title: 'Components/Button',
-    component: VvButton,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvButton>
-
-export const Default: Story = {
-    args: {
-        ...defaultArgs,
-    },
-    render: args => ({
-        components: { VvButton },
-        setup() {
-            return { args }
-        },
-        data: () => ({ currentValue: undefined }),
-        template: /* html */ `
-			<vv-button v-bind="args" v-model="currentValue" name="my-button" data-testId="element">
-				<template #before v-if="args.before"><div v-html="args.before"></div></template>
-				<template #default v-if="args.default"><div v-html="args.default"></div></template>
-				<template #after v-if="args.after"><div v-html="args.after"></div></template>
-			</vv-button>
-			<div v-if="args.toggle" class="mt-md">Value: {{ currentValue }}</div>
-		`,
-    }),
-    play: defaultTest,
-}

package/src/stories/Button/Button.test.ts

@@ -1,47 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-import { within } from '@storybook/test'
-
-export async function defaultTest(
-    { canvasElement, args }: PlayAttributes = {} as PlayAttributes,
-) {
-    const element = await within(canvasElement).findByTestId('element')
-
-    const modifiers
-		= !args.modifiers || Array.isArray(args.modifiers)
-		    ? args.modifiers
-		    : [args.modifiers]
-
-    await expect(element).toHaveClass('vv-button')
-
-    // icon
-    if (args.icon) {
-        await expect(element.innerHTML).toContain('vv-icon')
-    }
-
-    // modifiers
-    if (modifiers) {
-        for (const modifier of modifiers) {
-            await expect(element).toHaveClass(`vv-button--${modifier}`)
-        }
-    }
-
-    // disabled
-    if (args.disabled) {
-        await expect(element).not.toBeClicked()
-    }
-    else {
-        await expect(element).toBeClicked()
-
-        // link
-        if (args.href) {
-            await expect(element).toHaveProperty('href')
-        }
-        if (args.target) {
-            await expect(element).toHaveProperty('target')
-        }
-    }
-
-    // accessibility
-    await expect(element).toHaveNoViolations()
-}

package/src/stories/Button/ButtonIcon.stories.ts

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { argTypes, defaultArgs } from './Button.settings'
-import { Default } from './Button.stories'
-
-const meta: Meta<typeof VvButton> = {
-    title: 'Components/Button/Icon',
-    component: VvButton,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvButton>
-
-export const Top: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        icon: 'add',
-        iconPosition: 'top',
-        label: 'Button with top icon',
-        modifiers: 'ghost',
-    },
-}
-
-export const Right: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        icon: 'add',
-        iconPosition: 'right',
-        label: 'Button with right icon',
-    },
-}
-
-export const Bottom: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        icon: 'add',
-        iconPosition: 'bottom',
-        label: 'Button with bottom icon',
-        modifiers: 'ghost',
-    },
-}
-
-export const Left: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        icon: 'add',
-        label: 'Button with left icon',
-    },
-}
-
-export const NoLabel: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        icon: 'add',
-        label: '',
-        ariaLabel: 'Add new item',
-        modifiers: 'rounded',
-    },
-}

package/src/stories/Button/ButtonLink.stories.ts

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { argTypes, defaultArgs } from './Button.settings'
-import { Default } from './Button.stories'
-
-const meta: Meta<typeof VvButton> = {
-    title: 'Components/Button/Link',
-    component: VvButton,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvButton>
-
-export const Href: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        icon: 'arrow-right',
-        iconPosition: 'right',
-        label: 'Link button',
-        href: 'https://volverjs.github.io/style',
-        target: '_blank',
-    },
-}
-
-export const HrefDisabled: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        icon: 'arrow-right',
-        iconPosition: 'right',
-        label: 'Link button',
-        href: 'https://volverjs.github.io/style',
-        target: '_blank',
-        disabled: true,
-    },
-}

package/src/stories/Button/ButtonLoading.stories.ts

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { argTypes, defaultArgs } from './Button.settings'
-import { Default } from './Button.stories'
-
-const meta: Meta<typeof VvButton> = {
-    title: 'Components/Button/Loading',
-    component: VvButton,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvButton>
-
-export const Loading: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        loading: true,
-    },
-}
-
-export const Icon: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        loadingIcon: 'reload',
-        loading: true,
-    },
-}
-
-export const Label: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        loadingLabel: 'Reloading...',
-        loading: true,
-    },
-}

package/src/stories/Button/ButtonModifiers.stories.ts

@@ -1,148 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { argTypes, defaultArgs } from './Button.settings'
-import { Default } from './Button.stories'
-
-const meta: Meta<typeof VvButton> = {
-    title: 'Components/Button/Modifiers',
-    component: VvButton,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvButton>
-
-export const Primary: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        label: 'Primary',
-        modifiers: 'primary',
-    },
-}
-
-export const Secondary: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        label: 'Secondary',
-        modifiers: 'secondary',
-    },
-}
-
-export const Danger: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        label: 'Danger',
-        modifiers: 'danger',
-    },
-}
-
-export const Ghost: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        label: 'Ghost',
-        modifiers: 'ghost',
-    },
-}
-
-export const Link: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        label: 'Link',
-
-        modifiers: 'link',
-    },
-}
-
-export const StaticLight: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        label: 'Static light',
-        modifiers: 'static-light',
-    },
-    render: args => ({
-        components: { VvButton },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-			<div class="bg-black p-md">
-				<vv-button v-bind="args" data-testId="element" />
-			</div>
-		`,
-    }),
-}
-
-export const StaticDark: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        label: 'Static dark',
-        modifiers: 'static-dark',
-    },
-    render: args => ({
-        components: { VvButton },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-			<div class="bg-white p-md">
-				<vv-button v-bind="args" data-testId="element" />
-			</div>
-		`,
-    }),
-}
-
-export const Block: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        label: 'Block',
-        modifiers: 'block',
-    },
-}
-
-export const Rounded: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        label: 'Rounded',
-        modifiers: 'rounded',
-    },
-}
-
-export const FullBleed: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        label: 'Full bleed',
-
-        modifiers: 'full-bleed',
-    },
-}
-
-export const Action: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        label: 'Action',
-        modifiers: 'action',
-    },
-}
-
-export const ActionQuiet: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        label: 'Action quiet',
-
-        modifiers: 'action-quiet',
-    },
-}

package/src/stories/Button/ButtonSlots.stories.ts

@@ -1,87 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvBadge from '@/components/VvBadge/VvBadge.vue'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { argTypes, defaultArgs } from './Button.settings'
-import { Default as DefaultStory } from './Button.stories'
-
-const meta: Meta<typeof VvButton> = {
-    title: 'Components/Button/Slots',
-    component: VvButton,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvButton>
-
-export const Default: Story = {
-    ...DefaultStory,
-    args: {
-        ...DefaultStory.args,
-        default: 'Default <em class="italic">slot!</em>',
-    },
-}
-
-export const Before: Story = {
-    ...DefaultStory,
-    args: {
-        ...DefaultStory.args,
-        label: 'Before slot',
-    },
-    render: args => ({
-        components: { VvButton, VvBadge },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-			<vv-button v-bind="args" data-testId="element">
-				<template #before>
-					<vv-badge value="12" modifiers="danger" />
-				</template>
-			</vv-button>
-		`,
-    }),
-}
-
-export const After: Story = {
-    ...DefaultStory,
-    args: {
-        ...DefaultStory.args,
-        label: 'After slot',
-    },
-    render: args => ({
-        components: { VvButton, VvBadge },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-			<vv-button v-bind="args" data-testId="element">
-				<template #after>
-					<vv-badge value="12" modifiers="danger" />
-				</template>
-			</vv-button>
-		`,
-    }),
-}
-
-export const Label: Story = {
-    ...DefaultStory,
-    args: {
-        ...DefaultStory.args,
-        icon: 'add',
-    },
-    render: args => ({
-        components: { VvButton },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-			<vv-button v-bind="args" data-testId="element">
-				<template #label>
-					Label <em class="italic">slot!</em>
-				</template>
-			</vv-button>
-		`,
-    }),
-}

package/src/stories/Button/ButtonState.stories.ts

@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { argTypes, defaultArgs } from './Button.settings'
-import { Default } from './Button.stories'
-
-const meta: Meta<typeof VvButton> = {
-    title: 'Components/Button/State',
-    component: VvButton,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvButton>
-
-export const Active: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        active: true,
-        label: 'Active button',
-    },
-}
-
-export const Pressed: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        pressed: true,
-        label: 'Pressed button',
-    },
-}
-
-export const Disabled: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        disabled: true,
-        label: 'Disabled button',
-    },
-}

package/src/stories/Button/ButtonToggle.stories.ts

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { argTypes, defaultArgs } from './Button.settings'
-import { Default } from './Button.stories'
-
-const meta: Meta<typeof VvButton> = {
-    title: 'Components/Button/Toggle',
-    component: VvButton,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvButton>
-
-export const Toggle: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        toggle: true,
-    },
-}
-
-export const TrueFalse: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        toggle: true,
-        value: true,
-        uncheckedValue: false,
-    },
-}
-
-export const YesNo: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        toggle: true,
-        value: 'yes',
-        uncheckedValue: 'no',
-    },
-}
-
-export const Unselectable: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        toggle: true,
-        unselectable: true,
-    },
-}

package/src/stories/ButtonGroup/ButtonGroup.settings.ts

@@ -1,41 +0,0 @@
-import type { ArgTypes } from '@storybook/vue3'
-import { VvButtonGroupProps } from '@/components/VvButtonGroup'
-import {
-    DefaultSlotArgTypes,
-    ModifiersArgTypes,
-    UnselectableArgTypes,
-} from '@/stories/argTypes'
-import { argTypes as buttonArgTypes } from '../Button/Button.settings'
-
-export const defaultArgs = {
-    ...propsToObject(VvButtonGroupProps),
-    modifiers: [],
-}
-
-export const argTypes: ArgTypes = {
-    modelValue: {
-        table: {
-            disable: true,
-        },
-    },
-    modifiers: {
-        ...ModifiersArgTypes.modifiers,
-        options: ['compact', 'vertical', 'block'],
-    },
-    itemModifiers: {
-        options: buttonArgTypes.modifiers.options,
-        control: {
-            type: 'check',
-        },
-    },
-    legend: {
-        control: {
-            type: 'text',
-            table: {
-                category: 'Slots',
-            },
-        },
-    },
-    ...UnselectableArgTypes,
-    ...DefaultSlotArgTypes,
-}

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

@@ -1,39 +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',
-    component: VvButtonGroup,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-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 name="1a" data-testId="first-button">Button 1</vv-button>
-				<vv-button name="2b">Button 2</vv-button>
-				<vv-button 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/ButtonGroup.test.ts

@@ -1,32 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-import { within } from '@storybook/test'
-
-export async function defaultTest(
-    { canvasElement, args }: PlayAttributes = {} as PlayAttributes,
-) {
-    const buttonGroup = await within(canvasElement).findByTestId('button-group')
-    const firstButton = await within(canvasElement).findByTestId('first-button')
-    const modifiers
-		= !args.modifiers || Array.isArray(args.modifiers)
-		    ? args.modifiers
-		    : [args.modifiers]
-
-    // check modifiers
-    if (modifiers) {
-        for (const modifier of modifiers) {
-            expect(buttonGroup).toHaveClass(`vv-button-group--${modifier}`)
-        }
-    }
-
-    // check disabled
-    if (args.disabled) {
-        await expect(firstButton).not.toBeClicked()
-    }
-    else {
-        await expect(firstButton).toBeClicked()
-    }
-
-    // check accessibility
-    await expect(buttonGroup).toHaveNoViolations()
-}