nuxt-ui-tools 1.12.0 → 1.13.0

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-table-toolbar.vue

@@ -0,0 +1,217 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UInput from "@nuxt/ui/components/Input.vue";
+import USelect from "@nuxt/ui/components/Select.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+const ALL = "__all__";
+const props = defineProps({
+  importer: { type: Object, required: false }
+});
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const review = computed(() => importer.value.review);
+const labels = computed(
+  () => new Map(importer.value.columns.fields.map((field) => [field.path, field.label]))
+);
+const tabs = computed(
+  () => [
+    ["all", importer.value.rows.all.length],
+    ["importable", importer.value.rows.importable.length],
+    ["invalid", importer.value.rows.invalid.length],
+    ["discarded", importer.value.rows.discarded.length]
+  ].map(([key, count]) => ({ count, key, label: t(`spreadsheet.table.tabs.${key}`) }))
+);
+const levels = computed(() => {
+  const live = importer.value.rows.all.filter((row) => !row.discardReason);
+  return [
+    { count: null, key: "all" },
+    { count: live.filter((row) => row.errors.length).length, key: "blocking" },
+    { count: live.filter((row) => row.warnings.length).length, key: "warnings" }
+  ];
+});
+const showModes = computed(() => importer.value.rows.byMode.update > 0);
+const modes = computed(() => [
+  { key: "all", label: t("spreadsheet.table.modes.all") },
+  {
+    key: "create",
+    label: `${t("spreadsheet.table.modes.create")} \xB7 ${importer.value.rows.byMode.create}`
+  },
+  {
+    key: "update",
+    label: `${t("spreadsheet.table.modes.update")} \xB7 ${importer.value.rows.byMode.update}`
+  }
+]);
+const issueItems = computed(() => [
+  { label: t("spreadsheet.table.anyIssue"), value: ALL },
+  { label: t("spreadsheet.table.byColumn"), type: "label" },
+  ...[...review.value.fieldIssues.entries()].map(([field, count]) => ({
+    label: t("spreadsheet.table.columnIssueOption", {
+      count: count.rowCount,
+      field: labels.value.get(field) ?? field
+    }),
+    value: `${field}|*`
+  })),
+  { label: t("spreadsheet.table.byIssue"), type: "label" },
+  ...review.value.issueTypes.map((type) => ({
+    label: t("spreadsheet.table.issueOption", {
+      count: type.rowCount,
+      field: labels.value.get(type.field) ?? type.field,
+      message: type.message
+    }),
+    value: type.id
+  }))
+]);
+function setTab(key) {
+  importer.value.review.setTab(key);
+}
+function setLevel(key) {
+  importer.value.review.setLevel(key);
+}
+function setMode(key) {
+  importer.value.review.setMode(key);
+}
+function setIssue(value) {
+  importer.value.review.setIssue(!value || value === ALL ? "" : value);
+}
+function setSearch(value) {
+  importer.value.review.setSearch(String(value ?? ""));
+}
+function discardSelected() {
+  importer.value.rows.discard([...importer.value.review.selection]);
+  importer.value.review.clearSelection();
+}
+function restoreSelected() {
+  importer.value.rows.restore([...importer.value.review.selection]);
+  importer.value.review.clearSelection();
+}
+</script>
+
+<template>
+  <div data-spreadsheet-table-toolbar class="border-b border-default bg-default">
+    <div class="flex flex-wrap items-end justify-between gap-x-4 border-b border-default px-3">
+      <div class="flex gap-0.5 overflow-x-auto" role="tablist">
+        <button
+          v-for="tab in tabs"
+          :key="tab.key"
+          type="button"
+          role="tab"
+          class="inline-flex h-11 items-center gap-2 px-3 text-sm whitespace-nowrap"
+          :class="
+  review.tab === tab.key ? 'font-semibold text-highlighted shadow-[inset_0_-2px_0_var(--ui-primary)]' : 'text-muted hover:text-highlighted'
+"
+          :aria-selected="review.tab === tab.key"
+          @click="setTab(tab.key)"
+        >
+          {{ tab.label }}
+          <span
+            class="rounded-md px-1.5 text-xs font-semibold tabular-nums"
+            :class="
+  tab.key === 'invalid' && tab.count ? 'bg-error/10 text-error' : 'bg-elevated text-muted'
+"
+          >
+            {{ tab.count }}
+          </span>
+        </button>
+      </div>
+      <div v-if="review.tab !== 'discarded'" class="flex max-w-full gap-1 overflow-x-auto py-2">
+        <button
+          v-for="level in levels"
+          :key="level.key"
+          type="button"
+          class="h-7 shrink-0 rounded-md px-2.5 text-[12.5px] font-medium whitespace-nowrap tabular-nums"
+          :class="
+  review.level === level.key ? 'bg-inverted text-inverted' : 'text-muted hover:bg-elevated hover:text-highlighted'
+"
+          :aria-pressed="review.level === level.key"
+          @click="setLevel(level.key)"
+        >
+          {{ t(`spreadsheet.table.levels.${level.key}`)
+          }}<template v-if="level.count !== null"> · {{ level.count }}</template>
+        </button>
+      </div>
+    </div>
+    <div class="flex min-h-13 flex-wrap items-center gap-2 bg-elevated/40 px-3 py-2">
+      <div
+        v-if="review.selection.size"
+        class="flex items-center gap-1 rounded-lg bg-inverted py-1 ps-3 pe-1 text-sm text-inverted"
+      >
+        {{ t("spreadsheet.table.selected", { count: review.selection.size }) }}
+        <UButton
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          class="text-inverted hover:bg-default/15"
+          icon="i-lucide-ban"
+          :label="t('spreadsheet.table.discard')"
+          @click="discardSelected"
+        />
+        <UButton
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          class="text-inverted hover:bg-default/15"
+          :label="t('spreadsheet.table.restore')"
+          @click="restoreSelected"
+        />
+        <UButton
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          class="text-inverted hover:bg-default/15"
+          :label="t('spreadsheet.table.clearSelection')"
+          @click="review.clearSelection()"
+        />
+      </div>
+      <template v-else>
+        <UInput
+          :model-value="review.search"
+          icon="i-lucide-search"
+          size="sm"
+          :placeholder="t('spreadsheet.table.search')"
+          :aria-label="t('spreadsheet.table.search')"
+          class="w-56 max-w-full"
+          @update:model-value="setSearch"
+        />
+        <USelect
+          :model-value="review.issue || ALL"
+          :items="issueItems"
+          size="sm"
+          class="w-60 max-w-full"
+          :aria-label="t('spreadsheet.table.anyIssue')"
+          @update:model-value="setIssue"
+        />
+        <UButton
+          v-if="review.issue"
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          :label="t('spreadsheet.table.clearFilter')"
+          @click="review.setIssue('')"
+        />
+        <div
+          v-if="showModes"
+          class="flex gap-0.5 rounded-lg bg-default p-0.5 ring-1 ring-default ring-inset"
+        >
+          <button
+            v-for="mode in modes"
+            :key="mode.key"
+            type="button"
+            class="h-6 rounded-md px-2 text-xs font-medium whitespace-nowrap tabular-nums"
+            :class="
+  review.mode === mode.key ? 'bg-elevated text-highlighted' : 'text-muted hover:text-highlighted'
+"
+            :aria-pressed="review.mode === mode.key"
+            @click="setMode(mode.key)"
+          >
+            {{ mode.label }}
+          </button>
+        </div>
+      </template>
+      <span class="ms-auto text-xs text-dimmed tabular-nums">{{
+        t("spreadsheet.table.rowCount", { count: review.visible.length })
+      }}</span>
+    </div>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/{shared/spreadsheet-raw-preview-table.d.vue.ts → parts/spreadsheet-import-table-toolbar.vue.d.ts}

@@ -1,6 +1,6 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
 type __VLS_Props = {
-    headers: readonly unknown[];
-    rows: readonly (readonly unknown[])[];
+    importer?: SpreadsheetImporter;
 };
 declare const __VLS_export: 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 _default: typeof __VLS_export;

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-table.d.vue.ts

@@ -0,0 +1,33 @@
+import type { SpreadsheetCellView, SpreadsheetFieldState, SpreadsheetImporter, SpreadsheetRecord, SpreadsheetRow } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    /** Height of the scrolling area. */
+    height?: string;
+    /** Field paths to show, in order. Defaults to every field. */
+    fields?: readonly string[];
+    /** Cells can be edited. Defaults to `true`. */
+    editable?: boolean;
+    /** Rows can be selected. Defaults to `true`. */
+    selectable?: boolean;
+};
+type __VLS_Slots = {
+    cell?: (props: {
+        row: SpreadsheetRow<SpreadsheetRecord, unknown>;
+        field: SpreadsheetFieldState;
+        cell: SpreadsheetCellView;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: string;
+    selectable: boolean;
+    fields: readonly string[];
+    editable: boolean;
+}, {}, {}, {}, 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/spreadsheet/components/parts/spreadsheet-import-table.vue

@@ -0,0 +1,302 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { computed, shallowRef, useTemplateRef } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+import SpreadsheetImportCellEditor from "../internal/spreadsheet-import-cell-editor.vue";
+import SpreadsheetImportStatusBadge from "../internal/spreadsheet-import-status-badge.vue";
+const ROW_HEIGHT = 38;
+const VIRTUALIZE_FROM = 150;
+const props = defineProps({
+  importer: { type: Object, required: false },
+  height: { type: String, required: false, default: "30rem" },
+  fields: { type: Array, required: false, default: void 0 },
+  editable: { type: Boolean, required: false, default: true },
+  selectable: { type: Boolean, required: false, default: true }
+});
+defineSlots();
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const scroller = useTemplateRef("scroller");
+const editing = shallowRef(null);
+const columns = computed(() => {
+  const all = importer.value.columns.fields;
+  if (!props.fields) return all;
+  return props.fields.flatMap((path) => all.filter((field) => field.path === path));
+});
+const rows = computed(() => importer.value.review.visible);
+function choicesOf(row, field) {
+  return field.kind === "select" ? importer.value.rows.cell(row.index, field.path).choices.map((option) => option.label) : void 0;
+}
+const virtualized = computed(() => rows.value.length > VIRTUALIZE_FROM);
+const virtualizer = useVirtualizer(
+  computed(() => ({
+    count: virtualized.value ? rows.value.length : 0,
+    estimateSize: () => ROW_HEIGHT,
+    getItemKey: (index) => rows.value[index]?.index ?? index,
+    getScrollElement: () => scroller.value,
+    initialRect: { height: 480, width: 1200 },
+    overscan: 12
+  }))
+);
+const items = computed(
+  () => virtualized.value ? virtualizer.value.getVirtualItems().map((item) => item.index) : rows.value.map((_, index) => index)
+);
+const padTop = computed(
+  () => virtualized.value ? virtualizer.value.getVirtualItems()[0]?.start ?? 0 : 0
+);
+const padBottom = computed(
+  () => virtualized.value ? virtualizer.value.getTotalSize() - (virtualizer.value.getVirtualItems().at(-1)?.end ?? 0) : 0
+);
+const allSelected = computed(
+  () => rows.value.length > 0 && rows.value.every((row) => importer.value.review.selection.has(row.index))
+);
+function rowOf(position) {
+  return rows.value[position];
+}
+function cellOf(row, field) {
+  return importer.value.rows.cell(row.index, field.path);
+}
+function isEditing(row, field) {
+  return editing.value?.index === row.index && editing.value.field === field.path;
+}
+function edit(row, field) {
+  if (props.editable && !row.discardReason && !isEditing(row, field))
+    editing.value = { field: field.path, index: row.index };
+}
+function commit(row, field, text, move) {
+  if (text !== importer.value.rows.cell(row.index, field.path).text)
+    importer.value.rows.edit(row.index, field.path, text);
+  if (!move) {
+    editing.value = null;
+    return;
+  }
+  const next = columns.value[columns.value.findIndex((column) => column.path === field.path) + move];
+  editing.value = next ? { field: next.path, index: row.index } : null;
+}
+function cellClass(row, field) {
+  const cell = cellOf(row, field);
+  const level = cell.issue?.level;
+  if (isEditing(row, field)) return "bg-default ring-2 ring-inset ring-primary";
+  return [
+    level === "error" ? "bg-error/8 text-error ring-1 ring-inset ring-error/40" : "",
+    level === "warning" ? "bg-warning/8 text-warning ring-1 ring-inset ring-warning/35" : "",
+    cell.stored !== null && !level ? "bg-info/6" : "",
+    row.discardReason ? "text-dimmed" : "",
+    props.editable && !row.discardReason ? "cursor-text hover:ring-1 hover:ring-inset hover:ring-accented" : ""
+  ];
+}
+function rowBar(row) {
+  if (row.index === importer.value.review.inspected?.index)
+    return "shadow-[inset_3px_0_0_var(--ui-primary)]";
+  if (row.status === "blocking") return "shadow-[inset_3px_0_0_var(--ui-error)]";
+  if (row.status === "warning") return "shadow-[inset_3px_0_0_var(--ui-warning)]";
+  return "";
+}
+function toggleRow(index, event) {
+  if (event.target instanceof HTMLInputElement)
+    importer.value.review.select([index], event.target.checked);
+}
+function toggleAll(event) {
+  if (event.target instanceof HTMLInputElement)
+    importer.value.review.select(
+      rows.value.map((row) => row.index),
+      event.target.checked
+    );
+}
+function filterField(field) {
+  importer.value.review.setIssue(`${field.path}|*`);
+}
+function sourceOf(field) {
+  if (field.header) return field.header.text;
+  if (field.status === "default") return t("spreadsheet.table.defaulted");
+  return "\u2014";
+}
+</script>
+
+<template>
+  <div
+    ref="scroller"
+    data-spreadsheet-table
+    class="relative min-w-0 overflow-auto bg-default"
+    :style="{ height }"
+  >
+    <table class="w-full min-w-max border-separate border-spacing-0 text-[13px]">
+      <thead>
+        <tr>
+          <th
+            class="sticky top-0 left-0 z-30 border-e border-b border-default bg-elevated px-3 py-2 text-start text-xs font-medium text-muted"
+          >
+            <span class="flex items-center gap-2.5">
+              <input
+                v-if="selectable"
+                type="checkbox"
+                class="size-4 accent-primary"
+                :checked="allSelected"
+                :aria-label="t('spreadsheet.table.selectAll')"
+                @change="toggleAll"
+              />
+              {{ t("spreadsheet.table.row") }}
+            </span>
+          </th>
+          <th
+            v-for="field in columns"
+            :key="field.path"
+            class="sticky top-0 z-20 border-b border-default bg-elevated px-3 py-2 text-start align-bottom font-medium whitespace-nowrap"
+          >
+            <span class="flex items-center gap-1.5 text-xs text-toned">
+              <span v-if="field.group" class="font-normal text-dimmed"
+                >{{ field.group.label }} ·</span
+              >
+              {{ field.label }}
+              <button
+                v-if="importer.review.fieldIssues.get(field.path)"
+                type="button"
+                class="h-4.5 min-w-4.5 rounded-full px-1.5 text-[11px] leading-[18px] font-bold tabular-nums"
+                :class="
+  importer.review.fieldIssues.get(field.path)?.level === 'error' ? 'bg-error text-inverted' : 'bg-warning/15 text-warning ring-1 ring-warning ring-inset'
+"
+                @click="filterField(field)"
+              >
+                {{ importer.review.fieldIssues.get(field.path)?.rowCount }}
+              </button>
+            </span>
+            <span class="block max-w-52 truncate text-[11px] font-normal text-dimmed">{{
+              sourceOf(field)
+            }}</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="padTop" aria-hidden="true">
+          <td :colspan="columns.length + 1" :style="{ height: `${padTop}px` }" />
+        </tr>
+        <template v-for="position in items" :key="rowOf(position)?.index">
+          <tr
+            v-if="rowOf(position)"
+            :data-spreadsheet-row="rowOf(position).index"
+            :data-status="rowOf(position).status"
+            :class="
+  rowOf(position).index === importer.review.inspected?.index ? 'bg-primary/6' : ''
+"
+          >
+            <td
+              class="sticky left-0 z-10 border-e border-b border-default bg-default px-3"
+              :class="rowBar(rowOf(position))"
+              :style="{ height: `${ROW_HEIGHT}px` }"
+            >
+              <span class="flex items-center gap-2">
+                <input
+                  v-if="selectable"
+                  type="checkbox"
+                  class="size-4 accent-primary"
+                  :checked="importer.review.selection.has(rowOf(position).index)"
+                  :aria-label="
+  t('spreadsheet.table.selectRow', { row: rowOf(position).rowNumber })
+"
+                  @change="(event) => toggleRow(rowOf(position).index, event)"
+                />
+                <button
+                  type="button"
+                  data-spreadsheet-inspect
+                  class="flex items-center gap-1.5 rounded-md px-1 py-0.5 hover:bg-accented"
+                  :title="t('spreadsheet.table.inspectRow', { row: rowOf(position).rowNumber })"
+                  @click="importer.review.inspect(rowOf(position).index)"
+                >
+                  <span class="min-w-7 text-end font-mono text-[11.5px] text-dimmed tabular-nums">{{
+                    rowOf(position).rowNumber
+                  }}</span>
+                  <SpreadsheetImportStatusBadge
+                    :status="rowOf(position).status"
+                    :count="rowOf(position).errors.length || rowOf(position).warnings.length"
+                  />
+                  <UIcon
+                    v-if="rowOf(position).mode === 'update' && !rowOf(position).discardReason"
+                    name="i-lucide-refresh-cw"
+                    class="size-3.5 text-info"
+                    :title="t('spreadsheet.table.modeUpdate')"
+                  />
+                </button>
+              </span>
+            </td>
+            <td
+              v-for="field in columns"
+              :key="field.path"
+              :data-spreadsheet-cell="field.path"
+              class="relative max-w-72 border-b border-default p-0 whitespace-nowrap"
+              :class="cellClass(rowOf(position), field)"
+              :title="
+  cellOf(rowOf(position), field).issue?.message ?? (cellOf(rowOf(position), field).stored !== null ? t('spreadsheet.table.stored', {
+    value: cellOf(rowOf(position), field).stored ?? ''
+  }) : void 0)
+"
+              @click="edit(rowOf(position), field)"
+            >
+              <div
+                class="flex h-[37px] items-center"
+                :class="isEditing(rowOf(position), field) ? '' : 'px-3'"
+              >
+                <SpreadsheetImportCellEditor
+                  v-if="isEditing(rowOf(position), field)"
+                  :text="cellOf(rowOf(position), field).text"
+                  :choices="choicesOf(rowOf(position), field)"
+                  @commit="(text, move) => commit(rowOf(position), field, text, move)"
+                  @cancel="editing = null"
+                />
+                <slot
+                  v-else
+                  name="cell"
+                  :row="rowOf(position)"
+                  :field="field"
+                  :cell="cellOf(rowOf(position), field)"
+                >
+                  <span class="flex min-w-0 items-center gap-1.5">
+                    <UIcon
+                      v-if="cellOf(rowOf(position), field).issue?.level === 'error'"
+                      name="i-lucide-circle-x"
+                      class="size-3.5 shrink-0"
+                    />
+                    <UIcon
+                      v-else-if="cellOf(rowOf(position), field).issue?.level === 'warning'"
+                      name="i-lucide-triangle-alert"
+                      class="size-3.5 shrink-0"
+                    />
+                    <span
+                      class="truncate"
+                      :class="{
+  'italic opacity-60': !cellOf(rowOf(position), field).display,
+  'text-info': cellOf(rowOf(position), field).defaulted,
+  'line-through decoration-dimmed': rowOf(position).discardReason
+}"
+                    >
+                      {{
+                        cellOf(rowOf(position), field).display || cellOf(rowOf(position), field).text || t("spreadsheet.table.emptyCell")
+                      }}
+                    </span>
+                    <span
+                      v-if="cellOf(rowOf(position), field).created"
+                      class="shrink-0 rounded bg-primary/10 px-1 text-[10.5px] leading-4 font-semibold text-primary"
+                    >
+                      {{ t("spreadsheet.table.created") }}
+                    </span>
+                  </span>
+                </slot>
+              </div>
+              <span
+                v-if="cellOf(rowOf(position), field).edited"
+                class="absolute top-0 right-0 size-0 border-t-[9px] border-l-[9px] border-t-primary border-l-transparent"
+              />
+            </td>
+          </tr>
+        </template>
+        <tr v-if="padBottom > 0" aria-hidden="true">
+          <td :colspan="columns.length + 1" :style="{ height: `${padBottom}px` }" />
+        </tr>
+      </tbody>
+    </table>
+    <p v-if="!rows.length" class="px-6 py-16 text-center text-sm text-muted">
+      {{ t("spreadsheet.table.empty") }}
+    </p>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-table.vue.d.ts

@@ -0,0 +1,33 @@
+import type { SpreadsheetCellView, SpreadsheetFieldState, SpreadsheetImporter, SpreadsheetRecord, SpreadsheetRow } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    /** Height of the scrolling area. */
+    height?: string;
+    /** Field paths to show, in order. Defaults to every field. */
+    fields?: readonly string[];
+    /** Cells can be edited. Defaults to `true`. */
+    editable?: boolean;
+    /** Rows can be selected. Defaults to `true`. */
+    selectable?: boolean;
+};
+type __VLS_Slots = {
+    cell?: (props: {
+        row: SpreadsheetRow<SpreadsheetRecord, unknown>;
+        field: SpreadsheetFieldState;
+        cell: SpreadsheetCellView;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: string;
+    selectable: boolean;
+    fields: readonly string[];
+    editable: boolean;
+}, {}, {}, {}, 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/spreadsheet/components/{layout/spreadsheet-import-sidebar.d.vue.ts → parts/spreadsheet-import-template-button.d.vue.ts}

@@ -1,8 +1,9 @@
-import type { SpreadsheetStepItem } from '../types.js';
+import type { SpreadsheetImporter } from '../../types/index.js';
 type __VLS_Props = {
-    title: string;
-    description?: string;
-    items: SpreadsheetStepItem[];
+    importer?: SpreadsheetImporter;
+    label?: string;
+    /** File name, without extension. Defaults to the schema key. */
+    filename?: string;
 };
 declare const __VLS_export: 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 _default: typeof __VLS_export;

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-template-button.vue

@@ -0,0 +1,31 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+import { downloadSpreadsheetBlob } from "../../utils";
+const props = defineProps({
+  importer: { type: Object, required: false },
+  label: { type: String, required: false },
+  filename: { type: String, required: false }
+});
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+function download() {
+  downloadSpreadsheetBlob(
+    importer.value.template(),
+    `${props.filename ?? importer.value.schema.key}.xlsx`
+  );
+}
+</script>
+
+<template>
+  <UButton
+    data-spreadsheet-template
+    color="neutral"
+    variant="ghost"
+    size="sm"
+    icon="i-lucide-download"
+    :label="label ?? t('spreadsheet.file.template')"
+    @click="download"
+  />
+</template>

package/dist/runtime/spreadsheet/components/{layout/spreadsheet-import-sidebar.vue.d.ts → parts/spreadsheet-import-template-button.vue.d.ts}

@@ -1,8 +1,9 @@
-import type { SpreadsheetStepItem } from '../types.js';
+import type { SpreadsheetImporter } from '../../types/index.js';
 type __VLS_Props = {
-    title: string;
-    description?: string;
-    items: SpreadsheetStepItem[];
+    importer?: SpreadsheetImporter;
+    label?: string;
+    /** File name, without extension. Defaults to the schema key. */
+    filename?: string;
 };
 declare const __VLS_export: 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 _default: typeof __VLS_export;