@volverjs/ui-vue 0.0.10-beta.3 → 0.0.10-beta.31

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

@@ -0,0 +1,195 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { useBlurhash } from '@/composables/useBlurhash'
+
+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.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 */ `
+			<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>
+					<vv-input-file v-model="file" name="input-file" modifiers="drop-area square hidden" accept=".gif,.jpg,.jpeg,.png,image/gif,image/jpeg,image/png" />
+				</div>
+				<div v-show="blurhash" class="h-150 col-span-2">
+					<picture class="flex gap-md justify-center">
+						<div>
+							<div class="text-20 font-semibold mb-md">Blurhash</div>
+							<canvas
+								ref="canvas"
+								class="w-150 h-150 block object-cover" />
+						</div>
+						<div>
+							<div class="text-20 font-semibold mb-md">Image</div>
+							<img
+								v-if="image"
+								class="w-150 h-150 block object-cover"
+								:class="{ 'vv-skeleton__item': isLoading }"
+								:src="imageUrl"
+								alt="image"
+								:width="image.width"
+								:height="image.height" />
+						</div>
+					</picture>
+				</div>
+			</div>
+		`,
+	}),
+
+	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>
+		<vv-input-file v-model="file" name="input-file" modifiers="drop-area square hidden" accept=".gif,.jpg,.jpeg,.png,image/gif,image/jpeg,image/png" />
+	</div>
+	<div v-show="blurhash" class="h-150 col-span-2">
+		<picture class="flex gap-md justify-center">
+			<div>
+				<div class="text-20 font-semibold mb-md">Blurhash</div>
+				<canvas
+					ref="canvas"
+					class="w-150 h-150 block object-cover" />
+			</div>
+			<div>
+				<div class="text-20 font-semibold mb-md">Image</div>
+				<img
+					v-if="image"
+					class="w-150 h-150 block object-cover"
+					:class="{ 'vv-skeleton__item': isLoading }"
+					:src="imageUrl"
+					alt="image"
+					:width="image.width"
+					:height="image.height" />
+			</div>
+		</picture>
+	</div>
+</div>
+
+<script setup lang='ts'>
+	import { useBlurhash } from '@volverjs/ui-vue/composables'
+
+	const { encode, decode, loadImage } = useBlurhash()
+
+	const isLoading = ref(false)
+	const file = ref({})
+	const canvas = ref()
+	const isImgLoaded = ref(false)
+	const blurhash = ref('')
+	const imageUrl = ref('')
+	const image = ref()
+
+	watch(file, async (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 = ''
+		}
+	}, { immediate: true })
+
+	watch(blurhash, async (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)
+			}
+		}
+	})
+</script>
+				`,
+			},
+		},
+	},
+}

package/src/stories/Button/Button.settings.ts

@@ -121,11 +121,8 @@ export const argTypes = {
 		control: { type: 'text' },
 	},
 	target: {
-		options: ['', '_blank', '_self', '_parent', '_top'],
 		description: 'The target attribute',
-		control: {
-			type: 'select',
-		},
+		control: { type: 'text' },
 	},
 	to: {
 		description: 'The router link / nuxt link settings',

package/src/stories/Button/Button.test.ts

@@ -1,5 +1,5 @@
 import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 import { expect } from '@/test/expect'
 
 export async function defaultTest(

package/src/stories/ButtonGroup/ButtonGroup.test.ts

@@ -1,6 +1,6 @@
 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 = {} as PlayAttributes,

package/src/stories/Card/Card.test.ts

@@ -1,6 +1,6 @@
 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 defaulTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/Checkbox/Checkbox.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/CheckboxGroup/CheckboxGroup.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 import { getOptionValue } from '@/test/options'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {

package/src/stories/Combobox/Combobox.settings.ts

@@ -392,4 +392,12 @@ export const argTypes = {
 			},
 		},
 	},
+	'update:search': {
+		table: {
+			category: 'Events',
+			type: {
+				summary: 'string',
+			},
+		},
+	},
 }

package/src/stories/Combobox/Combobox.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 import { sleep } from '@/test/sleep'
 import { defaultTest as selectDefaultTest } from '@/stories/Select/Select.test'
 

package/src/stories/Dialog/Dialog.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { userEvent } from '@storybook/testing-library'
-import { within } from '@storybook/testing-library'
+import { userEvent } from '@storybook/test'
+import { within } from '@storybook/test'
 import { sleep } from '@/test/sleep'
 
 export async function defaultTest(

package/src/stories/Dropdown/Dropdown.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement }: PlayAttributes) {
 	const wrapper = (await within(canvasElement).findByTestId(

package/src/stories/Icon/Icon.settings.ts

@@ -1,11 +1,11 @@
-import { VvIconProps } from '@/components/VvIcon'
+import { VvIconPropsDefaults } from '@/components/VvIcon'
 import normal from '@/assets/icons/normal.json'
 import { ModifiersArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
-	...propsToObject(VvIconProps),
+	...VvIconPropsDefaults,
 	name: 'add-circle',
-	width: 48
+	width: 48,
 }
 
 export const argTypes = {

package/src/stories/InputFile/InputFile.settings.ts

@@ -0,0 +1,36 @@
+import { HintArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+import { VvInputFileProps } from '@/components/VvInputFile'
+
+export const defaultArgs = {
+	...propsToObject(VvInputFileProps),
+	name: 'vv-input-file',
+	label: 'Upload file',
+}
+
+export const argTypes = {
+	...HintArgTypes,
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['hidden', 'square', 'circle'],
+	},
+	'drop-area': {
+		description: 'Drop area slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	'update:model-value': {
+		table: {
+			category: 'Events',
+			type: {
+				summary: 'File | File[]',
+			},
+		},
+	},
+}

package/src/stories/InputFile/InputFile.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { defaultArgs, argTypes } from './InputFile.settings'
+
+const meta: Meta = {
+	title: 'Components/InputFile',
+	component: VvInputFile,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvInputFile },
+		setup() {
+			const files = ref([])
+			return {
+				args,
+				files,
+			}
+		},
+		template: /* html */ `
+			<vv-input-file v-bind="args" v-model="files">
+				<template #drop-area v-if="args['drop-area']"><div v-html="args['drop-area']"></div></template>
+				<template #hint v-if="args['hint']"><div v-html="args['hint']"></div></template>
+			</vv-input-file>
+		`,
+	}),
+}
+
+export const Readonly: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		readonly: true,
+	},
+}
+
+export const Valid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		valid: true,
+		validLabel: 'The field is valid.',
+	},
+}
+
+export const Invalid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		invalid: true,
+		invalidLabel: 'The field is required.',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		hintLabel: 'Please upload a file.',
+	},
+}
+
+export const Loading: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		loading: true,
+		loadingLabel: 'Loading...',
+	},
+}
+
+export const Progress: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		progress: 30,
+		hintLabel: '30%',
+	},
+}

package/src/stories/InputFile/InputFileDropArea.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { Default as DefaultStory } from './InputFile.stories'
+import { argTypes, defaultArgs } from './InputFile.settings'
+
+const meta: Meta<typeof VvInputFile> = {
+	title: 'Components/InputFile/DropArea',
+	component: VvInputFile,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const Default: Story = {
+	...DefaultStory,
+	args: {
+		...DefaultStory.args,
+		label: 'Drop area',
+		dropArea: true,
+	},
+}
+
+export const InputHidden: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Drop area hidden input',
+		dropArea: true,
+		modifiers: 'hidden',
+	},
+}
+
+export const Square: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		class: 'max-w-192',
+		label: 'Drop area square',
+		dropArea: true,
+		modifiers: 'square hidden',
+	},
+}
+
+export const Circle: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		class: 'max-w-192',
+		label: 'Drop area circle',
+		dropArea: true,
+		modifiers: 'circle hidden',
+	},
+}

package/src/stories/InputFile/InputFileIconPosition.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { Default } from './InputFile.stories'
+import { defaultArgs, argTypes } from './InputFile.settings'
+
+const meta: Meta<typeof VvInputFile> = {
+	title: 'Components/InputFile/Icon',
+	component: VvInputFile,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const DefaultPosition: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'heart',
+	},
+}
+
+export const After: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'heart',
+		iconPosition: 'after',
+	},
+}
+
+export const Src: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: {
+			name: 'engineering',
+			src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/social/engineering/materialicons/24px.svg',
+		},
+	},
+}

package/src/stories/InputFile/InputFileSlots.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { Default as DefaultStory } from './InputFile.stories'
+import { argTypes, defaultArgs } from './InputFile.settings'
+
+const meta: Meta<typeof VvInputFile> = {
+	title: 'Components/InputFile/Slots',
+	component: VvInputFile,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const DropArea: Story = {
+	...DefaultStory,
+	args: {
+		...DefaultStory.args,
+		class: 'max-w-320',
+		'drop-area': 'Drag one or more files to this drop zone.',
+		dropArea: true,
+	},
+}
+
+export const Hint: Story = {
+	...DefaultStory,
+	args: {
+		...DefaultStory.args,
+		hint: 'Hint <em class="italic">slot!</em>',
+	},
+}

package/src/stories/InputText/InputText.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within, userEvent } from '@storybook/testing-library'
+import { within, userEvent } from '@storybook/test'
 import { INPUT_TYPES, type InputType } from '@/components/VvInputText'
 
 const valueByType = (type: InputType, mask?: string, id?: string) => {

package/src/stories/Nav/Nav.test.ts

@@ -1,6 +1,6 @@
 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(

package/src/stories/Progress/Progress.test.ts

@@ -1,6 +1,6 @@
 import { expect } from '@/test/expect'
 import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement }: PlayAttributes) {
 	const progress = await within(canvasElement).findByRole('progressbar')

package/src/stories/Radio/Radio.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/RadioGroup/RadioGroup.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 import { getOptionValue } from '@/test/options'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {

package/src/stories/Select/Select.test.ts

@@ -1,5 +1,5 @@
 import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
 

package/src/stories/Tab/Tab.settings.ts

@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/vue3'
+import type { ArgTypes, Meta } from '@storybook/vue3'
 import type { VvTab } from '@/components'
 import { VvTabProps } from '@/components/VvTab'
 
@@ -25,7 +25,7 @@ export const defaultArgs: Meta<typeof VvTab>['args'] = {
 	],
 }
 
-export const defaultArgTypes = {
+export const defaultArgTypes: ArgTypes = {
 	tabId: {
 		description: 'Slot by tab-id',
 		control: {

package/src/stories/Tab/Tab.test.ts

@@ -1,6 +1,6 @@
 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(

package/src/stories/Textarea/Textarea.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within, userEvent } from '@storybook/testing-library'
+import { within, userEvent } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/Tooltip/Tooltip.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const parentElement = (await within(canvasElement).findByTestId(