From 225f006aa0d470022bcab12906f4c32d1e422e99 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Thu, 25 Jul 2024 19:23:55 +0200
Subject: [PATCH] Refactor Vue components for file preview

---
 .../Views/Files/FileDefaultPreview.vue        |  56 ++++
 .../Views/Files/FileFocusButton.vue           |  36 ---
 .../Views/Files/FileImagePreview.vue          | 147 ++++++++++
 .../components/Views/Files/FilePreview.vue    | 250 +-----------------
 .../Views/Files/FilePreviewDetails.vue        |  68 +++++
 .../Views/Files/FilePreviewThumb.vue          |  61 +++++
 panel/src/components/Views/Files/FileView.vue |   2 +-
 panel/src/components/Views/Files/index.js     |  14 +-
 8 files changed, 356 insertions(+), 278 deletions(-)
 create mode 100644 panel/src/components/Views/Files/FileDefaultPreview.vue
 delete mode 100644 panel/src/components/Views/Files/FileFocusButton.vue
 create mode 100644 panel/src/components/Views/Files/FileImagePreview.vue
 create mode 100644 panel/src/components/Views/Files/FilePreviewDetails.vue
 create mode 100644 panel/src/components/Views/Files/FilePreviewThumb.vue

diff --git a/panel/src/components/Views/Files/FileDefaultPreview.vue b/panel/src/components/Views/Files/FileDefaultPreview.vue
new file mode 100644
index 0000000000..d12f0177a2
--- /dev/null
+++ b/panel/src/components/Views/Files/FileDefaultPreview.vue
@@ -0,0 +1,56 @@
+<template>
+	<div class="k-file-default-preview">
+		<k-file-preview-thumb>
+			<k-icon
+				:color="$helper.color(image.color)"
+				:type="image.icon"
+				class="k-item-icon"
+			/>
+		</k-file-preview-thumb>
+
+		<k-file-preview-details :details="details" />
+	</div>
+</template>
+
+<script>
+/**
+ * General file view preview for files
+ * @since 5.0.0
+ */
+export default {
+	props: {
+		details: {
+			default: () => [],
+			type: Array
+		},
+		image: {
+			default: () => ({}),
+			type: Object
+		}
+	}
+};
+</script>
+
+<style>
+.k-file-default-preview .k-file-preview-thumb > .k-icon {
+	--icon-size: 3rem;
+}
+
+@container (min-width: 36rem) {
+	.k-file-default-preview {
+		grid-template-columns: 50% auto;
+	}
+	.k-file-default-preview-thumb-column {
+		aspect-ratio: auto;
+	}
+}
+
+@container (min-width: 65rem) {
+	.k-file-default-preview {
+		grid-template-columns: 33.333% auto;
+	}
+	.k-file-default-preview-thumb-column {
+		aspect-ratio: 1/1;
+	}
+}
+</style>
diff --git a/panel/src/components/Views/Files/FileFocusButton.vue b/panel/src/components/Views/Files/FileFocusButton.vue
deleted file mode 100644
index 1d459a2c07..0000000000
--- a/panel/src/components/Views/Files/FileFocusButton.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-	<k-button
-		:icon="focus ? 'cancel-small' : 'preview'"
-		:title="focus ? $t('file.focus.reset') : undefined"
-		size="xs"
-		variant="filled"
-		@click="focus ? reset() : set()"
-	>
-		<template v-if="focus">{{ focus.x }}% {{ focus.y }}%</template>
-		<template v-else>{{ $t("file.focus.placeholder") }}</template>
-	</k-button>
-</template>
-
-<script>
-/**
- * @since 4.0.0
- * @internal
- */
-export default {
-	props: {
-		focus: Object
-	},
-	emits: ["set"],
-	methods: {
-		set() {
-			this.$emit("set", {
-				x: 50,
-				y: 50
-			});
-		},
-		reset() {
-			this.$emit("set", undefined);
-		}
-	}
-};
-</script>
diff --git a/panel/src/components/Views/Files/FileImagePreview.vue b/panel/src/components/Views/Files/FileImagePreview.vue
new file mode 100644
index 0000000000..b168982a12
--- /dev/null
+++ b/panel/src/components/Views/Files/FileImagePreview.vue
@@ -0,0 +1,147 @@
+<template>
+	<div
+		:data-has-focus="hasFocus"
+		class="k-file-default-preview k-file-image-preview"
+	>
+		<k-file-preview-thumb :options="options">
+			<k-coords-input
+				:disabled="!focusable"
+				:value="focus"
+				@input="setFocus($event)"
+			>
+				<img v-bind="image" @dragstart.prevent />
+			</k-coords-input>
+		</k-file-preview-thumb>
+
+		<k-file-preview-details :details="details">
+			<div v-if="image.src" class="k-file-image-preview-focus">
+				<dt>{{ $t("file.focus.title") }}</dt>
+				<dd>
+					<k-button
+						v-if="focusable"
+						ref="focus"
+						:icon="focus ? 'cancel-small' : 'preview'"
+						:title="focus ? $t('file.focus.reset') : undefined"
+						size="xs"
+						variant="filled"
+						@click="focus ? setFocus(undefined) : setFocus({ x: 50, y: 50 })"
+					>
+						<template v-if="hasFocus">{{ focus.x }}% {{ focus.y }}%</template>
+						<template v-else>{{ $t("file.focus.placeholder") }}</template>
+					</k-button>
+					<template v-else-if="hasFocus">
+						{{ focus.x }}% {{ focus.y }}%
+					</template>
+					<template v-else>–</template>
+				</dd>
+			</div>
+		</k-file-preview-details>
+	</div>
+</template>
+
+<script>
+/**
+ * File view preview for image files
+ * @since 5.0.0
+ */
+export default {
+	props: {
+		details: {
+			default: () => [],
+			type: Array
+		},
+		focusable: Boolean,
+		image: {
+			default: () => ({}),
+			type: Object
+		},
+		url: String
+	},
+	emits: ["focus"],
+	computed: {
+		focus() {
+			const focus = this.$panel.content.values["focus"];
+
+			if (!focus) {
+				return;
+			}
+
+			const [x, y] = focus.replaceAll("%", "").split(" ");
+
+			return { x: parseFloat(x), y: parseFloat(y) };
+		},
+		hasFocus() {
+			return Boolean(this.focus);
+		},
+		options() {
+			return [
+				{
+					icon: "open",
+					text: this.$t("open"),
+					link: this.url,
+					target: "_blank"
+				},
+				{
+					icon: "cancel",
+					text: this.$t("file.focus.reset"),
+					click: () => this.setFocus(undefined),
+					when: this.focusable && this.hasFocus
+				},
+				{
+					icon: "preview",
+					text: this.$t("file.focus.placeholder"),
+					click: () => this.setFocus({ x: 50, y: 50 }),
+					when: this.focusable && !this.hasFocus
+				}
+			];
+		}
+	},
+	methods: {
+		setFocus(focus) {
+			if (!focus) {
+				focus = null;
+			} else if (this.$helper.object.isObject(focus) === true) {
+				focus = `${focus.x.toFixed(1)}% ${focus.y.toFixed(1)}%`;
+			}
+
+			this.$panel.content.set({ focus });
+		}
+	}
+};
+</script>
+
+<style>
+.k-file-image-preview .k-coords-input {
+	--opacity-disabled: 1;
+	--range-thumb-color: hsl(216 60% 60% / 0.75);
+	--range-thumb-size: 1.25rem;
+	--range-thumb-shadow: none;
+	cursor: crosshair;
+}
+.k-file-image-preview .k-coords-input-thumb::after {
+	--size: 0.4rem;
+	--pos: calc(50% - (var(--size) / 2));
+
+	position: absolute;
+	top: var(--pos);
+	inset-inline-start: var(--pos);
+	width: var(--size);
+	height: var(--size);
+	content: "";
+	background: white;
+	border-radius: 50%;
+}
+.k-file-image-preview:not([data-has-focus="true"]) .k-coords-input-thumb {
+	display: none;
+}
+
+.k-file-image-preview-focus dd {
+	display: flex;
+	align-items: center;
+}
+.k-file-image-preview-focus .k-button {
+	--button-color-back: var(--color-gray-800);
+	--button-padding: var(--spacing-2);
+	--button-color-back: var(--color-gray-800);
+}
+</style>
diff --git a/panel/src/components/Views/Files/FilePreview.vue b/panel/src/components/Views/Files/FilePreview.vue
index 1c8ea6203a..18d01a13d7 100644
--- a/panel/src/components/Views/Files/FilePreview.vue
+++ b/panel/src/components/Views/Files/FilePreview.vue
@@ -1,134 +1,24 @@
 <template>
-	<div class="k-file-preview" :data-has-focus="Boolean(focus)">
-		<!-- Thumb -->
-		<div class="k-file-preview-thumb-column">
-			<div class="k-file-preview-thumb">
-				<!-- Image with focus picker -->
-				<template v-if="image.src">
-					<k-coords-input
-						:disabled="!focusable"
-						:value="focus"
-						@input="setFocus($event)"
-					>
-						<img v-bind="image" @dragstart.prevent />
-					</k-coords-input>
-
-					<k-button
-						icon="dots"
-						size="xs"
-						style="color: var(--color-gray-500)"
-						@click="$refs.dropdown.toggle()"
-					/>
-					<k-dropdown-content ref="dropdown" :options="options" theme="light" />
-				</template>
-
-				<!-- Icon -->
-				<k-icon
-					v-else
-					:color="$helper.color(image.color)"
-					:type="image.icon"
-					class="k-item-icon"
-				/>
-			</div>
-		</div>
-
-		<!-- Details -->
-		<div class="k-file-preview-details">
-			<dl>
-				<div v-for="detail in details" :key="detail.title">
-					<dt>{{ detail.title }}</dt>
-					<dd>
-						<k-link
-							v-if="detail.link"
-							:to="detail.link"
-							tabindex="-1"
-							target="_blank"
-						>
-							/{{ detail.text }}
-						</k-link>
-						<template v-else>
-							{{ detail.text }}
-						</template>
-					</dd>
-				</div>
-
-				<div v-if="image.src" class="k-file-preview-focus-info">
-					<dt>{{ $t("file.focus.title") }}</dt>
-					<dd>
-						<k-file-focus-button
-							v-if="focusable"
-							ref="focus"
-							:focus="focus"
-							@set="setFocus"
-						/>
-						<template v-else-if="focus">
-							{{ focus.x }}% {{ focus.y }}%
-						</template>
-						<template v-else>–</template>
-					</dd>
-				</div>
-			</dl>
-		</div>
-	</div>
+	<component :is="preview" v-bind="props" class="k-file-preview" />
 </template>
 
 <script>
+/**
+ * Wrapper for file view previews
+ * @since 5.0.0
+ */
 export default {
 	props: {
-		details: {
-			default: () => [],
-			type: Array
-		},
-		focusable: Boolean,
-		image: {
-			default: () => ({}),
-			type: Object
-		},
-		url: String
+		component: String,
+		props: Object
 	},
-	emits: ["focus"],
 	computed: {
-		focus() {
-			const focus = this.$panel.content.values["focus"];
-
-			if (!focus) {
-				return;
+		preview() {
+			if (this.$helper.isComponent(this.component)) {
+				return this.component;
 			}
 
-			const [x, y] = focus.replaceAll("%", "").split(" ");
-
-			return { x: parseFloat(x), y: parseFloat(y) };
-		},
-		options() {
-			return [
-				{
-					icon: "open",
-					text: this.$t("open"),
-					link: this.url,
-					target: "_blank"
-				},
-				{
-					icon: "cancel",
-					text: this.$t("file.focus.reset"),
-					click: () => this.$refs.focus.reset(),
-					when: this.focusable && this.focus
-				},
-				{
-					icon: "preview",
-					text: this.$t("file.focus.placeholder"),
-					click: () => this.$refs.focus.set(),
-					when: this.focusable && !this.focus
-				}
-			];
-		}
-	},
-	methods: {
-		setFocus(focus) {
-			if (this.$helper.object.isObject(focus) === true) {
-				focus = `${focus.x.toFixed(1)}% ${focus.y.toFixed(1)}%`;
-			}
-
-			this.$panel.content.set({ focus });
+			return "k-file-default-preview";
 		}
 	}
 };
@@ -152,122 +42,4 @@ export default {
 	margin-bottom: var(--spacing-12);
 	overflow: hidden;
 }
-
-/* Thumb */
-.k-file-preview-thumb-column {
-	background: var(--pattern);
-	aspect-ratio: 1/1;
-}
-.k-file-preview-thumb {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-	padding: var(--spacing-12);
-	container-type: size;
-}
-
-.k-file-preview-thumb img {
-	width: auto;
-	max-width: 100cqw;
-	max-height: 100cqh;
-}
-.k-file-preview-thumb > .k-icon {
-	--icon-size: 3rem;
-}
-.k-file-preview-thumb > .k-button {
-	position: absolute;
-	top: var(--spacing-2);
-	inset-inline-start: var(--spacing-2);
-}
-.k-file-preview .k-coords-input {
-	--opacity-disabled: 1;
-	--range-thumb-color: hsl(216 60% 60% / 0.75);
-	--range-thumb-size: 1.25rem;
-	--range-thumb-shadow: none;
-	cursor: crosshair;
-}
-.k-file-preview .k-coords-input-thumb::after {
-	--size: 0.4rem;
-	--pos: calc(50% - (var(--size) / 2));
-
-	position: absolute;
-	top: var(--pos);
-	inset-inline-start: var(--pos);
-	width: var(--size);
-	height: var(--size);
-	content: "";
-	background: white;
-	border-radius: 50%;
-}
-.k-file-preview:not([data-has-focus="true"]) .k-coords-input-thumb {
-	display: none;
-}
-
-/* Details */
-.k-file-preview-details {
-	display: grid;
-}
-.k-file-preview-details dl {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
-	grid-gap: var(--spacing-6) var(--spacing-12);
-	align-self: center;
-	padding: var(--spacing-6);
-	line-height: 1.5em;
-	padding: var(--spacing-6);
-}
-.k-file-preview-details dt {
-	font-size: var(--text-sm);
-	font-weight: 500;
-	font-weight: var(--font-semi);
-	color: var(--color-gray-500);
-	margin-bottom: var(--spacing-1);
-}
-.k-file-preview-details :where(dd, a) {
-	font-size: var(--text-xs);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	color: var(--file-preview-text);
-	font-size: var(--text-sm);
-}
-.k-file-preview-focus-info dd {
-	display: flex;
-	align-items: center;
-}
-
-.k-file-preview-focus-info .k-button {
-	--button-color-back: var(--color-gray-800);
-	--button-padding: var(--spacing-2);
-}
-.k-file-preview[data-has-focus="true"] .k-file-preview-focus-info .k-button {
-	flex-direction: row-reverse;
-}
-.k-panel[data-theme="dark"] .k-file-preview-focus-info .k-button {
-	--button-color-back: var(--color-gray-400);
-}
-
-@container (min-width: 36rem) {
-	.k-file-preview {
-		grid-template-columns: 50% auto;
-	}
-	.k-file-preview-thumb-column {
-		aspect-ratio: auto;
-	}
-}
-
-@container (min-width: 65rem) {
-	.k-file-preview {
-		grid-template-columns: 33.333% auto;
-	}
-	.k-file-preview-thumb-column {
-		aspect-ratio: 1/1;
-	}
-}
-@container (min-width: 90rem) {
-	.k-file-preview-layout {
-		grid-template-columns: 25% auto;
-	}
-}
 </style>
diff --git a/panel/src/components/Views/Files/FilePreviewDetails.vue b/panel/src/components/Views/Files/FilePreviewDetails.vue
new file mode 100644
index 0000000000..9dbff0ba89
--- /dev/null
+++ b/panel/src/components/Views/Files/FilePreviewDetails.vue
@@ -0,0 +1,68 @@
+<template>
+	<div class="k-file-preview-details">
+		<dl>
+			<div v-for="detail in details" :key="detail.title">
+				<dt>{{ detail.title }}</dt>
+				<dd>
+					<k-link
+						v-if="detail.link"
+						:to="detail.link"
+						tabindex="-1"
+						target="_blank"
+					>
+						{{ detail.text }}
+					</k-link>
+					<template v-else>
+						{{ detail.text }}
+					</template>
+				</dd>
+			</div>
+
+			<slot />
+		</dl>
+	</div>
+</template>
+
+<script>
+/**
+ * @since 5.0.0
+ */
+export default {
+	props: {
+		details: {
+			default: () => [],
+			type: Array
+		}
+	}
+};
+</script>
+
+<style>
+.k-file-preview-details {
+	display: grid;
+}
+.k-file-preview-details dl {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+	grid-gap: var(--spacing-6) var(--spacing-12);
+	align-self: center;
+	padding: var(--spacing-6);
+	line-height: 1.5em;
+	padding: var(--spacing-6);
+}
+.k-file-preview-details dt {
+	font-size: var(--text-sm);
+	font-weight: 500;
+	font-weight: var(--font-semi);
+	color: var(--color-gray-500);
+	margin-bottom: var(--spacing-1);
+}
+.k-file-preview-details :where(dd, a) {
+	font-size: var(--text-xs);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: var(--file-preview-text);
+	font-size: var(--text-sm);
+}
+</style>
diff --git a/panel/src/components/Views/Files/FilePreviewThumb.vue b/panel/src/components/Views/Files/FilePreviewThumb.vue
new file mode 100644
index 0000000000..ed1d453b53
--- /dev/null
+++ b/panel/src/components/Views/Files/FilePreviewThumb.vue
@@ -0,0 +1,61 @@
+<template>
+	<div class="k-file-preview-thumb-column">
+		<div class="k-file-preview-thumb">
+			<slot />
+
+			<template v-if="options.length">
+				<k-button
+					icon="dots"
+					size="xs"
+					style="color: var(--color-gray-500)"
+					@click="$refs.dropdown.toggle()"
+				/>
+				<k-dropdown-content
+					ref="dropdown"
+					:options="options"
+					theme="light"
+					@action="$emit('action', $event)"
+				/>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script>
+/**
+ * @since 5.0.0
+ */
+export default {
+	props: {
+		options: {
+			default: () => [],
+			type: Array
+		}
+	}
+};
+</script>
+
+<style>
+.k-file-preview-thumb-column {
+	aspect-ratio: 1/1;
+	background: var(--pattern);
+}
+.k-file-preview-thumb {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	padding: var(--spacing-10);
+	container-type: size;
+}
+.k-file-preview-thumb :where(img, audio, video) {
+	width: auto;
+	max-width: 100cqw;
+	max-height: 100cqh;
+}
+.k-file-preview-thumb > .k-button {
+	position: absolute;
+	top: var(--spacing-2);
+	inset-inline-start: var(--spacing-2);
+}
+</style>
diff --git a/panel/src/components/Views/Files/FileView.vue b/panel/src/components/Views/Files/FileView.vue
index 0c5280d6f5..504bed2857 100644
--- a/panel/src/components/Views/Files/FileView.vue
+++ b/panel/src/components/Views/Files/FileView.vue
@@ -23,7 +23,7 @@
 			</template>
 		</k-header>
 
-		<k-file-preview v-bind="preview.props" />
+		<k-file-preview v-bind="preview" />
 
 		<k-model-tabs :tab="tab.name" :tabs="tabs" />
 
diff --git a/panel/src/components/Views/Files/index.js b/panel/src/components/Views/Files/index.js
index 4455c8f31b..88b62050fa 100644
--- a/panel/src/components/Views/Files/index.js
+++ b/panel/src/components/Views/Files/index.js
@@ -1,11 +1,21 @@
 import FileView from "./FileView.vue";
-import FileFocusButton from "./FileFocusButton.vue";
+
 import FilePreview from "./FilePreview.vue";
+import FilePreviewDetails from "./FilePreviewDetails.vue";
+import FilePreviewThumb from "./FilePreviewThumb.vue";
+
+import FileDefaultPreview from "./FileDefaultPreview.vue";
+import FileImagePreview from "./FileImagePreview.vue";
 
 export default {
 	install(app) {
 		app.component("k-file-view", FileView);
+
 		app.component("k-file-preview", FilePreview);
-		app.component("k-file-focus-button", FileFocusButton);
+		app.component("k-file-preview-details", FilePreviewDetails);
+		app.component("k-file-preview-thumb", FilePreviewThumb);
+
+		app.component("k-file-default-preview", FileDefaultPreview);
+		app.component("k-file-image-preview", FileImagePreview);
 	}
 };