nuxt-ui-tools 1.7.0 → 1.8.1

package/dist/runtime/file-preview/components/shell/file-preview-message.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    icon: string;
+    title: string;
+    description: string;
+    badge?: string | null;
+    detail?: string | null;
+    tone?: 'neutral' | 'error';
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/file-preview/components/shell/file-preview-message.vue

@@ -0,0 +1,49 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+const {
+  badge = null,
+  detail = null,
+  tone = "neutral"
+} = defineProps({
+  icon: { type: String, required: true },
+  title: { type: String, required: true },
+  description: { type: String, required: true },
+  badge: { type: [String, null], required: false },
+  detail: { type: [String, null], required: false },
+  tone: { type: String, required: false }
+});
+</script>
+
+<template>
+  <div
+    class="flex size-full flex-col items-center justify-center gap-2.5 p-8 text-center"
+    data-file-preview-message=""
+    :data-tone="tone"
+  >
+    <span
+      :class="[
+  'relative mb-1.5 grid h-[76px] w-16 place-items-center rounded-[6px_16px_6px_6px] border bg-default shadow-[0_10px_24px_-14px_rgba(0,0,0,0.35)]',
+  tone === 'error' ? 'border-error/40 text-error' : 'border-accented text-muted'
+]"
+      aria-hidden="true"
+    >
+      <UIcon :name="icon" class="size-7" />
+      <span
+        v-if="badge"
+        class="absolute bottom-2.5 -left-2 rounded bg-inverted px-1.5 py-1 font-mono text-[10px] leading-none font-semibold tracking-wide text-inverted"
+      >
+        {{ badge }}
+      </span>
+    </span>
+    <p class="m-0 max-w-[36ch] text-[15px] font-semibold text-balance text-highlighted">
+      {{ title }}
+    </p>
+    <p class="m-0 max-w-[44ch] text-sm text-muted">{{ description }}</p>
+    <p v-if="detail" class="m-0 max-w-[48ch] font-mono text-xs break-all text-dimmed">
+      {{ detail }}
+    </p>
+    <div v-if="$slots.default" class="mt-2 flex flex-wrap justify-center gap-2">
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/runtime/file-preview/components/shell/file-preview-message.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    icon: string;
+    title: string;
+    description: string;
+    badge?: string | null;
+    detail?: string | null;
+    tone?: 'neutral' | 'error';
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/file-preview/components/shell/file-preview-shell.d.vue.ts

@@ -0,0 +1,17 @@
+import type { FilePreviewContainer, FilePreviewInstance } from '../../types/index.js';
+type __VLS_Props = {
+    instance: FilePreviewInstance;
+    container: FilePreviewContainer;
+    narrow: boolean;
+    canExpand: boolean;
+    expanded: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expand: () => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onExpand?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/file-preview/components/shell/file-preview-shell.vue

@@ -0,0 +1,280 @@
+<script setup>
+import { useEventListener, useSwipe } from "@vueuse/core";
+import {
+  computed,
+  inject,
+  nextTick,
+  onMounted,
+  provide,
+  ref,
+  shallowRef,
+  useTemplateRef,
+  watch
+} from "vue";
+import { routerKey } from "vue-router";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { formatFileSize } from "../../../shared/utils/file";
+import { useFilePreview } from "../../composables/use-file-preview-api";
+import {
+  filePreviewMarkdownKey,
+  filePreviewShellKey,
+  isFilePreviewControlKey
+} from "../../composables/use-file-preview-shell";
+import { useFilePreviewSource } from "../../composables/use-file-preview-source";
+import { downloadFilePreviewItem, openFilePreviewItem } from "../../utils/download";
+import { formatFilePreviewDate, resolveFilePreviewText } from "../../utils/format";
+import { filePreviewKindLabel, findFilePreviewRenderer } from "../../utils/renderers";
+import FilePreviewButton from "./file-preview-button.vue";
+import FilePreviewDetails from "./file-preview-details.vue";
+import FilePreviewHeader from "./file-preview-header.vue";
+import FilePreviewStage from "./file-preview-stage.vue";
+import FilePreviewThumb from "./file-preview-thumb.vue";
+const props = defineProps({
+  instance: { type: Object, required: true },
+  container: { type: String, required: true },
+  narrow: { type: Boolean, required: true },
+  canExpand: { type: Boolean, required: true },
+  expanded: { type: Boolean, required: true }
+});
+const emit = defineEmits(["close", "expand"]);
+const { code, t } = useUiToolsLocale();
+const api = useFilePreview();
+const router = inject(routerKey, null);
+const root = useTemplateRef("root");
+const tools = useTemplateRef("tools");
+const stage = useTemplateRef("stage");
+const strip = useTemplateRef("strip");
+const showDetails = ref(false);
+const reported = shallowRef([]);
+const files = computed(() => props.instance.files.value);
+const index = computed(() => props.instance.index.value);
+const loop = computed(() => props.instance.options.loop === true);
+const item = computed(() => files.value[index.value] ?? null);
+const display = computed(() => item.value?.rendition ?? item.value);
+const renderer = computed(
+  () => findFilePreviewRenderer(display.value?.kind ?? "other", api.renderers.value)
+);
+const itemRenderer = computed(
+  () => findFilePreviewRenderer(item.value?.kind ?? "other", api.renderers.value)
+);
+const kindLabel = computed(() => filePreviewKindLabel(itemRenderer.value, t));
+const source = useFilePreviewSource(() => display.value);
+const many = computed(() => files.value.length > 1);
+const hasPrevious = computed(() => loop.value || index.value > 0);
+const hasNext = computed(() => loop.value || index.value < files.value.length - 1);
+const showStrip = computed(
+  () => many.value && !props.narrow && props.instance.options.gallery !== "counter"
+);
+const arrows = computed(
+  () => many.value && !props.narrow && props.container !== "drawer" && ["image", "video"].includes(display.value?.kind ?? "") ? { next: hasNext.value, previous: hasPrevious.value } : null
+);
+const meta = computed(() => {
+  const current = item.value;
+  if (!current) return "";
+  return [
+    props.narrow && many.value ? t("filePreview.counter", { current: index.value + 1, total: files.value.length }) : null,
+    kindLabel.value,
+    current.size === null ? null : formatFileSize(current.size, code.value),
+    current.updatedAt ? formatFilePreviewDate(current.updatedAt, code.value) : null
+  ].filter(Boolean).join(" \xB7 ");
+});
+const details = computed(() => {
+  const current = item.value;
+  if (!current) return [];
+  const rows = [
+    { label: t("filePreview.fields.name"), value: current.name || t("filePreview.untitled") },
+    { label: t("filePreview.fields.type"), value: current.mime ?? kindLabel.value },
+    current.size === null ? null : {
+      label: t("filePreview.fields.size"),
+      value: `${formatFileSize(current.size, code.value)} (${current.size.toLocaleString(code.value)} B)`
+    },
+    current.updatedAt ? {
+      label: t("filePreview.fields.modified"),
+      value: formatFilePreviewDate(current.updatedAt, code.value)
+    } : null
+  ];
+  const extra = [...reported.value, ...current.file.details ?? []].map((detail) => ({
+    label: resolveFilePreviewText(detail.label),
+    value: resolveFilePreviewText(detail.value)
+  }));
+  return [...rows.filter((row) => row !== null), ...extra];
+});
+const announcement = computed(
+  () => many.value && item.value ? t("filePreview.position", {
+    current: index.value + 1,
+    name: item.value.name || t("filePreview.untitled"),
+    total: files.value.length
+  }) : ""
+);
+provide(filePreviewShellKey, {
+  markdown: inject(filePreviewMarkdownKey, null),
+  narrow: computed(() => props.narrow),
+  options: props.instance.options,
+  root,
+  tools
+});
+watch(
+  () => item.value?.key,
+  async () => {
+    reported.value = [];
+    await nextTick();
+    const row = strip.value;
+    const thumb = row?.querySelector('[aria-current="true"]');
+    if (!row || !(thumb instanceof HTMLElement)) return;
+    row.scrollTo({
+      behavior: "smooth",
+      left: thumb.offsetLeft - (row.clientWidth - thumb.offsetWidth) / 2
+    });
+  },
+  { immediate: true }
+);
+onMounted(() => root.value?.focus({ preventScroll: true }));
+useEventListener(root, "keydown", (event) => {
+  if (isFilePreviewControlKey(event)) return;
+  const moves = /* @__PURE__ */ new Map([
+    ["ArrowLeft", props.instance.handle.previous],
+    ["ArrowRight", props.instance.handle.next],
+    ["End", () => props.instance.handle.goTo(files.value.length - 1)],
+    ["Home", () => props.instance.handle.goTo(0)]
+  ]);
+  const move = moves.get(event.key);
+  if (!move || !many.value) return;
+  event.preventDefault();
+  move();
+});
+useSwipe(stage, {
+  onSwipeEnd: (event, direction) => {
+    if (!props.narrow || !many.value) return;
+    if (event.target instanceof Element && event.target.closest("[data-file-preview-zoomed]"))
+      return;
+    if (direction === "left") props.instance.handle.next();
+    if (direction === "right") props.instance.handle.previous();
+  },
+  threshold: 60
+});
+function download() {
+  if (item.value) void downloadFilePreviewItem(item.value);
+}
+function openInTab() {
+  const url = source.url.value;
+  if (url) window.open(url, "_blank", "noopener");
+  else if (display.value) void openFilePreviewItem(display.value);
+}
+async function runAction(action) {
+  if (!item.value) return;
+  if (action.onSelect) await action.onSelect(item.value.file);
+  if (!action.to) return;
+  if (/^[a-z][\d+.a-z-]*:/iu.test(action.to) || !router) {
+    window.open(action.to, "_blank", "noopener");
+    return;
+  }
+  emit("close");
+  await router.push(action.to);
+}
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="relative flex size-full min-h-0 flex-col overflow-hidden bg-default outline-none"
+    tabindex="-1"
+    data-file-preview=""
+    data-vaul-no-drag=""
+    :data-container="container"
+  >
+    <FilePreviewHeader
+      v-if="item"
+      :item="item"
+      :icon="itemRenderer.icon"
+      :meta="meta"
+      :index="index"
+      :total="files.length"
+      :loop="loop"
+      :narrow="narrow"
+      :can-expand="canExpand"
+      :expanded="expanded"
+      :details="showDetails"
+      @previous="instance.handle.previous"
+      @next="instance.handle.next"
+      @close="emit('close')"
+      @expand="emit('expand')"
+      @details="showDetails = !showDetails"
+      @download="download"
+      @open="openInTab"
+      @action="runAction"
+    >
+      <template #tools>
+        <div
+          ref="tools"
+          class="flex shrink-0 items-center gap-0.5 empty:hidden"
+          data-file-preview-tools=""
+        />
+        <span
+          class="mx-1 h-5 w-px shrink-0 bg-(--ui-border) [:empty+&]:hidden"
+          aria-hidden="true"
+        />
+      </template>
+    </FilePreviewHeader>
+
+    <div ref="stage" class="flex min-h-0 flex-1 flex-col">
+      <FilePreviewStage
+        v-if="item && display"
+        :item="item"
+        :display="display"
+        :renderer="renderer"
+        :source="source"
+        :container="container"
+        :kind-label="kindLabel"
+        :arrows="arrows"
+        @ready="reported = $event"
+        @previous="instance.handle.previous"
+        @next="instance.handle.next"
+        @download="download"
+      >
+        <FilePreviewDetails v-if="showDetails" :rows="details" />
+      </FilePreviewStage>
+    </div>
+
+    <div
+      v-if="narrow"
+      class="flex shrink-0 items-center justify-between gap-2 border-t border-default bg-default px-2 pt-1.5 pb-[calc(0.375rem+env(safe-area-inset-bottom,0px))]"
+      data-file-preview-bottom=""
+      :data-single="many ? void 0 : ''"
+    >
+      <FilePreviewButton
+        v-if="many"
+        icon="i-lucide-chevron-left"
+        :label="t('filePreview.previous')"
+        :disabled="!hasPrevious"
+        @click="instance.handle.previous"
+      />
+      <div ref="tools" class="mx-auto flex items-center gap-0.5" data-file-preview-tools="" />
+      <FilePreviewButton
+        v-if="many"
+        icon="i-lucide-chevron-right"
+        :label="t('filePreview.next')"
+        :disabled="!hasNext"
+        @click="instance.handle.next"
+      />
+    </div>
+
+    <div
+      v-else-if="showStrip"
+      ref="strip"
+      class="relative flex shrink-0 gap-1.5 overflow-x-auto border-t border-default bg-default px-3 py-2"
+      data-file-preview-strip=""
+    >
+      <FilePreviewThumb
+        v-for="(entry, position) in files"
+        :key="entry.key"
+        :item="entry"
+        :icon="findFilePreviewRenderer(entry.kind, api.renderers.value).icon"
+        :current="position === index"
+        :label="`${position + 1}. ${entry.name || t('filePreview.untitled')}`"
+        @select="instance.handle.goTo(position)"
+      />
+    </div>
+
+    <p class="sr-only" aria-live="polite">{{ announcement }}</p>
+  </div>
+</template>

package/dist/runtime/file-preview/components/shell/file-preview-shell.vue.d.ts

@@ -0,0 +1,17 @@
+import type { FilePreviewContainer, FilePreviewInstance } from '../../types/index.js';
+type __VLS_Props = {
+    instance: FilePreviewInstance;
+    container: FilePreviewContainer;
+    narrow: boolean;
+    canExpand: boolean;
+    expanded: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expand: () => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onExpand?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/file-preview/components/shell/file-preview-stage.d.vue.ts

@@ -0,0 +1,37 @@
+import type { useFilePreviewSource } from '../../composables/use-file-preview-source.js';
+import type { FilePreviewContainer, FilePreviewDetail, FilePreviewItem, FilePreviewRendererDefinition } from '../../types/index.js';
+type __VLS_Props = {
+    item: FilePreviewItem;
+    display: FilePreviewItem;
+    renderer: FilePreviewRendererDefinition;
+    source: ReturnType<typeof useFilePreviewSource>;
+    container: FilePreviewContainer;
+    kindLabel: string;
+    arrows: {
+        previous: boolean;
+        next: boolean;
+    } | null;
+};
+declare var __VLS_64: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_64) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (details: readonly FilePreviewDetail[]) => any;
+    previous: () => any;
+    download: () => any;
+    next: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReady?: ((details: readonly FilePreviewDetail[]) => any) | undefined;
+    onPrevious?: (() => any) | undefined;
+    onDownload?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/file-preview/components/shell/file-preview-stage.vue

@@ -0,0 +1,173 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useTimeoutFn } from "@vueuse/core";
+import { computed, ref, shallowRef, watch } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { filePreviewRendererComponent } from "../../utils/renderers";
+import FilePreviewMessage from "./file-preview-message.vue";
+const props = defineProps({
+  item: { type: Object, required: true },
+  display: { type: Object, required: true },
+  renderer: { type: Object, required: true },
+  source: { type: null, required: true },
+  container: { type: String, required: true },
+  kindLabel: { type: String, required: true },
+  arrows: { type: [Object, null], required: true }
+});
+const emit = defineEmits(["ready", "previous", "next", "download"]);
+const { t } = useUiToolsLocale();
+const failure = shallowRef(null);
+const ready = ref(false);
+const slow = ref(false);
+const attempt = ref(0);
+const delay = useTimeoutFn(() => slow.value = true, 150, { immediate: false });
+const component = computed(() => filePreviewRendererComponent(props.renderer));
+const converted = computed(() => props.display !== props.item);
+const downloadable = computed(() => props.item.file.download !== false);
+const extension = computed(() => (props.display.extension ?? props.kindLabel).toUpperCase());
+function restart() {
+  failure.value = null;
+  ready.value = false;
+  slow.value = false;
+  delay.start();
+}
+watch(() => [props.display.key, props.source.url.value], restart, { immediate: true });
+function handleReady(details) {
+  ready.value = true;
+  delay.stop();
+  emit("ready", details ?? []);
+}
+function handleError(error) {
+  failure.value = error;
+  delay.stop();
+}
+function retry() {
+  attempt.value += 1;
+  restart();
+  if (props.source.retryable.value) void props.source.retry();
+}
+</script>
+
+<template>
+  <div class="flex min-h-0 flex-1 flex-col" data-file-preview-stage="" :data-kind="display.kind">
+    <div
+      v-if="converted"
+      class="flex shrink-0 flex-wrap items-center gap-x-2.5 gap-y-1 border-b border-default bg-elevated px-4 py-2 text-[12.5px] text-toned"
+      data-file-preview-converted=""
+    >
+      <UIcon name="i-lucide-repeat" class="size-3.5 text-muted" aria-hidden="true" />
+      <span>
+        <b class="font-semibold text-highlighted">{{ t("filePreview.converted.title") }}.</b>
+        {{ t("filePreview.converted.description", { kind: kindLabel }) }}
+      </span>
+      <UButton
+        v-if="downloadable"
+        :label="t('filePreview.converted.download')"
+        color="neutral"
+        variant="link"
+        size="xs"
+        class="ms-auto p-0 font-semibold"
+        @click="emit('download')"
+      />
+    </div>
+
+    <div class="relative min-h-0 flex-1 overflow-hidden bg-(--nut-fp-stage)">
+      <div
+        v-if="source.status.value === 'loading'"
+        class="grid size-full place-items-center p-8"
+        data-file-preview-loading=""
+      >
+        <span
+          class="h-2/3 w-2/3 max-w-2xl animate-pulse rounded-md bg-accented"
+          aria-hidden="true"
+        />
+      </div>
+
+      <FilePreviewMessage
+        v-else-if="source.status.value === 'error'"
+        icon="i-lucide-triangle-alert"
+        tone="error"
+        :title="t('filePreview.errors.sourceTitle')"
+        :description="t('filePreview.errors.sourceDescription')"
+        :detail="source.error.value?.message"
+      >
+        <UButton
+          v-if="source.retryable.value"
+          icon="i-lucide-refresh-cw"
+          :label="t('filePreview.retry')"
+          data-file-preview-retry=""
+          @click="retry"
+        />
+        <UButton
+          v-if="downloadable"
+          icon="i-lucide-download"
+          :label="t('filePreview.download')"
+          color="neutral"
+          variant="outline"
+          @click="emit('download')"
+        />
+      </FilePreviewMessage>
+
+      <FilePreviewMessage
+        v-else-if="failure"
+        :icon="renderer.icon"
+        :badge="display.extension?.toUpperCase()"
+        tone="error"
+        :title="t('filePreview.errors.decodeTitle', { extension })"
+        :description="t('filePreview.errors.decodeDescription')"
+        :detail="failure.message"
+      >
+        <UButton
+          v-if="downloadable"
+          icon="i-lucide-download"
+          :label="t('filePreview.download')"
+          @click="emit('download')"
+        />
+      </FilePreviewMessage>
+
+      <component
+        :is="component"
+        v-else-if="source.url.value"
+        :key="`${display.key}:${attempt}`"
+        :file="display"
+        :url="source.url.value"
+        :blob="source.blob.value"
+        :container="container"
+        @ready="handleReady"
+        @error="handleError"
+      />
+
+      <div
+        v-if="slow && !ready && !failure && source.status.value !== 'error'"
+        class="pointer-events-none absolute inset-x-0 top-0 z-10 h-0.5 overflow-hidden"
+        aria-hidden="true"
+      >
+        <span class="nut-fp-progress block h-full w-1/3 bg-primary" />
+      </div>
+
+      <template v-if="arrows">
+        <button
+          v-if="arrows.previous"
+          type="button"
+          class="absolute top-1/2 left-3.5 z-10 grid size-10 -translate-y-1/2 place-items-center rounded-full border border-default bg-default/90 text-highlighted shadow-md backdrop-blur-sm transition hover:bg-default"
+          :aria-label="t('filePreview.previous')"
+          @click="emit('previous')"
+        >
+          <UIcon name="i-lucide-chevron-left" class="size-5" />
+        </button>
+        <button
+          v-if="arrows.next"
+          type="button"
+          class="absolute top-1/2 right-3.5 z-10 grid size-10 -translate-y-1/2 place-items-center rounded-full border border-default bg-default/90 text-highlighted shadow-md backdrop-blur-sm transition hover:bg-default"
+          :aria-label="t('filePreview.next')"
+          @click="emit('next')"
+        >
+          <UIcon name="i-lucide-chevron-right" class="size-5" />
+        </button>
+      </template>
+
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/runtime/file-preview/components/shell/file-preview-stage.vue.d.ts

@@ -0,0 +1,37 @@
+import type { useFilePreviewSource } from '../../composables/use-file-preview-source.js';
+import type { FilePreviewContainer, FilePreviewDetail, FilePreviewItem, FilePreviewRendererDefinition } from '../../types/index.js';
+type __VLS_Props = {
+    item: FilePreviewItem;
+    display: FilePreviewItem;
+    renderer: FilePreviewRendererDefinition;
+    source: ReturnType<typeof useFilePreviewSource>;
+    container: FilePreviewContainer;
+    kindLabel: string;
+    arrows: {
+        previous: boolean;
+        next: boolean;
+    } | null;
+};
+declare var __VLS_64: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_64) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (details: readonly FilePreviewDetail[]) => any;
+    previous: () => any;
+    download: () => any;
+    next: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReady?: ((details: readonly FilePreviewDetail[]) => any) | undefined;
+    onPrevious?: (() => any) | undefined;
+    onDownload?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/file-preview/components/shell/file-preview-thumb.d.vue.ts

@@ -0,0 +1,14 @@
+import type { FilePreviewItem } from '../../types/index.js';
+type __VLS_Props = {
+    item: FilePreviewItem;
+    icon: string;
+    current: boolean;
+    label: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;