nuxt-ui-tools 1.11.2 → 1.13.0

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

@@ -0,0 +1,83 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, shallowRef } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+const DEFAULT_ACCEPT = [".xlsx", ".xls", ".csv"];
+const props = defineProps({
+  importer: { type: Object, required: false }
+});
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const dragging = shallowRef(false);
+const accept = computed(() => importer.value.schema.file?.accept ?? DEFAULT_ACCEPT);
+const hint = computed(() => {
+  const types = accept.value.join(", ");
+  const max = importer.value.schema.file?.maxRows;
+  return max ? t("spreadsheet.file.dropHint", { count: max.toLocaleString(), types }) : t("spreadsheet.file.dropHintNoLimit", { types });
+});
+function load(file) {
+  if (file) importer.value.file.load(file);
+}
+function onDrop(event) {
+  dragging.value = false;
+  load(event.dataTransfer?.files[0]);
+}
+function onChange(event) {
+  if (event.target instanceof HTMLInputElement) load(event.target.files?.[0]);
+}
+function onPaste(event) {
+  const text = event.clipboardData?.getData("text/plain");
+  if (text?.includes("	") || text?.includes("\n")) importer.value.file.paste(text);
+}
+</script>
+
+<template>
+  <div data-spreadsheet-dropzone class="grid gap-2">
+    <slot
+      :load="importer.file.load"
+      :paste="importer.file.paste"
+      :reading="importer.file.reading"
+      :error="importer.file.error"
+      :accept="accept"
+    >
+      <label
+        tabindex="0"
+        class="flex cursor-pointer items-center gap-4 rounded-xl border-[1.5px] border-dashed px-5 py-4.5 transition-colors outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25"
+        :class="
+  dragging ? 'border-primary bg-primary/6' : 'border-accented bg-default hover:border-primary hover:bg-primary/3'
+"
+        @dragover.prevent="dragging = true"
+        @dragleave="dragging = false"
+        @drop.prevent="onDrop"
+        @paste="onPaste"
+      >
+        <span
+          class="grid size-11 shrink-0 place-items-center rounded-lg bg-elevated text-muted"
+          aria-hidden="true"
+        >
+          <span
+            v-if="importer.file.reading"
+            class="size-4.5 animate-spin rounded-full border-2 border-accented border-t-primary"
+          />
+          <UIcon v-else name="i-lucide-file-up" class="size-5" />
+        </span>
+        <span class="grid min-w-0 gap-0.5">
+          <span class="font-medium text-highlighted">
+            {{ t("spreadsheet.file.dropTitle") }}
+            <span class="text-primary underline decoration-primary/40 underline-offset-2">{{
+              t("spreadsheet.file.dropBrowse")
+            }}</span>
+          </span>
+          <span class="text-sm text-muted">{{ hint }}</span>
+        </span>
+        <input type="file" class="sr-only" :accept="accept.join(',')" @change="onChange" />
+      </label>
+      <p v-if="importer.file.error" class="flex items-center gap-1.5 text-sm text-error">
+        <UIcon name="i-lucide-circle-x" class="size-4 shrink-0" />
+        {{ t("spreadsheet.file.readFailed") }}
+      </p>
+      <p v-else class="text-xs text-dimmed">{{ t("spreadsheet.file.paste") }}</p>
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,23 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+declare var __VLS_1: {
+    load: (source: import("../../types/index.js").SpreadsheetFileSource, name?: string) => void;
+    paste: (text: string, name?: string) => void;
+    reading: boolean;
+    error: unknown;
+    accept: readonly string[];
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+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-expected-columns.d.vue.ts

@@ -0,0 +1,19 @@
+import type { SpreadsheetFieldState, SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+type __VLS_Slots = {
+    column?: (props: {
+        field: SpreadsheetFieldState;
+    }) => unknown;
+    actions?: () => 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-expected-columns.vue

@@ -0,0 +1,45 @@
+<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 fields = computed(() => importer.value.columns.fields.filter((field) => !field.from));
+const hasDynamic = computed(() => fields.value.some((field) => field.group?.dynamic));
+</script>
+
+<template>
+  <div v-if="fields.length" data-spreadsheet-expected-columns class="grid gap-2.5">
+    <div class="flex items-center gap-2">
+      <span class="text-[11px] font-semibold tracking-[0.08em] text-dimmed uppercase">
+        {{ t("spreadsheet.file.expected") }}
+      </span>
+      <span class="text-xs text-dimmed tabular-nums"
+        >· {{ t("spreadsheet.file.expectedCount", { count: fields.length }) }}</span
+      >
+      <span class="ms-auto"><slot name="actions" /></span>
+    </div>
+    <ul class="flex flex-wrap gap-1.5">
+      <li v-for="field in fields" :key="field.path" :title="field.description || field.label">
+        <slot name="column" :field="field">
+          <span
+            class="inline-flex h-6 items-center gap-1 rounded-md px-2 text-[12px] font-medium whitespace-nowrap"
+            :class="
+  field.group?.dynamic ? 'bg-primary/10 text-primary' : field.required ? 'bg-elevated text-toned ring-1 ring-default ring-inset' : 'text-muted ring-1 ring-default ring-inset'
+"
+          >
+            {{ field.name }}
+            <span v-if="!field.required && !field.group?.dynamic" class="font-normal text-dimmed">
+              · {{ t("spreadsheet.file.optional") }}
+            </span>
+          </span>
+        </slot>
+      </li>
+    </ul>
+    <p v-if="hasDynamic" class="text-xs text-dimmed">{{ t("spreadsheet.file.fromContext") }}</p>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+import type { SpreadsheetFieldState, SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+type __VLS_Slots = {
+    column?: (props: {
+        field: SpreadsheetFieldState;
+    }) => unknown;
+    actions?: () => 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/{shared/spreadsheet-object-preview-table.d.vue.ts → parts/spreadsheet-import-export-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-export-button.vue

@@ -0,0 +1,34 @@
+<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";
+import { downloadSpreadsheetBlob } from "../../utils";
+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.rows.invalid.length);
+function download() {
+  const base = importer.value.file.name.replace(/\.[^.]+$/u, "") || importer.value.schema.key;
+  downloadSpreadsheetBlob(
+    importer.value.rows.exportInvalid(),
+    `${base}-${t("spreadsheet.review.export").toLowerCase().replaceAll(" ", "-")}.xlsx`
+  );
+}
+</script>
+
+<template>
+  <UButton
+    v-if="count"
+    data-spreadsheet-export
+    color="neutral"
+    variant="outline"
+    size="sm"
+    icon="i-lucide-download"
+    :label="label ?? `${t('spreadsheet.review.export')} \xB7 ${count}`"
+    @click="download"
+  />
+</template>

package/dist/runtime/spreadsheet/components/{layout/spreadsheet-import-file-bar.vue.d.ts → parts/spreadsheet-import-export-button.vue.d.ts}

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

@@ -0,0 +1,17 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+};
+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-file-card.vue

@@ -0,0 +1,49 @@
+<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 }
+});
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const extension = computed(
+  () => importer.value.file.name.split(".").pop()?.toUpperCase().slice(0, 4) || "XLSX"
+);
+const summary = computed(
+  () => t("spreadsheet.file.summary", {
+    rows: importer.value.rows.all.length.toLocaleString(),
+    sheets: importer.value.file.sheets.length
+  })
+);
+</script>
+
+<template>
+  <div
+    v-if="importer.file.loaded"
+    data-spreadsheet-file-card
+    class="flex items-center gap-3.5 rounded-xl border border-default bg-default px-4 py-3"
+  >
+    <span
+      class="grid h-11 w-9.5 shrink-0 place-items-center rounded-md bg-success/10 text-[10px] font-bold tracking-wide text-success"
+    >
+      {{ extension }}
+    </span>
+    <div class="grid min-w-0">
+      <span class="truncate font-medium text-highlighted">{{ importer.file.name }}</span>
+      <span class="text-sm text-muted tabular-nums">{{ summary }}</span>
+    </div>
+    <div class="ms-auto flex shrink-0 items-center gap-2">
+      <slot name="actions" />
+      <UButton
+        color="neutral"
+        variant="outline"
+        size="sm"
+        icon="i-lucide-refresh-cw"
+        :label="t('spreadsheet.file.replace')"
+        @click="importer.file.clear()"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,17 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+};
+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-progress.d.vue.ts

@@ -0,0 +1,18 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+type __VLS_Slots = {
+    done?: (props: {
+        imported: number;
+    }) => 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-progress.vue

@@ -0,0 +1,101 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import UProgress from "@nuxt/ui/components/Progress.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import {
+  useSpreadsheetImporter,
+  useSpreadsheetStepsContext
+} from "../../composables/use-spreadsheet-import-context";
+const props = defineProps({
+  importer: { type: Object, required: false }
+});
+defineSlots();
+const importer = useSpreadsheetImporter(() => props.importer);
+const steps = useSpreadsheetStepsContext();
+const { t } = useUiToolsLocale();
+const submit = computed(() => importer.value.submit);
+const percent = computed(
+  () => submit.value.progress.total ? Math.round(submit.value.progress.done / submit.value.progress.total * 100) : 0
+);
+function retry() {
+  void importer.value.submit.retryRejected();
+}
+function tryAgain() {
+  void importer.value.submit.run();
+}
+function review() {
+  importer.value.review.setTab("invalid");
+  steps.value?.goTo("review");
+}
+</script>
+
+<template>
+  <div
+    v-if="submit.status !== 'idle'"
+    data-spreadsheet-progress
+    class="grid justify-items-center gap-3.5 py-6 text-center"
+  >
+    <template v-if="submit.status === 'running'">
+      <div class="text-4xl font-light tracking-tight text-highlighted tabular-nums">
+        {{
+          t("spreadsheet.progress.count", {
+  done: submit.progress.done,
+  total: submit.progress.total
+})
+        }}
+      </div>
+      <UProgress :model-value="percent" class="w-full max-w-md" />
+      <p class="text-muted">{{ t("spreadsheet.progress.running") }}</p>
+    </template>
+    <template v-else-if="submit.status === 'done'">
+      <span class="grid size-12 place-items-center rounded-full bg-success/10 text-success">
+        <UIcon name="i-lucide-check" class="size-6" />
+      </span>
+      <h3 class="text-xl font-semibold text-highlighted">
+        {{ t("spreadsheet.progress.done", { count: submit.imported.toLocaleString() }) }}
+      </h3>
+      <p v-if="!submit.rejected.length" class="text-muted">
+        {{ t("spreadsheet.progress.doneHint") }}
+      </p>
+      <div
+        v-else
+        class="grid max-w-md gap-2 rounded-xl border border-error/30 bg-error/4 px-4 py-3 text-start"
+      >
+        <b class="text-sm font-semibold text-error">{{
+          t("spreadsheet.progress.rejected", { count: submit.rejected.length })
+        }}</b>
+        <p class="text-sm text-muted">{{ t("spreadsheet.progress.rejectedHint") }}</p>
+        <div class="flex flex-wrap gap-2">
+          <UButton
+            size="sm"
+            color="neutral"
+            variant="outline"
+            :label="t('spreadsheet.progress.retry')"
+            @click="retry"
+          />
+          <UButton
+            v-if="steps"
+            size="sm"
+            color="neutral"
+            variant="ghost"
+            :label="t('spreadsheet.progress.review')"
+            @click="review"
+          />
+        </div>
+      </div>
+      <slot name="done" :imported="submit.imported" />
+    </template>
+    <template v-else>
+      <span class="grid size-12 place-items-center rounded-full bg-error/10 text-error">
+        <UIcon name="i-lucide-circle-x" class="size-6" />
+      </span>
+      <h3 class="text-lg font-semibold text-highlighted">{{ t("spreadsheet.progress.error") }}</h3>
+      <p v-if="submit.error instanceof Error" class="max-w-md text-sm text-muted">
+        {{ submit.error.message }}
+      </p>
+      <UButton :label="t('spreadsheet.progress.tryAgain')" @click="tryAgain" />
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+import type { SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+};
+type __VLS_Slots = {
+    done?: (props: {
+        imported: number;
+    }) => 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-row-inspector.d.vue.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;
+    };
+};