bkui-vue 0.0.1-beta.43 → 0.0.1-beta.46

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 = "";
@@ -2370,30 +2370,48 @@ 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$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":"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$w,
+    "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$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":"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$v,
+    "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"}}]}');
-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"}}]}');
-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$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$w,
+    "name": "angleDownFill"
+  }), null);
+};
+angleDownFill.displayName = "angleDownFill";
+angleDownFill.inheritAttrs = false;
+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);
@@ -2580,6 +2598,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"}}]}');
@@ -8501,13 +8520,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)]);
     };
   }
 });
@@ -8563,6 +8582,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 = () => {
@@ -8583,12 +8604,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)])]);
     };
@@ -8984,6 +9006,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({
@@ -9005,6 +9066,7 @@ var Component$m = defineComponent({
       return {
         width: this.dialogWidth,
         height: this.dialogHeight,
+        minHeigth: `${200}px`,
         display: this.visible ? "inherit" : "none"
       };
     }
@@ -9035,7 +9097,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"
@@ -9059,6 +9121,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"
@@ -9094,30 +9164,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;
@@ -9129,11 +9231,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]
@@ -9474,8 +9577,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(""),
@@ -9498,11 +9605,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);
@@ -9535,22 +9651,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(" "),
@@ -9574,7 +9692,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();
@@ -9596,6 +9714,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", {
@@ -9615,7 +9746,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)])];
@@ -10166,7 +10299,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",
@@ -10174,7 +10307,7 @@ var Component$d = defineComponent({
     }, commonAttrs), null), createVNode(star, mergeProps({
       "rate": 0,
       "editable": false
-    }, commonAttrs), null)])]);
+    }, commonAttrs), null)]]);
   }
 });
 const BkRate = withInstall(Component$d);
@@ -11445,14 +11578,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;
@@ -11969,13 +12102,27 @@ var Component$6 = defineComponent({
 });
 const BkVirtualRender = withInstall(Component$6);
 const BORDER_OPRIONS = ["none", "row", "col", "outer"];
+var SortScope = /* @__PURE__ */ ((SortScope2) => {
+  SortScope2["CURRENT"] = "current";
+  SortScope2["ALL"] = "all";
+  return SortScope2;
+})(SortScope || {});
 const tableProps = {
   data: PropTypes.arrayOf(PropTypes.any).def([]),
   columns: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")]),
     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")])
+    width: PropTypes.oneOfType([PropTypes.number.def(void 0), PropTypes.string.def("auto")]),
+    type: PropTypes.commonType(["selection", "index", "expand", "none"], "columnType").def("none"),
+    sort: PropTypes.oneOfType([PropTypes.shape({
+      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))]),
   columnPick: PropTypes.commonType(["multi", "single", "disabled"], "columnPick").def("disabled"),
@@ -11984,6 +12131,11 @@ const tableProps = {
   rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).def(40),
   headHeight: PropTypes.number.def(40),
   showHead: PropTypes.bool.def(true),
+  thead: PropTypes.shape({
+    height: PropTypes.number.def(40),
+    isShow: PropTypes.bool.def(true),
+    cellFn: PropTypes.func.def(null)
+  }),
   virtualEnabled: PropTypes.bool.def(false),
   border: PropTypes.arrayOf(PropTypes.commonType(BORDER_OPRIONS, "border")).def(["row"]),
   pagination: PropTypes.oneOfType([PropTypes.bool.def(false), PropTypes.object.def({})]).def(false),
@@ -12434,14 +12586,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") {
@@ -12575,6 +12719,195 @@ const resolvePaginationOption = (propPagination, defVal) => {
   }
   return {};
 };
+const resolveHeadConfig = (props) => {
+  const {
+    showHead,
+    headHeight,
+    thead = {}
+  } = props;
+  return Object.assign({}, {
+    isShow: showHead,
+    height: headHeight
+  }, __spreadValues({}, thead));
+};
+const getRowText = (row, key, column) => {
+  if (column.type === "index") {
+    return row.__$table_row_index;
+  }
+  return row[key];
+};
+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 handleItemChecked = (value, item) => {
+      const isChecked = !!value;
+      if (isChecked) {
+        state.checked.push(item.value);
+      } else {
+        const index = state.checked.findIndex((val) => val === item.value);
+        if (index >= 0) {
+          state.checked.splice(index, 1);
+        }
+      }
+    };
+    let localData = reactive([]);
+    watchEffect(() => {
+      const {
+        list = []
+      } = column.filter;
+      localData = 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);
+        emit("change", state.checked, filterFn);
+        isShow.value = false;
+      }
+    };
+    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: () => createVNode("div", {
+        "class": headFilterContentClass
+      }, [createVNode("div", {
+        "class": "content-list"
+      }, [localData.map((item) => createVNode("div", {
+        "class": "list-item"
+      }, [createVNode(BkCheckbox, {
+        "label": item.text,
+        "checked": item.checked,
+        "onChange": (val) => handleItemChecked(val, item)
+      }, null)]))]), 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 = "";
+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 = {}));
 class TableRender {
   constructor(props, ctx, reactiveProp, colgroups) {
     __publicField(this, "getColumnClass", (colIndex) => `${this.uuid}-column-${colIndex}`);
@@ -12584,11 +12917,18 @@ class TableRender {
     this.colgroups = colgroups;
     this.plugins = new TablePlugins(props, ctx);
     this.uuid = random(8);
+    this.events = /* @__PURE__ */ new Map();
   }
   get propActiveCols() {
     return this.reactiveProp.activeColumns;
   }
   renderTableHeadSchema() {
+    const {
+      isShow = true
+    } = resolveHeadConfig(this.props);
+    if (!isShow) {
+      return null;
+    }
     return createVNode("table", {
       "cellpadding": 0,
       "cellspacing": 0
@@ -12607,6 +12947,26 @@ class TableRender {
       "onChange": (current) => this.hanlePageChange(current)
     }), null);
   }
+  on(eventName, wartcher) {
+    if (!this.events.has(eventName)) {
+      this.events.set(eventName, []);
+    }
+    this.events.get(eventName).push(wartcher);
+    return this;
+  }
+  destroy() {
+    this.events.clear();
+    this.events = null;
+  }
+  emitEvent(eventName, args) {
+    if (this.events.has(eventName)) {
+      this.events.get(eventName).forEach((evet) => {
+        if (typeof evet === "function") {
+          Reflect.apply(evet, this, args);
+        }
+      });
+    }
+  }
   handlePageLimitChange(limit) {
     Object.assign(this.props.pagination, {
       limit
@@ -12639,9 +12999,58 @@ 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 {
+      cellFn
+    } = config;
     const rowStyle = {
-      "--row-height": `${resolvePropVal(this.props, "headHeight", ["thead"])}px`
+      "--row-height": `${resolvePropVal(config, "height", ["thead"])}px`
+    };
+    const renderHeadCell = (column, index) => {
+      const cells = [];
+      if (column.sort) {
+        cells.push(this.getSortCell(column, index));
+      }
+      if (column.filter) {
+        cells.push(this.getFilterCell(column, index));
+      }
+      if (typeof cellFn === "function") {
+        cells.unshift(cellFn(column, index));
+        return cells;
+      }
+      cells.unshift(resolvePropVal(column, "label", [column, index]));
+      return cells;
     };
     return createVNode("thead", {
       "style": rowStyle
@@ -12654,24 +13063,24 @@ class TableRender {
       "onClick": () => this.handleColumnHeadClick(index)
     }, [createVNode("div", {
       "class": "cell"
-    }, [resolvePropVal(column, "label", [column])])]))])]);
+    }, [renderHeadCell(column, index)])]))])]);
   }
   renderTBody(rows) {
-    return createVNode("tbody", null, [rows.map((row, index) => {
+    return createVNode("tbody", null, [rows.map((row, rowIndex) => {
       const rowStyle = {
-        "--row-height": `${resolvePropVal(this.props, "rowHeight", ["tbody", row, index])}px`
+        "--row-height": `${resolvePropVal(this.props, "rowHeight", ["tbody", row, rowIndex])}px`
       };
       return createVNode("tr", {
         "style": rowStyle,
-        "onClick": (e) => this.handleRowClick(e, row, index, rows),
-        "onDblclick": (e) => this.handleRowDblClick(e, row, index, rows)
-      }, [this.props.columns.map((column, index2) => createVNode("td", {
-        "class": this.getColumnClass(index2),
+        "onClick": (e) => this.handleRowClick(e, row, rowIndex, rows),
+        "onDblclick": (e) => this.handleRowDblClick(e, row, rowIndex, rows)
+      }, [this.props.columns.map((column, index) => createVNode("td", {
+        "class": this.getColumnClass(index),
         "colspan": 1,
         "rowspan": 1
       }, [createVNode("div", {
         "class": "cell"
-      }, [this.renderCell(row, column, index2, rows)])]))]);
+      }, [this.renderCell(row, column, rowIndex, rows)])]))]);
     })]);
   }
   handleRowClick(e, row, index, rows) {
@@ -12681,7 +13090,7 @@ class TableRender {
     this.context.emit("rowDblClick", e, row, index, rows, this);
   }
   renderCell(row, column, index, rows) {
-    const cell = row[resolvePropVal(column, "field", [column, row])];
+    const cell = getRowText(row, resolvePropVal(column, "field", [column, row]), column);
     if (typeof column.render === "function") {
       return column.render(cell, row, index, rows);
     }
@@ -12703,6 +13112,7 @@ class TableRender {
     })]);
   }
 }
+var headFilter = "";
 var Component$4 = defineComponent({
   name: "Table",
   props: tableProps,
@@ -12714,6 +13124,8 @@ 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,
@@ -12754,15 +13166,42 @@ var Component$4 = defineComponent({
     }, {
       deep: true
     });
-    const tableRender = new TableRender(props, ctx, reactiveProp, colgroups);
-    const wrapperStyle = computed(() => ({
-      minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
-    }));
+    const indexData = computed(() => props.data.map((item, index) => __spreadProps(__spreadValues({}, item), {
+      __$table_row_index: index + 1
+    })));
+    const pageData = reactive([]);
+    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) => {
+      const {
+        sortFn
+      } = args;
+      columnSortFn = sortFn;
+      pageData.sort(columnSortFn);
+    }).on(EVENTS.ON_FILTER_CLICK, (args) => {
+      const {
+        filterFn
+      } = args;
+      columnFilterFn = filterFn;
+      resolvePageData();
     });
-    const pageData = computed(() => props.data.slice(startIndex.value, endIndex.value));
+    const wrapperStyle = computed(() => ({
+      minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
+    }));
     const localPagination = computed(() => {
       if (!props.pagination) {
         return null;
@@ -12810,6 +13249,7 @@ var Component$4 = defineComponent({
     onBeforeUnmount(() => {
       observerIns.stop();
       observerIns = null;
+      tableRender.destroy();
     });
     ctx.expose({
       plugins: tableRender.plugins
@@ -12820,11 +13260,11 @@ var Component$4 = defineComponent({
       "ref": root
     }, [createVNode("div", {
       "class": headClass
-    }, [props.showHead && tableRender.renderTableHeadSchema()]), createVNode(BkVirtualRender, {
+    }, [tableRender.renderTableHeadSchema()]), createVNode(BkVirtualRender, {
       "lineHeight": props.rowHeight,
       "class": contentClass,
       "style": contentStyle.value,
-      "list": pageData.value,
+      "list": pageData,
       "onContentScroll": handleScrollChanged,
       "throttleDelay": 0,
       "enabled": props.virtualEnabled