@sunggang/ui-lib 0.3.62 → 0.3.64

package/index.esm.css

@@ -743,9 +743,6 @@ video {
 .z-10 {
   z-index: 10;
 }
-.z-20 {
-  z-index: 20;
-}
 .z-50 {
   z-index: 50;
 }
@@ -758,6 +755,9 @@ video {
 .z-\[9999\] {
   z-index: 9999;
 }
+.z-\[99\] {
+  z-index: 99;
+}
 .m-1 {
   margin: 0.25rem;
 }
@@ -1510,6 +1510,9 @@ video {
 .bg-\[\#1697960D\] {
   background-color: #1697960D;
 }
+.bg-\[\#169796BF\] {
+  background-color: #169796BF;
+}
 .bg-\[\#1A1A1A\] {
   --tw-bg-opacity: 1;
   background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
@@ -1538,6 +1541,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
 }
+.bg-\[\#ecf0ef\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 240 239 / var(--tw-bg-opacity, 1));
+}
 .bg-\[\#f5f5f5\] {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
@@ -1610,10 +1617,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
 }
-.bg-green-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
-}
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
@@ -1987,6 +1990,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(51 51 51 / var(--tw-text-opacity, 1));
 }
+.text-\[\#40392B\] {
+  --tw-text-opacity: 1;
+  color: rgb(64 57 43 / var(--tw-text-opacity, 1));
+}
 .text-\[\#4788FF\] {
   --tw-text-opacity: 1;
   color: rgb(71 136 255 / var(--tw-text-opacity, 1));
@@ -2530,6 +2537,11 @@ video {
   background-color: #1697960D;
 }
 
+.hover\:bg-\[\#D1EDED\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 237 237 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-\[\#D9D9D9\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(217 217 217 / var(--tw-bg-opacity, 1));

package/index.esm2.js

@@ -18057,8 +18057,6 @@ var DropImage = function(param) {
     var currentImageCount = (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) || 0;
     var remainingSlots = maxTotalImages - currentImageCount;
     var canUploadMore = remainingSlots > 0;
-    // 動態調整 maxFiles，不能超過剩餘空間
-    var dynamicMaxFiles = Math.min(maxFiles, remainingSlots);
     var _useDropzone = useDropzone({
         accept: {
             "image/png": [
@@ -18069,30 +18067,13 @@ var DropImage = function(param) {
                 ".jpeg"
             ]
         },
-        maxFiles: dynamicMaxFiles,
+        maxFiles: maxFiles,
         maxSize: DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES,
         disabled: !canUploadMore,
         onDrop: function(dropFiles) {
-            if (!canUploadMore) {
-                setUploadError(/*#__PURE__*/ jsx(ErrorContent, {
-                    setModal: function() {
-                        return setUploadError(null);
-                    },
-                    errmsg: /*#__PURE__*/ jsxs("div", {
-                        className: "text-center text-lg text-gray-500",
-                        children: [
-                            "已達到最大圖片數量限制：",
-                            maxTotalImages,
-                            " 張"
-                        ]
-                    })
-                }));
-                return;
-            }
             // 檢查是否會超過總數限制
             var totalAfterUpload = currentImageCount + dropFiles.length;
             if (totalAfterUpload > maxTotalImages) {
-                var allowedFiles = dropFiles.slice(0, remainingSlots);
                 setUploadError(/*#__PURE__*/ jsx(ErrorContent, {
                     setModal: function() {
                         return setUploadError(null);
@@ -18100,35 +18081,33 @@ var DropImage = function(param) {
                     errmsg: /*#__PURE__*/ jsxs("div", {
                         className: "text-center text-lg text-gray-500",
                         children: [
-                            "最多只能上傳 ",
-                            remainingSlots,
-                            " 張圖片，已自動限制為前",
-                            " ",
-                            allowedFiles.length,
-                            " 張"
+                            "已超過最大上傳限制",
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "text-sm text-gray-400 mt-2",
+                                children: [
+                                    "目前已有 ",
+                                    currentImageCount,
+                                    " 張，最多可上傳 ",
+                                    maxTotalImages,
+                                    " ",
+                                    "張"
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "text-sm text-gray-400",
+                                children: [
+                                    "還可上傳 ",
+                                    remainingSlots,
+                                    " 張圖片"
+                                ]
+                            })
                         ]
                     })
                 }));
-                // 只處理允許的檔案數量
-                var newFiles = [];
-                setFiles(function(prevFiles) {
-                    return _to_consumable_array$8(prevFiles).concat(_to_consumable_array$8(allowedFiles));
-                });
-                allowedFiles.forEach(function(dropFile, index) {
-                    Object.assign(dropFile, {
-                        preview: URL.createObjectURL(dropFile),
-                        id: v4(),
-                        index: (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) + index + 1
-                    });
-                    newFiles.push(dropFile);
-                });
-                setPreviewFiles(function(prev) {
-                    return _to_consumable_array$8(prev).concat(_to_consumable_array$8(newFiles));
-                });
                 return;
             }
-            // 正常處理
-            var newFiles1 = [];
+            // 正常處理檔案上傳
+            var newFiles = [];
             setFiles(function(prevFiles) {
                 return _to_consumable_array$8(prevFiles).concat(_to_consumable_array$8(dropFiles));
             });
@@ -18138,17 +18117,38 @@ var DropImage = function(param) {
                     id: v4(),
                     index: (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) + index + 1
                 });
-                newFiles1.push(dropFile);
+                newFiles.push(dropFile);
             });
             setPreviewFiles(function(prev) {
-                return _to_consumable_array$8(prev).concat(_to_consumable_array$8(newFiles1));
+                return _to_consumable_array$8(prev).concat(_to_consumable_array$8(newFiles));
             });
         },
         onDropRejected: function(rejectedFiles) {
-            var errorItems = rejectedFiles.map(function(param) {
-                var file = param.file; param.errors;
-                return /*#__PURE__*/ jsx("div", {
-                    children: /*#__PURE__*/ jsxs("div", {
+            var errorMessage;
+            // 分析錯誤類型並顯示對應訊息
+            var fileSizeErrors = rejectedFiles.filter(function(param) {
+                var errors = param.errors;
+                return errors.some(function(error) {
+                    return error.code === "file-too-large";
+                });
+            });
+            var fileTypeErrors = rejectedFiles.filter(function(param) {
+                var errors = param.errors;
+                return errors.some(function(error) {
+                    return error.code === "file-invalid-type";
+                });
+            });
+            var tooManyFilesErrors = rejectedFiles.filter(function(param) {
+                var errors = param.errors;
+                return errors.some(function(error) {
+                    return error.code === "too-many-files";
+                });
+            });
+            // 優先處理檔案大小錯誤
+            if (fileSizeErrors.length > 0) {
+                var sizeErrorItems = fileSizeErrors.map(function(param) {
+                    var file = param.file;
+                    return /*#__PURE__*/ jsxs("div", {
                         className: "text-center text-lg text-gray-500",
                         children: [
                             "檔案太大: ",
@@ -18157,27 +18157,65 @@ var DropImage = function(param) {
                             (file.size / 1024 / 1024).toFixed(2),
                             " MB"
                         ]
-                    })
-                }, file.path);
-            });
-            setUploadError(/*#__PURE__*/ jsx(ErrorContent, {
-                setModal: function() {
-                    return setUploadError(null);
-                },
-                errmsg: /*#__PURE__*/ jsxs(Fragment$1, {
+                    }, file.path);
+                });
+                errorMessage = /*#__PURE__*/ jsxs(Fragment$1, {
                     children: [
-                        errorItems,
+                        sizeErrorItems,
                         /*#__PURE__*/ jsxs("div", {
-                            className: "pt-4",
+                            className: "pt-4 text-center",
                             children: [
-                                "上限：",
+                                "檔案大小上限：",
                                 (DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES / 1024 / 1024).toFixed(2),
-                                " ",
-                                "MB"
+                                " MB"
                             ]
                         })
                     ]
-                })
+                });
+            } else if (fileTypeErrors.length > 0) {
+                var typeErrorItems = fileTypeErrors.map(function(param) {
+                    var file = param.file;
+                    return /*#__PURE__*/ jsxs("div", {
+                        className: "text-center text-lg text-gray-500",
+                        children: [
+                            "不支援的檔案格式: ",
+                            file.path
+                        ]
+                    }, file.path);
+                });
+                errorMessage = /*#__PURE__*/ jsxs(Fragment$1, {
+                    children: [
+                        typeErrorItems,
+                        /*#__PURE__*/ jsx("div", {
+                            className: "pt-4 text-center text-sm text-gray-400",
+                            children: "僅支援 PNG、JPG、JPEG 格式"
+                        })
+                    ]
+                });
+            } else if (tooManyFilesErrors.length > 0) {
+                errorMessage = /*#__PURE__*/ jsxs("div", {
+                    className: "text-center text-lg text-gray-500",
+                    children: [
+                        "一次最多只能上傳 ",
+                        maxFiles,
+                        " 張圖片",
+                        /*#__PURE__*/ jsx("div", {
+                            className: "text-sm text-gray-400 mt-2",
+                            children: "請減少選擇的檔案數量"
+                        })
+                    ]
+                });
+            } else {
+                errorMessage = /*#__PURE__*/ jsx("div", {
+                    className: "text-center text-lg text-gray-500",
+                    children: "檔案上傳失敗，請重試"
+                });
+            }
+            setUploadError(/*#__PURE__*/ jsx(ErrorContent, {
+                setModal: function() {
+                    return setUploadError(null);
+                },
+                errmsg: errorMessage
             }));
         }
     }), getRootProps = _useDropzone.getRootProps, getInputProps = _useDropzone.getInputProps; _useDropzone.isDragActive; _useDropzone.isDragAccept; _useDropzone.isDragReject;
@@ -18195,9 +18233,33 @@ var DropImage = function(param) {
         setPreviewFiles(reSortItem);
     };
     var handleRemove = function(item) {
-        var currentItem = previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.indexOf(item);
-        previewFiles.splice(currentItem, 1);
-        setImageUrls(_to_consumable_array$8(previewFiles));
+        var currentItemIndex = previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.indexOf(item);
+        if (currentItemIndex !== -1) {
+            // 創建新的 previewFiles 陣列（移除指定項目）
+            var newPreviewFiles = _to_consumable_array$8(previewFiles);
+            newPreviewFiles.splice(currentItemIndex, 1);
+            // 更新預覽檔案狀態
+            setPreviewFiles(newPreviewFiles);
+            setImageUrls(newPreviewFiles);
+            // 同時更新實際檔案狀態
+            setFiles(function(prevFiles) {
+                // 如果被移除的項目有 id 且在當前上傳的檔案中
+                if (item.id) {
+                    // 透過 id 來找到對應的檔案並移除
+                    return prevFiles.filter(function(file) {
+                        var shouldRemove = file.id === item.id;
+                        if (shouldRemove && item.preview) {
+                            // 釋放 URL 記憶體
+                            URL.revokeObjectURL(item.preview);
+                        }
+                        return !shouldRemove;
+                    });
+                } else {
+                    // 如果沒有 id，可能是舊有的圖片，保持原本的 files
+                    return prevFiles;
+                }
+            });
+        }
     };
     return /*#__PURE__*/ jsxs("section", {
         className: "w-full",
@@ -47650,7 +47712,7 @@ var DropdownList = function(param) {
     }, [
         formContext
     ]);
-    var _ref = (item === null || item === void 0 ? void 0 : item.dropStyle) || {}, _ref_bgClass = _ref.bgClass, bgClass = _ref_bgClass === void 0 ? "bg-[#E5E5EA]" : _ref_bgClass, _ref_hoverClass = _ref.hoverClass, hoverClass = _ref_hoverClass === void 0 ? "hover:bg-[#d9d9e2]" : _ref_hoverClass, _ref_selectedClass = _ref.selectedClass, selectedClass = _ref_selectedClass === void 0 ? "bg-[#C7C7CC]" : _ref_selectedClass, _ref_textColor = _ref.textColor, textColor = _ref_textColor === void 0 ? "text-[#000000]" : _ref_textColor, _ref_borderColor = _ref.borderColor, borderColor = _ref_borderColor === void 0 ? "border-[#C7C7CC]" : _ref_borderColor;
+    var _ref = (item === null || item === void 0 ? void 0 : item.dropStyle) || {}, _ref_outBgClass = _ref.outBgClass, outBgClass = _ref_outBgClass === void 0 ? "bg-white" : _ref_outBgClass, _ref_bgClass = _ref.bgClass, bgClass = _ref_bgClass === void 0 ? "bg-[#E5E5EA]" : _ref_bgClass, _ref_hoverClass = _ref.hoverClass, hoverClass = _ref_hoverClass === void 0 ? "hover:bg-[#d9d9e2]" : _ref_hoverClass, _ref_selectedClass = _ref.selectedClass, selectedClass = _ref_selectedClass === void 0 ? "bg-[#C7C7CC]" : _ref_selectedClass, _ref_textColor = _ref.textColor, textColor = _ref_textColor === void 0 ? "text-[#000000]" : _ref_textColor, _ref_borderColor = _ref.borderColor, borderColor = _ref_borderColor === void 0 ? "border-[#C7C7CC]" : _ref_borderColor;
     return /*#__PURE__*/ jsxs("div", {
         className: (item === null || item === void 0 ? void 0 : item.className) || "w-full h-24",
         children: [
@@ -47689,8 +47751,8 @@ var DropdownList = function(param) {
                             var _item_option_find, _item_option;
                             return /*#__PURE__*/ jsxs("div", {
                                 className: [
-                                    (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#E5E5EA] cursor-not-allowed pointer-events-none" : "".concat(textColor, " ").concat(bgClass),
-                                    "customSelect w-full h-11 py-2 pr-4 pl-4 rounded-2xl border border-solid",
+                                    (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#E5E5EA] cursor-not-allowed pointer-events-none" : "".concat(textColor, " ").concat(outBgClass),
+                                    "customSelect w-full py-2 pr-4 pl-4 rounded-2xl",
                                     borderColor
                                 ].join(" "),
                                 children: [
@@ -47708,7 +47770,7 @@ var DropdownList = function(param) {
                                     }),
                                     open && /*#__PURE__*/ jsxs("div", {
                                         className: [
-                                            "absolute left-0 z-20 mt-2 w-full rounded-xl shadow-btn-2xl overflow-hidden border",
+                                            "absolute left-0 z-[99] mt-2 w-full rounded-xl shadow-btn-2xl overflow-hidden",
                                             bgClass,
                                             borderColor
                                         ].join(" "),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.3.62",
+  "version": "0.3.64",
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",

package/src/lib/Form/demo.d.ts

@@ -50,6 +50,7 @@ export declare const config: (getValues: (name: string) => unknown) => (FormItem
         hoverClass: string;
         selectedClass: string;
         borderColor: string;
+        textColor: string;
     };
     className: string;
     icon?: undefined;

package/src/lib/Form/types.d.ts

@@ -120,6 +120,7 @@ export interface FormItem {
     hiddenText?: boolean;
     hiddenSearch?: boolean;
     dropStyle?: {
+        outBgClass?: string;
         bgClass?: string;
         hoverClass?: string;
         selectedClass?: string;