DRY with <k-upload-dialog-preview>

getkirby · Apr 30, 2024 · d8e9611 · d8e9611
1 parent efca00c
commit d8e9611
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 125 deletions.
diff --git a/panel/src/components/Dialogs/Elements/UploadPreview.vue b/panel/src/components/Dialogs/Elements/UploadPreview.vue
@@ -0,0 +1,55 @@
+<template>
+	<a :href="url" class="k-upload-item-preview" target="_blank">
+		<k-image v-if="isPreviewable" :cover="true" :src="url" back="pattern" />
+		<k-icon-frame
+			v-else
+			:color="color"
+			:icon="icon ?? fallbackIcon"
+			back="black"
+			ratio="1/1"
+		/>
+	</a>
+</template>
+
+<script>
+/**
+ * @since 4.3.0
+ * @internal
+ */
+export default {
+	props: {
+		color: String,
+		icon: String,
+		mime: String,
+		url: String
+	},
+	computed: {
+		fallbackIcon() {
+			if (this.mime.startsWith("image/")) {
+				return "file-image";
+			}
+
+			if (this.mime.startsWith("audio/")) {
+				return "file-audio";
+			}
+
+			if (this.mime.startsWith("video/")) {
+				return "file-video";
+			}
+
+			return "file";
+		},
+		isPreviewable() {
+			return [
+				"image/jpeg",
+				"image/jpg",
+				"image/gif",
+				"image/png",
+				"image/webp",
+				"image/avif",
+				"image/svg+xml"
+			].includes(this.mime);
+		}
+	}
+};
+</script>
diff --git a/panel/src/components/Dialogs/Elements/index.js b/panel/src/components/Dialogs/Elements/index.js
@@ -6,6 +6,8 @@ import Notification from "./Notification.vue";
 import Search from "./Search.vue";
 import Text from "./Text.vue";
 
+import UploadPreview from "./UploadPreview.vue";
+
 export default {
 	install(app) {
 		app.component("k-dialog-body", Body);
@@ -15,5 +17,7 @@ export default {
 		app.component("k-dialog-notification", Notification);
 		app.component("k-dialog-search", Search);
 		app.component("k-dialog-text", Text);
+
+		app.component("k-upload-dialog-preview", UploadPreview);
 	}
 };
diff --git a/panel/src/components/Dialogs/UploadDialog.vue b/panel/src/components/Dialogs/UploadDialog.vue
@@ -8,81 +8,76 @@
 		@submit="$emit('submit')"
 	>
 		<k-dropzone @drop="$panel.upload.select($event)">
-			<template v-if="$panel.upload.files.length === 0">
-				<k-empty icon="upload" layout="cards" @click="$panel.upload.pick()">
-					{{ $t("files.empty") }}
-				</k-empty>
-			</template>
-			<template v-else>
-				<ul class="k-upload-items">
-					<li
-						v-for="file in $panel.upload.files"
-						:key="file.id"
-						:data-completed="file.completed"
-						class="k-upload-item"
-					>
-						<a :href="file.url" class="k-upload-item-preview" target="_blank">
-							<k-image-frame
-								v-if="isPreviewable(file.type)"
-								:cover="true"
-								:src="file.url"
-								back="pattern"
-							/>
-							<k-icon-frame
-								v-else
-								:icon="previewIcon(file.type)"
-								back="black"
-								color="white"
-								ratio="1/1"
-							/>
-						</a>
-						<k-input
-							:disabled="file.completed"
-							:after="'.' + file.extension"
-							:novalidate="true"
-							:required="true"
-							:value="file.name"
-							class="k-upload-item-input"
-							type="slug"
-							@input="file.name = $event"
+			<!-- No files yet -->
+			<k-empty
+				v-if="$panel.upload.files.length === 0"
+				icon="upload"
+				layout="cards"
+				@click="$panel.upload.pick()"
+			>
+				{{ $t("files.empty") }}
+			</k-empty>
+
+			<!-- Files list -->
+			<ul v-else class="k-upload-items">
+				<li
+					v-for="file in $panel.upload.files"
+					:key="file.id"
+					:data-completed="file.completed"
+					class="k-upload-item"
+				>
+					<k-upload-dialog-preview
+						:mime="file.type"
+						:url="file.url"
+						color="white"
+					/>
+
+					<k-input
+						:disabled="file.completed"
+						:after="'.' + file.extension"
+						:novalidate="true"
+						:required="true"
+						:value="file.name"
+						class="k-upload-item-input"
+						type="slug"
+						@input="file.name = $event"
+					/>
+
+					<div class="k-upload-item-body">
+						<p class="k-upload-item-meta">
+							{{ file.niceSize }}
+							<template v-if="file.progress"> - {{ file.progress }}% </template>
+						</p>
+						<p v-if="file.error" class="k-upload-item-error">
+							{{ file.error }}
+						</p>
+						<k-progress
+							v-else-if="file.progress"
+							:value="file.progress"
+							class="k-upload-item-progress"
 						/>
-						<div class="k-upload-item-body">
-							<p class="k-upload-item-meta">
-								{{ file.niceSize }}
-								<template v-if="file.progress">
-									- {{ file.progress }}%
-								</template>
-							</p>
-							<p v-if="file.error" class="k-upload-item-error">
-								{{ file.error }}
-							</p>
-							<k-progress
-								v-else-if="file.progress"
-								:value="file.progress"
-								class="k-upload-item-progress"
-							/>
-						</div>
-						<div class="k-upload-item-toggle">
-							<k-button
-								v-if="!file.completed && !file.progress"
-								icon="remove"
-								@click="$panel.upload.remove(file.id)"
-							/>
+					</div>
 
-							<div v-else-if="!file.completed">
-								<k-icon type="loader" />
-							</div>
+					<div class="k-upload-item-toggle">
+						<k-button
+							v-if="!file.completed && !file.progress"
+							icon="remove"
+							@click="$panel.upload.remove(file.id)"
+						/>
 
-							<k-button
-								v-else
-								icon="check"
-								theme="positive"
-								@click="$panel.upload.remove(file.id)"
-							/>
+						<div v-else-if="!file.completed">
+							<k-icon type="loader" />
 						</div>
-					</li>
-				</ul>
-			</template>
+
+						<k-button
+							v-else
+							icon="check"
+							theme="positive"
+							@click="$panel.upload.remove(file.id)"
+						/>
+					</div>
+				</li>
+			</ul>
 		</k-dropzone>
 	</k-dialog>
 </template>
@@ -105,34 +100,6 @@ export default {
 				};
 			}
 		}
-	},
-	methods: {
-		isPreviewable(mime) {
-			return [
-				"image/jpeg",
-				"image/jpg",
-				"image/gif",
-				"image/png",
-				"image/webp",
-				"image/avif",
-				"image/svg+xml"
-			].includes(mime);
-		},
-		previewIcon(mime) {
-			if (mime.startsWith("image/")) {
-				return "file-image";
-			}
-
-			if (mime.startsWith("audio/")) {
-				return "file-audio";
-			}
-
-			if (mime.startsWith("video/")) {
-				return "file-video";
-			}
-
-			return "file";
-		}
 	}
 };
 </script>

diff --git a/panel/src/components/Dialogs/UploadReplaceDialog.vue b/panel/src/components/Dialogs/UploadReplaceDialog.vue
@@ -8,18 +8,11 @@
 	>
 		<ul class="k-upload-items">
 			<li class="k-upload-original">
-				<k-image
-					v-if="isPreviewable(original.mime)"
-					:cover="true"
-					:src="original.url"
-					back="pattern"
-				/>
-				<k-icon-frame
-					v-else
+				<k-upload-dialog-preview
 					:color="original.image?.color ?? 'white'"
-					:icon="original.image?.icon ?? 'file'"
-					back="black"
-					ratio="1/1"
+					:icon="original.image?.icon"
+					:url="original.url"
+					:mime="original.mime"
 				/>
 			</li>
 
@@ -31,48 +24,44 @@
 				:data-completed="file.completed"
 				class="k-upload-item"
 			>
-				<a :href="file.url" class="k-upload-item-preview" target="_blank">
-					<k-image
-						v-if="isPreviewable(file.type)"
-						:cover="true"
-						:src="file.url"
-						back="pattern"
-					/>
-					<k-icon-frame
-						v-else
-						:color="original.image?.color ?? 'white'"
-						:icon="original.image?.icon ?? previewIcon(file.type)"
-						back="black"
-						ratio="1/1"
-					/>
-				</a>
+				<k-upload-dialog-preview
+					:color="original.image?.color ?? 'white'"
+					:icon="original.image?.icon"
+					:url="file.url"
+					:mime="file.type"
+				/>
+
 				<k-input
 					:value="$helper.file.name(original.filename)"
 					:disabled="true"
 					:after="'.' + file.extension"
 					class="k-upload-item-input"
 					type="text"
 				/>
+
 				<div class="k-upload-item-body">
 					<p class="k-upload-item-meta">
 						{{ file.niceSize }}
 						<template v-if="file.progress"> - {{ file.progress }}% </template>
 					</p>
 					<p class="k-upload-item-error">{{ file.error }}</p>
 				</div>
+
 				<div class="k-upload-item-progress">
 					<k-progress
 						v-if="file.progress > 0 && !file.error"
 						:value="file.progress"
 					/>
 				</div>
+
 				<div class="k-upload-item-toggle">
 					<k-button
 						v-if="file.completed"
 						icon="check"
 						theme="positive"
 						@click="$panel.upload.remove(file.id)"
 					/>
+
 					<div v-else-if="file.progress">
 						<k-icon type="loader" />
 					</div>