@sunggang/ui-lib 0.3.58 → 0.3.60

package/index.esm.css

@@ -1264,6 +1264,9 @@ video {
 .gap-5 {
   gap: 1.25rem;
 }
+.gap-6 {
+  gap: 1.5rem;
+}
 .gap-8 {
   gap: 2rem;
 }
@@ -1587,6 +1590,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
 }
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
@@ -1717,6 +1724,9 @@ video {
 .p-6 {
   padding: 1.5rem;
 }
+.p-8 {
+  padding: 2rem;
+}
 .p-\[30px\] {
   padding: 30px;
 }
@@ -1835,8 +1845,8 @@ video {
 .pt-1 {
   padding-top: 0.25rem;
 }
-.pt-2 {
-  padding-top: 0.5rem;
+.pt-3 {
+  padding-top: 0.75rem;
 }
 .pt-4 {
   padding-top: 1rem;
@@ -1997,6 +2007,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(119 119 119 / var(--tw-text-opacity, 1));
 }
+.text-\[\#999999\] {
+  --tw-text-opacity: 1;
+  color: rgb(153 153 153 / var(--tw-text-opacity, 1));
+}
 .text-\[\#B0B0B0\] {
   --tw-text-opacity: 1;
   color: rgb(176 176 176 / var(--tw-text-opacity, 1));
@@ -2013,6 +2027,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(239 85 51 / var(--tw-text-opacity, 1));
 }
+.text-\[\#F24822\] {
+  --tw-text-opacity: 1;
+  color: rgb(242 72 34 / var(--tw-text-opacity, 1));
+}
 .text-\[\#fff\] {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));

package/index.esm2.js

@@ -17772,54 +17772,64 @@ function _object_spread_props$l(target, source) {
     return target;
 }
 var PrimaryDragDropImage = function(param) {
-    var imageUrls = param.imageUrls, handleRemove = param.handleRemove, isDropDisabled = param.isDropDisabled;
+    var imageUrls = param.imageUrls, handleRemove = param.handleRemove, isDropDisabled = param.isDropDisabled, _param_maxTotalImages = param.maxTotalImages, maxTotalImages = _param_maxTotalImages === void 0 ? 1 : _param_maxTotalImages, _param_showLimitWarning = param.showLimitWarning, showLimitWarning = _param_showLimitWarning === void 0 ? false : _param_showLimitWarning;
     return /*#__PURE__*/ jsx(ConnectedDroppable, {
         droppableId: "droppable-imageUrls",
         direction: "horizontal",
         isDropDisabled: isDropDisabled || false,
         children: function(provided) {
-            return /*#__PURE__*/ jsx("div", _object_spread_props$l(_object_spread$q({
+            return /*#__PURE__*/ jsxs("div", _object_spread_props$l(_object_spread$q({
                 ref: provided.innerRef
             }, provided.droppableProps), {
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: "flex gap-9 mt-2",
-                    children: [
-                        imageUrls.map(function(item, index) {
-                            return /*#__PURE__*/ jsx(PublicDraggable, {
-                                draggableId: String(item === null || item === void 0 ? void 0 : item.id),
-                                index: index,
-                                children: function(provided) {
-                                    return /*#__PURE__*/ jsxs("div", _object_spread_props$l(_object_spread$q({
-                                        ref: provided.innerRef
-                                    }, provided.draggableProps, provided.dragHandleProps), {
-                                        className: "w-[172px] my-2 rounded-lg relative p-2 bg-[#F1F1F1] border border-[#B8B8B8] shadow-[2px_6px_8px_0px_rgba(0,0,0,0.12)]",
-                                        children: [
-                                            /*#__PURE__*/ jsx(Icon, {
-                                                className: "absolute -right-0 -top-0  rounded-full z-10 text-black",
-                                                icon: "carbon:close-filled",
-                                                width: "30",
-                                                height: "30",
-                                                onClick: function() {
-                                                    return handleRemove(item);
-                                                },
-                                                style: {
-                                                    color: "white",
-                                                    backgroundColor: "black"
-                                                }
-                                            }),
-                                            /*#__PURE__*/ jsx("img", {
-                                                className: "w-[156px] h-[100px] object-cover",
-                                                src: (item === null || item === void 0 ? void 0 : item.url) || (item === null || item === void 0 ? void 0 : item.preview),
-                                                alt: ""
-                                            })
-                                        ]
-                                    }));
-                                }
-                            }, item === null || item === void 0 ? void 0 : item.id);
-                        }),
-                        provided.placeholder
-                    ]
-                })
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex gap-6",
+                        children: [
+                            imageUrls.map(function(item, index) {
+                                return /*#__PURE__*/ jsx(PublicDraggable, {
+                                    draggableId: String(item === null || item === void 0 ? void 0 : item.id),
+                                    index: index,
+                                    children: function(provided) {
+                                        return /*#__PURE__*/ jsxs("div", _object_spread_props$l(_object_spread$q({
+                                            ref: provided.innerRef
+                                        }, provided.draggableProps, provided.dragHandleProps), {
+                                            className: "w-[172px] rounded-lg relative p-2 bg-[#F1F1F1] border border-[#B8B8B8] shadow-[2px_6px_8px_0px_rgba(0,0,0,0.12)]",
+                                            children: [
+                                                /*#__PURE__*/ jsx(Icon, {
+                                                    className: "absolute -right-0 -top-0  rounded-full z-10 text-black",
+                                                    icon: "carbon:close-filled",
+                                                    width: "30",
+                                                    height: "30",
+                                                    onClick: function() {
+                                                        return handleRemove(item);
+                                                    },
+                                                    style: {
+                                                        color: "white",
+                                                        backgroundColor: "black"
+                                                    }
+                                                }),
+                                                /*#__PURE__*/ jsx("img", {
+                                                    className: "w-[156px] h-[100px] object-cover",
+                                                    src: (item === null || item === void 0 ? void 0 : item.url) || (item === null || item === void 0 ? void 0 : item.preview),
+                                                    alt: ""
+                                                })
+                                            ]
+                                        }));
+                                    }
+                                }, item === null || item === void 0 ? void 0 : item.id);
+                            }),
+                            provided.placeholder
+                        ]
+                    }),
+                    showLimitWarning && /*#__PURE__*/ jsxs("div", {
+                        className: "pt-1 text-[#F24822] font-medium",
+                        children: [
+                            "註：已到達最大上傳量",
+                            maxTotalImages,
+                            "張，請刪除部分照片再上傳。"
+                        ]
+                    })
+                ]
             }));
         }
     });
@@ -18033,7 +18043,7 @@ function _unsupported_iterable_to_array$o(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$o(o, minLen);
 }
 var DropImage = function(param) {
-    var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles, imageUrls = param.imageUrls, setImageUrls = param.setImageUrls, _param_imageStyleType = param.imageStyleType, imageStyleType = _param_imageStyleType === void 0 ? "base" : _param_imageStyleType, _param_limitSize = param.limitSize, limitSize = _param_limitSize === void 0 ? 0 : _param_limitSize;
+    var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles, imageUrls = param.imageUrls, setImageUrls = param.setImageUrls, _param_imageStyleType = param.imageStyleType, imageStyleType = _param_imageStyleType === void 0 ? "base" : _param_imageStyleType, _param_limitSize = param.limitSize, limitSize = _param_limitSize === void 0 ? 0 : _param_limitSize, _param_maxFiles = param.maxFiles, maxFiles = _param_maxFiles === void 0 ? 10 : _param_maxFiles, _param_maxTotalImages = param.maxTotalImages, maxTotalImages = _param_maxTotalImages === void 0 ? 10 : _param_maxTotalImages;
     var _useState = _sliced_to_array$l(useState([]), 2), previewFiles = _useState[0], setPreviewFiles = _useState[1];
     var _useState1 = _sliced_to_array$l(useState(null), 2), uploadError = _useState1[0], setUploadError = _useState1[1];
     useEffect(function() {
@@ -18043,6 +18053,12 @@ var DropImage = function(param) {
     ]);
     var MAX_SIZE_5MB = 5 * 1024 * 1024;
     var DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES = limitSize || MAX_SIZE_5MB;
+    // 計算目前還能上傳多少張圖片
+    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": [
@@ -18053,10 +18069,66 @@ var DropImage = function(param) {
                 ".jpeg"
             ]
         },
-        maxFiles: 10,
+        maxFiles: dynamicMaxFiles,
         maxSize: DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES,
+        disabled: !canUploadMore,
         onDrop: function(dropFiles) {
-            var newFiles = [];
+            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);
+                    },
+                    errmsg: /*#__PURE__*/ jsxs("div", {
+                        className: "text-center text-lg text-gray-500",
+                        children: [
+                            "最多只能上傳 ",
+                            remainingSlots,
+                            " 張圖片，已自動限制為前",
+                            " ",
+                            allowedFiles.length,
+                            " 張"
+                        ]
+                    })
+                }));
+                // 只處理允許的檔案數量
+                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 = [];
             setFiles(function(prevFiles) {
                 return _to_consumable_array$8(prevFiles).concat(_to_consumable_array$8(dropFiles));
             });
@@ -18066,10 +18138,10 @@ var DropImage = function(param) {
                     id: v4(),
                     index: (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) + index + 1
                 });
-                newFiles.push(dropFile);
+                newFiles1.push(dropFile);
             });
             setPreviewFiles(function(prev) {
-                return _to_consumable_array$8(prev).concat(_to_consumable_array$8(newFiles));
+                return _to_consumable_array$8(prev).concat(_to_consumable_array$8(newFiles1));
             });
         },
         onDropRejected: function(rejectedFiles) {
@@ -18133,7 +18205,32 @@ var DropImage = function(param) {
             /*#__PURE__*/ jsxs(DragDropContext, {
                 onDragEnd: onDragEnd,
                 children: [
-                    /*#__PURE__*/ jsxs("div", _object_spread_props$k(_object_spread$p({}, getRootProps({
+                    !canUploadMore && (imageStyleType === "base" || imageStyleType === "custom") ? /*#__PURE__*/ jsx("div", {
+                        className: "w-full mb-4",
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 p-8 text-center",
+                            children: [
+                                /*#__PURE__*/ jsx(Icon, {
+                                    icon: "material-symbols:block",
+                                    width: "2.5rem",
+                                    height: "2.5rem",
+                                    className: "mx-auto mb-2 text-gray-400"
+                                }),
+                                /*#__PURE__*/ jsxs("p", {
+                                    className: "text-gray-500",
+                                    children: [
+                                        "已達到最大圖片數量限制：",
+                                        maxTotalImages,
+                                        " 張"
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("p", {
+                                    className: "text-sm text-gray-400",
+                                    children: "請刪除部分圖片後再上傳新的圖片"
+                                })
+                            ]
+                        })
+                    }) : !canUploadMore && imageStyleType === "primary" ? null : /*#__PURE__*/ jsxs("div", _object_spread_props$k(_object_spread$p({}, getRootProps({
                         className: "dropzone"
                     })), {
                         children: [
@@ -18156,6 +18253,19 @@ var DropImage = function(param) {
                                                 className: "font-normal text-[#777777] pb-2 text-center",
                                                 children: "或用上傳按鈕選擇檔案"
                                             }),
+                                            /*#__PURE__*/ jsxs("div", {
+                                                className: "font-normal text-xs text-[#999999] pb-2 text-center",
+                                                children: [
+                                                    "(已上傳 ",
+                                                    currentImageCount,
+                                                    "/",
+                                                    maxTotalImages,
+                                                    "張，還可上傳",
+                                                    " ",
+                                                    remainingSlots,
+                                                    " 張)"
+                                                ]
+                                            }),
                                             /*#__PURE__*/ jsx("div", {
                                                 className: "flex justify-center",
                                                 children: /*#__PURE__*/ jsx("div", {
@@ -18188,6 +18298,19 @@ var DropImage = function(param) {
                                                     /*#__PURE__*/ jsx("h5", {
                                                         className: "mb-2 text-xl font-bold tracking-tight text-gray-700 pb-4",
                                                         children: "拖曳圖片至此"
+                                                    }),
+                                                    /*#__PURE__*/ jsxs("p", {
+                                                        className: "font-normal text-xs text-[#999999] pb-4",
+                                                        children: [
+                                                            "(已上傳 ",
+                                                            currentImageCount,
+                                                            "/",
+                                                            maxTotalImages,
+                                                            "張，還可上傳",
+                                                            " ",
+                                                            remainingSlots,
+                                                            " 張)"
+                                                        ]
                                                     })
                                                 ]
                                             })
@@ -18198,7 +18321,7 @@ var DropImage = function(param) {
                         ]
                     })),
                     preview && /*#__PURE__*/ jsxs("div", {
-                        className: "flex pt-2 overflow-auto",
+                        className: "flex pt-3 overflow-auto",
                         children: [
                             imageStyleType === "base" && /*#__PURE__*/ jsx(DragDropImages, {
                                 imageUrls: previewFiles,
@@ -18210,7 +18333,9 @@ var DropImage = function(param) {
                             }),
                             imageStyleType === "primary" && /*#__PURE__*/ jsx(PrimaryDragDropImage, {
                                 imageUrls: previewFiles,
-                                handleRemove: handleRemove
+                                handleRemove: handleRemove,
+                                maxTotalImages: maxTotalImages,
+                                showLimitWarning: !canUploadMore
                             })
                         ]
                     })
@@ -47635,7 +47760,7 @@ var DropdownList = function(param) {
                             });
                         }
                     }),
-                    /*#__PURE__*/ jsx("div", {
+                    (item === null || item === void 0 ? void 0 : item.hiddenText) ? null : /*#__PURE__*/ jsx("div", {
                         className: "inviable h-5 pt-1",
                         children: errors.funeralLocation && /*#__PURE__*/ jsx("p", {
                             className: "text-left text-xs text-[#EF5533]",
@@ -50195,11 +50320,11 @@ var FlatpickrInput = /*#__PURE__*/ forwardRef(function(param, ref) {
                 className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none",
                 children: /*#__PURE__*/ jsx("span", {
                     className: "w-5 h-5 text-[#B4B4B4]",
-                    children: typeof item.icon === "string" ? /*#__PURE__*/ jsx("img", {
-                        src: "/assets/images/".concat(item.icon),
-                        alt: "",
-                        className: "w-full h-full"
-                    }) : item.icon
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        icon: item.icon || "solar:calendar-linear",
+                        width: "1.5rem",
+                        height: "1.5rem"
+                    })
                 })
             })
         ]

package/package.json

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

package/src/lib/DragDrop/PrimaryDragDropImage.d.ts

@@ -8,6 +8,8 @@ interface PrimaryDragDropImagesProps {
     imageUrls: ImageItem[];
     handleRemove: (item: ImageItem) => void;
     isDropDisabled?: boolean;
+    maxTotalImages?: number;
+    showLimitWarning?: boolean;
 }
 export declare const PrimaryDragDropImage: React.FC<PrimaryDragDropImagesProps>;
 export {};

package/src/lib/DropImage/index.stories.d.ts

@@ -8,6 +8,8 @@ export interface ImageItem {
 export interface DropImageProps {
     preview: boolean;
     limitSize?: number;
+    maxFiles?: number;
+    maxTotalImages?: number;
     imageUrls?: ImageItem[] | undefined;
     setImageUrls?: any;
     setFiles: React.Dispatch<React.SetStateAction<File[]>>;
@@ -18,3 +20,4 @@ export default _default;
 export declare const Base: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, DropImageProps>;
 export declare const Custom: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, DropImageProps>;
 export declare const Primary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, DropImageProps>;
+export declare const SingleImageOnly: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, DropImageProps>;

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

@@ -16,6 +16,7 @@ export declare const config: (getValues: (name: string) => unknown) => (FormItem
     validateOption: {
         required: string;
     };
+    icon: string;
     flatpickrOptions: {
         mode: string;
         time_24hr: boolean;
@@ -25,7 +26,9 @@ export declare const config: (getValues: (name: string) => unknown) => (FormItem
     option?: undefined;
     placeholder?: undefined;
     noDataText?: undefined;
+    hiddenText?: undefined;
     dropStyle?: undefined;
+    className?: undefined;
 } | {
     type: string;
     name: string;
@@ -39,11 +42,14 @@ export declare const config: (getValues: (name: string) => unknown) => (FormItem
     };
     placeholder: string;
     noDataText: string;
+    hiddenText: boolean;
     dropStyle: {
         bgClass: string;
         hoverClass: string;
         selectedClass: string;
     };
+    className: string;
+    icon?: undefined;
     flatpickrOptions?: undefined;
 })[] | {
     type: string;

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

@@ -30,6 +30,37 @@ interface Checkbox {
         color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default';
     };
 }
+interface FlatpickrOptions {
+    mode?: 'single' | 'multiple' | 'range';
+    enableTime?: boolean;
+    time_24hr?: boolean;
+    dateFormat?: string;
+    defaultDate?: Date | Date[] | string;
+    inline?: boolean;
+    noCalendar?: boolean;
+    allowInput?: boolean;
+    clickOpens?: boolean;
+    weekNumbers?: boolean;
+    minDate?: Date | string;
+    maxDate?: Date | string;
+    disable?: Array<Date | string | {
+        from: Date | string;
+        to: Date | string;
+    }>;
+    enable?: Array<Date | string | {
+        from: Date | string;
+        to: Date | string;
+    }>;
+    locale?: string;
+    position?: 'auto' | 'above' | 'below';
+    static?: boolean;
+    monthSelectorType?: 'dropdown' | 'static';
+    onChange?: (selectedDates: Date[], dateStr: string, instance: any) => void;
+    onClose?: (selectedDates: Date[], dateStr: string, instance: any) => void;
+    onOpen?: (selectedDates: Date[], dateStr: string, instance: any) => void;
+    onReady?: (selectedDates: Date[], dateStr: string, instance: any) => void;
+    [key: string]: any;
+}
 export interface FormItem {
     type: string;
     name: string;
@@ -86,11 +117,13 @@ export interface FormItem {
     limitSize?: number;
     imageStyleType?: string;
     noDataText?: string;
+    hiddenText?: boolean;
     dropStyle?: {
         bgClass?: string;
         hoverClass?: string;
         selectedClass?: string;
     };
+    flatpickrOptions?: FlatpickrOptions;
 }
 export interface FormType {
     item: FormItem;