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

package/dist/bkui-vue.cjs.js

@@ -80,6 +80,7 @@ var virtualRender$1 = "";
 var transfer = "";
 var pagination = "";
 var timeline = "";
+var codeDiff = "";
 var resizeLayout = "";
 var tagInput = "";
 const BKLAYERD_INDEX_EFAULT_VALUE = {
@@ -8461,6 +8462,7 @@ const loadingTypes = {
     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),
@@ -8479,9 +8481,9 @@ var Component$r = vue.defineComponent({
       "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
@@ -8499,15 +8501,15 @@ var Component$r = vue.defineComponent({
     });
     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)]);
     };
   }
 });
@@ -9921,7 +9923,7 @@ var Component$e = vue.defineComponent({
   render() {
     const radioClass = classes({
       "bk-radio": true,
-      "is-focus": this.isFocus,
+      "is-focusd": this.isFocus,
       "is-disabled": this.isDisabled,
       "is-checked": this.isCheck
     });
@@ -9980,7 +9982,7 @@ var RadioButton = vue.defineComponent({
   render() {
     const radioClass = classes({
       "bk-radio-button": true,
-      "is-focus": this.isFocus,
+      "is-focusd": this.isFocus,
       "is-disabled": this.isDisabled,
       "is-checked": this.isCheck
     });
@@ -10031,9 +10033,10 @@ var RadioGroup = vue.defineComponent({
     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 });
@@ -11710,7 +11713,7 @@ var Component$7 = vue.defineComponent({
   }
 });
 const BkSwitcher = withInstall(Component$7);
-const EventProps$1 = {
+const EventProps = {
   onContentScroll: Function
 };
 const virtualRenderProps = __spreadValues({
@@ -11733,7 +11736,7 @@ const virtualRenderProps = __spreadValues({
   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;
@@ -11962,10 +11965,7 @@ var Component$6 = vue.defineComponent({
 });
 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("")]),
@@ -11984,7 +11984,7 @@ const tableProps = __spreadValues({
   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);
 }
@@ -12084,6 +12084,8 @@ var useList = () => {
         localCurrent.value = proxy.totalPageNum;
       }
     });
+  }, {
+    immediate: true
   });
   vue.nextTick(() => {
     vue.watch(() => proxy.totalPageNum, (totalPageNum) => {
@@ -12363,7 +12365,7 @@ const paginationProps = {
 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 {
@@ -12398,7 +12400,7 @@ var Component$5 = vue.defineComponent({
       context.emit("change", smallListCurrent2);
     });
     vue.watch(localLimit, (localLimit2) => {
-      context.emit("limit-change", localLimit2);
+      context.emit("limitChange", localLimit2);
     });
     return {
       totalPageNum,
@@ -12603,14 +12605,14 @@ class TableRender {
     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);
@@ -12695,7 +12697,7 @@ class TableRender {
 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), {
@@ -13761,15 +13763,16 @@ var TagInput = vue.defineComponent({
 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") {
@@ -13794,46 +13797,73 @@ var bkDivider = vue.defineComponent({
   }
 });
 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) {
@@ -13904,18 +13934,15 @@ var TabNav = vue.defineComponent({
     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) {
@@ -13932,20 +13959,7 @@ var TabNav = vue.defineComponent({
       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);
@@ -13986,7 +14000,7 @@ var TabNav = vue.defineComponent({
         }
         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),
@@ -14018,26 +14032,29 @@ var TabNav = vue.defineComponent({
     });
     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": {
@@ -14046,9 +14063,7 @@ var TabNav = vue.defineComponent({
       "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({
@@ -14056,28 +14071,11 @@ var Tab = vue.defineComponent({
   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",
@@ -14094,7 +14092,7 @@ var Tab = vue.defineComponent({
     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();
@@ -14159,11 +14157,26 @@ var Tab = vue.defineComponent({
     },
     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);
@@ -14231,18 +14244,7 @@ var Tab = vue.defineComponent({
 });
 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 = () => {
@@ -14266,8 +14268,7 @@ var TabPanel = vue.defineComponent({
     }, [getContent()]), [[vue.vShow, active]]);
   }
 });
-const BKTab = withInstall(Tab);
-const BKTabPanel = withInstall(TabPanel);
+const BkTab = withInstallProps(Tab, { TabPanel });
 const instances = {
   "top-left": [],
   "top-right": [],
@@ -20124,8 +20125,8 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   Tag: BkTag,
   TagInput,
   Divider: BkDivider,
-  Tab: BKTab,
-  TabPanel: BKTabPanel,
+  Tab: BkTab,
+  TabPanel,
   Message,
   Notify,
   Menu: BkMenu,
@@ -20193,8 +20194,8 @@ exports.Sideslider = BkSideslider;
 exports.Steps = BkSteps;
 exports.Swiper = BkSwiper;
 exports.Switcher = BkSwitcher;
-exports.Tab = BKTab;
-exports.TabPanel = BKTabPanel;
+exports.Tab = BkTab;
+exports.TabPanel = TabPanel;
 exports.Table = BkTable;
 exports.Tag = BkTag;
 exports.TagInput = TagInput;