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

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

@@ -1,12 +1,12 @@
 import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
 import { expect } from '@/test/expect'
+import { within } from '@storybook/test'
 
-export const defaultTest = async ({ canvasElement, args }: PlayAttributes) => {
-	const badge = await within(canvasElement).findByRole('status')
-	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 { argTypes, defaultArgs } from './Badge.settings'
 import { Default as DefaultStory } from './Badge.stories'
 
 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

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { useBlurhash } from '@/composables/useBlurhash'
+import { ref } from 'vue'
+
+const meta: Meta = {
+    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()
+
+            return {
+                args,
+                isLoading,
+                canvas,
+                encode,
+                decode,
+                file,
+                blurhash,
+                isImgLoaded,
+                loadImage,
+                image,
+                imageUrl,
+            }
+        },
+        watch: {
+            file: {
+                immediate: true,
+                async handler(newValue) {
+                    if (!newValue?.size) {
+                        this.image = null
+                        this.imageUrl = ''
+                        this.blurhash = ''
+                        return
+                    }
+                    this.isLoading = true
+                    this.imageUrl = URL.createObjectURL(newValue)
+                    this.image = await this.loadImage(this.imageUrl)
+                    this.blurhash = await this.encode(newValue)
+                    this.isLoading = false
+                },
+            },
+            blurhash: {
+                async handler(newValue) {
+                    if (this.image) {
+                        this.isLoading = true
+                        const blurhashDecoded = await this.decode(
+                            newValue,
+                            this.image.width,
+                            this.image.height,
+                        )
+                        this.isLoading = false
+
+                        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 lg:w-10/12 xl:w-8/12 grid gap-md sm:grid-cols-3 mb-md">
+				<div>
+					<div class="text-lg font-bold mb-md">Upload</div>
+					<vv-input-file v-model="file" name="input-file" modifiers="square hidden" drop-area accept=".gif,.jpg,.jpeg,.png,image/gif,image/jpeg,image/png" />
+				</div>
+				<div v-if="image">
+					<div class="text-lg font-bold mb-md">Blurhash</div>
+					<div class="vv-skeleton bg-chessboard flex items-center relative aspect-square">
+						<div v-if="isLoading" class="vv-skeleton__item inset-0 absolute h-full"></div>
+						<canvas
+							v-show="blurhash"
+							ref="canvas"
+							class="w-full block object-cover"
+							:width="image.width"
+							:height="image.height" />
+					</div>
+				</div>
+				<div v-if="image">
+					<div class="text-lg font-bold mb-md">Original</div>
+					<div class="vv-skeleton bg-chessboard flex items-center relative aspect-square">
+						<div v-if="isLoading" class="vv-skeleton__item inset-0 absolute h-full"></div>
+						<img
+							class="w-full block h-auto"
+							:src="imageUrl"
+							alt="image"
+							:width="image.width"
+							:height="image.height" />
+					</div>
+				</div>
+			</div>
+		`,
+    }),
+}

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

@@ -1,40 +1,41 @@
+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 = {
-	modifiers: {
-		control: 'check',
-		options: ['multiline'],
-	},
-	label: {
-		description: 'The label slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
+export const argTypes: ArgTypes = {
+    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 { argTypes, defaultArgs } from './Breadcrumb.settings'
 import { defaultTest } from './Breadcrumb.test'
-import { defaultArgs, argTypes } from './Breadcrumb.settings'
 
 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,
+    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 { argTypes, defaultArgs } from './Breadcrumb.settings'
 import { defaultTest } from './Breadcrumb.test'
-import { defaultArgs, argTypes } from './Breadcrumb.settings'
 
 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,22 +16,22 @@ 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"  />
-							<template v-else>{{ route.label }}</template>
+						<template #label="{index, label}">
+							<VvIcon v-if="index === 0" name="home" :aria-label="label"  />
+							<template v-else>{{ label }}</template>
 						</template>
 					</VvBreadcrumb>
             	`,
-	}),
-	play: (data) => defaultTest(data, true),
+    }),
+    play: data => defaultTest(data, true),
 }