nuxt-ui-tools 1.11.2 → 1.13.0

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;

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

@@ -0,0 +1,27 @@
+import type { SpreadsheetImporter, SpreadsheetRecognizedValue, SpreadsheetValueAnswer, SpreadsheetValueQuestion } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    /** `open`: only values without an answer; renders nothing when there are none. */
+    only?: 'open';
+    /** Hides the values found in the lists. */
+    noRecognized?: boolean;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        questions: readonly SpreadsheetValueQuestion[];
+        recognized: readonly SpreadsheetRecognizedValue[];
+        answer: (question: SpreadsheetValueQuestion, answer: SpreadsheetValueAnswer) => void;
+    }) => unknown;
+    question?: (props: {
+        question: SpreadsheetValueQuestion;
+    }) => unknown;
+};
+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/spreadsheet/components/parts/spreadsheet-import-value-mapping.vue

@@ -0,0 +1,162 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, shallowRef } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+import SpreadsheetImportValueRow from "../internal/spreadsheet-import-value-row.vue";
+const props = defineProps({
+  importer: { type: Object, required: false },
+  only: { type: String, required: false },
+  noRecognized: { type: Boolean, required: false }
+});
+defineSlots();
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const showRecognized = shallowRef(false);
+const questions = computed(
+  () => props.only === "open" ? importer.value.values.open : importer.value.values.questions
+);
+function scopeLabel(scope) {
+  const conditions = scope.dependsOn.map(
+    (entry) => t("spreadsheet.values.condition", { label: entry.label, values: entry.values.join(", ") })
+  ).join(" \xB7 ");
+  return conditions ? t("spreadsheet.values.scope", { conditions }) : "";
+}
+const groups = computed(() => {
+  const list = [];
+  for (const question of questions.value) {
+    let group = list.find((entry) => entry.field === question.field);
+    if (!group) {
+      group = {
+        field: question.field,
+        header: question.header,
+        label: question.fieldLabel,
+        scopes: []
+      };
+      list.push(group);
+    }
+    const id = question.scope?.id ?? "";
+    const scope = group.scopes.find((entry) => entry.id === id);
+    if (scope) scope.questions.push(question);
+    else
+      group.scopes.push({
+        id,
+        label: question.scope ? scopeLabel(question.scope) : "",
+        questions: [question]
+      });
+  }
+  return list;
+});
+const labels = computed(
+  () => new Map(importer.value.columns.fields.map((field) => [field.path, field.label]))
+);
+function answer(question, value) {
+  importer.value.values.answer(question, value);
+}
+function search(field) {
+  return (text) => importer.value.values.search(field, text);
+}
+</script>
+
+<template>
+  <div
+    v-if="importer.file.loaded && (only !== 'open' || questions.length)"
+    data-spreadsheet-value-mapping
+    class="grid gap-5"
+  >
+    <slot :questions="questions" :recognized="importer.values.recognized" :answer="answer">
+      <p v-if="importer.values.loading" class="flex items-center gap-2 text-sm text-muted">
+        <span
+          class="size-3.5 animate-spin rounded-full border-2 border-accented border-t-primary"
+        />
+        {{ t("spreadsheet.values.loading") }}
+      </p>
+      <section v-for="group in groups" :key="group.field" class="grid gap-2">
+        <div class="flex flex-wrap items-baseline gap-x-2">
+          <h4 class="text-[11px] font-semibold tracking-[0.08em] text-dimmed uppercase">
+            {{ group.label }}
+          </h4>
+          <span v-if="group.header" class="text-xs text-dimmed">· « {{ group.header }} »</span>
+        </div>
+        <div
+          class="divide-y divide-default overflow-hidden rounded-xl border border-default bg-default"
+        >
+          <div
+            class="hidden grid-cols-[minmax(0,1fr)_4.5rem_minmax(0,1.15fr)_6.5rem] gap-x-4 bg-elevated/50 px-4 py-2 text-[11.5px] font-medium text-muted sm:grid"
+          >
+            <span>{{ t("spreadsheet.values.value") }}</span>
+            <span>{{ t("spreadsheet.values.rows") }}</span>
+            <span>{{ t("spreadsheet.values.answer") }}</span>
+            <span />
+          </div>
+          <template v-for="scope in group.scopes" :key="scope.id">
+            <div
+              v-if="scope.label"
+              data-spreadsheet-value-scope
+              class="flex items-center gap-2 bg-elevated/30 px-4 py-1.5 text-xs font-medium text-toned"
+            >
+              <UIcon name="i-lucide-split" class="size-3.5 shrink-0 text-dimmed" />
+              <span class="truncate">{{ scope.label }}</span>
+            </div>
+            <template v-for="question in scope.questions" :key="question.id">
+              <slot name="question" :question="question">
+                <SpreadsheetImportValueRow
+                  :question="question"
+                  :choices="question.choices"
+                  :search="search(question.field)"
+                  @answer="(value2) => answer(question, value2)"
+                />
+              </slot>
+            </template>
+          </template>
+        </div>
+      </section>
+      <div
+        v-if="!groups.length && only !== 'open'"
+        class="flex items-center gap-3 rounded-xl border border-default bg-default px-4 py-3.5"
+      >
+        <span
+          class="grid size-8 shrink-0 place-items-center rounded-full bg-success/10 text-success"
+        >
+          <UIcon name="i-lucide-check" class="size-4" />
+        </span>
+        <span class="font-medium text-highlighted">{{ t("spreadsheet.values.nothing") }}</span>
+      </div>
+      <div
+        v-if="!noRecognized && only !== 'open' && importer.values.recognized.length"
+        class="overflow-hidden rounded-xl border border-default bg-default"
+      >
+        <button
+          type="button"
+          class="flex w-full items-center gap-2 px-4 py-3 text-start text-sm font-medium text-toned hover:bg-elevated/60"
+          :aria-expanded="showRecognized"
+          @click="showRecognized = !showRecognized"
+        >
+          <UIcon
+            name="i-lucide-chevron-right"
+            class="size-4 text-dimmed transition-transform"
+            :class="showRecognized ? 'rotate-90' : ''"
+          />
+          {{ t("spreadsheet.values.recognized", { count: importer.values.recognized.length }) }}
+        </button>
+        <ul v-if="showRecognized" class="divide-y divide-default border-t border-default">
+          <li
+            v-for="value in importer.values.recognized"
+            :key="`${value.field}::${value.scope ?? ''}::${value.value}`"
+            class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-0.5 px-4 py-2.5 text-sm sm:grid-cols-[minmax(0,10rem)_minmax(0,1fr)_minmax(0,1fr)_auto]"
+          >
+            <span class="truncate text-xs text-dimmed">{{ labels.get(value.field) }}</span>
+            <span class="truncate font-medium text-highlighted">{{ value.value }}</span>
+            <span class="flex min-w-0 items-center gap-1.5 text-muted">
+              <UIcon name="i-lucide-arrow-right" class="size-3.5 shrink-0 text-dimmed" />
+              <span class="truncate">{{ value.option.label }}</span>
+            </span>
+            <span class="text-xs text-dimmed tabular-nums">{{
+              t("spreadsheet.values.rowCount", { count: value.rows.length })
+            }}</span>
+          </li>
+        </ul>
+      </div>
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,27 @@
+import type { SpreadsheetImporter, SpreadsheetRecognizedValue, SpreadsheetValueAnswer, SpreadsheetValueQuestion } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    /** `open`: only values without an answer; renders nothing when there are none. */
+    only?: 'open';
+    /** Hides the values found in the lists. */
+    noRecognized?: boolean;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        questions: readonly SpreadsheetValueQuestion[];
+        recognized: readonly SpreadsheetRecognizedValue[];
+        answer: (question: SpreadsheetValueQuestion, answer: SpreadsheetValueAnswer) => void;
+    }) => unknown;
+    question?: (props: {
+        question: SpreadsheetValueQuestion;
+    }) => unknown;
+};
+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/spreadsheet/components/spreadsheet-import-root.d.vue.ts

@@ -0,0 +1,24 @@
+import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
+import type { SpreadsheetImporter, SpreadsheetSteps } from '../types/index.js';
+/**
+ * Provides an importer (and its steps, for a wizard) to every `SpreadsheetImport*` part inside.
+ * Renders nothing of its own.
+ */
+type __VLS_Props = {
+    importer: SpreadsheetImporter;
+    steps?: SpreadsheetSteps;
+    locale?: UiToolsLocale<UiToolsMessages>;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/spreadsheet/components/spreadsheet-import-root.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { computed } from "vue";
+import { provideUiToolsLocale, useUiToolsLocaleRef } from "#ui-tools/i18n";
+import { provideSpreadsheetImport } from "../composables/use-spreadsheet-import-context";
+const props = defineProps({
+  importer: { type: Object, required: true },
+  steps: { type: Object, required: false },
+  locale: { type: Object, required: false }
+});
+provideUiToolsLocale(useUiToolsLocaleRef(computed(() => props.locale)));
+provideSpreadsheetImport({
+  get importer() {
+    return props.importer;
+  },
+  get steps() {
+    return props.steps ?? null;
+  }
+});
+</script>
+
+<template>
+  <slot />
+</template>