bkui-vue 0.0.1-beta.29 → 0.0.1-beta.31

package/dist/bkui-vue.umd.js

@@ -81,6 +81,7 @@ var __publicField = (obj, key, value) => {
   var transfer = "";
   var pagination = "";
   var timeline = "";
+  var codeDiff = "";
   var resizeLayout = "";
   var tagInput = "";
   const BKLAYERD_INDEX_EFAULT_VALUE = {
@@ -8462,6 +8463,7 @@ ${$(r2)}`), n2;
       type: Function
     },
     loading: PropTypes.bool,
+    inline: PropTypes.bool.def(true),
     theme: PropTypes.theme(["white", "primary", "warning", "success", "danger"]),
     title: PropTypes.string.def(""),
     size: PropTypes.commonType(Object.values(BkLoadingSize)).def(BkLoadingSize.Normal),
@@ -8480,9 +8482,9 @@ ${$(r2)}`), n2;
         "class": `oval oval-${i2}`
       }, null))]);
       const loadingWrapperCls = vue.computed(() => classes({
+        "bk-loading-wrapper": props.loading,
         "bk-nested-loading": !!ctx.slots.default
-      }, "bk-loading-wrapper"));
-      console.log(props.theme);
+      }));
       const containerCls = vue.computed(() => classes({
         [`bk-loading-size-${props.size}`]: !!props.size,
         [`bk-loading-${props.theme}`]: !!props.theme
@@ -8500,15 +8502,15 @@ ${$(r2)}`), n2;
       });
       return () => {
         var _a, _b;
-        return ctx.slots.default && !props.loading ? (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a) : vue.createVNode("div", {
+        return vue.createVNode("div", {
           "class": loadingWrapperCls.value
-        }, [vue.createVNode("div", {
+        }, [props.loading && vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
           "class": containerCls.value
         }, [indicator.value, hasTitle.value && vue.createVNode("div", {
           "class": "bk-loading-title"
         }, [props.title])]), ctx.slots.default && vue.createVNode("div", {
           "class": "bk-loading-mask"
-        }, [ctx.slots.default()])]);
+        }, null)]), (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
       };
     }
   });
@@ -9922,7 +9924,7 @@ ${$(r2)}`), n2;
     render() {
       const radioClass = classes({
         "bk-radio": true,
-        "is-focus": this.isFocus,
+        "is-focusd": this.isFocus,
         "is-disabled": this.isDisabled,
         "is-checked": this.isCheck
       });
@@ -9981,7 +9983,7 @@ ${$(r2)}`), n2;
     render() {
       const radioClass = classes({
         "bk-radio-button": true,
-        "is-focus": this.isFocus,
+        "is-focusd": this.isFocus,
         "is-disabled": this.isDisabled,
         "is-checked": this.isCheck
       });
@@ -10032,9 +10034,10 @@ ${$(r2)}`), n2;
       return {};
     },
     render() {
+      var _a;
       return vue.createVNode("div", {
         "class": "bk-radio-group"
-      }, [this.$slots.default()]);
+      }, [(_a = this.$slots) == null ? void 0 : _a.default()]);
     }
   });
   const BkRadio = withInstallProps(Component$e, { Group: RadioGroup, Button: RadioButton });
@@ -11711,7 +11714,7 @@ ${$(r2)}`), n2;
     }
   });
   const BkSwitcher = withInstall(Component$7);
-  const EventProps$1 = {
+  const EventProps = {
     onContentScroll: Function
   };
   const virtualRenderProps = __spreadValues({
@@ -11734,7 +11737,7 @@ ${$(r2)}`), n2;
     scrollPosition: PropTypes.string.def("content"),
     abosuteHeight: PropTypes.oneOfType([PropTypes.string.def("auto"), PropTypes.number]).def("auto"),
     throttleDelay: PropTypes.number.def(60)
-  }, EventProps$1);
+  }, EventProps);
   function getMatchedIndex(maxCount, maxHeight, groupItemCount, callback) {
     let startIndex = 0;
     let height = 0;
@@ -11963,10 +11966,7 @@ ${$(r2)}`), n2;
   });
   const BkVirtualRender = withInstall(Component$6);
   const BORDER_OPRIONS = ["none", "row", "col", "outer"];
-  const EventProps = {
-    onRowClick: Function
-  };
-  const tableProps = __spreadValues({
+  const tableProps = {
     data: PropTypes.arrayOf(PropTypes.any).def([]),
     columns: PropTypes.arrayOf(PropTypes.shape({
       label: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")]),
@@ -11985,7 +11985,7 @@ ${$(r2)}`), n2;
     border: PropTypes.arrayOf(PropTypes.commonType(BORDER_OPRIONS, "border")).def(["row"]),
     pagination: PropTypes.oneOfType([PropTypes.bool.def(false), PropTypes.object.def({})]).def(false),
     remotePagination: PropTypes.bool.def(false)
-  }, EventProps);
+  };
   function _isSlot(s2) {
     return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !vue.isVNode(s2);
   }
@@ -12085,6 +12085,8 @@ ${$(r2)}`), n2;
           localCurrent.value = proxy.totalPageNum;
         }
       });
+    }, {
+      immediate: true
     });
     vue.nextTick(() => {
       vue.watch(() => proxy.totalPageNum, (totalPageNum) => {
@@ -12364,7 +12366,7 @@ ${$(r2)}`), n2;
   var Component$5 = vue.defineComponent({
     name: "Pagination",
     props: paginationProps,
-    emits: ["update:modelValue", "change", "update:limit", "limit-change"],
+    emits: ["update:modelValue", "change", "update:limit", "limitChange"],
     setup(props, context) {
       const totalPageNum = vue.ref(0);
       const {
@@ -12399,7 +12401,7 @@ ${$(r2)}`), n2;
         context.emit("change", smallListCurrent2);
       });
       vue.watch(localLimit, (localLimit2) => {
-        context.emit("limit-change", localLimit2);
+        context.emit("limitChange", localLimit2);
       });
       return {
         totalPageNum,
@@ -12604,14 +12606,14 @@ ${$(r2)}`), n2;
       Object.assign(this.props.pagination, {
         limit
       });
-      this.context.emit("page-limit-change", limit);
+      this.context.emit("pageLimitChange", limit);
     }
     hanlePageChange(current) {
       Object.assign(this.props.pagination, {
         current,
         value: current
       });
-      this.context.emit("page-value-change", current);
+      this.context.emit("pageValueChange", current);
     }
     setColumnActive(index, single = false) {
       const col = this.propActiveCols.find((item) => item.index === index);
@@ -12696,7 +12698,7 @@ ${$(r2)}`), n2;
   var Component$4 = vue.defineComponent({
     name: "Table",
     props: tableProps,
-    emits: ["column-pick", "row-click", "page-limit-change", "page-value-change"],
+    emits: ["columnPick", "rowClick", "pageLimitChange", "pageValueChange"],
     setup(props, ctx) {
       const activeCols = vue.reactive(resolveActiveColumns(props));
       const colgroups = vue.reactive(props.columns.map((col) => __spreadProps(__spreadValues({}, col), {
@@ -13762,15 +13764,16 @@ ${$(r2)}`), n2;
   TagInput.install = (Vue) => {
     Vue.component(TagInput.name, TagInput);
   };
+  const dividerProps = {
+    direction: PropTypes.commonType(["horizontal", "vertical"], "direction").def("horizontal"),
+    align: PropTypes.commonType(["left", "center", "right"], "align").def("center"),
+    color: PropTypes.string.def("#dde4eb"),
+    width: PropTypes.number.def(1),
+    type: PropTypes.commonType(["dashed", "solid"], "lineType").def("dashed")
+  };
   var bkDivider = vue.defineComponent({
     name: "Divider",
-    props: {
-      direction: PropTypes.commonType(["horizontal", "vertical"], "direction").def("horizontal"),
-      align: PropTypes.commonType(["left", "center", "right"], "align").def("center"),
-      color: PropTypes.string.def("#dde4eb"),
-      width: PropTypes.number.def(1),
-      type: PropTypes.commonType(["dashed", "solid"], "lineType").def("dashed")
-    },
+    props: dividerProps,
     render() {
       const styles = () => {
         if (this.direction === "vertical") {
@@ -13795,46 +13798,73 @@ ${$(r2)}`), n2;
     }
   });
   const BkDivider = withInstall(bkDivider);
+  const tabNavEventProps = {
+    tabAdd: {
+      type: Function,
+      default: () => ({})
+    },
+    tabChange: {
+      type: Function,
+      default: (name) => name
+    },
+    tabRemove: {
+      type: Function,
+      default: (name) => name
+    },
+    tabSort: {
+      type: Function,
+      default: () => ({})
+    },
+    tabDrag: {
+      type: Function,
+      default: () => ({})
+    }
+  };
+  const tabProps = {
+    active: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(""),
+    type: PropTypes.commonType(["card", "border-card", "unborder-card"], "type").def("border-card"),
+    tabPosition: PropTypes.commonType(["left", "right", "top"], "position").def("top"),
+    closable: Boolean,
+    addable: Boolean,
+    sortable: Boolean,
+    sortType: PropTypes.commonType(["replace", "insert", "top"], "sortType").def("replace"),
+    labelHeight: PropTypes.number.def(50),
+    scrollStep: PropTypes.number.def(200),
+    extCls: PropTypes.string.def(""),
+    validateActive: PropTypes.bool.def(true),
+    showHeader: PropTypes.bool.def(true),
+    changeOnHover: PropTypes.bool.def(false),
+    changeOnHoverDelay: PropTypes.number.def(1e3)
+  };
+  const tabNavProps = __spreadValues({
+    active: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(""),
+    panels: {
+      type: Array,
+      default: () => []
+    },
+    closable: Boolean,
+    addable: Boolean,
+    sortable: Boolean,
+    sortType: PropTypes.commonType(["replace", "insert", "top"], "sortType").def("replace"),
+    labelHeight: PropTypes.number.def(50),
+    scrollStep: PropTypes.number.def(200),
+    validateActive: PropTypes.bool.def(true),
+    changeOnHover: PropTypes.bool.def(false),
+    changeOnHoverDelay: PropTypes.number.def(1e3)
+  }, tabNavEventProps);
+  const tabPanelProps = {
+    name: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(""),
+    label: PropTypes.string || PropTypes.func,
+    closable: PropTypes.bool,
+    visible: PropTypes.bool.def(true),
+    disabled: PropTypes.bool,
+    sortable: PropTypes.bool,
+    renderDirective: PropTypes.commonType(["if", "show"], "render").def("show"),
+    panel: PropTypes.string || PropTypes.func
+  };
   var TabNav = vue.defineComponent({
     name: "TabNav",
-    props: {
-      active: {
-        type: String || Number
-      },
-      panels: {
-        type: Array,
-        default: () => []
-      },
-      closable: PropTypes.bool.def(false),
-      addable: PropTypes.bool.def(false),
-      sortable: PropTypes.bool.def(false),
-      sortType: PropTypes.commonType(["replace", "insert", "top"], "sortType").def("replace"),
-      labelHeight: PropTypes.number.def(50),
-      scrollStep: PropTypes.number.def(200),
-      validateActive: PropTypes.bool.def(true),
-      changeOnHover: PropTypes.bool.def(false),
-      changeOnHoverDelay: PropTypes.number.def(1e3),
-      tabAdd: {
-        type: Function,
-        default: () => ({})
-      },
-      tabChange: {
-        type: Function,
-        default: () => ({})
-      },
-      tabRemove: {
-        type: Function,
-        default: () => ({})
-      },
-      tabSort: {
-        type: Function,
-        default: () => ({})
-      },
-      tabDrag: {
-        type: Function,
-        default: () => ({})
-      }
-    },
+    props: tabNavProps,
     setup(props) {
       const navs = vue.computed(() => {
         if (!Array.isArray(props.panels) || !props.panels.length) {
@@ -13905,18 +13935,15 @@ ${$(r2)}`), n2;
       distinctRoots(el1, el2) {
         return el1 === el2;
       },
-      swapArr(arr, a2, b2) {
-        const swap = arr[a2];
-        arr[a2] = arr[b2];
-        arr[b2] = swap;
-      },
       handleTabAdd(e) {
         this.tabAdd(e);
       },
       dragstart(index, $event) {
         this.dragStartIndex = index;
         this.draggingEle = this.guid;
-        $event.dataTransfer.effectAllowed = "move";
+        Object.assign($event.dataTransfer, {
+          effectAllowed: "move"
+        });
         this.tabDrag(index, $event);
       },
       dragenter(index) {
@@ -13933,20 +13960,7 @@ ${$(r2)}`), n2;
         if (!this.distinctRoots(this.draggingEle, this.guid)) {
           return false;
         }
-        if (sortType === "insert") {
-          if (this.dragStartIndex < index) {
-            this.panels.splice(index + 1, 0, this.panels[this.dragStartIndex]);
-            this.panels.splice(this.dragStartIndex, 1);
-          } else if (this.dragStartIndex > index) {
-            this.panels.splice(index, 0, this.panels[this.dragStartIndex]);
-            this.panels.splice(this.dragStartIndex + 1, 1);
-          } else {
-            return false;
-          }
-        } else {
-          this.swapArr(this.panels, this.dragStartIndex, index);
-        }
-        this.tabSort(this.dragStartIndex, index);
+        this.tabSort(this.dragStartIndex, index, sortType);
       },
       handleTabChange(name) {
         this.tabChange(name);
@@ -13987,7 +14001,7 @@ ${$(r2)}`), n2;
           }
           return classNames.join(" ");
         };
-        const getValue = (value, value2) => typeof value === "boolean" ? value : value2;
+        const getValue = (curentValue, parentValue) => curentValue || parentValue;
         return vue.createVNode("div", {
           "key": name,
           "onClick": () => this.handleTabChange(name),
@@ -14019,26 +14033,29 @@ ${$(r2)}`), n2;
       });
       const renderSlot = () => {
         var _a, _b, _c, _d;
-        let addSlot;
         const list = [];
         if (typeof this.$slots.add === "function") {
-          addSlot = (_b = (_a = this.$slots).add) == null ? void 0 : _b.call(_a, vue.h);
+          list.push((_b = (_a = this.$slots).add) == null ? void 0 : _b.call(_a, vue.h));
         } else if (addable) {
-          addSlot = vue.createVNode("div", {
+          list.push(vue.createVNode("div", {
             "onClick": this.handleTabAdd
           }, [vue.createVNode(plus, {
             "width": 26,
             "height": 26
-          }, null)]);
+          }, null)]));
         }
-        list.push(addSlot);
         if (typeof this.$slots.setting === "function") {
           list.push((_d = (_c = this.$slots).setting) == null ? void 0 : _d.call(_c, vue.h));
         }
-        return list.map((item, index) => vue.createVNode("div", {
-          "class": "bk-tab-header-item",
-          "key": index
-        }, [item]));
+        if (list.length) {
+          return vue.createVNode("div", {
+            "class": "bk-tab-header-operation"
+          }, [list.map((item, index) => vue.createVNode("div", {
+            "class": "bk-tab-header-item",
+            "key": index
+          }, [item]))]);
+        }
+        return null;
       };
       return vue.createVNode("div", {
         "style": {
@@ -14047,9 +14064,7 @@ ${$(r2)}`), n2;
         "class": "bk-tab-header"
       }, [vue.createVNode("div", {
         "class": "bk-tab-header-nav"
-      }, [renderNavs()]), vue.createVNode("div", {
-        "class": "bk-tab-header-operation"
-      }, [renderSlot()])]);
+      }, [renderNavs()]), renderSlot()]);
     }
   });
   var Tab = vue.defineComponent({
@@ -14057,28 +14072,11 @@ ${$(r2)}`), n2;
     components: {
       TabNav
     },
-    props: {
-      active: {
-        type: String || Number
-      },
-      type: PropTypes.commonType(["card", "border-card", "unborder-card"], "type").def("border-card"),
-      tabPosition: PropTypes.commonType(["left", "right", "top"], "position").def("top"),
-      closable: PropTypes.bool.def(false),
-      addable: PropTypes.bool.def(false),
-      sortable: PropTypes.bool.def(false),
-      sortType: PropTypes.commonType(["replace", "insert", "top"], "sortType").def("replace"),
-      labelHeight: PropTypes.number.def(50),
-      scrollStep: PropTypes.number.def(200),
-      extCls: PropTypes.string.def(""),
-      validateActive: PropTypes.bool.def(true),
-      showHeader: PropTypes.bool.def(true),
-      changeOnHover: PropTypes.bool.def(false),
-      changeOnHoverDelay: PropTypes.number.def(1e3)
-    },
+    props: tabProps,
     emits: [
       "add-panel",
       "tab-change",
-      "close-panel",
+      "remove-panel",
       "sort-change",
       "on-drag-tab",
       "add",
@@ -14095,7 +14093,7 @@ ${$(r2)}`), n2;
       const panels = vue.ref([]);
       const instance = vue.getCurrentInstance();
       if (typeof slots.panel === "function") {
-        panels.value = slots.default();
+        panels.value = slots.panel();
       }
       if (typeof slots.default === "function") {
         panels.value = slots.default();
@@ -14160,11 +14158,26 @@ ${$(r2)}`), n2;
       },
       tabRemove(index, panel) {
         this.$emit("remove", index, panel);
-        this.$emit("close-panel", index, panel);
+        this.$emit("remove-panel", index, panel);
       },
-      tabSort(dragTabIndex, dropTabIndex) {
-        this.$emit("sort", dragTabIndex, dropTabIndex);
-        this.$emit("sort-change", dragTabIndex, dropTabIndex);
+      tabSort(dragTabIndex, dropTabIndex, sortType) {
+        if (sortType === "insert") {
+          if (dragTabIndex < dropTabIndex) {
+            this.panels.splice(dropTabIndex + 1, 0, this.panels[dragTabIndex]);
+            this.panels.splice(dragTabIndex, 1);
+          } else if (dragTabIndex > dropTabIndex) {
+            this.panels.splice(dropTabIndex, 0, this.panels[dragTabIndex]);
+            this.panels.splice(dragTabIndex + 1, 1);
+          } else {
+            return false;
+          }
+        } else {
+          const swap = this.panels[dropTabIndex];
+          this.panels[dropTabIndex] = this.panels[dragTabIndex];
+          this.panels[dragTabIndex] = swap;
+        }
+        this.$emit("sort", dragTabIndex, dropTabIndex, sortType);
+        this.$emit("sort-change", dragTabIndex, dropTabIndex, sortType);
       },
       tabDrag(dragTabIndex, dragEvent) {
         this.$emit("drag", dragTabIndex, dragEvent);
@@ -14232,18 +14245,7 @@ ${$(r2)}`), n2;
   });
   var TabPanel = vue.defineComponent({
     name: "TabPanel",
-    props: {
-      name: {
-        type: String || Number
-      },
-      label: String || Function,
-      closable: Function || Boolean,
-      visible: PropTypes.bool.def(true),
-      disabled: PropTypes.bool.def(null) || void 0,
-      sortable: Function || Boolean,
-      renderDirective: PropTypes.commonType(["if", "show"], "render").def("show"),
-      panel: String || Function
-    },
+    props: tabPanelProps,
     render() {
       const active = this.name === this.$parent.active;
       const getContent = () => {
@@ -14267,8 +14269,7 @@ ${$(r2)}`), n2;
       }, [getContent()]), [[vue.vShow, active]]);
     }
   });
-  const BKTab = withInstall(Tab);
-  const BKTabPanel = withInstall(TabPanel);
+  const BkTab = withInstallProps(Tab, { TabPanel });
   const instances = {
     "top-left": [],
     "top-right": [],
@@ -20125,8 +20126,8 @@ ${$(r2)}`), n2;
     Tag: BkTag,
     TagInput,
     Divider: BkDivider,
-    Tab: BKTab,
-    TabPanel: BKTabPanel,
+    Tab: BkTab,
+    TabPanel,
     Message,
     Notify,
     Menu: BkMenu,
@@ -20194,8 +20195,8 @@ ${$(r2)}`), n2;
   exports2.Steps = BkSteps;
   exports2.Swiper = BkSwiper;
   exports2.Switcher = BkSwitcher;
-  exports2.Tab = BKTab;
-  exports2.TabPanel = BKTabPanel;
+  exports2.Tab = BkTab;
+  exports2.TabPanel = TabPanel;
   exports2.Table = BkTable;
   exports2.Tag = BkTag;
   exports2.TagInput = TagInput;