quasar-ui-danx 0.4.94 → 0.4.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.94",
+  "version": "0.4.95",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

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

@@ -37,8 +37,12 @@
           v-else
           class="flex items-center justify-center h-full"
         >
+          <GoogleDocsIcon
+            v-if="isExternalLink"
+            class="h-3/4"
+          />
           <PdfIcon
-            v-if="isPdf"
+            v-else-if="isPdf"
             class="w-3/4"
           />
           <TextFileIcon
@@ -163,8 +167,8 @@ import { computed, ComputedRef, onMounted, ref, watch } from "vue";
 import { danxOptions } from "../../../config";
 import { download, uniqueBy } from "../../../helpers";
 import * as fileHelpers from "../../../helpers/filePreviewHelpers";
-import { getMimeType, getOptimizedUrl } from "../../../helpers/filePreviewHelpers";
-import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from "../../../svg";
+import { getMimeType, getOptimizedUrl, isExternalLinkFile } from "../../../helpers/filePreviewHelpers";
+import { GoogleDocsIcon, ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from "../../../svg";
 import { UploadedFile } from "../../../types";
 import { FullScreenCarouselDialog } from "../Dialogs";
 
@@ -245,6 +249,7 @@ const mimeType = computed(() => computedImage.value ? getMimeType(computedImage.
 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(() => {
@@ -281,6 +286,11 @@ function onRemove() {
 }
 
 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;
 }
 

package/src/helpers/filePreviewHelpers.ts

@@ -105,3 +105,34 @@ export function getThumbUrl(file: UploadedFile): string {
 export function getOptimizedUrl(file: UploadedFile): string {
 	return file.optimized?.url || file.blobUrl || file.url || "";
 }
+
+/**
+ * Check if file is an external link that should open in a new tab
+ * (e.g., Google Docs, external URLs that can't be previewed inline)
+ */
+export function isExternalLinkFile(file: UploadedFile): boolean {
+	const url = file.url || "";
+	const mime = getMimeType(file);
+
+	// Google Docs/Sheets/Slides URLs
+	if (url.includes("docs.google.com") || url.includes("drive.google.com")) {
+		return true;
+	}
+
+	// Google Doc MIME types
+	if (mime.startsWith("application/vnd.google-apps.")) {
+		return true;
+	}
+
+	return false;
+}
+
+/**
+ * Check if file can be previewed inline (image, video, text, pdf)
+ */
+export function canPreviewInline(file: UploadedFile): boolean {
+	if (isExternalLinkFile(file)) {
+		return false;
+	}
+	return isImage(file) || isVideo(file) || isText(file) || isPdf(file) || !!file.thumb?.url;
+}

package/src/helpers/objectStore.ts

@@ -25,7 +25,12 @@ export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredO
 
 	const id = newObject?.id || newObject?.name;
 	const type = newObject?.__type;
-	if (!id || !type) return shallowReactive(newObject);
+	if (!id || !type) {
+		// Still process children to store any nested TypedObjects
+		const reactiveObject = shallowReactive(newObject);
+		storeObjectChildren(newObject, recentlyStoredObjects, reactiveObject);
+		return reactiveObject;
+	}
 
 	if (!newObject.__id) {
 		newObject.__id = uid();
@@ -88,7 +93,7 @@ function storeObjectChildren<T extends TypedObject>(object: T, recentlyStoredObj
 	applyToObject = applyToObject || object;
 	for (const key of Object.keys(object)) {
 		const value = object[key];
-		if (Array.isArray(value) && value.length > 0) {
+		if (Array.isArray(value)) {
 			for (const index in value) {
 				if (value[index] && typeof value[index] === "object") {
 					if (!applyToObject[key]) {
@@ -101,6 +106,9 @@ function storeObjectChildren<T extends TypedObject>(object: T, recentlyStoredObj
 		} else if (value?.__type) {
 			// @ts-expect-error __type is guaranteed to be set in this case
 			applyToObject[key] = storeObject(value as TypedObject, recentlyStoredObjects);
+		} else if (value && typeof value === "object") {
+			// Handle plain objects/dictionaries - recurse to find nested TypedObjects at any depth
+			storeObjectChildren(value, recentlyStoredObjects, applyToObject[key]);
 		}
 	}
 }

package/src/svg/GoogleDocsIcon.vue

@@ -0,0 +1,88 @@
+<template>
+  <svg
+    viewBox="0 0 47 65"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <defs>
+      <linearGradient
+        id="gdoc-gradient"
+        x1="50%"
+        y1="8.59%"
+        x2="50%"
+        y2="100%"
+      >
+        <stop
+          stop-color="#1A237E"
+          stop-opacity="0.2"
+          offset="0%"
+        />
+        <stop
+          stop-color="#1A237E"
+          stop-opacity="0.02"
+          offset="100%"
+        />
+      </linearGradient>
+      <radialGradient
+        id="gdoc-radial"
+        cx="3.17%"
+        cy="2.72%"
+        r="161.25%"
+      >
+        <stop
+          stop-color="#FFFFFF"
+          stop-opacity="0.1"
+          offset="0%"
+        />
+        <stop
+          stop-color="#FFFFFF"
+          stop-opacity="0"
+          offset="100%"
+        />
+      </radialGradient>
+    </defs>
+    <!-- Main document shape -->
+    <path
+      d="M29.375,0 L4.406,0 C1.983,0 0,1.994 0,4.432 L0,60.568 C0,63.006 1.983,65 4.406,65 L42.594,65 C45.017,65 47,63.006 47,60.568 L47,17.727 L36.719,10.341 L29.375,0 Z"
+      fill="#4285F4"
+    />
+    <!-- Corner fold shadow -->
+    <polygon
+      fill="url(#gdoc-gradient)"
+      points="30.664 16.431 47 32.858 47 17.727"
+    />
+    <!-- Text lines -->
+    <path
+      d="M11.75,47.273 L35.25,47.273 L35.25,44.318 L11.75,44.318 L11.75,47.273 Z M11.75,53.182 L29.375,53.182 L29.375,50.227 L11.75,50.227 L11.75,53.182 Z M11.75,32.5 L11.75,35.455 L35.25,35.455 L35.25,32.5 L11.75,32.5 Z M11.75,41.364 L35.25,41.364 L35.25,38.409 L11.75,38.409 L11.75,41.364 Z"
+      fill="#F1F1F1"
+    />
+    <!-- Corner fold -->
+    <path
+      d="M29.375,0 L29.375,13.295 C29.375,15.744 31.347,17.727 33.781,17.727 L47,17.727 L29.375,0 Z"
+      fill="#A1C2FA"
+    />
+    <!-- Top highlight -->
+    <path
+      d="M4.406,0 C1.983,0 0,1.994 0,4.432 L0,4.801 C0,2.364 1.983,0.369 4.406,0.369 L29.375,0.369 L29.375,0 L4.406,0 Z"
+      fill="#FFFFFF"
+      fill-opacity="0.2"
+    />
+    <!-- Bottom shadow -->
+    <path
+      d="M42.594,64.631 L4.406,64.631 C1.983,64.631 0,62.636 0,60.199 L0,60.568 C0,63.006 1.983,65 4.406,65 L42.594,65 C45.017,65 47,63.006 47,60.568 L47,60.199 C47,62.636 45.017,64.631 42.594,64.631 Z"
+      fill="#1A237E"
+      fill-opacity="0.2"
+    />
+    <!-- Fold edge shadow -->
+    <path
+      d="M33.781,17.727 C31.347,17.727 29.375,15.744 29.375,13.295 L29.375,13.665 C29.375,16.113 31.347,18.097 33.781,18.097 L47,18.097 L47,17.727 L33.781,17.727 Z"
+      fill="#1A237E"
+      fill-opacity="0.1"
+    />
+    <!-- Overlay gradient -->
+    <path
+      d="M29.375,0 L4.406,0 C1.983,0 0,1.994 0,4.432 L0,60.568 C0,63.006 1.983,65 4.406,65 L42.594,65 C45.017,65 47,63.006 47,60.568 L47,17.727 L29.375,0 Z"
+      fill="url(#gdoc-radial)"
+    />
+  </svg>
+</template>

package/src/svg/index.ts

@@ -2,6 +2,7 @@ export { default as CaretDownIcon } from "./CaretDownIcon.svg";
 export { default as DragHandleDotsIcon } from "./DragHandleDotsIcon.svg";
 export { default as DragHandleIcon } from "./DragHandleIcon.svg";
 export { default as FilterIcon } from "./FilterIcon.svg";
+export { default as GoogleDocsIcon } from "./GoogleDocsIcon.vue";
 export { default as ImageIcon } from "./ImageIcon.svg";
 export { default as PdfIcon } from "./PdfIcon.svg";
 export { default as PercentIcon } from "./PercentIcon.svg";