sevago-library 1.3.19 → 1.4.0

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { createTheme as createTheme$2, Stack, TableCell, tableCellClasses, LinearProgress, linearProgressClasses, useTheme as useTheme$4, Skeleton, Box, styled as styled$3, InputLabel as InputLabel$1, Link, Paper as Paper$1, Typography as Typography$1, ClickAwayListener, Tooltip, Icon, Badge, Tabs as Tabs$1, Tab as Tab$1, Divider as Divider$1, tooltipClasses, Avatar, AvatarGroup, Popover as Popover$1, CircularProgress as CircularProgress$1, Button as Button$1, Chip as Chip$1, TextField as TextField$1, GlobalStyles as GlobalStyles$2, InputAdornment as InputAdornment$1, debounce as debounce$3, Fade as Fade$1, MenuItem as MenuItem$1, FormControl as FormControl$1, FormHelperText as FormHelperText$1, IconButton as IconButton$1, FormControlLabel, Checkbox, Collapse, Dialog as Dialog$1, DialogTitle, DialogContent as DialogContent$1, DialogActions as DialogActions$1, List as List$2, ListItem as ListItem$1, Pagination, RadioGroup, Radio, TableRow, TableContainer, TableHead, Table, TableBody, useMediaQuery as useMediaQuery$1, Card, CardHeader, CardContent, Select as Select$1, Autocomplete as Autocomplete$1 } from "@mui/material";
+import { createTheme as createTheme$2, Stack, TableCell, tableCellClasses, LinearProgress, linearProgressClasses, useTheme as useTheme$4, Skeleton, Box, styled as styled$3, InputLabel as InputLabel$1, Link, Paper as Paper$1, Typography as Typography$1, ClickAwayListener, Tooltip, Icon, Badge, Tabs as Tabs$1, Tab as Tab$1, Divider as Divider$1, tooltipClasses, Avatar, AvatarGroup, Popover as Popover$1, CircularProgress as CircularProgress$1, Button as Button$1, Chip as Chip$1, TextField as TextField$1, GlobalStyles as GlobalStyles$2, InputAdornment as InputAdornment$1, debounce as debounce$3, Fade as Fade$1, MenuItem as MenuItem$1, FormControl as FormControl$1, FormHelperText as FormHelperText$1, IconButton as IconButton$1, FormControlLabel, Checkbox, Collapse, Dialog as Dialog$1, DialogTitle, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Drawer, List as List$2, ListItem as ListItem$1, Pagination, RadioGroup, Radio, TableRow, TableContainer, TableHead, Table, TableBody, useMediaQuery as useMediaQuery$1, Card, CardHeader, CardContent, Select as Select$1, Autocomplete as Autocomplete$1 } from "@mui/material";
 import dayjs from "dayjs";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
@@ -68767,7 +68767,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
 const TextFieldDateTimeElement = ({
   name,
   label = "",
-  iconLabel = "edit_calendar",
+  iconLabel = "",
   icon = "calendar_today",
   error = "",
   value = null,
@@ -75931,6 +75931,99 @@ const AdvancedOperatorFilterDialog = ({
     }
   );
 };
+const FilterSlider = ({
+  children,
+  onApply,
+  onReset,
+  initialFilters = {},
+  sx = {},
+  ignoredKeysInCount = []
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [filters, setFilters] = useState(initialFilters);
+  const [tempFilters, setTempFilters] = useState(initialFilters);
+  const activeFilterCount = Object.entries(filters).filter(([key, value]) => {
+    if (ignoredKeysInCount.includes(key)) return false;
+    if (Array.isArray(value)) return value.length > 0;
+    return value !== null && value !== void 0 && value !== "";
+  }).length;
+  useEffect(() => {
+    if (isOpen) {
+      setTempFilters({ ...filters });
+    }
+  }, [filters, isOpen]);
+  const handleFilterChange = (key, value) => {
+    setTempFilters((prev) => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+  const handleApply = () => {
+    setFilters(tempFilters);
+    onApply == null ? void 0 : onApply(tempFilters);
+    setIsOpen(false);
+  };
+  const handleReset = () => {
+    setTempFilters({});
+    setFilters({});
+    onReset == null ? void 0 : onReset();
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ButtonElement,
+      {
+        sx: {
+          ...sx,
+          color: activeFilterCount > 0 ? PRIMARY[500] : PRIMARY[500],
+          minWidth: "auto",
+          p: PADDING_LAYOUT_HEADER
+        },
+        startIcon: "filter_list_alt",
+        variant: "outlined",
+        onClick: () => setIsOpen(true),
+        content: `Bộ lọc${activeFilterCount > 0 ? ` (${activeFilterCount})` : ""}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        anchor: "right",
+        open: isOpen,
+        onClose: () => setIsOpen(false),
+        sx: {
+          "& .MuiDrawer-paper": {
+            width: 320,
+            padding: PADDING_GAP_LAYOUT
+          }
+        },
+        children: /* @__PURE__ */ jsxs(Stack$1, { sx: { height: "100%" }, children: [
+          /* @__PURE__ */ jsxs(StackRowAlignCenterJustBetween, { sx: { gap: 0 }, children: [
+            /* @__PURE__ */ jsx(TypographyOneLine, { content: "Bộ lọc", sx: { ...TYPOGRAPHY.textLg.semiBold } }),
+            /* @__PURE__ */ jsx(IconButton$1, { onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsx(IconElement, { icon: "close" }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Stack$1,
+            {
+              sx: {
+                flex: 1,
+                gap: PADDING_GAP_ITEM,
+                overflowY: "auto",
+                scrollbarWidth: "none",
+                "&::-webkit-scrollbar": { display: "none" }
+              },
+              children: children({ filters, tempFilters, setFilter: handleFilterChange, setTempFilters })
+            }
+          ),
+          /* @__PURE__ */ jsxs(StackRowJustEnd, { sx: { gap: PADDING_GAP_ITEM }, children: [
+            /* @__PURE__ */ jsx(ButtonElement, { variant: "outlined", onClick: handleReset, content: "Đặt lại" }),
+            /* @__PURE__ */ jsx(ButtonElement, { variant: "contained", onClick: handleApply, content: "Cập nhật" })
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
 const ListIconContentElement = ({
   titleNode,
   list,
@@ -79067,6 +79160,7 @@ export {
   FIELD_WIDTH,
   FULL_OPERATOR_OPTIONS,
   FilterOperator,
+  FilterSlider,
   GROUP_ICONS,
   HttpStatusSpecial,
   ICONS,