nuxt-ui-tools 0.1.0

package/dist/runtime/spreadsheet/components/shared/SpreadsheetObjectPreviewTable.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    rows: readonly Record<string, unknown>[];
+};
+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/SpreadsheetRawPreviewTable.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    headers: readonly unknown[];
+    rows: readonly (readonly unknown[])[];
+};
+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/SpreadsheetRawPreviewTable.vue

@@ -0,0 +1,41 @@
+<script setup>
+import UTable from "@nuxt/ui/components/Table.vue";
+import { computed } from "vue";
+const props = defineProps({
+  headers: { type: Array, required: true },
+  rows: { type: Array, required: true }
+});
+const normalizedHeaders = computed(
+  () => props.headers.map((header, index) => ({
+    key: `column_${index}`,
+    label: String(header ?? `Column ${index + 1}`),
+    index
+  }))
+);
+const tableRows = computed(
+  () => props.rows.map(
+    (row, rowIndex) => normalizedHeaders.value.reduce(
+      (acc, header) => ({
+        ...acc,
+        __rowLabel: rowIndex + 1,
+        [header.key]: row[header.index] ?? ""
+      }),
+      {}
+    )
+  )
+);
+const columns = computed(() => [
+  {
+    accessorKey: "__rowLabel",
+    header: "#"
+  },
+  ...normalizedHeaders.value.map((header) => ({
+    accessorKey: header.key,
+    header: header.label
+  }))
+]);
+</script>
+
+<template>
+  <UTable :data="tableRows" :columns="columns" sticky="header" class="border-t border-default/70" />
+</template>

package/dist/runtime/spreadsheet/components/shared/SpreadsheetRawPreviewTable.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    headers: readonly unknown[];
+    rows: readonly (readonly unknown[])[];
+};
+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/SpreadsheetSummaryStats.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    items: Array<{
+        label: string;
+        value: string | number;
+        color?: 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
+    }>;
+};
+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/SpreadsheetSummaryStats.vue

@@ -0,0 +1,25 @@
+<script setup>
+const props = defineProps({
+  items: { type: Array, required: true }
+});
+</script>
+
+<template>
+  <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+    <div
+      v-for="item in props.items"
+      :key="item.label"
+      class="grid gap-1 border-l-2 pl-3"
+      :class="
+  item.color === 'success' ? 'border-success' : item.color === 'warning' ? 'border-warning' : item.color === 'error' ? 'border-error' : item.color === 'primary' ? 'border-primary' : 'border-default/70'
+"
+    >
+      <span class="text-xl font-semibold text-highlighted">
+        {{ item.value }}
+      </span>
+      <span class="text-xs text-muted">
+        {{ item.label }}
+      </span>
+    </div>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/shared/SpreadsheetSummaryStats.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    items: Array<{
+        label: string;
+        value: string | number;
+        color?: 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
+    }>;
+};
+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/SpreadsheetValuePreview.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    value: unknown;
+    compact?: boolean;
+};
+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;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/shared/SpreadsheetValuePreview.vue

@@ -0,0 +1,194 @@
+<script setup>
+import UBadge from "@nuxt/ui/components/Badge.vue";
+import UPopover from "@nuxt/ui/components/Popover.vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { formatSpreadsheetCell } from "../../utils/display";
+import { getSpreadsheetObjectEntries, isSpreadsheetRecord } from "../../utils/object";
+const props = defineProps({
+  value: { type: null, required: true },
+  compact: { type: Boolean, required: false, default: false }
+});
+const compactLimit = 2;
+const { t } = useUiToolsLocale();
+function getCompactArrayItems(value) {
+  return props.compact ? value.slice(0, compactLimit) : value;
+}
+function getCompactObjectEntries(value) {
+  const entries = getSpreadsheetObjectEntries(value);
+  return props.compact ? entries.slice(0, compactLimit) : entries;
+}
+function getValueKind(value) {
+  if (value == null) return "empty";
+  if (Array.isArray(value)) return "array";
+  if (isSpreadsheetRecord(value)) return "object";
+  return "primitive";
+}
+function getObjectSummary(value) {
+  const entries = getSpreadsheetObjectEntries(value);
+  return t("spreadsheet.common.objectSummary", { count: entries.length });
+}
+function getArraySummary(value) {
+  return t("spreadsheet.common.arraySummary", { count: value.length });
+}
+</script>
+
+<template>
+  <span v-if="value == null" class="text-muted">—</span>
+
+  <span
+    v-else-if="typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean'"
+    class="text-current"
+  >
+    {{ formatSpreadsheetCell(value) }}
+  </span>
+
+  <UPopover
+    v-else-if="Array.isArray(value)"
+    mode="hover"
+    :content="{ side: 'top', align: 'start', sideOffset: 10 }"
+    :ui="{
+  content: 'w-80 max-w-[calc(100vw-2rem)] overflow-hidden border border-default/70 bg-default p-0 shadow-lg'
+}"
+  >
+    <div class="flex flex-wrap items-center gap-2">
+      <UBadge color="neutral" variant="subtle" size="xs" class="font-mono">
+        {{ getArraySummary(value) }}
+      </UBadge>
+      <UBadge
+        v-for="(item, index) in getCompactArrayItems(value)"
+        :key="`${index}:${formatSpreadsheetCell(item)}`"
+        color="neutral"
+        variant="outline"
+        size="sm"
+        class="max-w-full"
+      >
+        <span class="truncate">{{ formatSpreadsheetCell(item) }}</span>
+      </UBadge>
+      <span v-if="props.compact && value.length > compactLimit" class="text-[11px] text-muted">
+        +{{ value.length - compactLimit }}
+      </span>
+    </div>
+
+    <template #content>
+      <div class="grid gap-3 p-3">
+        <div class="flex items-center justify-between gap-3">
+          <span class="text-sm font-semibold text-highlighted">{{
+            t("spreadsheet.common.arrayValue")
+          }}</span>
+          <UBadge color="neutral" variant="subtle" size="xs" class="font-mono">
+            {{ getArraySummary(value) }}
+          </UBadge>
+        </div>
+
+        <div class="flex flex-wrap gap-2">
+          <UBadge
+            v-for="(item, index) in value"
+            :key="`${index}:${formatSpreadsheetCell(item)}`"
+            color="neutral"
+            variant="outline"
+            size="sm"
+          >
+            {{ formatSpreadsheetCell(item) }}
+          </UBadge>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+
+  <UPopover
+    v-else-if="isSpreadsheetRecord(value)"
+    mode="hover"
+    :content="{ side: 'top', align: 'start', sideOffset: 10 }"
+    :ui="{
+  content: 'w-96 max-w-[calc(100vw-2rem)] overflow-hidden border border-default/70 bg-default p-0 shadow-lg'
+}"
+  >
+    <div class="flex flex-wrap items-center gap-2">
+      <UBadge color="neutral" variant="subtle" size="xs" class="font-mono">
+        {{ getObjectSummary(value) }}
+      </UBadge>
+      <UBadge
+        v-for="[key] in getCompactObjectEntries(value)"
+        :key="key"
+        color="neutral"
+        variant="outline"
+        size="sm"
+      >
+        {{ key }}
+      </UBadge>
+      <span
+        v-if="props.compact && getSpreadsheetObjectEntries(value).length > compactLimit"
+        class="text-[11px] text-muted"
+      >
+        +{{ getSpreadsheetObjectEntries(value).length - compactLimit }}
+      </span>
+    </div>
+
+    <template #content>
+      <div class="grid gap-3 p-3">
+        <div class="flex items-center justify-between gap-3">
+          <span class="text-sm font-semibold text-highlighted">{{
+            t("spreadsheet.common.objectValue")
+          }}</span>
+          <UBadge color="neutral" variant="subtle" size="xs" class="font-mono">
+            {{ getObjectSummary(value) }}
+          </UBadge>
+        </div>
+
+        <div class="grid gap-2">
+          <div
+            v-for="[key, entryValue] in getSpreadsheetObjectEntries(value)"
+            :key="key"
+            class="grid gap-2 rounded-md border border-default/60 bg-elevated/15 px-3 py-3"
+          >
+            <div class="flex items-center justify-between gap-3">
+              <span class="font-mono text-[11px] text-muted">{{ key }}</span>
+              <UBadge
+                v-if="getValueKind(entryValue) !== 'primitive'"
+                color="neutral"
+                variant="subtle"
+                size="xs"
+                class="font-mono"
+              >
+                {{ getValueKind(entryValue) }}
+              </UBadge>
+            </div>
+
+            <div v-if="Array.isArray(entryValue)" class="flex flex-wrap gap-2">
+              <UBadge
+                v-for="(item, index) in entryValue"
+                :key="`${key}:${index}:${formatSpreadsheetCell(item)}`"
+                color="neutral"
+                variant="outline"
+                size="sm"
+              >
+                {{ formatSpreadsheetCell(item) }}
+              </UBadge>
+            </div>
+
+            <div v-else-if="isSpreadsheetRecord(entryValue)" class="grid gap-2">
+              <div
+                v-for="[nestedKey, nestedValue] in getSpreadsheetObjectEntries(entryValue)"
+                :key="`${key}:${nestedKey}`"
+                class="flex items-start justify-between gap-3 rounded-md border border-default/50 bg-default px-3 py-2"
+              >
+                <span class="font-mono text-[11px] text-muted">{{ nestedKey }}</span>
+                <span class="max-w-[70%] text-right text-sm text-toned">{{
+                  formatSpreadsheetCell(nestedValue)
+                }}</span>
+              </div>
+            </div>
+
+            <div v-else class="text-sm text-toned">
+              {{ formatSpreadsheetCell(entryValue) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+
+  <span v-else class="text-toned">
+    {{ formatSpreadsheetCell(value) }}
+  </span>
+</template>

package/dist/runtime/spreadsheet/components/shared/SpreadsheetValuePreview.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    value: unknown;
+    compact?: boolean;
+};
+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;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/steps/SpreadsheetImportMatchingStep.d.vue.ts

@@ -0,0 +1,7 @@
+import type { SpreadsheetComponentApi } from '../types.js';
+type __VLS_Props = {
+    spreadsheet: SpreadsheetComponentApi;
+};
+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/steps/SpreadsheetImportMatchingStep.vue

@@ -0,0 +1,132 @@
+<script setup>
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { resolveTextValue } from "#ui-tools/shared/utils/render";
+import SpreadsheetMatchingSummary from "./matching/SpreadsheetMatchingSummary.vue";
+import SpreadsheetMatchingTable from "./matching/SpreadsheetMatchingTable.vue";
+const props = defineProps({
+  spreadsheet: { type: Object, required: true }
+});
+const { t } = useUiToolsLocale();
+const internals = props.spreadsheet.__internals;
+function getStaticColumnLabel(columnKey) {
+  const column = internals.rows.staticColumns.value.find((entry) => entry.key === columnKey);
+  if (!column) return columnKey;
+  return resolveTextValue(column.label, column.key);
+}
+const assignedStaticKeys = computed(
+  () => new Set(internals.rows.columnMatches.value.map((match) => match.key))
+);
+const usedColumnIndexes = computed(
+  () => /* @__PURE__ */ new Set([
+    ...internals.rows.columnMatches.value.map((match) => match.columnIndex),
+    ...internals.rows.dynamicColumnMatches.value.map((match) => match.columnIndex)
+  ])
+);
+const ignoredHeaderRows = computed(
+  () => props.spreadsheet.headerCells.value.filter((header) => !usedColumnIndexes.value.has(header.index)).map((header) => ({
+    key: `ignored:${header.index}`,
+    fileColumn: header.text || t("spreadsheet.steps.matching.columnFallback", { index: header.index + 1 })
+  }))
+);
+const expectedFieldRows = computed(
+  () => internals.rows.staticColumns.value.map((column) => {
+    const match = internals.rows.columnMatches.value.find((entry) => entry.key === column.key);
+    return {
+      key: column.key,
+      systemFieldKey: column.key,
+      systemFieldLabel: getStaticColumnLabel(column.key),
+      required: Boolean(column.required),
+      selectedHeaderIndex: match?.columnIndex ?? null,
+      selectedFileColumn: match?.header.text ?? "",
+      status: match ? "matched" : "unmatched"
+    };
+  })
+);
+const autoMappedRows = computed(
+  () => internals.rows.dynamicColumnMatches.value.map((match) => ({
+    key: `dynamic:${match.columnIndex}:${match.targetKey}`,
+    systemFieldLabel: match.targetKey,
+    selectedFileColumn: match.header.text
+  }))
+);
+const summaryItems = computed(() => [
+  {
+    key: "matched",
+    label: t("spreadsheet.steps.matching.matched"),
+    value: expectedFieldRows.value.filter((row) => row.status === "matched").length,
+    tone: "success"
+  },
+  {
+    key: "unmatched",
+    label: t("spreadsheet.steps.matching.missing"),
+    value: internals.rows.unmatchedColumns.value.length,
+    tone: "error"
+  },
+  {
+    key: "dynamic",
+    label: t("spreadsheet.steps.matching.autoMapped"),
+    value: autoMappedRows.value.length,
+    tone: "warning"
+  },
+  {
+    key: "ignored",
+    label: t("spreadsheet.steps.matching.ignored"),
+    value: ignoredHeaderRows.value.length,
+    tone: "neutral"
+  }
+]);
+function getOptionsForRow(row) {
+  return [
+    ...props.spreadsheet.headerCells.value.map((header) => {
+      const selectedMatch = internals.rows.columnMatches.value.find(
+        (entry) => entry.key === row.systemFieldKey
+      );
+      const assignedMatch = internals.rows.columnMatches.value.find(
+        (entry) => entry.columnIndex === header.index
+      );
+      const assignedToOtherField = Boolean(
+        assignedMatch && assignedMatch.key !== row.systemFieldKey
+      );
+      return {
+        key: row.systemFieldKey,
+        label: header.text || t("spreadsheet.steps.matching.columnFallback", { index: header.index + 1 }),
+        assigned: assignedToOtherField,
+        headerIndex: header.index,
+        selected: selectedMatch?.columnIndex === header.index
+      };
+    }),
+    {
+      key: "__ignore__",
+      label: t("spreadsheet.steps.matching.ignoreField"),
+      assigned: false,
+      headerIndex: -1,
+      selected: row.selectedHeaderIndex === null
+    }
+  ].sort((left, right) => {
+    if ("selected" in left && "selected" in right && left.selected !== right.selected)
+      return Number(right.selected) - Number(left.selected);
+    if (left.assigned !== right.assigned) return Number(left.assigned) - Number(right.assigned);
+    return left.label.localeCompare(right.label);
+  });
+}
+</script>
+
+<template>
+  <div class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-3">
+    <SpreadsheetMatchingSummary :items="summaryItems" />
+
+    <SpreadsheetMatchingTable
+      :expected-field-rows="expectedFieldRows"
+      :auto-mapped-rows="autoMappedRows"
+      :ignored-column-rows="ignoredHeaderRows"
+      :get-options-for-row="getOptionsForRow"
+      @assign="
+  ({ headerIndex, columnKey }) => {
+    if (!columnKey) spreadsheet.clearColumnAssignment(headerIndex);
+    else spreadsheet.assignColumn({ headerIndex, columnKey });
+  }
+"
+    />
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/steps/SpreadsheetImportMatchingStep.vue.d.ts

@@ -0,0 +1,7 @@
+import type { SpreadsheetComponentApi } from '../types.js';
+type __VLS_Props = {
+    spreadsheet: SpreadsheetComponentApi;
+};
+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/steps/SpreadsheetImportReferencesStep.d.vue.ts

@@ -0,0 +1,7 @@
+import type { SpreadsheetComponentApi } from '../types.js';
+type __VLS_Props = {
+    spreadsheet: SpreadsheetComponentApi;
+};
+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;