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

package/src/components/VvInputFile/VvInputFile.vue

@@ -0,0 +1,395 @@
+<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 '.'
+	import Sortable from 'vuedraggable'
+
+	// 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, readonly, icon, iconPosition, iconDownload } =
+		toRefs(props)
+	const hasId = useUniqueId(id)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
+
+	const hasProgress = computed(() => {
+		if (!props.progress) {
+			return false
+		}
+		const progress =
+			typeof props.progress === 'string'
+				? parseInt(props.progress)
+				: props.progress
+		return progress > 0 && progress < 100
+	})
+
+	const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
+	const { hasIcon: hasIconDownload } = useComponentIcon(iconDownload)
+
+	// styles
+	const bemCssClasses = useModifiers(
+		'vv-input-file',
+		modifiers,
+		computed(() => ({
+			dragging: isDragging.value,
+			loading: props.loading && !hasProgress.value,
+			valid: props.valid === true,
+			invalid: props.invalid === true,
+			'icon-before': !!hasIconBefore.value,
+			'icon-after': !!hasIconAfter.value,
+			'drop-area': hasDropArea.value,
+		})),
+	)
+
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(propsDefaults, slots)
+
+	const localModelValue = useVModel(props, 'modelValue', emit)
+	const files = computed({
+		get: () => {
+			if (
+				!localModelValue.value ||
+				(!Array.isArray(localModelValue.value) &&
+					!(localModelValue.value as File)?.name)
+			) {
+				return []
+			}
+			return Array.isArray(localModelValue.value)
+				? localModelValue.value
+				: [localModelValue.value]
+		},
+		set: (value) => {
+			if (isMultiple.value) {
+				localModelValue.value = value
+				return
+			}
+			localModelValue.value = value?.[0]
+		},
+	})
+
+	const hasMax = computed(() => {
+		return typeof props.max === 'string' ? parseInt(props.max) : props.max
+	})
+
+	const hasDropArea = computed(() => {
+		return props.dropArea && !readonly.value
+	})
+
+	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
+		selectedFileIndex.value = toReturn.length - 1
+	}
+
+	const onClickDropArea = () => {
+		if (!inputEl.value) {
+			return
+		}
+		if (!readonly.value) {
+			inputEl.value.click()
+		}
+	}
+
+	const onClickRemoveFile = (index: number) => {
+		if (!Array.isArray(localModelValue.value)) {
+			localModelValue.value = undefined
+			return
+		}
+		if (selectedFileIndex.value === index) {
+			selectedFileIndex.value = 0
+		}
+		const toReturn = [...localModelValue.value]
+		toReturn.splice(index, 1)
+		localModelValue.value = toReturn
+	}
+
+	const selectedFileIndex = ref(0)
+	const PREVIEW_MIME_TYPES = ['image/jpeg', 'image/png']
+	const previewSrc = computed(() => {
+		if (files.value.length === 0) {
+			return
+		}
+		if (!files.value[selectedFileIndex.value]) {
+			return undefined
+		}
+		if (files.value[selectedFileIndex.value] instanceof File) {
+			const currentFile = files.value[selectedFileIndex.value] as File
+			if (!PREVIEW_MIME_TYPES.includes(currentFile.type)) {
+				return undefined
+			}
+			return URL.createObjectURL(currentFile)
+		}
+		const currentFile = files.value[selectedFileIndex.value] as UploadedFile
+		if (currentFile.thumbnailUrl) {
+			return currentFile.thumbnailUrl
+		}
+		if (!PREVIEW_MIME_TYPES.includes(currentFile.type)) {
+			return undefined
+		}
+		return currentFile.url
+	})
+
+	watch(previewSrc, (_newValue, oldValue) => {
+		if (oldValue) {
+			URL.revokeObjectURL(oldValue)
+		}
+	})
+
+	onBeforeUnmount(() => {
+		if (previewSrc.value) {
+			URL.revokeObjectURL(previewSrc.value)
+		}
+	})
+
+	const sizeInKiB = (size?: number) => {
+		if (!size) {
+			return
+		}
+		return Math.floor(size / 1024)
+	}
+
+	const onClickDownloadFile = (file: File | UploadedFile) => {
+		const link = document.createElement('a')
+		if (file instanceof File) {
+			link.href = URL.createObjectURL(file)
+		} else if (file.url) {
+			link.href = file.url
+		}
+		link.setAttribute('download', file.name)
+		document.body.appendChild(link)
+		link.click()
+		document.body.removeChild(link)
+		URL.revokeObjectURL(link.href)
+	}
+
+	const onClickSelectFile = (index: number) => {
+		selectedFileIndex.value = index
+	}
+
+	const dropdAreaActionLabel = computed(() => {
+		if (files.value.length === 0 || isMultiple.value) {
+			return props.labelAdd
+		}
+		return props.labelReplace
+	})
+
+	const dropAreaActionIcon = computed(() => {
+		if (files.value.length === 0 || isMultiple.value) {
+			return props.iconAdd
+		}
+		return props.iconReplace
+	})
+
+	const onSortEnd = ({ newIndex }: { newIndex: number | null }) => {
+		if (newIndex !== null) {
+			selectedFileIndex.value = newIndex
+		}
+	}
+</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="onClickDropArea"
+		>
+			<slot name="drop-area">
+				<picture class="vv-input-file__preview">
+					<img
+						v-if="previewSrc"
+						:src="previewSrc"
+						:alt="files[selectedFileIndex].name"
+					/>
+				</picture>
+				<VvButton
+					v-if="!readonly"
+					modifiers="action"
+					:label="!previewSrc ? dropdAreaActionLabel : undefined"
+					:title="previewSrc ? dropdAreaActionLabel : undefined"
+					:class="{
+						'vv-input-file__drop-area-action': previewSrc,
+					}"
+					:icon="dropAreaActionIcon"
+					@click.stop="onClickDropArea"
+				/>
+			</slot>
+		</div>
+		<div class="vv-input-file__wrapper">
+			<VvIcon v-if="hasIconBefore" v-bind="hasIconBefore" />
+			<input
+				:id="hasId"
+				ref="inputEl"
+				type="file"
+				:readonly="readonly"
+				:placeholder="placeholder"
+				:aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
+				:aria-invalid="invalid"
+				:aria-errormessage="
+					hasInvalidLabelOrSlot ? hasHintId : undefined
+				"
+				:multiple="isMultiple"
+				:accept="accept"
+				:capture="capture"
+				:name="name"
+				@change="onChange"
+			/>
+			<progress
+				v-if="hasProgress"
+				class="vv-input-file__progress"
+				:value="progress"
+				max="100"
+			>
+				{{ progress }}%
+			</progress>
+			<VvIcon v-if="hasIconAfter" v-bind="hasIconAfter" />
+		</div>
+		<Sortable
+			v-model="files"
+			tag="ul"
+			class="vv-input-file__list"
+			item-key="name"
+			:move="() => sortable"
+			@end="onSortEnd"
+		>
+			<template #item="{ element: file, index }">
+				<li
+					class="vv-input-file__item"
+					:class="{
+						active:
+							index === selectedFileIndex &&
+							hasDropArea &&
+							files.length > 1,
+						'cursor-move': sortable,
+					}"
+					@click.stop="onClickSelectFile(index)"
+				>
+					<button
+						v-if="hasIconDownload"
+						type="button"
+						class="vv-input-file__item-action"
+						:title="labelDownload"
+						@click.stop="onClickDownloadFile(file)"
+					>
+						<VvIcon v-bind="hasIconDownload" />
+					</button>
+					<div class="vv-input-file__item-name">
+						{{ file.name }}
+					</div>
+					<small class="vv-input-file__item-info">
+						{{ sizeInKiB(file.size) }} KB
+					</small>
+					<button
+						v-if="!readonly"
+						type="button"
+						class="vv-input-file__item-remove"
+						:title="labelRemove"
+						@click.stop="onClickRemoveFile(index)"
+					/>
+				</li>
+			</template>
+		</Sortable>
+		<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,135 @@
+import type { UploadedFile } from '@/types'
+import {
+	IdNameProps,
+	ModifiersProps,
+	ValidProps,
+	InvalidProps,
+	HintProps,
+	LabelProps,
+	LoadingProps,
+	ReadonlyProps,
+	IconProps,
+} from '../../props'
+import { type VvIconProps, ACTION_ICONS } from '../VvIcon'
+
+export type VvInputFileEvents = {
+	'update:modelValue': [
+		File | UploadedFile | (File | UploadedFile)[] | undefined,
+	]
+}
+
+export const VvInputFileProps = {
+	...IdNameProps,
+	...ModifiersProps,
+	...ValidProps,
+	...InvalidProps,
+	...HintProps,
+	...LabelProps,
+	...LoadingProps,
+	...ReadonlyProps,
+	...IconProps,
+	/**
+	 * Input value
+	 */
+	modelValue: {
+		type: Object as PropType<File | UploadedFile | (File | UploadedFile)[]>,
+	},
+	/**
+	 * Whether to show progress bar
+	 */
+	progress: { type: [Number, String], default: undefined },
+	/**
+	 * Input
+	 * Text that appears in the form control when it has no value set
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+	 */
+	placeholder: { type: String, default: undefined },
+	/**
+	 * File types to accept
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
+	 */
+	accept: { type: String, default: '*' },
+	/**
+	 * Whether to allow multiple values
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
+	 */
+	multiple: { type: Boolean, default: false },
+	/**
+	 * Front or rear camera
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture
+	 */
+	capture: {
+		type: String as PropType<'user' | 'environment'>,
+		default: undefined,
+		validation: (value?: string) => {
+			if (value === undefined) {
+				return true
+			}
+			return ['user', 'environment'].includes(value)
+		},
+	},
+	/**
+	 * Max number of files
+	 */
+	max: { type: [Number, String], default: undefined },
+	/**
+	 * Show drop area
+	 */
+	dropArea: { type: Boolean, default: false },
+	/**
+	 * Enable sorting
+	 */
+	sortable: { type: Boolean, default: false },
+	/**
+	 * Label for add button
+	 */
+	labelAdd: {
+		type: String,
+		default: 'Add file',
+	},
+	/**
+	 * VvIcon name for add button
+	 * @see VVIcon
+	 */
+	iconAdd: {
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: ACTION_ICONS.add,
+	},
+	/**
+	 * Label for replace button
+	 */
+	labelReplace: {
+		type: String,
+		default: 'Replace file',
+	},
+	/**
+	 * VvIcon name for replace button
+	 * @see VVIcon
+	 */
+	iconReplace: {
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: ACTION_ICONS.edit,
+	},
+	/**
+	 * Label for download button
+	 */
+	labelDownload: {
+		type: String,
+		default: 'Downlaod file',
+	},
+	/**
+	 * VvIcon name for download button
+	 * @see VVIcon
+	 */
+	iconDownload: {
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: ACTION_ICONS.download,
+	},
+	/**
+	 * Label for remove button
+	 */
+	labelRemove: {
+		type: String,
+		default: 'Remove file',
+	},
+}

package/src/components/VvInputText/VvInputClearAction.ts

@@ -1,3 +1,4 @@
+import type { VvIconProps } from '../VvIcon'
 import VvIcon from '../VvIcon/VvIcon.vue'
 
 export default defineComponent({
@@ -14,28 +15,31 @@ export default defineComponent({
 			default: 'Clear',
 		},
 		icon: {
-			type: String,
+			type: [String, Object] as PropType<string | VvIconProps>,
 			default: 'close',
 		},
 	},
 	emits: ['clear'],
 	setup(props, { emit }) {
+		const { hasIcon } = useComponentIcon(computed(() => props.icon))
 		function onClick(e: Event) {
 			e?.stopPropagation()
 			if (!props.disabled) {
 				emit('clear')
 			}
 		}
-
 		return {
+			hasIcon,
 			onClick,
 		}
 	},
 	render() {
-		const icon = h(VvIcon, {
-			name: this.icon,
-			class: 'vv-input-text__icon',
-		})
+		const icon = this.hasIcon
+			? h(VvIcon, {
+					...this.hasIcon,
+					class: 'vv-input-text__icon',
+				})
+			: undefined
 
 		return h(
 			'button',

package/src/components/VvInputText/VvInputPasswordAction.ts

@@ -1,5 +1,5 @@
-import { TYPES_ICON } from '../VvInputText'
 import VvIcon from '../VvIcon/VvIcon.vue'
+import { type VvIconProps, ACTION_ICONS } from '../VvIcon'
 
 export default defineComponent({
 	components: {
@@ -19,12 +19,12 @@ export default defineComponent({
 			default: 'Hide password',
 		},
 		iconShow: {
-			type: String,
-			default: TYPES_ICON.PASSWORD_SHOW,
+			type: [String, Object] as PropType<string | VvIconProps>,
+			default: ACTION_ICONS.showPassword,
 		},
 		iconHide: {
-			type: String,
-			default: TYPES_ICON.PASSWORD_HIDE,
+			type: [String, Object] as PropType<string | VvIconProps>,
+			default: ACTION_ICONS.hidePassword,
 		},
 	},
 	emits: ['toggle-password'],
@@ -33,6 +33,7 @@ export default defineComponent({
 		const activeIcon = computed(() =>
 			active.value ? props.iconHide : props.iconShow,
 		)
+		const { hasIcon } = useComponentIcon(activeIcon)
 
 		function onClick(e: Event) {
 			e?.stopPropagation()
@@ -45,14 +46,17 @@ export default defineComponent({
 		return {
 			active,
 			activeIcon,
+			hasIcon,
 			onClick,
 		}
 	},
 	render() {
-		const icon = h(VvIcon, {
-			name: this.activeIcon,
-			class: 'vv-input-text__icon',
-		})
+		const icon = this.hasIcon
+			? h(VvIcon, {
+					...this.hasIcon,
+					class: 'vv-input-text__icon',
+				})
+			: undefined
 		return h(
 			'button',
 			{