quasar-ui-danx 0.4.91 → 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/formats/datetime.ts

@@ -0,0 +1,285 @@
+import { DateTime, IANAZone } from "luxon";
+import { fDateOptions } from "../../types";
+
+const SERVER_TZ = new IANAZone("America/Chicago");
+
+export { DateTime, SERVER_TZ };
+
+/**
+ * Converts a date string from the server's time zone to the user's time zone.
+ * @param {String} dateTimeString
+ * @returns {DateTime}
+ */
+export function localizedDateTime(dateTimeString: string) {
+	dateTimeString = dateTimeString?.replace("T", " ");
+	// noinspection JSCheckFunctionSignatures
+	return DateTime.fromSQL(dateTimeString, { zone: SERVER_TZ }).setZone("local");
+}
+
+/**
+ * Converts a date string from the user's time zone to the server's time zone.
+ * @param dateTimeString
+ * @returns {DateTime}
+ */
+export function remoteDateTime(dateTimeString: string) {
+	dateTimeString = dateTimeString?.replace("T", " ");
+	// noinspection JSCheckFunctionSignatures
+	return DateTime.fromSQL(dateTimeString, { zone: "local" }).setZone(SERVER_TZ);
+}
+
+/**
+ * Formats a Luxon DateTime object into a Quasar formatted date string
+ * @param date
+ * @returns {string}
+ */
+export function fQDate(date: string) {
+	return fDate(date, { format: "yyyy/MM/dd" });
+}
+
+/**
+ *
+ * @param {String} dateTimeString
+ * @param options
+ * @returns {string}
+ */
+export function fLocalizedDateTime(dateTimeString: string, options = {}) {
+	return fDateTime(localizedDateTime(dateTimeString), options);
+}
+
+/**
+ * Formats a date/time object or string into a human-readable format
+ *
+ * @param {String|Object} dateTime
+ * @param format
+ * @param {String|null} empty
+ * @returns {string}
+ */
+export function fDateTime(
+	dateTime: string | DateTime | null = null,
+	{ format = "M/d/yy h:mma", empty = "- -" }: fDateOptions = {}
+) {
+	const formatted = parseDateTime(dateTime)?.toFormat(format).toLowerCase();
+	return formatted || empty;
+}
+
+export function fDateTimeMs(
+	dateTime: string | DateTime | null = null,
+	{ empty = "- -" }: fDateOptions = {}
+) {
+	const formatted = parseDateTime(dateTime)?.toFormat("M/d/yy H:mm:ss.SSS").toLowerCase();
+	return formatted || empty;
+}
+
+/**
+ * Formats a date/time object or string into the best format for DB input
+ * @param dateTime
+ * @returns {string}
+ */
+export function dbDateTime(dateTime: string | DateTime | null = null) {
+	return fDateTime(dateTime, { format: "yyyy-MM-dd HH:mm:ss", empty: undefined });
+}
+
+/**
+ * Formats a date object or string into a human-readable format
+ * @param {String|Object} dateTime
+ * @param {String|null} empty
+ * @param format
+ * @returns {string}
+ */
+export function fDate(dateTime: string | DateTime | null, { empty = "--", format = "M/d/yy" }: fDateOptions = {}) {
+	const formatted = parseDateTime(dateTime)?.toFormat(format || "M/d/yy");
+	return formatted || empty;
+}
+
+
+/**
+ * Parses a date string into a Luxon DateTime object
+ */
+export function parseDateTime(dateTime: string | DateTime | number | null): DateTime<boolean> | null {
+	if (typeof dateTime === "number") {
+		return DateTime.fromMillis(dateTime as number);
+	}
+	if (typeof dateTime === "string") {
+		return parseGenericDateTime(dateTime);
+	}
+	return dateTime as DateTime<boolean> || DateTime.fromSQL("0000-00-00 00:00:00");
+}
+
+/**
+ *  Parses a SQL formatted date string into a Luxon DateTime object
+ */
+export function parseSqlDateTime(dateTime: string) {
+	const parsed = DateTime.fromSQL(dateTime.replace("T", " ").replace(/\//g, "-"));
+	return parsed.isValid ? parsed : null;
+}
+
+/**
+ * Parses a Quasar formatted date string into a Luxon DateTime object
+ */
+export function parseQDate(date: string, format = "yyyy/MM/dd"): DateTime<boolean> | null {
+	const parsed = DateTime.fromFormat(date, format);
+	return parsed.isValid ? parsed : null;
+}
+
+/**
+ * Parses a Quasar formatted date/time string into a Luxon DateTime object
+ */
+export function parseQDateTime(date: string, format = "yyyy/MM/dd HH:mm:ss"): DateTime<boolean> | null {
+	const parsed = DateTime.fromFormat(date, format);
+	return parsed.isValid ? parsed : null;
+}
+
+/**
+ * Parses a date string in various formats into a Luxon DateTime object.
+ * Tries a list of common formats until one works.
+ *
+ * @param {string} dateTimeString - The date string to parse.
+ * @param {string} [defaultZone="local"] - The default time zone to use if not specified.
+ * @returns {DateTime | null} - A Luxon DateTime object if parsing succeeds, otherwise null.
+ */
+export function parseGenericDateTime(dateTimeString: string, defaultZone = "local"): DateTime | null {
+	if (!dateTimeString) return null;
+
+	const formats = [
+		"yyyy-MM-dd",            // ISO date
+		"yyyy-MM-dd HH:mm:ss",   // ISO date with time
+		"MM/dd/yyyy",            // US-style date
+		"dd/MM/yyyy",            // European-style date
+		"MM/dd/yy",              // US short date
+		"dd/MM/yy",              // European short date
+		"yyyy/MM/dd",            // Alternative ISO
+		"MM-dd-yyyy",            // US with dashes
+		"dd-MM-yyyy",            // European with dashes
+		"M/d/yyyy",              // US date without leading zeros
+		"d/M/yyyy",              // European date without leading zeros
+		"yyyyMMdd"              // Compact ISO
+	];
+
+	for (const format of formats) {
+		const parsed = DateTime.fromFormat(dateTimeString, format, { zone: defaultZone });
+		if (parsed.isValid) {
+			return parsed;
+		}
+	}
+
+	// Fallback to ISO parsing for strings like "2022-11-18T10:10:10Z"
+	const isoParsed = DateTime.fromISO(dateTimeString, { zone: defaultZone });
+	if (isoParsed.isValid) {
+		return isoParsed;
+	}
+
+	// Fallback to SQL parsing for strings like "2022-11-18 10:10:10"
+	const sqlParsed = DateTime.fromSQL(dateTimeString, { zone: defaultZone });
+	if (sqlParsed.isValid) {
+		return sqlParsed;
+	}
+
+	return null;
+}
+
+/**
+ * Formats a number of seconds into Hours / Minutes / Seconds or just Minutes and Seconds
+ *
+ * @param second
+ * @returns {string}
+ */
+export function fSecondsToTime(second: number) {
+	const time = DateTime.now().setZone("UTC").startOf("year").set({ second });
+	const hours = Math.floor(second / 3600);
+	return (hours ? hours + ":" : "") + time.toFormat("mm:ss");
+}
+
+/**
+ *  Formats a number of seconds into a duration string in 00h 00m 00s format
+ */
+export function fSecondsToDuration(seconds: number) {
+	const hours = Math.floor(seconds / 3600);
+	const minutes = Math.floor((seconds % 3600) / 60);
+	const secs = Math.floor(seconds % 60);
+	return `${hours ? hours + "h " : ""}${minutes ? minutes + "m " : ""}${secs}s`;
+}
+
+/**
+ *  Formats a number of milliseconds into a duration string in 00h 00m 00s 000ms format
+ */
+export function fMillisecondsToDuration(milliseconds: number) {
+	const durStr = fSecondsToDuration(Math.floor(milliseconds / 1000));
+	return (durStr === "0s" ? "" : durStr) + ` ${Math.floor(milliseconds % 1000)}ms`;
+}
+
+
+/**
+ *  Formats a duration between two date strings in 00h 00m 00s format
+ */
+export function fDuration(start: string | number, end?: string | number) {
+	const endDateTime = end ? parseDateTime(end) : DateTime.now();
+	const diff = endDateTime?.diff(parseDateTime(start) || DateTime.now(), ["hours", "minutes", "seconds"]);
+	if (!diff?.isValid) {
+		return "-";
+	}
+	const totalSeconds = diff.as("seconds");
+	return fSecondsToDuration(totalSeconds);
+}
+
+/**
+ * Formats a date/time as a relative time string (e.g., "5 minutes ago", "yesterday")
+ * @param {String|DateTime|number} dateTime - The date/time to format
+ * @returns {string} - A human-readable relative time string
+ */
+export function fTimeAgo(dateTime: string | DateTime | number | null): string {
+	if (!dateTime) return "";
+
+	const date = parseDateTime(dateTime);
+	if (!date) return "";
+
+	const now = DateTime.now();
+	const diffTime = Math.abs(now.toMillis() - date.toMillis());
+
+	// Convert to different units
+	const diffSeconds = Math.floor(diffTime / 1000);
+	const diffMinutes = Math.floor(diffTime / (1000 * 60));
+	const diffHours = Math.floor(diffTime / (1000 * 60 * 60));
+
+	// Seconds
+	if (diffSeconds < 10) {
+		return "a few seconds ago";
+	} else if (diffSeconds < 60) {
+		return `${diffSeconds} seconds ago`;
+	}
+
+	// Minutes
+	if (diffMinutes === 1) {
+		return "a minute ago";
+	} else if (diffMinutes < 60) {
+		return `${diffMinutes} minutes ago`;
+	}
+
+	// Hours
+	if (diffHours === 1) {
+		return "an hour ago";
+	} else if (diffHours < 24) {
+		return `${diffHours} hours ago`;
+	}
+
+	// Calendar-based day logic
+	const today = now.startOf("day");
+	const authDay = date.startOf("day");
+	const daysDiff = Math.floor(today.diff(authDay, "days").days);
+
+	if (daysDiff === 0) {
+		return "today";
+	} else if (daysDiff === 1) {
+		return "yesterday";
+	} else if (daysDiff < 7) {
+		return `${daysDiff} days ago`;
+	}
+
+	// Weeks
+	if (daysDiff < 30) {
+		const weeks = Math.floor(daysDiff / 7);
+		return weeks === 1 ? "a week ago" : `${weeks} weeks ago`;
+	}
+
+	// 30+ days: show full date
+	return date.toLocaleString({ year: "numeric", month: "short", day: "numeric" });
+}

package/src/helpers/formats/index.ts

@@ -0,0 +1,4 @@
+export * from "./datetime";
+export * from "./numbers";
+export * from "./strings";
+export * from "./parsers";

package/src/helpers/formats/numbers.ts

@@ -0,0 +1,127 @@
+/**
+ * Formats an amount into USD currency format
+ */
+export function fCurrency(amount: number, options?: object) {
+	if (amount === null || amount === undefined || isNaN(amount)) {
+		return "$-";
+	}
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: "USD",
+		...options
+	}).format(amount);
+}
+
+/**
+ * Formats an amount into USD currency format without cents
+ */
+export function fCurrencyNoCents(amount: number, options?: object) {
+	return fCurrency(amount, {
+		maximumFractionDigits: 0,
+		...options
+	});
+}
+
+/**
+ * Formats a number into a human-readable format
+ */
+export function fNumber(number: number, options?: object) {
+	return new Intl.NumberFormat("en-US", options).format(number);
+}
+
+/**
+ * Formats a currency into a shorthand human-readable format (ie: $1.2M or $5K)
+ */
+export function fShortCurrency(value: string | number, options?: { round: boolean }) {
+	return "$" + fShortNumber(value, options);
+}
+
+/**
+ * Formats a number into a shorthand human-readable format (ie: 1.2M or 5K)
+ */
+export function fShortNumber(value: string | number, options?: { round: boolean }) {
+	if (value === "" || value === null || value === undefined) {
+		return "-";
+	}
+	const shorts = [
+		{ pow: 3, unit: "K" },
+		{ pow: 6, unit: "M" },
+		{ pow: 9, unit: "B" },
+		{ pow: 12, unit: "T" },
+		{ pow: 15, unit: "Q" }
+	];
+
+	let n = Math.round(+value);
+
+	const short = shorts.find(({ pow }) => Math.pow(10, pow) < n && Math.pow(10, pow + 3) > n) || null;
+
+	if (short) {
+		n = n / Math.pow(10, short.pow);
+		return options?.round
+			? n + short.unit
+			: n.toFixed(n > 100 ? 0 : 1) + short.unit;
+	}
+
+	return n;
+}
+
+/**
+ * Formats a number into a human-readable size format (ie: 1.2MB or 5KB)
+ */
+export function fShortSize(value: string | number) {
+	const powers = [
+		{ pow: 0, unit: "B" },
+		{ pow: 10, unit: "KB" },
+		{ pow: 20, unit: "MB" },
+		{ pow: 30, unit: "GB" },
+		{ pow: 40, unit: "TB" },
+		{ pow: 50, unit: "PB" },
+		{ pow: 60, unit: "EB" },
+		{ pow: 70, unit: "ZB" },
+		{ pow: 80, unit: "YB" }
+	];
+
+	const n = Math.round(+value);
+	const power = powers.find((p, i) => {
+		const nextPower = powers[i + 1];
+		return !nextPower || n < Math.pow(2, nextPower.pow + 10);
+	}) || powers[powers.length - 1];
+
+	const div = Math.pow(2, power.pow);
+
+	return Math.round(n / div) + " " + power.unit;
+}
+
+export function fBoolean(value?: boolean | string | any) {
+	switch (value) {
+		case "Yes":
+		case "No":
+			return value;
+	}
+
+	return (value === undefined || value === null) ? "-" : (value ? "Yes" : "No");
+}
+
+interface FPercentOptions {
+	multiplier?: number,
+	maximumFractionDigits?: number,
+	NaN?: string
+}
+
+/**
+ * Formats a number into a percentage
+ * @param num
+ * @param options
+ * @returns {string}
+ */
+export function fPercent(num: string | number, options: FPercentOptions = {}) {
+	options = { multiplier: 100, maximumFractionDigits: 1, NaN: "N/A", ...options };
+
+	num = parseFloat("" + num);
+
+	if (isNaN(num)) {
+		return options.NaN;
+	}
+
+	return fNumber(num * (options.multiplier || 100), options) + "%";
+}