@volverjs/ui-vue 0.0.10-beta.35 → 0.0.10-beta.36

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

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
-import { defaultArgs, argTypes } from './Avatar.settings'
 import { defaultTest } from '../Avatar/Avatar.test'
+import { defaultArgs, argTypes } from './Avatar.settings'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
 
 const meta: Meta<typeof VvAvatar> = {
-	title: 'Components/Avatar/Modifiers',
-	component: VvAvatar,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Avatar/Modifiers',
+    component: VvAvatar,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,86 +15,86 @@ export default meta
 type Story = StoryObj<typeof VvAvatar>
 
 const VvAvatarTemplate: Story = {
-	args: {
-		default: 'MR',
-		modifiers: '',
-	},
-	render: (args) => ({
-		components: { VvAvatar },
-		setup() {
-			return { args }
-		},
-		template: /* html */ `
+    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,
+    }),
+    play: defaultTest,
 }
 
 export const Small: Story = {
-	...VvAvatarTemplate,
+    ...VvAvatarTemplate,
 }
 
 export const Medium: Story = {
-	...VvAvatarTemplate,
-	args: {
-		...VvAvatarTemplate.args,
-		modifiers: 'md',
-	},
+    ...VvAvatarTemplate,
+    args: {
+        ...VvAvatarTemplate.args,
+        modifiers: 'md',
+    },
 }
 
 export const Large: Story = {
-	...VvAvatarTemplate,
-	args: {
-		...VvAvatarTemplate.args,
-		modifiers: 'lg',
-	},
+    ...VvAvatarTemplate,
+    args: {
+        ...VvAvatarTemplate.args,
+        modifiers: 'lg',
+    },
 }
 
 export const Rounded: Story = {
-	...VvAvatarTemplate,
-	args: {
-		...VvAvatarTemplate.args,
-		modifiers: 'rounded md',
-	},
+    ...VvAvatarTemplate,
+    args: {
+        ...VvAvatarTemplate.args,
+        modifiers: 'rounded md',
+    },
 }
 
 export const Square: Story = {
-	...VvAvatarTemplate,
-	args: {
-		...VvAvatarTemplate.args,
-		modifiers: 'square md',
-	},
+    ...VvAvatarTemplate,
+    args: {
+        ...VvAvatarTemplate.args,
+        modifiers: 'square md',
+    },
 }
 
 export const Bordered: Story = {
-	...VvAvatarTemplate,
-	args: {
-		...VvAvatarTemplate.args,
-		modifiers: 'bordered md',
-	},
+    ...VvAvatarTemplate,
+    args: {
+        ...VvAvatarTemplate.args,
+        modifiers: 'bordered md',
+    },
 }
 
 export const Ring: Story = {
-	...VvAvatarTemplate,
-	args: {
-		...VvAvatarTemplate.args,
-		modifiers: 'ring md',
-	},
+    ...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'],
-		},
-	},
+    ...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,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
-import { defaultArgs, argTypes } from './Avatar.settings'
 import { defaultTest } from '../Avatar/Avatar.test'
+import { defaultArgs, argTypes } from './Avatar.settings'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
 
 const meta: Meta<typeof VvAvatar> = {
-	title: 'Components/Avatar/Slots',
-	component: VvAvatar,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Avatar/Slots',
+    component: VvAvatar,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,20 +15,20 @@ 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 */ `
+    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,
+    }),
+    play: defaultTest,
 }

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

@@ -1,61 +1,61 @@
+import type { ArgTypes } from '@storybook/vue3'
 import { VvAvatarGroupProps } from '@/components/VvAvatarGroup'
 import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
-import type { ArgTypes } from '@storybook/vue3'
 
 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',
+    ...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',
-		},
-	},
+    ...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,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
 import { defaultArgs, argTypes } from './AvatarGroup.settings'
 import { defaultTest } from './AvatarGroup.test'
+import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
 
 const meta: Meta<typeof VvAvatarGroup> = {
-	title: 'Components/AvatarGroup',
-	component: VvAvatarGroup,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/AvatarGroup',
+    component: VvAvatarGroup,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,20 +16,20 @@ export default meta
 type Story = StoryObj<typeof VvAvatarGroup>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvAvatarGroup },
-		setup() {
-			return { args }
-		},
-		template: /* html */ `
+    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,
+    }),
+    play: defaultTest,
 }

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

@@ -1,34 +1,34 @@
+import { within } from '@storybook/test'
 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')
+    const element = await within(canvasElement).findByTestId('element')
 
-	// slot default
-	if (!args.default && !args.items && !args.items?.length) {
-		throw new Error('Default slot or items is required!')
-	}
+    // slot default
+    if (!args.default && !args.items && !args.items?.length) {
+        throw new Error('Default slot or items is required!')
+    }
 
-	const modifiers =
-		!args.modifiers || Array.isArray(args.modifiers)
-			? args.modifiers
-			: [args.modifiers]
+    const modifiers
+		= !args.modifiers || Array.isArray(args.modifiers)
+		    ? args.modifiers
+		    : [args.modifiers]
 
-	// modifiers
-	if (modifiers) {
-		for (const modifier of modifiers) {
-			expect(element).toHaveClass(`vv-avatar-group--${modifier}`)
-		}
-	}
+    // modifiers
+    if (modifiers) {
+        for (const modifier of modifiers) {
+            expect(element).toHaveClass(`vv-avatar-group--${modifier}`)
+        }
+    }
 
-	// check children numbers
-	if (args.items && args.items.length && !args.default) {
-		if ((args.totalItems || args.items.length) > args.toShow) {
-			expect(element.children.length).toEqual(args.toShow + 1)
-		}
-	}
+    // check children numbers
+    if (args.items && args.items.length && !args.default) {
+        if ((args.totalItems || args.items.length) > args.toShow) {
+            expect(element.children.length).toEqual(args.toShow + 1)
+        }
+    }
 
-	// check accessibility
-	await expect(element).toHaveNoViolations()
+    // check accessibility
+    await expect(element).toHaveNoViolations()
 }

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

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
 import { defaultArgs, argTypes } from './AvatarGroup.settings'
 import { Default } from './AvatarGroup.stories'
+import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
 
 const meta: Meta<typeof VvAvatarGroup> = {
-	title: 'Components/AvatarGroup/Modifiers',
-	component: VvAvatarGroup,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/AvatarGroup/Modifiers',
+    component: VvAvatarGroup,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,17 +15,17 @@ export default meta
 type Story = StoryObj<typeof VvAvatarGroup>
 
 export const Tight: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		modifiers: 'tight',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        modifiers: 'tight',
+    },
 }
 
 export const Relaxed: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		modifiers: 'relaxed',
-	},
+    ...Default,
+    args: {
+        ...Default.args,
+        modifiers: 'relaxed',
+    },
 }

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

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
-import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
 import { defaultArgs, argTypes } from './AvatarGroup.settings'
 import { defaultTest } from './AvatarGroup.test'
+import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
 
 const meta: Meta<typeof VvAvatarGroup> = {
-	title: 'Components/AvatarGroup/Slots',
-	component: VvAvatarGroup,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/AvatarGroup/Slots',
+    component: VvAvatarGroup,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -16,16 +16,16 @@ export default meta
 type Story = StoryObj<typeof VvAvatarGroup>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvAvatarGroup, VvAvatar },
-		setup() {
-			return { args }
-		},
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvAvatarGroup, VvAvatar },
+        setup() {
+            return { args }
+        },
 
-		template: /* html */ `
+        template: /* html */ `
 		<div class="m-md">
 			<vv-avatar-group v-bind="args" data-testId="element" modifiers="relaxed">
 				<vv-avatar modifiers="rounded">MR</vv-avatar>
@@ -34,6 +34,6 @@ export const Default: Story = {
 				<vv-avatar modifiers="rounded surface">+3</vv-avatar>
 			</vv-avatar-group>
 		</div>`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }

package/src/stories/Badge/Badge.settings.ts

@@ -1,27 +1,27 @@
-import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
 import type { ArgTypes } from '@storybook/vue3'
+import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
-	modifiers: [],
+    modifiers: [],
 }
 
 export const argTypes: ArgTypes = {
-	value: {
-		control: { type: 'text' },
-	},
-	modifiers: {
-		...ModifiersArgTypes.modifiers,
-		options: [
-			'danger',
-			'success',
-			'warning',
-			'info',
-			'accent',
-			'rounded',
-			'outline',
-			'ghost',
-			'sm',
-		],
-	},
-	...DefaultSlotArgTypes,
+    value: {
+        control: { type: 'text' },
+    },
+    modifiers: {
+        ...ModifiersArgTypes.modifiers,
+        options: [
+            'danger',
+            'success',
+            'warning',
+            'info',
+            'accent',
+            'rounded',
+            'outline',
+            'ghost',
+            'sm',
+        ],
+    },
+    ...DefaultSlotArgTypes,
 }

package/src/stories/Badge/Badge.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvBadge from '@/components/VvBadge/VvBadge.vue'
 import { defaultTest } from './Badge.test'
 import { defaultArgs, argTypes } from './Badge.settings'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
 
 const meta: Meta<typeof VvBadge> = {
-	title: 'Components/Badge',
-	component: VvBadge,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Badge',
+    component: VvBadge,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,28 +16,28 @@ export default meta
 type Story = StoryObj<typeof VvBadge>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-		value: 14,
-	},
-	render: (args) => ({
-		components: { VvBadge },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
+    args: {
+        ...defaultArgs,
+        value: 14,
+    },
+    render: args => ({
+        components: { VvBadge },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<vv-badge v-bind="args" data-testId="element">
 				<template #default v-if="args.default"><span v-html="args.default"></span></template>	
 			</vv-badge>
 		`,
-	}),
-	play: defaultTest,
+    }),
+    play: defaultTest,
 }
 
 export const Dot: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		value: '',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        value: '',
+    },
 }