quasar-ui-danx 0.4.95 → 0.5.0

package/src/components/Utility/Files/FileMetadataDialog.vue

@@ -0,0 +1,69 @@
+<template>
+  <InfoDialog
+    title="File Metadata"
+    :hide-done="true"
+    done-text="Close"
+    content-class="w-[80vw] h-[80vh] max-w-none"
+    @close="$emit('close')"
+  >
+    <div class="file-metadata-container h-full flex flex-col">
+      <!-- File info header -->
+      <div class="bg-sky-50 rounded-lg p-4 mb-4 flex-shrink-0">
+        <h4 class="text-lg font-semibold text-gray-900 mb-2">
+          {{ filename || 'Unnamed File' }}
+        </h4>
+        <div v-if="mimeType" class="text-sm text-gray-600">
+          Type: {{ mimeType }}
+        </div>
+      </div>
+
+      <!-- Metadata section -->
+      <div class="bg-white rounded-lg border border-gray-200 overflow-hidden flex-1 flex flex-col min-h-0">
+        <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex-shrink-0 flex items-center justify-between">
+          <h4 class="text-base font-medium text-gray-900">
+            Metadata
+          </h4>
+          <QBtn
+            v-if="showDockButton"
+            flat
+            dense
+            round
+            size="sm"
+            class="text-gray-500 hover:text-gray-700 hover:bg-gray-200"
+            @click="$emit('dock')"
+          >
+            <DockSideIcon class="w-4 h-4" />
+            <QTooltip>Dock to side</QTooltip>
+          </QBtn>
+        </div>
+        <div class="p-4 flex-1 min-h-0 flex flex-col">
+          <CodeViewer
+            :model-value="metadata"
+            :readonly="true"
+            format="yaml"
+          />
+        </div>
+      </div>
+    </div>
+  </InfoDialog>
+</template>
+
+<script setup lang="ts">
+import { FaSolidTableColumns as DockSideIcon } from "danx-icon";
+import { CodeViewer } from "../Code";
+import { InfoDialog } from "../Dialogs";
+
+withDefaults(defineProps<{
+	filename: string;
+	mimeType?: string;
+	metadata: Record<string, unknown>;
+	showDockButton?: boolean;
+}>(), {
+	showDockButton: false
+});
+
+defineEmits<{
+	close: [];
+	dock: [];
+}>();
+</script>

package/src/components/Utility/Files/FilePreview.vue

@@ -74,7 +74,7 @@
       >
         <QLinearProgress
           :key="'progress-' + isUploading ? 'uploading' : 'transcoding'"
-          :value="isUploading ? file.progress : ((transcodingStatus?.progress || 0) / 100)"
+          :value="isUploading ? (file?.progress || 0) : ((transcodingStatus?.progress || 0) / 100)"
           size="36px"
           :color="isUploading ? 'green-800' : 'blue-800'"
           :animation-speed="transcodingStatus?.estimate_ms || 3000"
@@ -107,6 +107,22 @@
     </template>
 
     <div class="absolute top-1 right-1 flex items-center flex-nowrap justify-between space-x-1 transition-all opacity-0 group-hover:opacity-100">
+      <QBtn
+        v-if="hasMetadata"
+        :size="btnSize"
+        class="dx-file-preview-metadata bg-purple-700 text-white opacity-70 hover:opacity-100 py-1 px-2 relative"
+        @click.stop="showMetadataDialog = true"
+      >
+        <div class="flex items-center flex-nowrap gap-1">
+          <MetaIcon class="w-4 h-4" />
+          <QBadge
+            class="bg-purple-900 text-purple-200"
+            :label="metadataKeyCount"
+          />
+        </div>
+        <QTooltip>View Metadata</QTooltip>
+      </QBtn>
+
       <QBtn
         v-if="hasTranscodes"
         :size="btnSize"
@@ -152,6 +168,14 @@
       </QBtn>
     </div>
 
+    <FileMetadataDialog
+      v-if="showMetadataDialog"
+      :filename="filename"
+      :mime-type="mimeType"
+      :metadata="filteredMetadata"
+      @close="showMetadataDialog = false"
+    />
+
     <FullScreenCarouselDialog
       v-if="showPreview && !disabled && previewableFiles"
       :files="previewableFiles"
@@ -163,204 +187,132 @@
 
 <script setup lang="ts">
 import { DocumentTextIcon as TextFileIcon, DownloadIcon, FilmIcon, PlayIcon } from "@heroicons/vue/outline";
-import { computed, ComputedRef, onMounted, ref, watch } from "vue";
-import { danxOptions } from "../../../config";
+import { FaSolidBarcode as MetaIcon } from "danx-icon";
+import { computed, ref, toRef } from "vue";
+import { useFilePreview } from "../../../composables/useFilePreview";
+import { useTranscodeLoader } from "../../../composables/useTranscodeLoader";
 import { download, uniqueBy } from "../../../helpers";
-import * as fileHelpers from "../../../helpers/filePreviewHelpers";
-import { getMimeType, getOptimizedUrl, isExternalLinkFile } from "../../../helpers/filePreviewHelpers";
+import { isExternalLinkFile } from "../../../helpers/filePreviewHelpers";
 import { GoogleDocsIcon, ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from "../../../svg";
 import { UploadedFile } from "../../../types";
 import { FullScreenCarouselDialog } from "../Dialogs";
-
-export interface FileTranscode {
-	status: "Complete" | "Pending" | "In Progress";
-	progress: number;
-	estimate_ms: number;
-	started_at: string;
-	completed_at: string;
-	message?: string;
-}
+import FileMetadataDialog from "./FileMetadataDialog.vue";
 
 export interface FilePreviewProps {
-	src?: string;
-	file?: UploadedFile;
-	relatedFiles?: UploadedFile[];
-	missingIcon?: any;
-	showFilename?: boolean;
-	downloadButtonClass?: string;
-	imageFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
-	downloadable?: boolean;
-	removable?: boolean;
-	disabled?: boolean;
-	square?: boolean;
-	btnSize?: "xs" | "sm" | "md" | "lg";
+  src?: string;
+  file?: UploadedFile;
+  relatedFiles?: UploadedFile[];
+  missingIcon?: any;
+  showFilename?: boolean;
+  downloadButtonClass?: string;
+  imageFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+  downloadable?: boolean;
+  removable?: boolean;
+  disabled?: boolean;
+  square?: boolean;
+  btnSize?: "xs" | "sm" | "md" | "lg";
 }
 
 const emit = defineEmits(["remove"]);
 
 const props = withDefaults(defineProps<FilePreviewProps>(), {
-	src: "",
-	file: null,
-	relatedFiles: null,
-	missingIcon: ImageIcon,
-	downloadButtonClass: "bg-blue-600 text-white",
-	imageFit: "cover",
-	downloadable: false,
-	removable: false,
-	disabled: false,
-	square: false,
-	btnSize: "sm"
+  src: "",
+  file: null,
+  relatedFiles: null,
+  missingIcon: ImageIcon,
+  downloadButtonClass: "bg-blue-600 text-white",
+  imageFit: "cover",
+  downloadable: false,
+  removable: false,
+  disabled: false,
+  square: false,
+  btnSize: "sm"
 });
 
+// Use composables for file preview logic
+const fileRef = toRef(props, "file");
+const srcRef = toRef(props, "src");
+
+const {
+  computedImage,
+  filename,
+  mimeType,
+  isVideo,
+  isPdf,
+  isExternalLink,
+  previewUrl,
+  thumbUrl,
+  isPreviewable,
+  hasMetadata,
+  metadataKeyCount,
+  filteredMetadata,
+  hasTranscodes,
+  transcodingStatus
+} = useFilePreview({ file: fileRef, src: srcRef });
 
+// Load transcodes automatically
+useTranscodeLoader({ file: fileRef });
+
+// Local state
 const showPreview = ref(false);
-const isLoadingTranscodes = ref(false);
-const computedImage: ComputedRef<UploadedFile | null> = computed(() => {
-	if (props.file) {
-		return props.file;
-	} else if (props.src) {
-		return {
-			id: props.src,
-			url: props.src,
-			type: "image/" + props.src.split(".").pop()?.toLowerCase(),
-			name: "",
-			size: 0,
-			__type: "BrowserFile"
-		};
-	}
-	return null;
-});
+const showMetadataDialog = ref(false);
+const isConfirmingRemove = ref(false);
 
-const isUploading = computed(() => !props.file || props.file?.progress !== undefined);
+// Computed
+const isUploading = computed(() => props.file && props.file?.progress !== undefined);
 const statusMessage = computed(() => isUploading.value ? "Uploading..." : transcodingStatus.value?.message);
-const hasTranscodes = computed(() => (props.file?.transcodes?.length || 0) > 0);
-const previewableFiles: ComputedRef<(UploadedFile | null)[] | null> = computed(() => {
-	return props.relatedFiles?.length > 0 ? uniqueBy([computedImage.value, ...props.relatedFiles], filesHaveSameUrl) : [computedImage.value];
+
+const previewableFiles = computed(() => {
+  return props.relatedFiles?.length > 0
+    ? uniqueBy([computedImage.value, ...props.relatedFiles], filesHaveSameUrl)
+    : [computedImage.value];
 });
 
+// Helpers
 function filesHaveSameUrl(a: UploadedFile, b: UploadedFile) {
-	return a.id === b.id ||
-		[b.url, b.optimized?.url, b.thumb?.url].includes(a.url) ||
-		[a.url, a.optimized?.url, a.thumb?.url].includes(b.url);
+  return a.id === b.id ||
+    [b.url, b.optimized?.url, b.thumb?.url].includes(a.url) ||
+    [a.url, a.optimized?.url, a.thumb?.url].includes(b.url);
 }
 
-const filename = computed(() => computedImage.value?.name || computedImage.value?.filename || "");
-const mimeType = computed(() => computedImage.value ? getMimeType(computedImage.value) : "");
-const isImage = computed(() => computedImage.value ? fileHelpers.isImage(computedImage.value) : false);
-const isVideo = computed(() => computedImage.value ? fileHelpers.isVideo(computedImage.value) : false);
-const isPdf = computed(() => computedImage.value ? fileHelpers.isPdf(computedImage.value) : false);
-const isExternalLink = computed(() => computedImage.value ? isExternalLinkFile(computedImage.value) : false);
-const previewUrl = computed(() => computedImage.value ? getOptimizedUrl(computedImage.value) : "");
-const thumbUrl = computed(() => computedImage.value?.thumb?.url || "");
-const isPreviewable = computed(() => {
-	return !!thumbUrl.value || isVideo.value || isImage.value;
-});
-
-/**
- * Resolve the active transcoding operation if there is one, otherwise return null
- */
-const transcodingStatus = computed(() => {
-	let status = null;
-	const metaTranscodes: FileTranscode[] = props.file?.meta?.transcodes || [];
-
-	for (let transcodeName of Object.keys(metaTranscodes)) {
-		const transcode = metaTranscodes[transcodeName];
-		if (!["Complete", "Timeout"].includes(transcode?.status)) {
-			return { ...transcode, message: `${transcodeName} ${transcode.status}` };
-		}
-	}
-
-	return status;
-});
-
-const isConfirmingRemove = ref(false);
 function onRemove() {
-	if (!isConfirmingRemove.value) {
-		isConfirmingRemove.value = true;
-		setTimeout(() => {
-			isConfirmingRemove.value = false;
-		}, 2000);
-	} else {
-		emit("remove");
-	}
+  if (!isConfirmingRemove.value) {
+    isConfirmingRemove.value = true;
+    setTimeout(() => {
+      isConfirmingRemove.value = false;
+    }, 2000);
+  } else {
+    emit("remove");
+  }
 }
 
 function onShowPreview() {
-	// For external links (Google Docs, etc.), open directly in new tab
-	if (computedImage.value && isExternalLinkFile(computedImage.value)) {
-		window.open(computedImage.value.url, "_blank");
-		return;
-	}
-	showPreview.value = true;
-}
-
-/**
- * Check if transcodes need to be loaded for the current file
- */
-function shouldLoadTranscodes(): boolean {
-	if (!props.file?.id) return false;
-	if (isLoadingTranscodes.value) return false;
-	if (!danxOptions.value.fileUpload?.refreshFile) return false;
-
-	// Only load if transcodes is explicitly null, undefined, or an empty array
-	const transcodes = props.file.transcodes;
-	return transcodes === null || transcodes === undefined || (Array.isArray(transcodes) && transcodes.length === 0);
+  if (computedImage.value && isExternalLinkFile(computedImage.value)) {
+    window.open(computedImage.value.url, "_blank");
+    return;
+  }
+  showPreview.value = true;
 }
-
-/**
- * Load transcodes for the current file
- */
-async function loadTranscodes() {
-	if (!shouldLoadTranscodes()) return;
-
-	isLoadingTranscodes.value = true;
-
-	try {
-		const refreshFile = danxOptions.value.fileUpload.refreshFile;
-		if (refreshFile && props.file?.id) {
-			const refreshedFile = await refreshFile(props.file.id);
-
-			// Update the file object with the loaded transcodes
-			if (refreshedFile.transcodes && props.file) {
-				props.file.transcodes = refreshedFile.transcodes;
-			}
-		}
-	} catch (error) {
-		console.error("Failed to load transcodes:", error);
-	} finally {
-		isLoadingTranscodes.value = false;
-	}
-}
-
-// Load transcodes when component mounts
-onMounted(() => {
-	loadTranscodes();
-});
-
-// Watch for file changes and reload transcodes if needed
-watch(() => props.file?.id, () => {
-	loadTranscodes();
-});
 </script>
 
 <style module="cls" lang="scss">
 .action-button {
-	position: absolute;
-	bottom: 1.5em;
-	right: 1em;
-	z-index: 1;
+  position: absolute;
+  bottom: 1.5em;
+  right: 1em;
+  z-index: 1;
 }
 
 .play-button {
-	position: absolute;
-	top: 0;
-	left: 0;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-	pointer-events: none;
-	@apply text-blue-200;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  @apply text-blue-200;
 }
 </style>

package/src/components/Utility/Files/index.ts

@@ -1,4 +1,5 @@
 export { default as CarouselHeader } from "./CarouselHeader.vue";
+export { default as FileMetadataDialog } from "./FileMetadataDialog.vue";
 export { default as FilePreview } from "./FilePreview.vue";
 export { default as FileRenderer } from "./FileRenderer.vue";
 export { default as SvgImg } from "./SvgImg.vue";

package/src/components/Utility/index.ts

@@ -1,4 +1,5 @@
 export * from "./Buttons";
+export * from "./Code";
 export * from "./Controls";
 export * from "./Dialogs";
 export * from "./Files";

package/src/composables/index.ts

@@ -1,4 +1,9 @@
+export * from "./useCodeFormat";
+export * from "./useCodeViewerCollapse";
+export * from "./useCodeViewerEditor";
 export * from "./useFileNavigation";
+export * from "./useFilePreview";
 export * from "./useKeyboardNavigation";
 export * from "./useThumbnailScroll";
+export * from "./useTranscodeLoader";
 export * from "./useVirtualCarousel";

package/src/composables/useCodeFormat.ts

@@ -0,0 +1,199 @@
+import { computed, ref, Ref } from "vue";
+import { parse as parseYAML, stringify as yamlStringify } from "yaml";
+import { fJSON, parseMarkdownJSON, parseMarkdownYAML } from "../helpers/formats/parsers";
+
+export type CodeFormat = "json" | "yaml" | "text" | "markdown";
+
+export interface UseCodeFormatOptions {
+	initialFormat?: CodeFormat;
+	initialValue?: object | string | null;
+}
+
+export interface ValidationError {
+	message: string;
+	line?: number;
+	column?: number;
+}
+
+export interface UseCodeFormatReturn {
+	// State
+	format: Ref<CodeFormat>;
+	rawContent: Ref<string>;
+
+	// Computed
+	parsedValue: Ref<object | null>;
+	formattedContent: Ref<string>;
+	isValid: Ref<boolean>;
+
+	// Methods
+	setFormat: (format: CodeFormat) => void;
+	setContent: (content: string) => void;
+	setValue: (value: object | string | null) => void;
+	parse: (content: string) => object | null;
+	formatValue: (value: object | null, targetFormat?: CodeFormat) => string;
+	validate: (content: string, targetFormat?: CodeFormat) => boolean;
+	validateWithError: (content: string, targetFormat?: CodeFormat) => ValidationError | null;
+}
+
+export function useCodeFormat(options: UseCodeFormatOptions = {}): UseCodeFormatReturn {
+	const format = ref<CodeFormat>(options.initialFormat ?? "yaml");
+	const rawContent = ref("");
+
+	// Parse any string (JSON or YAML) to object
+	function parseContent(content: string): object | null {
+		if (!content) return null;
+
+		// Try JSON first
+		const jsonResult = parseMarkdownJSON(content);
+		if (jsonResult !== false && jsonResult !== null) return jsonResult;
+
+		// Try YAML
+		const yamlResult = parseMarkdownYAML(content);
+		if (yamlResult !== false && yamlResult !== null) return yamlResult;
+
+		return null;
+	}
+
+	// Format object to string in specified format
+	function formatValueToString(value: object | string | null, targetFormat: CodeFormat = format.value): string {
+		if (!value) return "";
+
+		// Text and markdown formats - just return as-is
+		if (targetFormat === "text" || targetFormat === "markdown") {
+			return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+		}
+
+		try {
+			const obj = typeof value === "string" ? parseContent(value) : value;
+			if (!obj) return typeof value === "string" ? value : "";
+
+			if (targetFormat === "json") {
+				const formatted = fJSON(obj);
+				return typeof formatted === "string" ? formatted : JSON.stringify(obj, null, 2);
+			} else {
+				return yamlStringify(obj as object);
+			}
+		} catch {
+			return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+		}
+	}
+
+	// Validate string content for a format
+	function validateContent(content: string, targetFormat: CodeFormat = format.value): boolean {
+		if (!content) return true;
+
+		// Text and markdown formats are always valid
+		if (targetFormat === "text" || targetFormat === "markdown") return true;
+
+		try {
+			if (targetFormat === "json") {
+				JSON.parse(content);
+			} else {
+				parseYAML(content);
+			}
+			return true;
+		} catch {
+			return false;
+		}
+	}
+
+	// Validate and return error details if invalid
+	function validateContentWithError(content: string, targetFormat: CodeFormat = format.value): ValidationError | null {
+		if (!content) return null;
+
+		// Text and markdown formats are always valid
+		if (targetFormat === "text" || targetFormat === "markdown") return null;
+
+		try {
+			if (targetFormat === "json") {
+				JSON.parse(content);
+			} else {
+				parseYAML(content);
+			}
+			return null;
+		} catch (e: unknown) {
+			const error = e as Error & { linePos?: { line: number; col: number }[] };
+			let line: number | undefined;
+			let column: number | undefined;
+
+			// YAML errors from 'yaml' library have linePos
+			if (error.linePos && error.linePos[0]) {
+				line = error.linePos[0].line;
+				column = error.linePos[0].col;
+			}
+
+			// JSON parse errors - try to extract position from message
+			if (targetFormat === "json" && error.message) {
+				const posMatch = error.message.match(/position\s+(\d+)/i);
+				if (posMatch) {
+					const pos = parseInt(posMatch[1], 10);
+					// Convert position to line number
+					const lines = content.substring(0, pos).split("\n");
+					line = lines.length;
+					column = lines[lines.length - 1].length + 1;
+				}
+			}
+
+			return {
+				message: error.message || "Invalid syntax",
+				line,
+				column
+			};
+		}
+	}
+
+	// Initialize with value if provided
+	if (options.initialValue) {
+		rawContent.value = formatValueToString(options.initialValue, format.value);
+	}
+
+	// Computed: parsed object from raw content
+	const parsedValue = computed(() => parseContent(rawContent.value));
+
+	// Computed: formatted string
+	// For text and markdown formats, return rawContent directly without parsing
+	const formattedContent = computed(() => {
+		if (format.value === "text" || format.value === "markdown") {
+			return rawContent.value;
+		}
+		return formatValueToString(parsedValue.value, format.value);
+	});
+
+	// Computed: is current content valid
+	const isValid = computed(() => validateContent(rawContent.value, format.value));
+
+	// Methods
+	function setFormat(newFormat: CodeFormat) {
+		if (format.value === newFormat) return;
+
+		// Convert content to new format
+		const obj = parsedValue.value;
+		format.value = newFormat;
+		if (obj) {
+			rawContent.value = formatValueToString(obj, newFormat);
+		}
+	}
+
+	function setContent(content: string) {
+		rawContent.value = content;
+	}
+
+	function setValue(value: object | string | null) {
+		rawContent.value = formatValueToString(value, format.value);
+	}
+
+	return {
+		format,
+		rawContent,
+		parsedValue,
+		formattedContent,
+		isValid,
+		setFormat,
+		setContent,
+		setValue,
+		parse: parseContent,
+		formatValue: formatValueToString,
+		validate: validateContent,
+		validateWithError: validateContentWithError
+	};
+}