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

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

@@ -1,12 +1,12 @@
-import type { PlayAttributes } from '@/test/types'
 import { within } from '@storybook/test'
+import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 
-export const defaultTest = async ({ canvasElement, args }: PlayAttributes) => {
-	const badge = await within(canvasElement).findByTestId('element')
-	expect(badge).toHaveClass('vv-badge')
-	if (args.modifiers.length > 0) {
-		expect(badge).toHaveClass(`vv-badge--${args.modifiers}`)
-	}
-	await expect(badge).toHaveNoViolations()
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+    const badge = await within(canvasElement).findByTestId('element')
+    expect(badge).toHaveClass('vv-badge')
+    if (args.modifiers.length > 0) {
+        expect(badge).toHaveClass(`vv-badge--${args.modifiers}`)
+    }
+    await expect(badge).toHaveNoViolations()
 }

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

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvBadge from '@/components/VvBadge/VvBadge.vue'
 import { defaultArgs, argTypes } from './Badge.settings'
 import { Default as DefaultStory } from './Badge.stories'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
 
 const meta: Meta<typeof VvBadge> = {
-	title: 'Components/Badge/Slots',
-	component: VvBadge,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Badge/Slots',
+    component: VvBadge,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -15,9 +15,9 @@ export default meta
 type Story = StoryObj<typeof VvBadge>
 
 export const Default: Story = {
-	...DefaultStory,
-	args: {
-		...DefaultStory.args,
-		default: 'Default <em class="italic">slot!</em>',
-	},
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        default: 'Default <em class="italic">slot!</em>',
+    },
 }

package/src/stories/Blurhash/BlurhashComposable.stories.ts

@@ -4,79 +4,80 @@ import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
 import { useBlurhash } from '@/composables/useBlurhash'
 
 const meta: Meta = {
-	title: 'Composables/useBlurhash',
-	tags: ['autodocs'],
+    title: 'Composables/useBlurhash',
+    tags: ['autodocs'],
 }
 
 export default meta
 
 export const Default: StoryObj = {
-	render: (args) => ({
-		components: { VvInputFile },
-		setup() {
-			const isLoading = ref(false)
-			const { encode, decode, loadImage } = useBlurhash()
-			const file = ref({})
-			const canvas = ref()
-			const isImgLoaded = ref(false)
-			const blurhash = ref('')
-			const imageUrl = ref('')
-			const image = ref()
+    render: args => ({
+        components: { VvInputFile },
+        setup() {
+            const isLoading = ref(false)
+            const { encode, decode, loadImage } = useBlurhash()
+            const file = ref({})
+            const canvas = ref()
+            const isImgLoaded = ref(false)
+            const blurhash = ref('')
+            const imageUrl = ref('')
+            const image = ref()
 
-			return {
-				args,
-				isLoading,
-				canvas,
-				encode,
-				decode,
-				file,
-				blurhash,
-				isImgLoaded,
-				loadImage,
-				image,
-				imageUrl,
-			}
-		},
-		watch: {
-			file: {
-				immediate: true,
-				async handler(newValue) {
-					if (newValue?.size) {
-						this.imageUrl = URL.createObjectURL(newValue)
-						this.image = await this.loadImage(this.imageUrl)
-						this.blurhash = await this.encode(newValue)
-					} else {
-						this.image = null
-						this.imageUrl = ''
-						this.blurhash = ''
-					}
-				},
-			},
-			blurhash: {
-				async handler(newValue) {
-					if (this.image) {
-						const blurhashDecoded = await this.decode(
-							newValue,
-							this.image.width,
-							this.image.height,
-						)
+            return {
+                args,
+                isLoading,
+                canvas,
+                encode,
+                decode,
+                file,
+                blurhash,
+                isImgLoaded,
+                loadImage,
+                image,
+                imageUrl,
+            }
+        },
+        watch: {
+            file: {
+                immediate: true,
+                async handler(newValue) {
+                    if (newValue?.size) {
+                        this.imageUrl = URL.createObjectURL(newValue)
+                        this.image = await this.loadImage(this.imageUrl)
+                        this.blurhash = await this.encode(newValue)
+                    }
+                    else {
+                        this.image = null
+                        this.imageUrl = ''
+                        this.blurhash = ''
+                    }
+                },
+            },
+            blurhash: {
+                async handler(newValue) {
+                    if (this.image) {
+                        const blurhashDecoded = await this.decode(
+                            newValue,
+                            this.image.width,
+                            this.image.height,
+                        )
 
-						if (this.canvas) {
-							this.canvas.width = this.image.width
-							this.canvas.height = this.image.height
-							const ctx = this.canvas.getContext('2d')
-							const imageData = ctx.createImageData(
-								this.canvas.width,
-								this.canvas.height,
-							)
-							imageData.data.set(blurhashDecoded)
-							ctx.putImageData(imageData, 0, 0)
-						}
-					}
-				},
-			},
-		},
-		template: /* html */ `
+                        if (this.canvas) {
+                            this.canvas.width = this.image.width
+                            this.canvas.height = this.image.height
+                            const ctx = this.canvas.getContext('2d')
+                            const imageData = ctx.createImageData(
+                                this.canvas.width,
+                                this.canvas.height,
+                            )
+                            imageData.data.set(blurhashDecoded)
+                            ctx.putImageData(imageData, 0, 0)
+                        }
+                    }
+                },
+            },
+        },
+        template: /* html */ `
 			<div class="w-full grid gap-md grid-cols-3 h-150" :class="{ 'vv-skeleton': isLoading }">
 				<div class="w-150 h-150 col-span-1">
 					<div class="text-20 font-semibold mb-md">Upload image</div>
@@ -105,14 +106,14 @@ export const Default: StoryObj = {
 				</div>
 			</div>
 		`,
-	}),
+    }),
 
-	parameters: {
-		docs: {
-			source: {
-				type: 'code',
-				language: 'html',
-				code: /* html */ `
+    parameters: {
+        docs: {
+            source: {
+                type: 'code',
+                language: 'html',
+                code: /* html */ `
 <div class="w-full grid gap-md grid-cols-3 h-150" :class="{ 'vv-skeleton': isLoading }">
 	<div class="w-150 h-150 col-span-1">
 		<div class="text-20 font-semibold mb-md">Upload image</div>
@@ -189,7 +190,7 @@ export const Default: StoryObj = {
 	})
 </script>
 				`,
-			},
-		},
-	},
+            },
+        },
+    },
 }

package/src/stories/Breadcrumb/Breadcrumb.settings.ts

@@ -1,41 +1,41 @@
-import { VvBreadcrumbProps } from '@/components/VvBreadcrumb'
 import type { ArgTypes } from '@storybook/vue3'
+import { VvBreadcrumbProps } from '@/components/VvBreadcrumb'
 
 export const defaultArgs = {
-	...propsToObject(VvBreadcrumbProps),
-	routes: [
-		{
-			label: 'Home',
-			title: 'Home',
-			href: '/home',
-		},
-		{
-			label: 'Library',
-			title: 'Library',
-			href: '/library',
-		},
-		{
-			label: 'Book 1',
-			title: 'Book 1',
-		},
-	],
+    ...propsToObject(VvBreadcrumbProps),
+    routes: [
+        {
+            label: 'Home',
+            title: 'Home',
+            href: '/home',
+        },
+        {
+            label: 'Library',
+            title: 'Library',
+            href: '/library',
+        },
+        {
+            label: 'Book 1',
+            title: 'Book 1',
+        },
+    ],
 }
 
 export const argTypes: ArgTypes = {
-	modifiers: {
-		control: 'check',
-		options: ['multiline'],
-	},
-	label: {
-		description: 'The label slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
+    modifiers: {
+        control: 'check',
+        options: ['multiline'],
+    },
+    label: {
+        description: 'The label slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
 }

package/src/stories/Breadcrumb/Breadcrumb.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
 import { defaultTest } from './Breadcrumb.test'
 import { defaultArgs, argTypes } from './Breadcrumb.settings'
+import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
 
 const meta: Meta<typeof VvBreadcrumb> = {
-	title: 'Components/Breadcrumb',
-	component: VvBreadcrumb,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Breadcrumb',
+    component: VvBreadcrumb,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,26 +16,26 @@ export default meta
 type Story = StoryObj<typeof VvBreadcrumb>
 
 export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvBreadcrumb },
-		setup() {
-			return { args }
-		},
-		template: /* html */ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvBreadcrumb },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<div class="bg-surface p-lg">
 			<vv-breadcrumb v-bind="args" />
 		</div>`,
-	}),
-	play: (data) => defaultTest(data, false),
+    }),
+    play: data => defaultTest(data, false),
 }
 
 export const Multiline: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: 'multiline',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        modifiers: 'multiline',
+    },
 }

package/src/stories/Breadcrumb/Breadcrumb.test.ts

@@ -2,51 +2,52 @@ import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 
 function linkClick(event: Event) {
-	event.preventDefault()
+    event.preventDefault()
 }
 
 export async function defaultTest(
-	data: PlayAttributes = {} as PlayAttributes,
-	customSlot: boolean = false,
+    data: PlayAttributes = {} as PlayAttributes,
+    customSlot: boolean = false,
 ) {
-	const breadcrumb = document.getElementsByClassName('vv-breadcrumb')[0]
-
-	// breadcrumb component class test
-	await expect(breadcrumb).toHaveClass('vv-breadcrumb')
-
-	// test every breadcrumb item
-	const navLinks = breadcrumb.children[0].children
-	Array.from(navLinks).forEach(async (linkContainer, index) => {
-		const link = linkContainer.children[0] as HTMLLinkElement
-		const propRoutes = data.args.routes[index]
-
-		// label and title test
-		if (!customSlot) {
-			await expect(link.innerText).toEqual(propRoutes.label)
-		}
-		await expect(link.title).toEqual(propRoutes.title)
-
-		const isNotLastItem = index < navLinks.length - 1
-		if (isNotLastItem) {
-			// link class test
-			await expect(linkContainer).toHaveClass('vv-breadcrumb__item')
-			await expect(link).toHaveClass('vv-breadcrumb__link')
-
-			// click test
-			link.addEventListener('click', linkClick)
-			await expect(link).toBeClicked()
-
-			// tag type test
-			await expect(link.nodeName).toEqual('A')
-
-			// route test
-			await expect(link.href).toContain(propRoutes.href)
-		} else {
-			await expect(linkContainer).toHaveClass(
-				'vv-breadcrumb__item-active',
-			)
-			await expect(link.nodeName).toBe('SPAN')
-		}
-	})
-	await expect(breadcrumb).toHaveNoViolations()
+    const breadcrumb = document.getElementsByClassName('vv-breadcrumb')[0]
+
+    // breadcrumb component class test
+    await expect(breadcrumb).toHaveClass('vv-breadcrumb')
+
+    // test every breadcrumb item
+    const navLinks = breadcrumb.children[0].children
+    Array.from(navLinks).forEach(async (linkContainer, index) => {
+        const link = linkContainer.children[0] as HTMLLinkElement
+        const propRoutes = data.args.routes[index]
+
+        // label and title test
+        if (!customSlot) {
+            await expect(link.textContent).toEqual(propRoutes.label)
+        }
+        await expect(link.title).toEqual(propRoutes.title)
+
+        const isNotLastItem = index < navLinks.length - 1
+        if (isNotLastItem) {
+            // link class test
+            await expect(linkContainer).toHaveClass('vv-breadcrumb__item')
+            await expect(link).toHaveClass('vv-breadcrumb__link')
+
+            // click test
+            link.addEventListener('click', linkClick)
+            await expect(link).toBeClicked()
+
+            // tag type test
+            await expect(link.nodeName).toEqual('A')
+
+            // route test
+            await expect(link.href).toContain(propRoutes.href)
+        }
+        else {
+            await expect(linkContainer).toHaveClass(
+                'vv-breadcrumb__item-active',
+            )
+            await expect(link.nodeName).toBe('SPAN')
+        }
+    })
+    await expect(breadcrumb).toHaveNoViolations()
 }

package/src/stories/Breadcrumb/BreadcrumbSlots.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
 import { defaultTest } from './Breadcrumb.test'
 import { defaultArgs, argTypes } from './Breadcrumb.settings'
+import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
 
 const meta: Meta<typeof VvBreadcrumb> = {
-	title: 'Components/Breadcrumb/Slots',
-	component: VvBreadcrumb,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Breadcrumb/Slots',
+    component: VvBreadcrumb,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
@@ -16,15 +16,15 @@ export default meta
 type Story = StoryObj<typeof VvBreadcrumb>
 
 export const Label: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvBreadcrumb, VvIcon },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvBreadcrumb, VvIcon },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 					<VvBreadcrumb v-bind="args">
 						<template #label="{route, index}">
 							<VvIcon v-if="index === 0" name="home" :aria-label="route.label"  />
@@ -32,6 +32,6 @@ export const Label: Story = {
 						</template>
 					</VvBreadcrumb>
             	`,
-	}),
-	play: (data) => defaultTest(data, true),
+    }),
+    play: data => defaultTest(data, true),
 }