bitz-react-admin-ui 2.6.1 → 2.6.2

package/dist/components/BitzTable/ToolBar/ColConfigIcon/index.mjs

@@ -1,39 +1,90 @@
 import { j as t } from "../../../../node_modules/.store/react@18.3.1/node_modules/react/jsx-runtime.mjs";
-import { useContext as C, useState as x, useMemo as d } from "react";
-import g from "./ColumnConfigModal.mjs";
-import j from "../style.mjs";
-import h from "../../../BitzButton/index.mjs";
-import { BitzTableContext as y } from "../../Store/index.mjs";
-import B from "../../../../node_modules/.store/@ant-design_icons@5.3.7/node_modules/@ant-design/icons/es/icons/SettingOutlined.mjs";
-const r = "表格设置", k = (e) => {
-  const { order: l, show: m = !0, icon: i = /* @__PURE__ */ t.jsx(B, {}) } = e, { fullscreen: o } = C(y), { toolbarItemClassName: a } = j(), [u, n] = x(!1), c = d(() => o ? !1 : void 0, [o]);
-  return m ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+import { useRef as y, useContext as S, useState as b, useEffect as w, useMemo as k } from "react";
+import { theme as z, Popconfirm as I, Statistic as R } from "antd";
+import B from "./ColumnConfigModal.mjs";
+import N from "../style.mjs";
+import E from "../../../BitzButton/index.mjs";
+import { BitzTableContext as M } from "../../Store/index.mjs";
+import { css as O } from "../../../../node_modules/.store/@emotion_css@11.11.2/node_modules/@emotion/css/dist/emotion-css.esm.mjs";
+import T from "../../../../node_modules/.store/@ant-design_icons@5.3.7/node_modules/@ant-design/icons/es/icons/SettingOutlined.mjs";
+const f = "表格设置", K = (e) => {
+  const { order: m, show: u = !0, icon: d = /* @__PURE__ */ t.jsx(T, {}) } = e, { token: p } = z.useToken(), s = y(), {
+    fullscreen: r,
+    isSaving: n,
+    countdown: o,
+    cancelAutoSave: x,
+    immediateSave: a,
+    setCountdown: C
+  } = S(M), { toolbarItemClassName: g } = N(), [h, l] = b(!1);
+  w(() => (n && o > 0 ? s.current = setInterval(() => {
+    C((i) => i - 1);
+  }, 1e3) : clearInterval(s.current), o === 0 && n && a(), () => clearInterval(s.current)), [n, o]);
+  const j = k(() => r ? !1 : void 0, [r]), v = O`
+    .ant-statistic {
+      display: inline-block;
+    }
+    .ant-statistic-content {
+      font-size: ${p.fontSize}px;
+    }
+    .ant-statistic-content-value-int {
+      font-weight: 600;
+    }
+    .ant-popconfirm-buttons {
+      width: 100%;
+      display: flex;
+      text-align: left;
+      justify-content: flex-end;
+      .ant-btn-primary {
+        order: 1;
+        margin-left: 0;
+      }
+      .ant-btn-default {
+        order: 2;
+      }
+    }
+  `;
+  return u ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     /* @__PURE__ */ t.jsx(
-      g,
+      B,
       {
-        open: u,
-        title: r,
-        onChange: async (...f) => {
-          var s;
-          return (s = e.onChange) == null ? void 0 : s.call(e, ...f);
+        open: h,
+        title: f,
+        onChange: async (...i) => {
+          var c;
+          return (c = e.onChange) == null ? void 0 : c.call(e, ...i);
         },
-        getContainer: c,
-        close: () => n(!1)
+        getContainer: j,
+        close: () => l(!1)
       }
     ),
     /* @__PURE__ */ t.jsx(
-      h,
+      I,
       {
-        type: "text",
-        className: a,
-        onClick: () => n(!0),
-        icon: i,
-        style: { order: l },
-        children: r
+        placement: "topRight",
+        title: "是否保存列宽设置",
+        open: n,
+        description: /* @__PURE__ */ t.jsxs("span", { children: [
+          /* @__PURE__ */ t.jsx(R, { value: o, suffix: "秒" }),
+          "后将自动保存"
+        ] }),
+        onConfirm: a,
+        onCancel: x,
+        overlayClassName: v,
+        children: /* @__PURE__ */ t.jsx(
+          E,
+          {
+            type: "text",
+            className: g,
+            onClick: () => l(!0),
+            icon: d,
+            style: { order: m },
+            children: f
+          }
+        )
       }
     )
   ] }) : null;
 };
 export {
-  k as default
+  K as default
 };

package/dist/components/BitzTable/ToolBar/ColConfigIcon/style.mjs

@@ -10,126 +10,141 @@ import "../../../../node_modules/.store/rc-util@5.43.0/node_modules/rc-util/es/w
 import "../../../../node_modules/.store/@ant-design_cssinjs@1.21.0/node_modules/@ant-design/cssinjs/es/theme/createTheme.mjs";
 import "../../../../node_modules/.store/@ant-design_cssinjs@1.21.0/node_modules/@ant-design/cssinjs/es/theme/ThemeCache.mjs";
 import "../../../../node_modules/.store/@ant-design_cssinjs@1.21.0/node_modules/@ant-design/cssinjs/es/transformers/legacyLogicalProperties.mjs";
-import { css as i } from "../../../../node_modules/.store/@emotion_css@11.11.2/node_modules/@emotion/css/dist/emotion-css.esm.mjs";
-const h = (o) => i`
-  .sortContent {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    column-gap: 16px;
-
-    .sortCard {
+import { css as t } from "../../../../node_modules/.store/@emotion_css@11.11.2/node_modules/@emotion/css/dist/emotion-css.esm.mjs";
+const h = (o) => t`
+  .columnsSortWrapper {
+    .sortContent {
       width: 100%;
-      background-color: var(--sortCard-bgColor);
-      border-radius: ${r(o.borderRadius)};
-      padding-inline: 6px;
-      padding-block-end: 10px;
-      box-sizing: border-box;
-
-      .title {
-        color: var(--sortCard-titleColor);
-        margin: 0;
-        padding-inline: 8px;
-        padding-block-start: 10px;
-        background-color: var(--sortCard-bgColor);
-      }
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      column-gap: 16px;
+      padding-top: 16px;
 
-      .sortList {
-        flex: 1;
+      .sortCard {
         width: 100%;
-        /* overflow: hidden auto; */
-        cursor: grab;
-
-        &:has(.sortItemDragging) {
-          cursor: grabbing;
+        background-color: var(--sortCard-bgColor);
+        border-radius: ${r(o.borderRadius)};
+        padding-inline: 6px;
+        padding-block-end: 10px;
+        box-sizing: border-box;
+        overflow: hidden auto;
+
+        .title {
+          color: var(--sortCard-titleColor);
+          margin: 0;
+          padding-inline: 8px;
+          padding-block-start: 10px;
+          background-color: var(--sortCard-bgColor);
+          position: sticky;
+          top: 0;
+          z-index: 3;
         }
 
-        .sortItem {
-          display: grid;
-          align-items: center;
-          /* 16px是.dragIcon的padding-inline乘以2 */
-          --dragIcon-width: calc(16px + ${r(o.fontSize + 4)});
-          /* 16px是.operation的padding-inline-end加上margin-left */
-          --operation-width: calc(${r(o.fontSize + 4)} * 2 + 16px);
-          grid-template-columns: var(--dragIcon-width) calc(
-              100% - var(--dragIcon-width)
-            );
-          border-radius: ${r(o.borderRadius)};
-
-          &.showSortItemOperat {
-            grid-template-columns:
-              var(--dragIcon-width) calc(
-                100% - var(--dragIcon-width) - var(--operation-width)
-              )
-              var(--operation-width);
-          }
+        .sortList {
+          flex: 1;
+          width: 100%;
+          /* overflow: hidden auto; */
+          cursor: grab;
 
-          &:hover {
-            background-color: ${o.colorBgContainer};
+          &:has(.sortItemDragging) {
+            cursor: grabbing;
           }
 
-          .dragIcon {
-            height: 100%;
-            padding-inline: 8px;
+          .sortItem {
+            display: grid;
+            align-items: center;
+            /* 16px是.dragIcon的padding-inline乘以2 */
+            --dragIcon-width: calc(16px + ${r(o.fontSize + 4)});
+            /* 16px是.operation的padding-inline-end加上margin-left */
+            --operation-width: calc(${r(o.fontSize + 4)} * 2 + 16px);
+            grid-template-columns: var(--dragIcon-width) calc(
+                100% - var(--dragIcon-width)
+              );
+            border-radius: ${r(o.borderRadius)};
+
+            &.showSortItemOperat {
+              grid-template-columns:
+                var(--dragIcon-width) calc(
+                  100% - var(--dragIcon-width) - var(--operation-width)
+                )
+                var(--operation-width);
+            }
 
-            &,
-            & span {
-              cursor: inherit;
+            &:hover {
+              background-color: ${o.colorBgContainer};
             }
-          }
 
-          .ant-checkbox-wrapper {
-            /* width: calc(100% - 66px); */
-            flex: 1;
-            padding-block: 6px;
-            padding-inline-end: 8px;
+            .dragIcon {
+              height: 100%;
+              padding-inline: 8px;
 
-            & > span:last-child {
-              flex: 1;
-              padding-right: 0;
-              display: -webkit-box;
-              -webkit-line-clamp: 1;
-              -webkit-box-orient: vertical;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              user-select: none;
+              &,
+              & span {
+                cursor: inherit;
+              }
             }
 
-            &.disabledCheckbox {
-              cursor: not-allowed !important;
+            .ant-checkbox-wrapper {
+              /* width: calc(100% - 66px); */
+              flex: 1;
+              padding-block: 6px;
+              padding-inline-end: 8px;
+
+              & > span:last-child {
+                flex: 1;
+                padding-right: 0;
+                display: -webkit-box;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                user-select: none;
+              }
 
-              .ant-checkbox,
-              .ant-checkbox-input {
+              &.disabledCheckbox {
                 cursor: not-allowed !important;
-              }
 
-              &:hover,
-              &:focus,
-              .ant-checkbox:hover,
-              .ant-checkbox:focus {
-                .ant-checkbox-inner {
-                  background-color: ${o.colorPrimary};
-                  border-color: ${o.colorPrimary};
+                .ant-checkbox,
+                .ant-checkbox-input {
+                  cursor: not-allowed !important;
+                }
+
+                &:hover,
+                &:focus,
+                .ant-checkbox:hover,
+                .ant-checkbox:focus {
+                  .ant-checkbox-inner {
+                    background-color: ${o.colorPrimary};
+                    border-color: ${o.colorPrimary};
+                  }
                 }
               }
             }
-          }
 
-          .operation {
-            padding-inline-end: 8px;
+            .operation {
+              padding-inline-end: 8px;
 
-            .rightOperation {
-              margin-left: 8px;
+              .rightOperation {
+                margin-left: 8px;
+              }
             }
           }
         }
       }
     }
+
+    .checkAllAndReset {
+      padding-block: 8px;
+      position: sticky;
+      background-color: ${o.colorBgContainer};
+      bottom: -24px;
+    }
   }
-`, u = (o) => i`
+`, u = (o) => t`
   .stylesConfigFormContent {
     display: flex;
     flex-direction: column;
+    padding-top: 16px;
 
     .ant-form-item {
       width: 100%;
@@ -158,12 +173,33 @@ const h = (o) => i`
       grid-template-columns: repeat(5, 2fr);
     }
 
-    .scope {
-      flex: 1;
-      margin-block: 20px 0;
+    .scopeAndReset {
+      padding-block: 8px;
+      margin-top: 12px;
+      position: sticky;
+      bottom: -24px;
+      background-color: ${o.colorBgContainer};
+
+      .scope {
+        .ant-form-item {
+          margin-bottom: 0;
+        }
+
+        .ant-form-item-control-input {
+          align-items: flex-end;
+        }
 
-      .ant-form-item-control-input {
-        align-items: flex-end;
+        .stylesScopeLabel {
+          font-weight: 600;
+        }
+      }
+
+      .reset .ant-btn {
+        transform: translateY(1px);
+
+        &:hover {
+          color: ${o.colorPrimary} !important;
+        }
       }
     }
 
@@ -213,8 +249,19 @@ const h = (o) => i`
         background-color: ${o.colorBgContainerDisabled};
       }
     }
+
+    .pageSize,
+    .orderBy {
+      .ant-form-item-label {
+        align-self: center;
+      }
+
+      .ant-form-item-control-input-content {
+        text-align: right;
+      }
+    }
   }
-`, w = (o) => i`
+`, f = (o) => t`
   .exportConfigFormContent {
     display: flex;
     flex-direction: column;
@@ -230,6 +277,14 @@ const h = (o) => i`
       }
     }
 
+    .exportFields {
+      .ant-form-item-no-colon {
+      }
+
+      .checkAllAndReset {
+      }
+    }
+
     .ant-tree-draggable-icon {
       transition: none;
       align-self: center;
@@ -279,5 +334,5 @@ const h = (o) => i`
 export {
   u as appearanceConfigStyles,
   h as columnsSortStyles,
-  w as exportConfigStyles
+  f as exportConfigStyles
 };

package/dist/components/BitzTable/ToolBar/ExportIcon/ExportModal.mjs

@@ -6,66 +6,68 @@ import c from "../../../BitzButton/index.mjs";
 import O from "../../../BitzTheme/index.mjs";
 import R from "../Modal/index.mjs";
 import T from "../ColConfigIcon/ExportConfig/index.mjs";
-import v from "../../../../node_modules/.store/@ant-design_icons@5.3.7/node_modules/@ant-design/icons/es/icons/CheckCircleOutlined.mjs";
-const q = ({
+import z from "../../../../node_modules/.store/@ant-design_icons@5.3.7/node_modules/@ant-design/icons/es/icons/CheckCircleOutlined.mjs";
+const G = ({
   open: f,
   title: m,
   onExport: n,
-  close: r,
+  close: t,
   getContainer: d
 }) => {
-  const { token: s } = O.useToken(), [u, t] = y(!1), { defaultTableExportConfig: x } = k(E), o = b(null), p = async () => {
+  const { token: s } = O.useToken(), [p, r] = y(!1), { defaultTableExportConfig: u } = k(E), o = b(null), x = async () => {
     var i, a;
-    if (u)
+    if (p)
       return;
-    if (t(!0), !((i = o.current) == null ? void 0 : i.hasOne())) {
-      j.error("导出设置至少需要一个字段"), t(!1);
+    if (r(!0), !((i = o.current) == null ? void 0 : i.hasOne())) {
+      j.error("导出设置至少需要一个字段"), r(!1);
       return;
     }
-    const g = ((a = o.current) == null ? void 0 : a.getExportConfig()) ?? x;
-    n && (t(!1), n(g), r());
+    const g = ((a = o.current) == null ? void 0 : a.getExportConfig()) ?? u;
+    n && (r(!1), n(g), t());
   };
   B(() => s.mode === "dark", [s.mode]);
   const h = () => {
-    t(!1);
+    r(!1);
   };
   return /* @__PURE__ */ e.jsx(
     R,
     {
       open: f,
       title: m,
-      close: r,
+      close: t,
       closeAfter: h,
       getContainer: d,
-      styles: {
-        content: {
-          maxHeight: "calc(100vh - 200px)",
-          height: "auto"
-        }
-      },
       footer: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsx(
           c,
           {
             type: "primary",
-            icon: /* @__PURE__ */ e.jsx(v, {}),
-            onClick: p,
+            icon: /* @__PURE__ */ e.jsx(z, {}),
+            onClick: x,
             children: "导出"
           }
         ),
-        /* @__PURE__ */ e.jsx(c, { onClick: r, children: "取消" })
+        /* @__PURE__ */ e.jsx(c, { onClick: t, children: "取消" })
       ] }),
-      children: /* @__PURE__ */ e.jsx(C, { className: "container", bordered: !1, children: /* @__PURE__ */ e.jsx(l, { vertical: !0, align: "center", gap: 24, style: { height: "100%" }, children: /* @__PURE__ */ e.jsx(l, { className: "containerBody", children: /* @__PURE__ */ e.jsx(
-        T,
+      children: /* @__PURE__ */ e.jsx(
+        C,
         {
-          refInstance: o,
-          display: !0,
-          showSelectRadio: !0
+          className: "container",
+          bordered: !1,
+          styles: { body: { paddingBlock: 24 } },
+          children: /* @__PURE__ */ e.jsx(l, { vertical: !0, align: "center", gap: 24, style: { height: "100%" }, children: /* @__PURE__ */ e.jsx(l, { className: "containerBody", children: /* @__PURE__ */ e.jsx(
+            T,
+            {
+              refInstance: o,
+              display: !0,
+              showSelectRadio: !0
+            }
+          ) }) })
         }
-      ) }) }) })
+      )
     }
   );
 };
 export {
-  q as default
+  G as default
 };

package/dist/components/BitzTable/ToolBar/Modal/index.mjs

@@ -1,28 +1,38 @@
 import { j as t } from "../../../../node_modules/.store/react@18.3.1/node_modules/react/jsx-runtime.mjs";
 import { Modal as C, Typography as c } from "antd";
 import { useMemo as p } from "react";
-import u from "../../../BitzTheme/index.mjs";
-import y from "../../../../node_modules/.store/classnames@2.5.1/node_modules/classnames/index.mjs";
-import { styles as g } from "./style.mjs";
-function F({
+import g from "../../../BitzTheme/index.mjs";
+import u from "../../../../node_modules/.store/classnames@2.5.1/node_modules/classnames/index.mjs";
+import { styles as y, modalTitleHeight as x } from "./style.mjs";
+function H({
   open: e,
   title: s,
   close: a,
   closeAfter: l,
   getContainer: i,
   footer: m,
-  extra: x,
+  extra: h,
   styles: n,
   children: d
 }) {
-  const { token: o } = u.useToken(), r = p(() => o.mode === "dark", [o.mode]), f = () => {
+  const { token: o } = g.useToken(), r = p(() => o.mode === "dark", [o.mode]), f = () => {
     l();
   };
   return /* @__PURE__ */ t.jsx(
     C,
     {
-      className: y(g(o), "tableConfigModal"),
-      title: /* @__PURE__ */ t.jsx(c.Title, { style: { fontSize: 16, margin: 0 }, children: s }),
+      className: u(y(o), "tableConfigModal"),
+      title: /* @__PURE__ */ t.jsx(
+        c.Title,
+        {
+          style: {
+            fontSize: 16,
+            lineHeight: `${x}px`,
+            margin: 0
+          },
+          children: s
+        }
+      ),
       getContainer: i,
       open: e,
       onCancel: a,
@@ -42,5 +52,5 @@ function F({
   );
 }
 export {
-  F as default
+  H as default
 };

package/dist/components/BitzTable/ToolBar/Modal/style.d.ts

@@ -1,2 +1,6 @@
 import { BitzGlobalToken } from '@/components/BitzTheme';
+export declare const modalTitleHeight = 19;
+export declare const modalHeaderHeight: number;
+export declare const modalFooterHeight: number;
+export declare const blockGap = 200;
 export declare const styles: (token: BitzGlobalToken) => string;