bkui-vue 0.0.1-beta.45 → 0.0.1-beta.48

package/dist/index.esm.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, Transition, getCurrentInstance, provide, inject, Fragment, nextTick, isVNode, createTextVNode, toRefs, customRef, onBeforeMount, withDirectives, vShow, toRef, unref, resolveDirective, vModelText, watchEffect, onUpdated, render, onUnmounted, Teleport } from "vue";
+import { createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, Transition, getCurrentInstance, provide, inject, nextTick, isVNode, createTextVNode, Fragment, toRefs, customRef, onBeforeMount, withDirectives, vShow, toRef, unref, resolveDirective, vModelText, watchEffect, onUpdated, render, onUnmounted, Teleport } from "vue";
 var reset = "";
 var alert = "";
 var backtop = "";
@@ -93,7 +93,7 @@ const BKLAYERD_INDEX_EFAULT_VALUE = {
 };
 class BKZIndexManager {
   constructor() {
-    this.storageLayerIndexValue = {};
+    __publicField(this, "storageLayerIndexValue", {});
     this.copyDefaultValue();
   }
   getNextIndex(type) {
@@ -204,20 +204,20 @@ function isShadowRoot(node) {
 }
 function applyStyles(_ref) {
   var state = _ref.state;
-  Object.keys(state.elements).forEach(function(name) {
-    var style = state.styles[name] || {};
-    var attributes = state.attributes[name] || {};
-    var element = state.elements[name];
+  Object.keys(state.elements).forEach(function(name2) {
+    var style = state.styles[name2] || {};
+    var attributes = state.attributes[name2] || {};
+    var element = state.elements[name2];
     if (!isHTMLElement(element) || !getNodeName(element)) {
       return;
     }
     Object.assign(element.style, style);
-    Object.keys(attributes).forEach(function(name2) {
-      var value = attributes[name2];
+    Object.keys(attributes).forEach(function(name3) {
+      var value = attributes[name3];
       if (value === false) {
-        element.removeAttribute(name2);
+        element.removeAttribute(name3);
       } else {
-        element.setAttribute(name2, value === true ? "" : value);
+        element.setAttribute(name3, value === true ? "" : value);
       }
     });
   });
@@ -242,10 +242,10 @@ function effect$2(_ref2) {
     Object.assign(state.elements.arrow.style, initialStyles.arrow);
   }
   return function() {
-    Object.keys(state.elements).forEach(function(name) {
-      var element = state.elements[name];
-      var attributes = state.attributes[name] || {};
-      var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]);
+    Object.keys(state.elements).forEach(function(name2) {
+      var element = state.elements[name2];
+      var attributes = state.attributes[name2] || {};
+      var styleProperties = Object.keys(state.styles.hasOwnProperty(name2) ? state.styles[name2] : initialStyles[name2]);
       var style = styleProperties.reduce(function(style2, property) {
         style2[property] = "";
         return style2;
@@ -424,7 +424,7 @@ var toPaddingObject = function toPaddingObject2(padding, state) {
 };
 function arrow(_ref) {
   var _state$modifiersData$;
-  var state = _ref.state, name = _ref.name, options = _ref.options;
+  var state = _ref.state, name2 = _ref.name, options = _ref.options;
   var arrowElement = state.elements.arrow;
   var popperOffsets2 = state.modifiersData.popperOffsets;
   var basePlacement = getBasePlacement(state.placement);
@@ -448,7 +448,7 @@ function arrow(_ref) {
   var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;
   var offset2 = within(min2, center, max2);
   var axisProp = axis;
-  state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset2, _state$modifiersData$.centerOffset = offset2 - center, _state$modifiersData$);
+  state.modifiersData[name2] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset2, _state$modifiersData$.centerOffset = offset2 - center, _state$modifiersData$);
 }
 function effect$1(_ref2) {
   var state = _ref2.state, options = _ref2.options;
@@ -904,8 +904,8 @@ function getExpandedFallbackPlacements(placement) {
   return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
 }
 function flip(_ref) {
-  var state = _ref.state, options = _ref.options, name = _ref.name;
-  if (state.modifiersData[name]._skip) {
+  var state = _ref.state, options = _ref.options, name2 = _ref.name;
+  if (state.modifiersData[name2]._skip) {
     return;
   }
   var _options$mainAxis = options.mainAxis, checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, _options$altAxis = options.altAxis, checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis, specifiedFallbackPlacements = options.fallbackPlacements, padding = options.padding, boundary = options.boundary, rootBoundary = options.rootBoundary, altBoundary = options.altBoundary, _options$flipVariatio = options.flipVariations, flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio, allowedAutoPlacements = options.allowedAutoPlacements;
@@ -985,7 +985,7 @@ function flip(_ref) {
     }
   }
   if (state.placement !== firstFittingPlacement) {
-    state.modifiersData[name]._skip = true;
+    state.modifiersData[name2]._skip = true;
     state.placement = firstFittingPlacement;
     state.reset = true;
   }
@@ -1020,7 +1020,7 @@ function isAnySideFullyClipped(overflow) {
   });
 }
 function hide(_ref) {
-  var state = _ref.state, name = _ref.name;
+  var state = _ref.state, name2 = _ref.name;
   var referenceRect = state.rects.reference;
   var popperRect = state.rects.popper;
   var preventedOffsets = state.modifiersData.preventOverflow;
@@ -1034,7 +1034,7 @@ function hide(_ref) {
   var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets);
   var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets);
   var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets);
-  state.modifiersData[name] = {
+  state.modifiersData[name2] = {
     referenceClippingOffsets,
     popperEscapeOffsets,
     isReferenceHidden,
@@ -1069,7 +1069,7 @@ function distanceAndSkiddingToXY(placement, rects, offset2) {
   };
 }
 function offset(_ref2) {
-  var state = _ref2.state, options = _ref2.options, name = _ref2.name;
+  var state = _ref2.state, options = _ref2.options, name2 = _ref2.name;
   var _options$offset = options.offset, offset2 = _options$offset === void 0 ? [0, 0] : _options$offset;
   var data2 = placements$1.reduce(function(acc, placement) {
     acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset2);
@@ -1080,7 +1080,7 @@ function offset(_ref2) {
     state.modifiersData.popperOffsets.x += x2;
     state.modifiersData.popperOffsets.y += y2;
   }
-  state.modifiersData[name] = data2;
+  state.modifiersData[name2] = data2;
 }
 var offset$1 = {
   name: "offset",
@@ -1090,8 +1090,8 @@ var offset$1 = {
   fn: offset
 };
 function popperOffsets(_ref) {
-  var state = _ref.state, name = _ref.name;
-  state.modifiersData[name] = computeOffsets({
+  var state = _ref.state, name2 = _ref.name;
+  state.modifiersData[name2] = computeOffsets({
     reference: state.rects.reference,
     element: state.rects.popper,
     strategy: "absolute",
@@ -1109,7 +1109,7 @@ function getAltAxis(axis) {
   return axis === "x" ? "y" : "x";
 }
 function preventOverflow(_ref) {
-  var state = _ref.state, options = _ref.options, name = _ref.name;
+  var state = _ref.state, options = _ref.options, name2 = _ref.name;
   var _options$mainAxis = options.mainAxis, checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, _options$altAxis = options.altAxis, checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis, boundary = options.boundary, rootBoundary = options.rootBoundary, altBoundary = options.altBoundary, padding = options.padding, _options$tether = options.tether, tether = _options$tether === void 0 ? true : _options$tether, _options$tetherOffset = options.tetherOffset, tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset;
   var overflow = detectOverflow(state, {
     boundary,
@@ -1190,7 +1190,7 @@ function preventOverflow(_ref) {
     popperOffsets2[altAxis] = _preventedOffset;
     data2[altAxis] = _preventedOffset - _offset;
   }
-  state.modifiersData[name] = data2;
+  state.modifiersData[name2] = data2;
 }
 var preventOverflow$1 = {
   name: "preventOverflow",
@@ -1391,12 +1391,12 @@ function popperGenerator(generatorOptions) {
             index = -1;
             continue;
           }
-          var _state$orderedModifie = state.orderedModifiers[index], fn2 = _state$orderedModifie.fn, _state$orderedModifie2 = _state$orderedModifie.options, _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, name = _state$orderedModifie.name;
+          var _state$orderedModifie = state.orderedModifiers[index], fn2 = _state$orderedModifie.fn, _state$orderedModifie2 = _state$orderedModifie.options, _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, name2 = _state$orderedModifie.name;
           if (typeof fn2 === "function") {
             state = fn2({
               state,
               options: _options,
-              name,
+              name: name2,
               instance
             }) || state;
           }
@@ -1423,11 +1423,11 @@ function popperGenerator(generatorOptions) {
     });
     function runModifierEffects() {
       state.orderedModifiers.forEach(function(_ref3) {
-        var name = _ref3.name, _ref3$options = _ref3.options, options2 = _ref3$options === void 0 ? {} : _ref3$options, effect2 = _ref3.effect;
+        var name2 = _ref3.name, _ref3$options = _ref3.options, options2 = _ref3$options === void 0 ? {} : _ref3$options, effect2 = _ref3.effect;
         if (typeof effect2 === "function") {
           var cleanupFn = effect2({
             state,
-            name,
+            name: name2,
             instance,
             options: options2
           });
@@ -1529,21 +1529,22 @@ function isElement$1(obj) {
 }
 class BKPopover {
   constructor(reference2, popperRefer, options) {
+    __publicField(this, "isShow", false);
+    __publicField(this, "trigger");
+    __publicField(this, "instance");
+    __publicField(this, "reference");
+    __publicField(this, "referenceTarget");
+    __publicField(this, "popperRefer");
+    __publicField(this, "instanceOptions");
+    __publicField(this, "delay", 50);
+    __publicField(this, "isInnerPopper", false);
+    __publicField(this, "disabled", false);
+    __publicField(this, "afterShow", null);
+    __publicField(this, "afterHidden", null);
+    __publicField(this, "appendTo", "parent");
+    __publicField(this, "container", null);
+    __publicField(this, "fixOnBoundary", false);
     var _a, _b;
-    this.isShow = false;
-    this.trigger = void 0;
-    this.instance = void 0;
-    this.reference = void 0;
-    this.referenceTarget = void 0;
-    this.popperRefer = void 0;
-    this.delay = 50;
-    this.isInnerPopper = false;
-    this.disabled = false;
-    this.afterShow = null;
-    this.afterHidden = null;
-    this.appendTo = "parent";
-    this.container = null;
-    this.fixOnBoundary = false;
     this.instanceOptions = this.initDefaultOptions(options);
     this.reference = this.resolveInputSelectorToHtmlElement(reference2);
     this.popperRefer = this.resolveInputSelectorToHtmlElement(popperRefer);
@@ -1773,13 +1774,15 @@ const random = (n2, str = lowerStr) => {
 };
 class BkMaskManager {
   constructor(config) {
-    this.multiInstance = false;
-    this.uniqueMaskAttrTag = "";
-    this.parentNode = document.body;
-    this.activeInstance = void 0;
-    this.zIndexStore = /* @__PURE__ */ new Map();
-    this.lastUUID = null;
-    this.maskStyle = {
+    __publicField(this, "mask");
+    __publicField(this, "backupMask");
+    __publicField(this, "multiInstance", false);
+    __publicField(this, "uniqueMaskAttrTag", "");
+    __publicField(this, "parentNode", document.body);
+    __publicField(this, "activeInstance");
+    __publicField(this, "zIndexStore", /* @__PURE__ */ new Map());
+    __publicField(this, "lastUUID", null);
+    __publicField(this, "maskStyle", {
       position: "absolute",
       left: 0,
       top: 0,
@@ -1787,7 +1790,7 @@ class BkMaskManager {
       right: 0,
       display: "none",
       "background-color": "rgba(0,0,0,.6)"
-    };
+    });
     const { multiInstance = false, maskAttrTag = "auto", parentNode = document.body, maskStyle = {} } = config || {};
     this.activeInstance = void 0;
     this.multiInstance = multiInstance;
@@ -1890,6 +1893,8 @@ class BkMaskManager {
 const bKMaskManager = new BkMaskManager({});
 class BKPopIndexManager {
   constructor() {
+    __publicField(this, "popInstanceList");
+    __publicField(this, "uuidAttrName");
     this.popInstanceList = [];
     this.uuidAttrName = "data-bk-pop-uuid";
   }
@@ -2282,13 +2287,13 @@ class PropTypes extends propTypesNS {
       default: "top"
     });
   }
-  static commonType(types = [], name = "commonType") {
-    return j(name.replace(/^\S/, (s2) => s2.toUpperCase()), {
+  static commonType(types = [], name2 = "commonType") {
+    return j(name2.replace(/^\S/, (s2) => s2.toUpperCase()), {
       type: String,
       validator: (val) => {
         const valid = types.includes(val);
         if (!valid) {
-          console.error(`invalid ${name}, ${val}, the ${name} must be one of \u3010${types.join(" | ")}\u3011`);
+          console.error(`invalid ${name2}, ${val}, the ${name2} must be one of \u3010${types.join(" | ")}\u3011`);
         }
         return valid;
       },
@@ -2352,7 +2357,7 @@ function generate(node, key, rootAttrs) {
 const bkIcon = (props, context) => {
   const _a = __spreadValues(__spreadValues({}, context.attrs), props), {
     data: data2,
-    name,
+    name: name2,
     width,
     height,
     fill
@@ -2364,45 +2369,54 @@ const bkIcon = (props, context) => {
     "fill"
   ]);
   const rootAttrs = `width: ${width}; height: ${height}; fill: ${fill}`;
-  return createVNode("span", restProps, [generate(data2, name, rootAttrs)]);
+  return createVNode("span", restProps, [generate(data2, name2, rootAttrs)]);
 };
 bkIcon.inheritAttrs = false;
 bkIcon.displayName = "bkIcon";
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 744.64L789.6 462.72 880 554.56 512 928 144 554.56 234.4 462.72 512 744.64z"}},{"type":"element","name":"path","attributes":{"d":"M144 187.68L234.4 96 512 377.76 789.6 96 880 187.68 512 561.28 144 187.68z"}}]}');
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M279.36 512L561.28 789.6 469.44 880 96 512 469.44 144 561.28 234.4 279.36 512z"}},{"type":"element","name":"path","attributes":{"d":"M836.32 144L928 234.4 646.08 512 928 789.6 836.32 880 462.72 512 836.32 144z"}}]}');
-const data$x = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M697.6 281.6l48 48-176 176 176 176-48 48-224-224L697.6 281.6z"}},{"type":"element","name":"path","attributes":{"d":"M505.6 281.6l48 48-176 176 176 176-48 48-224-224L505.6 281.6z"}}]}');
+const data$y = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M697.6 281.6l48 48-176 176 176 176-48 48-224-224L697.6 281.6z"}},{"type":"element","name":"path","attributes":{"d":"M505.6 281.6l48 48-176 176 176 176-48 48-224-224L505.6 281.6z"}}]}');
 const angleDoubleLeft = (props, context) => {
   const p2 = __spreadValues(__spreadValues({}, props), context.attrs);
   return createVNode(bkIcon, mergeProps(p2, {
-    "data": data$x,
+    "data": data$y,
     "name": "angleDoubleLeft"
   }), null);
 };
 angleDoubleLeft.displayName = "angleDoubleLeft";
 angleDoubleLeft.inheritAttrs = false;
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M744.64 512L462.72 789.6 554.56 880 928 512 554.56 144 462.72 234.4 744.64 512z"}},{"type":"element","name":"path","attributes":{"d":"M187.68 144L96 234.4 377.76 512 96 789.6 187.68 880 561.28 512 187.68 144z"}}]}');
-const data$w = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M358.4 729.6l-48-48 176-176-176-176 48-48 224 224L358.4 729.6z"}},{"type":"element","name":"path","attributes":{"d":"M550.4 729.6l-48-48 176-176-176-176 48-48 224 224L550.4 729.6z"}}]}');
+const data$x = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M358.4 729.6l-48-48 176-176-176-176 48-48 224 224L358.4 729.6z"}},{"type":"element","name":"path","attributes":{"d":"M550.4 729.6l-48-48 176-176-176-176 48-48 224 224L550.4 729.6z"}}]}');
 const angleDoubleRight = (props, context) => {
   const p2 = __spreadValues(__spreadValues({}, props), context.attrs);
   return createVNode(bkIcon, mergeProps(p2, {
-    "data": data$w,
+    "data": data$x,
     "name": "angleDoubleRight"
   }), null);
 };
 angleDoubleRight.displayName = "angleDoubleRight";
 angleDoubleRight.inheritAttrs = false;
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 279.36L789.6 561.28 880 469.44 512 96 144 469.44 234.4 561.28 512 279.36z"}},{"type":"element","name":"path","attributes":{"d":"M144 836.32L234.4 928 512 646.08 789.6 928 880 836.32 512 462.72 144 836.32z"}}]}');
-const data$v = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 256L96 704 187.04 704 512 704 836.96 704 928 704 512 256z"}}]}');
+const data$w = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 256L96 704 187.04 704 512 704 836.96 704 928 704 512 256z"}}]}');
 const angleDownFill = (props, context) => {
   const p2 = __spreadValues(__spreadValues({}, props), context.attrs);
   return createVNode(bkIcon, mergeProps(p2, {
-    "data": data$v,
+    "data": data$w,
     "name": "angleDownFill"
   }), null);
 };
 angleDownFill.displayName = "angleDownFill";
 angleDownFill.inheritAttrs = false;
-JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 762.56L98.72 349.28 189.28 258.72 512 581.44 834.72 258.72 925.28 349.28 512 762.56z"}}]}');
+const data$v = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 762.56L98.72 349.28 189.28 258.72 512 581.44 834.72 258.72 925.28 349.28 512 762.56z"}}]}');
+const angleDownLine = (props, context) => {
+  const p2 = __spreadValues(__spreadValues({}, props), context.attrs);
+  return createVNode(bkIcon, mergeProps(p2, {
+    "data": data$v,
+    "name": "angleDownLine"
+  }), null);
+};
+angleDownLine.displayName = "angleDownLine";
+angleDownLine.inheritAttrs = false;
 const data$u = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M288 448L336 400 512 576 688 400 736 448 512 672z"}}]}');
 const angleDown = (props, context) => {
   const p2 = __spreadValues(__spreadValues({}, props), context.attrs);
@@ -2589,6 +2603,7 @@ const folder = (props, context) => {
 };
 folder.displayName = "folder";
 folder.inheritAttrs = false;
+JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M860.8 128H163.2a32 32 0 0 0-27.36 52l295.2 336 0.96 0V896l160-82.72V516.8l0.96 0 295.2-336A32 32 0 0 0 860.8 128Z"}}]}');
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","class":"bk-icon","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;","overflow":"hidden","viewBox":"0 0 1024 1024"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 64C264 64 64 264 64 512c0 57.6 11.2 113.6 32 166.4V896c0 17.6 14.4 32 32 32h217.6C576 1019.2 836.8 908.8 928 678.4S908.8 187.2 678.4 96C625.6 75.2 569.6 64 512 64zM500.8 721.6c-27.2 0-48-20.8-48-48s20.8-48 48-48c27.2 0 48 20.8 48 48S528 721.6 500.8 721.6zM587.2 507.2c-36.8 20.8-48 35.2-48 62.4v14.4H464v-16c-3.2-44.8 11.2-70.4 51.2-92.8 36.8-22.4 48-35.2 48-60.8s-20.8-44.8-52.8-44.8c-28.8-1.6-52.8 19.2-56 48 0 1.6 0 1.6 0 3.2h-76.8c1.6-70.4 49.6-118.4 136-118.4 80 0 132.8 44.8 132.8 110.4C648 454.4 627.2 484.8 587.2 507.2z"}}]}');
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","class":"bk-icon","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;","overflow":"hidden","viewBox":"0 0 1024 1024"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 64C264 64 64 264 64 512s200 448 448 448 448-200 448-448S760 64 512 64zM500.8 721.6c-27.2 0-48-20.8-48-48s20.8-48 48-48c27.2 0 48 20.8 48 48S528 721.6 500.8 721.6zM587.2 507.2c-36.8 20.8-48 35.2-48 62.4v14.4H464v-16c-3.2-44.8 11.2-70.4 51.2-92.8 36.8-22.4 48-35.2 48-60.8s-20.8-44.8-52.8-44.8c-28.8-1.6-52.8 19.2-56 48 0 1.6 0 1.6 0 3.2h-76.8c1.6-70.4 49.6-118.4 136-118.4 80 0 132.8 44.8 132.8 110.4C648 454.4 627.2 484.8 587.2 507.2z"}}]}');
 const data$c = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","class":"bk-icon","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;","overflow":"hidden","viewBox":"0 0 1024 1024"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 128c212.8 0 384 171.2 384 384S724.8 896 512 896 128 724.8 128 512 299.2 128 512 128M512 64C264 64 64 264 64 512s200 448 448 448 448-200 448-448S760 64 512 64z"}},{"type":"element","name":"path","attributes":{"d":"M548.8 673.6A48 48 0 0 1 500.8 721.6 48 48 0 0 1 452.8 673.6 48 48 0 0 1 548.8 673.6z"}},{"type":"element","name":"path","attributes":{"d":"M513.6 302.4c80 0 132.8 44.8 132.8 110.4 0 41.6-20.8 72-60.8 96-40 24-48 35.2-48 62.4v14.4H464v-16c-3.2-44.8 11.2-70.4 51.2-92.8 36.8-22.4 48-35.2 48-60.8s-20.8-44.8-52.8-44.8c-28.8-1.6-52.8 19.2-56 48 0 1.6 0 1.6 0 3.2h-76.8C377.6 352 427.2 302.4 513.6 302.4z"}}]}');
@@ -8510,13 +8525,13 @@ var Component$r = defineComponent({
       var _a, _b;
       return createVNode("div", {
         "class": loadingWrapperCls.value
-      }, [props.loading && createVNode(Fragment, null, [createVNode("div", {
+      }, [props.loading && [createVNode("div", {
         "class": containerCls.value
       }, [indicator.value, hasTitle.value && createVNode("div", {
         "class": "bk-loading-title"
       }, [props.title])]), ctx.slots.default && createVNode("div", {
         "class": "bk-loading-mask"
-      }, null)]), (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+      }, null)], (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
     };
   }
 });
@@ -8572,6 +8587,8 @@ var Component$q = defineComponent({
     });
     const loadingSize = computed(() => props.size === BkLoadingSize.Small ? BkLoadingSize.Mini : BkLoadingSize.Small);
     const handleClick = () => {
+      if (props.loading)
+        return;
       emit("click");
     };
     const handleMouseOver = () => {
@@ -8592,12 +8609,13 @@ var Component$q = defineComponent({
         "onClick": handleClick,
         "onMouseover": handleMouseOver,
         "onMouseleave": handleMouseout
-      }), [props.loading && createVNode(BkLoading, {
+      }), [props.loading ? createVNode(BkLoading, {
+        "loading": true,
         "class": `${btnClsPrefix}-loading`,
         "mode": props.laodingMode,
         "theme": loadingTheme.value,
         "size": loadingSize.value
-      }, null), slots.default && createVNode("span", {
+      }, null) : slots.default && createVNode("span", {
         "class": `${btnClsPrefix}-text`
       }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])]);
     };
@@ -8665,10 +8683,10 @@ const checkboxGroupKey = Symbol("CheckboxGroup");
 function useFocus$2() {
   const isFocus = ref(false);
   const blur = () => {
-    isFocus.value = true;
+    isFocus.value = false;
   };
   const focus = () => {
-    isFocus.value = false;
+    isFocus.value = true;
   };
   return [
     isFocus,
@@ -8686,50 +8704,44 @@ const useCheckbox = () => {
   } = currentInstance;
   const checkboxGroup = inject(checkboxGroupKey, EMPTY_OBJ);
   const isGroup = !isEmptyObj(checkboxGroup);
-  const state = reactive({
-    isLocalChecked: props.checked
-  });
-  const isChecked = computed(() => {
-    if (isGroup) {
-      return checkboxGroup.state.localValue.includes(props.label);
-    }
-    if (props.modelValue !== void 0) {
-      if (props.modelValue === props.label || props.modelValue === props.trueLabel) {
-        return true;
-      }
-    }
-    return state.isLocalChecked;
-  });
-  state.isLocalChecked = isChecked.value;
-  const value = computed(() => {
-    if (isGroup) {
-      return isChecked.value ? props.label : "";
-    }
-    if (isChecked.value) {
-      return props.trueLabel !== "" ? props.trueLabel : props.label;
-    }
-    return props.falseLabel !== "" ? props.falseLabel : "";
-  });
+  const isChecked = ref(props.checked);
   const isDisabled = computed(() => {
     if (isGroup && checkboxGroup.props.disabled) {
       return true;
     }
     return props.disabled;
   });
+  if (isGroup) {
+    watch(() => checkboxGroup.props.modelValue, (modelValue) => {
+      isChecked.value = modelValue.includes(props.label);
+    });
+  } else {
+    watch(() => props.modelValue, (modelValue) => {
+      if (modelValue === "") {
+        return;
+      }
+      isChecked.value = modelValue === props.trueLabel;
+    }, {
+      immediate: true
+    });
+  }
+  const setChecked = (value = true) => {
+    isChecked.value = value;
+  };
   const handleChange = (event) => {
     if (isDisabled.value) {
       return;
     }
     const $targetInput = event.target;
-    state.isLocalChecked = $targetInput.checked;
-    emit("change", value.value);
-    emit("update:modelValue", value.value);
+    isChecked.value = $targetInput.checked;
+    const nextValue = isChecked.value ? props.trueLabel : props.falseLabel;
+    emit("change", nextValue);
+    emit("update:modelValue", nextValue);
     if (isGroup) {
-      checkboxGroup.handleChange(state.isLocalChecked, props.label);
+      checkboxGroup.handleChange();
     }
     nextTick(() => {
       if ($targetInput.checked !== isChecked.value) {
-        state.isLocalChecked = isChecked.value;
         $targetInput.checked = isChecked.value;
       }
     });
@@ -8745,16 +8757,16 @@ const useCheckbox = () => {
     }
   });
   return {
-    value,
     isChecked,
     isDisabled,
+    setChecked,
     handleChange
   };
 };
 const checkboxProps = {
-  modelValue: PropTypes.oneOfType([String, Number, Boolean]).def(void 0),
-  label: PropTypes.oneOfType([String, Number, Boolean]).isRequired,
-  trueLabel: PropTypes.oneOfType([String, Number, Boolean]).def(""),
+  modelValue: PropTypes.oneOfType([String, Number, Boolean]).def(""),
+  label: PropTypes.oneOfType([String, Number, Boolean]),
+  trueLabel: PropTypes.oneOfType([String, Number, Boolean]).def(true),
   falseLabel: PropTypes.oneOfType([String, Number, Boolean]).def(""),
   disabled: PropTypes.bool.def(false),
   checked: PropTypes.bool.def(false),
@@ -8772,16 +8784,16 @@ var Component$o = defineComponent({
       focus: handleFocus
     }] = useFocus$2();
     const {
-      value,
       isChecked,
       isDisabled,
+      setChecked,
       handleChange
     } = useCheckbox();
     return {
-      currentValue: value,
       isFocus,
       isChecked,
       isDisabled,
+      setChecked,
       handleBlur,
       handleFocus,
       handleChange
@@ -8790,9 +8802,10 @@ var Component$o = defineComponent({
   render() {
     const checkboxClass = classes({
       "bk-checkbox": true,
-      "is-focus": this.isFocus,
+      "is-focused": this.isFocus,
       "is-checked": this.isChecked,
-      "is-disabled": this.isDisabled
+      "is-disabled": this.isDisabled,
+      "is-indeterminated": this.indeterminate
     });
     return createVNode("label", {
       "class": checkboxClass
@@ -8802,11 +8815,10 @@ var Component$o = defineComponent({
       "role": "checkbox",
       "type": "checkbox",
       "class": "bk-checkbox-original",
-      "value": this.currentValue,
       "disabled": this.isDisabled,
       "checked": this.isChecked,
       "onChange": this.handleChange
-    }, null)]), createVNode("span", {
+    }, null)]), this.$slots.default ? this.$slots.default() : createVNode("span", {
       "class": "bk-checkbox-label"
     }, [this.label])]);
   }
@@ -8816,17 +8828,11 @@ const checkboxGroupProps = {
   modelValue: PropTypes.array,
   disabled: PropTypes.bool
 };
-var CheckboxGroup = defineComponent({
+var BkCheckboxGroup = defineComponent({
   name: "CheckboxGroup",
   props: checkboxGroupProps,
   emits: ["change", "update:modelValue"],
   setup(props, context) {
-    const state = reactive({
-      localValue: props.modelValue ? [...props.modelValue] : []
-    });
-    watch(() => props.modelValue, (modelValue = []) => {
-      state.localValue = [...modelValue];
-    });
     const checkboxInstanceList = [];
     const register = (checkboxContext) => {
       checkboxInstanceList.push(checkboxContext);
@@ -8837,48 +8843,41 @@ var CheckboxGroup = defineComponent({
         checkboxInstanceList.splice(index, 1);
       }
     };
-    const handleChange = (nextChecked, value) => {
-      let nextValue = [...state.localValue];
-      if (nextChecked) {
-        nextValue = [...state.localValue, value];
-      } else {
-        nextValue = state.localValue.reduce((result, item) => {
-          if (item !== value) {
-            result.push(item);
-          }
-          return result;
-        }, []);
-      }
-      if (!props.modelValue) {
-        state.localValue = nextValue;
-      }
+    const handleChange = () => {
+      const nextValue = checkboxInstanceList.reduce((result, checkboxInstance) => {
+        if (checkboxInstance.isChecked) {
+          result.push(checkboxInstance.label);
+        }
+        return result;
+      }, []);
       context.emit("update:modelValue", nextValue);
       context.emit("change", nextValue);
     };
     provide(checkboxGroupKey, {
       name: "CheckboxGroup",
       props,
-      state,
       register,
       unregister,
       handleChange
     });
     onMounted(() => {
-      checkboxInstanceList.forEach((checkboxContext) => {
-        if (checkboxContext.isChecked || checkboxContext.checked) {
-          state.localValue.push(checkboxContext.label);
+      const modelValue = props.modelValue || [];
+      checkboxInstanceList.forEach((checkboxInstance) => {
+        if (modelValue.includes(checkboxInstance.label)) {
+          checkboxInstance.setChecked(true);
         }
       });
     });
     return {};
   },
   render() {
+    var _a;
     return createVNode("div", {
       "class": "bk-checkbox-group"
-    }, [this.$slots.default()]);
+    }, [(_a = this.$slots) == null ? void 0 : _a.default()]);
   }
 });
-const BkCheckbox = withInstallProps(Component$o, { Group: CheckboxGroup });
+const BkCheckbox = withInstallProps(Component$o, { Group: BkCheckboxGroup });
 var Component$n = defineComponent({
   name: "Collapse",
   props: {
@@ -8915,7 +8914,7 @@ var Component$n = defineComponent({
       }
       if (props.activeName !== null && props.activeName !== void 0 && props.activeName !== "") {
         const activeNames = resolvePropsActiveValue(props.activeName);
-        return activeNames.map((name) => collapseData.value.findIndex((item) => item[props.idFiled] === name));
+        return activeNames.map((name2) => collapseData.value.findIndex((item) => item[props.idFiled] === name2));
       }
       return resolvePropsActiveValue((_a = props.activeIndex) != null ? _a : 0);
     });
@@ -8993,6 +8992,45 @@ const propsMixin$1 = {
   showMask: {
     type: Boolean,
     default: true
+  },
+  closeIcon: {
+    type: Boolean,
+    default: true
+  },
+  escClose: {
+    type: Boolean,
+    default: true
+  },
+  maskClose: {
+    type: Boolean,
+    default: true
+  },
+  fullscreen: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: "normal",
+    validator: (value) => {
+      const dialogSize = ["normal", "small", "medium", "large"];
+      if (dialogSize.indexOf(value) < 0) {
+        console.error(`dialogSize property is not valid: '${value}',\u3010${dialogSize.join(" | ")}\u3011`);
+        return false;
+      }
+      return true;
+    }
+  },
+  renderDirective: {
+    type: String,
+    default: "show",
+    validator: (value) => {
+      if (["show", "if"].indexOf(value) < 0) {
+        console.error(`type render-directive is not valid: '${value}'`);
+        return false;
+      }
+      return true;
+    }
   }
 };
 var Component$m = defineComponent({
@@ -9014,6 +9052,7 @@ var Component$m = defineComponent({
       return {
         width: this.dialogWidth,
         height: this.dialogHeight,
+        minHeigth: `${200}px`,
         display: this.visible ? "inherit" : "none"
       };
     }
@@ -9044,7 +9083,7 @@ var Component$m = defineComponent({
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     return createVNode("div", {
-      "class": ["bk-modal-wrapper", ...this.customClass],
+      "class": ["bk-modal-wrapper", this.size, this.customClass, this.fullscreen ? "bk-model-fullscreen" : ""],
       "style": this.compStyle
     }, [this.isShow ? createVNode("div", {
       "class": "bk-modal-body"
@@ -9058,7 +9097,7 @@ var Component$m = defineComponent({
   }
 });
 const BkModal = withInstallProps(Component$m, { propsMixin: propsMixin$1 }, true);
-function _isSlot$3(s2) {
+function _isSlot$4(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
 var Component$l = defineComponent({
@@ -9068,6 +9107,14 @@ var Component$l = defineComponent({
     BkButton
   },
   props: __spreadProps(__spreadValues({}, propsMixin$1), {
+    width: {
+      type: [Number, String],
+      default: null
+    },
+    height: {
+      type: [Number, String],
+      default: null
+    },
     confirmText: {
       type: String,
       default: "\u786E\u5B9A"
@@ -9103,30 +9150,62 @@ var Component$l = defineComponent({
         }
         return true;
       }
+    },
+    theme: {
+      type: String,
+      default: "primary",
+      validator: (value) => {
+        if (["primary", "warning", "success", "danger"].indexOf(value) < 0) {
+          console.error(`theme property is not valid: '${value}'`);
+          return false;
+        }
+        return true;
+      }
     }
   }),
-  emits: ["closed", "update:isShow"],
+  emits: ["closed", "update:isShow", "confirm"],
+  mounted() {
+    if (this.escClose) {
+      addEventListener("keydown", this.escCloseHandler);
+    }
+  },
+  beforeDestory() {
+    if (this.escClose) {
+      removeEventListener("keydown", this.escCloseHandler);
+    }
+  },
   methods: {
     handleClose() {
       this.$emit("update:isShow", false);
       this.$emit("closed");
+    },
+    handleConfirm() {
+      this.$emit("update:isShow", false);
+      this.$emit("confirm");
+    },
+    escCloseHandler(e) {
+      if (this.isShow && this.closeIcon) {
+        if (e.keyCode === 27) {
+          this.handleClose();
+        }
+      }
     }
   },
   render() {
     const dialogSlot = {
       header: () => {
         var _a, _b, _c;
-        return createVNode(Fragment, null, [createVNode("div", {
+        return [createVNode("div", {
           "class": "bk-dialog-tool"
         }, [createVNode("span", {
-          "class": "bk-dialog-close",
+          "class": ["bk-dialog-close", this.closeIcon ? "" : "close-icon"],
           "onClick": this.handleClose
         }, [createTextVNode("+")])]), createVNode("div", {
           "class": "bk-dialog-header"
         }, [createVNode("span", {
           "class": "bk-dialog-title",
           "style": `text-align: ${this.headerAlign}`
-        }, [(_c = (_b = (_a = this.$slots).header) == null ? void 0 : _b.call(_a)) != null ? _c : this.title])])]);
+        }, [(_c = (_b = (_a = this.$slots).header) == null ? void 0 : _b.call(_a)) != null ? _c : this.title])])];
       },
       default: () => {
         var _a, _b, _c;
@@ -9138,11 +9217,12 @@ var Component$l = defineComponent({
           "class": "bk-dialog-footer",
           "style": `text-align: ${this.footerAlign}`
         }, [(_c = (_b = (_a = this.$slots).footer) == null ? void 0 : _b.call(_a)) != null ? _c : createVNode(Fragment, null, [createVNode(BkButton, {
-          "onClick": this.handleClose,
-          "theme": "primary"
+          "onClick": this.handleConfirm,
+          "theme": this.theme
         }, {
           default: () => [this.confirmText]
         }), createVNode(BkButton, {
+          "style": "margin-left: 8px;",
           "onClick": this.handleClose
         }, {
           default: () => [this.cancelText]
@@ -9152,7 +9232,7 @@ var Component$l = defineComponent({
     const className = `bk-dialog-wrapper ${this.scrollable ? "scroll-able" : ""}`;
     return createVNode(BkModal, mergeProps(this.$props, {
       "class": className
-    }), _isSlot$3(dialogSlot) ? dialogSlot : {
+    }), _isSlot$4(dialogSlot) ? dialogSlot : {
       default: () => [dialogSlot]
     });
   }
@@ -9384,8 +9464,8 @@ var Component$i = defineComponent({
       const newVal = handleNumber(props.step, false);
       ctx.emit(EventEnum["update:modelValue"], newVal);
     }
-    function getCls(name) {
-      return `${inputClsPrefix.value}--${name}`;
+    function getCls(name2) {
+      return `${inputClsPrefix.value}--${name2}`;
     }
     function handleVisibleChange() {
       pwdVisible.value = !pwdVisible.value;
@@ -9483,8 +9563,12 @@ var Component$h = defineComponent({
 });
 const BkLink = withInstall(Component$h);
 const placements = ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
-const PopoverProps = {
-  isShow: PropTypes.bool,
+const EventProps$1 = {
+  onAfterHidden: Function,
+  onAfterShow: Function
+};
+const PopoverProps = __spreadValues({
+  isShow: PropTypes.bool.def(false),
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def("auto"),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def("auto"),
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(""),
@@ -9507,11 +9591,20 @@ const PopoverProps = {
     }
   ]),
   boundary: PropTypes.oneOfType([PropTypes.string.def("parent"), PropTypes.instanceOf(HTMLElement)]),
-  fixOnBoundary: PropTypes.bool.def(false)
-};
+  fixOnBoundary: PropTypes.bool.def(false),
+  stopBehaviors: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.commonType([
+      "stopPropagation",
+      "stopImmediatePropagation",
+      "preventDefault"
+    ], "stopBehaviors")),
+    PropTypes.string
+  ]).def([])
+}, EventProps$1);
 var Component$g = defineComponent({
   name: "Popover",
   props: PopoverProps,
+  emits: ["afterHidden", "afterShow", "update:isShow"],
   setup(props, ctx) {
     let isPopInstance = false;
     let popoverInstance = /* @__PURE__ */ Object.create(null);
@@ -9544,22 +9637,24 @@ var Component$g = defineComponent({
         customThemes
       };
     });
-    const handleManualShow = (val) => {
+    const handlePopShow = (val) => {
       var _a, _b;
-      if (trigger.value === "manual" && isPopInstance) {
+      if (isPopInstance) {
         val ? (_a = popoverInstance.show) == null ? void 0 : _a.call(popoverInstance) : (_b = popoverInstance.hide) == null ? void 0 : _b.call(popoverInstance);
       }
     };
     watch(() => props.isShow, (val) => {
-      handleManualShow(val);
+      handlePopShow(val);
     }, {
       immediate: true
     });
     const handleClose = () => {
       ctx.emit("update:isShow", false);
+      ctx.emit("afterHidden", false);
     };
     const handleShown = () => {
       ctx.emit("update:isShow", true);
+      ctx.emit("afterShow", false);
     };
     const getOptions = () => ({
       theme: compTheme.value.systemThemes.join(" "),
@@ -9583,7 +9678,7 @@ var Component$g = defineComponent({
     const initPopInstance = () => {
       popoverInstance = new BKPopover(reference2.value, refContent.value, getOptions());
       isPopInstance = true;
-      handleManualShow(isShow.value);
+      handlePopShow(isShow.value);
     };
     const update = () => {
       destroyPopInstance();
@@ -9605,6 +9700,19 @@ var Component$g = defineComponent({
       [`data-${cur}-theme`]: true
     }, out), {});
     const contentClass = `bk-popover-content ${customThemeCls}`;
+    const handleClickContent = (e) => {
+      const stopBehaviorFn = (behavior) => {
+        if (typeof e[behavior] === "function") {
+          e[behavior]();
+        }
+      };
+      if (Array.isArray(props.stopBehaviors)) {
+        props.stopBehaviors.forEach(stopBehaviorFn);
+      }
+      if (typeof props.stopBehaviors === "string") {
+        stopBehaviorFn(props.stopBehaviors);
+      }
+    };
     return () => {
       var _a, _b;
       return createVNode("div", {
@@ -9624,7 +9732,9 @@ var Component$g = defineComponent({
             "ref": refContent,
             "class": contentClass,
             "style": compStyle.value
-          }, customTheme), [(_c = (_b2 = (_a2 = ctx.slots).content) == null ? void 0 : _b2.call(_a2)) != null ? _c : content.value, arrow2.value && createVNode("div", {
+          }, customTheme, {
+            "onClick": handleClickContent
+          }), [(_c = (_b2 = (_a2 = ctx.slots).content) == null ? void 0 : _b2.call(_a2)) != null ? _c : content.value, arrow2.value && createVNode("div", {
             "class": "arrow",
             "data-popper-arrow": true
           }, null)])];
@@ -9753,7 +9863,7 @@ const Line = (_2, {
     "style": titleStyle
   }, [showDefault()])])]), showDefault(false)]);
 };
-function _isSlot$2(s2) {
+function _isSlot$3(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
 var Component$f = defineComponent({
@@ -9818,11 +9928,11 @@ var Component$f = defineComponent({
     const $props = __spreadProps(__spreadValues({}, this.$props), {
       percent: this.validPercent(this.percent)
     });
-    let progress2 = createVNode(Line, $props, _isSlot$2(progressInfo) ? progressInfo : {
+    let progress2 = createVNode(Line, $props, _isSlot$3(progressInfo) ? progressInfo : {
       default: () => [progressInfo]
     });
     if (this.type === "circle" || this.type === "dashboard") {
-      progress2 = createVNode(Circle, $props, _isSlot$2(progressInfo) ? progressInfo : {
+      progress2 = createVNode(Circle, $props, _isSlot$3(progressInfo) ? progressInfo : {
         default: () => [progressInfo]
       });
     }
@@ -9837,70 +9947,88 @@ var Component$f = defineComponent({
 const BkProgress = withInstall(Component$f);
 const radioGroupKey = Symbol("RadioGroup");
 function useFocus$1() {
-  const isFocus = ref(false);
+  const isFocused = ref(false);
   const blur = () => {
-    isFocus.value = false;
+    isFocused.value = false;
   };
   const focus = () => {
-    isFocus.value = true;
+    isFocused.value = true;
   };
   return [
-    isFocus,
+    isFocused,
     {
       blur,
       focus
     }
   ];
 }
-function useRadio() {
+const useRadio = () => {
+  const currentInstance = getCurrentInstance();
   const {
     props,
     emit
-  } = getCurrentInstance();
+  } = currentInstance;
   const radioGroup = inject(radioGroupKey, EMPTY_OBJ);
   const isGroup = !isEmptyObj(radioGroup);
-  const state = reactive({
-    isLocalChecked: props.checked
-  });
-  const isCheck = computed(() => {
-    if (isGroup) {
-      return radioGroup.state.localValue === props.label;
-    }
-    if (props.modelValue !== "") {
-      return props.modelValue === props.label;
-    }
-    return state.isLocalChecked;
-  });
-  state.isLocalChecked = isCheck.value;
+  const isChecked = ref(props.checked);
   const isDisabled = computed(() => {
     if (isGroup && radioGroup.props.disabled) {
       return true;
     }
     return props.disabled;
   });
-  const name = computed(() => {
-    if (isGroup && radioGroup.props.name) {
-      return radioGroup.props.name;
-    }
-    return props.name;
-  });
-  const handlerChange = () => {
+  if (isGroup) {
+    watch(() => radioGroup.props.modelValue, (modelValue) => {
+      isChecked.value = modelValue === props.label;
+    });
+  } else {
+    watch(() => props.modelValue, (modelValue) => {
+      if (modelValue === "") {
+        return;
+      }
+      isChecked.value = modelValue === props.label;
+    }, {
+      immediate: true
+    });
+  }
+  const setChecked = (value = true) => {
+    isChecked.value = value;
+  };
+  const handleChange = (event) => {
     if (isDisabled.value) {
       return;
     }
-    emit("change", props.label);
-    emit("update:modelValue", props.label);
+    const $targetInput = event.target;
+    isChecked.value = $targetInput.checked;
+    const nextValue = isChecked.value ? props.label : "";
+    emit("change", nextValue);
+    emit("update:modelValue", nextValue);
     if (isGroup) {
-      radioGroup.handleChange(props.label);
+      radioGroup.handleChange(currentInstance.proxy);
     }
+    nextTick(() => {
+      if ($targetInput.checked !== isChecked.value) {
+        $targetInput.checked = isChecked.value;
+      }
+    });
   };
+  onMounted(() => {
+    if (isGroup) {
+      radioGroup.register(currentInstance.proxy);
+    }
+  });
+  onBeforeUnmount(() => {
+    if (isGroup) {
+      radioGroup.unregister(currentInstance.proxy);
+    }
+  });
   return {
-    name,
-    isCheck,
+    isChecked,
     isDisabled,
-    handlerChange
+    setChecked,
+    handleChange
   };
-}
+};
 const radioProps = {
   name: PropTypes.string.def(""),
   label: PropTypes.oneOfType([String, Number, Boolean]).isRequired,
@@ -9913,32 +10041,32 @@ var Component$e = defineComponent({
   props: radioProps,
   emits: ["change", "update:modelValue"],
   setup() {
-    const [isFocus, {
+    const [isFocused, {
       blur: handleBlur,
       focus: handleFocus
     }] = useFocus$1();
     const {
-      name,
-      isCheck,
+      isChecked,
       isDisabled,
-      handlerChange
+      setChecked,
+      handleChange
     } = useRadio();
     return {
-      isFocus,
-      realName: name,
-      isCheck,
+      isFocused,
+      isChecked,
       isDisabled,
+      setChecked,
       handleBlur,
       handleFocus,
-      handlerChange
+      handleChange
     };
   },
   render() {
     const radioClass = classes({
       "bk-radio": true,
-      "is-focusd": this.isFocus,
+      "is-focused": this.isFocused,
       "is-disabled": this.isDisabled,
-      "is-checked": this.isCheck
+      "is-checked": this.isChecked
     });
     return createVNode("label", {
       "class": radioClass,
@@ -9947,13 +10075,12 @@ var Component$e = defineComponent({
       "class": "bk-radio-input",
       "type": "radio",
       "tabindex": "0",
-      "name": this.realName,
       "value": this.label,
-      "checked": this.isCheck,
+      "checked": this.isChecked,
       "disabled": this.isDisabled,
       "onFocus": this.handleFocus,
       "onBlur": this.handleBlur,
-      "onChange": this.handlerChange
+      "onChange": this.handleChange
     }, null), createVNode("span", {
       "class": "bk-radio-text"
     }, [this.$slots.default ? this.$slots.default() : this.label])]);
@@ -9972,32 +10099,33 @@ var RadioButton = defineComponent({
   props: radioButtonProps,
   emits: ["change", "update:modelValue"],
   setup() {
-    const [isFocus, {
+    const [isFocused, {
       blur: handleBlur,
       focus: handleFocus
     }] = useFocus$1();
     const {
-      name,
-      isCheck,
+      isChecked,
       isDisabled,
-      handlerChange
+      setChecked,
+      handleChange
     } = useRadio();
     return {
-      isFocus,
+      isFocused,
       realName: name,
-      isCheck,
+      isChecked,
       isDisabled,
+      setChecked,
       handleBlur,
       handleFocus,
-      handlerChange
+      handleChange
     };
   },
   render() {
     const radioClass = classes({
       "bk-radio-button": true,
-      "is-focusd": this.isFocus,
+      "is-focused": this.isFocused,
       "is-disabled": this.isDisabled,
-      "is-checked": this.isCheck
+      "is-checked": this.isChecked
     });
     return createVNode("label", {
       "class": radioClass,
@@ -10006,13 +10134,12 @@ var RadioButton = defineComponent({
       "class": "bk-radio-button-input",
       "type": "radio",
       "tabindex": "0",
-      "name": this.realName,
       "value": this.label,
-      "checked": this.isCheck,
+      "checked": this.isChecked,
       "disabled": this.isDisabled,
       "onFocus": this.handleFocus,
       "onBlur": this.handleBlur,
-      "onChange": this.handlerChange
+      "onChange": this.handleChange
     }, null), createVNode("div", {
       "class": "bk-radio-button-text"
     }, [this.$slots.default ? this.$slots.default() : this.label])]);
@@ -10028,21 +10155,40 @@ var RadioGroup = defineComponent({
   props: radioGroupProps,
   emits: ["change", "update:modelValue"],
   setup(props, context) {
-    const state = reactive({
-      localValue: props.modelValue
-    });
-    watch(() => props.modelValue, () => {
-      state.localValue = props.modelValue;
-    });
-    const handleChange = (value) => {
-      context.emit("update:modelValue", value);
-      context.emit("change", value);
+    const radioInstanceList = [];
+    const register = (radioContext) => {
+      radioInstanceList.push(radioContext);
+    };
+    const unregister = (radioContext) => {
+      const index = radioInstanceList.indexOf(radioContext);
+      if (index > -1) {
+        radioInstanceList.splice(index, 1);
+      }
+    };
+    const handleChange = (checkedRadioInstance) => {
+      const nextValue = checkedRadioInstance.label;
+      radioInstanceList.forEach((radioInstance) => {
+        if (radioInstance !== checkedRadioInstance) {
+          radioInstance.setChecked(false);
+        }
+      });
+      context.emit("update:modelValue", nextValue);
+      context.emit("change", nextValue);
     };
     provide(radioGroupKey, {
       props,
-      state,
+      register,
+      unregister,
       handleChange
     });
+    onMounted(() => {
+      if (props.modelValue === "") {
+        return;
+      }
+      radioInstanceList.forEach((radioInstance) => {
+        radioInstance.setChecked(radioInstance.label === props.modelValue);
+      });
+    });
     return {};
   },
   render() {
@@ -10175,7 +10321,7 @@ var Component$d = defineComponent({
       "onChooseRate": chooseRate,
       "onChangeHover": changeHover,
       "onMouseleave": () => changeHover(0)
-    }, commonAttrs), null) : createVNode(Fragment, null, [createVNode(star, mergeProps({
+    }, commonAttrs), null) : [createVNode(star, mergeProps({
       "rate": 5,
       "style": starStyle.value,
       "class": "bk-score-real",
@@ -10183,7 +10329,7 @@ var Component$d = defineComponent({
     }, commonAttrs), null), createVNode(star, mergeProps({
       "rate": 0,
       "editable": false
-    }, commonAttrs), null)])]);
+    }, commonAttrs), null)]]);
   }
 });
 const BkRate = withInstall(Component$d);
@@ -11414,7 +11560,7 @@ var Component$a = defineComponent({
   }
 });
 const BkSelect = withInstallProps(Component$a, { Option: BkOption, Group: OptionGroup });
-function _isSlot$1(s2) {
+function _isSlot$2(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
 const {
@@ -11454,14 +11600,14 @@ var Component$9 = defineComponent({
     const dialogSlot = {
       header: () => {
         var _a, _b, _c;
-        return createVNode(Fragment, null, [createVNode("div", {
+        return [createVNode("div", {
           "class": "bk-sideslider-header"
         }, [createVNode("span", {
           "class": `bk-sideslider-close ${this.direction}`,
           "onClick": this.handleClose
         }, null), createVNode("span", {
           "class": `bk-sideslider-title ${this.direction}`
-        }, [(_c = (_b = (_a = this.$slots).header) == null ? void 0 : _b.call(_a)) != null ? _c : "Header"])])]);
+        }, [(_c = (_b = (_a = this.$slots).header) == null ? void 0 : _b.call(_a)) != null ? _c : "Header"])])];
       },
       default: () => {
         var _a, _b, _c;
@@ -11475,7 +11621,7 @@ var Component$9 = defineComponent({
     return createVNode(BkModal, mergeProps(this.$props, {
       "class": className,
       "style": `${this.direction}: 0`
-    }), _isSlot$1(dialogSlot) ? dialogSlot : {
+    }), _isSlot$2(dialogSlot) ? dialogSlot : {
       default: () => [dialogSlot]
     });
   }
@@ -11990,11 +12136,14 @@ const tableProps = {
     field: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")]),
     render: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")]),
     width: PropTypes.oneOfType([PropTypes.number.def(void 0), PropTypes.string.def("auto")]),
-    type: PropTypes.commonType(["selection", "index", "expand"], "columnType").def(""),
+    type: PropTypes.commonType(["selection", "index", "expand", "none"], "columnType").def("none"),
     sort: PropTypes.oneOfType([PropTypes.shape({
-      sortby: PropTypes.string.def(""),
       sortFn: PropTypes.func.def(null),
       sortScope: PropTypes.commonType(Object.values(SortScope)).def("current")
+    }), PropTypes.bool]).def(false),
+    filter: PropTypes.oneOfType([PropTypes.shape({
+      list: PropTypes.arrayOf(PropTypes.any).def([]),
+      filterFn: PropTypes.func.def(null)
     }), PropTypes.bool]).def(false)
   })),
   activeColumn: PropTypes.oneOfType([PropTypes.number.def(-1), PropTypes.arrayOf(PropTypes.number.def(-1))]),
@@ -12014,7 +12163,7 @@ const tableProps = {
   pagination: PropTypes.oneOfType([PropTypes.bool.def(false), PropTypes.object.def({})]).def(false),
   remotePagination: PropTypes.bool.def(false)
 };
-function _isSlot(s2) {
+function _isSlot$1(s2) {
   return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
 }
 var useLimit = () => {
@@ -12059,7 +12208,7 @@ var useLimit = () => {
       "modelValue": localLimit.value,
       "onChange": handleLimitChange,
       "disabled": proxy.disabled
-    }, _isSlot(_slot = proxy.limitList.map((num, index) => createVNode(BkOption, {
+    }, _isSlot$1(_slot = proxy.limitList.map((num, index) => createVNode(BkOption, {
       "value": num,
       "label": num,
       "key": `${index}_${num}`
@@ -12459,14 +12608,6 @@ var Component$5 = defineComponent({
   }
 });
 const BkPagination = withInstall(Component$5);
-class TablePlugins {
-  constructor(props, ctx) {
-    __publicField(this, "props", null);
-    __publicField(this, "ctx", null);
-    this.props = props;
-    this.ctx = ctx;
-  }
-}
 const resolvePropVal = (prop, key, args) => {
   if (Object.prototype.hasOwnProperty.call(prop, key)) {
     if (typeof prop[key] === "function") {
@@ -12611,15 +12752,179 @@ const resolveHeadConfig = (props) => {
     height: headHeight
   }, __spreadValues({}, thead));
 };
+const getRowText = (row, key, column) => {
+  if (column.type === "index") {
+    return row.__$table_row_index;
+  }
+  return row[key];
+};
+function _isSlot(s2) {
+  return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
+}
+var HeadFilter = defineComponent({
+  name: "HeadFilter",
+  props: {
+    column: PropTypes.any.def({}),
+    height: PropTypes.number.def(40)
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const {
+      column
+    } = props;
+    const isShow = ref(false);
+    const state = reactive({
+      isOpen: false,
+      checked: []
+    });
+    const headClass = computed(() => classes({
+      [resolveClassName("table-head-action")]: true,
+      "column-filter": true,
+      "--row-height": `${props.height}px`,
+      active: state.checked.length,
+      opened: state.isOpen
+    }));
+    const headFilterContentClass = classes({
+      [resolveClassName("table-head-filter")]: true
+    });
+    const handlePopShow = (isOpen) => {
+      state.isOpen = isOpen;
+    };
+    const modifiers = [{
+      name: "offset",
+      options: {
+        offset: [0, 0]
+      }
+    }];
+    const theme = `light ${resolveClassName("table-head-filter")}`;
+    const localData = computed(() => {
+      const {
+        list = []
+      } = column.filter;
+      return list.map((item) => __spreadProps(__spreadValues({}, item), {
+        checked: state.checked.includes(item.value)
+      }));
+    });
+    const filterFn = typeof column.filter.filterFn === "function" ? (checked, row, index, data2) => column.filter.filterFn(checked, row, props.column, index, data2) : (checked, row) => checked.length ? checked.includes(getRowText(row, resolvePropVal(column, "field", [column, row]), column)) : true;
+    const handleBtnSaveClick = () => {
+      emit("change", [...state.checked], filterFn);
+      isShow.value = false;
+    };
+    const handleBtnResetClick = () => {
+      if (state.checked.length) {
+        state.checked.splice(0, state.checked.length);
+      }
+    };
+    return () => createVNode(BkPopover, mergeProps({
+      "trigger": "click",
+      "isShow": isShow.value,
+      "placement": "bottom-end",
+      "stopBehaviors": ["stopPropagation"],
+      "arrow": false
+    }, {
+      modifiers,
+      theme
+    }, {
+      "boundary": document.body,
+      "onAfterShow": () => handlePopShow(true),
+      "onAfterHidden": () => handlePopShow(false)
+    }), {
+      default: () => createVNode(angleDownLine, {
+        "class": headClass.value,
+        "onClick": () => isShow.value = true
+      }, null),
+      content: () => {
+        let _slot;
+        return createVNode("div", {
+          "class": headFilterContentClass
+        }, [createVNode(BkCheckboxGroup, {
+          "class": "content-list",
+          "modelValue": state.checked,
+          "onUpdate:modelValue": ($event) => state.checked = $event
+        }, _isSlot(_slot = localData.value.map((item) => createVNode("div", {
+          "class": "list-item"
+        }, [createVNode(BkCheckbox, {
+          "label": item.value
+        }, {
+          default: () => [item.text]
+        })]))) ? _slot : {
+          default: () => [_slot]
+        }), createVNode("div", {
+          "class": "content-footer"
+        }, [createVNode("span", {
+          "class": "btn-filter-save",
+          "onClick": handleBtnSaveClick
+        }, [createTextVNode("\u786E\u5B9A")]), createVNode("span", {
+          "class": "btn-filter-split"
+        }, null), createVNode("span", {
+          "class": ["btn-filter-reset", state.checked.length ? "" : "disable"],
+          "onClick": handleBtnResetClick
+        }, [createTextVNode("\u91CD\u7F6E")])])]);
+      }
+    });
+  }
+});
+var SortType = /* @__PURE__ */ ((SortType2) => {
+  SortType2["ASC"] = "asc";
+  SortType2["DESC"] = "desc";
+  return SortType2;
+})(SortType || {});
+var HeadSort = defineComponent({
+  name: "HeadSort",
+  props: {
+    column: PropTypes.any.def({})
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const sortType = ref("");
+    const hanldeSortClick = (e, type) => {
+      var _a, _b;
+      e.stopImmediatePropagation();
+      e.stopPropagation();
+      e.preventDefault();
+      sortType.value = type;
+      const fieldName = props.column.field;
+      const getVal = (row) => getRowText(row, fieldName, props.column);
+      const sortFn0 = (a2, b2) => {
+        const val0 = getVal(a2);
+        const val1 = getVal(b2);
+        if (typeof val0 === "number" && typeof val1 === "number") {
+          return val0 - val1;
+        }
+        return String.prototype.localeCompare.call(val0, val1);
+      };
+      const sortFn = typeof ((_a = props.column.sort) == null ? void 0 : _a.sortFn) === "function" ? (_b = props.column.sort) == null ? void 0 : _b.sortFn : sortFn0;
+      const execFn = (_a2, _b2) => sortFn(_a2, _b2) * (type === SortType.DESC ? -1 : 1);
+      emit("change", execFn, type);
+    };
+    return () => createVNode("span", {
+      "class": resolveClassName("head-cell-sort")
+    }, [createVNode(angleDownFill, {
+      "class": ["sort-action", "sort-asc", sortType.value === SortType.ASC ? "active" : ""],
+      "onClick": (e) => hanldeSortClick(e, SortType.ASC)
+    }, null), createVNode(angleUpFill, {
+      "class": ["sort-action", "sort-desc", sortType.value === SortType.DESC ? "active" : ""],
+      "onClick": (e) => hanldeSortClick(e, SortType.DESC)
+    }, null)]);
+  }
+});
+class TablePlugins {
+  constructor(props, ctx) {
+    __publicField(this, "props", null);
+    __publicField(this, "ctx", null);
+    this.props = props;
+    this.ctx = ctx;
+  }
+}
 let EVENTS;
 (function(EVENTS2) {
   EVENTS2["ON_SORT_BY_CLICK"] = "onSortByClick";
+  EVENTS2["ON_FILTER_CLICK"] = "onFilterClick";
 })(EVENTS || (EVENTS = {}));
-let SortType;
-(function(SortType2) {
-  SortType2["ASC"] = "asc";
-  SortType2["DESC"] = "desc";
-})(SortType || (SortType = {}));
 class TableRender {
   constructor(props, ctx, reactiveProp, colgroups) {
     __publicField(this, "getColumnClass", (colIndex) => `${this.uuid}-column-${colIndex}`);
@@ -12711,6 +13016,36 @@ class TableRender {
       this.context.emit("column-pick", this.propActiveCols);
     }
   }
+  getSortCell(column, index) {
+    const hanldeSortClick = (sortFn, type) => {
+      this.emitEvent(EVENTS.ON_SORT_BY_CLICK, [{
+        sortFn,
+        column,
+        index,
+        type
+      }]);
+    };
+    return createVNode(HeadSort, {
+      "column": column,
+      "onChange": hanldeSortClick
+    }, null);
+  }
+  getFilterCell(column, index) {
+    const handleFilterChange = (checked, filterFn) => {
+      const filterFn0 = (row, index2) => filterFn(checked, row, index2);
+      this.emitEvent(EVENTS.ON_FILTER_CLICK, [{
+        filterFn: filterFn0,
+        checked,
+        column,
+        index
+      }]);
+    };
+    return createVNode(HeadFilter, {
+      "column": column,
+      "height": this.props.headHeight,
+      "onChange": handleFilterChange
+    }, null);
+  }
   renderHeader() {
     const config = resolveHeadConfig(this.props);
     const {
@@ -12719,47 +13054,13 @@ class TableRender {
     const rowStyle = {
       "--row-height": `${resolvePropVal(config, "height", ["thead"])}px`
     };
-    const hanldeSortClick = (e, column, index, type) => {
-      var _a, _b;
-      e.stopImmediatePropagation();
-      e.stopPropagation();
-      e.preventDefault();
-      const fieldName = column.field;
-      const getVal = (row) => this.getRowText(row, fieldName, column);
-      const sortFn0 = (a2, b2) => {
-        const val0 = getVal(a2);
-        const val1 = getVal(b2);
-        if (typeof val0 === "number" && typeof val1 === "number") {
-          return val0 - val1;
-        }
-        return String.prototype.localeCompare.call(val0, val1);
-      };
-      Object.assign(column, {
-        _sort_reg: type
-      });
-      const sortFn = typeof ((_a = column.sort) == null ? void 0 : _a.sortFn) === "function" ? (_b = column.sort) == null ? void 0 : _b.sortFn : sortFn0;
-      const execFn = (_a2, _b2) => sortFn(_a2, _b2) * (type === SortType.DESC ? -1 : 1);
-      this.emitEvent(EVENTS.ON_SORT_BY_CLICK, [{
-        sortFn: execFn,
-        column,
-        index,
-        type
-      }]);
-    };
     const renderHeadCell = (column, index) => {
       const cells = [];
       if (column.sort) {
-        const sortReg = column["_sort_reg"];
-        const sortCell = createVNode("span", {
-          "class": "head-cell-sort"
-        }, [createVNode(angleDownFill, {
-          "class": ["sort-action", "sort-asc", sortReg === SortType.ASC ? "active" : ""],
-          "onClick": (e) => hanldeSortClick(e, column, index, SortType.ASC)
-        }, null), createVNode(angleUpFill, {
-          "class": ["sort-action", "sort-desc", sortReg === SortType.DESC ? "active" : ""],
-          "onClick": (e) => hanldeSortClick(e, column, index, SortType.DESC)
-        }, null)]);
-        cells.push(sortCell);
+        cells.push(this.getSortCell(column, index));
+      }
+      if (column.filter) {
+        cells.push(this.getFilterCell(column, index));
       }
       if (typeof cellFn === "function") {
         cells.unshift(cellFn(column, index));
@@ -12805,14 +13106,8 @@ class TableRender {
   handleRowDblClick(e, row, index, rows) {
     this.context.emit("rowDblClick", e, row, index, rows, this);
   }
-  getRowText(row, key, column) {
-    if (column.type === "index") {
-      return row.__$table_row_index;
-    }
-    return row[key];
-  }
   renderCell(row, column, index, rows) {
-    const cell = this.getRowText(row, resolvePropVal(column, "field", [column, row]), column);
+    const cell = getRowText(row, resolvePropVal(column, "field", [column, row]), column);
     if (typeof column.render === "function") {
       return column.render(cell, row, index, rows);
     }
@@ -12846,6 +13141,7 @@ var Component$4 = defineComponent({
     const startIndex = ref(0);
     const endIndex = ref(0);
     let columnSortFn = null;
+    let columnFilterFn = null;
     let pagination2 = reactive({
       count: 0,
       limit: 10,
@@ -12890,13 +13186,20 @@ var Component$4 = defineComponent({
       __$table_row_index: index + 1
     })));
     const pageData = reactive([]);
-    watchEffect(() => {
-      pagination2 = resolvePaginationOption(props.pagination, pagination2);
-      resetStartEndIndex();
+    const resolvePageData = () => {
       pageData.splice(0, pageData.length, ...indexData.value.slice(startIndex.value, endIndex.value));
+      if (typeof columnFilterFn === "function") {
+        const filterVals = pageData.filter((row, index) => columnFilterFn(row, index, props.data));
+        pageData.splice(0, pageData.length, ...filterVals);
+      }
       if (typeof columnSortFn === "function") {
         pageData.sort(columnSortFn);
       }
+    };
+    watchEffect(() => {
+      pagination2 = resolvePaginationOption(props.pagination, pagination2);
+      resetStartEndIndex();
+      resolvePageData();
     });
     const tableRender = new TableRender(props, ctx, reactiveProp, colgroups);
     tableRender.on(EVENTS.ON_SORT_BY_CLICK, (args) => {
@@ -12905,6 +13208,12 @@ var Component$4 = defineComponent({
       } = args;
       columnSortFn = sortFn;
       pageData.sort(columnSortFn);
+    }).on(EVENTS.ON_FILTER_CLICK, (args) => {
+      const {
+        filterFn
+      } = args;
+      columnFilterFn = filterFn;
+      resolvePageData();
     });
     const wrapperStyle = computed(() => ({
       minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
@@ -13960,11 +14269,11 @@ const tabNavEventProps = {
   },
   tabChange: {
     type: Function,
-    default: (name) => name
+    default: (name2) => name2
   },
   tabRemove: {
     type: Function,
-    default: (name) => name
+    default: (name2) => name2
   },
   tabSort: {
     type: Function,
@@ -14032,7 +14341,7 @@ var TabNav = defineComponent({
           return null;
         }
         const {
-          name,
+          name: name2,
           label,
           closable,
           visible,
@@ -14042,7 +14351,7 @@ var TabNav = defineComponent({
         if (!visible) {
           return false;
         }
-        if (props.active === name) {
+        if (props.active === name2) {
           hasFindActive = true;
         }
         const renderLabel = (label2) => {
@@ -14061,7 +14370,7 @@ var TabNav = defineComponent({
           return label2;
         };
         list.push({
-          name,
+          name: name2,
           closable,
           visible,
           disabled,
@@ -14117,8 +14426,8 @@ var TabNav = defineComponent({
       }
       this.tabSort(this.dragStartIndex, index, sortType);
     },
-    handleTabChange(name) {
-      this.tabChange(name);
+    handleTabChange(name2) {
+      this.tabChange(name2);
     },
     handleTabRemove(index, panel) {
       this.tabRemove(index, panel);
@@ -14142,7 +14451,7 @@ var TabNav = defineComponent({
         return null;
       }
       const {
-        name,
+        name: name2,
         disabled,
         tabLabel
       } = item;
@@ -14151,15 +14460,15 @@ var TabNav = defineComponent({
         if (disabled) {
           classNames.push("bk-tab-header--disabled");
         }
-        if (active === name) {
+        if (active === name2) {
           classNames.push("bk-tab-header--active");
         }
         return classNames.join(" ");
       };
       const getValue = (curentValue, parentValue) => curentValue || parentValue;
       return createVNode("div", {
-        "key": name,
-        "onClick": () => this.handleTabChange(name),
+        "key": name2,
+        "onClick": () => this.handleTabChange(name2),
         "draggable": getValue(item.sortable, sortable),
         "onDragstart": (e) => dragstart(index, e),
         "onDragenter": (e) => {
@@ -14306,10 +14615,10 @@ var Tab = defineComponent({
         e
       });
     },
-    tabChange(name) {
-      this.$emit("change", name);
-      this.$emit("tab-change", name);
-      this.$emit("update:active", name);
+    tabChange(name2) {
+      this.$emit("change", name2);
+      this.$emit("tab-change", name2);
+      this.$emit("update:active", name2);
     },
     tabRemove(index, panel) {
       this.$emit("remove", index, panel);
@@ -19957,6 +20266,76 @@ var Component = defineComponent({
   }
 });
 const BkTree = withInstall(Component);
+const isCustomComponent = (node) => node.__v_isVNode;
+var ComposeFormItem = defineComponent({
+  name: "ComposeFormItem",
+  props: {
+    headBackgroundColor: {
+      type: String,
+      default: "#FAFBFD"
+    },
+    tailBackgroundColor: String
+  },
+  render() {
+    if (!this.$slots.default) {
+      return null;
+    }
+    const childrenArr = this.$slots.default();
+    console.log("from render = ", childrenArr);
+    if (childrenArr.length > 1) {
+      const childrenLength = childrenArr.length;
+      let startIndex = 0;
+      let headChildren = null;
+      while (startIndex < childrenLength) {
+        if (isCustomComponent(childrenArr[startIndex])) {
+          headChildren = childrenArr[startIndex];
+          break;
+        }
+        startIndex = startIndex + 1;
+      }
+      let tailIndex = childrenLength - 1;
+      let tailChildren = null;
+      while (tailIndex >= 0 && tailIndex > startIndex) {
+        if (isCustomComponent(childrenArr[tailIndex])) {
+          tailChildren = childrenArr[tailIndex];
+          break;
+        }
+        tailIndex = tailIndex - 1;
+      }
+      if (headChildren && tailChildren) {
+        if (!headChildren.props) {
+          headChildren.props = {};
+        }
+        let headChildClass = "bk-compose-form-item-head";
+        if (headChildren.props.class) {
+          headChildClass += ` ${headChildren.props.class}`;
+        }
+        if (this.headBackgroundColor) {
+          headChildren.props.style = Object.assign(headChildren.props.style || {}, {
+            "background-color": this.headBackgroundColor
+          });
+        }
+        headChildren.props.class = headChildClass;
+        if (!tailChildren.props) {
+          tailChildren.props = {};
+        }
+        let tailChildStaticClass = "bk-compose-form-item-tail";
+        if (tailChildren.props.class) {
+          tailChildStaticClass += ` ${tailChildren.props.class}`;
+        }
+        if (this.tailBackgroundColor) {
+          tailChildren.props.style = Object.assign(tailChildren.props.style || {}, {
+            "background-color": this.tailBackgroundColor
+          });
+        }
+        tailChildren.props.class = tailChildStaticClass;
+      }
+    }
+    return h$1("div", {
+      class: "bk-compose-form-item"
+    }, childrenArr);
+  }
+});
 const formKey$1 = Symbol("form");
 const getFormKey = () => formKey$1;
 const formKey = getFormKey();
@@ -20251,7 +20630,7 @@ var FormItem = defineComponent({
     }, [this.$slots.error ? this.$slots.error(this.errorMessage) : this.errorMessage])])]);
   }
 });
-const BkForm = withInstallProps(Form, { FormItem });
+const BkForm = withInstallProps(Form, { FormItem, ComposeFormItem });
 var Dropdown = defineComponent({
   name: "BkDropdown",
   props: {
@@ -20383,7 +20762,7 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   ButtonGroup,
   Card: BkCard,
   Checkbox: BkCheckbox,
-  CheckboxGroup,
+  CheckboxGroup: BkCheckboxGroup,
   Collapse: BkCollaspe,
   Dialog: BkDialog,
   Exception: BkException,
@@ -20442,4 +20821,4 @@ var preset = {
   install: createInstall(),
   version: "0.0.1"
 };
-export { BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkOption, OptionGroup as BkOptionGroup, BkBreadcrumb as Breadcrumb, BreadcrumbItem, BkButton as Button, ButtonGroup, BkCard as Card, BkCheckbox as Checkbox, CheckboxGroup, BkCollaspe as Collapse, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkDropdown as Dropdown, DropdownItem, DropdownMenu, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, FormItem, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkPagination as Pagination, BkPopover as Popover, BkProgress as Progress, BkRadio as Radio, RadioButton, RadioGroup, BkRate as Rate, BkSelect as Select, BkSideslider as Sideslider, BkSteps as Steps, BkSwiper as Swiper, BkSwitcher as Switcher, BkTab as Tab, TabPanel, BkTable as Table, BkTag as Tag, TagInput, Transfer, BkTree as Tree, BkVirtualRender as VirtualRender, tooltips as bkTooltips, ClickOutside as clickoutside, preset as default, mousewheel };
+export { BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkOption, OptionGroup as BkOptionGroup, BkBreadcrumb as Breadcrumb, BreadcrumbItem, BkButton as Button, ButtonGroup, BkCard as Card, BkCheckbox as Checkbox, BkCheckboxGroup as CheckboxGroup, BkCollaspe as Collapse, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkDropdown as Dropdown, DropdownItem, DropdownMenu, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, FormItem, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkPagination as Pagination, BkPopover as Popover, BkProgress as Progress, BkRadio as Radio, RadioButton, RadioGroup, BkRate as Rate, BkSelect as Select, BkSideslider as Sideslider, BkSteps as Steps, BkSwiper as Swiper, BkSwitcher as Switcher, BkTab as Tab, TabPanel, BkTable as Table, BkTag as Tag, TagInput, Transfer, BkTree as Tree, BkVirtualRender as VirtualRender, tooltips as bkTooltips, ClickOutside as clickoutside, preset as default, mousewheel };