quasar-ui-danx 0.4.92 → 0.4.94

package/src/composables/useFileNavigation.ts

@@ -0,0 +1,129 @@
+import { computed, ref, Ref } from "vue";
+import { FileNavigationParent, FileNavigationState, UploadedFile } from "../types";
+
+/**
+ * Composable for managing file navigation state with parent stack support
+ * Enables diving into related files (like transcodes) and navigating back to parent
+ */
+export function useFileNavigation(initialFile: Ref<UploadedFile | null>, initialRelatedFiles: Ref<UploadedFile[]> = ref([])) {
+	// Current navigation state
+	const currentFile = ref<UploadedFile | null>(initialFile.value);
+	const relatedFiles = ref<UploadedFile[]>(initialRelatedFiles.value);
+	const parentStack = ref<FileNavigationParent[]>([]);
+	const currentIndex = ref(0);
+
+	// Computed properties
+	const hasParent = computed(() => parentStack.value.length > 0);
+	const canNavigatePrevious = computed(() => currentIndex.value > 0);
+	const canNavigateNext = computed(() => currentIndex.value < relatedFiles.value.length - 1);
+	const totalFiles = computed(() => relatedFiles.value.length);
+
+	/**
+	 * Navigate to a specific file by index
+	 */
+	function navigateTo(index: number) {
+		if (index >= 0 && index < relatedFiles.value.length) {
+			currentIndex.value = index;
+			currentFile.value = relatedFiles.value[index];
+		}
+	}
+
+	/**
+	 * Navigate to the next file
+	 */
+	function navigateNext() {
+		if (canNavigateNext.value) {
+			navigateTo(currentIndex.value + 1);
+		}
+	}
+
+	/**
+	 * Navigate to the previous file
+	 */
+	function navigatePrevious() {
+		if (canNavigatePrevious.value) {
+			navigateTo(currentIndex.value - 1);
+		}
+	}
+
+	/**
+	 * Dive into a related file (e.g., transcodes)
+	 * Pushes current state onto parent stack
+	 */
+	function diveInto(file: UploadedFile, newRelatedFiles: UploadedFile[]) {
+		// Push current state onto parent stack
+		parentStack.value.push({
+			file: currentFile.value!,
+			relatedFiles: relatedFiles.value,
+			index: currentIndex.value
+		});
+
+		// Update to new state
+		currentFile.value = file;
+		relatedFiles.value = newRelatedFiles;
+		currentIndex.value = newRelatedFiles.findIndex(f => f.id === file.id);
+
+		// Fallback to 0 if not found
+		if (currentIndex.value === -1) {
+			currentIndex.value = 0;
+		}
+	}
+
+	/**
+	 * Navigate back to parent file
+	 * Pops state from parent stack
+	 */
+	function navigateToParent() {
+		if (hasParent.value) {
+			const parent = parentStack.value.pop()!;
+			currentFile.value = parent.file;
+			relatedFiles.value = parent.relatedFiles;
+			currentIndex.value = parent.index;
+		}
+	}
+
+	/**
+	 * Reset navigation state
+	 */
+	function reset(file: UploadedFile | null = null, files: UploadedFile[] = []) {
+		currentFile.value = file;
+		relatedFiles.value = files;
+		parentStack.value = [];
+		currentIndex.value = 0;
+	}
+
+	/**
+	 * Get navigation state snapshot
+	 */
+	function getState(): FileNavigationState {
+		return {
+			currentFile: currentFile.value,
+			relatedFiles: relatedFiles.value,
+			parentStack: [...parentStack.value],
+			currentIndex: currentIndex.value
+		};
+	}
+
+	return {
+		// State
+		currentFile,
+		relatedFiles,
+		parentStack,
+		currentIndex,
+
+		// Computed
+		hasParent,
+		canNavigatePrevious,
+		canNavigateNext,
+		totalFiles,
+
+		// Methods
+		navigateTo,
+		navigateNext,
+		navigatePrevious,
+		diveInto,
+		navigateToParent,
+		reset,
+		getState
+	};
+}

package/src/composables/useKeyboardNavigation.ts

@@ -0,0 +1,58 @@
+import { onMounted, onUnmounted } from "vue";
+
+export interface KeyboardNavigationCallbacks {
+	onPrevious: () => void;
+	onNext: () => void;
+	onEscape?: () => void;
+}
+
+export interface UseKeyboardNavigationOptions {
+	enabled?: boolean;
+}
+
+/**
+ * Composable for keyboard navigation (arrow keys + escape)
+ * Handles left/right arrow keys for navigation and optional escape key
+ */
+export function useKeyboardNavigation(
+	callbacks: KeyboardNavigationCallbacks,
+	options: UseKeyboardNavigationOptions = {}
+) {
+	const { enabled = true } = options;
+
+	function onKeydown(e: KeyboardEvent) {
+		if (!enabled) return;
+
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault();
+				callbacks.onPrevious();
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				callbacks.onNext();
+				break;
+			case "Escape":
+				if (callbacks.onEscape) {
+					callbacks.onEscape();
+				}
+				break;
+		}
+	}
+
+	onMounted(() => {
+		if (enabled) {
+			window.addEventListener("keydown", onKeydown);
+		}
+	});
+
+	onUnmounted(() => {
+		if (enabled) {
+			window.removeEventListener("keydown", onKeydown);
+		}
+	});
+
+	return {
+		onKeydown
+	};
+}

package/src/composables/useThumbnailScroll.ts

@@ -0,0 +1,43 @@
+import { nextTick, Ref, watch } from "vue";
+
+export interface UseThumbnailScrollOptions {
+	/**
+	 * Container element that holds the thumbnails
+	 */
+	containerRef: Ref<HTMLElement | null>;
+
+	/**
+	 * Current active index
+	 */
+	currentIndex: Ref<number>;
+
+	/**
+	 * Optional CSS selector for thumbnail elements (defaults to '.thumbnail')
+	 */
+	thumbnailSelector?: string;
+}
+
+/**
+ * Composable for auto-scrolling thumbnails into view
+ * Watches the current index and scrolls the active thumbnail into the visible area
+ */
+export function useThumbnailScroll(options: UseThumbnailScrollOptions) {
+	const { containerRef, currentIndex, thumbnailSelector = ".thumbnail" } = options;
+
+	watch(currentIndex, (newIndex) => {
+		nextTick(() => {
+			const thumbnails = containerRef.value?.querySelectorAll(thumbnailSelector);
+			const activeThumbnail = thumbnails?.[newIndex] as HTMLElement;
+
+			if (activeThumbnail && containerRef.value) {
+				activeThumbnail.scrollIntoView({
+					behavior: "smooth",
+					block: "nearest",
+					inline: "center"
+				});
+			}
+		});
+	});
+
+	return {};
+}

package/src/composables/useVirtualCarousel.ts

@@ -0,0 +1,93 @@
+import { computed, Ref, shallowRef, watch } from "vue";
+import { UploadedFile, VirtualCarouselSlide } from "../types";
+
+const BUFFER_SIZE = 2; // Render current slide ± 2 slides
+
+/**
+ * Composable for managing virtual carousel rendering
+ * Only renders slides within buffer window for performance with large file sets
+ */
+export function useVirtualCarousel(
+	files: Ref<UploadedFile[]>,
+	currentIndex: Ref<number>
+) {
+	// Shallow ref to avoid deep reactivity for performance
+	const visibleSlides = shallowRef<VirtualCarouselSlide[]>([]);
+
+	/**
+	 * Calculate which slides should be visible based on current index
+	 */
+	const visibleIndices = computed(() => {
+		const start = Math.max(0, currentIndex.value - BUFFER_SIZE);
+		const end = Math.min(files.value.length - 1, currentIndex.value + BUFFER_SIZE);
+		const indices: number[] = [];
+
+		for (let i = start; i <= end; i++) {
+			indices.push(i);
+		}
+
+		return indices;
+	});
+
+	/**
+	 * Update visible slides based on current index
+	 */
+	function updateVisibleSlides() {
+		const indices = visibleIndices.value;
+		const newSlides: VirtualCarouselSlide[] = [];
+
+		for (const index of indices) {
+			if (index >= 0 && index < files.value.length) {
+				newSlides.push({
+					file: files.value[index],
+					index,
+					isActive: index === currentIndex.value,
+					isVisible: true
+				});
+			}
+		}
+
+		visibleSlides.value = newSlides;
+	}
+
+	/**
+	 * Check if a slide at given index is visible
+	 */
+	function isSlideVisible(index: number): boolean {
+		return visibleIndices.value.includes(index);
+	}
+
+	/**
+	 * Get slide by index (returns null if not visible)
+	 */
+	function getSlide(index: number): VirtualCarouselSlide | null {
+		return visibleSlides.value.find(s => s.index === index) || null;
+	}
+
+	/**
+	 * Get slides that should be preloaded (visible + buffer)
+	 */
+	const preloadIndices = computed(() => {
+		const start = Math.max(0, currentIndex.value - BUFFER_SIZE - 1);
+		const end = Math.min(files.value.length - 1, currentIndex.value + BUFFER_SIZE + 1);
+		const indices: number[] = [];
+
+		for (let i = start; i <= end; i++) {
+			indices.push(i);
+		}
+
+		return indices;
+	});
+
+	// Watch for changes to update visible slides
+	watch([currentIndex, files], updateVisibleSlides, { immediate: true });
+
+	return {
+		visibleSlides,
+		visibleIndices,
+		preloadIndices,
+		isSlideVisible,
+		getSlide,
+		updateVisibleSlides
+	};
+}

package/src/helpers/filePreviewHelpers.ts

@@ -0,0 +1,107 @@
+import { UploadedFile } from "../types";
+
+/**
+ * Placeholder constants for file preview
+ */
+export const FILE_PLACEHOLDERS = {
+	IMAGE: "https://placehold.co/64x64?text=?",
+	VIDEO_SVG: `data:image/svg+xml;base64,${btoa(
+		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>'
+	)}`
+};
+
+/**
+ * MIME type regex patterns for file type detection
+ */
+export const MIME_TYPES = {
+	IMAGE: /^image\//,
+	VIDEO: /^video\//,
+	TEXT: /^text\//,
+	PDF: /^application\/pdf/
+};
+
+/**
+ * Check if file is an image
+ */
+export function isImage(file: UploadedFile): boolean {
+	const mimeType = getMimeType(file);
+	return MIME_TYPES.IMAGE.test(mimeType);
+}
+
+/**
+ * Check if file is a video
+ */
+export function isVideo(file: UploadedFile): boolean {
+	const mimeType = getMimeType(file);
+	return MIME_TYPES.VIDEO.test(mimeType);
+}
+
+/**
+ * Check if file is a text file
+ */
+export function isText(file: UploadedFile): boolean {
+	const mimeType = getMimeType(file);
+	return MIME_TYPES.TEXT.test(mimeType);
+}
+
+/**
+ * Check if file is a PDF
+ */
+export function isPdf(file: UploadedFile): boolean {
+	const mimeType = getMimeType(file);
+	return MIME_TYPES.PDF.test(mimeType);
+}
+
+/**
+ * Get the MIME type from a file
+ */
+export function getMimeType(file: UploadedFile): string {
+	return file.mime || file.type || "";
+}
+
+/**
+ * Get the file extension from a filename
+ */
+export function getFileExtension(filename: string): string {
+	return filename.split(".").pop()?.toLowerCase() || "";
+}
+
+/**
+ * Get the preview URL for a file
+ * Priority: optimized > blobUrl > url > thumb > empty string
+ */
+export function getPreviewUrl(file: UploadedFile): string {
+	if (file.optimized?.url) {
+		return file.optimized.url;
+	}
+
+	if (isImage(file)) {
+		return file.blobUrl || file.url || "";
+	}
+
+	return file.thumb?.url || "";
+}
+
+/**
+ * Get the thumbnail URL for a file
+ * For videos without thumbs, returns a play icon SVG
+ */
+export function getThumbUrl(file: UploadedFile): string {
+	if (file.thumb?.url) {
+		return file.thumb.url;
+	}
+
+	if (isVideo(file)) {
+		return FILE_PLACEHOLDERS.VIDEO_SVG;
+	}
+
+	return getPreviewUrl(file) || FILE_PLACEHOLDERS.IMAGE;
+}
+
+/**
+ * Get the optimized URL for a file (used for preview)
+ * Priority: optimized > blobUrl > url
+ */
+export function getOptimizedUrl(file: UploadedFile): string {
+	return file.optimized?.url || file.blobUrl || file.url || "";
+}

package/src/helpers/formats/parsers.ts

@@ -63,9 +63,12 @@ export function fMarkdownCode(type: string, string: string | object): string {
 		}
 	}
 
-	const regex = new RegExp(`\`\`\`${type}`, "g");
 	string = (string || "") as string;
-	if (!string.match(regex)) {
+	// Check if string STARTS with the code fence (not just contains it anywhere)
+	// This fixes a bug where JSON containing embedded code fences in the data
+	// would incorrectly be detected as already wrapped
+	const startsWithCodeFence = new RegExp(`^\\s*\`\`\`${type}\\s`).test(string);
+	if (!startsWithCodeFence) {
 		string = parseMarkdownCode(string as string);
 		return `\`\`\`${type}\n${string}\n\`\`\``;
 	}

package/src/helpers/index.ts

@@ -8,6 +8,7 @@ export * from "./download";
 export * from "./downloadPdf";
 export * from "./files";
 export * from "./FileUpload";
+export * from "./filePreviewHelpers";
 export * from "./FlashMessages";
 export * from "./formats";
 export * from "./hotkeys";

package/src/types/files.d.ts

@@ -34,6 +34,23 @@ export interface UploadedFile extends TypedObject {
 	meta?: AnyObject;
 }
 
+export interface StoredFile extends TypedObject {
+	filename: string;
+	url: string;
+	mime: string;
+	size?: number;
+	location?: {
+		x: number;
+		y: number;
+	};
+	meta?: AnyObject;
+	page_number?: number;
+	is_transcoding?: boolean;
+	thumb?: StoredFile;
+	optimized?: StoredFile;
+	transcodes?: StoredFile[];
+}
+
 export interface FileUploadCompleteCallbackParams {
 	file?: UploadedFile | null;
 	uploadedFile?: UploadedFile | null;
@@ -60,3 +77,24 @@ export type FileUploadProgressCallback = (params: FileUploadProgressCallbackPara
 export type FileUploadErrorCallback = (params: FileUploadErrorCallbackParams) => void
 export type OnFilesChangeCallback = (files: UploadedFile[]) => void;
 export type VoidCallback = () => void;
+
+// File Navigation Types
+export interface FileNavigationState {
+	currentFile: UploadedFile | null;
+	relatedFiles: UploadedFile[];
+	parentStack: FileNavigationParent[];
+	currentIndex: number;
+}
+
+export interface FileNavigationParent {
+	file: UploadedFile;
+	relatedFiles: UploadedFile[];
+	index: number;
+}
+
+export interface VirtualCarouselSlide {
+	file: UploadedFile;
+	index: number;
+	isActive: boolean;
+	isVisible: boolean;
+}

package/src/types/widgets.d.ts

@@ -1,5 +1,5 @@
 export interface LabelPillWidgetProps {
 	label?: string | number;
 	size?: "xs" | "sm" | "md" | "lg";
-	color?: "sky" | "green" | "red" | "amber" | "yellow" | "blue" | "slate" | "slate-mid" | "gray" | "none";
+	color?: "sky" | "green" | "red" | "amber" | "yellow" | "blue" | "purple" | "slate" | "slate-mid" | "gray" | "emerald" | "orange" | "lime" | "teal" | "cyan" | "rose" | "indigo" | "violet" | "fuchsia" | "none";
 }

package/src/vue-plugin.ts

@@ -1,6 +1,7 @@
 export * from "./config";
 export * from "./helpers";
 export * from "./components";
+export * from "./composables";
 export * from "./svg";
 
 // eslint-disable-next-line import/extensions