quasar-ui-danx 0.5.2 → 0.5.3

package/package.json

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

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

@@ -179,7 +179,7 @@
     <FullScreenCarouselDialog
       v-if="showPreview && !disabled && previewableFiles"
       :files="previewableFiles"
-      :default-slide="previewableFiles[0]?.id || ''"
+      :default-slide="computedImage?.id || ''"
       @close="showPreview = false"
     />
   </div>
@@ -264,7 +264,7 @@ const statusMessage = computed(() => isUploading.value ? "Uploading..." : transc
 
 const previewableFiles = computed(() => {
   return props.relatedFiles?.length > 0
-    ? uniqueBy([computedImage.value, ...props.relatedFiles], filesHaveSameUrl)
+    ? uniqueBy([...props.relatedFiles, computedImage.value], filesHaveSameUrl)
     : [computedImage.value];
 });
 

package/src/composables/useCodeViewerCollapse.ts

@@ -54,6 +54,13 @@ export function useCodeViewerCollapse(options: UseCodeViewerCollapseOptions): Us
 		const maxLength = 100;
 		let preview = "";
 
+		// For text and markdown formats, just show the first line - no parsing
+		if (format.value === "text" || format.value === "markdown") {
+			const firstLine = content.split("\n")[0].trim();
+			preview = firstLine.length > maxLength ? firstLine.slice(0, maxLength) + "..." : firstLine;
+			return preview;
+		}
+
 		if (format.value === "json") {
 			// For JSON, show compact inline format
 			try {

package/src/composables/useFileNavigation.ts

@@ -10,7 +10,11 @@ export function useFileNavigation(initialFile: Ref<UploadedFile | null>, initial
 	const currentFile = ref<UploadedFile | null>(initialFile.value);
 	const relatedFiles = ref<UploadedFile[]>(initialRelatedFiles.value);
 	const parentStack = ref<FileNavigationParent[]>([]);
-	const currentIndex = ref(0);
+	const currentIndex = ref(
+		initialFile.value
+			? Math.max(0, initialRelatedFiles.value.findIndex(f => f.id === initialFile.value!.id))
+			: 0
+	);
 
 	// Computed properties
 	const hasParent = computed(() => parentStack.value.length > 0);

package/src/helpers/formats/markdown/htmlToMarkdown/index.ts

@@ -41,6 +41,19 @@ function processInlineContent(element: Element): string {
 		} else if (child.nodeType === Node.ELEMENT_NODE) {
 			const el = child as Element;
 			const tagName = el.tagName.toLowerCase();
+
+			// Handle color-preview spans - skip the swatch, return only the hex code text
+			if (tagName === "span" && el.classList.contains("color-preview")) {
+				// Get text content directly, skipping the color-swatch span
+				parts.push(el.textContent || "");
+				continue;
+			}
+
+			// Skip color-swatch spans entirely (they're purely decorative)
+			if (tagName === "span" && el.classList.contains("color-swatch")) {
+				continue;
+			}
+
 			const content = processInlineContent(el);
 
 			// Skip empty formatting elements
@@ -378,10 +391,22 @@ function processNode(node: Node): string {
 					break;
 				}
 
-				// Spans - just process children
-				case "span":
-					parts.push(processNode(element));
+				// Spans - handle special cases first
+				case "span": {
+					// Color preview: return only the hex color text
+					if (element.classList.contains("color-preview")) {
+						parts.push(element.textContent || "");
+					}
+					// Color swatch: skip entirely (purely decorative)
+					else if (element.classList.contains("color-swatch")) {
+						// Skip - don't output anything
+					}
+					// Default: process children
+					else {
+						parts.push(processNode(element));
+					}
 					break;
+				}
 
 				// Tables
 				case "table":

package/src/helpers/formats/markdown/parseInline.ts

@@ -28,13 +28,26 @@ export function parseInline(text: string, sanitize: boolean = true): string {
 	// 2. HARD LINE BREAKS - Two trailing spaces + newline becomes <br />
 	result = result.replace(/ {2,}\n/g, "<br />\n");
 
-	// 3. AUTOLINKS - Must be before regular link parsing
+	// 3. HEX COLOR PREVIEW - Display color swatch before hex color codes
+	// Match 6-digit hex colors first (more specific), then 3-digit
+	// Use word boundary to avoid matching inside URLs or other contexts
+	// The pattern must NOT match 4, 5, 7+ digit hex codes
+	result = result.replace(
+		/(?<![&\w])#([0-9a-fA-F]{6})(?![0-9a-fA-F])/g,
+		'<span class="color-preview"><span class="color-swatch" style="background-color: #$1"></span>#$1</span>'
+	);
+	result = result.replace(
+		/(?<![&\w])#([0-9a-fA-F]{3})(?![0-9a-fA-F])/g,
+		'<span class="color-preview"><span class="color-swatch" style="background-color: #$1"></span>#$1</span>'
+	);
+
+	// 4. AUTOLINKS - Must be before regular link parsing
 	// URL autolinks: <https://example.com>
 	result = result.replace(/&lt;(https?:\/\/[^&]+)&gt;/g, '<a href="$1">$1</a>');
 	// Email autolinks: <user@example.com>
 	result = result.replace(/&lt;([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})&gt;/g, '<a href="mailto:$1">$1</a>');
 
-	// 4. FOOTNOTE REFERENCES: [^id]
+	// 5. FOOTNOTE REFERENCES: [^id]
 	// Must be before regular link/image parsing to avoid conflicts
 	result = result.replace(/\[\^([^\]]+)\]/g, (match, fnId) => {
 		const fn = currentFootnotes[fnId];
@@ -44,19 +57,19 @@ export function parseInline(text: string, sanitize: boolean = true): string {
 		return match; // Keep original if footnote not defined
 	});
 
-	// 5. IMAGES: ![alt](url) - must be before links
+	// 6. IMAGES: ![alt](url) - must be before links
 	result = result.replace(
 		/!\[([^\]]*)\]\(([^)]+)\)/g,
 		'<img src="$2" alt="$1" />'
 	);
 
-	// 6. INLINE LINKS: [text](url)
+	// 7. INLINE LINKS: [text](url)
 	result = result.replace(
 		/\[([^\]]+)\]\(([^)]+)\)/g,
 		'<a href="$2">$1</a>'
 	);
 
-	// 7. REFERENCE-STYLE LINKS - Process after regular links
+	// 8. REFERENCE-STYLE LINKS - Process after regular links
 	// Full reference: [text][ref-id]
 	result = result.replace(/\[([^\]]+)\]\[([^\]]+)\]/g, (match, text, refId) => {
 		const ref = currentLinkRefs[refId.toLowerCase()];
@@ -88,30 +101,30 @@ export function parseInline(text: string, sanitize: boolean = true): string {
 		return match;
 	});
 
-	// 8. INLINE CODE: `code`
+	// 9. INLINE CODE: `code`
 	result = result.replace(/`([^`]+)`/g, "<code>$1</code>");
 
-	// 9. STRIKETHROUGH: ~~text~~ - Must be before subscript (single tilde)
+	// 10. STRIKETHROUGH: ~~text~~ - Must be before subscript (single tilde)
 	result = result.replace(/~~([^~]+)~~/g, "<del>$1</del>");
 
-	// 10. HIGHLIGHT: ==text==
+	// 11. HIGHLIGHT: ==text==
 	result = result.replace(/==([^=]+)==/g, "<mark>$1</mark>");
 
-	// 11. SUPERSCRIPT: X^2^ - Must be before subscript
+	// 12. SUPERSCRIPT: X^2^ - Must be before subscript
 	result = result.replace(/\^([^\^]+)\^/g, "<sup>$1</sup>");
 
-	// 12. SUBSCRIPT: H~2~O - Single tilde, use negative lookbehind/lookahead to avoid ~~
+	// 13. SUBSCRIPT: H~2~O - Single tilde, use negative lookbehind/lookahead to avoid ~~
 	result = result.replace(/(?<!~)~([^~]+)~(?!~)/g, "<sub>$1</sub>");
 
-	// 13. BOLD + ITALIC: ***text*** or ___text___
+	// 14. BOLD + ITALIC: ***text*** or ___text___
 	result = result.replace(/\*\*\*([^*]+)\*\*\*/g, "<strong><em>$1</em></strong>");
 	result = result.replace(/___([^_]+)___/g, "<strong><em>$1</em></strong>");
 
-	// 14. BOLD: **text** or __text__
+	// 15. BOLD: **text** or __text__
 	result = result.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
 	result = result.replace(/__([^_]+)__/g, "<strong>$1</strong>");
 
-	// 15. ITALIC: *text* or _text_ (but not inside words for underscores)
+	// 16. ITALIC: *text* or _text_ (but not inside words for underscores)
 	// For asterisks, match any single asterisk pairs
 	result = result.replace(/\*([^*]+)\*/g, "<em>$1</em>");
 	// For underscores, only match at word boundaries

package/src/helpers/routes.ts

@@ -40,7 +40,9 @@ export function useActionRoutes(baseUrl: string, extend?: object): ListControlsR
 				...options,
 				ignoreAbort: true
 			};
-			fields && (options.params = { fields });
+			if (fields) {
+				options.params = { ...options.params, fields };
+			}
 			const item = await request.get(`${baseUrl}/${target.id}/details`, options);
 			return storeObject(item);
 		},

package/src/styles/themes/danx/markdown.scss

@@ -165,6 +165,23 @@
     vertical-align: super;
   }
 
+  // Hex color preview swatch
+  .color-preview {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25em;
+
+    .color-swatch {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      border-radius: 3px;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      vertical-align: middle;
+      flex-shrink: 0;
+    }
+  }
+
   // Tables
   table {
     border-collapse: collapse;
@@ -296,5 +313,10 @@
     mark {
       background: rgba(250, 204, 21, 0.5);
     }
+
+    // Color swatch - light theme
+    .color-preview .color-swatch {
+      border-color: rgba(0, 0, 0, 0.2);
+    }
   }
 }