nuxt-ui-tools 1.11.2 → 1.13.0

package/dist/runtime/spreadsheet/components/{shared/spreadsheet-object-preview-table.vue.d.ts → parts/spreadsheet-import-submit-button.d.vue.ts}

@@ -1,6 +1,7 @@
-import type { SpreadsheetRecord } from '../../types/index.js';
+import type { SpreadsheetImporter } from '../../types/index.js';
 type __VLS_Props = {
-    rows: readonly SpreadsheetRecord[];
+    importer?: SpreadsheetImporter;
+    label?: 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-submit-button.vue

@@ -0,0 +1,27 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+const props = defineProps({
+  importer: { type: Object, required: false },
+  label: { type: String, required: false }
+});
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const count = computed(() => importer.value.readiness.importable);
+function run() {
+  void importer.value.submit.run();
+}
+</script>
+
+<template>
+  <UButton
+    data-spreadsheet-submit
+    icon="i-lucide-check"
+    :label="label ?? t('spreadsheet.nav.import', { count: count.toLocaleString() })"
+    :disabled="!importer.readiness.canSubmit || importer.submit.status === 'running'"
+    :loading="importer.submit.status === 'running'"
+    @click="run"
+  />
+</template>

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

@@ -0,0 +1,8 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    label?: 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;
+export default _default;

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

@@ -0,0 +1,16 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+type __VLS_Slots = {
+    rows?: () => 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-summary.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+const props = defineProps({
+  importer: { type: Object, required: false }
+});
+defineSlots();
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const created = computed(
+  () => importer.value.values.questions.filter((question) => question.answer?.action === "create").map((question) => question.value)
+);
+const edited = computed(
+  () => importer.value.rows.all.reduce((total, row) => total + row.edited.length, 0)
+);
+const lines = computed(() => {
+  const rows = importer.value.rows;
+  return [
+    { key: "file", value: importer.value.file.name },
+    { key: "toImport", strong: true, value: rows.importable.length.toLocaleString() },
+    ...rows.byMode.update ? [
+      { key: "create", value: rows.byMode.create.toLocaleString() },
+      { key: "update", value: rows.byMode.update.toLocaleString() }
+    ] : [],
+    ...rows.invalid.length ? [{ key: "invalid", value: rows.invalid.length.toLocaleString() }] : [],
+    ...rows.discarded.length ? [{ key: "discarded", value: rows.discarded.length.toLocaleString() }] : [],
+    ...edited.value ? [{ key: "edited", value: edited.value.toLocaleString() }] : [],
+    ...created.value.length ? [{ key: "created", value: created.value.join(", ") }] : []
+  ];
+});
+</script>
+
+<template>
+  <dl data-spreadsheet-summary class="grid border-t border-default">
+    <div
+      v-for="line in lines"
+      :key="line.key"
+      class="grid grid-cols-[minmax(0,14rem)_minmax(0,1fr)] gap-4 border-b border-default py-2.5 text-sm"
+    >
+      <dt class="text-muted">{{ t(`spreadsheet.summary.${line.key}`) }}</dt>
+      <dd
+        class="min-w-0 break-words text-highlighted tabular-nums"
+        :class="'strong' in line ? 'font-semibold' : ''"
+      >
+        {{ line.value }}
+      </dd>
+    </div>
+    <slot name="rows" />
+  </dl>
+</template>

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

@@ -0,0 +1,16 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+type __VLS_Slots = {
+    rows?: () => 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/{layout/spreadsheet-import-file-bar.d.vue.ts → parts/spreadsheet-import-table-toolbar.d.vue.ts}

@@ -1,8 +1,6 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
 type __VLS_Props = {
-    fileName?: string;
-    totalSheets: number;
-    rowCount: number;
-    hasWorkbook: boolean;
+    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-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;
+    };
+};