@volverjs/ui-vue 0.0.10-beta.15 → 0.0.10-beta.17

package/src/components/VvAlert/index.ts

@@ -86,9 +86,7 @@ export const useVvAlert = (
 	const hasTitleId = computed(() => `${hasId.value}-title`)
 
 	// icon
-	const hasIcon = computed(() =>
-		typeof props.icon === 'string' ? { name: props.icon } : props.icon,
-	)
+	const { hasIcon } = useComponentIcon(computed(() => props.icon))
 
 	// props
 	const hasClass = useModifiers(

package/src/components/VvAlertGroup/index.ts

@@ -1,10 +1,11 @@
 import { ModifiersProps } from '@/props'
 import type { ExtractPropTypes } from 'vue'
+import type { VvIconProps } from '../VvIcon'
 
 export type AlertItem = {
 	id: string | number
 	title?: string
-	icon?: string | Record<string, unknown>
+	icon?: string | VvIconProps
 	content?: string
 	footer?: string
 	modifiers?: string | string[]

package/src/components/VvButton/VvButton.vue

@@ -74,9 +74,7 @@
 	 * @description Define icon attributes.
 	 * @returns {Object} The icon attributes.
 	 */
-	const hasIconProps = computed(() =>
-		typeof icon?.value === 'string' ? { name: icon?.value } : icon?.value,
-	)
+	const { hasIcon } = useComponentIcon(icon)
 
 	/**
 	 * @description Catch click event
@@ -146,9 +144,11 @@
 			<template v-else>
 				<!-- @slot Before label and icon -->
 				<slot name="before" />
-				<template v-if="icon">
-					<VvIcon class="vv-button__icon" v-bind="hasIconProps" />
-				</template>
+				<VvIcon
+					v-if="hasIcon"
+					v-bind="hasIcon"
+					class="vv-button__icon"
+				/>
 				<span v-if="label" class="vv-button__label">
 					<!-- @slot Use this slot for button label -->
 					<slot name="label">

package/src/components/VvButton/index.ts

@@ -6,6 +6,7 @@ import {
 	LoadingProps,
 	ModifiersProps,
 	UnselectableProps,
+	IconProps,
 } from '../../props'
 import { INJECTION_KEY_BUTTON_GROUP, Side } from '../../constants'
 
@@ -17,10 +18,7 @@ export const VvButtonProps = {
 	...ModifiersProps,
 	...UnselectableProps,
 	...LoadingProps,
-	/**
-	 * Button icon
-	 */
-	icon: [String, Object],
+	...IconProps,
 	/**
 	 * Button icon position
 	 */

package/src/components/VvCombobox/VvCombobox.vue

@@ -151,10 +151,7 @@
 	const dropdownEl = ref()
 
 	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
+	const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
 
 	// dirty
 	const isDirty = computed(() => !isEmpty(props.modelValue))
@@ -172,8 +169,8 @@
 			disabled: disabled.value,
 			loading: isLoading.value,
 			readonly: readonly.value,
-			'icon-before': Boolean(hasIconBefore.value),
-			'icon-after': Boolean(hasIconAfter.value),
+			'icon-before': hasIconBefore.value !== undefined,
+			'icon-after': hasIconAfter.value !== undefined,
 			valid: valid.value,
 			invalid: invalid.value,
 			dirty: isDirty.value,
@@ -429,8 +426,8 @@
 					<div class="vv-select__inner">
 						<VvIcon
 							v-if="hasIconBefore"
+							v-bind="hasIconBefore"
 							class="vv-select__icon"
-							v-bind="hasIcon"
 						/>
 						<div
 							ref="inputEl"
@@ -493,8 +490,8 @@
 						</div>
 						<VvIcon
 							v-if="hasIconAfter"
+							v-bind="hasIconAfter"
 							class="vv-select__icon vv-select__icon-after"
-							v-bind="hasIcon"
 						/>
 					</div>
 					<div v-if="$slots.after" class="vv-select__input-after">

package/src/components/VvIcon/VvIcon.vue

@@ -6,10 +6,10 @@
 
 <script setup lang="ts">
 	import { Icon, addIcon, iconExists } from '@iconify/vue'
-	import { VvIconProps } from '.'
+	import { type VvIconProps, VvIconPropsDefaults } from '.'
 
 	// props
-	const props = defineProps(VvIconProps)
+	const props = withDefaults(defineProps<VvIconProps>(), VvIconPropsDefaults)
 
 	const hasRotate = computed(() => {
 		if (typeof props.rotate === 'string') {

package/src/components/VvIcon/index.ts

@@ -1,4 +1,3 @@
-import type { PropType } from 'vue'
 import type { IconifyIconOnLoad, IconifyRenderMode } from '@iconify/vue'
 
 export enum IconPrefix {
@@ -7,65 +6,38 @@ export enum IconPrefix {
 	detailed = 'detailed',
 }
 
-export const VvIconProps = {
-	/**
-	 * Color
-	 */
-	color: String,
-	/**
-	 * Width
-	 */
-	width: {
-		type: [String, Number],
-	},
-	/**
-	 * Height
-	 */
-	height: {
-		type: [String, Number],
-	},
+export type VvIconProps = {
 	/**
 	 * Icon name
 	 * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
 	 * https://docs.iconify.design/api/providers.html#provider-in-icon-name
 	 */
-	name: {
-		type: String,
-		required: true,
-	},
+	name: string
+	color?: string
+	width?: string | number
+	height?: string | number
 	/**
-	 * By default 'vv'
 	 * If custom collection is not added with "addCollection" DS class method, this prop could not be used
 	 * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
 	 */
-	provider: {
-		type: String,
-	},
+	provider?: string
 	/**
+	 * @default 'normal'
 	 * The name of icon set.
 	 * Icon default options prefix: simple | normal | detailed
 	 */
-	prefix: {
-		type: String as PropType<`${IconPrefix}` | string>,
-		default: 'normal',
-	},
+	prefix?: IconPrefix | string
 	/**
 	 * Url remote SVG icon
 	 */
-	src: String,
-	/**
-	 * Horizontal flip
-	 */
-	horizontalFlip: Boolean,
-	/**
-	 * Vertical flip
-	 */
-	verticalFlip: Boolean,
+	src?: string
+	horizontalFlip?: boolean
+	verticalFlip?: boolean
 	/**
 	 * String alternative to "horizontalFlip" and "verticalFlip".
 	 * Example: https://docs.iconify.design/icon-components/vue/transform.html
 	 */
-	flip: String,
+	flip?: string
 	/**
 	 * Icon render mode
 	 * 'style' = 'bg' or 'mask', depending on icon content
@@ -74,30 +46,32 @@ export const VvIconProps = {
 	 * 'svg' = svg
 	 * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
 	 */
-	mode: String as PropType<`${IconifyRenderMode}`>,
+	mode?: IconifyRenderMode
 	/**
 	 * Toggles inline or block mode
 	 * Example https://docs.iconify.design/icon-components/vue/inline.html
 	 */
-	inline: Boolean,
+	inline?: boolean
 	/**
 	 * rotates icon
 	 * Example https://docs.iconify.design/icon-components/vue/transform.html
 	 */
-	rotate: [Number, String],
+	rotate?: number | string
 	/**
 	 * A callback that is called when icon data has been loaded
 	 */
-	onLoad: Function as PropType<IconifyIconOnLoad>,
+	onLoad?: IconifyIconOnLoad
 	/**
 	 * SVG icon string
 	 */
-	svg: String,
+	svg?: string
 	/**
 	 * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
 	 * @values string | string[]
 	 */
-	modifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-	},
+	modifiers?: string | string[]
+}
+
+export const VvIconPropsDefaults = {
+	prefix: IconPrefix.normal,
 }

package/src/components/VvInputFile/VvInputFile.vue

@@ -155,14 +155,17 @@
 		localModelValue.value = toReturn
 	}
 
+	const currentFileIndex = ref(0)
 	const previewSrc = computed(() => {
 		if (files.value.length === 0) {
 			return
 		}
-		if (files.value[0] instanceof File) {
-			return URL.createObjectURL(files.value[0])
+		if (files.value[currentFileIndex.value] instanceof File) {
+			return URL.createObjectURL(
+				files.value[currentFileIndex.value] as File,
+			)
 		}
-		return files.value[0].url
+		return (files.value[currentFileIndex.value] as UploadedFile).url
 	})
 
 	onBeforeUnmount(() => {
@@ -177,6 +180,18 @@
 		}
 		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()
+	}
 </script>
 
 <template>
@@ -201,7 +216,7 @@
 					:class="{
 						'absolute top-8 right-8': previewSrc,
 					}"
-					:icon="!previewSrc ? 'image' : 'edit'"
+					:icon="!previewSrc ? 'image' : isMultiple ? 'add' : 'edit'"
 					class="z-1"
 					@click.stop="onClick"
 				/>
@@ -209,7 +224,7 @@
 					<img
 						v-if="previewSrc"
 						:src="previewSrc"
-						:alt="files[0].name"
+						:alt="files[currentFileIndex].name"
 					/>
 				</picture>
 			</slot>
@@ -238,12 +253,20 @@
 				v-for="(file, index) in files"
 				:key="index"
 				class="vv-input-file__item"
+				@click.stop="currentFileIndex = index"
 			>
-				<VvIcon
-					class="vv-input-file__item-icon"
-					name="akar-icons:file"
-				/>
-				<div class="vv-input-file__item-name">{{ file.name }}</div>
+				<button
+					type="button"
+					class="vv-input-file__item-icon cursor-pointer"
+					title="Download"
+					aria-label="download-file"
+					@click.stop="onClickDownloadFile(file)"
+				>
+					<VvIcon name="download" />
+				</button>
+				<div class="vv-input-file__item-name cursor-pointer">
+					{{ file.name }}
+				</div>
 				<small class="vv-input-file__item-info">
 					{{ sizeInKiB(file.size) }} KB
 				</small>

package/src/components/VvInputText/VvInputText.vue

@@ -249,11 +249,11 @@
 	}
 
 	// 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 }
@@ -264,9 +264,8 @@
 				return { name: TYPES_ICON.DATE }
 			case INPUT_TYPES.TIME:
 				return { name: TYPES_ICON.TIME }
-			default:
-				return ''
 		}
+		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 !== undefined,
+			'icon-after': iconAfter.value !== undefined,
 			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"

package/src/components/VvSelect/VvSelect.vue

@@ -65,10 +65,7 @@
 	})
 
 	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
+	const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
 
 	// dirty
 	const isDirty = computed(() => !isEmpty(props.modelValue))
@@ -100,8 +97,8 @@
 			loading: loading.value,
 			disabled: disabled.value,
 			readonly: readonly.value,
-			'icon-before': hasIconBefore.value,
-			'icon-after': hasIconAfter.value,
+			'icon-before': hasIconBefore.value !== undefined,
+			'icon-after': hasIconAfter.value !== undefined,
 			dirty: isDirty.value,
 			focus: focused.value,
 			floating: floating.value,
@@ -174,8 +171,8 @@
 			<div class="vv-select__inner">
 				<VvIcon
 					v-if="hasIconBefore"
+					v-bind="hasIconBefore"
 					class="vv-select__icon"
-					v-bind="hasIcon"
 				/>
 				<select
 					:id="hasId"
@@ -219,8 +216,8 @@
 				</select>
 				<VvIcon
 					v-if="hasIconAfter"
+					v-bind="hasIconAfter"
 					class="vv-select__icon vv-select__icon-after"
-					v-bind="hasIcon"
 				/>
 			</div>
 			<div v-if="$slots.after" class="vv-select__input-after">

package/src/components/VvTextarea/VvTextarea.vue

@@ -52,10 +52,7 @@
 	const localModelValue = useDebouncedInput(modelValue, emit, debounce?.value)
 
 	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
+	const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
 
 	// focus
 	const { focused } = useComponentFocus(textarea, emit)
@@ -113,8 +110,8 @@
 			loading: loading.value,
 			disabled: props.disabled,
 			readonly: props.readonly,
-			'icon-before': hasIconBefore.value,
-			'icon-after': hasIconAfter.value,
+			'icon-before': hasIconBefore.value !== undefined,
+			'icon-after': hasIconAfter.value !== undefined,
 			floating: props.floating && !isEmpty(props.label),
 			dirty: isDirty.value,
 			focus: focused.value,
@@ -180,8 +177,8 @@
 			<div class="vv-textarea__inner">
 				<VvIcon
 					v-if="hasIconBefore"
+					v-bind="hasIconBefore"
 					class="vv-textarea__icon"
-					v-bind="hasIcon"
 				/>
 				<textarea
 					:id="hasId"
@@ -192,8 +189,8 @@
 				/>
 				<VvIcon
 					v-if="hasIconAfter"
+					v-bind="hasIconAfter"
 					class="vv-textarea__icon vv-textarea__icon-after"
-					v-bind="hasIcon"
 				/>
 			</div>
 			<div v-if="$slots.after" class="vv-textarea__input-after">

package/src/composables/useComponentIcon.ts

@@ -1,34 +1,35 @@
 import type { Ref } from 'vue'
+import type { VvIconProps } from '../components/VvIcon'
 import { Position, Side } from '../constants'
 
 export function useComponentIcon(
-	icon: Ref<string | object | undefined> | undefined,
-	iconPosition: Ref<string>,
+	icon?: Ref<string | VvIconProps | undefined>,
+	iconPosition?: Ref<string | undefined>,
 ) {
+	const hasIcon = computed(() => {
+		if (typeof icon?.value === 'string') {
+			return { name: icon?.value }
+		}
+		return icon?.value
+	})
 	const hasIconBefore = computed(() =>
-		Boolean(icon?.value && iconPosition.value === Position.before),
+		iconPosition?.value === Position.before ? hasIcon.value : undefined,
 	)
 	const hasIconAfter = computed(() =>
-		Boolean(icon?.value && iconPosition.value === Position.after),
+		iconPosition?.value === Position.after ? hasIcon.value : undefined,
 	)
 	const hasIconLeft = computed(() =>
-		Boolean(icon?.value && iconPosition.value === Side.left),
+		iconPosition?.value === Side.left ? hasIcon.value : undefined,
 	)
 	const hasIconRight = computed(() =>
-		Boolean(icon?.value && iconPosition.value === Side.right),
+		iconPosition?.value === Side.right ? hasIcon.value : undefined,
 	)
 	const hasIconTop = computed(() =>
-		Boolean(icon?.value && iconPosition.value === Side.top),
+		iconPosition?.value === Side.top ? hasIcon.value : undefined,
 	)
 	const hasIconBottom = computed(() =>
-		Boolean(icon?.value && iconPosition.value === Side.bottom),
+		iconPosition?.value === Side.bottom ? hasIcon.value : undefined,
 	)
-	const hasIcon = computed(() => {
-		if (typeof icon?.value === 'string') {
-			return { name: icon?.value }
-		}
-		return icon?.value
-	})
 	return {
 		hasIcon,
 		hasIconLeft,