@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.50

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

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

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

@@ -1,23 +1,23 @@
 import type { Meta } from '@storybook/vue3'
 import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
-import { defaultArgs, argTypes } from './AlertGroup.settings'
+import { argTypes, defaultArgs } from './AlertGroup.settings'
 import { Default as DefaultStory, type Story } from './AlertGroup.stories'
 
 const meta: Meta<typeof VvAlertGroup> = {
-	title: 'Components/AlertGroup/Slots',
-	component: VvAlertGroup,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/AlertGroup/Slots',
+    component: VvAlertGroup,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
 
 export const Default: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		default: /* html */ `
+    ...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>
@@ -31,15 +31,15 @@ export const Default: Story = {
 				<div class="vv-alert__content">This is an accent message.</div>
 			</div>
 		`,
-	},
+    },
 }
 
 export const Before: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		before: /* html */ `
+    ...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>
@@ -47,15 +47,15 @@ export const Before: Story = {
 				</button>
 			</div>
 		`,
-	},
+    },
 }
 
 export const After: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		after: /* html */ `
+    ...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>
@@ -63,5 +63,5 @@ export const After: Story = {
 				</button>
 			</div>
 		`,
-	},
+    },
 }

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

@@ -1,28 +1,28 @@
 import type { Meta } from '@storybook/vue3'
 import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
 import VvButton from '@/components/VvButton/VvButton.vue'
-import { defaultArgs, argTypes } from './AlertGroup.settings'
-import { Default as DefaultStory, type Story } from './AlertGroup.stories'
 import { useAlert } from '@/composables/alert/useAlert'
+import { argTypes, defaultArgs } from './AlertGroup.settings'
+import { Default as DefaultStory, type Story } from './AlertGroup.stories'
 
 const meta: Meta<typeof VvAlertGroup> = {
-	title: 'Components/AlertGroup/UseComposable',
-	component: VvAlertGroup,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Composables/useAlert',
+    component: VvAlertGroup,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
 
-export const UseComposable: Story = {
-	...DefaultStory,
-	parameters: {
-		docs: {
-			source: {
-				type: 'code',
-				language: 'html',
-				code: /* html */ `
+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" />
@@ -62,50 +62,50 @@ export const UseComposable: Story = {
 	}
 </script>
 				`,
-			},
-		},
-	},
-	render: (args) => ({
-		components: { VvAlertGroup, VvButton },
-		setup() {
-			const { addAlert, removeAlert, alerts } = useAlert()
+            },
+        },
+    },
+    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',
-				})
-			}
+            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 */ `
+            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" />
@@ -114,5 +114,5 @@ export const UseComposable: Story = {
 			</div>
 			<vv-alert-group v-bind="args" :items="alerts" :onClose="removeAlert" data-testId="element" />
         `,
-	}),
+    }),
 }

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

@@ -1,37 +1,37 @@
+import type { ArgTypes } from '@storybook/types'
 import { VvAvatarProps } from '@/components/VvAvatar'
 import { DefaultSlotArgTypes } from '@/stories/argTypes'
-import type { ArgTypes } from '@storybook/types'
 
 export const defaultArgs = {
-	...propsToObject(VvAvatarProps),
-	imgSrc: 'https://i.pravatar.cc/300',
+    ...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',
-	},
+    ...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,14 +1,14 @@
 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 { argTypes, defaultArgs } from './Avatar.settings'
 
 const meta: Meta<typeof VvAvatar> = {
-	title: 'Components/Avatar',
-	component: VvAvatar,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Avatar',
+    component: VvAvatar,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,27 +16,27 @@ 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,
 }
 
 export const Image: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+    },
 }

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

@@ -1,34 +1,32 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
+    const element = await within(canvasElement).findByTestId('element')
 
-	// slot default
-	if (!args.default && !args.imgSrc) {
-		throw new Error('Default slot or imgSrc is required!')
-	}
+    // 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(' ')
+    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}`)
-		}
-	}
+    // 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 img tag exist
+    if (args.imgSrc && !args.default) {
+        expect(element).toHaveImgChild('img')
+    }
 
-	// check accessibility
-	await expect(element).toHaveNoViolations()
+    // check accessibility
+    await expect(element).toHaveNoViolations()
 }

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

@@ -2,13 +2,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
 import VvBadge from '@/components/VvBadge/VvBadge.vue'
-import { defaultArgs, argTypes } from './Avatar.settings'
+import { argTypes, defaultArgs } from './Avatar.settings'
 
 const meta: Meta<typeof VvAvatar> = {
-	title: 'Components/Avatar/Badge',
-	component: VvAvatar,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Avatar/Badge',
+    component: VvAvatar,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -16,15 +16,15 @@ 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 */ `
+    args: {
+        modifiers: 'lg',
+    },
+    render: args => ({
+        components: { VvAvatar, VvBadge },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<vv-avatar v-bind="args" data-testId="element">
 				MR
                 <sup>
@@ -32,5 +32,5 @@ export const Badge: Story = {
                 </sup>
 			</vv-avatar>
     `,
-	}),
+    }),
 }