@volverjs/ui-vue 0.0.10-beta.16 → 0.0.10-beta.18

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/directives/index.ts

@@ -1,4 +1,4 @@
-import tooltip from '../directives/v-tooltip'
-import contextmenu from '../directives/v-contextmenu'
+import vTooltip from '../directives/v-tooltip'
+import vContextmenu from '../directives/v-contextmenu'
 
-export { tooltip, contextmenu }
+export { vTooltip, vContextmenu }

package/src/resolvers/unplugin.ts

@@ -2,17 +2,7 @@ import type {
 	ComponentResolver,
 	SideEffectsInfo,
 } from 'unplugin-vue-components/types'
-
-function kebabCase(str: string, options?: { condense: boolean }) {
-	if (typeof str !== 'string') throw new TypeError('expected a string')
-	return str
-		.trim()
-		.replace(/([a-z])([A-Z])/g, '$1-$2')
-		.replace(/\W/g, (m) => (/[À-ž]/.test(m) ? m : '-'))
-		.replace(/^-+|-+$/g, '')
-		.replace(/-{2,}/g, (m) => (options?.condense ? '-' : m))
-		.toLowerCase()
-}
+import { kebabCase } from 'change-case'
 
 type ImportStyle = boolean | 'css' | 'scss'
 
@@ -47,7 +37,7 @@ export interface VolverResolverOptions {
 
 const STYLE_EXCLUDE = ['vv-icon', 'vv-action']
 const VOLVER_PREFIX = 'vv'
-const DIRECTIVES = ['v-tooltip']
+const DIRECTIVES = ['v-tooltip', 'v-contextmenu']
 
 export const getStyleNames = function (kebabName: string) {
 	if (STYLE_EXCLUDE.includes(kebabName)) {
@@ -181,7 +171,7 @@ export function VolverResolver({
 				return {
 					from: '@volverjs/ui-vue/directives',
 					sideEffects: getSideEffects(kebabName, importStyle),
-					name,
+					name: `v${name}`,
 				}
 			},
 		},

package/src/utils/ObjectUtilities.ts

@@ -275,14 +275,3 @@ export function filterArray<T = Record<string, unknown>>(
 		})
 	})
 }
-
-export function kebabCase(value: string) {
-	if (value) {
-		return value
-			.match(
-				/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g,
-			)
-			?.join('-')
-			?.toLowerCase()
-	}
-}