@shwfed/config 3.0.9 → 3.0.11

package/dist/runtime/components/table/columns/2026-07-16/com.shwfed.table.column.upload/config.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue: Record<string, any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/table/columns/2026-07-16/com.shwfed.table.column.upload/prompt.md

@@ -0,0 +1,19 @@
+## 文件上传列
+
+可编辑单元格，读写 `binding`（`dot-prop` 路径）上的**文件项列表**，与表单的「文件上传」字段同源，只是绑定的是当前行数据（`row` / `index` / `selections` 在 CEL 中可用），而非表单状态。
+
+两种模式，取决于是否配置「即时上传」（`upload`）：
+
+- **不配置**（延迟模式）：选中的文件以原始 `File` 数组存在该行 `binding` 上，等待整行提交时由消费方编码。
+- **配置后**（即时模式）：每次选择文件立刻发起 `upload.request`（CEL 里用 `files` 引用本次选中的文件，如 `http.post(url).body(form({"files": files}))`），再用 `upload.handle` 把响应 `json` **映射成一个列表**写回 `binding`（如 `json.data.map(d, {"cacheKey": d.key, "filename": d.fileOriginalName})`）；`upload.filename` 用 `file` 引用单个已存文件项返回其展示名。绑定值里存的是映射后的对象，不是 `File`。
+
+三个表达式各有各的变量：`request` 见 `files`（本次选择）、`handle` 见 `json`（上传响应）、`filename` 见 `file`（单个存量项）——都在行作用域（`row`/`index`）之上，不要混用。
+
+`templates` 在上传区旁渲染「下载模板」按钮：只配 `request` 则直接下载其响应；再配 `download` 则是两步式——第二步经 `json` 引用第一步响应（如用 `json.data.key` 拼真正的下载地址）。
+
+`download`（文件下载）给每个**文件项**渲染一个下载按钮，点击时执行一条「触发操作」列表（复用 actions 的操作子系统），列表里的表达式可用 `file` 引用被点击的那一项。分两种情况：
+
+- **已上传/回填的对象项**：走操作列表，如放一个 `http.download` 操作、请求写 `http.get('/api/file').query('key', file.cacheKey)`；或两步式——先一个 `发送请求` 行取凭据、再一个 `下载文件` 行经 `steps[?"<步骤标识>"]` 引用其响应。凡下载要用到的字段，都必须已由 `upload.handle` 落进文件项。
+- **尚未上传的本地文件**（延迟模式刚选中的原始 `File`）：内存里没有服务端标识，故绕过列表、直接从 blob 下载。
+
+下载按钮在只读表格/表单里仍显示（查看已提交记录并下载附件是主要场景）。约束类字段（`accept` / `maxFileSize` / `maxTotalSize` / `maxFiles` / `multiple`）按需设置即可。`disabled` / `readonly` 是行作用域 CEL（返回 `bool`）。

package/dist/runtime/components/table/columns/2026-07-16/com.shwfed.table.column.upload/runtime.d.vue.ts

@@ -0,0 +1,9 @@
+import type { CellContext } from '@tanstack/vue-table';
+import type { Value } from './schema.js';
+type __VLS_Props = {
+    column: Value;
+    ctx: CellContext<unknown, unknown>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/table/columns/2026-07-16/com.shwfed.table.column.upload/runtime.vue

@@ -0,0 +1,503 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { Effect } from "effect";
+import { Fetch } from "fx-fetch";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { toast } from "vue-sonner";
+import { cel as _rawCel } from "../../../../../utils/cel";
+import { celScope, injectCELContext } from "../../../../../utils/cel-context";
+import { dispatchTriggers, useEventChannel } from "../../../../../share/event-bus";
+import { getLocalizedText } from "../../../../../share/locale";
+import { Button } from "../../../../ui/button";
+import { useFormReadonly } from "../../../../form/utils/readonly";
+import { useFormState } from "../../../../form/utils/state";
+const ICONS = {
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "vscode-icons:file-type-excel",
+  "application/vnd.ms-excel": "vscode-icons:file-type-excel",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": "vscode-icons:file-type-powerpoint",
+  "application/vnd.ms-powerpoint": "vscode-icons:file-type-powerpoint",
+  "application/zip": "vscode-icons:file-type-zip",
+  "application/x-zip-compressed": "vscode-icons:file-type-zip",
+  "application/vnd.rar": "vscode-icons:file-type-zip",
+  "application/x-rar-compressed": "vscode-icons:file-type-zip",
+  "application/pdf": "vscode-icons:file-type-pdf2",
+  "application/ofd": "vscode-icons:file-type-ofd",
+  "application/xml": "vscode-icons:file-type-xml",
+  "image/png": "vscode-icons:file-type-image",
+  "image/jpg": "vscode-icons:file-type-image",
+  "image/jpeg": "vscode-icons:file-type-image",
+  "application/msword": "vscode-icons:file-type-word",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "vscode-icons:file-type-word"
+};
+const EXTENSIONS = {
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+  "application/vnd.ms-excel": [".xls"],
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
+  "application/vnd.ms-powerpoint": [".ppt"],
+  "application/zip": [".zip"],
+  "application/x-zip-compressed": [".zip"],
+  "application/vnd.rar": [".rar"],
+  "application/x-rar-compressed": [".rar"],
+  "application/pdf": [".pdf"],
+  "application/ofd": [".ofd"],
+  "application/xml": [".xml"],
+  "image/png": [".png"],
+  "image/jpg": [".jpg"],
+  "image/jpeg": [".jpeg", ".jpg"],
+  "application/msword": [".doc"],
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"]
+};
+const SHORT_NAMES = {
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+  "application/vnd.ms-excel": "XLS",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": "PPTX",
+  "application/vnd.ms-powerpoint": "PPT",
+  "application/zip": "ZIP",
+  "application/x-zip-compressed": "ZIP",
+  "application/vnd.rar": "RAR",
+  "application/x-rar-compressed": "RAR",
+  "application/pdf": "PDF",
+  "application/ofd": "OFD",
+  "application/xml": "XML",
+  "image/png": "PNG",
+  "image/jpg": "JPG",
+  "image/jpeg": "JPEG",
+  "application/msword": "DOC",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX"
+};
+defineOptions({ name: "ShwfedTableUploadRendererRuntime" });
+const props = defineProps({
+  column: { type: null, required: true },
+  ctx: { type: Object, required: true }
+});
+const { locale, t } = useI18n({
+  inheritLocale: true,
+  messages: {
+    zh: {
+      "upload-add-file": "\u6DFB\u52A0\u6587\u4EF6",
+      "upload-accept-hint": "\u4EC5\u63A5\u53D7 {types}",
+      "upload-rejected-mime": "\u300C{name}\u300D\u7C7B\u578B\u4E0D\u88AB\u5141\u8BB8",
+      "upload-rejected-size": "\u300C{name}\u300D\u8D85\u51FA\u5355\u6587\u4EF6\u5927\u5C0F\u9650\u5236",
+      "upload-rejected-total": "\u300C{name}\u300D\u52A0\u5165\u540E\u5C06\u8D85\u51FA\u603B\u5927\u5C0F\u9650\u5236",
+      "upload-rejected-count": "\u5DF2\u8FBE\u5230\u6587\u4EF6\u6570\u91CF\u4E0A\u9650\uFF0C\u300C{name}\u300D\u672A\u6DFB\u52A0",
+      "upload-uploading": "\u4E0A\u4F20\u4E2D\u2026",
+      "upload-failed": "\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25"
+    },
+    en: {
+      "upload-add-file": "Add file",
+      "upload-accept-hint": "Only {types} are accepted",
+      "upload-rejected-mime": "{name} is not an allowed file type",
+      "upload-rejected-size": "{name} exceeds the maximum file size",
+      "upload-rejected-total": "{name} would exceed the total size limit",
+      "upload-rejected-count": "File count limit reached; {name} was not added",
+      "upload-uploading": "Uploading\u2026",
+      "upload-failed": "File upload failed"
+    },
+    ja: {
+      "upload-add-file": "\u30D5\u30A1\u30A4\u30EB\u3092\u8FFD\u52A0",
+      "upload-accept-hint": "{types} \u306E\u307F\u53D7\u3051\u4ED8\u3051\u307E\u3059",
+      "upload-rejected-mime": "\u300C{name}\u300D\u306F\u8A31\u53EF\u3055\u308C\u305F\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u3067\u306F\u3042\u308A\u307E\u305B\u3093",
+      "upload-rejected-size": "\u300C{name}\u300D\u306F\u30D5\u30A1\u30A4\u30EB\u30B5\u30A4\u30BA\u306E\u4E0A\u9650\u3092\u8D85\u3048\u3066\u3044\u307E\u3059",
+      "upload-rejected-total": "\u300C{name}\u300D\u3092\u8FFD\u52A0\u3059\u308B\u3068\u5408\u8A08\u30B5\u30A4\u30BA\u306E\u4E0A\u9650\u3092\u8D85\u3048\u307E\u3059",
+      "upload-rejected-count": "\u30D5\u30A1\u30A4\u30EB\u6570\u306E\u4E0A\u9650\u306B\u9054\u3057\u305F\u305F\u3081\u300C{name}\u300D\u306F\u8FFD\u52A0\u3055\u308C\u307E\u305B\u3093",
+      "upload-uploading": "\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u4E2D\u2026",
+      "upload-failed": "\u30D5\u30A1\u30A4\u30EB\u306E\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u306B\u5931\u6557\u3057\u307E\u3057\u305F"
+    }
+  }
+});
+const formState = useFormState();
+const inherited = injectCELContext();
+const $cel = (expression, context) => _rawCel(expression, celScope(inherited, context));
+const eventChannel = useEventChannel();
+const placeholderText = computed(
+  () => props.column.placeholder ? getLocalizedText(props.column.placeholder, locale.value) : void 0
+);
+function evalBool(expression, label) {
+  if (!expression) return false;
+  try {
+    return Effect.runSync($cel(expression, {})) === true;
+  } catch (err) {
+    console.error(`[shwfed-table] upload ${label} failed for ${props.column.id}:`, err);
+    return false;
+  }
+}
+const isDisabled = computed(() => evalBool(props.column.disabled, "disabled"));
+const formReadonly = useFormReadonly();
+const isReadonly = computed(
+  () => props.column.readonly != null ? evalBool(props.column.readonly, "readonly") : formReadonly.value
+);
+const entries = computed({
+  get: () => {
+    const raw = formState.getAt(props.column.binding);
+    return Array.isArray(raw) ? raw : [];
+  },
+  set: (next) => {
+    formState.setAt(props.column.binding, next.length === 0 ? null : next);
+  }
+});
+const immediate = computed(() => props.column.upload != null);
+const uploading = ref(false);
+function entryName(entry) {
+  if (entry instanceof File) return entry.name;
+  const expr = props.column.upload?.filename;
+  if (expr) {
+    try {
+      const name = Effect.runSync($cel(expr, { file: entry }));
+      if (typeof name === "string" && name.length > 0) return name;
+    } catch (err) {
+      console.error(`[shwfed-table] upload filename failed for ${props.column.id}:`, err);
+    }
+  }
+  if (entry != null && typeof entry === "object") {
+    const rec = entry;
+    if (typeof rec.filename === "string") return rec.filename;
+    if (typeof rec.name === "string") return rec.name;
+  }
+  return "(\u6587\u4EF6)";
+}
+function entryIcon(entry) {
+  if (entry instanceof File) return ICONS[entry.type] ?? "fluent:document-20-regular";
+  return "fluent:document-20-regular";
+}
+const inputRef = ref();
+const acceptAttr = computed(() => {
+  const list = props.column.accept;
+  return list && list.length > 0 ? list.join(",") : void 0;
+});
+const acceptHint = computed(() => {
+  const list = props.column.accept;
+  if (!list || list.length === 0) return void 0;
+  return Array.from(new Set(list.map((m) => SHORT_NAMES[m] ?? m))).join("\u3001");
+});
+const isFull = computed(
+  () => props.column.maxFiles !== void 0 && entries.value.length >= props.column.maxFiles
+);
+const canAdd = computed(() => !isDisabled.value && !isReadonly.value && !isFull.value && !uploading.value);
+function isMimeAllowed(file) {
+  const list = props.column.accept;
+  if (!list || list.length === 0) return true;
+  if (file.type && list.includes(file.type)) return true;
+  const dot = file.name.lastIndexOf(".");
+  if (dot < 0) return false;
+  const ext = file.name.slice(dot).toLowerCase();
+  return list.some((mime) => EXTENSIONS[mime]?.includes(ext));
+}
+function partition(incoming) {
+  const accepted = [];
+  const rejected = [];
+  let runningTotal = entries.value.reduce((acc, f) => acc + (f instanceof File ? f.size : 0), 0);
+  let count = entries.value.length;
+  for (const file of incoming) {
+    if (!isMimeAllowed(file)) {
+      rejected.push({ file, reason: "mime" });
+      continue;
+    }
+    if (props.column.maxFileSize !== void 0 && file.size > props.column.maxFileSize) {
+      rejected.push({ file, reason: "size" });
+      continue;
+    }
+    if (props.column.maxFiles !== void 0 && count >= props.column.maxFiles) {
+      rejected.push({ file, reason: "count" });
+      continue;
+    }
+    if (props.column.maxTotalSize !== void 0 && runningTotal + file.size > props.column.maxTotalSize) {
+      rejected.push({ file, reason: "total" });
+      continue;
+    }
+    accepted.push(file);
+    runningTotal += file.size;
+    count += 1;
+  }
+  return { accepted, rejected };
+}
+async function uploadFiles(accepted) {
+  const upload = props.column.upload;
+  if (!upload) return [];
+  const program = Effect.gen(function* () {
+    const builder = yield* $cel(upload.request, { files: accepted });
+    const json = yield* builder.json();
+    return yield* $cel(upload.handle, { json });
+  });
+  try {
+    const items = await Effect.runPromise(Effect.provide(program, Fetch.layer));
+    if (!Array.isArray(items)) {
+      console.error(`[shwfed-table] upload handle for ${props.column.id} did not return a list`);
+      toast.error(t("upload-failed"));
+      return [];
+    }
+    return items;
+  } catch (err) {
+    console.error(`[shwfed-table] failed to upload files for ${props.column.id}:`, err);
+    toast.error(t("upload-failed"));
+    return [];
+  }
+}
+async function ingest(list) {
+  if (!list || list.length === 0) return;
+  const multi = props.column.multiple ?? false;
+  const incoming = multi ? Array.from(list) : Array.from(list).slice(0, 1);
+  const { accepted, rejected } = partition(incoming);
+  for (const r of rejected) {
+    toast.error(t(`upload-rejected-${r.reason}`, { name: r.file.name }));
+  }
+  if (inputRef.value) inputRef.value.value = "";
+  if (accepted.length === 0) return;
+  if (!immediate.value) {
+    entries.value = multi ? [...entries.value, ...accepted] : accepted;
+    return;
+  }
+  uploading.value = true;
+  try {
+    const items = await uploadFiles(accepted);
+    if (items.length > 0) {
+      entries.value = multi ? [...entries.value, ...items] : items;
+    }
+  } finally {
+    uploading.value = false;
+  }
+}
+function onPickerChange(event) {
+  void ingest(event.target.files);
+}
+function onAddClick() {
+  if (!canAdd.value) return;
+  inputRef.value?.click();
+}
+function onKeydown(event) {
+  if (!canAdd.value) return;
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    inputRef.value?.click();
+  }
+}
+function onDelete(index) {
+  if (isDisabled.value || isReadonly.value || uploading.value) return;
+  const next = [...entries.value];
+  next.splice(index, 1);
+  entries.value = next;
+}
+function saveFile(file) {
+  const url = URL.createObjectURL(file);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = file.name;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+const templates = computed(() => props.column.templates ?? []);
+function templateIcon(template) {
+  return template.icon ?? "fluent:arrow-download-20-regular";
+}
+function templateLabelText(template) {
+  return (template.label ? getLocalizedText(template.label, locale.value) : void 0) ?? "\u4E0B\u8F7D\u6A21\u677F";
+}
+async function onDownloadTemplate(template) {
+  const program = Effect.gen(function* () {
+    const requestBuilder = yield* $cel(template.request, {});
+    if (!template.download) {
+      return yield* requestBuilder.file();
+    }
+    const json = yield* requestBuilder.json();
+    const downloadBuilder = yield* $cel(template.download, { json });
+    return yield* downloadBuilder.file();
+  });
+  try {
+    const file = await Effect.runPromise(Effect.provide(program, Fetch.layer));
+    if (!(file instanceof File)) {
+      console.error(`[shwfed-table] template request for ${props.column.id} did not produce a File`);
+      return;
+    }
+    saveFile(file);
+  } catch (err) {
+    console.error(`[shwfed-table] failed to download template for ${props.column.id}:`, err);
+  }
+}
+const downloadEnabled = computed(() => props.column.download != null);
+const downloadIcon = computed(() => props.column.download?.icon ?? "fluent:arrow-download-20-regular");
+const downloadLabel = computed(
+  () => (props.column.download?.label ? getLocalizedText(props.column.download.label, locale.value) : void 0) ?? "\u4E0B\u8F7D"
+);
+function canDownload(entry) {
+  if (!downloadEnabled.value) return false;
+  if (entry instanceof File) return true;
+  return (props.column.download?.operations.length ?? 0) > 0;
+}
+async function onDownloadEntry(entry) {
+  if (!downloadEnabled.value) return;
+  if (entry instanceof File) {
+    saveFile(entry);
+    return;
+  }
+  const download = props.column.download;
+  if (!download || download.operations.length === 0) return;
+  const triggerCel = (expression, context) => _rawCel(expression, celScope(inherited, { file: entry, ...context }));
+  try {
+    await Effect.runPromise(dispatchTriggers(eventChannel, download.operations, triggerCel));
+  } catch (err) {
+    if (import.meta.dev) console.warn(`[shwfed-table] download operations halted for ${props.column.id}:`, err);
+  }
+}
+</script>
+
+<template>
+  <div class="p-[0.125rem] w-full">
+    <div
+      class="flex flex-col gap-1.5"
+      :data-disabled="isDisabled || void 0"
+      :data-readonly="isReadonly || void 0"
+    >
+      <!--
+        Readonly empty state mirrors the other columns: a centered, faded,
+        non-selectable `-` in `font-mono`, so a readonly grid reads uniformly
+        regardless of which column type backs each cell.
+      -->
+      <span
+        v-if="entries.length === 0 && isReadonly"
+        class="flex items-center justify-center h-7 w-full px-2 text-[0.75rem] font-mono text-zinc-300 select-none"
+        data-slot="upload-empty"
+      >
+        {{ "-" }}
+      </span>
+
+      <!-- File list — shown whenever there are entries (readonly or not). -->
+      <ul
+        v-else-if="entries.length > 0"
+        data-slot="upload-zone-list"
+        class="flex flex-col gap-0.5"
+      >
+        <li
+          v-for="(entry, index) in entries"
+          :key="`${entryName(entry)}-${index}`"
+          data-slot="upload-zone-item"
+          class="flex items-center justify-between gap-1 rounded px-1.5 py-1 text-[0.75rem] leading-snug transition-[background-color] duration-180 ease-out hover:bg-zinc-50"
+        >
+          <span class="flex min-w-0 items-center gap-1.5">
+            <Icon
+              :icon="entryIcon(entry)"
+              class="size-3.5 shrink-0"
+            />
+            <span class="truncate text-zinc-700">{{ entryName(entry) }}</span>
+          </span>
+          <span class="flex shrink-0 items-center gap-0.5">
+            <Button
+              v-if="canDownload(entry)"
+              type="button"
+              variant="ghost"
+              size="sm"
+              data-slot="upload-zone-download"
+              class="size-5 p-0 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700"
+              :aria-label="`${downloadLabel}\uFF1A${entryName(entry)}`"
+              @click="onDownloadEntry(entry)"
+            >
+              <Icon
+                :icon="downloadIcon"
+                class="size-3.5"
+              />
+            </Button>
+            <Button
+              v-if="!isDisabled && !isReadonly"
+              type="button"
+              variant="ghost"
+              size="sm"
+              data-slot="upload-zone-delete"
+              class="size-5 p-0 text-zinc-500 hover:bg-red-50 hover:text-red-600"
+              :disabled="uploading"
+              :aria-label="`\u5220\u9664\uFF1A${entryName(entry)}`"
+              @click="onDelete(index)"
+            >
+              <Icon
+                icon="fluent:delete-20-regular"
+                class="size-3.5"
+              />
+            </Button>
+          </span>
+        </li>
+      </ul>
+
+      <!--
+        Empty editable state: a compact dashed add zone. Kept short (min-h-16)
+        so an empty row does not tower over its neighbours; the non-empty list
+        grows only as far as the files it holds.
+      -->
+      <div
+        v-else
+        role="button"
+        :tabindex="canAdd ? 0 : -1"
+        data-slot="upload-zone"
+        :data-disabled="isDisabled || void 0"
+        :aria-disabled="isDisabled || void 0"
+        class="flex min-h-16 w-full flex-col items-center justify-center gap-1 rounded border border-dashed border-zinc-200 bg-zinc-50/60 px-2 py-2 outline-none transition-colors duration-180 ease-out focus-visible:border-(--primary) data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-60"
+        :class="canAdd && 'cursor-pointer hover:border-zinc-400 hover:bg-zinc-100'"
+        @click="onAddClick"
+        @keydown="onKeydown"
+      >
+        <Icon
+          :icon="uploading ? 'fluent:spinner-ios-20-regular' : 'fluent:cloud-arrow-up-20-regular'"
+          class="size-5 text-zinc-400"
+          :class="uploading && 'animate-spin'"
+        />
+        <p class="text-[0.7rem] text-zinc-500">
+          {{ uploading ? t("upload-uploading") : placeholderText ?? t("upload-add-file") }}
+        </p>
+        <p
+          v-if="acceptHint"
+          class="text-[0.65rem] text-zinc-400"
+        >
+          {{ t("upload-accept-hint", { types: acceptHint }) }}
+        </p>
+      </div>
+
+      <!-- Add button — only when the list is non-empty and adding is allowed. -->
+      <Button
+        v-if="entries.length > 0 && canAdd"
+        type="button"
+        variant="default"
+        size="sm"
+        data-slot="upload-zone-add"
+        class="h-6 w-full shrink-0 text-[0.75rem]"
+        @click="onAddClick"
+      >
+        <Icon
+          :icon="uploading ? 'fluent:spinner-ios-20-regular' : 'fluent:add-20-regular'"
+          :class="uploading && 'animate-spin'"
+        />
+        {{ uploading ? t("upload-uploading") : t("upload-add-file") }}
+      </Button>
+
+      <input
+        ref="inputRef"
+        type="file"
+        class="hidden"
+        :accept="acceptAttr"
+        :multiple="column.multiple"
+        :disabled="isDisabled || isReadonly"
+        @change="onPickerChange"
+      >
+
+      <div
+        v-if="templates.length > 0 && !isReadonly"
+        class="flex flex-wrap justify-end gap-1"
+      >
+        <Button
+          v-for="(template, index) in templates"
+          :key="index"
+          type="button"
+          variant="link"
+          size="sm"
+          data-slot="upload-zone-template"
+          class="h-5 px-1 text-[0.7rem]"
+          @click="onDownloadTemplate(template)"
+        >
+          <Icon
+            :icon="templateIcon(template)"
+            class="size-3.5"
+          />
+          {{ templateLabelText(template) }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/table/columns/2026-07-16/com.shwfed.table.column.upload/runtime.vue.d.ts

@@ -0,0 +1,9 @@
+import type { CellContext } from '@tanstack/vue-table';
+import type { Value } from './schema.js';
+type __VLS_Props = {
+    column: Value;
+    ctx: CellContext<unknown, unknown>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;