@sunggang/ui-lib 0.3.51 → 0.3.53

package/index.esm.css

@@ -719,9 +719,15 @@ video {
 .right-2 {
   right: 0.5rem;
 }
+.right-3 {
+  right: 0.75rem;
+}
 .top-0 {
   top: 0px;
 }
+.top-1\/2 {
+  top: 50%;
+}
 .top-2\/4 {
   top: 50%;
 }
@@ -988,6 +994,9 @@ video {
 .max-h-\[90vh\] {
   max-height: 90vh;
 }
+.min-h-96 {
+  min-height: 24rem;
+}
 .min-h-\[6rem\] {
   min-height: 6rem;
 }
@@ -1140,6 +1149,10 @@ video {
   --tw-translate-x: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-translate-y-full {
   --tw-translate-y: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1940,6 +1953,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity, 1));
 }
+.text-\[\#121417\] {
+  --tw-text-opacity: 1;
+  color: rgb(18 20 23 / var(--tw-text-opacity, 1));
+}
 .text-\[\#171A1F\] {
   --tw-text-opacity: 1;
   color: rgb(23 26 31 / var(--tw-text-opacity, 1));
@@ -1984,6 +2001,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(176 176 176 / var(--tw-text-opacity, 1));
 }
+.text-\[\#B4B4B4\] {
+  --tw-text-opacity: 1;
+  color: rgb(180 180 180 / var(--tw-text-opacity, 1));
+}
 .text-\[\#E73700\] {
   --tw-text-opacity: 1;
   color: rgb(231 55 0 / var(--tw-text-opacity, 1));
@@ -2535,6 +2556,11 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-green-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
@@ -2982,6 +3008,10 @@ video {
   cursor: not-allowed;
 }
 
+.disabled\:opacity-30:disabled {
+  opacity: 0.3;
+}
+
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
@@ -3053,11 +3083,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.data-\[state\=checked\]\:translate-x-6[data-state="checked"] {
-  --tw-translate-x: 1.5rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .data-\[state\=checked\]\:translate-x-7[data-state="checked"] {
   --tw-translate-x: 1.75rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3068,6 +3093,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.data-\[state\=unchecked\]\:translate-x-1[data-state="unchecked"] {
+  --tw-translate-x: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .data-\[state\=checked\]\:bg-\[\#169796BF\][data-state="checked"] {
   background-color: #169796BF;
 }
@@ -3268,6 +3298,26 @@ video {
   }
 }
 
+.\[\&\:\:-webkit-calendar-picker-indicator\]\:absolute::-webkit-calendar-picker-indicator {
+  position: absolute;
+}
+
+.\[\&\:\:-webkit-calendar-picker-indicator\]\:h-full::-webkit-calendar-picker-indicator {
+  height: 100%;
+}
+
+.\[\&\:\:-webkit-calendar-picker-indicator\]\:w-full::-webkit-calendar-picker-indicator {
+  width: 100%;
+}
+
+.\[\&\:\:-webkit-calendar-picker-indicator\]\:cursor-pointer::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+}
+
+.\[\&\:\:-webkit-calendar-picker-indicator\]\:opacity-0::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
 .\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end) {
   border-top-right-radius: calc(var(--radius) - 2px);
   border-bottom-right-radius: calc(var(--radius) - 2px);

package/index.esm2.js

@@ -48660,6 +48660,14 @@ var Time = function(param) {
             input.value = "".concat(date, "T").concat(hour, ":00");
         }
     };
+    var handleContainerClick = function() {
+        // 觸發 input 的 focus 和 click 事件來打開 datepicker
+        var input = document.getElementById((item === null || item === void 0 ? void 0 : item.id) || (item === null || item === void 0 ? void 0 : item.name));
+        if (input) {
+            input.focus();
+            input.click();
+        }
+    };
     var step = (item === null || item === void 0 ? void 0 : item.step) ? {
         step: item === null || item === void 0 ? void 0 : item.step
     } : {};
@@ -48677,19 +48685,34 @@ var Time = function(param) {
             /*#__PURE__*/ jsxs("div", {
                 className: "relative",
                 children: [
-                    /*#__PURE__*/ jsx("input", _object_spread$c(_object_spread_props$8(_object_spread$c({
-                        className: [
-                            (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#0f172a]",
-                            "customTime border border-solid border-[#B4B4B4] px-3 py-2 rounded-2xl w-full text-[16px]"
-                        ].join(" "),
-                        type: (item === null || item === void 0 ? void 0 : item.type) || "time",
-                        placeholder: "ex: 16:00"
-                    }, register(item === null || item === void 0 ? void 0 : item.name, _object_spread$c({}, item === null || item === void 0 ? void 0 : item.validateOption))), {
-                        style: item === null || item === void 0 ? void 0 : item.style,
-                        disabled: item === null || item === void 0 ? void 0 : item.disabled,
-                        id: item === null || item === void 0 ? void 0 : item.id,
-                        max: "2037-12-31T23:59"
-                    }), step, onInput)),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "relative cursor-pointer",
+                        onClick: handleContainerClick,
+                        children: [
+                            /*#__PURE__*/ jsx("input", _object_spread$c(_object_spread_props$8(_object_spread$c({
+                                className: [
+                                    (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#0f172a]",
+                                    "customTime border border-solid border-[#B4B4B4] px-3 py-2 rounded-2xl w-full text-[16px] cursor-pointer",
+                                    // 隱藏原生的 datepicker icon
+                                    "[&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+                                ].join(" "),
+                                type: (item === null || item === void 0 ? void 0 : item.type) || "time",
+                                placeholder: "ex: 16:00"
+                            }, register(item === null || item === void 0 ? void 0 : item.name, _object_spread$c({}, item === null || item === void 0 ? void 0 : item.validateOption))), {
+                                style: item === null || item === void 0 ? void 0 : item.style,
+                                disabled: item === null || item === void 0 ? void 0 : item.disabled,
+                                id: (item === null || item === void 0 ? void 0 : item.id) || (item === null || item === void 0 ? void 0 : item.name),
+                                max: "2037-12-31T23:59"
+                            }), step, onInput)),
+                            (item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/ jsx("div", {
+                                className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none",
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    icon: item.icon,
+                                    className: "w-5 h-5 text-[#B4B4B4]"
+                                })
+                            })
+                        ]
+                    }),
                     validateMsg(errors, item) && /*#__PURE__*/ jsxs("div", {
                         className: "pt-1 text-xs text-[#EF5533]",
                         children: [
@@ -48964,12 +48987,12 @@ var FieldLabel = function(param) {
     });
 };
 var Fields = function(param) {
-    var formConfig = param.formConfig;
+    var formConfig = param.formConfig, _param_fieldsClass = param.fieldsClass, fieldsClass = _param_fieldsClass === void 0 ? "gap-2" : _param_fieldsClass;
     return !!(formConfig === null || formConfig === void 0 ? void 0 : formConfig.length) && (formConfig === null || formConfig === void 0 ? void 0 : formConfig.map(function(item, index) {
         return /*#__PURE__*/ jsx(StyleField, {
             children: /*#__PURE__*/ jsx("div", {
                 className: [
-                    item[0].type === "ckEditor" ? "" : "flex gap-2 items-start flex-wrap lg:flex-nowrap",
+                    item[0].type === "ckEditor" ? "" : "flex items-start flex-wrap lg:flex-nowrap ".concat(fieldsClass),
                     "justify-start"
                 ].join(" "),
                 children: /*#__PURE__*/ jsx(Row, {
@@ -49191,19 +49214,19 @@ var BaseSwitch = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var sizeClass = {
         small: {
             root: "h-4 w-7",
-            thumb: "h-3 w-3 data-[state=checked]:translate-x-3"
+            thumb: "h-3 w-3 data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0"
         },
         medium: {
             root: "h-5 w-9",
-            thumb: "h-4 w-4 data-[state=checked]:translate-x-4"
+            thumb: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
         },
         large: {
             root: "h-6 w-11",
-            thumb: "h-5 w-5 data-[state=checked]:translate-x-5"
+            thumb: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
         },
         xl: {
             root: "h-7 w-12",
-            thumb: "h-5 w-5 data-[state=checked]:translate-x-6"
+            thumb: "h-5 w-5 data-[state=checked]:translate-x-5"
         },
         xxl: {
             root: "h-9 w-16",
@@ -49235,7 +49258,7 @@ var BaseSwitch = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                                 id: item === null || item === void 0 ? void 0 : item.id,
                                 disabled: item === null || item === void 0 ? void 0 : item.disable,
                                 children: /*#__PURE__*/ jsx(SwitchPrimitives.Thumb, {
-                                    className: cn("pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0", sizeClass[size].thumb)
+                                    className: cn("pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-1", sizeClass[size].thumb)
                                 })
                             })),
                             (item === null || item === void 0 ? void 0 : item.labelRight) && /*#__PURE__*/ jsx("span", {
@@ -78617,6 +78640,30 @@ var LiffProvider = function(param) {
     var _useState4 = _sliced_to_array(useState(null), 2), userInfo = _useState4[0], setUserInfo = _useState4[1];
     var _useState5 = _sliced_to_array(useState(null), 2), isFriendship = _useState5[0], setFriendship = _useState5[1];
     var _useState6 = _sliced_to_array(useState(null), 2), loginType = _useState6[0], setLoginType = _useState6[1];
+    // userInfo 的 localStorage key
+    var userInfoStorageKey = "".concat(localStorageKey, "-userInfo");
+    // 從 localStorage 載入 userInfo
+    var loadUserInfoFromStorage = function() {
+        try {
+            var storedUserInfo = window.localStorage.getItem(userInfoStorageKey);
+            if (storedUserInfo) {
+                var parsedUserInfo = JSON.parse(storedUserInfo);
+                setUserInfo(parsedUserInfo);
+                return parsedUserInfo;
+            }
+        } catch (err) {
+            console.error("載入 userInfo 失敗:", err);
+        }
+        return null;
+    };
+    // 儲存 userInfo 到 localStorage
+    var saveUserInfoToStorage = function(info) {
+        try {
+            window.localStorage.setItem(userInfoStorageKey, JSON.stringify(info));
+        } catch (err) {
+            console.error("儲存 userInfo 失敗:", err);
+        }
+    };
     var fetchMemberInfo = function() {
         var _ref = _async_to_generator(function(token) {
             var response, err;
@@ -78642,7 +78689,9 @@ var LiffProvider = function(param) {
                         ];
                     case 2:
                         response = _state.sent();
+                        console.log("provider fetch member");
                         setUserInfo(response);
+                        saveUserInfoToStorage(response);
                         return [
                             3,
                             4
@@ -78672,6 +78721,7 @@ var LiffProvider = function(param) {
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
+                        console.log(checkTokenUrl, memberInfoUrl);
                         if (!checkTokenUrl) return [
                             2
                         ];
@@ -78679,9 +78729,9 @@ var LiffProvider = function(param) {
                     case 1:
                         _state.trys.push([
                             1,
-                            3,
+                            6,
                             ,
-                            4
+                            7
                         ]);
                         return [
                             4,
@@ -78691,26 +78741,43 @@ var LiffProvider = function(param) {
                         ];
                     case 2:
                         response = _state.sent();
-                        if ((response === null || response === void 0 ? void 0 : response.status) && (response === null || response === void 0 ? void 0 : response.data)) {
-                            setAccessToken(token);
-                            if (memberInfoUrl) fetchMemberInfo(token);
-                            return [
-                                2,
-                                true
-                            ];
-                        }
-                        return [
+                        if (!((response === null || response === void 0 ? void 0 : response.status) && (response === null || response === void 0 ? void 0 : response.data))) return [
+                            3,
+                            5
+                        ];
+                        setAccessToken(token);
+                        if (!memberInfoUrl) return [
                             3,
                             4
                         ];
+                        return [
+                            4,
+                            fetchMemberInfo(token)
+                        ];
                     case 3:
+                        _state.sent();
+                        _state.label = 4;
+                    case 4:
+                        return [
+                            2,
+                            true
+                        ];
+                    case 5:
+                        return [
+                            3,
+                            7
+                        ];
+                    case 6:
                         err = _state.sent();
                         console.error(err);
+                        // token 無效時清除 userInfo
+                        setUserInfo(null);
+                        window.localStorage.removeItem(userInfoStorageKey);
                         return [
                             3,
-                            4
+                            7
                         ];
-                    case 4:
+                    case 7:
                         return [
                             2,
                             false
@@ -78736,9 +78803,9 @@ var LiffProvider = function(param) {
                     case 1:
                         _state.trys.push([
                             1,
-                            3,
+                            7,
                             ,
-                            4
+                            8
                         ]);
                         return [
                             4,
@@ -78762,26 +78829,46 @@ var LiffProvider = function(param) {
                         }
                         window.localStorage.setItem(localStorageKey, JSON.stringify(resData));
                         loginToken = resData === null || resData === void 0 ? void 0 : (_resData_data1 = resData.data) === null || _resData_data1 === void 0 ? void 0 : _resData_data1.access_token;
-                        if (loginToken) {
-                            setAccessToken(loginToken);
-                            setLoginType("line");
-                            if (memberInfoUrl) fetchMemberInfo(loginToken);
-                        } else {
-                            setUserInfo(response);
-                            if (handleLoginError) handleLoginError();
-                        }
-                        return [
+                        if (!loginToken) return [
+                            3,
+                            5
+                        ];
+                        setAccessToken(loginToken);
+                        setLoginType("line");
+                        if (!memberInfoUrl) return [
                             3,
                             4
                         ];
+                        return [
+                            4,
+                            fetchMemberInfo(loginToken)
+                        ];
                     case 3:
+                        _state.sent();
+                        _state.label = 4;
+                    case 4:
+                        return [
+                            3,
+                            6
+                        ];
+                    case 5:
+                        setUserInfo(response);
+                        saveUserInfoToStorage(response);
+                        if (handleLoginError) handleLoginError();
+                        _state.label = 6;
+                    case 6:
+                        return [
+                            3,
+                            8
+                        ];
+                    case 7:
                         err = _state.sent();
                         console.error(err.toString());
                         return [
                             3,
-                            4
+                            8
                         ];
-                    case 4:
+                    case 8:
                         return [
                             2
                         ];
@@ -79049,6 +79136,9 @@ var LiffProvider = function(param) {
                     if (!isValid) {
                         console.warn("JWT token 驗證失敗");
                         setLoginType(null);
+                        // 清除 userInfo
+                        setUserInfo(null);
+                        window.localStorage.removeItem(userInfoStorageKey);
                         return [
                             2,
                             false
@@ -79063,6 +79153,8 @@ var LiffProvider = function(param) {
                     err = _state.sent();
                     // token 失效或其他問題
                     setLoginType(null);
+                    setUserInfo(null);
+                    window.localStorage.removeItem(userInfoStorageKey);
                     console.warn("LIFF token 驗證失敗，需重新登入", err);
                     return [
                         2,
@@ -79075,13 +79167,18 @@ var LiffProvider = function(param) {
             }
         });
     }), [
-        liffObject
+        liffObject,
+        userInfoStorageKey
     ]);
     var normalizeToken = function(token) {
         var trimmed = token.trim();
         return trimmed.toLowerCase().startsWith("bearer ") ? trimmed : "Bearer ".concat(trimmed);
     };
     var searchParams = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : null;
+    // 初始載入時從 localStorage 載入 userInfo
+    useEffect(function() {
+        loadUserInfoFromStorage();
+    }, []);
     // 客戶端初始化 LIFF
     useEffect(function() {
         var checkAndInitialize = function() {

package/package.json

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

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

@@ -54,8 +54,9 @@ export declare const Textarea: React.FC<FormType>;
 export declare const FieldLabel: ({ item }: {
     item: any;
 }) => import("react/jsx-runtime").JSX.Element | null;
-export declare const Fields: ({ formConfig }: {
+export declare const Fields: ({ formConfig, fieldsClass }: {
     formConfig: any;
+    fieldsClass?: string | undefined;
 }) => any;
 export declare const CustomUploadField: ({ item }: {
     item: any;

package/src/lib/Pagination/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type PaginationProps = {
+    page: number;
+    pageSize: number;
+    total: number;
+    onChange: (page: number) => void;
+    siblingCount?: number;
+    color?: 'blue' | 'green' | 'purple' | 'red' | 'orange' | 'gray' | 'black';
+    size?: 'sm' | 'md' | 'lg';
+};
+export declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;