@shwfed/config 3.0.12 → 3.0.14

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

@@ -1,15 +1,11 @@
 <script setup>
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, ref } from "vue";
 import { Icon } from "@iconify/vue";
-import {
-  useTreeDnd
-} from "../../../../../composables/useTreeDnd";
 import { provideCELContext } from "../../../../../utils/cel-context";
 import TriggersField from "../../../../actions/components/triggers-field.vue";
 import { ExpressionEditor } from "../../../../ui/expression-editor";
 import { Separator } from "../../../../ui/separator";
 import { Switch } from "../../../../ui/switch";
-import { Button } from "../../../../ui/button";
 import { Field, FieldLabel } from "../../../../ui/field";
 import { IconPicker } from "../../../../ui/icon-picker";
 import { Locale } from "../../../../ui/locale";
@@ -35,7 +31,7 @@ import {
   SelectValue
 } from "../../../../ui/select";
 import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
-import { FILE_VAR, FILES_VAR, JSON_VAR, UPLOAD_JSON_VAR, schema } from "./schema";
+import { FILE_VAR, FILES_VAR, UPLOAD_JSON_VAR, schema } from "./schema";
 defineOptions({ name: "ShwfedTableUploadRendererConfig" });
 const value = defineModel({ type: Object, ...{ required: true } });
 const fieldSchema = schema(() => {
@@ -49,7 +45,6 @@ const ROW_VARS = {
 const UPLOAD_REQUEST_VARS = { ...ROW_VARS, files: FILES_VAR };
 const UPLOAD_HANDLE_VARS = { ...ROW_VARS, json: UPLOAD_JSON_VAR };
 const UPLOAD_FILENAME_VARS = { ...ROW_VARS, file: FILE_VAR };
-const TEMPLATE_DOWNLOAD_VARS = { ...ROW_VARS, json: JSON_VAR };
 const bindingText = computed({
   get: () => value.value.binding ?? "",
   set: (next) => {
@@ -131,110 +126,22 @@ const uploadFilenameText = computed({
     }
   }
 });
-const templates = computed(() => value.value.templates ?? []);
-function setTemplates(next) {
-  if (next.length === 0) {
-    const { templates: _omit, ...rest } = value.value;
+function updateAddIcon(icon) {
+  const trimmed = icon.trim();
+  if (trimmed.length === 0) {
+    const { addIcon: _omit, ...rest } = value.value;
     value.value = rest;
   } else {
-    value.value = { ...value.value, templates: next };
+    value.value = { ...value.value, addIcon: trimmed };
   }
 }
-function makeId() {
-  if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-    const r = Math.random() * 16 | 0;
-    return (c === "x" ? r : r & 3 | 8).toString(16);
-  });
-}
-const rowKeys = ref([]);
-watch(
-  () => templates.value.length,
-  (len) => {
-    if (len === rowKeys.value.length) return;
-    rowKeys.value = Array.from({ length: len }, () => makeId());
-  },
-  { immediate: true }
-);
-function addTemplate() {
-  setTemplates([...templates.value, { request: "" }]);
-  rowKeys.value = [...rowKeys.value, makeId()];
-}
-function removeTemplate(index) {
-  setTemplates(templates.value.filter((_, i) => i !== index));
-  rowKeys.value = rowKeys.value.filter((_, i) => i !== index);
-}
-function move(from, to) {
-  if (from === to) return;
-  if (from < 0 || to < 0 || from >= templates.value.length || to >= templates.value.length) return;
-  const next = [...templates.value];
-  const [entry] = next.splice(from, 1);
-  if (!entry) return;
-  next.splice(to, 0, entry);
-  setTemplates(next);
-  const keys = [...rowKeys.value];
-  const [key] = keys.splice(from, 1);
-  if (!key) return;
-  keys.splice(to, 0, key);
-  rowKeys.value = keys;
-}
-function patchTemplate(index, patch) {
-  setTemplates(templates.value.map((entry, i) => i === index ? patch(entry) : entry));
-}
-const TEMPLATE_ROW_KIND = "shwfed-table-upload-template";
-const rowId = (i) => rowKeys.value[i] ?? `idx-${i}`;
-function onTemplateRowDrop(e) {
-  if (e.source.kind !== TEMPLATE_ROW_KIND || e.target.kind !== TEMPLATE_ROW_KIND) return;
-  const from = rowKeys.value.findIndex((k) => k === e.source.id);
-  const to = rowKeys.value.findIndex((k) => k === e.target.id);
-  if (from < 0 || to < 0) return;
-  if (e.instruction === "reorder-above") move(from, from < to ? to - 1 : to);
-  else if (e.instruction === "reorder-below") move(from, from <= to ? to : to + 1);
-}
-const templateDnd = useTreeDnd({ onRowDrop: onTemplateRowDrop });
-const pickDragHandle = (el) => el.querySelector(".drag-handle");
-function templateRowConfig(i) {
-  return {
-    kind: TEMPLATE_ROW_KIND,
-    canDrop: (src) => src.kind === TEMPLATE_ROW_KIND,
-    blockInstructions: (src) => {
-      const block = ["make-child", "reparent"];
-      if (src.id === rowId(i)) block.push("reorder-above", "reorder-below");
-      return block;
-    },
-    dragHandle: pickDragHandle
-  };
-}
-function updateTemplateRequest(index, request) {
-  patchTemplate(index, (entry) => ({ ...entry, request }));
-}
-function updateTemplateDownload(index, download) {
-  patchTemplate(index, (entry) => {
-    if (download.length === 0) {
-      const { download: _omit, ...rest } = entry;
-      return rest;
-    }
-    return { ...entry, download };
-  });
-}
-function updateTemplateIcon(index, icon) {
-  patchTemplate(index, (entry) => {
-    const trimmed = icon.trim();
-    if (trimmed.length === 0) {
-      const { icon: _omit, ...rest } = entry;
-      return rest;
-    }
-    return { ...entry, icon: trimmed };
-  });
-}
-function updateTemplateLabel(index, label) {
-  patchTemplate(index, (entry) => {
-    if (label == null || label.length === 0) {
-      const { label: _omit, ...rest } = entry;
-      return rest;
-    }
-    return { ...entry, label };
-  });
+function updateAddLabel(label) {
+  if (label == null || label.length === 0) {
+    const { addLabel: _omit, ...rest } = value.value;
+    value.value = rest;
+  } else {
+    value.value = { ...value.value, addLabel: label };
+  }
 }
 const MIME_GROUPS = [
   { id: "pdf", label: "PDF", mimes: ["application/pdf"] },
@@ -424,25 +331,6 @@ const DownloadScope = defineComponent({
           @update:model-value="(v) => value = { ...value, tooltip: v }"
         />
       </Field>
-      <Field orientation="vertical">
-        <FieldLabel class="text-xs text-zinc-500">
-          <template
-            v-if="fieldDescription('placeholder')"
-            #tooltip
-          >
-            <Markdown
-              :source="fieldDescription('placeholder')"
-              block
-              class="prose prose-sm prose-zinc"
-            />
-          </template>
-          {{ fieldTitle("placeholder") }}
-        </FieldLabel>
-        <Locale
-          :model-value="value.placeholder"
-          @update:model-value="(v) => value = { ...value, placeholder: v }"
-        />
-      </Field>
     </div>
 
     <div class="grid grid-cols-3 gap-x-6 gap-y-4">
@@ -622,6 +510,49 @@ const DownloadScope = defineComponent({
       </Field>
     </div>
 
+    <!-- Add button appearance -->
+    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('addIcon')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('addIcon')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("addIcon") }}
+        </FieldLabel>
+        <IconPicker
+          :model-value="value.addIcon ?? ''"
+          @update:model-value="updateAddIcon"
+        />
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('addLabel')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('addLabel')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("addLabel") }}
+        </FieldLabel>
+        <Locale
+          :model-value="value.addLabel"
+          @update:model-value="updateAddLabel"
+        />
+      </Field>
+    </div>
+
     <Separator />
 
     <!-- Immediate upload -->
@@ -772,127 +703,6 @@ const DownloadScope = defineComponent({
 
     <Separator />
 
-    <!-- Download templates -->
-    <Field orientation="vertical">
-      <FieldLabel class="text-xs text-zinc-500">
-        <template #tooltip>
-          <Markdown
-            :source="fieldDescription('templates') ?? '\u4E0B\u8F7D\u6A21\u677F\u5217\u8868\uFF1B\u6BCF\u4E00\u9879\u6E32\u67D3\u4E00\u4E2A\u4E0B\u8F7D\u6309\u94AE'"
-            block
-            class="prose prose-sm prose-zinc"
-          />
-        </template>
-        {{ fieldTitle("templates") }}
-      </FieldLabel>
-
-      <div class="flex flex-col gap-2">
-        <div
-          v-for="(template, index) in templates"
-          :key="rowKeys[index]"
-          :ref="templateDnd.rowRef(rowId(index), templateRowConfig(index))"
-          data-slot="upload-template"
-          class="relative flex items-start gap-2 rounded border border-zinc-200 bg-zinc-50/40 p-2"
-          :data-instruction="templateDnd.instructionFor(rowId(index)) ?? void 0"
-        >
-          <Icon
-            icon="fluent:re-order-dots-vertical-20-regular"
-            class="drag-handle mt-2.5 size-4 shrink-0 cursor-grab text-zinc-400"
-            data-slot="upload-template-drag-handle"
-          />
-
-          <div class="flex min-w-0 flex-1 flex-col gap-2">
-            <div class="grid grid-cols-2 gap-2">
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  <template #tooltip>
-                    <Markdown
-                      source="返回 `HttpRequest` 的 CEL 表达式。未配置「下载请求」时直接发起并下载其响应"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  请求
-                </FieldLabel>
-                <ExpressionEditor
-                  :model-value="template.request"
-                  placeholder="例：http.get('https://api.example.com/template.xlsx')"
-                  result-type="HttpRequest"
-                  :extra-vars="ROW_VARS"
-                  class="min-h-10"
-                  @update:model-value="(v) => updateTemplateRequest(index, v)"
-                />
-              </Field>
-
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  <template #tooltip>
-                    <Markdown
-                      source="可选的第二步：用第一步响应 `json` 中的凭据构造真正的下载请求，例如 `json.data.key`"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  下载请求
-                </FieldLabel>
-                <ExpressionEditor
-                  :model-value="template.download ?? ''"
-                  placeholder="例：http.get('https://api.example.com/download').query('key', json.data.key)"
-                  result-type="HttpRequest"
-                  :extra-vars="TEMPLATE_DOWNLOAD_VARS"
-                  class="min-h-10"
-                  @update:model-value="(v) => updateTemplateDownload(index, v)"
-                />
-              </Field>
-            </div>
-
-            <div class="grid grid-cols-2 gap-2">
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  模板按钮图标
-                </FieldLabel>
-                <IconPicker
-                  :model-value="template.icon ?? ''"
-                  @update:model-value="(v) => updateTemplateIcon(index, v)"
-                />
-              </Field>
-
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  模板按钮文本
-                </FieldLabel>
-                <Locale
-                  :model-value="template.label"
-                  @update:model-value="(v) => updateTemplateLabel(index, v)"
-                />
-              </Field>
-            </div>
-          </div>
-
-          <Button
-            variant="ghost"
-            size="sm"
-            class="absolute top-1 right-1 size-6 p-0 text-red-600 hover:text-red-700"
-            aria-label="移除模板"
-            @click="removeTemplate(index)"
-          >
-            <Icon icon="fluent:delete-20-regular" />
-          </Button>
-        </div>
-
-        <Button
-          type="button"
-          data-slot="upload-template-add"
-          class="w-full justify-center"
-          @click="addTemplate"
-        >
-          <Icon icon="fluent:add-20-regular" />
-          <span>增加</span>
-        </Button>
-      </div>
-    </Field>
-
-    <Separator />
-
     <div class="grid grid-cols-2 gap-x-6 gap-y-4">
       <Field orientation="vertical">
         <FieldLabel class="text-xs text-zinc-500">

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

@@ -9,11 +9,11 @@
 
 三个表达式各有各的变量：`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`）。
+
+单元格只有一个「添加文件」按钮（无拖放区，单元格高度只有一行）：`addLabel` / `addIcon` 可改其文案与图标。数量达上限即隐藏该按钮——不开 `multiple` 时上限就是 1，要换文件得先删除已有的那个。

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

@@ -48,24 +48,6 @@ const EXTENSIONS = {
   "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 },
@@ -76,7 +58,6 @@ const { locale, t } = useI18n({
   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",
@@ -86,7 +67,6 @@ const { locale, t } = useI18n({
     },
     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",
@@ -96,7 +76,6 @@ const { locale, t } = useI18n({
     },
     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",
@@ -110,9 +89,6 @@ 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 {
@@ -160,19 +136,24 @@ function entryIcon(entry) {
   if (entry instanceof File) return ICONS[entry.type] ?? "fluent:document-20-regular";
   return "fluent:document-20-regular";
 }
+const addIcon = computed(() => props.column.addIcon ?? "fluent:add-20-regular");
+const addLabel = computed(
+  () => (props.column.addLabel ? getLocalizedText(props.column.addLabel, locale.value) : void 0) ?? t("upload-add-file")
+);
 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 effectiveMaxFiles = computed(() => {
+  const configured = props.column.maxFiles;
+  if (props.column.multiple !== true) return Math.min(1, configured ?? 1);
+  return configured;
+});
+const isFull = computed(() => {
+  const cap = effectiveMaxFiles.value;
+  return cap !== void 0 && entries.value.length >= cap;
 });
-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;
@@ -197,7 +178,7 @@ function partition(incoming) {
       rejected.push({ file, reason: "size" });
       continue;
     }
-    if (props.column.maxFiles !== void 0 && count >= props.column.maxFiles) {
+    if (effectiveMaxFiles.value !== void 0 && count >= effectiveMaxFiles.value) {
       rejected.push({ file, reason: "count" });
       continue;
     }
@@ -264,13 +245,6 @@ 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];
@@ -287,34 +261,6 @@ function saveFile(file) {
   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(
@@ -343,9 +289,15 @@ async function onDownloadEntry(entry) {
 </script>
 
 <template>
-  <div class="p-[0.125rem] w-full">
+  <!--
+    The cell's own content (one add button, or a short file list) is usually
+    shorter than the row, which is sized by its tallest neighbour — so the
+    wrapper fills the height and centres, rather than letting the button pin to
+    the top edge.
+  -->
+  <div class="p-[0.125rem] w-full h-full flex items-center">
     <div
-      class="flex flex-col gap-1.5"
+      class="flex w-full flex-col gap-1.5"
       :data-disabled="isDisabled || void 0"
       :data-readonly="isReadonly || void 0"
     >
@@ -418,53 +370,26 @@ async function onDownloadEntry(entry) {
       </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.
+        Add button — the only affordance for picking files, empty cell or not.
+        A cell is one grid row tall, so the dashed drop zone this replaces made
+        empty rows tower over their neighbours. `isFull` hides it (nothing left
+        to add); `isDisabled` keeps it rendered but inert, per the schema.
       -->
-      <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"
+        v-if="!isReadonly && !isFull"
         type="button"
         variant="default"
         size="sm"
         data-slot="upload-zone-add"
         class="h-6 w-full shrink-0 text-[0.75rem]"
+        :disabled="isDisabled || uploading"
         @click="onAddClick"
       >
         <Icon
-          :icon="uploading ? 'fluent:spinner-ios-20-regular' : 'fluent:add-20-regular'"
+          :icon="uploading ? 'fluent:spinner-ios-20-regular' : addIcon"
           :class="uploading && 'animate-spin'"
         />
-        {{ uploading ? t("upload-uploading") : t("upload-add-file") }}
+        {{ uploading ? t("upload-uploading") : addLabel }}
       </Button>
 
       <input
@@ -476,28 +401,6 @@ async function onDownloadEntry(entry) {
         :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>