@sunggang/ui-lib 0.3.61 → 0.3.63

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;
 }
@@ -1406,6 +1406,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(38 107 106 / var(--tw-border-opacity, 1));
 }
+.border-\[\#266b6a\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(38 107 106 / var(--tw-border-opacity, 1));
+}
 .border-\[\#656565\] {
   --tw-border-opacity: 1;
   border-color: rgb(101 101 101 / var(--tw-border-opacity, 1));
@@ -1506,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));
@@ -1534,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));
@@ -1971,10 +1982,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(23 26 31 / var(--tw-text-opacity, 1));
 }
-.text-\[\#1A1A1A\] {
-  --tw-text-opacity: 1;
-  color: rgb(26 26 26 / var(--tw-text-opacity, 1));
-}
 .text-\[\#2052ce\] {
   --tw-text-opacity: 1;
   color: rgb(32 82 206 / var(--tw-text-opacity, 1));
@@ -1983,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));
@@ -2526,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

@@ -47650,7 +47650,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;
+    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 +47689,9 @@ 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" : "bg-white text-[#6f6f6f]",
-                                    "customSelect w-full h-11 py-2 pr-4 pl-4 rounded-2xl border border-solid border-[#C7C7CC]"
+                                    (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: [
                                     /*#__PURE__*/ jsx("div", {
@@ -47707,12 +47708,13 @@ 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 p-4 border border-[#C7C7CC]",
-                                            bgClass
+                                            "absolute left-0 z-[99] mt-2 w-full rounded-xl shadow-btn-2xl overflow-hidden",
+                                            bgClass,
+                                            borderColor
                                         ].join(" "),
                                         children: [
-                                            /*#__PURE__*/ jsx("div", {
-                                                className: "px-3 py-3 border-[1.5px] border-[#B4B4B4] bg-white rounded-lg",
+                                            !(item === null || item === void 0 ? void 0 : item.hiddenSearch) && /*#__PURE__*/ jsx("div", {
+                                                className: "px-3 py-3 border-[1.5px] rounded-lg bg-white ".concat(textColor, " ").concat(borderColor),
                                                 children: /*#__PURE__*/ jsxs("div", {
                                                     className: "flex items-center gap-2 px-3 rounded-lg",
                                                     children: [
@@ -47734,7 +47736,7 @@ var DropdownList = function(param) {
                                                 })
                                             }),
                                             /*#__PURE__*/ jsx("div", {
-                                                className: "max-h-60 overflow-y-auto text-[#1A1A1A]",
+                                                className: "max-h-60 overflow-y-auto ".concat(textColor),
                                                 children: filtered.length > 0 ? filtered.map(function(opt, inx) {
                                                     return /*#__PURE__*/ jsx("div", {
                                                         onClick: function() {
@@ -47743,7 +47745,7 @@ var DropdownList = function(param) {
                                                             setQuery("");
                                                         },
                                                         className: [
-                                                            "px-4 py-3 text-sm cursor-pointer rounded-lg",
+                                                            "px-4 py-3 text-sm cursor-pointer",
                                                             field.value === opt.value ? selectedClass : "",
                                                             hoverClass
                                                         ].join(" "),
@@ -50250,10 +50252,10 @@ var FlatpickrInput = /*#__PURE__*/ forwardRef(function(param, ref) {
                 defaultDate: defaultDateValue,
                 onChange: function(selectedDates, dateStr, instance) {
                     if (mode === "range") {
-                        // Range mode: 返回陣列
                         // 如果選擇了兩個日期，關閉日曆
                         if (selectedDates.length === 2) {
                             setTimeout(function() {
+                                onChange(selectedDates);
                                 instance.close();
                             }, 50);
                         }
@@ -50269,8 +50271,7 @@ var FlatpickrInput = /*#__PURE__*/ forwardRef(function(param, ref) {
         value,
         item === null || item === void 0 ? void 0 : (_item_flatpickrOptions = item.flatpickrOptions) === null || _item_flatpickrOptions === void 0 ? void 0 : _item_flatpickrOptions.defaultDate,
         item === null || item === void 0 ? void 0 : (_item_flatpickrOptions1 = item.flatpickrOptions) === null || _item_flatpickrOptions1 === void 0 ? void 0 : _item_flatpickrOptions1.mode,
-        onChange,
-        isDisabled
+        onChange
     ]);
     var destroyFlatpickr = useCallback$1(function() {
         if (flatpickrInstance.current) {
@@ -50292,9 +50293,20 @@ var FlatpickrInput = /*#__PURE__*/ forwardRef(function(param, ref) {
         return {
             getInstance: function() {
                 return flatpickrInstance.current;
+            },
+            focus: function() {
+                if (flatpickrRef.current) {
+                    flatpickrRef.current.focus();
+                    // 如果有 flatpickr 實例，也可以打開日期選擇器
+                    if (flatpickrInstance.current && !isDisabled) {
+                        flatpickrInstance.current.open();
+                    }
+                }
             }
         };
-    }, []);
+    }, [
+        isDisabled
+    ]);
     // 初始化和清理
     React__default.useEffect(function() {
         initializeFlatpickr();
@@ -50357,8 +50369,9 @@ var FlatpickrField = function(param) {
                 control: control,
                 rules: item === null || item === void 0 ? void 0 : item.validateOption,
                 render: function(param) {
-                    var _param_field = param.field, onChange = _param_field.onChange, value = _param_field.value, name = _param_field.name;
+                    var _param_field = param.field, onChange = _param_field.onChange, value = _param_field.value, name = _param_field.name, ref = _param_field.ref;
                     return /*#__PURE__*/ jsx(FlatpickrInput, {
+                        ref: ref,
                         value: value,
                         onChange: onChange,
                         name: name,

package/package.json

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

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

@@ -27,6 +27,7 @@ export declare const config: (getValues: (name: string) => unknown) => (FormItem
     placeholder?: undefined;
     noDataText?: undefined;
     hiddenText?: undefined;
+    hiddenSearch?: undefined;
     dropStyle?: undefined;
     className?: undefined;
 } | {
@@ -43,10 +44,13 @@ export declare const config: (getValues: (name: string) => unknown) => (FormItem
     placeholder: string;
     noDataText: string;
     hiddenText: boolean;
+    hiddenSearch: boolean;
     dropStyle: {
         bgClass: string;
         hoverClass: string;
         selectedClass: string;
+        borderColor: string;
+        textColor: string;
     };
     className: string;
     icon?: undefined;

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

@@ -118,10 +118,14 @@ export interface FormItem {
     imageStyleType?: string;
     noDataText?: string;
     hiddenText?: boolean;
+    hiddenSearch?: boolean;
     dropStyle?: {
+        outBgClass?: string;
         bgClass?: string;
         hoverClass?: string;
         selectedClass?: string;
+        textColor?: string;
+        borderColor?: string;
     };
     flatpickrOptions?: FlatpickrOptions;
 }