Refactor Vue components for file preview

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>

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>