quasar-ui-danx 0.4.95 → 0.4.99

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
+	};
+}

package/src/composables/useCodeViewerCollapse.ts

@@ -0,0 +1,125 @@
+import { computed, Ref } from "vue";
+import { CodeFormat, UseCodeFormatReturn } from "./useCodeFormat";
+import { highlightSyntax } from "../helpers/formats/highlightSyntax";
+
+export interface UseCodeViewerCollapseOptions {
+	modelValue: Ref<object | string | null | undefined>;
+	format: Ref<CodeFormat>;
+	displayContent: Ref<string>;
+	codeFormat: UseCodeFormatReturn;
+}
+
+export interface UseCodeViewerCollapseReturn {
+	collapsedPreview: Ref<string>;
+}
+
+/**
+ * Format a value for collapsed preview display
+ */
+function formatValuePreview(val: unknown, includeQuotes = true): string {
+	if (val === null) {
+		return "null";
+	}
+	if (typeof val === "string") {
+		const truncated = val.length > 15 ? val.slice(0, 15) + "..." : val;
+		return includeQuotes ? `"${truncated}"` : truncated;
+	}
+	if (typeof val === "object") {
+		return Array.isArray(val) ? `[${val.length}]` : "{...}";
+	}
+	return String(val);
+}
+
+/**
+ * Get syntax highlighting class for a value type
+ */
+function getSyntaxClass(val: unknown): string {
+	if (val === null) return "null";
+	if (typeof val === "string") return "string";
+	if (typeof val === "number") return "number";
+	if (typeof val === "boolean") return "boolean";
+	return "punctuation";
+}
+
+/**
+ * Composable for collapsed preview logic in CodeViewer
+ */
+export function useCodeViewerCollapse(options: UseCodeViewerCollapseOptions): UseCodeViewerCollapseReturn {
+	const { modelValue, format, displayContent, codeFormat } = options;
+
+	const collapsedPreview = computed(() => {
+		const content = displayContent.value;
+		if (!content) return "<span class=\"syntax-null\">null</span>";
+
+		const maxLength = 100;
+		let preview = "";
+
+		if (format.value === "json") {
+			// For JSON, show compact inline format
+			try {
+				const parsed = typeof modelValue.value === "string"
+					? JSON.parse(modelValue.value)
+					: modelValue.value;
+
+				// Handle null at top level
+				if (parsed === null) {
+					return "<span class=\"syntax-null\">null</span>";
+				}
+
+				if (Array.isArray(parsed)) {
+					preview = `[${parsed.length} items]`;
+				} else if (typeof parsed === "object") {
+					const keys = Object.keys(parsed);
+					const keyPreviews = keys.slice(0, 3).map(k => {
+						const val = parsed[k];
+						const valStr = formatValuePreview(val);
+						return `<span class="syntax-key">${k}</span>: <span class="syntax-${getSyntaxClass(val)}">${valStr}</span>`;
+					});
+					preview = `{${keyPreviews.join(", ")}${keys.length > 3 ? ", ..." : ""}}`;
+				} else {
+					preview = highlightSyntax(String(parsed), { format: "json" });
+				}
+			} catch {
+				// Fall back to truncated content
+				preview = content.replace(/\s+/g, " ").slice(0, maxLength);
+				if (content.length > maxLength) preview += "...";
+			}
+		} else {
+			// For YAML, show key: value pairs inline
+			try {
+				const parsed = typeof modelValue.value === "string"
+					? codeFormat.parse(modelValue.value)
+					: modelValue.value;
+
+				// Handle null at top level
+				if (parsed === null) {
+					return "<span class=\"syntax-null\">null</span>";
+				}
+
+				if (Array.isArray(parsed)) {
+					preview = `[${parsed.length} items]`;
+				} else if (typeof parsed === "object") {
+					const keys = Object.keys(parsed);
+					const keyPreviews = keys.slice(0, 3).map(k => {
+						const val = (parsed as Record<string, unknown>)[k];
+						const valStr = formatValuePreview(val, false);
+						return `<span class="syntax-key">${k}</span>: <span class="syntax-${getSyntaxClass(val)}">${valStr}</span>`;
+					});
+					preview = keyPreviews.join(", ") + (keys.length > 3 ? ", ..." : "");
+				} else {
+					preview = String(parsed);
+				}
+			} catch {
+				// Fall back to truncated first line
+				const firstLine = content.split("\n")[0];
+				preview = firstLine.length > maxLength ? firstLine.slice(0, maxLength) + "..." : firstLine;
+			}
+		}
+
+		return preview;
+	});
+
+	return {
+		collapsedPreview
+	};
+}