nuxt-ui-tools 1.11.2 → 1.13.0

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

@@ -0,0 +1,44 @@
+import { computed, shallowRef } from "vue";
+import { readSpreadsheetFile, readSpreadsheetText } from "../utils/index.js";
+export function useSpreadsheetFile() {
+  const workbook = shallowRef(null);
+  const reading = shallowRef(false);
+  const error = shallowRef(null);
+  let run = 0;
+  async function load(source, name) {
+    const current = run += 1;
+    reading.value = true;
+    error.value = null;
+    const fileName = name ?? (source instanceof File ? source.name : "import.xlsx");
+    try {
+      const next = await readSpreadsheetFile({ name: fileName, source });
+      if (current === run) workbook.value = next;
+    } catch (nextError) {
+      if (current === run) {
+        workbook.value = null;
+        error.value = nextError;
+      }
+    } finally {
+      if (current === run) reading.value = false;
+    }
+  }
+  function paste(text, name = "clipboard.tsv") {
+    run += 1;
+    error.value = null;
+    reading.value = false;
+    workbook.value = readSpreadsheetText({ name, text });
+  }
+  function clear() {
+    run += 1;
+    workbook.value = null;
+    error.value = null;
+    reading.value = false;
+  }
+  const sheets = computed(
+    () => (workbook.value?.sheets ?? []).map((sheet) => ({
+      name: sheet.name,
+      rowCount: sheet.rows.length
+    }))
+  );
+  return { clear, error, load, paste, reading, sheets, workbook };
+}

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

@@ -0,0 +1,12 @@
+import type { SpreadsheetImporter, SpreadsheetSteps } from '../types/index.js';
+interface SpreadsheetImportProvided {
+    readonly importer: SpreadsheetImporter;
+    readonly steps: SpreadsheetSteps | null;
+}
+/** Provides an importer, and optionally its steps, to the `SpreadsheetImport*` parts below. */
+export declare function provideSpreadsheetImport(provided: SpreadsheetImportProvided): void;
+/** The importer of a part: its own `importer` prop, or the one of the closest root. */
+export declare function useSpreadsheetImporter(own?: () => SpreadsheetImporter | undefined): import("vue").ComputedRef<SpreadsheetImporter<import("../types/index.js").SpreadsheetRuntimeSchema>>;
+/** The steps of a part: its own `steps` prop, the closest root's, or `null` outside a wizard. */
+export declare function useSpreadsheetStepsContext(own?: () => SpreadsheetSteps | undefined): import("vue").ComputedRef<SpreadsheetSteps | null>;
+export {};

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

@@ -0,0 +1,22 @@
+import { computed, inject, provide } from "vue";
+const SPREADSHEET_IMPORT = Symbol.for(
+  "nuxt-ui-tools.spreadsheet-import"
+);
+export function provideSpreadsheetImport(provided) {
+  provide(SPREADSHEET_IMPORT, provided);
+}
+export function useSpreadsheetImporter(own) {
+  const provided = inject(SPREADSHEET_IMPORT, null);
+  return computed(() => {
+    const importer = own?.() ?? provided?.importer;
+    if (!importer)
+      throw new Error(
+        "[spreadsheet] Pass `importer` to the part or place it in a `SpreadsheetImportRoot`."
+      );
+    return importer;
+  });
+}
+export function useSpreadsheetStepsContext(own) {
+  const provided = inject(SPREADSHEET_IMPORT, null);
+  return computed(() => own?.() ?? provided?.steps ?? null);
+}

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

@@ -1,8 +1,19 @@
 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>;
-};
+import type { SpreadsheetImporter, SpreadsheetImportOptions, SpreadsheetRuntimeSchema } from '../types/index.js';
+/**
+ * The import runtime of a schema: file, layout, columns, values, rows, review, and submit, each a
+ * reactive model readable in templates and scripts. Use it headless, with the `SpreadsheetImport*`
+ * parts, or with the ready-made `<SpreadsheetImport>`.
+ *
+ * @example
+ * ```ts
+ * const importer = useSpreadsheetImport(assessmentsImport, {
+ *   context: { center: () => center.value, products: productsQuery() },
+ *   onSubmit: ({ create, update }) => api.assessments.import({ create, update }),
+ * })
+ * importer.file.load(file)
+ * await importer.ready()
+ * importer.readiness.canSubmit
+ * ```
+ */
+export declare function useSpreadsheetImport<const TSchema extends SpreadsheetRuntimeSchema>(schema: MaybeRefOrGetter<TSchema>, ...args: [keyof NonNullable<TSchema['~context']>] extends [never] ? [options?: SpreadsheetImportOptions<TSchema>] : [options: SpreadsheetImportOptions<TSchema>]): SpreadsheetImporter<TSchema>;

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

@@ -1,120 +1,351 @@
-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();
-  const internals = createSpreadsheetInternals({
-    fileName: fileNameRef,
-    rawSchema: resolvedSchema,
-    source: sourceRef
+import { computed, toValue, watch } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { createSpreadsheetTemplateWorkbook, suggestSpreadsheetColumns } from "../utils/index.js";
+import { useSpreadsheetAnswers } from "./use-spreadsheet-answers.js";
+import { useSpreadsheetColumns } from "./use-spreadsheet-columns.js";
+import { useSpreadsheetContext } from "./use-spreadsheet-context.js";
+import { useSpreadsheetEdits } from "./use-spreadsheet-edits.js";
+import { useSpreadsheetFields } from "./use-spreadsheet-fields.js";
+import { useSpreadsheetFile } from "./use-spreadsheet-file.js";
+import { useSpreadsheetLayout } from "./use-spreadsheet-layout.js";
+import { useSpreadsheetOptions } from "./use-spreadsheet-options.js";
+import { useSpreadsheetReview } from "./use-spreadsheet-review.js";
+import { useSpreadsheetRows } from "./use-spreadsheet-rows.js";
+import { useSpreadsheetSubmit } from "./use-spreadsheet-submit.js";
+import { useSpreadsheetValues } from "./use-spreadsheet-values.js";
+export function useSpreadsheetImport(schemaInput, options = {}) {
+  const { t } = useUiToolsLocale();
+  const schema = computed(() => toValue(schemaInput));
+  const context = useSpreadsheetContext({ input: () => options.context });
+  const file = useSpreadsheetFile();
+  const edits = useSpreadsheetEdits();
+  const answers = useSpreadsheetAnswers();
+  const fields = useSpreadsheetFields({ context, schema, t });
+  const layout = useSpreadsheetLayout({ context, fields, file, schema });
+  const columns = useSpreadsheetColumns({ context, fields, layout });
+  const options$ = useSpreadsheetOptions({ columns, context, edits, fields, layout });
+  const rows = useSpreadsheetRows({
+    answers,
+    columns,
+    context,
+    edits,
+    fields,
+    layout,
+    options: options$,
+    schema,
+    t
   });
-  const parsedRows = computed(
-    () => mapSpreadsheetParsedRows(internals.rows.parsedRows.value)
-  );
-  const resolvedRows = computed(
-    () => mapSpreadsheetResolvedRows(internals.resolutions.resolvedRows.value)
+  const values = useSpreadsheetValues({ answers, fields, options: options$, rows });
+  const review = useSpreadsheetReview({ layout, rows });
+  const submit = useSpreadsheetSubmit({
+    batchSize: options.submit?.batchSize,
+    context,
+    fields,
+    onSubmit: options.onSubmit,
+    rows,
+    schema,
+    t,
+    values
+  });
+  watch(file.workbook, () => {
+    edits.clear();
+    answers.clear();
+    columns.clear();
+    rows.reset();
+    submit.reset();
+  });
+  const suggestions = computed(() => {
+    const missing2 = new Set(
+      columns.states.value.filter((state) => state.status === "missing").map((state) => state.path)
+    );
+    if (!missing2.size)
+      return /* @__PURE__ */ new Map();
+    return suggestSpreadsheetColumns({
+      ctx: context.ctx.value,
+      fields: fields.columnFields.value.filter((field) => missing2.has(field.path)),
+      headers: columns.unusedHeaders.value,
+      options: options$.options.value,
+      raws: layout.dataRaws.value,
+      rows: layout.dataRows.value,
+      t
+    });
+  });
+  const fieldStates = computed(
+    () => columns.states.value.map((state) => ({
+      ...state,
+      suggestion: suggestions.value.get(state.path) ?? null
+    }))
   );
-  const rowData = computed(
-    () => mapSpreadsheetRowData(internals.resolutions.resolvedRows.value)
+  const missing = computed(() => fieldStates.value.filter((state) => state.status === "missing"));
+  const loading = computed(
+    () => context.loading.value || file.reading.value || options$.loading.value || rows.loading.value
   );
-  const submitPayloads = computedAsyncPayloads({
-    context: internals.context.contextData,
-    rows: computed(() => internals.resolutions.resolvedRows.value),
-    schema: resolvedSchema
+  const readiness = computed(() => {
+    const importable = rows.importable.value.length;
+    const openValues = values.open.value.length;
+    return {
+      canSubmit: Boolean(file.workbook.value) && !loading.value && !missing.value.length && !openValues && importable > 0,
+      importable,
+      invalidRows: rows.invalid.value.length,
+      loading: loading.value,
+      missingColumns: missing.value.length,
+      openValues
+    };
   });
-  const status = computed(() => ({
-    initialized: internals.source.status.value.initialized || internals.context.status.value.initialized || internals.rows.status.value.initialized,
-    isLoadingContext: internals.context.status.value.isPending || internals.context.status.value.isFetching,
-    isParsingRows: internals.rows.status.value.isParsing,
-    isParsingSource: internals.source.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 ready() {
+    return new Promise((resolve) => {
+      const stop = watch(
+        () => !loading.value && (!file.workbook.value || fields.fields.value.length > 0 || !context.ready.value),
+        (settled) => {
+          if (!settled) return;
+          queueMicrotask(() => stop());
+          resolve();
+        },
+        { immediate: true }
+      );
+    });
   }
-  function clearSource() {
-    sourceRef.value = null;
-    fileNameRef.value = void 0;
+  function template() {
+    return createSpreadsheetTemplateWorkbook({
+      fields: fields.fields.value,
+      guideHeaders: [
+        t("spreadsheet.template.column"),
+        t("spreadsheet.template.required"),
+        t("spreadsheet.template.allowed"),
+        t("spreadsheet.template.description")
+      ],
+      guideName: t("spreadsheet.template.guide"),
+      options: options$.options.value,
+      sheetName: t("spreadsheet.template.sheet"),
+      yes: t("spreadsheet.template.yes")
+    });
   }
-  async function refresh() {
-    await internals.source.refreshWorkbook();
-    await internals.context.refreshContext();
-    await internals.rows.refreshRows();
+  function reset() {
+    file.clear();
   }
-  return {
-    __internals: internals,
-    activeSheet: internals.source.sheet,
-    assignColumn: ({ headerIndex, columnKey }) => internals.rows.assignColumn(headerIndex, columnKey),
-    clearColumnAssignment: (headerIndex) => internals.rows.clearColumnAssignment(headerIndex),
-    clearReference: internals.resolutions.clearReference,
-    clearSource,
-    contextError: internals.context.error,
-    headerCells: internals.rows.headerCells,
-    headers: internals.source.headers,
-    loadSource,
-    parsedRows,
-    referenceResolutions: computed(() => internals.resolutions.resolutions.value),
-    refresh,
-    resolvedRows,
-    rowData,
-    rowError: internals.rows.error,
-    rowSummary: internals.rows.summary,
-    rows: internals.source.rows,
-    schema: resolvedSchema,
-    selectReference: internals.resolutions.selectReference,
-    selection: internals.source.selection,
-    setHeaderRowIndex: internals.source.setHeaderRowIndex,
-    setSheetName: internals.source.setSheetName,
-    sourceError: internals.source.error,
-    status,
-    submitPayloads,
-    unresolvedReferenceResolutions: computed(
-      () => internals.resolutions.unresolvedResolutions.value
-    ),
-    workbook: internals.source.workbook
+  const contextModel = {
+    get ctx() {
+      return context.ctx.value;
+    },
+    get error() {
+      return context.error.value;
+    },
+    get loading() {
+      return context.loading.value;
+    },
+    get ready() {
+      return context.ready.value;
+    }
   };
-}
-function computedAsyncPayloads(params) {
-  const payloads = shallowRef([]);
-  async function refreshPayloads() {
-    payloads.value = await createSpreadsheetSubmitPayloads({
-      context: params.context.value,
-      rows: params.rows.value,
-      schema: params.schema.value
-    });
-  }
-  watch(
-    [params.schema, params.context, params.rows],
-    () => {
-      void refreshPayloads();
+  const fileModel = {
+    clear: file.clear,
+    get error() {
+      return file.error.value;
+    },
+    load: (source, name) => void file.load(source, name),
+    get loaded() {
+      return Boolean(file.workbook.value);
+    },
+    get name() {
+      return file.workbook.value?.name ?? "";
     },
-    {
-      immediate: true
+    paste: file.paste,
+    get reading() {
+      return file.reading.value;
+    },
+    get sheets() {
+      return file.sheets.value;
     }
-  );
-  return computed(() => payloads.value);
+  };
+  const layoutModel = {
+    get ambiguous() {
+      return layout.detection.value?.ambiguous ?? false;
+    },
+    get candidates() {
+      return layout.candidates.value;
+    },
+    get detected() {
+      return layout.detected.value;
+    },
+    get detection() {
+      return layout.detection.value;
+    },
+    get headerRow() {
+      return layout.selection.value.headerRow;
+    },
+    get headerRowNumber() {
+      return layout.sheet.value?.rowNumbers[layout.selection.value.headerRow] ?? layout.selection.value.headerRow + 1;
+    },
+    get headers() {
+      return layout.headers.value;
+    },
+    get preview() {
+      return layout.preview.value;
+    },
+    redetect: layout.redetect,
+    setHeaderRow: layout.setHeaderRow,
+    setSheet: layout.setSheet,
+    get sheet() {
+      return layout.selection.value.sheet;
+    }
+  };
+  const columnsModel = {
+    assign: columns.assign,
+    get fields() {
+      return fieldStates.value;
+    },
+    get groups() {
+      return fields.groups.value;
+    },
+    get headers() {
+      return layout.headers.value;
+    },
+    ignore: columns.ignore,
+    get missing() {
+      return missing.value;
+    },
+    reset: columns.reset,
+    get unusedHeaders() {
+      return columns.unusedHeaders.value;
+    }
+  };
+  const valuesModel = {
+    answer: values.answer,
+    choices: values.choices,
+    clear: values.clear,
+    get loading() {
+      return options$.loading.value;
+    },
+    get open() {
+      return values.open.value;
+    },
+    get questions() {
+      return values.questions.value;
+    },
+    get recognized() {
+      return values.recognized.value;
+    },
+    search: values.search
+  };
+  const rowsModel = {
+    get all() {
+      return rows.rows.value;
+    },
+    get byMode() {
+      return rows.byMode.value;
+    },
+    cell: rows.cell,
+    discard: rows.discard,
+    get discarded() {
+      return rows.discarded.value;
+    },
+    distinct: rows.distinct,
+    edit: rows.edit,
+    exportInvalid: () => rows.exportInvalid(t("spreadsheet.review.issuesColumn")),
+    get importable() {
+      return rows.importable.value;
+    },
+    get invalid() {
+      return rows.invalid.value;
+    },
+    issues: rows.issues,
+    get keyFields() {
+      return rows.keyFields.value;
+    },
+    get loading() {
+      return rows.loading.value;
+    },
+    restore: rows.restore,
+    revert: edits.revert,
+    row: (index) => rows.rows.value[index],
+    get valid() {
+      return rows.valid.value;
+    }
+  };
+  const reviewModel = {
+    clearSelection: review.clearSelection,
+    get fieldIssues() {
+      return review.fieldIssues.value;
+    },
+    inspect: review.inspect,
+    get inspected() {
+      return review.inspected.value;
+    },
+    get issue() {
+      return review.issue.value;
+    },
+    get issueTypes() {
+      return review.issueTypes.value;
+    },
+    get level() {
+      return review.level.value;
+    },
+    get mode() {
+      return review.mode.value;
+    },
+    next: review.next,
+    get position() {
+      return review.position.value;
+    },
+    previous: review.previous,
+    get search() {
+      return review.search.value;
+    },
+    select: review.select,
+    get selection() {
+      return review.selection.value;
+    },
+    setIssue: review.setIssue,
+    setLevel: review.setLevel,
+    setMode: review.setMode,
+    setSearch: review.setSearch,
+    setTab: review.setTab,
+    get tab() {
+      return review.tab.value;
+    },
+    get visible() {
+      return review.visible.value;
+    }
+  };
+  const submitModel = {
+    get error() {
+      return submit.error.value;
+    },
+    get imported() {
+      return submit.imported.value;
+    },
+    get progress() {
+      return submit.progress.value;
+    },
+    get rejected() {
+      return submit.rejected.value;
+    },
+    reset: submit.reset,
+    retryRejected: submit.retryRejected,
+    run: submit.run,
+    get status() {
+      return submit.status.value;
+    }
+  };
+  return {
+    columns: columnsModel,
+    context: contextModel,
+    file: fileModel,
+    get layout() {
+      return layoutModel;
+    },
+    get readiness() {
+      return readiness.value;
+    },
+    ready,
+    reset,
+    review: reviewModel,
+    rows: rowsModel,
+    get schema() {
+      return schema.value;
+    },
+    submit: submitModel,
+    template,
+    values: valuesModel
+  };
 }

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

@@ -0,0 +1,36 @@
+import type { ComputedRef } from 'vue';
+import type { SpreadsheetPreviewRow, SpreadsheetRuntimeSchema } from '../types/index.js';
+import type { useSpreadsheetContext } from './use-spreadsheet-context.js';
+import type { useSpreadsheetFields } from './use-spreadsheet-fields.js';
+import type { useSpreadsheetFile } from './use-spreadsheet-file.js';
+export interface UseSpreadsheetLayoutParams {
+    schema: ComputedRef<SpreadsheetRuntimeSchema>;
+    file: ReturnType<typeof useSpreadsheetFile>;
+    fields: ReturnType<typeof useSpreadsheetFields>;
+    context: ReturnType<typeof useSpreadsheetContext>;
+}
+/**
+ * The sheet and header row read. Detection runs on each new file and applies the schema's `sheet`
+ * and `headerRow`; the user can change both.
+ */
+export declare function useSpreadsheetLayout(params: UseSpreadsheetLayoutParams): {
+    candidates: ComputedRef<readonly import("..").SpreadsheetHeaderRowCandidate[]>;
+    dataRaws: ComputedRef<(readonly unknown[] | undefined)[]>;
+    dataRowNumbers: ComputedRef<number[]>;
+    dataRows: ComputedRef<(readonly string[])[]>;
+    detected: ComputedRef<boolean>;
+    detection: ComputedRef<import("..").SpreadsheetLayoutDetection | null>;
+    headers: ComputedRef<import("..").SpreadsheetHeaderCell[]>;
+    preview: ComputedRef<SpreadsheetPreviewRow[]>;
+    redetect: () => void;
+    selection: import("vue").ShallowRef<{
+        sheet: string | null;
+        headerRow: number;
+    }, {
+        sheet: string | null;
+        headerRow: number;
+    }>;
+    setHeaderRow: (index: number) => void;
+    setSheet: (name: string) => void;
+    sheet: ComputedRef<import("..").SpreadsheetSheet | null>;
+};