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

package/src/components/VvInputFile/VvInputFile.vue

@@ -0,0 +1,274 @@
+<script lang="ts">
+	export default {
+		name: 'VvInputFile',
+	}
+</script>
+
+<script setup lang="ts">
+	import { useVModel } from '@vueuse/core'
+	import type { UploadedFile } from '../../types'
+	import { computed, onBeforeUnmount, ref } from 'vue'
+	import VvButton from '../VvButton/VvButton.vue'
+	import VvIcon from '../VvIcon/VvIcon.vue'
+	import HintSlotFactory from '../common/HintSlot'
+	import { VvInputFileProps, type VvInputFileEvents } from '.'
+
+	// props, emit, slots and attrs
+	const props = defineProps(VvInputFileProps)
+	const emit = defineEmits<VvInputFileEvents>()
+	const slots = useSlots()
+
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvInputFileProps>(
+		'VvInputFile',
+		VvInputFileProps,
+		props,
+	)
+
+	const { modifiers, id } = toRefs(props)
+
+	const hasId = useUniqueId(id)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
+
+	// styles
+	const bemCssClasses = useModifiers(
+		'vv-input-file',
+		modifiers,
+		computed(() => ({
+			dragging: isDragging.value,
+			loading: props.loading,
+			valid: props.valid === true,
+			invalid: props.invalid === true,
+			'icon-before': !!props.iconLeft,
+			'icon-after': !!props.iconRight,
+		})),
+	)
+
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(propsDefaults, slots)
+
+	const localModelValue = useVModel(props, 'modelValue', emit)
+	const files = computed(() => {
+		if (
+			!localModelValue.value ||
+			(!Array.isArray(localModelValue.value) &&
+				!(localModelValue.value as File)?.name)
+		) {
+			return []
+		}
+		return Array.isArray(localModelValue.value)
+			? localModelValue.value
+			: [localModelValue.value]
+	})
+
+	const hasMax = computed(() => {
+		return typeof props.max === 'string' ? parseInt(props.max) : props.max
+	})
+
+	const hasDropArea = computed(() => {
+		return modifiers?.value?.includes('drop-area')
+	})
+
+	const isMultiple = computed(() => {
+		if (!props.multiple) {
+			return false
+		}
+		if (!hasMax.value) {
+			return true
+		}
+		return hasMax.value - files.value.length > 1
+	})
+
+	const isDragging = ref(false)
+
+	const inputEl = ref<HTMLInputElement>()
+	const onDragenter = () => {
+		isDragging.value = true
+	}
+
+	const onDragleave = () => {
+		isDragging.value = false
+	}
+
+	const onDrop = (event: DragEvent) => {
+		if (!event.dataTransfer?.files) {
+			return
+		}
+		isDragging.value = false
+		addFiles(event.dataTransfer?.files)
+	}
+
+	const onChange = () => {
+		if (!inputEl.value?.files) {
+			return
+		}
+		addFiles(inputEl.value.files)
+		inputEl.value.value = ''
+	}
+
+	const addFiles = (uploadedFiles: FileList) => {
+		if (!props.multiple) {
+			if (Array.isArray(localModelValue.value)) {
+				localModelValue.value = [...uploadedFiles]
+				return
+			}
+			localModelValue.value = uploadedFiles[0]
+			return
+		}
+		let toReturn: (File | UploadedFile)[] = []
+		if (!Array.isArray(localModelValue.value) && localModelValue.value) {
+			toReturn = [localModelValue.value]
+		} else {
+			toReturn =
+				localModelValue.value && Array.isArray(localModelValue.value)
+					? [...localModelValue.value]
+					: toReturn
+		}
+		for (const file of uploadedFiles) {
+			if (hasMax.value && toReturn.length > hasMax.value) {
+				break
+			}
+			toReturn.push(file)
+		}
+
+		localModelValue.value = toReturn
+	}
+
+	const onClick = () => {
+		if (!inputEl.value) {
+			return
+		}
+		inputEl.value.click()
+	}
+
+	const onClickRemoveFile = (index: number) => {
+		if (!Array.isArray(localModelValue.value)) {
+			localModelValue.value = undefined
+			return
+		}
+		const toReturn = [...localModelValue.value]
+		toReturn.splice(index, 1)
+		localModelValue.value = toReturn
+	}
+
+	const previewSrc = computed(() => {
+		if (files.value.length === 0) {
+			return
+		}
+		if (files.value[0] instanceof File) {
+			return URL.createObjectURL(files.value[0])
+		}
+		return files.value[0].url
+	})
+
+	onBeforeUnmount(() => {
+		if (previewSrc.value) {
+			URL.revokeObjectURL(previewSrc.value)
+		}
+	})
+
+	const sizeInKiB = (size?: number) => {
+		if (!size) {
+			return
+		}
+		return Math.floor(size / 1024)
+	}
+</script>
+
+<template>
+	<div :class="bemCssClasses">
+		<label v-if="label" :for="hasId">
+			{{ label }}
+		</label>
+		<div
+			v-if="hasDropArea"
+			class="vv-input-file__drop-area"
+			@dragenter.prevent.stop="onDragenter"
+			@dragleave.prevent.stop="onDragleave"
+			@drop.prevent.stop="onDrop"
+			@dragover.prevent.stop
+			@click.stop="onClick"
+		>
+			<slot name="drop-area">
+				<VvButton
+					modifiers="action"
+					aria-label="upload"
+					:label="!previewSrc ? labelButton : undefined"
+					:class="{
+						'absolute top-8 right-8': previewSrc,
+					}"
+					:icon="!previewSrc ? 'image' : 'edit'"
+					class="z-1"
+					@click.stop="onClick"
+				/>
+				<picture class="vv-input-file__preview">
+					<img
+						v-if="previewSrc"
+						:src="previewSrc"
+						:alt="files[0].name"
+					/>
+				</picture>
+			</slot>
+		</div>
+		<div class="vv-input-file__wrapper">
+			<VvIcon v-if="iconLeft" :name="iconLeft" />
+			<input
+				:id="hasId"
+				ref="inputEl"
+				:placeholder="placeholder"
+				:aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
+				:aria-invalid="invalid"
+				:aria-errormessage="
+					hasInvalidLabelOrSlot ? hasHintId : undefined
+				"
+				:multiple="isMultiple"
+				:accept="accept"
+				type="file"
+				:name="name"
+				@change="onChange"
+			/>
+			<VvIcon v-if="iconRight" :name="iconRight" />
+		</div>
+		<ul class="vv-input-file__list">
+			<li
+				v-for="(file, index) in files"
+				:key="index"
+				class="vv-input-file__item"
+			>
+				<VvIcon
+					class="vv-input-file__item-icon"
+					name="akar-icons:file"
+				/>
+				<div class="vv-input-file__item-name">{{ file.name }}</div>
+				<small class="vv-input-file__item-info">
+					{{ sizeInKiB(file.size) }} KB
+				</small>
+				<button
+					type="button"
+					class="vv-input-file__item-remove"
+					title="Remove"
+					aria-label="remove-file"
+					@click.stop="onClickRemoveFile(index)"
+				/>
+			</li>
+		</ul>
+		<HintSlot :id="hasHintId" class="vv-input-file__hint">
+			<template v-if="$slots.hint" #hint>
+				<slot name="hint" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.loading" #loading>
+				<slot name="loading" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.valid" #valid>
+				<slot name="valid" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.invalid" #invalid>
+				<slot name="invalid" v-bind="hintSlotScope" />
+			</template>
+		</HintSlot>
+	</div>
+</template>

package/src/components/VvInputFile/index.ts

@@ -0,0 +1,36 @@
+import type { UploadedFile } from '@/types'
+import {
+	ModifiersProps,
+	ValidProps,
+	InvalidProps,
+	HintProps,
+	LabelProps,
+	LoadingProps,
+} from '../../props'
+
+export type VvInputFileEvents = {
+	'update:modelValue': [File | undefined]
+}
+
+export const VvInputFileProps = {
+	...ModifiersProps,
+	...ValidProps,
+	...InvalidProps,
+	...HintProps,
+	...LabelProps,
+	...LoadingProps,
+	name: { type: String },
+	id: { type: String },
+	modelValue: {
+		type: Object as PropType<File | (File | UploadedFile)[] | UploadedFile>,
+		required: true,
+	},
+	max: [Number, String],
+	labelButton: { type: String, default: 'Image' },
+	loading: Boolean,
+	accept: String,
+	placeholder: String,
+	multiple: Boolean,
+	iconLeft: String,
+	iconRight: String,
+}

package/src/components/index.ts

@@ -31,3 +31,4 @@ export { default as VvSelect } from './VvSelect/VvSelect.vue'
 export { default as VvTab } from './VvTab/VvTab.vue'
 export { default as VvTextarea } from './VvTextarea/VvTextarea.vue'
 export { default as VvTooltip } from './VvTooltip/VvTooltip.vue'
+export { default as VvInputFile } from './VvInputFile/VvInputFile.vue'

package/src/composables/index.ts

@@ -1 +1,2 @@
 export { useAlert } from './alert/useAlert'
+export { useBlurhash } from './useBlurhash'

package/src/composables/useBlurhash.ts

@@ -0,0 +1,76 @@
+import { wrap } from 'comlink'
+import pica from 'pica'
+import type { BlurhashWorkerType } from '@/types/blurhash'
+import BlurhashWorker from '@/workers/blurhash?worker&inline'
+
+const remoteFunction = wrap<BlurhashWorkerType>(new BlurhashWorker())
+
+function loadImage(src: string): Promise<CanvasImageSource> {
+	return new Promise((resolve, reject) => {
+		const img = new Image()
+		img.onload = () => resolve(img)
+		img.onerror = (...args) => reject(args)
+		img.src = src
+	})
+}
+
+const getWidthHeightFromMaxSize = (
+	width: number,
+	height: number,
+	maxSize: number,
+) => {
+	if (width > height) {
+		return {
+			width: maxSize,
+			height: Math.round(maxSize * (height / width)),
+		}
+	}
+	return {
+		width: Math.round(maxSize * (width / height)),
+		height: maxSize,
+	}
+}
+
+const resizeImage = async (
+	image: ImageBitmap | HTMLImageElement | HTMLCanvasElement | File | Blob,
+	width: number,
+	height: number,
+) => {
+	const resizer = new pica()
+	const canvas = document.createElement('canvas')
+	canvas.width = width
+	canvas.height = height
+	const result = await resizer.resize(image, canvas)
+	return result.getContext('2d')?.getImageData(0, 0, width, height).data
+}
+
+export const useBlurhash = () => {
+	async function encode(file: File) {
+		const imageUrl = URL.createObjectURL(file)
+		const image = await loadImage(imageUrl)
+		if ('width' in image && 'height' in image) {
+			const { width: newWidth, height: newHeight } =
+				getWidthHeightFromMaxSize(
+					image.width as number,
+					image.height as number,
+					32,
+				)
+			const imageData = await resizeImage(
+				image as ImageBitmap,
+				newWidth,
+				newHeight,
+			)
+			if (imageData) {
+				return remoteFunction.encode(
+					imageData,
+					newWidth,
+					newHeight,
+					4,
+					4,
+				)
+			}
+		}
+	}
+
+	return { encode, decode: remoteFunction.decode, loadImage }
+}

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

@@ -6,7 +6,7 @@ import { Default as DefaultStory, type Story } from './AlertGroup.stories'
 import { useAlert } from '@/composables/alert/useAlert'
 
 const meta: Meta<typeof VvAlertGroup> = {
-	title: 'Components/AlertGroup/UseComposable',
+	title: 'Composables/useAlert',
 	component: VvAlertGroup,
 	args: defaultArgs,
 	argTypes,
@@ -15,7 +15,7 @@ const meta: Meta<typeof VvAlertGroup> = {
 
 export default meta
 
-export const UseComposable: Story = {
+export const Default: Story = {
 	...DefaultStory,
 	parameters: {
 		docs: {

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/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: ['drop-area', '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[]',
+			},
+		},
+	},
+}