@fctc/sme-widget-ui 1.7.5 → 1.7.7

package/dist/index.d.mts

@@ -2,6 +2,6 @@ export { useClickOutside, useFileInfo } from './hooks.mjs';
 export { AddIcon, ArchiveIcon, ArrowDownIcon, ArrowRightIcon, AttachIcon, BackIcon, CalendarIcon, CheckIcon, ChevronBottomIcon, CloseIcon, CopyIcon, DeleteIcon, DeleteIconDanger, DownloadIcon, ExcelIcon, ExportIcon, EyeClosedIcon, EyeIcon, FilterIcon, GoogleIcon, GroupByIcon, KanbanIcon, ListIcon, LoadingIcon, MoreIcon, PaidIcon, PdfIcon, PlaceHolderIcon, PlayIcon, ResetIcon, SearchIcon, SettingIcon, StarIcon, TriangleIcon, UnArchiveIcon, VectorIcon, ZipIcon } from './icons.mjs';
 export { IInputFieldProps, LoginData, LoginProps, Provider, ValuePropsType, loginSchema } from './types.mjs';
 export { ActiveBadgeField, AvatarField, BinaryField, ButtonBadgeField, ButtonField, ButtonSelectFiles, CharField, CheckboxField, ColorField, ColorWrapper, CopyLinkButtonField, DateField, DateOptionField, DownLoadBinaryField, DownloadFileField, DropdownField, EmptyTable, FeeField, FileUploadField, FloatField, FloatTimeField, HtmlField, IActiveBadgeProps, IAvatarProps, IBinaryFieldProps, IButtonBadgeProps, IButtonProps, ICharFieldProps, IColorFieldProps, IColorWrapperProps, ICopyLinkButtonProps, IDateFieldProps, IDownLoadBinary, IDownloadFileProps, IDurationProps, IFileUploadProps, IMany2ManyTagsProps, IMonetaryProps, IOptionProps, IPaginationProps, IPriorityFieldProps, IRadioGroupProps, IRatingStarProps, ISelectDropdownProps, IStatusDropdownFieldProps, ImageField, InfomationField, IntegerField, LayerLoading, LoadingSmall, Login, Many2ManyField, Many2ManyProps, Many2ManyTagField, Many2OneField, Many2OneProps, ModalConfirm, ModalDetail, ModalLayer, MonetaryField, PaginationView, PaidBadgedField, PriorityField, RadioGroupField, RatingStarField, RemainingDaysField, RenderFiles, Row, Search, SelectDropdownField, StatusBarOptionField, StatusDropdownField, StatusbarDurationField, TDropdownSelectorProps, TableBody, TableFilter, TableFooter, TableGroup, TableHead, TextAreaField, ToggleButtonField, VideoPlayer, usePagination } from './widgets.mjs';
-export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, typeStyles, useFormatDate, validateAndParseDate, validateInput } from './utils.mjs';
+export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, useFormatDate, validateAndParseDate, validateInput } from './utils.mjs';
 import 'react';
 import 'zod';

package/dist/index.d.ts

@@ -2,6 +2,6 @@ export { useClickOutside, useFileInfo } from './hooks.js';
 export { AddIcon, ArchiveIcon, ArrowDownIcon, ArrowRightIcon, AttachIcon, BackIcon, CalendarIcon, CheckIcon, ChevronBottomIcon, CloseIcon, CopyIcon, DeleteIcon, DeleteIconDanger, DownloadIcon, ExcelIcon, ExportIcon, EyeClosedIcon, EyeIcon, FilterIcon, GoogleIcon, GroupByIcon, KanbanIcon, ListIcon, LoadingIcon, MoreIcon, PaidIcon, PdfIcon, PlaceHolderIcon, PlayIcon, ResetIcon, SearchIcon, SettingIcon, StarIcon, TriangleIcon, UnArchiveIcon, VectorIcon, ZipIcon } from './icons.js';
 export { IInputFieldProps, LoginData, LoginProps, Provider, ValuePropsType, loginSchema } from './types.js';
 export { ActiveBadgeField, AvatarField, BinaryField, ButtonBadgeField, ButtonField, ButtonSelectFiles, CharField, CheckboxField, ColorField, ColorWrapper, CopyLinkButtonField, DateField, DateOptionField, DownLoadBinaryField, DownloadFileField, DropdownField, EmptyTable, FeeField, FileUploadField, FloatField, FloatTimeField, HtmlField, IActiveBadgeProps, IAvatarProps, IBinaryFieldProps, IButtonBadgeProps, IButtonProps, ICharFieldProps, IColorFieldProps, IColorWrapperProps, ICopyLinkButtonProps, IDateFieldProps, IDownLoadBinary, IDownloadFileProps, IDurationProps, IFileUploadProps, IMany2ManyTagsProps, IMonetaryProps, IOptionProps, IPaginationProps, IPriorityFieldProps, IRadioGroupProps, IRatingStarProps, ISelectDropdownProps, IStatusDropdownFieldProps, ImageField, InfomationField, IntegerField, LayerLoading, LoadingSmall, Login, Many2ManyField, Many2ManyProps, Many2ManyTagField, Many2OneField, Many2OneProps, ModalConfirm, ModalDetail, ModalLayer, MonetaryField, PaginationView, PaidBadgedField, PriorityField, RadioGroupField, RatingStarField, RemainingDaysField, RenderFiles, Row, Search, SelectDropdownField, StatusBarOptionField, StatusDropdownField, StatusbarDurationField, TDropdownSelectorProps, TableBody, TableFilter, TableFooter, TableGroup, TableHead, TextAreaField, ToggleButtonField, VideoPlayer, usePagination } from './widgets.js';
-export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, typeStyles, useFormatDate, validateAndParseDate, validateInput } from './utils.js';
+export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, useFormatDate, validateAndParseDate, validateInput } from './utils.js';
 import 'react';
 import 'zod';

package/dist/index.js

@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment32 = REACT_FRAGMENT_TYPE;
+        var Fragment33 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element2;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment32;
+        exports2.Fragment = Fragment33;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal2;
@@ -5046,7 +5046,6 @@ __export(index_exports, {
   loginSchema: () => loginSchema,
   parseFormattedNumber: () => parseFormattedNumber,
   range: () => range,
-  typeStyles: () => typeStyles,
   useClickOutside: () => useClickOutside,
   useFileInfo: () => useFileInfo,
   useFormatDate: () => useFormatDate,
@@ -7846,16 +7845,6 @@ var COLORS = [
   }
 ];
 var DOTS = "...";
-var typeStyles = {
-  primary: "bg-blue-500 text-white",
-  secondary: "bg-lime-600 text-white",
-  danger: "bg-[rgba(237,28,36,0.1)]  text-[#F5222D]",
-  info: "bg-[rgba(5,152,237,0.12)] text-[rgb(5,152,237)]",
-  success: "bg-[rgba(46,181,83,0.1)] text-[rgb(46,181,83)]",
-  warning: "bg-[rgba(237,166,28,0.1)] text-[rgb(250,140,22)]",
-  default: "bg-[#dee2e6]",
-  light: "bg-white text-gray-800 shadow-md"
-};
 var SearchType = {
   FILTER: "filter_by",
   SEARCH: "search_by",
@@ -18501,6 +18490,58 @@ var BinaryField = (props) => {
 
 // src/widgets/basic/button-badge-field/button-badge.tsx
 var import_jsx_runtime71 = require("react/jsx-runtime");
+var typeStyles = {
+  primary: {
+    backgroundColor: "#3b82f6",
+    color: "#fff",
+    border: "1px solid #fff"
+  },
+  secondary: {
+    backgroundColor: "#EBF1FF",
+    color: "#2597D0",
+    border: "1px solid #35ADE9"
+  },
+  danger: {
+    backgroundColor: "#FFEBEC",
+    color: "#E93544",
+    border: "1px solid #FB2B3D"
+  },
+  info: {
+    backgroundColor: "rgba(5,152,237,0.12)",
+    color: "rgb(5,152,237)",
+    border: "1px solid rgb(5,152,237)"
+  },
+  success: {
+    backgroundColor: "#E0FAEB",
+    color: "#12AF53",
+    border: "1px solid #1FC163"
+  },
+  warning: {
+    backgroundColor: "#FFFAEB",
+    color: "#E6A819)",
+    border: "1px solid #F6B51E"
+  },
+  default: {
+    backgroundColor: "#dee2e6",
+    color: "#000",
+    border: "1px solid #000"
+  },
+  light: {
+    backgroundColor: "#fff",
+    color: "#1f2937",
+    border: "1px solid #1f2937"
+  }
+};
+var baseStyle = {
+  borderRadius: "4px",
+  fontSize: "12px",
+  padding: "4px 8px",
+  width: "fit-content",
+  textAlign: "center",
+  fontWeight: 500,
+  cursor: "pointer",
+  transition: "all 0.3s ease-in-out"
+};
 var ButtonBadgeField = (props) => {
   const { defaultValue, selection, value, formValues, domainHelper } = props;
   const decorationSuccess = props["decoration-success"] && domainHelper.checkDomain(formValues, props["decoration-success"]);
@@ -18508,31 +18549,21 @@ var ButtonBadgeField = (props) => {
   const decorationDanger = props["decoration-danger"] && domainHelper.checkDomain(formValues, props["decoration-danger"]);
   const decorationWarning = props["decoration-warning"] && domainHelper.checkDomain(formValues, props["decoration-warning"]);
   const getType = () => {
-    if (decorationInfo) {
-      return typeStyles["info"];
-    }
-    if (decorationSuccess) {
-      return typeStyles["success"];
-    }
-    if (decorationDanger) {
-      return typeStyles["danger"];
-    }
-    if (decorationWarning) {
-      return typeStyles["warning"];
-    }
+    if (decorationInfo) return typeStyles["info"];
+    if (decorationSuccess) return typeStyles["success"];
+    if (decorationDanger) return typeStyles["danger"];
+    if (decorationWarning) return typeStyles["warning"];
     return typeStyles["default"];
   };
-  const baseStyle = "rounded-full text-xs px-[0.82rem] w-fit py-1 text-center font-medium cursor-pointer transition duration-300 ease-in-out transform";
-  const buttonClass = `${baseStyle} ${getType()}`;
   const getLabel = (value2) => {
     if (!value2) return "";
-    const item = selection?.find((item2) => {
-      return Array.isArray(item2) && item2[0] === value2;
-    });
+    const item = selection?.find(
+      (item2) => Array.isArray(item2) && item2[0] === value2
+    );
     return item ? item[1] : "";
   };
   const label = getLabel(defaultValue ?? value);
-  return label ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: buttonClass, children: i18n_default.t(label) }) : null;
+  return label ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { style: { ...baseStyle, ...getType() }, children: i18n_default.t(label) }) : null;
 };
 
 // src/widgets/basic/button-field/button.tsx
@@ -35276,82 +35307,136 @@ var import_jsx_runtime105 = require("react/jsx-runtime");
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = (0, import_react66.useMemo)(() => selection, [selection]);
+  const indexInProgress = memoizedStatusOptions?.findIndex(
+    (option) => option?.[0] === defaultValue
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
     "div",
     {
       style: {
         display: "flex",
         alignItems: "center",
-        flexWrap: "wrap",
-        overflow: "hidden"
+        flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        const value = option?.[0] === defaultValue;
-        return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
-          "label",
-          {
-            style: {
-              position: "relative",
-              flexShrink: 0,
-              cursor: "default",
-              height: "36px",
-              display: "flex",
-              alignItems: "center",
-              paddingLeft: "32px",
-              // pl-8
-              paddingRight: "20px",
-              // pr-[20px]
-              fontWeight: 600,
-              // font-semibold
-              fontSize: "14px",
-              background: value ? "var(--color-primary)" : "#FAFAFA",
-              color: value ? "#fff" : "#121212",
-              borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
-              // rounded-l-xl
-              borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
-              borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
-              // rounded-r-xl
-              borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-                "input",
-                {
-                  type: "radio",
-                  checked: value,
-                  style: { display: "none" },
-                  disabled: true
-                }
-              ),
-              option[1],
-              !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: "50%",
-                    transform: "translateY(-50%) rotate(45deg)",
-                    zIndex: 2,
-                    width: "26px",
-                    height: "26px",
-                    right: "-13px",
-                    background: value ? "var(--color-primary)" : "#FAFAFA",
-                    border: value ? "none" : "1px solid rgba(0,0,0,0.04)",
-                    borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
-                    borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
-                    borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
-                    borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
+        return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+            "div",
+            {
+              style: {
+                position: "relative",
+                flexShrink: 0,
+                cursor: "default",
+                padding: "4px",
+                display: "flex",
+                alignItems: "center",
+                fontWeight: 600,
+                fontSize: "12px",
+                background: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#D5F1E0" : index4 === indexInProgress ? "#FFF" : "#F3F3F3",
+                color: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#666" : "#AEAEAE",
+                borderRadius: "16px",
+                boxShadow: index4 === indexInProgress ? "0 1px 2px 0 rgba(51, 51, 51, 0.04), 0 2px 4px 0 rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 0 0 1px rgba(51, 51, 51, 0.04), 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06) inset" : ""
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+                  "span",
+                  {
+                    style: {
+                      backgroundColor: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? "#178C48" : index4 === indexInProgress ? "#FF3F89" : "#FFF",
+                      width: 20,
+                      height: 20,
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      borderRadius: "100%"
+                    },
+                    children: index4 < indexInProgress || indexInProgress === memoizedStatusOptions?.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICCheck, {}) : index4 === indexInProgress ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ICMinus, {})
                   }
-                }
-              )
-            ]
-          },
-          option?.[0]
-        );
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+                  "span",
+                  {
+                    style: {
+                      padding: "0 6px"
+                    },
+                    children: option[1]
+                  }
+                )
+              ]
+            },
+            option?.[0]
+          ),
+          !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+            "div",
+            {
+              style: {
+                height: "3px",
+                width: "6px",
+                backgroundColor: "#F3F3F3"
+              }
+            }
+          )
+        ] });
       })
     }
   );
 };
+var ICMinus = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        "path",
+        {
+          d: "M4 8H12",
+          stroke: "#C3C3C3",
+          "stroke-width": "1.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+};
+var ICCircle = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "8",
+      height: "8",
+      viewBox: "0 0 8 8",
+      fill: "none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("circle", { cx: "4", cy: "4", r: "4", fill: "white" })
+    }
+  );
+};
+var ICCheck = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        "path",
+        {
+          d: "M13.3408 5.23535L13.252 5.32324L6.88867 11.6875L6.7998 11.7764L6.71191 11.6875L2.89258 7.86914L2.80469 7.78125L2.89258 7.69238L3.74121 6.84375L3.83008 6.75586L6.7998 9.72559L12.2266 4.29785L12.3154 4.20996L13.3408 5.23535Z",
+          fill: "white",
+          stroke: "white",
+          "stroke-width": "0.25"
+        }
+      )
+    }
+  );
+};
 
 // src/widgets/basic/date-option-field/date-option.tsx
 var import_jsx_runtime106 = require("react/jsx-runtime");
@@ -35512,7 +35597,6 @@ var DateOptionField = (props) => {
   loginSchema,
   parseFormattedNumber,
   range,
-  typeStyles,
   useClickOutside,
   useFileInfo,
   useFormatDate,