nuxt-ui-tools 0.1.0

package/dist/runtime/spreadsheet/components/steps/structure/SpreadsheetStructurePreviewTable.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { computed, ref } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+const props = defineProps({
+  rows: { type: Array, required: true },
+  columnCount: { type: Number, required: true },
+  selectedHeaderRowIndex: { type: Number, required: true }
+});
+const { t } = useUiToolsLocale();
+const emit = defineEmits(["selectHeader"]);
+const viewportRef = ref(null);
+const rowVirtualizer = useVirtualizer(
+  computed(() => ({
+    count: props.rows.length,
+    getScrollElement: () => viewportRef.value,
+    estimateSize: () => 38,
+    overscan: 12,
+    getItemKey: (index) => props.rows[index]?.absoluteIndex ?? index
+  }))
+);
+const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems());
+const totalSize = computed(() => rowVirtualizer.value.getTotalSize());
+function formatHeaderCell(cell) {
+  return String(cell ?? "").trim();
+}
+function getStatusCellTone(value) {
+  return String(value ?? "").toLowerCase() === "fail" ? "text-error" : "text-toned";
+}
+</script>
+
+<template>
+  <div class="grid min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-3">
+    <div class="flex items-center justify-between gap-3">
+      <h3 class="text-[13px] font-semibold text-highlighted">
+        {{ t("spreadsheet.steps.structure.previewTitle") }} —
+        {{
+          t("spreadsheet.steps.structure.headerDetectedAtRow", { row: selectedHeaderRowIndex + 1 })
+        }}
+      </h3>
+
+      <div
+        class="inline-flex items-center gap-1.5 bg-info/10 px-2.5 py-1 font-mono text-[11px] font-medium text-info"
+      >
+        <span class="size-1.5 rounded-full bg-info" />
+        <span>{{ t("spreadsheet.steps.structure.autoDetected") }}</span>
+      </div>
+    </div>
+
+    <div
+      ref="viewportRef"
+      class="min-h-[26rem] max-h-[calc(100dvh-18rem)] overflow-auto border border-default/70 bg-default"
+    >
+      <div class="relative min-w-max" :style="{ height: `${totalSize}px` }">
+        <div
+          v-for="virtualRow in virtualRows"
+          :key="String(virtualRow.key)"
+          class="absolute left-0 top-0 min-w-max"
+          :style="{ transform: `translateY(${virtualRow.start}px)` }"
+        >
+          <div
+            v-if="rows[virtualRow.index]"
+            class="flex cursor-pointer border-b border-default/50 last:border-b-0"
+            :class="
+  rows[virtualRow.index].absoluteIndex === selectedHeaderRowIndex ? 'bg-default' : rows[virtualRow.index].absoluteIndex < selectedHeaderRowIndex ? 'bg-elevated/20' : ''
+"
+            @click="emit('selectHeader', rows[virtualRow.index].absoluteIndex)"
+          >
+            <div
+              class="w-12 min-w-12 px-3 py-2 align-middle font-mono text-[11px]"
+              :class="
+  rows[virtualRow.index].absoluteIndex === selectedHeaderRowIndex ? 'border-y border-l-[3px] border-inverted font-semibold text-highlighted' : 'text-muted'
+"
+            >
+              {{ rows[virtualRow.index].absoluteIndex + 1 }}
+            </div>
+
+            <div
+              v-for="columnIndex in columnCount"
+              :key="`${rows[virtualRow.index].absoluteIndex}:${columnIndex}`"
+              class="min-w-24 max-w-40 truncate px-3 py-2 font-mono text-[11px]"
+              :class="
+  rows[virtualRow.index].absoluteIndex === selectedHeaderRowIndex ? 'border-y border-inverted font-semibold text-highlighted' : columnIndex === columnCount ? getStatusCellTone(rows[virtualRow.index].cells[columnIndex - 1]) : rows[virtualRow.index].absoluteIndex < selectedHeaderRowIndex ? 'text-muted' : 'text-toned'
+"
+            >
+              {{
+                rows[virtualRow.index].absoluteIndex === selectedHeaderRowIndex ? formatHeaderCell(rows[virtualRow.index].cells[columnIndex - 1]) : String(rows[virtualRow.index].cells[columnIndex - 1] ?? "")
+              }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/steps/structure/SpreadsheetStructurePreviewTable.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    rows: Array<{
+        absoluteIndex: number;
+        cells: readonly unknown[];
+    }>;
+    columnCount: number;
+    selectedHeaderRowIndex: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    selectHeader: (rowIndex: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelectHeader?: ((rowIndex: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/steps/structure/SpreadsheetStructureSheetList.d.vue.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    items: Array<{
+        label: string;
+        rowCount: number;
+        columnCount: number;
+    }>;
+    selectedSheetName?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (sheetName: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((sheetName: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/steps/structure/SpreadsheetStructureSheetList.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { useUiToolsLocale } from "#ui-tools/i18n";
+const props = defineProps({
+  items: { type: Array, required: true },
+  selectedSheetName: { type: String, required: false }
+});
+const { locale, t } = useUiToolsLocale();
+const emit = defineEmits(["select"]);
+function isSelectedSheet(index, sheetLabel) {
+  return props.selectedSheetName === sheetLabel || !props.selectedSheetName && index === 0;
+}
+function formatCount(value) {
+  return new Intl.NumberFormat(locale.value.code).format(value);
+}
+</script>
+
+<template>
+  <div class="grid gap-2 self-start">
+    <h3 class="text-[13px] font-semibold text-highlighted">
+      {{ t("spreadsheet.steps.structure.sheetLabel") }}
+    </h3>
+
+    <button
+      v-for="(sheet, index) in items"
+      :key="sheet.label"
+      type="button"
+      class="flex items-center gap-3 border bg-default px-4 py-3 text-left transition-colors"
+      :class="
+  isSelectedSheet(index, sheet.label) ? 'border-2 border-inverted text-default' : 'border-default/70 text-toned hover:border-default'
+"
+      @click="emit('select', sheet.label)"
+    >
+      <div
+        class="size-3.5 rounded-full"
+        :class="
+  isSelectedSheet(index, sheet.label) ? 'bg-inverted' : 'border border-default/70 bg-default'
+"
+      />
+      <div class="grid gap-0.5">
+        <span
+          class="text-[13px]"
+          :class="
+  isSelectedSheet(index, sheet.label) ? 'font-medium text-highlighted' : 'text-toned'
+"
+          >{{ sheet.label }}</span
+        >
+        <span class="font-mono text-[11px] text-muted">{{
+          t("spreadsheet.common.sheetStats", {
+  rows: formatCount(sheet.rowCount),
+  columns: formatCount(sheet.columnCount)
+})
+        }}</span>
+      </div>
+    </button>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/steps/structure/SpreadsheetStructureSheetList.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    items: Array<{
+        label: string;
+        rowCount: number;
+        columnCount: number;
+    }>;
+    selectedSheetName?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (sheetName: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((sheetName: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/types.d.ts

@@ -0,0 +1,41 @@
+import type { SpreadsheetInternals } from '../composables/use-spreadsheet-internals.js';
+import type { SpreadsheetImportApi } from '../types/index.js';
+export type SpreadsheetComponentApi = SpreadsheetImportApi<{
+    importKey: string;
+    steps?: {
+        upload?: {
+            title?: string | number | (() => string | number);
+            description?: string | number | (() => string | number);
+        };
+        structure?: {
+            title?: string | number | (() => string | number);
+            description?: string | number | (() => string | number);
+        };
+        matching?: {
+            title?: string | number | (() => string | number);
+            description?: string | number | (() => string | number);
+        };
+        references?: {
+            title?: string | number | (() => string | number);
+            description?: string | number | (() => string | number);
+        };
+        review?: {
+            title?: string | number | (() => string | number);
+            description?: string | number | (() => string | number);
+        };
+    };
+    source?: {
+        accept?: readonly string[];
+        maxRecords?: number;
+    };
+}> & {
+    __internals: SpreadsheetInternals;
+};
+export interface SpreadsheetStepItem {
+    value: string;
+    title: string;
+    description: string;
+    icon: string;
+    disabled?: boolean;
+    status?: 'done' | 'active' | 'pending';
+}

package/dist/runtime/spreadsheet/composables/index.d.ts

@@ -0,0 +1 @@
+export * from './use-spreadsheet-import.js';

package/dist/runtime/spreadsheet/composables/index.js

@@ -0,0 +1 @@
+export * from "./use-spreadsheet-import.js";

package/dist/runtime/spreadsheet/composables/use-spreadsheet-column-matching.d.ts

@@ -0,0 +1,18 @@
+import { type ComputedRef } from 'vue';
+import type { SpreadsheetNormalizedSchema } from '../types/index.js';
+export interface UseSpreadsheetColumnMatchingParams {
+    schema: ComputedRef<SpreadsheetNormalizedSchema>;
+    contextData: ComputedRef<Record<string, unknown>>;
+    headers: ComputedRef<readonly unknown[]>;
+}
+export declare function useSpreadsheetColumnMatching(params: UseSpreadsheetColumnMatchingParams): {
+    headerCells: ComputedRef<import("../types/index.js").SpreadsheetHeaderCell[]>;
+    staticColumns: ComputedRef<import("../types/index.js").SpreadsheetStaticColumn[]>;
+    dynamicColumns: ComputedRef<readonly unknown[]>;
+    manualColumnAssignments: import("vue").ShallowRef<Record<string, string>, Record<string, string>>;
+    columnMatches: ComputedRef<import("../types/index.js").SpreadsheetColumnMatch<import("../types/index.js").SpreadsheetColumnDefinition<string, unknown, boolean, unknown, undefined, unknown, undefined>>[]>;
+    dynamicColumnMatches: ComputedRef<import("../types/index.js").SpreadsheetDynamicColumnMatch<import("../types/index.js").SpreadsheetDynamicOptionGroupsDefinition<string, string, unknown> | import("../types/index.js").SpreadsheetDynamicCollectionDefinition<string, "array" | "record", readonly unknown[], unknown>, import("../types/index.js").SpreadsheetDynamicCollectionItemDefinition<string, import("../types/index.js").SpreadsheetDynamicValueDefinition | ((value: import("../types/index.js").SpreadsheetDynamicValueBuilder) => unknown), unknown, unknown>>[]>;
+    unmatchedColumns: ComputedRef<import("../types/index.js").SpreadsheetUnmatchedColumn<import("../types/index.js").SpreadsheetColumnDefinition<string, unknown, boolean, unknown, undefined, unknown, undefined>>[]>;
+    assignColumn: (headerIndex: number, columnKey: string) => void;
+    clearColumnAssignment: (headerIndex: number) => void;
+};

package/dist/runtime/spreadsheet/composables/use-spreadsheet-column-matching.js

@@ -0,0 +1,62 @@
+import { computed, shallowRef } from "vue";
+import {
+  createSpreadsheetHeaderCells,
+  flattenSpreadsheetStaticColumns,
+  getSpreadsheetUnmatchedColumns,
+  matchSpreadsheetColumns,
+  matchSpreadsheetDynamicColumns
+} from "../utils/index.js";
+import { createSpreadsheetDynamicBuilder } from "../utils/builders/index.js";
+export function useSpreadsheetColumnMatching(params) {
+  const headerCells = computed(() => createSpreadsheetHeaderCells(params.headers.value));
+  const staticColumns = computed(
+    () => flattenSpreadsheetStaticColumns(params.schema.value.columns.static)
+  );
+  const manualColumnAssignments = shallowRef({});
+  const dynamicColumns = computed(
+    () => params.schema.value.columns.dynamic({
+      context: params.contextData.value,
+      dynamic: createSpreadsheetDynamicBuilder(params.contextData.value)
+    })
+  );
+  const columnMatches = computed(
+    () => matchSpreadsheetColumns(staticColumns.value, headerCells.value, manualColumnAssignments.value)
+  );
+  const dynamicColumnMatches = computed(
+    () => matchSpreadsheetDynamicColumns(
+      dynamicColumns.value,
+      headerCells.value,
+      columnMatches.value.map((match) => match.columnIndex)
+    )
+  );
+  const unmatchedColumns = computed(
+    () => getSpreadsheetUnmatchedColumns(staticColumns.value, columnMatches.value)
+  );
+  function assignColumn(headerIndex, columnKey) {
+    const nextAssignments = Object.fromEntries(
+      Object.entries(manualColumnAssignments.value).filter(
+        ([index, key]) => index !== String(headerIndex) && key !== columnKey
+      )
+    );
+    manualColumnAssignments.value = {
+      ...nextAssignments,
+      [String(headerIndex)]: columnKey
+    };
+  }
+  function clearColumnAssignment(headerIndex) {
+    const nextAssignments = { ...manualColumnAssignments.value };
+    delete nextAssignments[String(headerIndex)];
+    manualColumnAssignments.value = nextAssignments;
+  }
+  return {
+    headerCells,
+    staticColumns,
+    dynamicColumns,
+    manualColumnAssignments,
+    columnMatches,
+    dynamicColumnMatches,
+    unmatchedColumns,
+    assignColumn,
+    clearColumnAssignment
+  };
+}

package/dist/runtime/spreadsheet/composables/use-spreadsheet-context.d.ts

@@ -0,0 +1,49 @@
+import { type ComputedRef } from 'vue';
+import type { SpreadsheetNormalizedSchema } from '../types/index.js';
+export interface UseSpreadsheetContextParams {
+    schema: ComputedRef<SpreadsheetNormalizedSchema>;
+}
+export declare function useSpreadsheetContext(params: UseSpreadsheetContextParams): {
+    context: Readonly<import("vue").Ref<{
+        key: string;
+        data?: unknown;
+        error?: unknown;
+        isPending?: boolean;
+        isFetching?: boolean;
+        isSuccess?: boolean;
+        isRefetching?: boolean;
+        refetch: () => Promise<unknown>;
+    }[], {
+        key: string;
+        data?: unknown;
+        error?: unknown;
+        isPending?: boolean;
+        isFetching?: boolean;
+        isSuccess?: boolean;
+        isRefetching?: boolean;
+        refetch: () => Promise<unknown>;
+    }[]>>;
+    contextItems: ComputedRef<readonly import("../types/index.js").SpreadsheetContextItem<string, unknown>[]>;
+    contextResults: ComputedRef<{
+        key: string;
+        data?: unknown;
+        error?: unknown;
+        isPending?: boolean;
+        isFetching?: boolean;
+        isSuccess?: boolean;
+        isRefetching?: boolean;
+        refetch: () => Promise<unknown>;
+    }[]>;
+    contextData: ComputedRef<Partial<{
+        [x: string]: unknown;
+    }>>;
+    status: ComputedRef<{
+        initialized: boolean;
+        isPending: boolean;
+        isFetching: boolean;
+        isReady: boolean;
+        isRefreshing: boolean;
+    }>;
+    error: ComputedRef<unknown>;
+    refreshContext: () => Promise<unknown[]>;
+};

package/dist/runtime/spreadsheet/composables/use-spreadsheet-context.js

@@ -0,0 +1,35 @@
+import { useQueries } from "@tanstack/vue-query";
+import { computed } from "vue";
+import {
+  createSpreadsheetContextData,
+  createSpreadsheetContextQueries,
+  createSpreadsheetContextStatus
+} from "../utils/index.js";
+export function useSpreadsheetContext(params) {
+  const contextItems = computed(() => params.schema.value.context);
+  const context = useQueries({
+    queries: () => createSpreadsheetContextQueries(contextItems.value),
+    combine: (results) => results.map((result, index) => ({
+      key: contextItems.value[index]?.key,
+      ...result
+    }))
+  });
+  const contextResults = computed(() => context.value);
+  const contextData = computed(
+    () => createSpreadsheetContextData(contextItems.value, contextResults.value)
+  );
+  const status = computed(() => createSpreadsheetContextStatus(contextResults.value));
+  const error = computed(() => contextResults.value.find((result) => result.error)?.error);
+  function refreshContext() {
+    return Promise.all(contextResults.value.map((result) => result.refetch()));
+  }
+  return {
+    context,
+    contextItems,
+    contextResults,
+    contextData,
+    status,
+    error,
+    refreshContext
+  };
+}

package/dist/runtime/spreadsheet/composables/use-spreadsheet-import.d.ts

@@ -0,0 +1,8 @@
+import { type MaybeRefOrGetter } from 'vue';
+import type { SpreadsheetImportApi } from '../types/index.js';
+import { type SpreadsheetInternals } from './use-spreadsheet-internals.js';
+export declare function useSpreadsheetImport<TSchema extends {
+    importKey: string;
+}>(schema: MaybeRefOrGetter<TSchema>): SpreadsheetImportApi<TSchema> & {
+    __internals: SpreadsheetInternals<TSchema>;
+};

package/dist/runtime/spreadsheet/composables/use-spreadsheet-import.js

@@ -0,0 +1,118 @@
+import { computed, shallowRef, toValue, watch } from "vue";
+import { createSpreadsheetInternals } from "./use-spreadsheet-internals.js";
+function mapSpreadsheetParsedRows(rows) {
+  return rows;
+}
+function mapSpreadsheetResolvedRows(rows) {
+  return rows;
+}
+function mapSpreadsheetRowData(rows) {
+  return rows.map((row) => row.data);
+}
+async function createSpreadsheetSubmitPayloads(params) {
+  if (!params.schema.buildRow) return params.rows.map((row) => row.data);
+  return Promise.all(
+    params.rows.map(
+      (row) => params.schema.buildRow({
+        context: params.context,
+        row: row.data
+      })
+    )
+  );
+}
+export function useSpreadsheetImport(schema) {
+  const resolvedSchema = computed(() => toValue(schema));
+  const sourceRef = shallowRef(null);
+  const fileNameRef = shallowRef(void 0);
+  const internals = createSpreadsheetInternals({
+    rawSchema: resolvedSchema,
+    source: sourceRef,
+    fileName: fileNameRef
+  });
+  const parsedRows = computed(
+    () => mapSpreadsheetParsedRows(internals.rows.parsedRows.value)
+  );
+  const resolvedRows = computed(
+    () => mapSpreadsheetResolvedRows(internals.resolutions.resolvedRows.value)
+  );
+  const rowData = computed(
+    () => mapSpreadsheetRowData(internals.resolutions.resolvedRows.value)
+  );
+  const submitPayloads = computedAsyncPayloads({
+    schema: resolvedSchema,
+    context: internals.context.contextData,
+    rows: computed(() => internals.resolutions.resolvedRows.value)
+  });
+  const status = computed(() => ({
+    initialized: internals.source.status.value.initialized || internals.context.status.value.initialized || internals.rows.status.value.initialized,
+    isParsingSource: internals.source.status.value.isParsing,
+    isLoadingContext: internals.context.status.value.isPending || internals.context.status.value.isFetching,
+    isParsingRows: internals.rows.status.value.isParsing,
+    isReady: internals.source.status.value.isReady && internals.context.status.value.isReady && internals.rows.status.value.isReady
+  }));
+  function loadSource(params) {
+    sourceRef.value = params.source;
+    fileNameRef.value = params.fileName;
+  }
+  function clearSource() {
+    sourceRef.value = null;
+    fileNameRef.value = void 0;
+  }
+  async function refresh() {
+    await internals.source.refreshWorkbook();
+    await internals.context.refreshContext();
+    await internals.rows.refreshRows();
+  }
+  return {
+    schema: resolvedSchema,
+    workbook: internals.source.workbook,
+    selection: internals.source.selection,
+    activeSheet: internals.source.sheet,
+    headers: internals.source.headers,
+    headerCells: internals.rows.headerCells,
+    rows: internals.source.rows,
+    parsedRows,
+    resolvedRows,
+    rowData,
+    submitPayloads,
+    rowSummary: internals.rows.summary,
+    referenceResolutions: computed(() => internals.resolutions.resolutions.value),
+    unresolvedReferenceResolutions: computed(
+      () => internals.resolutions.unresolvedResolutions.value
+    ),
+    status,
+    sourceError: internals.source.error,
+    contextError: internals.context.error,
+    rowError: internals.rows.error,
+    loadSource,
+    clearSource,
+    setSheetName: internals.source.setSheetName,
+    setHeaderRowIndex: internals.source.setHeaderRowIndex,
+    assignColumn: ({ headerIndex, columnKey }) => internals.rows.assignColumn(headerIndex, columnKey),
+    clearColumnAssignment: (headerIndex) => internals.rows.clearColumnAssignment(headerIndex),
+    selectReference: internals.resolutions.selectReference,
+    clearReference: internals.resolutions.clearReference,
+    refresh,
+    __internals: internals
+  };
+}
+function computedAsyncPayloads(params) {
+  const payloads = shallowRef([]);
+  async function refreshPayloads() {
+    payloads.value = await createSpreadsheetSubmitPayloads({
+      schema: params.schema.value,
+      context: params.context.value,
+      rows: params.rows.value
+    });
+  }
+  watch(
+    [params.schema, params.context, params.rows],
+    () => {
+      void refreshPayloads();
+    },
+    {
+      immediate: true
+    }
+  );
+  return computed(() => payloads.value);
+}