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

package/src/stories/AlertGroup/AlertGroupPosition.stories.ts

@@ -1,104 +0,0 @@
-import type { Meta } from '@storybook/vue3'
-import type { Story } from './AlertGroup.stories'
-import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
-import { argTypes, defaultArgs } from './AlertGroup.settings'
-import { Default } from './AlertGroup.stories'
-
-const meta: Meta<typeof VvAlertGroup> = {
-    title: 'Components/AlertGroup/Position',
-    component: VvAlertGroup,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-export const TopStart: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        position: 'absolute',
-        block: 'top',
-        inline: 'start',
-    },
-}
-
-export const TopMiddle: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        position: 'absolute',
-        block: 'top',
-        inline: 'middle',
-    },
-}
-
-export const TopEnd: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        position: 'absolute',
-        block: 'top',
-        inline: 'end',
-    },
-}
-
-export const CenterStart: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        position: 'absolute',
-        block: 'center',
-        inline: 'start',
-    },
-}
-
-export const CenterMiddle: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        position: 'absolute',
-        block: 'center',
-        inline: 'middle',
-    },
-}
-
-export const CenterEnd: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        position: 'absolute',
-        block: 'center',
-        inline: 'end',
-    },
-}
-
-export const BottomStart: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        position: 'absolute',
-        block: 'bottom',
-        inline: 'start',
-    },
-}
-
-export const BottomMiddle: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        position: 'absolute',
-        block: 'bottom',
-        inline: 'middle',
-    },
-}
-
-export const BottomEnd: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        position: 'absolute',
-        block: 'bottom',
-        inline: 'end',
-    },
-}

package/src/stories/AlertGroup/AlertGroupSlots.stories.ts

@@ -1,68 +0,0 @@
-import type { Meta } from '@storybook/vue3'
-import type { Story } from './AlertGroup.stories'
-import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
-import { argTypes, defaultArgs } from './AlertGroup.settings'
-import { Default as DefaultStory } from './AlertGroup.stories'
-
-const meta: Meta<typeof VvAlertGroup> = {
-    title: 'Components/AlertGroup/Slots',
-    component: VvAlertGroup,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-export const Default: Story = {
-    ...DefaultStory,
-    args: {
-        ...defaultArgs,
-        modifiers: ['notification'],
-        default: /* html */ `
-			<div class="vv-alert vv-alert--success" role="alert" aria-labelledby="Els38gSOH_Op3SFpzekW--title" style="--alert-duration:0ms;">
-				<div class="vv-alert__header">
-					<strong id="Els38gSOH_Op3SFpzekW--title" class="vv-alert__title">Success!</strong>
-				</div>
-				<div class="vv-alert__content">This is an success message.</div>
-			</div>
-			<div class="vv-alert vv-alert--accent mt-xs" role="alert" aria-labelledby="nkas44ZTfhbt5OEJYL06N-title" style="--alert-duration:0ms;">
-				<div class="vv-alert__header">
-					<strong id="nkas44ZTfhbt5OEJYL06N-title" class="vv-alert__title">Accent!</strong>
-				</div>
-				<div class="vv-alert__content">This is an accent message.</div>
-			</div>
-		`,
-    },
-}
-
-export const Before: Story = {
-    ...DefaultStory,
-    args: {
-        ...defaultArgs,
-        modifiers: ['notification'],
-        before: /* html */ `
-			<div class="flex justify-center">
-				<button type="button" class="vv-button vv-button--action-quiet" id="y_Cl2wtJ8JJpDo-t6za2i">
-					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="vv-icon vv-button__icon iconify iconify--normal iconify--vv" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M6 18 18 6M6 6l12 12"></path></svg>
-					<span class="vv-button__label">Clear All</span>
-				</button>
-			</div>
-		`,
-    },
-}
-
-export const After: Story = {
-    ...DefaultStory,
-    args: {
-        ...defaultArgs,
-        modifiers: ['notification'],
-        after: /* html */ `
-			<div class="flex justify-center">
-				<button type="button" class="vv-button vv-button--action-quiet" id="y_Cl2wtJ8JJpDo-t6za2i">
-					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="vv-icon vv-button__icon iconify iconify--normal iconify--vv" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M6 18 18 6M6 6l12 12"></path></svg>
-					<span class="vv-button__label">Clear All</span>
-				</button>
-			</div>
-		`,
-    },
-}

package/src/stories/AlertGroup/AlertGroupWithComposable.stories.ts

@@ -1,119 +0,0 @@
-import type { Meta } from '@storybook/vue3'
-import type { Story } from './AlertGroup.stories'
-import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { useAlert } from '@/composables/alert/useAlert'
-import { argTypes, defaultArgs } from './AlertGroup.settings'
-import { Default as DefaultStory } from './AlertGroup.stories'
-
-const meta: Meta<typeof VvAlertGroup> = {
-    title: 'Composables/useAlert',
-    component: VvAlertGroup,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-export default meta
-
-export const Default: Story = {
-    ...DefaultStory,
-    parameters: {
-        docs: {
-            source: {
-                type: 'code',
-                language: 'html',
-                code: /* html */ `
-<div class="flex gap-md">
-	<vv-button label="Show success" modifiers="secondary" @click="showSuccess" class="mb-lg" />
-	<vv-button label="Show danger" modifiers="secondary" @click="showDanger" class="mb-lg" />
-	<vv-button label="Show warning" modifiers="secondary" @click="showWarning" class="mb-lg" />
-	<vv-button label="Show info" modifiers="secondary" @click="showInfo" class="mb-lg" />
-</div>
-<vv-alert-group v-bind="args" :items="alerts" :onClose="removeAlert" data-testId="element" />
-
-<script setup lang='ts'>
-	import { useAlert } from '@volverjs/ui-vue/composables'
-
-	const { addAlert, removeAlert, alerts } = useAlert()
-
-	function showSuccess() {
-		addAlert({
-			title: 'Success!',
-			modifiers: 'success',
-		})
-	}
-	function showDanger() {
-		addAlert({
-			title: 'Danger!',
-			modifiers: 'danger',
-		})
-	}
-	function showWarning() {
-		addAlert({
-			title: 'Warning!',
-			modifiers: 'warning',
-		})
-	}
-	function showInfo() {
-		addAlert({
-			title: 'Info!',
-			modifiers: 'info',
-		})
-	}
-</script>
-				`,
-            },
-        },
-    },
-    render: args => ({
-        components: { VvAlertGroup, VvButton },
-        setup() {
-            const { addAlert, removeAlert, alerts } = useAlert()
-
-            function showSuccess() {
-                addAlert({
-                    title: 'Success!',
-                    modifiers: 'success',
-                })
-            }
-            function showDanger() {
-                addAlert({
-                    title: 'Danger!',
-                    modifiers: 'danger',
-                })
-            }
-            function showWarning() {
-                addAlert({
-                    title: 'Warning!',
-                    modifiers: 'warning',
-                })
-            }
-            function showInfo() {
-                addAlert({
-                    title: 'Info!',
-                    modifiers: 'info',
-                })
-            }
-
-            return {
-                args,
-                alerts,
-                removeAlert,
-                showSuccess,
-                showDanger,
-                showWarning,
-                showInfo,
-            }
-        },
-        template: /* html */ `
-			<div class="buttons-container flex gap-md" >
-				<vv-button id="success" label="Show success" modifiers="secondary" @click="showSuccess" class="mb-lg" />
-				<vv-button id="danger" label="Show danger" modifiers="secondary" @click="showDanger" class="mb-lg" />
-				<vv-button id="warning" label="Show warning" modifiers="secondary" @click="showWarning" class="mb-lg" />
-				<vv-button id="info" label="Show info" modifiers="secondary" @click="showInfo" class="mb-lg" />
-			</div>
-			<vv-alert-group v-bind="args" :items="alerts" :onClose="removeAlert" data-testId="element" />
-        `,
-    }),
-}

package/src/stories/Avatar/Avatar.settings.ts

@@ -1,37 +0,0 @@
-import type { ArgTypes } from '@storybook/types'
-import { VvAvatarProps } from '@/components/VvAvatar'
-import { DefaultSlotArgTypes } from '@/stories/argTypes'
-
-export const defaultArgs = {
-    ...propsToObject(VvAvatarProps),
-    imgSrc: 'https://i.pravatar.cc/300',
-}
-
-export const argTypes: ArgTypes = {
-    ...DefaultSlotArgTypes,
-    default: {
-        description: 'Content slot',
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-    modifiers: {
-        description: 'Component BEM modifiers',
-        control: {
-            type: 'check',
-        },
-        options: ['rounded', 'square', 'bordered', 'ring', 'lg', 'md'],
-    },
-    imgSrc: {
-        control: {
-            type: 'text',
-        },
-        description: 'The image url',
-    },
-}

package/src/stories/Avatar/Avatar.stories.ts

@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
-import { defaultTest } from '../Avatar/Avatar.test'
-import { argTypes, defaultArgs } from './Avatar.settings'
-
-const meta: Meta<typeof VvAvatar> = {
-    title: 'Components/Avatar',
-    component: VvAvatar,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvAvatar>
-
-export const Default: Story = {
-    args: {
-        ...defaultArgs,
-        default: 'MR',
-    },
-    render: args => ({
-        components: { VvAvatar },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-			<vv-avatar v-bind="args" data-testId="element">
-				<template v-if="args.default"> {{ args.default }} </template>
-			</vv-avatar>
-    `,
-    }),
-    play: defaultTest,
-}
-
-export const Image: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-    },
-}

package/src/stories/Avatar/Avatar.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) {
-    const element = await within(canvasElement).findByTestId('element')
-
-    // slot default
-    if (!args.default && !args.imgSrc) {
-        throw new Error('Default slot or imgSrc is required!')
-    }
-
-    const modifiers
-		= !args.modifiers || Array.isArray(args.modifiers)
-		    ? args.modifiers
-		    : args.modifiers.split(' ')
-
-    // modifiers
-    if (modifiers) {
-        for (const modifier of modifiers) {
-            expect(element).toHaveClass(`vv-avatar--${modifier}`)
-        }
-    }
-
-    // check img tag exist
-    if (args.imgSrc && !args.default) {
-        expect(element).toHaveImgChild('img')
-    }
-
-    // check accessibility
-    await expect(element).toHaveNoViolations()
-}

package/src/stories/Avatar/AvatarBadge.stories.ts

@@ -1,36 +0,0 @@
-// Replace vue3 with vue if you are using Storybook for Vue 2
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
-import VvBadge from '@/components/VvBadge/VvBadge.vue'
-import { argTypes, defaultArgs } from './Avatar.settings'
-
-const meta: Meta<typeof VvAvatar> = {
-    title: 'Components/Avatar/Badge',
-    component: VvAvatar,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvAvatar>
-
-export const Badge: Story = {
-    args: {
-        modifiers: 'lg',
-    },
-    render: args => ({
-        components: { VvAvatar, VvBadge },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-			<vv-avatar v-bind="args" data-testId="element">
-				MR
-                <sup>
-                    <vv-badge modifiers="danger rounded">99+</vv-badge>
-                </sup>
-			</vv-avatar>
-    `,
-    }),
-}

package/src/stories/Avatar/AvatarModifiers.stories.ts

@@ -1,100 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
-import { defaultTest } from '../Avatar/Avatar.test'
-import { argTypes, defaultArgs } from './Avatar.settings'
-
-const meta: Meta<typeof VvAvatar> = {
-    title: 'Components/Avatar/Modifiers',
-    component: VvAvatar,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvAvatar>
-
-const VvAvatarTemplate: Story = {
-    args: {
-        default: 'MR',
-        modifiers: '',
-    },
-    render: args => ({
-        components: { VvAvatar },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-			<vv-avatar v-bind="args" data-testId="element">
-				{{ args.default }}
-			</vv-avatar>`,
-    }),
-    play: defaultTest,
-}
-
-export const Small: Story = {
-    ...VvAvatarTemplate,
-}
-
-export const Medium: Story = {
-    ...VvAvatarTemplate,
-    args: {
-        ...VvAvatarTemplate.args,
-        modifiers: 'md',
-    },
-}
-
-export const Large: Story = {
-    ...VvAvatarTemplate,
-    args: {
-        ...VvAvatarTemplate.args,
-        modifiers: 'lg',
-    },
-}
-
-export const Rounded: Story = {
-    ...VvAvatarTemplate,
-    args: {
-        ...VvAvatarTemplate.args,
-        modifiers: 'rounded md',
-    },
-}
-
-export const Square: Story = {
-    ...VvAvatarTemplate,
-    args: {
-        ...VvAvatarTemplate.args,
-        modifiers: 'square md',
-    },
-}
-
-export const Bordered: Story = {
-    ...VvAvatarTemplate,
-    args: {
-        ...VvAvatarTemplate.args,
-        modifiers: 'bordered md',
-    },
-}
-
-export const Ring: Story = {
-    ...VvAvatarTemplate,
-    args: {
-        ...VvAvatarTemplate.args,
-        modifiers: 'ring md',
-    },
-}
-
-export const CustomColor: Story = {
-    ...VvAvatarTemplate,
-    args: {
-        ...VvAvatarTemplate.args,
-        modifiers: 'accent md',
-    },
-    argTypes: {
-        ...argTypes,
-        modifiers: {
-            ...argTypes.modifiers,
-            options: [...(argTypes.modifiers.options ?? []), 'accent'],
-        },
-    },
-}

package/src/stories/Avatar/AvatarSlots.stories.ts

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
-import { defaultTest } from '../Avatar/Avatar.test'
-import { argTypes, defaultArgs } from './Avatar.settings'
-
-const meta: Meta<typeof VvAvatar> = {
-    title: 'Components/Avatar/Slots',
-    component: VvAvatar,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvAvatar>
-
-export const Default: Story = {
-    args: {
-        ...defaultArgs,
-        default: 'MR',
-    },
-    render: args => ({
-        components: { VvAvatar },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-			<vv-avatar v-bind="args" data-testId="element">
-				<template v-if="args.default"> {{ args.default }} </template>
-			</vv-avatar>
-    `,
-    }),
-    play: defaultTest,
-}

package/src/stories/AvatarGroup/AvatarGroup.settings.ts

@@ -1,61 +0,0 @@
-import type { ArgTypes } from '@storybook/vue3'
-import { VvAvatarGroupProps } from '@/components/VvAvatarGroup'
-import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
-
-export const defaultArgs = {
-    ...propsToObject(VvAvatarGroupProps),
-    items: [
-        {
-            text: 'MR',
-            imgSrc: 'https://i.pravatar.cc/300',
-            modifiers: 'rounded',
-        },
-        {
-            imgSrc: 'https://i.pravatar.cc/300',
-            modifiers: 'rounded',
-        },
-        {
-            imgSrc: 'https://i.pravatar.cc/300',
-            modifiers: 'rounded',
-        },
-        {
-            imgSrc: 'https://i.pravatar.cc/300',
-            modifiers: 'rounded',
-        },
-    ],
-    avatarModifiers: 'rounded',
-}
-
-export const argTypes: ArgTypes = {
-    ...DefaultSlotArgTypes,
-    default: {
-        description: 'Default slot',
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-    modifiers: {
-        ...ModifiersArgTypes.modifiers,
-        options: ['tight', 'relaxed'],
-    },
-    avatarModifiers: {
-        ...ModifiersArgTypes.modifiers,
-        options: ['rounded', 'square', 'bordered', 'ring', 'lg', 'md'],
-    },
-    toShow: {
-        control: {
-            type: 'number',
-        },
-    },
-    totalItems: {
-        control: {
-            type: 'number',
-        },
-    },
-}

package/src/stories/AvatarGroup/AvatarGroup.stories.ts

@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
-import { argTypes, defaultArgs } from './AvatarGroup.settings'
-import { defaultTest } from './AvatarGroup.test'
-
-const meta: Meta<typeof VvAvatarGroup> = {
-    title: 'Components/AvatarGroup',
-    component: VvAvatarGroup,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvAvatarGroup>
-
-export const Default: Story = {
-    args: {
-        ...defaultArgs,
-    },
-    render: args => ({
-        components: { VvAvatarGroup },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-		<div class="m-md">
-		<vv-avatar-group v-bind="args" data-testId="element">
-			<template v-if="args.default">{{ args.default }}</template>
-		</vv-avatar-group>
-	</div>`,
-    }),
-    play: defaultTest,
-}