nuxt-ui-tools 1.11.2 → 1.13.0

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-row-inspector.vue

@@ -0,0 +1,276 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, shallowRef } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import {
+  useSpreadsheetImporter,
+  useSpreadsheetStepsContext
+} 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 LEVELS = ["info", "warning", "error"];
+const props = defineProps({
+  importer: { type: Object, required: false, default: void 0 },
+  height: { type: String, required: false, default: "30rem" }
+});
+defineSlots();
+const importer = useSpreadsheetImporter(() => props.importer);
+const steps = useSpreadsheetStepsContext();
+const { t } = useUiToolsLocale();
+const editing = shallowRef(null);
+const row = computed(() => importer.value.review.inspected);
+const fields = computed(() => importer.value.columns.fields);
+const labels = computed(() => new Map(fields.value.map((field) => [field.path, field.label])));
+const issues = computed(
+  () => [...row.value?.issues ?? []].filter((issue) => issue.code !== "value.skipped").sort((left, right) => LEVELS.indexOf(right.level) - LEVELS.indexOf(left.level))
+);
+const counts = computed(
+  () => new Map(importer.value.review.issueTypes.map((type) => [type.id, type.rowCount]))
+);
+const position = computed(() => importer.value.review.position);
+function choicesOf(path) {
+  const field = fields.value.find((entry) => entry.path === path);
+  return field?.kind === "select" && row.value ? importer.value.rows.cell(row.value.index, path).choices.map((option) => option.label) : void 0;
+}
+function commit(path, text) {
+  const current = row.value;
+  if (current && text !== importer.value.rows.cell(current.index, path).text)
+    importer.value.rows.edit(current.index, path, text);
+  editing.value = null;
+}
+function revert(path) {
+  if (row.value) importer.value.rows.revert(row.value.index, path);
+}
+function filterIssue(issue) {
+  importer.value.review.setIssue(`${issue.field}|${issue.code}`);
+}
+function toggleDiscard() {
+  const current = row.value;
+  if (!current) return;
+  if (current.discardReason === "manual") importer.value.rows.restore([current.index]);
+  else importer.value.rows.discard([current.index]);
+}
+function openValues() {
+  steps.value?.goTo("values");
+}
+</script>
+
+<template>
+  <aside
+    v-if="row"
+    data-spreadsheet-inspector
+    class="flex min-w-0 flex-col bg-default"
+    :style="{ height }"
+    :aria-label="t('spreadsheet.inspector.title', { row: row.rowNumber })"
+  >
+    <div class="flex items-center gap-2.5 border-b border-default px-4 py-3">
+      <b class="text-[15px] font-semibold text-highlighted tabular-nums">{{
+        t("spreadsheet.inspector.title", { row: row.rowNumber })
+      }}</b>
+      <SpreadsheetImportStatusBadge :status="row.status" full />
+      <span
+        v-if="row.mode === 'update' && !row.discardReason"
+        class="inline-flex h-5 items-center gap-1 rounded-md bg-info/10 px-1.5 text-[11.5px] font-semibold text-info"
+      >
+        <UIcon name="i-lucide-refresh-cw" class="size-3" />{{ t("spreadsheet.table.modeUpdate") }}
+      </span>
+      <UButton
+        class="ms-auto"
+        size="sm"
+        color="neutral"
+        variant="ghost"
+        square
+        icon="i-lucide-x"
+        :aria-label="t('spreadsheet.inspector.close')"
+        @click="importer.review.inspect(null)"
+      />
+    </div>
+    <div
+      class="flex items-center justify-between gap-2 border-b border-default px-4 py-2 text-[12.5px] text-muted"
+    >
+      <UButton
+        size="xs"
+        color="neutral"
+        variant="outline"
+        square
+        icon="i-lucide-chevron-left"
+        :disabled="position.current <= 1"
+        :aria-label="t('spreadsheet.inspector.previous')"
+        @click="importer.review.previous()"
+      />
+      <span class="tabular-nums">
+        {{
+          position.current ? t("spreadsheet.inspector.position", {
+  current: position.current,
+  total: position.total
+}) : t("spreadsheet.inspector.positionNone", { total: position.total })
+        }}
+      </span>
+      <UButton
+        size="xs"
+        color="neutral"
+        variant="outline"
+        square
+        icon="i-lucide-chevron-right"
+        :disabled="position.current >= position.total"
+        :aria-label="t('spreadsheet.inspector.next')"
+        @click="importer.review.next()"
+      />
+    </div>
+
+    <div class="grid flex-1 content-start gap-4 overflow-auto px-4 pt-3.5 pb-4">
+      <p
+        v-if="row.discardReason"
+        class="flex items-center gap-2 rounded-lg bg-elevated px-3 py-2 text-[13px] text-muted"
+      >
+        <UIcon name="i-lucide-ban" class="size-4 shrink-0" />{{
+          t(`spreadsheet.table.reasons.${row.discardReason}`)
+        }}
+      </p>
+      <section class="grid gap-2">
+        <h5 class="text-[11px] font-semibold tracking-[0.08em] text-dimmed uppercase">
+          {{ t("spreadsheet.inspector.issues") }}
+        </h5>
+        <template v-if="issues.length">
+          <div
+            v-for="(issue, index) in issues"
+            :key="`${issue.field}-${issue.code}-${index}`"
+            class="grid gap-1.5 rounded-lg border px-3 py-2.5"
+            :class="
+  issue.level === 'error' ? 'border-error/30 bg-error/4' : issue.level === 'warning' ? 'border-warning/30 bg-warning/4' : 'border-default'
+"
+          >
+            <slot name="issue" :issue="issue">
+              <div class="flex items-start gap-2">
+                <UIcon
+                  :name="issue.level === 'error' ? 'i-lucide-circle-x' : 'i-lucide-triangle-alert'"
+                  class="mt-0.5 size-4 shrink-0"
+                  :class="issue.level === 'error' ? 'text-error' : 'text-warning'"
+                />
+                <div class="grid min-w-0 gap-0.5">
+                  <span v-if="issue.field" class="text-xs font-semibold text-toned">{{
+                    labels.get(issue.field) ?? issue.field
+                  }}</span>
+                  <span class="text-[13px] text-highlighted">{{ issue.message }}</span>
+                </div>
+              </div>
+              <div class="flex flex-wrap gap-x-3 ps-6">
+                <UButton
+                  v-if="steps && issue.code === 'value.unknown'"
+                  variant="link"
+                  size="xs"
+                  class="px-0"
+                  :label="t('spreadsheet.inspector.answerIt')"
+                  @click="openValues"
+                />
+                <UButton
+                  v-if="issue.field && (counts.get(`${issue.field}|${issue.code}`) ?? 0) > 1"
+                  variant="link"
+                  color="neutral"
+                  size="xs"
+                  class="px-0"
+                  :label="
+  t('spreadsheet.inspector.allRows', {
+    count: counts.get(`${issue.field}|${issue.code}`) ?? 0
+  })
+"
+                  @click="filterIssue(issue)"
+                />
+              </div>
+            </slot>
+          </div>
+        </template>
+        <p v-else class="flex items-center gap-2 text-[13px] text-success">
+          <UIcon name="i-lucide-circle-check" class="size-4" />{{
+            t("spreadsheet.inspector.noIssue")
+          }}
+        </p>
+      </section>
+
+      <section class="grid gap-2">
+        <h5 class="text-[11px] font-semibold tracking-[0.08em] text-dimmed uppercase">
+          {{ t("spreadsheet.inspector.values") }}
+        </h5>
+        <dl class="divide-y divide-default overflow-hidden rounded-lg border border-default">
+          <div
+            v-for="field in fields"
+            :key="field.path"
+            class="grid gap-0.5 px-3 py-2"
+            :class="row.fieldIssues[field.path]?.level === 'error' ? 'bg-error/4' : ''"
+          >
+            <dt class="text-xs text-muted">{{ field.label }}</dt>
+            <dd class="min-w-0">
+              <div
+                v-if="editing === field.path"
+                class="h-8 overflow-hidden rounded-md ring-2 ring-primary ring-inset"
+              >
+                <SpreadsheetImportCellEditor
+                  :text="importer.rows.cell(row.index, field.path).text"
+                  :choices="choicesOf(field.path)"
+                  @commit="(text) => commit(field.path, text)"
+                  @cancel="editing = null"
+                />
+              </div>
+              <button
+                v-else
+                type="button"
+                class="w-full truncate rounded px-1 py-0.5 text-start text-[13px] text-highlighted hover:bg-elevated"
+                :class="{
+  'italic text-dimmed': !importer.rows.cell(row.index, field.path).display
+}"
+                :disabled="Boolean(row.discardReason)"
+                @click="editing = field.path"
+              >
+                {{
+                  importer.rows.cell(row.index, field.path).display || t("spreadsheet.table.emptyCell")
+                }}
+              </button>
+              <p
+                v-if="importer.rows.cell(row.index, field.path).edited"
+                class="flex items-center gap-1 px-1 text-[11.5px] text-dimmed"
+              >
+                {{
+                  t("spreadsheet.table.edited", {
+  value: importer.rows.cell(row.index, field.path).original || t("spreadsheet.table.emptyCell")
+})
+                }}
+                <UButton
+                  variant="link"
+                  size="xs"
+                  class="px-0"
+                  :label="t('spreadsheet.inspector.revert')"
+                  @click="revert(field.path)"
+                />
+              </p>
+              <p
+                v-else-if="importer.rows.cell(row.index, field.path).stored !== null"
+                class="px-1 text-[11.5px] text-info"
+              >
+                {{
+                  t("spreadsheet.table.stored", {
+  value: importer.rows.cell(row.index, field.path).stored ?? ""
+})
+                }}
+              </p>
+            </dd>
+          </div>
+        </dl>
+      </section>
+    </div>
+    <div class="border-t border-default px-4 py-2.5">
+      <UButton
+        v-if="!row.discardReason || row.discardReason === 'manual'"
+        size="sm"
+        color="neutral"
+        variant="outline"
+        block
+        :icon="row.discardReason ? 'i-lucide-rotate-ccw' : 'i-lucide-ban'"
+        :label="
+  row.discardReason ? t('spreadsheet.inspector.restore') : t('spreadsheet.inspector.discard')
+"
+        @click="toggleDiscard"
+      />
+    </div>
+  </aside>
+</template>

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

@@ -0,0 +1,22 @@
+import type { SpreadsheetImporter, SpreadsheetRowIssue } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    height?: string;
+};
+type __VLS_Slots = {
+    issue?: (props: {
+        issue: SpreadsheetRowIssue;
+    }) => 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;
+    importer: SpreadsheetImporter;
+}, {}, {}, {}, 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-source-settings.d.vue.ts

@@ -0,0 +1,11 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    /** Shows the sheet and header-row pickers even when detection is sure. */
+    always?: boolean;
+    /** Hides the preview of the rows around the header row. */
+    noPreview?: boolean;
+};
+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;
+export default _default;

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-source-settings.vue

@@ -0,0 +1,164 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import USelect from "@nuxt/ui/components/Select.vue";
+import { computed, shallowRef } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+const props = defineProps({
+  importer: { type: Object, required: false },
+  always: { type: Boolean, required: false },
+  noPreview: { type: Boolean, required: false }
+});
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const editing = shallowRef(false);
+const layout = computed(() => importer.value.layout);
+const matched = computed(
+  () => importer.value.columns.fields.filter((field) => field.status === "matched").length
+);
+const problem = computed(() => {
+  if (!layout.value.detection?.best) return "no-match";
+  if (!matched.value) return "no-match";
+  if (layout.value.ambiguous) return "ambiguous";
+  return null;
+});
+const showPickers = computed(
+  () => props.always || editing.value || problem.value !== null || !layout.value.detected
+);
+const sheetItems = computed(
+  () => importer.value.file.sheets.map((sheet) => ({
+    label: t("spreadsheet.file.sheetOption", { count: sheet.rowCount, name: sheet.name }),
+    value: sheet.name
+  }))
+);
+const rowItems = computed(
+  () => layout.value.candidates.map((row) => ({
+    label: row.preview.length ? t("spreadsheet.file.rowOption", { preview: row.preview.join(", "), row: row.rowNumber }) : t("spreadsheet.file.emptyRow", { row: row.rowNumber }),
+    value: row.index
+  }))
+);
+const previewWidth = computed(
+  () => Math.min(Math.max(...layout.value.preview.map((row) => row.cells.length), 0), 8)
+);
+function selectSheet(value) {
+  importer.value.layout.setSheet(value);
+}
+function selectRow(value) {
+  importer.value.layout.setHeaderRow(value);
+}
+</script>
+
+<template>
+  <div v-if="importer.file.loaded" data-spreadsheet-source-settings class="grid gap-3">
+    <div v-if="!showPickers" class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted">
+      <UIcon name="i-lucide-circle-check" class="size-4 text-success" />
+      <span>
+        <b class="font-medium text-highlighted">{{ layout.sheet }}</b>
+        · {{ t("spreadsheet.file.headerRow") }}
+        <b class="font-medium text-highlighted tabular-nums">{{ layout.headerRowNumber }}</b>
+      </span>
+      <span class="text-dimmed">· {{ t("spreadsheet.file.detected") }}</span>
+      <span v-if="layout.headerRow > 0" class="text-dimmed">
+        · {{ t("spreadsheet.file.titleRows", { count: layout.headerRow }) }}
+      </span>
+      <UButton
+        variant="link"
+        color="neutral"
+        size="xs"
+        class="px-0"
+        icon="i-lucide-pencil"
+        :aria-label="t('spreadsheet.file.sheet')"
+        @click="editing = true"
+      />
+    </div>
+    <template v-else>
+      <div class="grid gap-3 sm:grid-cols-2">
+        <label class="grid min-w-0 gap-1.5 text-sm font-medium text-toned">
+          {{ t("spreadsheet.file.sheet") }}
+          <USelect
+            :model-value="layout.sheet ?? void 0"
+            :items="sheetItems"
+            class="w-full"
+            @update:model-value="selectSheet"
+          />
+        </label>
+        <label class="grid min-w-0 gap-1.5 text-sm font-medium text-toned">
+          {{ t("spreadsheet.file.headerRow") }}
+          <USelect
+            :model-value="layout.headerRow"
+            :items="rowItems"
+            class="w-full"
+            @update:model-value="selectRow"
+          />
+        </label>
+      </div>
+      <p
+        v-if="problem === 'no-match'"
+        class="flex flex-wrap items-center gap-1.5 text-sm text-error"
+      >
+        <UIcon name="i-lucide-circle-x" class="size-4 shrink-0" />
+        {{ t("spreadsheet.file.noMatch") }}
+        <UButton
+          v-if="layout.detection?.best && !layout.detected"
+          variant="link"
+          size="xs"
+          class="px-0"
+          :label="t('spreadsheet.file.useDetected')"
+          @click="layout.redetect()"
+        />
+      </p>
+      <p v-else-if="problem === 'ambiguous'" class="flex items-center gap-1.5 text-sm text-warning">
+        <UIcon name="i-lucide-triangle-alert" class="size-4 shrink-0" />
+        {{ t("spreadsheet.file.ambiguous") }}
+      </p>
+      <p v-else-if="layout.detected" class="flex items-center gap-1.5 text-sm text-dimmed">
+        <UIcon name="i-lucide-circle-check" class="size-4 text-success" />
+        {{ t("spreadsheet.file.detected") }}
+      </p>
+    </template>
+
+    <div
+      v-if="!noPreview && layout.preview.length"
+      class="overflow-x-auto rounded-lg border border-default bg-default"
+    >
+      <table class="w-full border-collapse text-[12.5px]">
+        <tbody>
+          <tr
+            v-for="row in layout.preview"
+            :key="row.rowNumber"
+            :class="{
+  'text-dimmed': row.kind === 'title',
+  'bg-primary/6 font-semibold text-highlighted': row.kind === 'header',
+  'text-toned': row.kind === 'data'
+}"
+          >
+            <td
+              class="w-10 border-e border-default px-2 py-1.5 text-end font-mono text-[11px] text-dimmed tabular-nums"
+            >
+              {{ row.rowNumber }}
+            </td>
+            <td
+              v-for="index in previewWidth"
+              :key="index"
+              class="max-w-40 truncate border-b border-default/60 px-2.5 py-1.5 whitespace-nowrap"
+              :class="row.kind === 'title' ? 'italic' : ''"
+            >
+              {{ row.cells[index - 1] }}
+            </td>
+            <td
+              class="w-full border-b border-default/60 px-2 py-1.5 text-end text-[11px] font-normal text-dimmed"
+            >
+              <template v-if="row.kind === 'title'">{{
+                t("spreadsheet.file.previewTitle")
+              }}</template>
+              <template v-else-if="row.kind === 'header'">{{
+                t("spreadsheet.file.previewHeader")
+              }}</template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,11 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    /** Shows the sheet and header-row pickers even when detection is sure. */
+    always?: boolean;
+    /** Hides the preview of the rows around the header row. */
+    noPreview?: boolean;
+};
+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;
+export default _default;

package/dist/runtime/spreadsheet/components/{shared/spreadsheet-value-preview.d.vue.ts → parts/spreadsheet-import-stat.d.vue.ts}

@@ -1,10 +1,13 @@
-import type { SpreadsheetValue } from '../../types/index.js';
+/** One KPI tile, in the style of `SpreadsheetImportStats`. For tiles of your own. */
 type __VLS_Props = {
-    value: SpreadsheetValue;
-    compact?: boolean;
+    value: string | number;
+    label: string;
+    hint?: string;
+    tone?: 'neutral' | 'success' | 'error' | 'warning' | 'info';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    compact: boolean;
+    hint: string;
+    tone: "neutral" | "success" | "error" | "warning" | "info";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-stat.vue

@@ -0,0 +1,30 @@
+<script setup>
+defineProps({
+  value: { type: [String, Number], required: true },
+  label: { type: String, required: true },
+  hint: { type: String, required: false, default: void 0 },
+  tone: { type: String, required: false, default: "neutral" }
+});
+</script>
+
+<template>
+  <div
+    data-spreadsheet-stat
+    class="grid min-w-0 content-start gap-0.5 rounded-lg border border-default bg-elevated/40 px-3.5 py-3"
+  >
+    <b
+      class="text-[22px] leading-7 font-light tracking-[-0.02em] tabular-nums"
+      :class="{
+  'text-highlighted': tone === 'neutral',
+  'text-success': tone === 'success',
+  'text-error': tone === 'error',
+  'text-warning': tone === 'warning',
+  'text-info': tone === 'info'
+}"
+    >
+      {{ typeof value === "number" ? value.toLocaleString() : value }}
+    </b>
+    <span class="truncate text-xs text-muted">{{ label }}</span>
+    <span v-if="hint" class="truncate text-[11.5px] text-dimmed">{{ hint }}</span>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/{shared/spreadsheet-value-preview.vue.d.ts → parts/spreadsheet-import-stat.vue.d.ts}

@@ -1,10 +1,13 @@
-import type { SpreadsheetValue } from '../../types/index.js';
+/** One KPI tile, in the style of `SpreadsheetImportStats`. For tiles of your own. */
 type __VLS_Props = {
-    value: SpreadsheetValue;
-    compact?: boolean;
+    value: string | number;
+    label: string;
+    hint?: string;
+    tone?: 'neutral' | 'success' | 'error' | 'warning' | 'info';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    compact: boolean;
+    hint: string;
+    tone: "neutral" | "success" | "error" | "warning" | "info";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,26 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        importable: number;
+        invalid: number;
+        discarded: number;
+        byMode: {
+            create: number;
+            update: number;
+            skip: number;
+        };
+    }) => unknown;
+    extra?: () => 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-stats.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+import SpreadsheetImportStat from "./spreadsheet-import-stat.vue";
+const props = defineProps({
+  importer: { type: Object, required: false }
+});
+defineSlots();
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const rows = computed(() => importer.value.rows);
+const warnings = computed(() => rows.value.importable.filter((row) => row.warnings.length).length);
+const blocking = computed(
+  () => rows.value.invalid.reduce((total, row) => total + row.errors.length, 0)
+);
+const importableHint = computed(() => {
+  if (rows.value.byMode.update)
+    return `${t("spreadsheet.stats.create", { count: rows.value.byMode.create })} \xB7 ${t("spreadsheet.stats.update", { count: rows.value.byMode.update })}`;
+  return warnings.value ? t("spreadsheet.stats.warnings", { count: warnings.value }) : void 0;
+});
+</script>
+
+<template>
+  <div
+    data-spreadsheet-stats
+    class="grid grid-cols-2 gap-2.5 sm:grid-cols-[repeat(auto-fit,minmax(9rem,1fr))]"
+  >
+    <slot
+      :importable="rows.importable.length"
+      :invalid="rows.invalid.length"
+      :discarded="rows.discarded.length"
+      :by-mode="rows.byMode"
+    >
+      <SpreadsheetImportStat
+        :value="rows.importable.length"
+        :label="t('spreadsheet.stats.importable')"
+        :hint="importableHint"
+        tone="success"
+      />
+      <SpreadsheetImportStat
+        :value="rows.invalid.length"
+        :label="t('spreadsheet.stats.invalid')"
+        :hint="blocking ? t('spreadsheet.stats.blocking', { count: blocking }) : void 0"
+        :tone="rows.invalid.length ? 'error' : 'neutral'"
+      />
+      <SpreadsheetImportStat
+        v-if="rows.discarded.length"
+        :value="rows.discarded.length"
+        :label="t('spreadsheet.stats.discarded')"
+      />
+    </slot>
+    <slot name="extra" />
+  </div>
+</template>

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

@@ -0,0 +1,26 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        importable: number;
+        invalid: number;
+        discarded: number;
+        byMode: {
+            create: number;
+            update: number;
+            skip: number;
+        };
+    }) => unknown;
+    extra?: () => 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;
+    };
+};