@xaypay/tui 0.2.2 → 0.2.3

package/dist/index.es.js

@@ -72,18 +72,13 @@ function v4(options, buf, offset) {
 }
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
 
 const SvgHeic = ({
@@ -1097,7 +1092,7 @@ var packageResult = {
       marginLeft: '10px'
     }
 
-    // checkedIcon: React.createElement(SvgChecked, { fill: 'green' }),      
+    // checkedIcon: React.createElement(SvgChecked, { fill: 'green' }),   
     // unCheckedIcon: React.createElement(<SvgUnchecked fill="#E00" />),
   },
   // default properties for <Table /> component
@@ -2178,9 +2173,9 @@ const Checkbox$1 = ({
     },
     onClick: !innerDisabled && handleChecked ? handleClick : _ => _
   }, innerChecked && (ignoreDisabledForChecked ?? !innerDisabled) ? checkedIcon ? checkedIcon : /*#__PURE__*/React__default.createElement(SvgCheckboxChecked, {
-    fillColor: checkedColor ?? configStylesPromise.CHECKBOX.checkedColor
+    fillColor: checkedColor
   }) : unCheckedIcon ? unCheckedIcon : /*#__PURE__*/React__default.createElement(SvgCheckboxUnchecked, {
-    fillColor: unCheckedColor ?? configStylesPromise.CHECKBOX.unCheckedColor
+    fillColor: unCheckedColor
   }), label && /*#__PURE__*/React__default.createElement("span", {
     style: {
       marginLeft: labelMarginLeft
@@ -2229,12 +2224,12 @@ const SingleCheckbox = ({
     disabled: disabled,
     innerIndex: innerIndex,
     checkedIcon: checkedIcon,
-    checkedColor: checkedColor,
     unCheckedIcon: unCheckedIcon,
     handleChecked: handleChecked,
-    unCheckedColor: unCheckedColor,
     ignoreDisabledForChecked: ignoreDisabledForChecked,
-    labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.labelMarginLeft
+    checkedColor: checkedColor ?? configStyles.CHECKBOX.colors.checked,
+    unCheckedColor: unCheckedColor ?? configStyles.CHECKBOX.colors.unChecked,
+    labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.label.marginLeft
   });
 };
 SingleCheckbox.propTypes = {
@@ -4149,6 +4144,7 @@ const Input = ({
   const [show, setShow] = useState(false);
   const [isHover, setIsHover] = useState(false);
   const [classProps, setClassProps] = useState({});
+  const [innerValue, setInnerValue] = useState('');
   const [configStyles, setConfigStyles] = useState({});
   const [innerErrorMessage, setInnerErrorMessage] = useState('');
   const inpStyles = configStyles.INPUT && {
@@ -4202,6 +4198,10 @@ const Input = ({
       !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
     }
   }, [type, regexp, errorMessage, regexpErrorMessage]);
+  useEffect(() => {
+    const val = typeof value === 'number' ? value.toString() : value;
+    setInnerValue(() => val);
+  }, [value]);
   useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames(className ?? data.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']));
@@ -4253,7 +4253,7 @@ const Input = ({
     }
   }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default.createElement(TelInput, {
     type: type,
-    value: value,
+    value: innerValue,
     inputChange: change,
     isHover: isHover,
     disabled: disabled,
@@ -4268,8 +4268,8 @@ const Input = ({
     telBorderRightColor: telBorderRightColor ?? configStyles.INPUT.tel.borderRight.color,
     telBorderRightColorHover: telBorderRightColorHover ?? configStyles.INPUT.tel.borderRight.colors.hover
   }) : type === 'number' ? /*#__PURE__*/React__default.createElement(NumberInput, {
-    value: value,
     dots: withoutDot,
+    value: innerValue,
     float: floatToFix,
     disabled: disabled,
     inputChange: change,
@@ -4282,7 +4282,7 @@ const Input = ({
   }) : type === 'password' ? /*#__PURE__*/React__default.createElement(PassInput, {
     show: show,
     type: type,
-    value: value,
+    value: innerValue,
     disabled: disabled,
     inputChange: change,
     maxLength: maxLength,
@@ -4290,7 +4290,7 @@ const Input = ({
     inpAttributes: inpAttributes,
     radius: radius ?? configStyles.INPUT.radius
   }) : /*#__PURE__*/React__default.createElement(TextInput, {
-    value: value,
+    value: innerValue,
     disabled: disabled,
     inputChange: change,
     inpStyles: inpStyles,
@@ -4395,7 +4395,7 @@ Input.propTypes = {
   leftIcon: PropTypes.arrayOf(PropTypes.element),
   rightIcon: PropTypes.arrayOf(PropTypes.element),
   type: PropTypes.oneOf(Object.values(InputTypes)),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])
 };
 
 const RadioDirectionMode = {
@@ -5830,12 +5830,12 @@ const Checkbox = ({
       label: item[innerKeyNames.label],
       checked: item[innerKeyNames.checked],
       disabled: item[innerKeyNames.disabled],
-      ignoreDisabledForChecked: item[innerKeyNames.ignoreDisabledForChecked],
-      labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.label.marginLeft,
+      checkedIcon: checkedIcon ?? configStyles.CHECKBOX.checkedIcon,
       checkedColor: checkedColor ?? configStyles.CHECKBOX.colors.checked,
+      unCheckedIcon: unCheckedIcon ?? configStyles.CHECKBOX.unCheckedIcon,
+      ignoreDisabledForChecked: item[innerKeyNames.ignoreDisabledForChecked],
       unCheckedColor: unCheckedColor ?? configStyles.CHECKBOX.colors.unChecked,
-      checkedIcon: checkedIcon ?? configStyles.CHECKBOX.checkedIcon,
-      unCheckedIcon: unCheckedIcon ?? configStyles.CHECKBOX.unCheckedIcon
+      labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.label.marginLeft
     }));
   }));
 };
@@ -6288,6 +6288,20 @@ const Pagination = ({
   const [configStyles, setConfigStyles] = useState({});
   const [currentPageNumber, setCurrentPage] = useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(
+      // TODO: check and remove pagination-bar-rem class
+      styles$1.list, className ?? data.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
   useEffect(() => {
     setcurrentTotalCount(totalCount);
   }, [totalCount]);
@@ -6357,20 +6371,6 @@ const Pagination = ({
     }
   };
   let lastPage = paginationRange[paginationRange.length - 1];
-  useEffect(() => {
-    configStylesPromise.then(data => {
-      setClassProps(() => classnames(
-      // TODO: check and remove pagination-bar-rem class
-      styles$1.list, className ?? data.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
-      setConfigStyles(() => {
-        return {
-          ...data
-        };
-      });
-    }, error => {
-      console.error(error);
-    });
-  }, []);
   return configStyles.PAGINATION && /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',

package/dist/index.js

@@ -103,18 +103,13 @@ function v4(options, buf, offset) {
 }
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
 
 const SvgHeic = ({
@@ -1128,7 +1123,7 @@ var packageResult = {
       marginLeft: '10px'
     }
 
-    // checkedIcon: React.createElement(SvgChecked, { fill: 'green' }),      
+    // checkedIcon: React.createElement(SvgChecked, { fill: 'green' }),   
     // unCheckedIcon: React.createElement(<SvgUnchecked fill="#E00" />),
   },
   // default properties for <Table /> component
@@ -2209,9 +2204,9 @@ const Checkbox$1 = ({
     },
     onClick: !innerDisabled && handleChecked ? handleClick : _ => _
   }, innerChecked && (ignoreDisabledForChecked ?? !innerDisabled) ? checkedIcon ? checkedIcon : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxChecked, {
-    fillColor: checkedColor ?? configStylesPromise.CHECKBOX.checkedColor
+    fillColor: checkedColor
   }) : unCheckedIcon ? unCheckedIcon : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxUnchecked, {
-    fillColor: unCheckedColor ?? configStylesPromise.CHECKBOX.unCheckedColor
+    fillColor: unCheckedColor
   }), label && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       marginLeft: labelMarginLeft
@@ -2260,12 +2255,12 @@ const SingleCheckbox = ({
     disabled: disabled,
     innerIndex: innerIndex,
     checkedIcon: checkedIcon,
-    checkedColor: checkedColor,
     unCheckedIcon: unCheckedIcon,
     handleChecked: handleChecked,
-    unCheckedColor: unCheckedColor,
     ignoreDisabledForChecked: ignoreDisabledForChecked,
-    labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.labelMarginLeft
+    checkedColor: checkedColor ?? configStyles.CHECKBOX.colors.checked,
+    unCheckedColor: unCheckedColor ?? configStyles.CHECKBOX.colors.unChecked,
+    labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.label.marginLeft
   });
 };
 SingleCheckbox.propTypes = {
@@ -4180,6 +4175,7 @@ const Input = ({
   const [show, setShow] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
   const [classProps, setClassProps] = React.useState({});
+  const [innerValue, setInnerValue] = React.useState('');
   const [configStyles, setConfigStyles] = React.useState({});
   const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
   const inpStyles = configStyles.INPUT && {
@@ -4233,6 +4229,10 @@ const Input = ({
       !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
     }
   }, [type, regexp, errorMessage, regexpErrorMessage]);
+  React.useEffect(() => {
+    const val = typeof value === 'number' ? value.toString() : value;
+    setInnerValue(() => val);
+  }, [value]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']));
@@ -4284,7 +4284,7 @@ const Input = ({
     }
   }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default["default"].createElement(TelInput, {
     type: type,
-    value: value,
+    value: innerValue,
     inputChange: change,
     isHover: isHover,
     disabled: disabled,
@@ -4299,8 +4299,8 @@ const Input = ({
     telBorderRightColor: telBorderRightColor ?? configStyles.INPUT.tel.borderRight.color,
     telBorderRightColorHover: telBorderRightColorHover ?? configStyles.INPUT.tel.borderRight.colors.hover
   }) : type === 'number' ? /*#__PURE__*/React__default["default"].createElement(NumberInput, {
-    value: value,
     dots: withoutDot,
+    value: innerValue,
     float: floatToFix,
     disabled: disabled,
     inputChange: change,
@@ -4313,7 +4313,7 @@ const Input = ({
   }) : type === 'password' ? /*#__PURE__*/React__default["default"].createElement(PassInput, {
     show: show,
     type: type,
-    value: value,
+    value: innerValue,
     disabled: disabled,
     inputChange: change,
     maxLength: maxLength,
@@ -4321,7 +4321,7 @@ const Input = ({
     inpAttributes: inpAttributes,
     radius: radius ?? configStyles.INPUT.radius
   }) : /*#__PURE__*/React__default["default"].createElement(TextInput, {
-    value: value,
+    value: innerValue,
     disabled: disabled,
     inputChange: change,
     inpStyles: inpStyles,
@@ -4426,7 +4426,7 @@ Input.propTypes = {
   leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   type: PropTypes__default["default"].oneOf(Object.values(InputTypes)),
-  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object])
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].object])
 };
 
 const RadioDirectionMode = {
@@ -5861,12 +5861,12 @@ const Checkbox = ({
       label: item[innerKeyNames.label],
       checked: item[innerKeyNames.checked],
       disabled: item[innerKeyNames.disabled],
-      ignoreDisabledForChecked: item[innerKeyNames.ignoreDisabledForChecked],
-      labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.label.marginLeft,
+      checkedIcon: checkedIcon ?? configStyles.CHECKBOX.checkedIcon,
       checkedColor: checkedColor ?? configStyles.CHECKBOX.colors.checked,
+      unCheckedIcon: unCheckedIcon ?? configStyles.CHECKBOX.unCheckedIcon,
+      ignoreDisabledForChecked: item[innerKeyNames.ignoreDisabledForChecked],
       unCheckedColor: unCheckedColor ?? configStyles.CHECKBOX.colors.unChecked,
-      checkedIcon: checkedIcon ?? configStyles.CHECKBOX.checkedIcon,
-      unCheckedIcon: unCheckedIcon ?? configStyles.CHECKBOX.unCheckedIcon
+      labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.label.marginLeft
     }));
   }));
 };
@@ -6319,6 +6319,20 @@ const Pagination = ({
   const [configStyles, setConfigStyles] = React.useState({});
   const [currentPageNumber, setCurrentPage] = React.useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = React.useState(totalCount);
+  React.useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames__default["default"](
+      // TODO: check and remove pagination-bar-rem class
+      styles$1.list, className ?? data.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
   React.useEffect(() => {
     setcurrentTotalCount(totalCount);
   }, [totalCount]);
@@ -6388,20 +6402,6 @@ const Pagination = ({
     }
   };
   let lastPage = paginationRange[paginationRange.length - 1];
-  React.useEffect(() => {
-    configStylesPromise.then(data => {
-      setClassProps(() => classnames__default["default"](
-      // TODO: check and remove pagination-bar-rem class
-      styles$1.list, className ?? data.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
-      setConfigStyles(() => {
-        return {
-          ...data
-        };
-      });
-    }, error => {
-      console.error(error);
-    });
-  }, []);
   return configStyles.PAGINATION && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -82,5 +82,8 @@
       "prettier --write",
       "eslint --max-warnings=0"
     ]
+  },
+  "volta": {
+    "node": "20.14.0"
   }
 }

package/tui.config.js

@@ -711,7 +711,7 @@ export default {
             marginLeft: '10px',
         }
 
-        // checkedIcon: React.createElement(SvgChecked, { fill: 'green' }),      
+        // checkedIcon: React.createElement(SvgChecked, { fill: 'green' }),   
         // unCheckedIcon: React.createElement(<SvgUnchecked fill="#E00" />),
     },
     // default properties for <Table /> component