@volverjs/ui-vue 0.0.10-beta.12 → 0.0.10-beta.13

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

@@ -0,0 +1,90 @@
+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 */ `
+			<div class="w-1/4">
+				<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>
+			</div>
+		`,
+	}),
+}
+
+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 IconLeft: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		iconLeft: 'material-symbols:cloud-outline',
+	},
+}
+
+export const IconRight: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		iconRight: 'akar-icons:heart',
+	},
+}

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { Default } from './InputFile.stories'
+import { argTypes, defaultArgs } from './InputFile.settings'
+
+const meta: Meta<typeof VvInputFile> = {
+	title: 'Components/InputFile/Modifiers',
+	component: VvInputFile,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const DropArea: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Drop area',
+		modifiers: 'drop-area',
+	},
+}
+
+export const DropAreaHidden: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Drop area hidden',
+		modifiers: 'drop-area hidden',
+	},
+}
+
+export const DropAreaSquare: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Drop area square',
+		modifiers: 'drop-area square hidden',
+	},
+}
+
+export const DropAreaCircle: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Drop area circle',
+		modifiers: 'drop-area circle hidden',
+	},
+}

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

@@ -0,0 +1,25 @@
+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,
+		'drop-area':
+			'<div class="text-20 font-weight">Drop here your file</div>',
+		modifiers: 'drop-area hidden square',
+	},
+}

package/src/types/blurhash.ts

@@ -0,0 +1,21 @@
+class ValidationError extends Error {}
+export type BlurhashWorkerType = {
+	encode: (
+		pixels: Uint8ClampedArray,
+		width: number,
+		height: number,
+		componentX: number,
+		componentY: number,
+	) => string
+	decode: (
+		blurhash: string,
+		width: number,
+		height: number,
+		punch?: number,
+	) => Uint8ClampedArray
+	isBlurhashValid: (blurhash: string) => {
+		result: boolean
+		errorReason?: string
+	}
+	ValidationError: ValidationError
+}

package/src/types/index.ts

@@ -3,3 +3,5 @@ export * from './floating-ui'
 export * from './generic'
 export * from './group'
 export * from './nav'
+export * from './blurhash'
+export * from './input-file'

package/src/types/input-file.ts

@@ -0,0 +1,16 @@
+export type UploadedFile<Source = undefined> = Source extends undefined
+	? {
+			name: string
+			size: number
+			type: string
+			url: string
+			lastModified?: number
+	  }
+	: {
+			name: string
+			size: number
+			type: string
+			url: string
+			lastModified?: number
+			source: Source
+	  }

package/src/workers/blurhash.ts

@@ -0,0 +1,9 @@
+import { expose } from 'comlink'
+import { ValidationError, encode, decode, isBlurhashValid } from 'blurhash'
+
+expose({
+    ValidationError,
+    encode,
+    decode,
+    isBlurhashValid,
+})