@vef-framework/components 1.0.63 → 1.0.64

package/lib/vef-table/components/columns/image.cjs

@@ -1,3 +1,16 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@vef-framework/shared");exports.default=function({value:t}){return e.jsx("img",{alt:r.extractBaseName(t),src:t})};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const shared = require('@vef-framework/shared');
+
+function Image({
+  value
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("img", { alt: shared.extractBaseName(value), src: value });
+}
+
+exports.default = Image;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-table/components/columns/index.cjs

@@ -1,3 +1,38 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./bool.cjs"),r=require("./code.cjs"),u=require("./data-dictionary.cjs"),t=require("./enum.cjs"),i=require("./file.cjs"),a=require("./icon.cjs"),c=require("./id.cjs"),d=require("./image.cjs"),o=require("./markdown.cjs"),s=require("./number.cjs"),l=require("./render.cjs"),n=require("./rich-text.cjs"),f=require("./text.cjs");require("./props.cjs");const j={Text:f.default,Number:s.default,Enum:t.default,Boolean:e.default,DataDictionary:u.default,Id:c.default,Render:l.default,Markdown:o.default,Icon:a.default,File:i.default,RichText:n.default,Image:d.default,Code:r.default};exports.columnComponents=j;
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const bool = require('./bool.cjs');
+const code = require('./code.cjs');
+const dataDictionary = require('./data-dictionary.cjs');
+const _enum = require('./enum.cjs');
+const file = require('./file.cjs');
+const icon = require('./icon.cjs');
+const id = require('./id.cjs');
+const image = require('./image.cjs');
+const markdown = require('./markdown.cjs');
+const number = require('./number.cjs');
+const render = require('./render.cjs');
+const richText = require('./rich-text.cjs');
+const text = require('./text.cjs');
+require('./props.cjs');
+
+const columnComponents = {
+  Text: text.default,
+  Number: number.default,
+  Enum: _enum.default,
+  Boolean: bool.default,
+  DataDictionary: dataDictionary.default,
+  Id: id.default,
+  Render: render.default,
+  Markdown: markdown.default,
+  Icon: icon.default,
+  File: file.default,
+  RichText: richText.default,
+  Image: image.default,
+  Code: code.default
+};
+
+exports.columnComponents = columnComponents;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-table/components/columns/markdown.cjs

@@ -1,3 +1,15 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime");exports.default=function({value:t}){return e.jsx("span",{children:t})};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function Markdown({
+  value
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: value });
+}
+
+exports.default = Markdown;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-table/components/columns/number.cjs

@@ -1,3 +1,88 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),u=require("@vef-framework/shared"),t=require("react"),l=require("../../../vef-text/index.cjs"),o=require("../../hooks/use-computed-values.cjs"),a=require("../../hooks/use-display-value.cjs");exports.default=function({value:i,record:s,rowIndex:c,columnProps:d}){if("Number"!==d.type)throw new u.VefError(-1,"Column type must be Number");const{defaultValue:f,formatter:n,prefix:m,suffix:p,bold:x,italic:V,color:b,width:h}=d,w=a.useDisplayValue(i,s,c,{defaultValue:f,formatter:n,prefix:m,suffix:p}),[y,q,v]=o.useComputedValues([{key:"bold",rawValue:x,defaultValue:!1},{key:"italic",rawValue:V,defaultValue:!1},{key:"color",rawValue:b}],i,s,c),j=t.useMemo((()=>{if(h)return r.css({maxWidth:`${h}px !important`})}),[h]);return u.isNullish(w)?null:e.jsx(l.default,{bold:y,color:v,css:j,italic:q,children:w})};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react$1 = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const index = require('../../../vef-text/index.cjs');
+const useComputedValues = require('../../hooks/use-computed-values.cjs');
+const useDisplayValue = require('../../hooks/use-display-value.cjs');
+
+function NumberColumn({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "Number") {
+    throw new shared.VefError(-1, "Column type must be Number");
+  }
+  const {
+    defaultValue,
+    formatter,
+    prefix,
+    suffix,
+    bold,
+    italic,
+    color,
+    width
+  } = columnProps;
+  const displayValue = useDisplayValue.useDisplayValue(
+    value,
+    record,
+    rowIndex,
+    {
+      defaultValue,
+      formatter,
+      prefix,
+      suffix
+    }
+  );
+  const [boldToUse, italicToUse, colorToUse] = useComputedValues.useComputedValues(
+    [
+      {
+        key: "bold",
+        rawValue: bold,
+        defaultValue: false
+      },
+      {
+        key: "italic",
+        rawValue: italic,
+        defaultValue: false
+      },
+      {
+        key: "color",
+        rawValue: color
+      }
+    ],
+    value,
+    record,
+    rowIndex
+  );
+  const cssToUse = react.useMemo(() => {
+    if (width) {
+      return react$1.css({
+        maxWidth: `${width}px !important`
+      });
+    }
+  }, [width]);
+  if (shared.isNullish(displayValue)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      bold: boldToUse,
+      color: colorToUse,
+      css: cssToUse,
+      italic: italicToUse,
+      children: displayValue
+    }
+  );
+}
+
+exports.default = NumberColumn;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-table/components/columns/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-table/components/columns/render.cjs

@@ -1,3 +1,33 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),t=require("@vef-framework/shared"),o=require("react");exports.default=function({value:n,record:i,rowIndex:u,columnProps:s}){if("Render"!==s.type)throw new t.VefError(-1,"Column type must be Render");const{render:d,width:c}=s,a=d?.(n,i,u),m=o.useMemo((()=>{if(c)return r.css({maxWidth:`${c}px !important`})}),[c]);return e.jsx("div",{css:m,children:a})};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react$1 = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+
+function Render({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "Render") {
+    throw new shared.VefError(-1, "Column type must be Render");
+  }
+  const { render, width } = columnProps;
+  const content = render?.(value, record, rowIndex);
+  const cssToUse = react.useMemo(() => {
+    if (width) {
+      return react$1.css({
+        maxWidth: `${width}px !important`
+      });
+    }
+  }, [width]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: cssToUse, children: content });
+}
+
+exports.default = Render;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-table/components/columns/rich-text.cjs

@@ -1,3 +1,15 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime");exports.default=function({value:t}){return e.jsx("span",{children:t})};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function RichText({
+  value
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: value });
+}
+
+exports.default = RichText;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-table/components/columns/text.cjs

@@ -1,3 +1,93 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),l=require("@vef-framework/shared"),u=require("react"),t=require("../../../vef-text/index.cjs"),i=require("../../hooks/use-computed-values.cjs"),o=require("../../hooks/use-display-value.cjs");exports.default=function({value:s,record:a,rowIndex:c,columnProps:d}){if("Text"!==d.type)throw new l.VefError(-1,"Column type must be Text");const{defaultValue:f,formatter:p,prefix:n,suffix:m,ellipsis:x,bold:y,italic:V,color:b,copyable:h,width:v}=d,[w,q,j]=i.useComputedValues([{key:"bold",rawValue:y,defaultValue:!1},{key:"italic",rawValue:V,defaultValue:!1},{key:"color",rawValue:b}],s,a,c),k=o.useDisplayValue(s,a,c,{defaultValue:f,formatter:p,prefix:n,suffix:m}),T=u.useMemo((()=>{if(v)return r.css({maxWidth:`${v}px !important`})}),[v]);return l.isNullish(k)?null:e.jsx(t.default,{bold:w,color:j,copyable:h,css:T,ellipsis:x,ellipsisTip:x?k:void 0,italic:q,children:k})};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react$1 = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const index = require('../../../vef-text/index.cjs');
+const useComputedValues = require('../../hooks/use-computed-values.cjs');
+const useDisplayValue = require('../../hooks/use-display-value.cjs');
+
+function Text({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "Text") {
+    throw new shared.VefError(-1, "Column type must be Text");
+  }
+  const {
+    defaultValue,
+    formatter,
+    prefix,
+    suffix,
+    ellipsis,
+    bold,
+    italic,
+    color,
+    copyable,
+    width
+  } = columnProps;
+  const [boldToUse, italicToUse, colorToUse] = useComputedValues.useComputedValues(
+    [
+      {
+        key: "bold",
+        rawValue: bold,
+        defaultValue: false
+      },
+      {
+        key: "italic",
+        rawValue: italic,
+        defaultValue: false
+      },
+      {
+        key: "color",
+        rawValue: color
+      }
+    ],
+    value,
+    record,
+    rowIndex
+  );
+  const valueToDisplay = useDisplayValue.useDisplayValue(
+    value,
+    record,
+    rowIndex,
+    {
+      defaultValue,
+      formatter,
+      prefix,
+      suffix
+    }
+  );
+  const cssToUse = react.useMemo(() => {
+    if (width) {
+      return react$1.css({
+        maxWidth: `${width}px !important`
+      });
+    }
+  }, [width]);
+  if (shared.isNullish(valueToDisplay)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      bold: boldToUse,
+      color: colorToUse,
+      copyable,
+      css: cssToUse,
+      ellipsis,
+      ellipsisTip: ellipsis ? valueToDisplay : void 0,
+      italic: italicToUse,
+      children: valueToDisplay
+    }
+  );
+}
+
+exports.default = Text;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-table/components/columns-settings.cjs

@@ -1,17 +1,34 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),l=require("@ant-design/icons"),a=require("@emotion/react"),n=require("@vef-framework/shared"),t=require("antd"),i=require("react"),s=require("../../vef-bool/index.cjs"),r=require("../../vef-button/index.cjs"),o=require("../../vef-divider/index.cjs"),d=require("../../vef-sortable-list/index.cjs"),c=require("../../vef-text/index.cjs"),u=require("../hooks/use-table-context.cjs"),m=a.css`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const Icon = require('@ant-design/icons');
+const react = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react$1 = require('react');
+const index = require('../../vef-bool/index.cjs');
+const index$2 = require('../../vef-button/index.cjs');
+const index$3 = require('../../vef-divider/index.cjs');
+const index$4 = require('../../vef-sortable-list/index.cjs');
+const index$1 = require('../../vef-text/index.cjs');
+const useTableContext = require('../hooks/use-table-context.cjs');
+
+const columnsSettingsPanelStyle = react.css`
   width: 260px;
-  padding: ${n.themeVariables.paddingSm};
+  padding: ${shared.themeVariables.paddingSm};
 
   .vef-divider-horizontal {
-    margin: ${n.themeVariables.marginSm} 0;
+    margin: ${shared.themeVariables.marginSm} 0;
   }
 
   .vef-table-columns-settings-panel-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-left: ${n.themeVariables.paddingSm};
+    padding-left: ${shared.themeVariables.paddingSm};
   }
 
   .vef-table-columns-settings-panel-body {
@@ -26,17 +43,17 @@
         display: grid;
         grid-template-columns: max-content 1fr max-content;
         align-items: center;
-        padding: ${n.themeVariables.paddingXs};
-        border-radius: ${n.themeVariables.borderRadius};
+        padding: ${shared.themeVariables.paddingXs};
+        border-radius: ${shared.themeVariables.borderRadius};
 
         &:hover {
-          background-color: ${n.themeVariables.colorPrimaryBg};
+          background-color: ${shared.themeVariables.colorPrimaryBg};
         }
 
         .vef-table-columns-settings-panel-column-drag-icon {
           cursor: move;
-          color: ${n.themeVariables.colorTextSecondary};
-          padding-right: ${n.themeVariables.padding};
+          color: ${shared.themeVariables.colorTextSecondary};
+          padding-right: ${shared.themeVariables.padding};
         }
 
         .vef-table-columns-settings-panel-column-fixed-icon {
@@ -50,5 +67,176 @@
       }
     }
   }
-`;const f=i.memo((function(){const{defaultColumnConfigMap:a,columnConfigMap:n,setColumnConfigMap:f}=u.useTableContextSelector((e=>{const{defaultColumnConfigMap:l,columnConfigMap:a,setColumnConfigMap:n}=e;return{defaultColumnConfigMap:l,columnConfigMap:a,setColumnConfigMap:n}})),g=i.useMemo((()=>[...n.entries()].sort((([e,l],[a,n])=>l.order-n.order)).map((([e,l])=>{const{title:a,configurable:n,...t}=l;return{value:e,label:a,disabled:!n,...t}}))),[n]),b=i.useCallback((e=>{const l=e.reduce(((e,l,a)=>{const{value:n,label:t,disabled:i,order:s,...r}=l,o={title:t,configurable:!i,order:a+1,...r};return e.set(n,o),e}),new Map);f(l)}),[f]),p=i.useMemo((()=>g.filter((e=>e.show)).map((e=>e.value))),[g]),h=i.useMemo((()=>{const e=p.length;return e===g.length?"checked":e>0?"indeterminate":"unchecked"}),[p.length,g.length]),v=i.useCallback((e=>{const l=new Set(e),a=g.map((e=>({...e,show:l.has(e.value)})));b(a)}),[g,b]),x=i.useCallback(((e,l)=>{const a=g.map((a=>({...a,fixed:a.value===e?l:a.fixed})));b(a)}),[g,b]),C=i.useCallback((e=>{b(e)}),[b]),j=i.useCallback((()=>{f(new Map(a))}),[a,f]);return e.jsxs("div",{css:m,children:[e.jsxs("div",{className:"vef-table-columns-settings-panel-header",children:[e.jsx(s.default,{indeterminate:"indeterminate"===h,label:e.jsx(c.default,{bold:!0,children:"列显示"}),value:"checked"===h,variant:"checkbox",onChange:e=>{v(e?g.map((e=>e.value)):[])}}),e.jsx(r.default,{color:"primary",variant:"text",onClick:j,children:"重置"})]}),e.jsx(o.default,{}),e.jsx(t.Checkbox.Group,{className:"vef-table-columns-settings-panel-body",value:p,onChange:v,children:e.jsx(d.default,{useHandle:!0,className:"vef-table-columns-settings-panel-columns",handleClassName:"vef-table-columns-settings-panel-column-drag-icon",itemClassName:"vef-table-columns-settings-panel-column",itemKey:"value",items:g,useOverlay:!1,renderItem:({value:a,label:n,disabled:i,fixed:s,show:d})=>e.jsxs(e.Fragment,{children:[e.jsx(t.Checkbox,{disabled:i,value:a,children:n}),e.jsxs("span",{className:"vef-table-columns-settings-panel-column-fixed-icon",children:[e.jsx(r.default,{color:"left"===s?"primary":"default",disabled:i||!d,icon:"left"===s?e.jsx(l.RollbackOutlined,{}):e.jsx(l.VerticalRightOutlined,{}),size:"small",tip:"left"===s?"取消左侧固定":"固定到左侧",variant:"link",onClick:()=>{"left"===s?x(a):x(a,"left")}}),e.jsx(o.default,{orientation:"vertical"}),e.jsx(r.default,{color:"right"===s?"primary":"default",disabled:i||!d,icon:"right"===s?e.jsx(l.RollbackOutlined,{}):e.jsx(l.VerticalLeftOutlined,{}),size:"small",tip:"right"===s?"取消右侧固定":"固定到右侧",variant:"link",onClick:()=>{"right"===s?x(a):x(a,"right")}})]})]}),onChange:C})})]})}),(()=>!1));f.displayName="VefColumnsSettings",exports.default=f;
+`;
+function VefColumnsSettingsBase() {
+  const {
+    defaultColumnConfigMap,
+    columnConfigMap,
+    setColumnConfigMap
+  } = useTableContext.useTableContextSelector((ctx) => {
+    const {
+      defaultColumnConfigMap: defaultColumnConfigMap2,
+      columnConfigMap: columnConfigMap2,
+      setColumnConfigMap: setColumnConfigMap2
+    } = ctx;
+    return {
+      defaultColumnConfigMap: defaultColumnConfigMap2,
+      columnConfigMap: columnConfigMap2,
+      setColumnConfigMap: setColumnConfigMap2
+    };
+  });
+  const columnOptions = react$1.useMemo(() => [...columnConfigMap.entries()].sort(([_, one], [__, another]) => one.order - another.order).map(([name, column]) => {
+    const {
+      title,
+      configurable,
+      ...rest
+    } = column;
+    return {
+      value: name,
+      label: title,
+      disabled: !configurable,
+      ...rest
+    };
+  }), [columnConfigMap]);
+  const setColumnOptions = react$1.useCallback((newColumnOptions) => {
+    const newColumnConfigMap = newColumnOptions.reduce(
+      (map, option, index) => {
+        const {
+          value,
+          label,
+          disabled,
+          order,
+          ...rest
+        } = option;
+        const columnConfig = {
+          title: label,
+          configurable: !disabled,
+          order: index + 1,
+          ...rest
+        };
+        map.set(value, columnConfig);
+        return map;
+      },
+      /* @__PURE__ */ new Map()
+    );
+    setColumnConfigMap(newColumnConfigMap);
+  }, [setColumnConfigMap]);
+  const showedColumns = react$1.useMemo(() => columnOptions.filter((it) => it.show).map((it) => it.value), [columnOptions]);
+  const allCheckStatus = react$1.useMemo(() => {
+    const showedLength = showedColumns.length;
+    const totalLength = columnOptions.length;
+    return showedLength === totalLength ? "checked" : showedLength > 0 ? "indeterminate" : "unchecked";
+  }, [showedColumns.length, columnOptions.length]);
+  const handleShowedColumnsChange = react$1.useCallback((value) => {
+    const names = new Set(value);
+    const newColumnOptions = columnOptions.map((option) => ({
+      ...option,
+      show: names.has(option.value)
+    }));
+    setColumnOptions(newColumnOptions);
+  }, [columnOptions, setColumnOptions]);
+  const handleColumnFixedChange = react$1.useCallback((name, fixed) => {
+    const newColumnOptions = columnOptions.map((option) => ({
+      ...option,
+      fixed: option.value === name ? fixed : option.fixed
+    }));
+    setColumnOptions(newColumnOptions);
+  }, [columnOptions, setColumnOptions]);
+  const handleColumnOrderChange = react$1.useCallback((newColumnOptions) => {
+    setColumnOptions(newColumnOptions);
+  }, [setColumnOptions]);
+  const handleResetColumnConfig = react$1.useCallback(() => {
+    setColumnConfigMap(new Map(defaultColumnConfigMap));
+  }, [defaultColumnConfigMap, setColumnConfigMap]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: columnsSettingsPanelStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "vef-table-columns-settings-panel-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          indeterminate: allCheckStatus === "indeterminate",
+          label: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { bold: true, children: "\u5217\u663E\u793A" }),
+          value: allCheckStatus === "checked",
+          variant: "checkbox",
+          onChange: (value) => {
+            handleShowedColumnsChange(value ? columnOptions.map((it) => it.value) : []);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { color: "primary", variant: "text", onClick: handleResetColumnConfig, children: "\u91CD\u7F6E" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(antd.Checkbox.Group, { className: "vef-table-columns-settings-panel-body", value: showedColumns, onChange: handleShowedColumnsChange, children: /* @__PURE__ */ jsxRuntime.jsx(
+      index$4.default,
+      {
+        useHandle: true,
+        className: "vef-table-columns-settings-panel-columns",
+        handleClassName: "vef-table-columns-settings-panel-column-drag-icon",
+        itemClassName: "vef-table-columns-settings-panel-column",
+        itemKey: "value",
+        items: columnOptions,
+        useOverlay: false,
+        renderItem: ({
+          value,
+          label,
+          disabled,
+          fixed,
+          show
+        }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            antd.Checkbox,
+            {
+              disabled,
+              value,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "vef-table-columns-settings-panel-column-fixed-icon", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              index$2.default,
+              {
+                color: fixed === "left" ? "primary" : "default",
+                disabled: disabled || !show,
+                icon: fixed === "left" ? /* @__PURE__ */ jsxRuntime.jsx(Icon.RollbackOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icon.VerticalRightOutlined, {}),
+                size: "small",
+                tip: fixed === "left" ? "\u53D6\u6D88\u5DE6\u4FA7\u56FA\u5B9A" : "\u56FA\u5B9A\u5230\u5DE6\u4FA7",
+                variant: "link",
+                onClick: () => {
+                  if (fixed === "left") {
+                    handleColumnFixedChange(value);
+                  } else {
+                    handleColumnFixedChange(value, "left");
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(index$3.default, { orientation: "vertical" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              index$2.default,
+              {
+                color: fixed === "right" ? "primary" : "default",
+                disabled: disabled || !show,
+                icon: fixed === "right" ? /* @__PURE__ */ jsxRuntime.jsx(Icon.RollbackOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icon.VerticalLeftOutlined, {}),
+                size: "small",
+                tip: fixed === "right" ? "\u53D6\u6D88\u53F3\u4FA7\u56FA\u5B9A" : "\u56FA\u5B9A\u5230\u53F3\u4FA7",
+                variant: "link",
+                onClick: () => {
+                  if (fixed === "right") {
+                    handleColumnFixedChange(value);
+                  } else {
+                    handleColumnFixedChange(value, "right");
+                  }
+                }
+              }
+            )
+          ] })
+        ] }),
+        onChange: handleColumnOrderChange
+      }
+    ) })
+  ] });
+}
+const VefColumnsSettings = react$1.memo(VefColumnsSettingsBase, () => false);
+VefColumnsSettings.displayName = "VefColumnsSettings";
+
+exports.default = VefColumnsSettings;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */