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

package/src/components/VvIcon/index.ts

@@ -1,5 +1,18 @@
 import type { IconifyIconOnLoad, IconifyRenderMode } from '@iconify/vue'
 
+export const ACTION_ICONS = {
+	showPassword: 'eye-on',
+	hidePassword: 'eye-off',
+	showDatePicker: 'calendar',
+	showTimePicker: 'time',
+	showColorPicker: 'color',
+	clear: 'close',
+	add: 'add',
+	remove: 'trash',
+	edit: 'edit',
+	download: 'download',
+} as const
+
 export enum IconPrefix {
 	simple = 'simple',
 	normal = 'normal',

package/src/components/VvInputFile/VvInputFile.vue

@@ -24,23 +24,37 @@
 		VvInputFileProps,
 		props,
 	)
-
-	const { modifiers, id, readonly } = toRefs(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,
+			loading: props.loading && !hasProgress.value,
 			valid: props.valid === true,
 			invalid: props.invalid === true,
-			'icon-before': !!props.iconLeft,
-			'icon-after': !!props.iconRight,
+			'icon-before': !!hasIconBefore.value,
+			'icon-after': !!hasIconAfter.value,
+			'drop-area': hasDropArea.value,
 		})),
 	)
 
@@ -70,7 +84,7 @@
 	})
 
 	const hasDropArea = computed(() => {
-		return modifiers?.value?.includes('drop-area')
+		return props.dropArea && !readonly.value
 	})
 
 	const isMultiple = computed(() => {
@@ -134,11 +148,11 @@
 			}
 			toReturn.push(file)
 		}
-
 		localModelValue.value = toReturn
+		selectedFileIndex.value = toReturn.length - 1
 	}
 
-	const onClick = () => {
+	const onClickDropArea = () => {
 		if (!inputEl.value) {
 			return
 		}
@@ -157,17 +171,34 @@
 		localModelValue.value = toReturn
 	}
 
-	const currentFileIndex = ref(0)
+	const selectedFileIndex = ref(0)
+	const PREVIEW_MIME_TYPES = ['image/jpeg', 'image/png']
 	const previewSrc = computed(() => {
 		if (files.value.length === 0) {
 			return
 		}
-		if (files.value[currentFileIndex.value] instanceof File) {
-			return URL.createObjectURL(
-				files.value[currentFileIndex.value] as File,
-			)
+
+		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)
 		}
-		return (files.value[currentFileIndex.value] as UploadedFile).url
 	})
 
 	onBeforeUnmount(() => {
@@ -193,7 +224,27 @@
 		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>
@@ -208,35 +259,35 @@
 			@dragleave.prevent.stop="onDragleave"
 			@drop.prevent.stop="onDrop"
 			@dragover.prevent.stop
-			@click.stop="onClick"
+			@click.stop="onClickDropArea"
 		>
 			<slot name="drop-area">
-				<VvButton
-					v-if="!readonly"
-					modifiers="action"
-					aria-label="upload"
-					:label="!previewSrc ? labelButton : undefined"
-					:class="{
-						'absolute top-8 right-8': previewSrc,
-					}"
-					:icon="!previewSrc ? 'image' : isMultiple ? 'add' : 'edit'"
-					class="z-1"
-					@click.stop="onClick"
-				/>
 				<picture class="vv-input-file__preview">
 					<img
 						v-if="previewSrc"
 						:src="previewSrc"
-						:alt="files[currentFileIndex].name"
+						: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="iconLeft" :name="iconLeft" />
+			<VvIcon v-if="hasIconBefore" v-bind="hasIconBefore" />
 			<input
 				:id="hasId"
 				ref="inputEl"
+				type="file"
 				:readonly="readonly"
 				:placeholder="placeholder"
 				:aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
@@ -246,29 +297,42 @@
 				"
 				:multiple="isMultiple"
 				:accept="accept"
-				type="file"
 				:name="name"
 				@change="onChange"
 			/>
-			<VvIcon v-if="iconRight" :name="iconRight" />
+			<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"
-				@click.stop="currentFileIndex = index"
+				:class="{
+					active:
+						index === selectedFileIndex &&
+						hasDropArea &&
+						files.length > 1,
+				}"
+				@click.stop="onClickSelectFile(index)"
 			>
 				<button
+					v-if="hasIconDownload"
 					type="button"
-					class="vv-input-file__item-icon cursor-pointer"
-					title="Download"
-					aria-label="download-file"
+					class="vv-input-file__item-action"
+					:title="labelDownload"
 					@click.stop="onClickDownloadFile(file)"
 				>
-					<VvIcon name="download" />
+					<VvIcon v-bind="hasIconDownload" />
 				</button>
-				<div class="vv-input-file__item-name cursor-pointer">
+				<div class="vv-input-file__item-name">
 					{{ file.name }}
 				</div>
 				<small class="vv-input-file__item-info">
@@ -278,8 +342,7 @@
 					v-if="!readonly"
 					type="button"
 					class="vv-input-file__item-remove"
-					title="Remove"
-					aria-label="remove-file"
+					:title="labelRemove"
 					@click.stop="onClickRemoveFile(index)"
 				/>
 			</li>

package/src/components/VvInputFile/index.ts

@@ -1,5 +1,6 @@
 import type { UploadedFile } from '@/types'
 import {
+	IdNameProps,
 	ModifiersProps,
 	ValidProps,
 	InvalidProps,
@@ -7,13 +8,16 @@ import {
 	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,
@@ -21,18 +25,92 @@ export const VvInputFileProps = {
 	...LabelProps,
 	...LoadingProps,
 	...ReadonlyProps,
-	name: { type: String },
-	id: { type: String },
+	...IconProps,
+	/**
+	 * Input value
+	 */
 	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,
+	/**
+	 * 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
@@ -256,14 +256,14 @@
 		}
 		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 }
+				return { name: ACTION_ICONS.showTimePicker }
 		}
 		return undefined
 	})
@@ -306,8 +306,8 @@
 			loading: loading.value,
 			disabled: props.disabled,
 			readonly: props.readonly,
-			'icon-before': hasIconBefore.value !== undefined,
-			'icon-after': iconAfter.value !== undefined,
+			'icon-before': !!hasIconBefore.value,
+			'icon-after': !!iconAfter.value,
 			floating: props.floating && !isEmpty(props.label),
 			dirty: isDirty.value,
 			focus: isFocused.value,

package/src/components/VvInputText/index.ts

@@ -1,6 +1,7 @@
 import type { ExtractPropTypes, PropType } from 'vue'
 import type { FactoryOpts } from 'imask'
 import { InputTextareaProps } from '../../props'
+import { type VvIconProps, ACTION_ICONS } from '../VvIcon'
 
 export const INPUT_TYPES = {
 	TEXT: 'text',
@@ -19,15 +20,6 @@ export const INPUT_TYPES = {
 } as const
 export type InputType = ValueOf<typeof INPUT_TYPES>
 
-export const TYPES_ICON = {
-	PASSWORD_SHOW: 'eye-on',
-	PASSWORD_HIDE: 'eye-off',
-	DATE: 'calendar',
-	TIME: 'time',
-	COLOR: 'color',
-	SEARCH: 'close',
-} as const
-
 export const VvInputTextEvents = [
 	'update:modelValue',
 	'update:masked',
@@ -98,24 +90,24 @@ export const VvInputTextProps = {
 	 * @see VVIcon
 	 */
 	iconShowPassword: {
-		type: String,
-		default: TYPES_ICON.PASSWORD_SHOW,
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: ACTION_ICONS.showPassword,
 	},
 	/**
 	 * VvIcon name for hide password button
 	 * @see VVIcon
 	 */
 	iconHidePassword: {
-		type: String,
-		default: TYPES_ICON.PASSWORD_HIDE,
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: ACTION_ICONS.hidePassword,
 	},
 	/**
 	 * VvIcon name for clear button
 	 * @see VVIcon
 	 */
 	iconClear: {
-		type: String,
-		default: TYPES_ICON.SEARCH,
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: ACTION_ICONS.clear,
 	},
 	/**
 	 * Label for step up button

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

@@ -11,7 +11,7 @@ export const argTypes = {
 	...HintArgTypes,
 	modifiers: {
 		...ModifiersArgTypes.modifiers,
-		options: ['drop-area', 'hidden', 'square', 'circle'],
+		options: ['hidden', 'square', 'circle'],
 	},
 	'drop-area': {
 		description: 'Drop area slot',

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

@@ -28,12 +28,10 @@ export const Default: Story = {
 			}
 		},
 		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>
+			<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>
 		`,
 	}),
 }
@@ -81,18 +79,11 @@ export const Loading: Story = {
 	},
 }
 
-export const IconLeft: Story = {
+export const Progress: Story = {
 	...Default,
 	args: {
 		...defaultArgs,
-		iconLeft: 'material-symbols:cloud-outline',
-	},
-}
-
-export const IconRight: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		iconRight: 'akar-icons:heart',
+		progress: 30,
+		hintLabel: '30%',
 	},
 }