@volverjs/ui-vue 0.0.10-beta.2 → 0.0.10-beta.21

package/src/components/VvInputFile/VvInputFile.vue

@@ -0,0 +1,365 @@
+<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, 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(() => {
+		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 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
+		}
+		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] 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
+	})
+</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"
+				: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>
+		<ul class="vv-input-file__list">
+			<li
+				v-for="(file, index) in files"
+				:key="index"
+				class="vv-input-file__item"
+				:class="{
+					active:
+						index === selectedFileIndex &&
+						hasDropArea &&
+						files.length > 1,
+				}"
+				@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>
+		</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,116 @@
+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 | undefined]
+}
+
+export const VvInputFileProps = {
+	...IdNameProps,
+	...ModifiersProps,
+	...ValidProps,
+	...InvalidProps,
+	...HintProps,
+	...LabelProps,
+	...LoadingProps,
+	...ReadonlyProps,
+	...IconProps,
+	/**
+	 * Input value
+	 */
+	modelValue: {
+		type: Object as PropType<File | (File | UploadedFile)[] | UploadedFile>,
+		required: true,
+	},
+	/**
+	 * 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 },
+	/**
+	 * Max number of files
+	 */
+	max: { type: [Number, String], default: undefined },
+	/**
+	 * Show drop area
+	 */
+	dropArea: { 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',
 			{

package/src/components/VvInputText/VvInputText.vue

@@ -9,12 +9,12 @@
 	import { useIMask } from 'vue-imask'
 	import HintSlotFactory from '../common/HintSlot'
 	import VvIcon from '../VvIcon/VvIcon.vue'
+	import { ACTION_ICONS } from '../VvIcon'
 	import VvInputTextActionsFactory from '../VvInputText/VvInputTextActions'
 	import {
 		VvInputTextEvents,
 		VvInputTextProps,
 		INPUT_TYPES,
-		TYPES_ICON,
 	} from '../VvInputText'
 
 	// props, emit, slots and attrs
@@ -227,7 +227,7 @@
 				return
 			}
 			inputEl.value.stepUp()
-			localModelValue.value = unref(inputEl).value
+			localModelValue.value = Number(unref(inputEl).value)
 		}
 	}
 	const onStepDown = () => {
@@ -238,7 +238,7 @@
 				return
 			}
 			inputEl.value.stepDown()
-			localModelValue.value = unref(inputEl).value
+			localModelValue.value = Number(unref(inputEl).value)
 		}
 	}
 
@@ -249,24 +249,23 @@
 	}
 
 	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
-	const defaultAfterIcon = computed(() => {
+	const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
+	const iconAfter = computed(() => {
+		if (hasIconAfter.value !== undefined) {
+			return hasIconAfter.value
+		}
 		switch (props.type) {
 			case INPUT_TYPES.COLOR:
-				return { name: TYPES_ICON.COLOR }
+				return { name: ACTION_ICONS.showColorPicker }
 			case INPUT_TYPES.DATE:
 			case INPUT_TYPES.DATETIME_LOCAL:
 			case INPUT_TYPES.WEEK:
 			case INPUT_TYPES.MONTH:
-				return { name: TYPES_ICON.DATE }
+				return { name: ACTION_ICONS.showDatePicker }
 			case INPUT_TYPES.TIME:
-				return { name: TYPES_ICON.TIME }
-			default:
-				return ''
+				return { name: ACTION_ICONS.showTimePicker }
 		}
+		return undefined
 	})
 
 	// count
@@ -307,8 +306,8 @@
 			loading: loading.value,
 			disabled: props.disabled,
 			readonly: props.readonly,
-			'icon-before': hasIconBefore.value,
-			'icon-after': hasIconAfter.value || !isEmpty(defaultAfterIcon),
+			'icon-before': !!hasIconBefore.value,
+			'icon-after': !!iconAfter.value,
 			floating: props.floating && !isEmpty(props.label),
 			dirty: isDirty.value,
 			focus: isFocused.value,
@@ -476,8 +475,8 @@
 			>
 				<VvIcon
 					v-if="hasIconBefore"
+					v-bind="hasIconBefore"
 					class="vv-input-text__icon"
-					v-bind="hasIcon"
 				/>
 				<input
 					:id="hasId"
@@ -500,9 +499,9 @@
 			</div>
 			<!-- @slot Slot to replace right icon -->
 			<VvIcon
-				v-if="hasIconAfter || defaultAfterIcon"
+				v-if="iconAfter"
+				v-bind="iconAfter"
 				class="vv-input-text__icon vv-input-text__icon-after"
-				v-bind="hasIconAfter ? hasIcon : defaultAfterIcon"
 			/>
 			<PasswordInputActions
 				v-else-if="isPassword && !hideActions && isClickable"