nuxt-ui-tools 1.12.0 → 1.13.0

package/dist/runtime/spreadsheet/components/internal/spreadsheet-import-column-row.vue.d.ts

@@ -0,0 +1,17 @@
+import type { SpreadsheetFieldState, SpreadsheetHeaderCell } from '../../types/index.js';
+type __VLS_Props = {
+    field: SpreadsheetFieldState;
+    headers: readonly SpreadsheetHeaderCell[];
+    suggestions: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reset: () => any;
+    assign: (header: number) => any;
+    ignore: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReset?: (() => any) | undefined;
+    onAssign?: ((header: number) => any) | undefined;
+    onIgnore?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/internal/spreadsheet-import-heading.d.vue.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+};
+declare var __VLS_1: {};
+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/internal/spreadsheet-import-heading.vue

@@ -0,0 +1,20 @@
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: false }
+});
+</script>
+
+<template>
+  <div class="flex flex-wrap items-start justify-between gap-3">
+    <div class="grid min-w-0 gap-1">
+      <h3 class="text-lg font-semibold tracking-[-0.015em] text-balance text-highlighted">
+        {{ title }}
+      </h3>
+      <p v-if="description" class="max-w-[62ch] text-sm text-pretty text-muted">
+        {{ description }}
+      </p>
+    </div>
+    <slot />
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/internal/spreadsheet-import-heading.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+};
+declare var __VLS_1: {};
+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/internal/spreadsheet-import-status-badge.d.vue.ts

@@ -0,0 +1,10 @@
+import type { SpreadsheetRowStatus } from '../../types/index.js';
+type __VLS_Props = {
+    status: SpreadsheetRowStatus;
+    count?: number;
+    /** Shows the label; the compact form shows an icon and the issue count. */
+    full?: boolean;
+};
+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/internal/spreadsheet-import-status-badge.vue

@@ -0,0 +1,34 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+const props = defineProps({
+  status: { type: String, required: true },
+  count: { type: Number, required: false },
+  full: { type: Boolean, required: false }
+});
+const { t } = useUiToolsLocale();
+const config = computed(
+  () => ({
+    blocking: { classes: "bg-error/10 text-error", icon: "i-lucide-circle-x" },
+    discarded: { classes: "bg-elevated text-muted", icon: "i-lucide-ban" },
+    valid: { classes: "text-success", icon: "i-lucide-circle-check" },
+    warning: { classes: "bg-warning/12 text-warning", icon: "i-lucide-triangle-alert" }
+  })[props.status]
+);
+const label = computed(() => t(`spreadsheet.table.status.${props.status}`));
+</script>
+
+<template>
+  <span
+    class="inline-flex h-5 shrink-0 items-center gap-1 rounded-md px-1.5 text-[11.5px] font-semibold whitespace-nowrap tabular-nums"
+    :class="config.classes"
+    :title="count ? `${label} \xB7 ${count}` : label"
+  >
+    <UIcon :name="config.icon" class="size-3.5" />
+    <template v-if="full"
+      >{{ label }}<template v-if="count"> · {{ count }}</template></template
+    >
+    <template v-else-if="count">{{ count }}</template>
+  </span>
+</template>

package/dist/runtime/spreadsheet/components/internal/spreadsheet-import-status-badge.vue.d.ts

@@ -0,0 +1,10 @@
+import type { SpreadsheetRowStatus } from '../../types/index.js';
+type __VLS_Props = {
+    status: SpreadsheetRowStatus;
+    count?: number;
+    /** Shows the label; the compact form shows an icon and the issue count. */
+    full?: boolean;
+};
+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/internal/spreadsheet-import-value-row.d.vue.ts

@@ -0,0 +1,13 @@
+import type { SpreadsheetResolvedOption, SpreadsheetValueAnswer, SpreadsheetValueQuestion } from '../../types/index.js';
+type __VLS_Props = {
+    question: SpreadsheetValueQuestion;
+    choices: readonly SpreadsheetResolvedOption[];
+    search: (text: string) => Promise<readonly SpreadsheetResolvedOption[]>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    answer: (answer: SpreadsheetValueAnswer) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAnswer?: ((answer: SpreadsheetValueAnswer) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/spreadsheet/components/internal/spreadsheet-import-value-row.vue

@@ -0,0 +1,113 @@
+<script setup>
+import USelectMenu from "@nuxt/ui/components/SelectMenu.vue";
+import { refDebounced } from "@vueuse/core";
+import { computed, shallowRef, watch } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+const props = defineProps({
+  question: { type: Object, required: true },
+  choices: { type: Array, required: true },
+  search: { type: Function, required: true }
+});
+const emit = defineEmits(["answer"]);
+const { t } = useUiToolsLocale();
+const term = shallowRef("");
+const debounced = refDebounced(term, 250);
+const found = shallowRef([]);
+const searching = shallowRef(false);
+watch(debounced, async (text) => {
+  if (!props.question.remote) return;
+  searching.value = true;
+  try {
+    found.value = await props.search(text);
+  } finally {
+    searching.value = false;
+  }
+});
+const options = computed(() => {
+  const list = props.question.remote ? found.value : props.choices;
+  const answer = props.question.answer;
+  if (answer?.action === "map" && !list.some((option) => option.value === answer.value))
+    return [{ aliases: [], label: answer.label, value: answer.value }, ...list];
+  return list;
+});
+const items = computed(() => [
+  ...options.value.map((option, index) => ({ label: option.label, value: `option:${index}` })),
+  { type: "separator" },
+  ...props.question.canCreate ? [
+    {
+      icon: "i-lucide-plus",
+      label: t("spreadsheet.values.create", { value: props.question.value }),
+      value: "action:create"
+    }
+  ] : [],
+  {
+    icon: "i-lucide-eraser",
+    label: t("spreadsheet.values.leaveEmpty"),
+    value: "action:leave-empty"
+  },
+  { icon: "i-lucide-ban", label: t("spreadsheet.values.skipRows"), value: "action:skip-rows" }
+]);
+const selected = computed(() => {
+  const answer = props.question.answer;
+  if (!answer) return void 0;
+  if (answer.action !== "map") return `action:${answer.action}`;
+  const index = options.value.findIndex((option) => option.value === answer.value);
+  return index < 0 ? void 0 : `option:${index}`;
+});
+const status = computed(
+  () => props.question.state === "open" ? "open" : props.question.answeredBy === "policy" ? "policy" : "user"
+);
+function select(value) {
+  if (!value) return;
+  if (value === "action:create") emit("answer", { action: "create" });
+  else if (value === "action:leave-empty") emit("answer", { action: "leave-empty" });
+  else if (value === "action:skip-rows") emit("answer", { action: "skip-rows" });
+  else {
+    const option = options.value[Number(value.slice("option:".length))];
+    if (option) emit("answer", { action: "map", label: option.label, value: option.value });
+  }
+}
+</script>
+
+<template>
+  <div
+    :data-spreadsheet-value="question.id"
+    :data-state="question.state"
+    class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 px-4 py-3 sm:grid-cols-[minmax(0,1fr)_4.5rem_minmax(0,1.15fr)_6.5rem]"
+    :class="question.state === 'open' ? 'bg-warning/4' : ''"
+  >
+    <span
+      class="line-clamp-2 min-w-0 font-medium break-words text-highlighted"
+      :title="question.value"
+      >{{ question.value }}</span
+    >
+    <span class="text-end text-sm text-muted tabular-nums sm:text-start">{{
+      t("spreadsheet.values.rowCount", { count: question.rows.length })
+    }}</span>
+    <USelectMenu
+      v-model:search-term="term"
+      :model-value="selected"
+      :items="items"
+      value-key="value"
+      :ignore-filter="question.remote"
+      :loading="searching"
+      :placeholder="t('spreadsheet.values.choose')"
+      :search-input="{ placeholder: t('spreadsheet.values.search') }"
+      :color="question.state === 'open' ? 'warning' : 'neutral'"
+      :highlight="question.state === 'open'"
+      :aria-label="t('spreadsheet.values.valueFor', { value: question.value })"
+      class="col-span-2 w-full sm:col-span-1"
+      @update:model-value="select"
+    />
+    <span
+      class="hidden h-5.5 items-center justify-self-start rounded-full px-2 text-[11.5px] font-semibold whitespace-nowrap sm:inline-flex"
+      :class="{
+  'bg-warning/12 text-warning': status === 'open',
+  'bg-primary/10 text-primary': status === 'user',
+  'bg-elevated text-muted': status === 'policy'
+}"
+    >
+      {{ t(`spreadsheet.values.statuses.${status}`) }}
+    </span>
+  </div>
+</template>

package/dist/runtime/spreadsheet/components/internal/spreadsheet-import-value-row.vue.d.ts

@@ -0,0 +1,13 @@
+import type { SpreadsheetResolvedOption, SpreadsheetValueAnswer, SpreadsheetValueQuestion } from '../../types/index.js';
+type __VLS_Props = {
+    question: SpreadsheetValueQuestion;
+    choices: readonly SpreadsheetResolvedOption[];
+    search: (text: string) => Promise<readonly SpreadsheetResolvedOption[]>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    answer: (answer: SpreadsheetValueAnswer) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAnswer?: ((answer: SpreadsheetValueAnswer) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,35 @@
+import type { SpreadsheetFieldState, SpreadsheetHeaderCell, SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    /** `missing`: only fields without a column; renders nothing when every field has one. */
+    only?: 'missing';
+    /** Missing fields first, the others folded. Defaults to `true`. */
+    groupByStatus?: boolean;
+    /** Offers a column whose values fit a missing field. Defaults to `true`. */
+    suggestions?: boolean;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        fields: readonly SpreadsheetFieldState[];
+        headers: readonly SpreadsheetHeaderCell[];
+        assign: (field: string, header: number) => void;
+        ignore: (field: string) => void;
+        reset: (field: string) => void;
+    }) => unknown;
+    field?: (props: {
+        field: SpreadsheetFieldState;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    only: "missing";
+    suggestions: boolean;
+    groupByStatus: 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;
+    };
+};

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-column-mapping.vue

@@ -0,0 +1,154 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, shallowRef, watch, watchEffect } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useSpreadsheetImporter } from "../../composables/use-spreadsheet-import-context";
+import SpreadsheetImportColumnRow from "../internal/spreadsheet-import-column-row.vue";
+const props = defineProps({
+  importer: { type: Object, required: false },
+  only: { type: String, required: false, default: void 0 },
+  groupByStatus: { type: Boolean, required: false, default: true },
+  suggestions: { type: Boolean, required: false, default: true }
+});
+defineSlots();
+const importer = useSpreadsheetImporter(() => props.importer);
+const { t } = useUiToolsLocale();
+const open = shallowRef(false);
+const fields = computed(() => importer.value.columns.fields.filter((field) => !field.from));
+const attentionPaths = shallowRef(/* @__PURE__ */ new Set());
+watch(
+  () => importer.value.columns.headers,
+  () => {
+    attentionPaths.value = /* @__PURE__ */ new Set();
+  }
+);
+watchEffect(() => {
+  if (!importer.value.file.loaded) return;
+  const missing = fields.value.filter(
+    (field) => field.status === "missing" && !attentionPaths.value.has(field.path)
+  );
+  if (missing.length)
+    attentionPaths.value = /* @__PURE__ */ new Set([...attentionPaths.value, ...missing.map((field) => field.path)]);
+});
+const attention = computed(
+  () => fields.value.filter(
+    (field) => attentionPaths.value.has(field.path) || field.status === "missing"
+  )
+);
+const others = computed(() => fields.value.filter((field) => !attention.value.includes(field)));
+const sections = computed(() => {
+  const list = [];
+  for (const field of others.value) {
+    const key = field.group?.path ?? "";
+    const section = list.find((entry) => entry.key === key);
+    if (section) section.fields.push(field);
+    else list.push({ fields: [field], key, label: field.group?.label ?? "" });
+  }
+  return list.sort((left, right) => (left.key ? 1 : 0) - (right.key ? 1 : 0));
+});
+const unused = computed(() => importer.value.columns.unusedHeaders.map((header) => header.text));
+const visible = computed(
+  () => importer.value.file.loaded && (props.only === "missing" ? attention.value.length > 0 : fields.value.length > 0)
+);
+function assign(field, header) {
+  importer.value.columns.assign(field, header);
+}
+function ignore(field) {
+  importer.value.columns.ignore(field);
+}
+function reset(field) {
+  importer.value.columns.reset(field);
+}
+</script>
+
+<template>
+  <div v-if="visible" data-spreadsheet-column-mapping class="grid gap-4">
+    <slot
+      :fields="fields"
+      :headers="importer.columns.headers"
+      :assign="assign"
+      :ignore="ignore"
+      :reset="reset"
+    >
+      <div
+        v-if="attention.length || !groupByStatus"
+        class="divide-y divide-default overflow-hidden rounded-xl border border-default bg-default"
+      >
+        <template v-for="field in groupByStatus ? attention : fields" :key="field.path">
+          <slot name="field" :field="field">
+            <SpreadsheetImportColumnRow
+              :field="field"
+              :headers="importer.columns.headers"
+              :suggestions="suggestions"
+              @assign="(header) => assign(field.path, header)"
+              @ignore="ignore(field.path)"
+              @reset="reset(field.path)"
+            />
+          </slot>
+        </template>
+      </div>
+      <div
+        v-else-if="only !== 'missing'"
+        class="flex items-center gap-3 rounded-xl border border-default bg-default px-4 py-3.5"
+      >
+        <span
+          class="grid size-8 shrink-0 place-items-center rounded-full bg-success/10 text-success"
+        >
+          <UIcon name="i-lucide-check" class="size-4" />
+        </span>
+        <span class="font-medium text-highlighted">{{ t("spreadsheet.columns.allFound") }}</span>
+      </div>
+
+      <div
+        v-if="groupByStatus && only !== 'missing' && others.length"
+        class="overflow-hidden rounded-xl border border-default bg-default"
+      >
+        <button
+          type="button"
+          class="flex w-full items-center gap-2 px-4 py-3 text-start text-sm font-medium text-toned hover:bg-elevated/60"
+          :aria-expanded="open"
+          @click="open = !open"
+        >
+          <UIcon
+            name="i-lucide-chevron-right"
+            class="size-4 text-dimmed transition-transform"
+            :class="open ? 'rotate-90' : ''"
+          />
+          {{
+            t("spreadsheet.columns.found", {
+  count: others.filter((field2) => field2.status === "matched").length
+})
+          }}
+        </button>
+        <div v-if="open" class="border-t border-default">
+          <template v-for="section in sections" :key="section.key">
+            <div
+              v-if="section.label"
+              class="border-b border-default bg-elevated/50 px-4 py-1.5 text-[11px] font-semibold tracking-[0.08em] text-dimmed uppercase"
+            >
+              {{ section.label }}
+            </div>
+            <div class="divide-y divide-default border-b border-default last:border-b-0">
+              <template v-for="field in section.fields" :key="field.path">
+                <slot name="field" :field="field">
+                  <SpreadsheetImportColumnRow
+                    :field="field"
+                    :headers="importer.columns.headers"
+                    :suggestions="suggestions"
+                    @assign="(header) => assign(field.path, header)"
+                    @ignore="ignore(field.path)"
+                    @reset="reset(field.path)"
+                  />
+                </slot>
+              </template>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <p v-if="only !== 'missing' && unused.length" class="text-sm text-muted">
+        {{ t("spreadsheet.columns.unused", { columns: unused.join(", ") }) }}
+      </p>
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,35 @@
+import type { SpreadsheetFieldState, SpreadsheetHeaderCell, SpreadsheetImporter } from '../../types/index.js';
+type __VLS_Props = {
+    importer?: SpreadsheetImporter;
+    /** `missing`: only fields without a column; renders nothing when every field has one. */
+    only?: 'missing';
+    /** Missing fields first, the others folded. Defaults to `true`. */
+    groupByStatus?: boolean;
+    /** Offers a column whose values fit a missing field. Defaults to `true`. */
+    suggestions?: boolean;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        fields: readonly SpreadsheetFieldState[];
+        headers: readonly SpreadsheetHeaderCell[];
+        assign: (field: string, header: number) => void;
+        ignore: (field: string) => void;
+        reset: (field: string) => void;
+    }) => unknown;
+    field?: (props: {
+        field: SpreadsheetFieldState;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    only: "missing";
+    suggestions: boolean;
+    groupByStatus: 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;
+    };
+};

package/dist/runtime/spreadsheet/components/parts/spreadsheet-import-dropzone.d.vue.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-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;
+    };
+};