nuxt-ui-tools 1.7.0 → 1.8.1

package/dist/runtime/file-preview/types/renderer.d.ts

@@ -0,0 +1,49 @@
+import type { Component } from 'vue';
+import type { FilePreviewDetail, FilePreviewItem, FilePreviewKind, FilePreviewText } from './file.js';
+/** Overlay that hosts a preview. The same three containers forms use. */
+export type FilePreviewContainer = 'modal' | 'drawer' | 'fullscreen';
+/** A container, or a responsive value such as `fullscreen md:drawer`. */
+export type FilePreviewModeInput = FilePreviewContainer | (string & {});
+/** What detection sees of a file. */
+export interface FilePreviewMatchContext {
+    name: string;
+    mime: string | null;
+    extension: string | null;
+}
+export type FilePreviewRendererLoader = () => Promise<Component | {
+    default: Component;
+}>;
+export interface FilePreviewRendererDefinition<TKind extends FilePreviewKind = FilePreviewKind> {
+    kind: TKind;
+    /** Icon of the kind tile, strip tile, and fallback glyph. */
+    icon: string;
+    /** Kind name shown in the meta line. Built-in kinds are translated by the package. */
+    label?: FilePreviewText;
+    /** Claims files for this renderer. Files that set `kind` skip matching. */
+    match?: (file: FilePreviewMatchContext) => boolean;
+    /** Loaded the first time a file of this kind is shown: `() => import('./EmailPreview.vue')`. */
+    component: FilePreviewRendererLoader;
+    /** Default container when `open()` has no `mode`. */
+    mode?: FilePreviewModeInput;
+    /** Uses a narrow modal for a single file, as audio and the fallback card do. */
+    compact?: boolean;
+}
+export type FilePreviewErrorReason = 'source' | 'decode' | 'unsupported';
+export interface FilePreviewRendererError {
+    reason: FilePreviewErrorReason;
+    message?: string;
+}
+/** Props every renderer receives. */
+export interface FilePreviewRendererProps {
+    file: FilePreviewItem;
+    /** Usable URL: the resolved URL, or an object URL for `Blob` sources. */
+    url: string;
+    /** Bytes when the source is a `Blob`, so text renderers can read them without a request. */
+    blob: Blob | null;
+    container: FilePreviewContainer;
+}
+export interface FilePreviewRendererEmits {
+    /** Content is on screen. Details such as dimensions or duration join the details panel. */
+    ready: [details?: readonly FilePreviewDetail[]];
+    error: [error: FilePreviewRendererError];
+}

package/dist/runtime/file-preview/types/shell.d.ts

@@ -0,0 +1,12 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { FilePreviewMarkdownRenderer, FilePreviewOptions } from './api.js';
+/** What the preview shell shares with the renderer it shows. */
+export interface FilePreviewShellContext {
+    /** Dialog root. Renderers listen to its `keydown` for their own shortcuts. */
+    root: Readonly<Ref<HTMLElement | null>>;
+    /** Where `<UiFilePreviewTools>` puts renderer buttons: the header, or the bottom bar on phones. */
+    tools: Readonly<Ref<HTMLElement | null>>;
+    narrow: ComputedRef<boolean>;
+    options: FilePreviewOptions;
+    markdown: FilePreviewMarkdownRenderer | null;
+}

package/dist/runtime/file-preview/utils/container.d.ts

@@ -0,0 +1,4 @@
+import type { FilePreviewContainer } from '../types/index.js';
+export declare function normalizeFilePreviewContainer(value: string | number | boolean | null | undefined): FilePreviewContainer;
+/** The container a gallery keeps while navigating: the largest one any of its files needs. */
+export declare function largestFilePreviewContainer(containers: readonly FilePreviewContainer[]): FilePreviewContainer;

package/dist/runtime/file-preview/utils/container.js

@@ -0,0 +1,10 @@
+const CONTAINER_RANK = { drawer: 1, fullscreen: 2, modal: 0 };
+export function normalizeFilePreviewContainer(value) {
+  return value === "drawer" || value === "fullscreen" ? value : "modal";
+}
+export function largestFilePreviewContainer(containers) {
+  return containers.reduce(
+    (largest, container) => CONTAINER_RANK[container] > CONTAINER_RANK[largest] ? container : largest,
+    "modal"
+  );
+}

package/dist/runtime/file-preview/utils/csv.d.ts

@@ -0,0 +1,17 @@
+declare const DELIMITERS: readonly [",", ";", "\t", "|"];
+type CsvDelimiter = (typeof DELIMITERS)[number];
+/** Picks the delimiter that splits the first line into the most cells, outside quotes. */
+export declare function detectCsvDelimiter(text: string): CsvDelimiter;
+/**
+ * Parses RFC 4180 CSV: quoted cells, doubled quotes, and line breaks inside quotes. Stops after
+ * `maxRows` rows so a large export stays cheap to show.
+ */
+export declare function parseCsv(input: string, options?: {
+    delimiter?: string;
+    maxRows?: number;
+}): {
+    complete: boolean;
+    delimiter: string;
+    rows: string[][];
+};
+export {};

package/dist/runtime/file-preview/utils/csv.js

@@ -0,0 +1,53 @@
+const DELIMITERS = [",", ";", "	", "|"];
+export function detectCsvDelimiter(text) {
+  const counts = /* @__PURE__ */ new Map();
+  let quoted = false;
+  for (const char of text) {
+    if (char === "\n") break;
+    if (char === '"') quoted = !quoted;
+    else if (!quoted) counts.set(char, (counts.get(char) ?? 0) + 1);
+  }
+  return DELIMITERS.reduce(
+    (best, delimiter) => (counts.get(delimiter) ?? 0) > (counts.get(best) ?? 0) ? delimiter : best
+  );
+}
+export function parseCsv(input, options = {}) {
+  const text = input.replace(/^/u, "");
+  const delimiter = options.delimiter ?? detectCsvDelimiter(text);
+  const maxRows = options.maxRows ?? Infinity;
+  const rows = [];
+  let row = [];
+  let cell = "";
+  let quoted = false;
+  let complete = true;
+  for (let index = 0; index < text.length; index += 1) {
+    const char = text[index];
+    if (quoted) {
+      if (char !== '"') cell += char;
+      else if (text[index + 1] === '"') {
+        cell += '"';
+        index += 1;
+      } else quoted = false;
+      continue;
+    }
+    if (char === '"') quoted = true;
+    else if (char === delimiter) {
+      row.push(cell);
+      cell = "";
+    } else if (char === "\n") {
+      row.push(cell);
+      rows.push(row);
+      row = [];
+      cell = "";
+      if (rows.length >= maxRows) {
+        complete = index >= text.length - 1;
+        break;
+      }
+    } else if (char !== "\r") cell += char;
+  }
+  if (complete && (cell !== "" || row.length > 0)) {
+    row.push(cell);
+    rows.push(row);
+  }
+  return { complete, delimiter, rows };
+}

package/dist/runtime/file-preview/utils/download.d.ts

@@ -0,0 +1,8 @@
+import type { FilePreviewItem } from '../types/index.js';
+/** Downloads the original file, honoring its `download` option. */
+export declare function downloadFilePreviewItem(item: FilePreviewItem): Promise<void>;
+/**
+ * Opens the original file in a new tab. The tab opens right away, while the click still counts as
+ * a user gesture, and receives its address once a source function resolves.
+ */
+export declare function openFilePreviewItem(item: FilePreviewItem): Promise<void>;

package/dist/runtime/file-preview/utils/download.js

@@ -0,0 +1,40 @@
+import { isString } from "../../shared/utils/predicate.js";
+async function sourceHref(src) {
+  const value = isString(src) || src instanceof Blob ? src : await src();
+  if (isString(value)) return { href: value, revoke: false };
+  return { href: URL.createObjectURL(value), revoke: true };
+}
+function click(params) {
+  const anchor = document.createElement("a");
+  anchor.href = params.href;
+  anchor.rel = "noopener";
+  if (params.download !== void 0) anchor.download = params.download;
+  if (!params.href.startsWith("blob:") && !params.href.startsWith("data:")) anchor.target = "_blank";
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+}
+export async function downloadFilePreviewItem(item) {
+  const option = item.file.download;
+  if (option === false) return;
+  if (option !== true && option !== void 0 && !isString(option)) return await option(item.file);
+  const { href, revoke } = isString(option) ? { href: option, revoke: false } : await sourceHref(item.file.src);
+  click({ download: item.name, href });
+  if (revoke) setTimeout(() => URL.revokeObjectURL(href), 3e4);
+}
+export async function openFilePreviewItem(item) {
+  const { src } = item.file;
+  if (isString(src) || src instanceof Blob) {
+    const { href, revoke } = await sourceHref(src);
+    click({ href });
+    if (revoke) setTimeout(() => URL.revokeObjectURL(href), 3e4);
+    return;
+  }
+  const tab = window.open("", "_blank");
+  try {
+    const { href } = await sourceHref(src);
+    if (tab) tab.location.href = href;
+  } catch {
+    tab?.close();
+  }
+}

package/dist/runtime/file-preview/utils/files.d.ts

@@ -0,0 +1,7 @@
+import type { FilePreviewInput, FilePreviewItem, FilePreviewRendererDefinition } from '../types/index.js';
+/** Normalizes one input: names, MIME type, size, and kind are settled once, when the preview opens. */
+export declare function normalizeFilePreviewItem(input: FilePreviewInput, context: {
+    key: string;
+    renderers: readonly FilePreviewRendererDefinition[];
+}): FilePreviewItem;
+export declare function normalizeFilePreviewItems(input: FilePreviewInput | readonly FilePreviewInput[], renderers: readonly FilePreviewRendererDefinition[]): FilePreviewItem[];

package/dist/runtime/file-preview/utils/files.js

@@ -0,0 +1,53 @@
+import { fileExtension, fileNameFromUrl } from "../../shared/utils/file.js";
+import { isString } from "../../shared/utils/predicate.js";
+import { detectFilePreviewKind } from "./renderers.js";
+function isBlob(value) {
+  return "Blob" in globalThis && value instanceof Blob;
+}
+function isNamedFile(value) {
+  return "File" in globalThis && value instanceof File;
+}
+function toFile(input) {
+  if (isString(input) || isBlob(input)) return { src: input };
+  return input;
+}
+function sourceName(src) {
+  if (isNamedFile(src)) return src.name;
+  if (isString(src) && !src.startsWith("data:") && !src.startsWith("blob:"))
+    return fileNameFromUrl(src);
+  return "";
+}
+function toDate(value, src) {
+  if (value !== void 0) {
+    const date = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+  return isNamedFile(src) ? new Date(src.lastModified) : null;
+}
+export function normalizeFilePreviewItem(input, context) {
+  const file = toFile(input);
+  const name = file.name ?? sourceName(file.src);
+  const blob = isBlob(file.src) ? file.src : null;
+  const mime = file.mime ?? (blob?.type || null);
+  const extension = fileExtension(name);
+  return {
+    extension,
+    file,
+    key: file.id ?? context.key,
+    kind: detectFilePreviewKind({ extension, kind: file.kind, mime, name }, context.renderers),
+    mime,
+    name,
+    rendition: file.rendition ? normalizeFilePreviewItem(file.rendition, { ...context, key: `${context.key}:rendition` }) : null,
+    size: file.size ?? blob?.size ?? null,
+    updatedAt: toDate(file.updatedAt, file.src)
+  };
+}
+export function normalizeFilePreviewItems(input, renderers) {
+  const inputs = isInputList(input) ? input : [input];
+  return inputs.map(
+    (entry, index) => normalizeFilePreviewItem(entry, { key: `file-${index}`, renderers })
+  );
+}
+function isInputList(input) {
+  return Array.isArray(input);
+}

package/dist/runtime/file-preview/utils/format.d.ts

@@ -0,0 +1,13 @@
+import type { FilePreviewText } from '../types/index.js';
+export declare function resolveFilePreviewText(text: FilePreviewText): FilePreviewText & string;
+/** Media time as `m:ss`, or `h:mm:ss` past an hour. */
+export declare function formatFilePreviewDuration(seconds: number): string;
+export declare function formatFilePreviewDate(date: Date, locale: string): string;
+/** Splits a name so the end stays visible when the start is truncated: `Contrat-cadre-…2026.pdf`. */
+export declare function splitFilePreviewName(name: string): {
+    head: string;
+    tail: string;
+};
+export declare function escapeFilePreviewHtml(text: string): string;
+/** Escapes one line of formatted JSON and tints keys, strings, numbers, and literals. */
+export declare function tintFilePreviewJsonLine(line: string): string;

package/dist/runtime/file-preview/utils/format.js

@@ -0,0 +1,40 @@
+import { isString } from "../../shared/utils/predicate.js";
+export function resolveFilePreviewText(text) {
+  return isString(text) ? text : text();
+}
+const pad = (value) => String(value).padStart(2, "0");
+export function formatFilePreviewDuration(seconds) {
+  const total = Number.isFinite(seconds) ? Math.max(0, Math.floor(seconds)) : 0;
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor(total % 3600 / 60);
+  const rest = total % 60;
+  return hours > 0 ? `${hours}:${pad(minutes)}:${pad(rest)}` : `${minutes}:${pad(rest)}`;
+}
+export function formatFilePreviewDate(date, locale) {
+  return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
+}
+export function splitFilePreviewName(name) {
+  const tail = Math.min(name.length, 10);
+  return { head: name.slice(0, name.length - tail), tail: name.slice(name.length - tail) };
+}
+const escapes = /* @__PURE__ */ new Map([
+  ['"', """],
+  ["&", "&"],
+  ["'", "'"],
+  ["<", "&lt;"],
+  [">", "&gt;"]
+]);
+export function escapeFilePreviewHtml(text) {
+  return text.replaceAll(/["&'<>]/gu, (char) => escapes.get(char) ?? char);
+}
+const JSON_TOKEN = /(&quot;(?:[^&]|&(?!quot;))*?&quot;)(\s*:)?|\b(true|false|null)\b|(-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)/gu;
+export function tintFilePreviewJsonLine(line) {
+  return escapeFilePreviewHtml(line).replaceAll(
+    JSON_TOKEN,
+    (match, text, colon, literal) => {
+      if (text) return `<span data-token="${colon ? "key" : "string"}">${text}</span>${colon ?? ""}`;
+      if (literal) return `<span data-token="literal">${literal}</span>`;
+      return `<span data-token="number">${match}</span>`;
+    }
+  );
+}

package/dist/runtime/file-preview/utils/instance.d.ts

@@ -0,0 +1,9 @@
+import type { FilePreviewInput, FilePreviewInstance, FilePreviewOptions, FilePreviewRendererDefinition } from '../types/index.js';
+/** Creates the state of one open preview: its files, position, open flag, and public handle. */
+export declare function createFilePreviewInstance(params: {
+    id: string;
+    input: FilePreviewInput | readonly FilePreviewInput[];
+    options: FilePreviewOptions;
+    renderers: () => readonly FilePreviewRendererDefinition[];
+    onDispose: (id: string) => void;
+}): FilePreviewInstance;

package/dist/runtime/file-preview/utils/instance.js

@@ -0,0 +1,57 @@
+import { readonly, ref, shallowRef } from "vue";
+import { normalizeFilePreviewItems } from "./files.js";
+function clamp(index, length) {
+  return Math.min(Math.max(0, Math.trunc(index)), Math.max(0, length - 1));
+}
+export function createFilePreviewInstance(params) {
+  const { id, options } = params;
+  const files = shallowRef(
+    normalizeFilePreviewItems(params.input, params.renderers())
+  );
+  const index = ref(clamp(options.index ?? 0, files.value.length));
+  const open = ref(true);
+  let settle = null;
+  let disposed = false;
+  const closed = new Promise((resolve) => {
+    settle = resolve;
+  });
+  function goTo(target) {
+    const count = files.value.length;
+    if (count === 0) return;
+    const next = options.loop ? (Math.trunc(target) % count + count) % count : clamp(target, count);
+    if (next === index.value) return;
+    index.value = next;
+    const item = files.value[next];
+    if (item) options.onChange?.(item.file, next);
+  }
+  const handle = {
+    close: () => {
+      open.value = false;
+    },
+    closed,
+    goTo,
+    id,
+    index: readonly(index),
+    next: () => goTo(index.value + 1),
+    previous: () => goTo(index.value - 1),
+    update: (input) => {
+      files.value = normalizeFilePreviewItems(input, params.renderers());
+      index.value = clamp(index.value, files.value.length);
+    }
+  };
+  return {
+    dispose: () => {
+      if (disposed) return;
+      disposed = true;
+      params.onDispose(id);
+      settle?.();
+      options.onClose?.();
+    },
+    files,
+    handle,
+    id,
+    index,
+    open,
+    options
+  };
+}

package/dist/runtime/file-preview/utils/renderers.d.ts

@@ -0,0 +1,36 @@
+import type { Component } from 'vue';
+import type { UiToolsTranslator } from '../../i18n/utils.js';
+import type { FilePreviewKind, FilePreviewMatchContext, FilePreviewRendererDefinition } from '../types/index.js';
+/**
+ * Declares a renderer with its kind inferred as a literal.
+ *
+ * @example
+ * defineFilePreviewRenderer({
+ *   kind: 'email',
+ *   icon: 'i-lucide-mail',
+ *   match: ({ mime, extension }) => mime === 'message/rfc822' || extension === 'eml',
+ *   component: () => import('~/components/previews/EmailPreview.vue'),
+ *   mode: 'fullscreen md:drawer',
+ * })
+ */
+export declare function defineFilePreviewRenderer<const TKind extends FilePreviewKind>(renderer: FilePreviewRendererDefinition<TKind>): FilePreviewRendererDefinition<TKind>;
+/** Claims files by MIME type (a trailing `/` matches a whole family) or by extension. */
+export declare function matchFilePreview(rule: {
+    mimes?: readonly string[];
+    extensions?: readonly string[];
+}): (file: FilePreviewMatchContext) => boolean;
+/** Renders anything no other renderer claims: a card with the file facts and a download. */
+export declare const fallbackFilePreviewRenderer: FilePreviewRendererDefinition<"other">;
+/** Checked in order, so specific text formats come before the generic text renderer. */
+export declare const builtInFilePreviewRenderers: readonly FilePreviewRendererDefinition[];
+/** Custom renderers first, then built-in ones that no custom renderer replaced. */
+export declare function mergeFilePreviewRenderers(custom: readonly FilePreviewRendererDefinition[]): FilePreviewRendererDefinition<FilePreviewKind>[];
+/** Kind of a file: the explicit one, then the first renderer that claims it, then `other`. */
+export declare function detectFilePreviewKind(file: FilePreviewMatchContext & {
+    kind?: FilePreviewKind;
+}, renderers: readonly FilePreviewRendererDefinition[]): FilePreviewKind;
+export declare function findFilePreviewRenderer(kind: FilePreviewKind, renderers: readonly FilePreviewRendererDefinition[]): FilePreviewRendererDefinition;
+/** One async component per renderer, so its chunk loads once and is reused. */
+export declare function filePreviewRendererComponent(renderer: FilePreviewRendererDefinition): Component;
+/** Kind name shown to users: the renderer's own label, the package translation, or the kind. */
+export declare function filePreviewKindLabel(renderer: FilePreviewRendererDefinition, t: UiToolsTranslator): import("../types/index.js").FilePreviewText & string;