bkui-vue 0.0.1-beta.145 → 0.0.1-beta.148

package/dist/index.esm.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key2, value) => {
   __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
   return value;
 };
-import { inject, createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Transition, provide, createTextVNode, isVNode, withDirectives, vShow, Fragment, toRefs, onUnmounted, Teleport, resolveDirective, customRef, onBeforeMount, toRef, vModelText, watchEffect, onUpdated, render as render$1, shallowRef, createApp, toRaw, withModifiers, TransitionGroup } from "vue";
+import { inject, createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Transition, provide, createTextVNode, isVNode, withDirectives, vShow, renderSlot, Fragment, toRefs, onUnmounted, Teleport, resolveDirective, customRef, onBeforeMount, toRef, vModelText, watchEffect, onUpdated, render as render$1, shallowRef, createApp, toRaw, withModifiers, TransitionGroup } from "vue";
 var reset = "";
 var alert = "";
 var affix = "";
@@ -9784,6 +9784,7 @@ const propsCollapsePanel = __spreadValues({
   title: PropTypes.any,
   content: PropTypes.string,
   disabled: PropTypes.bool.def(false),
+  isFormList: PropTypes.bool.def(false),
   renderDirective: PropTypes.commonType(["if", "show"], "render").def("show"),
   modelValue: PropTypes.bool.def(false)
 }, CollapsePanelEventProps);
@@ -9878,6 +9879,7 @@ var CollapsePanel = defineComponent({
     slots
   }) {
     const localActiveItems = inject("localActiveItems");
+    const handleItemClick = inject("handleItemClick");
     const isActive = ref(props2.modelValue);
     watch(() => props2.modelValue, (newVal) => {
       isActive.value = newVal;
@@ -9889,7 +9891,7 @@ var CollapsePanel = defineComponent({
     }, {
       immediate: true
     });
-    function handleItemClick(props3) {
+    function clickItem(props3) {
       const {
         disabled,
         name,
@@ -9904,14 +9906,14 @@ var CollapsePanel = defineComponent({
       isActive.value = !isActive.value;
       emit("change", data2);
       emit("update:modelValue", isActive.value);
+      handleItemClick({
+        name
+      });
     }
     const transition = ref(collapseMotion$1(emit));
-    const {
-      content
-    } = props2;
     function getContent() {
-      if (content) {
-        return content;
+      if (props2.content) {
+        return props2.content;
       }
       if (typeof slots.content === "function") {
         return slots.content(h$1);
@@ -9943,7 +9945,9 @@ var CollapsePanel = defineComponent({
       } else {
         title = props2.title;
       }
-      return createVNode(Fragment, null, [createVNode("span", {
+      return createVNode("div", {
+        "class": "bk-collapse-header"
+      }, [createVNode("span", {
         "class": "bk-collapse-title"
       }, [title]), createVNode(angleRight, {
         "class": `bk-collapse-icon ${isActive.value && "rotate-icon" || ""}`
@@ -9954,8 +9958,7 @@ var CollapsePanel = defineComponent({
       return createVNode("div", {
         "class": `bk-collapse-item ${props2.disabled ? "is-disabled" : ""} ${isActive.value ? "bk-collapse-item-active" : ""}`
       }, [createVNode("div", {
-        "class": "bk-collapse-header",
-        "onClick": () => handleItemClick(props2)
+        "onClick": () => clickItem(props2)
       }, [renderHeader()]), createVNode(Transition, transition.value, _isSlot$8(_slot = renderPanel()) ? _slot : {
         default: () => [_slot]
       })]);
@@ -9983,7 +9986,6 @@ var Collapse = defineComponent({
     }, {
       immediate: true
     });
-    provide("localActiveItems", localActiveItems.value);
     const handleItemClick = (item) => {
       const {
         name
@@ -10006,14 +10008,17 @@ var Collapse = defineComponent({
       emit("item-click", item);
       emit("update:modelValue", localActiveItems.value);
     };
+    provide("localActiveItems", localActiveItems.value);
+    provide("handleItemClick", handleItemClick);
     const className = "bk-collapse-wrapper";
     if (!Array.isArray(props2.list) || !props2.list.length) {
-      return () => {
-        var _a;
-        return createVNode("div", {
-          "class": className
-        }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
-      };
+      return () => createVNode("div", {
+        class: className
+      }, [renderSlot(slots, "default", {
+        props: {
+          isList: true
+        }
+      })]);
     }
     const collapseData = computed(() => (props2.list || []).map((item, index) => {
       if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") {
@@ -10041,6 +10046,7 @@ var Collapse = defineComponent({
         "item-click": handleItemClick,
         "disabled": item.disabled,
         "name": name,
+        "isFormList": true,
         "title": title,
         "content": item[props2.contentField]
       }, null);
@@ -11222,7 +11228,7 @@ const PopoverProps = __spreadValues({
   arrow: PropTypes.bool.def(true),
   padding: PropTypes.number.def(5),
   offset: PropTypes.number.def(6),
-  boundary: PropTypes.string.def(void 0),
+  boundary: PropTypes.oneOfType([PropTypes.string.def("parent"), PropTypes.instanceOf(HTMLElement)]),
   zIndex: PropTypes.number.def(void 0),
   disableTeleport: PropTypes.bool.def(false),
   autoPlacement: PropTypes.bool.def(false),
@@ -12694,7 +12700,7 @@ var useFloating = (props2, ctx, refReference, refContent, refArrow, refRoot) =>
     });
   };
   const showPopover = () => {
-    localIsShow.value = true;
+    !props2.disabled && (localIsShow.value = true);
   };
   let popShowTimerId = void 0;
   let isMouseenter = false;
@@ -15176,7 +15182,7 @@ var useTagRender = (props2, ctx) => {
   };
   return {
     rendAsTag: () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
       return h$1(renderAs, {
         class: props2.className
       }, [(_c = (_b = (_a = ctx.slots).beforeContent) == null ? void 0 : _b.call(_a)) != null ? _c : "", withDirectives(h$1(contentAs, {
@@ -15184,7 +15190,7 @@ var useTagRender = (props2, ctx) => {
         style: props2.contentStyle
       }, [(_f = (_e = (_d = ctx.slots).default) == null ? void 0 : _e.call(_d, {
         data: props2.list
-      })) != null ? _f : ""]), [[vVirtualRender, dirModifier]]), (_i = (_h = (_g = ctx.slots).afterContent) == null ? void 0 : _h.call(_g)) != null ? _i : ""]);
+      })) != null ? _f : ""]), [[vVirtualRender, dirModifier]]), (_i = (_h = (_g = ctx.slots).afterContent) == null ? void 0 : _h.call(_g)) != null ? _i : "", (_l = (_k = (_j = ctx.slots).afterSection) == null ? void 0 : _k.call(_j)) != null ? _l : ""]);
     }
   };
 };
@@ -15402,7 +15408,7 @@ var Component$e = defineComponent({
       reset: reset2
     });
     return () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
       return h$1(renderAs || "div", {
         ref: refRoot,
         class: wrapperClass.value,
@@ -15415,7 +15421,7 @@ var Component$e = defineComponent({
       })) != null ? _f : ""]), [[vVirtualRender, dirModifier]]), (_i = (_h = (_g = ctx.slots).afterContent) == null ? void 0 : _h.call(_g)) != null ? _i : "", h$1("div", {
         class: [resolveClassName("virtual-section")],
         style: innerStyle.value
-      })]);
+      }), (_l = (_k = (_j = ctx.slots).afterSection) == null ? void 0 : _k.call(_j)) != null ? _l : ""]);
     };
   }
 });
@@ -17347,7 +17353,7 @@ const useClass = (props2, root, reactiveProp, pageData) => {
     if (/^\d+\.?\d*px$/ig.test(strHeight)) {
       return Number(strHeight.replace("px", ""));
     }
-    if (/^\d+\.?\d*%$/ig.test(strHeight)) {
+    if (/^\d+\.?\d*%$/ig.test(strHeight) && typeof defaultValue === "number") {
       const percent = Number(strHeight.replace("%", ""));
       return defaultValue * percent / 100;
     }
@@ -17363,10 +17369,13 @@ const useClass = (props2, root, reactiveProp, pageData) => {
     const contentHeight = resolveHeight - resolveHeadHeight - resolveFooterHeight;
     const height = props2.height !== "auto" ? `${contentHeight}px` : false;
     const minHeight = resolveMinHeight - resolveHeadHeight - resolveFooterHeight;
+    const resolveMaxHeight = resolvePropHeight(props2.maxHeight, void 0);
+    const maxHeight = typeof resolveMaxHeight === "number" ? `${resolveMaxHeight - resolveHeadHeight - resolveFooterHeight}px` : false;
     Object.assign(contentStyle, {
       display: (pageData == null ? void 0 : pageData.length) ? "block" : false,
       "min-height": `${minHeight}px`,
-      height
+      height,
+      maxHeight
     });
   };
   onMounted(() => {
@@ -17678,6 +17687,10 @@ var Component$c = defineComponent({
       "scroll-loading": true,
       _bottom: true
     };
+    const fixedBottomBorder = {
+      [resolveClassName("fixed-bottom-border")]: true,
+      "_is-empty": !props2.data.length
+    };
     const {
       renderScrollLoading
     } = useScrollLoading(props2, ctx);
@@ -17707,7 +17720,10 @@ var Component$c = defineComponent({
         "scrollEvent": true,
         "enabled": props2.virtualEnabled
       }), {
-        default: (scope) => tableRender.renderTableBodySchema(scope.data || props2.data)
+        default: (scope) => tableRender.renderTableBodySchema(scope.data || props2.data),
+        afterSection: () => createVNode("div", {
+          "class": fixedBottomBorder
+        }, null)
       }),
       createVNode("div", {
         "class": fixedWrapperClass
@@ -18918,7 +18934,7 @@ var TabNav = defineComponent({
         "onClick": () => this.handleTabRemove(index, item)
       }, null)]);
     });
-    const renderSlot = () => {
+    const renderSlot2 = () => {
       var _a, _b;
       const list = [];
       if (typeof this.$slots.add === "function") {
@@ -18948,7 +18964,7 @@ var TabNav = defineComponent({
       "class": "bk-tab-header"
     }, [createVNode("div", {
       "class": "bk-tab-header-nav"
-    }, [renderNavs()]), renderSlot(), typeof this.$slots.setting === "function" && createVNode("div", {
+    }, [renderNavs()]), renderSlot2(), typeof this.$slots.setting === "function" && createVNode("div", {
       "class": "bk-tab-header-setting"
     }, [this.$slots.setting()])]);
   }
@@ -25935,86 +25951,70 @@ var Row = defineComponent({
   }
 });
 const BkContainer = withInstallProps(Container, { Row, Col });
+const PLACEMENT_OPTIONS = ["auto", "auto-start", "auto-end", "top", "right", "bottom", "left", "top-start", "top-end", "bottom-start", "bottom-end", "right-start", "right-end", "left-start", "left-end"];
+const TRIGGER_OPTIONS = ["hover", "click", "manual"];
 var Dropdown = defineComponent({
   name: "Dropdown",
   props: {
     isShow: PropTypes.bool.def(false),
-    placement: PropTypes.commonType(["auto", "auto-start", "auto-end", "top", "right", "bottom", "left", "top-start", "top-end", "bottom-start", "bottom-end", "right-start", "right-end", "left-start", "left-end"], "placement").def("bottom"),
-    trigger: PropTypes.commonType(["hover", "click", "manual"], "trigger").def("hover"),
+    placement: PropTypes.commonType(PLACEMENT_OPTIONS, "placement").def("bottom"),
+    trigger: PropTypes.commonType(TRIGGER_OPTIONS, "trigger").def("hover"),
     disabled: PropTypes.bool.def(false),
+    popoverOptions: PropTypes.object.def({}),
     extCls: PropTypes.string
   },
   emits: ["showChange", "show", "hide"],
-  setup(props2, {
+  setup(_props, {
     emit
   }) {
-    let popoverInstance = /* @__PURE__ */ Object.create(null);
-    const reference2 = ref(null);
-    const refContent = ref(null);
-    onMounted(() => {
-      registerDropdown();
-    });
-    onBeforeUnmount(() => {
-      destoryDropdown();
-    });
-    watch(() => props2.isShow, (val) => {
-      nextTick(() => {
-        if (props2.trigger === "manual" && popoverInstance && !props2.disabled) {
-          val ? popoverInstance.show() : popoverInstance.hide();
-        }
-      });
-    });
-    watch(() => props2.disabled, (val) => handleUpdateDisabled(val));
+    const handleShowChagne = (val) => {
+      emit("showChange", val);
+    };
     const afterShow = () => {
       emit("show");
+      handleShowChagne(true);
     };
     const afterHidden = () => {
       emit("hide");
-    };
-    const registerDropdown = () => {
-      if (props2.disabled)
-        return;
-      popoverInstance = new BKPopover(reference2.value, refContent.value, {
-        placement: props2.placement,
-        trigger: props2.trigger,
-        afterShow,
-        afterHidden
-      });
-      props2.trigger === "manual" && props2.isShow && popoverInstance.show();
-    };
-    const destoryDropdown = () => {
-      if (popoverInstance) {
-        const instance = popoverInstance;
-        instance.isShow && instance.hide();
-        instance.destroy();
-        popoverInstance = null;
-        props2.trigger === "manual" && emit("showChange", false);
-      }
-    };
-    const handleUpdateDisabled = (val) => {
-      const instance = popoverInstance;
-      props2.trigger === "manual" && !val && emit("showChange", false);
-      instance.updateDisabled(val);
+      handleShowChagne(false);
     };
     return {
-      reference: reference2,
-      refContent
+      afterShow,
+      afterHidden
     };
   },
   render() {
-    var _a, _b, _c, _d;
     const wrapperClasses = classes({
       "bk-dropdown": true
     }, this.$props.extCls);
+    const basePopoverOptions = {
+      theme: "light bk-dropdown-popover",
+      trigger: this.trigger,
+      arrow: false,
+      placement: this.placement,
+      isShow: this.isShow,
+      disabled: this.disabled
+    };
+    const popoverOptions = lodash.exports.merge(basePopoverOptions, this.popoverOptions);
     return createVNode("div", {
       "class": wrapperClasses
-    }, [createVNode("div", {
-      "ref": "reference",
-      "class": "bk-dropdown-reference"
-    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), createVNode("div", {
-      "ref": "refContent",
-      "class": "bk-dropdown-content"
-    }, [(_d = (_c = this.$slots).content) == null ? void 0 : _d.call(_c)])]);
+    }, [createVNode(BkPopover2, mergeProps(popoverOptions, {
+      "onAfterShow": this.afterShow,
+      "onAfterHidden": this.afterHidden
+    }), {
+      default: () => {
+        var _a, _b;
+        return createVNode("div", {
+          "class": "bk-dropdown-reference"
+        }, [createTextVNode(" "), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a), createTextVNode(" ")]);
+      },
+      content: () => {
+        var _a, _b;
+        return createVNode("div", {
+          "class": "bk-dropdown-content"
+        }, [createTextVNode(" "), (_b = (_a = this.$slots).content) == null ? void 0 : _b.call(_a), createTextVNode(" ")]);
+      }
+    })]);
   }
 });
 var DropdownItem = defineComponent({
@@ -26251,8 +26251,8 @@ class Store {
   constructor(props2) {
     const { list } = props2;
     this.data = list;
-    this.nodes = this.data.map((node) => new Node$1(node, this.config));
     this.config = props2;
+    this.nodes = this.data.map((node) => new Node$1(node, this.config));
   }
   getNodes() {
     return this.nodes;