@shwfed/nuxt 0.11.31 → 0.11.32

package/dist/runtime/components/ui/fields/Fields.vue

@@ -57,6 +57,9 @@ function cloneConfig(config2) {
   if (config2.orientation) {
     nextConfig.orientation = config2.orientation;
   }
+  if (config2.bordered) {
+    nextConfig.bordered = config2.bordered;
+  }
   if (config2.style) {
     nextConfig.style = config2.style;
   }
@@ -65,6 +68,12 @@ function cloneConfig(config2) {
 function getConfigOrientation(config2) {
   return config2.orientation ?? "horizontal";
 }
+function usesContentsOrientation(config2) {
+  return getConfigOrientation(config2) === "contents";
+}
+function isConfigBordered(config2) {
+  return usesContentsOrientation(config2) && config2.bordered === true;
+}
 function tryEvaluateExpression(source, context) {
   try {
     return {
@@ -100,11 +109,11 @@ function getConfigStyle(config2) {
   }
   return style;
 }
-function getFieldStyle(field) {
-  if (!field.style) {
+function getFieldPartStyle(styleExpression) {
+  if (!styleExpression) {
     return {};
   }
-  const style = evaluateExpression(field.style, void 0, {});
+  const style = evaluateExpression(styleExpression, void 0, {});
   const normalizedStyle = {};
   if (!style || typeof style !== "object" || Array.isArray(style)) {
     return normalizedStyle;
@@ -116,6 +125,27 @@ function getFieldStyle(field) {
   }
   return normalizedStyle;
 }
+function getFieldStyle(field) {
+  return getFieldPartStyle(field.style);
+}
+function getFieldContainerStyle(field, config2) {
+  if (!isPassiveField(field) && usesContentsOrientation(config2)) {
+    return {};
+  }
+  return getFieldStyle(field);
+}
+function getFieldLabelStyle(field, config2) {
+  if (!usesContentsOrientation(config2)) {
+    return {};
+  }
+  return getFieldPartStyle(field.labelStyle);
+}
+function getFieldContentStyle(field, config2) {
+  if (!usesContentsOrientation(config2)) {
+    return {};
+  }
+  return getFieldPartStyle(field.contentStyle);
+}
 function isPassiveField(field) {
   return field.type === "slot" || field.type === "empty";
 }
@@ -158,6 +188,115 @@ function initializeFieldValues(config2) {
     );
   }
 }
+const MIME_LABELS = {
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "Excel",
+  "application/vnd.ms-excel": "Excel",
+  "application/x-zip-compressed": "ZIP",
+  "application/zip": "ZIP",
+  "application/pdf": "PDF",
+  "application/ofd": "OFD",
+  "application/xml": "XML",
+  "image/png": "\u56FE\u7247",
+  "image/jpg": "\u56FE\u7247",
+  "image/jpeg": "\u56FE\u7247",
+  "application/msword": "Word",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "Word"
+};
+const FILE_EXTENSION_ICONS = {
+  xlsx: "vscode-icons:file-type-excel",
+  xls: "vscode-icons:file-type-excel",
+  csv: "vscode-icons:file-type-excel",
+  pdf: "vscode-icons:file-type-pdf2",
+  doc: "vscode-icons:file-type-word",
+  docx: "vscode-icons:file-type-word",
+  ppt: "vscode-icons:file-type-powerpoint",
+  pptx: "vscode-icons:file-type-powerpoint",
+  png: "vscode-icons:file-type-image",
+  jpg: "vscode-icons:file-type-image",
+  jpeg: "vscode-icons:file-type-image",
+  gif: "vscode-icons:file-type-image",
+  webp: "vscode-icons:file-type-image",
+  svg: "vscode-icons:file-type-svg",
+  txt: "vscode-icons:file-type-text",
+  json: "vscode-icons:file-type-json",
+  zip: "vscode-icons:file-type-zip"
+};
+function getFileIcon(filename) {
+  const ext = filename.split(".").pop()?.toLowerCase() ?? "";
+  return FILE_EXTENSION_ICONS[ext] ?? "vscode-icons:default-file";
+}
+function getUploadAcceptString(field) {
+  if (!field.accept || field.accept.length === 0) {
+    return void 0;
+  }
+  return field.accept.join(",");
+}
+function getUploadDescription(field) {
+  if (!field.accept || field.accept.length === 0) {
+    return "";
+  }
+  const uniqueLabels = [...new Set(field.accept.map((mime) => MIME_LABELS[mime] ?? mime))];
+  return t("upload-accept-description", { formats: uniqueLabels.join(` ${t("upload-accept-or")} `) });
+}
+function getUploadMaxCount(field) {
+  if (!field.maxCount) {
+    return Infinity;
+  }
+  const result = evaluateExpression(field.maxCount, { form: modelValue.value }, Infinity);
+  if (typeof result === "bigint") {
+    return Number(result);
+  }
+  return result;
+}
+function getUploadFiles(field) {
+  const raw = getProperty(modelValue.value, field.path);
+  if (!Array.isArray(raw)) {
+    return [];
+  }
+  return raw.filter((item) => item instanceof File);
+}
+function handleUploadInputChange(field, event) {
+  const target = event.target;
+  if (!(target instanceof HTMLInputElement)) {
+    return;
+  }
+  handleUploadFiles(field, target.files);
+  target.value = "";
+}
+function handleUploadFiles(field, fileList) {
+  if (!fileList || fileList.length === 0) {
+    return;
+  }
+  const existing = getUploadFiles(field);
+  const maxCount = getUploadMaxCount(field);
+  const remaining = maxCount === Infinity ? fileList.length : Math.max(0, maxCount - existing.length);
+  const incoming = Array.from(fileList).slice(0, remaining);
+  const next = [...existing, ...incoming];
+  if (next.length === 0) {
+    deleteProperty(modelValue.value, field.path);
+  } else {
+    setProperty(modelValue.value, field.path, next);
+  }
+}
+function removeUploadFile(field, index) {
+  const files = getUploadFiles(field);
+  const next = files.filter((_, i) => i !== index);
+  if (next.length === 0) {
+    deleteProperty(modelValue.value, field.path);
+  } else {
+    setProperty(modelValue.value, field.path, next);
+  }
+}
+function handleUploadDrop(field, event) {
+  event.preventDefault();
+  if (isFieldDisabled(field)) {
+    return;
+  }
+  handleUploadFiles(field, event.dataTransfer?.files ?? null);
+}
+function handleUploadDragOver(event) {
+  event.preventDefault();
+}
 function stringifySelectValue(value) {
   try {
     return JSON.stringify(value);
@@ -437,6 +576,7 @@ export {
   SlotFieldC,
   SUPPORTED_COMPATIBILITY_DATES,
   StringFieldC,
+  UploadFieldC,
   ValidationRuleC,
   createFieldsConfig,
   validationC
@@ -447,7 +587,8 @@ export {
   <div
     :class="[
   'relative p-1 -m-1 border border-dashed',
-  isCheating ? 'border-(--primary)/20 rounded hover:border-(--primary)/40 transition-colors duration-150 group cursor-pointer' : 'border-transparent'
+  isCheating ? 'border-(--primary)/20 rounded hover:border-(--primary)/40 transition-colors duration-150 group cursor-pointer' : 'border-transparent',
+  isConfigBordered(displayConfig) ? '!p-0 !m-0 border-solid border-zinc-200' : ''
 ]"
     :style="getConfigStyle(displayConfig)"
   >
@@ -479,8 +620,20 @@ export {
       v-for="field in displayConfig.fields"
       :key="field.id"
     >
+      <div
+        v-if="field.type === 'slot' && isConfigBordered(displayConfig)"
+        :class="'border-b border-r border-zinc-200'"
+        :style="getFieldStyle(field)"
+      >
+        <slot
+          :name="field.id"
+          :form="slotForm"
+          :style="{}"
+          :valid="valid"
+        />
+      </div>
       <slot
-        v-if="field.type === 'slot'"
+        v-else-if="field.type === 'slot'"
         :name="field.id"
         :form="slotForm"
         :style="getFieldStyle(field)"
@@ -488,16 +641,100 @@ export {
       />
       <div
         v-else-if="field.type === 'empty'"
+        :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200' : void 0"
         :style="getFieldStyle(field)"
       />
+      <div
+        v-else-if="field.type === 'upload' && !isFieldHidden(field)"
+        :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
+        :style="getFieldContainerStyle(field, displayConfig)"
+        class="flex flex-col gap-2 p-2"
+      >
+        <p class="text-sm font-medium text-zinc-700">
+          <span class="inline-flex items-start gap-0.5">
+            <span>{{ getFieldLabel(field) }}</span>
+            <sup
+              v-if="isFieldRequired(field)"
+              class="text-red-500 leading-none"
+            >*</sup>
+          </span>
+        </p>
+        <label
+          v-if="getUploadFiles(field).length < getUploadMaxCount(field)"
+          :class="[
+  'flex cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed px-4 py-8 transition-colors',
+  isFieldDisabled(field) ? 'cursor-not-allowed border-zinc-200 opacity-50' : 'border-zinc-300 hover:border-zinc-400 hover:bg-zinc-50'
+]"
+          @drop="handleUploadDrop(field, $event)"
+          @dragover="handleUploadDragOver"
+        >
+          <Icon
+            :icon="field.icon ?? 'fluent:cloud-arrow-up-20-regular'"
+            class="text-4xl text-zinc-400"
+          />
+          <p
+            v-if="field.description"
+            class="text-sm text-zinc-600"
+            v-html="$md.inline`${getLocalizedText(field.description, locale) ?? ''}`()"
+          />
+          <p
+            v-else
+            class="text-sm text-zinc-600"
+          >
+            {{ t("upload-click-or-drag") }}
+          </p>
+          <p class="text-xs text-zinc-400">
+            {{ getUploadDescription(field) || t("upload-accept-all") }}
+          </p>
+          <input
+            type="file"
+            class="sr-only"
+            :accept="getUploadAcceptString(field)"
+            :disabled="isFieldDisabled(field)"
+            :multiple="getUploadMaxCount(field) !== 1"
+            @change="handleUploadInputChange(field, $event)"
+          >
+        </label>
+        <ul
+          v-if="getUploadFiles(field).length > 0"
+          class="flex flex-col gap-1"
+        >
+          <li
+            v-for="(file, fileIndex) in getUploadFiles(field)"
+            :key="`${field.id}:${fileIndex}:${file.name}`"
+            class="flex items-center gap-2 rounded-md border border-zinc-200 px-3 py-2"
+          >
+            <Icon
+              :icon="getFileIcon(file.name)"
+              class="shrink-0 text-lg"
+            />
+            <span class="flex-1 truncate text-sm text-zinc-700">{{ file.name }}</span>
+            <button
+              type="button"
+              class="shrink-0 text-zinc-300 transition-colors hover:text-red-500"
+              :disabled="isFieldDisabled(field)"
+              @click="removeUploadFile(field, fileIndex)"
+            >
+              <Icon
+                icon="fluent:delete-20-regular"
+                class="text-lg"
+              />
+            </button>
+          </li>
+        </ul>
+      </div>
       <Field
         v-else-if="!isFieldHidden(field)"
         :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
         :data-invalid="isFieldInvalid(field) ? 'true' : void 0"
         :orientation="getConfigOrientation(displayConfig)"
-        :style="getFieldStyle(field)"
+        :style="getFieldContainerStyle(field, displayConfig)"
       >
-        <FieldLabel :for="['string', 'textarea', 'number', 'select'].includes(field.type) ? `${id}:${field.path}` : void 0">
+        <FieldLabel
+          :for="['string', 'textarea', 'number', 'select'].includes(field.type) ? `${id}:${field.path}` : void 0"
+          :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200' : void 0"
+          :style="getFieldLabelStyle(field, displayConfig)"
+        >
           <span class="inline-flex items-start gap-0.5">
             <span>{{ getFieldLabel(field) }}</span>
             <sup
@@ -509,7 +746,10 @@ export {
             <span class="font-mono">{{ field.path }}</span>
           </span>
         </FieldLabel>
-        <FieldContent>
+        <FieldContent
+          :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200 p-2' : void 0"
+          :style="getFieldContentStyle(field, displayConfig)"
+        >
           <Popover
             v-if="field.type === 'calendar'"
             @update:open="(open) => handleCalendarOpenChange(field, open)"
@@ -809,7 +1049,10 @@ export {
             </InputGroup>
           </template>
 
-          <FieldError v-if="isFieldInvalid(field)">
+          <FieldError
+            v-if="isFieldInvalid(field)"
+            :class="usesContentsOrientation(displayConfig) ? 'static pt-1' : void 0"
+          >
             <span v-html="renderValidationMessage(field)" />
           </FieldError>
         </FieldContent>
@@ -826,19 +1069,31 @@ export {
     "clear": "清空",
     "select-empty": "无搜索结果",
     "select-search-placeholder": "搜索…",
-    "select-placeholder": "选择…"
+    "select-placeholder": "选择…",
+    "upload-click-or-drag": "点击或拖拽文件到此处上传",
+    "upload-accept-description": "仅接受 {formats} 格式文件",
+    "upload-accept-or": "或",
+    "upload-accept-all": "接受所有格式文件"
   },
   "ja": {
     "clear": "クリア",
     "select-empty": "結果はありません",
     "select-search-placeholder": "検索…",
-    "select-placeholder": "選択…"
+    "select-placeholder": "選択…",
+    "upload-click-or-drag": "クリックまたはファイルをここにドラッグしてアップロード",
+    "upload-accept-description": "{formats} 形式のファイルのみ受け付けます",
+    "upload-accept-or": "または",
+    "upload-accept-all": "すべての形式を受け付けます"
   },
   "en": {
     "clear": "Clear",
     "select-empty": "No results",
     "select-search-placeholder": "Search…",
-    "select-placeholder": "Select…"
+    "select-placeholder": "Select…",
+    "upload-click-or-drag": "Click or drag files here to upload",
+    "upload-accept-description": "Only {formats} format files accepted",
+    "upload-accept-or": "or",
+    "upload-accept-all": "All formats accepted"
   }
 }
 </i18n>