quasar-ui-danx 0.4.92 → 0.4.93

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/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