bkui-vue 0.0.1-beta.69 → 0.0.1-beta.71

package/dist/index.esm.js

@@ -12468,10 +12468,11 @@ var useTagRender = (props, ctx) => {
     renderAs,
     contentAs
   } = props;
-  const handleScrollCallback = (event, _startIndex, _endIndex, _scrollTop, translateY, scrollLeft) => {
+  const handleScrollCallback = (event, _startIndex, _endIndex, _scrollTop, translateY, scrollLeft, pos) => {
     ctx.emit("content-scroll", [event, {
       translateY,
-      translateX: scrollLeft
+      translateX: scrollLeft,
+      pos
     }]);
   };
   const vVirtualRender = resolveDirective("bkVirtualRender");
@@ -12535,7 +12536,8 @@ function computedVirtualIndex(lineHeight, callback, pagination2, el, event) {
     targetEndIndex = endValue.startIndex + targetStartIndex + 1;
   }
   if (elScrollTop !== scrollTop || targetStartIndex !== startIndex || targetEndIndex !== endIndex) {
-    typeof callback === "function" && callback(event, targetStartIndex, targetEndIndex, elScrollTop, translateY, elScrollLeft);
+    const bottom2 = el.scrollHeight - el.offsetHeight - el.scrollTop;
+    typeof callback === "function" && callback(event, targetStartIndex, targetEndIndex, elScrollTop, translateY, elScrollLeft, { bottom: bottom2 });
   }
 }
 function visibleRender(e, wrapper, binding) {
@@ -12543,21 +12545,16 @@ function visibleRender(e, wrapper, binding) {
   if (onlyScroll) {
     const elScrollTop = wrapper.scrollTop;
     const elScrollLeft = wrapper.scrollLeft;
-    handleScrollCallback(e, null, null, elScrollTop, elScrollTop, elScrollLeft);
+    const bottom2 = wrapper.scrollHeight - wrapper.offsetHeight - wrapper.scrollTop;
+    handleScrollCallback(e, null, null, elScrollTop, elScrollTop, elScrollLeft, { bottom: bottom2 });
     return;
   }
   const { startIndex, endIndex, groupItemCount, count, scrollTop } = pagination2;
   computedVirtualIndex(lineHeight, handleScrollCallback, { scrollTop, startIndex, endIndex, groupItemCount, count }, wrapper, e);
 }
 const throttledRender = (delay = 60) => lodash.exports.throttle((e, wrapper, binding) => visibleRender(e, wrapper, binding), delay);
-let cachedThrottle = null;
 const executeThrottledRender = (e, wrapper, binding, delay = 60) => {
-  if (!cachedThrottle) {
-    cachedThrottle = throttledRender(delay);
-  }
-  if (typeof cachedThrottle === "function") {
-    cachedThrottle.call(globalThis, e, wrapper, binding);
-  }
+  Reflect.apply(throttledRender(delay), globalThis, [e, wrapper, binding]);
 };
 var virtualRender = {
   mounted(el, binding) {
@@ -12567,11 +12564,6 @@ var virtualRender = {
       executeThrottledRender(e, wrapper, binding, throttleDelay);
     });
   },
-  updated(el, binding) {
-    const wrapper = el.parentNode;
-    const { throttleDelay } = binding.value;
-    executeThrottledRender(null, wrapper, binding, throttleDelay);
-  },
   unbind(el) {
     if (el) {
       const wrapper = el.parentNode;
@@ -12617,14 +12609,16 @@ var Component$a = defineComponent({
       translateY: 0,
       translateX: 0,
       count: 0,
+      pos: {},
       groupItemCount: props.groupItemCount
     });
-    const handleScrollCallback = (event, startIndex, endIndex, scrollTop, translateY, scrollLeft) => {
+    const handleScrollCallback = (event, startIndex, endIndex, scrollTop, translateY, scrollLeft, pos) => {
       pagination2.startIndex = startIndex;
       pagination2.endIndex = endIndex;
       pagination2.scrollTop = scrollTop;
       pagination2.translateY = translateY;
       pagination2.translateX = scrollLeft;
+      pagination2.pos = pos;
       ctx.emit("content-scroll", [event, pagination2]);
     };
     onMounted(() => {
@@ -14299,8 +14293,13 @@ class TableRender {
 }
 const useClass = (props, root, reactiveProp) => {
   const autoHeight = ref(200);
+  const hasScrollY = ref(false);
+  const hasFooter = computed(() => props.pagination && props.data.length);
   const tableClass = computed(() => classes({
-    [resolveClassName("table")]: true
+    [resolveClassName("table")]: true,
+    "has-footer": hasFooter.value,
+    "has-scroll-y": hasScrollY.value || props.virtualEnabled,
+    "is-scroll-bottom": reactiveProp.pos.bottom < 2
   }, resolvePropBorderToClassStr(props.border)));
   const headClass = classes({
     [resolveClassName("table-head")]: true
@@ -14335,23 +14334,24 @@ const useClass = (props, root, reactiveProp) => {
     }
     return defaultValue;
   };
-  const contentStyle = computed(() => {
+  const contentStyle = reactive({});
+  const resolveContentStyle = () => {
     const resolveHeight = resolvePropHeight(props.height, autoHeight.value);
     const resolveHeadHeight = props.showHead ? resolvePropHeight(props.headHeight, 40) + 2 : 0;
     const resolveMaxHeight = resolvePropHeight(props.maxHeight, autoHeight.value);
     const resolveMinHeight = resolvePropHeight(props.minHeight, autoHeight.value);
     const resolveFooterHeight = props.pagination && props.data.length ? 40 : 0;
     const contentHeight = resolveHeight - resolveHeadHeight - resolveFooterHeight;
+    const height = props.height !== "auto" ? `${contentHeight}px` : false;
     const maxHeight = resolveMaxHeight - resolveHeadHeight - resolveFooterHeight;
     const minHeight = resolveMinHeight - resolveHeadHeight - resolveFooterHeight;
-    const height = props.height !== "auto" ? `${contentHeight}px` : "auto";
-    return {
+    Object.assign(contentStyle, {
       display: "block",
       "max-height": `${maxHeight}px`,
       "min-height": `${minHeight}px`,
       height
-    };
-  });
+    });
+  };
   onMounted(() => {
     resetTableHeight(root == null ? void 0 : root.value);
   });
@@ -14359,9 +14359,27 @@ const useClass = (props, root, reactiveProp) => {
     if (rootEl) {
       const { height } = rootEl.parentElement.getBoundingClientRect();
       autoHeight.value = height;
+      resolveContentStyle();
     }
   };
-  return { tableClass, headClass, contentClass, footerClass, wrapperStyle, contentStyle, headStyle, resetTableHeight };
+  const updateBorderClass = (root2) => {
+    if (root2) {
+      const tableBody = root2.querySelector(".bk-table-body table");
+      hasScrollY.value = tableBody.offsetHeight > root2.offsetHeight;
+    }
+  };
+  return {
+    tableClass,
+    headClass,
+    contentClass,
+    footerClass,
+    wrapperStyle,
+    contentStyle,
+    headStyle,
+    resetTableHeight,
+    updateBorderClass,
+    hasFooter
+  };
 };
 var Component$8 = defineComponent({
   name: "Table",
@@ -14387,6 +14405,9 @@ var Component$8 = defineComponent({
     const reactiveProp = reactive({
       scrollTranslateY: 0,
       scrollTranslateX: 0,
+      pos: {
+        bottom: 1
+      },
       activeColumns,
       setting: {
         size: null,
@@ -14407,15 +14428,20 @@ var Component$8 = defineComponent({
       wrapperStyle,
       contentStyle,
       headStyle,
-      resetTableHeight
+      updateBorderClass,
+      hasFooter
     } = useClass(props, root, reactiveProp);
     const {
       renderFixedColumns,
       fixedWrapperClass
     } = useFixedColumn(props, colgroups);
     const tableRender = new TableRender(props, ctx, reactiveProp, colgroups);
-    watchEffect(() => {
+    watch(() => [props.data], () => {
       watchEffectFn(columnFilterFn, columnSortFn);
+      nextTick(() => updateBorderClass(root.value));
+    }, {
+      immediate: true,
+      deep: true
     });
     tableRender.on(EVENTS$1.ON_SORT_BY_CLICK, (args) => {
       const {
@@ -14441,15 +14467,16 @@ var Component$8 = defineComponent({
       const pagination2 = args[1];
       const {
         translateX,
-        translateY
+        translateY,
+        pos = {}
       } = pagination2;
       reactiveProp.scrollTranslateY = translateY;
       reactiveProp.scrollTranslateX = translateX;
+      reactiveProp.pos = pos;
     };
     onMounted(() => {
       observerIns = observerResize(root.value, () => {
         resolveColumnWidth(root.value, colgroups, 20);
-        resetTableHeight(root.value);
       }, 60, true);
       observerIns.start();
     });
@@ -14474,7 +14501,7 @@ var Component$8 = defineComponent({
         "ref": refVirtualRender,
         "lineHeight": tableRender.getRowHeight,
         "class": contentClass,
-        "style": contentStyle.value,
+        "style": contentStyle,
         "list": pageData,
         "onContentScroll": handleScrollChanged,
         "throttleDelay": 0,
@@ -14491,7 +14518,7 @@ var Component$8 = defineComponent({
       }, null)]),
       createVNode("div", {
         "class": footerClass.value
-      }, [props.pagination && props.data.length && tableRender.renderTableFooter(localPagination.value)])
+      }, [hasFooter.value && tableRender.renderTableFooter(localPagination.value)])
     ]);
   }
 });
@@ -21046,6 +21073,8 @@ var NODE_ATTRIBUTES = /* @__PURE__ */ ((NODE_ATTRIBUTES2) => {
   NODE_ATTRIBUTES2["IS_ASYNC_INIT"] = "__is_async_init";
   NODE_ATTRIBUTES2["IS_MATCH"] = "__is_match";
   NODE_ATTRIBUTES2["IS_NULL"] = "__IS_NULL";
+  NODE_ATTRIBUTES2["IS_CACHED"] = "__is_cached";
+  NODE_ATTRIBUTES2["IS_ASYNC"] = "__is_async";
   return NODE_ATTRIBUTES2;
 })(NODE_ATTRIBUTES || {});
 const treeProps = {
@@ -21094,7 +21123,7 @@ const treeProps = {
   draggable: PropTypes.bool.def(false),
   dragSort: PropTypes.bool.def(false),
   selectable: PropTypes.bool.def(true),
-  selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.any]).def(null)
+  selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).def(null)
 };
 var useEmpty = (props, {
   slots
@@ -21270,7 +21299,7 @@ const resolveNodeItem = (node) => {
   if (node === void 0 || node === null) {
     return { __IS_NULL: true };
   }
-  if (typeof node === "string") {
+  if (typeof node === "string" || typeof node === "number" || typeof node === "symbol") {
     return { [NODE_ATTRIBUTES.UUID]: node };
   }
   if (Object.prototype.hasOwnProperty.call(node, NODE_ATTRIBUTES.UUID)) {
@@ -21290,17 +21319,20 @@ var useNodeAsync = (props, flatData) => {
       setNodeAttr(item, NODE_ATTRIBUTES.IS_OPENED, true);
       const nodeValue = Array.isArray(resp) ? resp : [resp];
       updateTreeNode(getNodePath(item), props.data, props.children, props.children, nodeValue);
+      return Promise.resolve(resp);
     }
+    return Promise.reject(resp);
   };
   const asyncNodeClick = (item) => {
-    if (item.async) {
+    if (getNodeAttr2(item, NODE_ATTRIBUTES.IS_ASYNC)) {
       const {
         callback = null,
         cache = true
       } = props.async || {};
       setNodeAttr(item, NODE_ATTRIBUTES.IS_ASYNC_INIT, true);
       if (typeof callback === "function") {
-        if (!item.cached) {
+        if (!getNodeAttr2(item, NODE_ATTRIBUTES.IS_CACHED)) {
+          setNodeAttr(item, NODE_ATTRIBUTES.IS_CACHED, cache);
           Object.assign(item, {
             loading: true
           });
@@ -21316,6 +21348,7 @@ var useNodeAsync = (props, flatData) => {
       }
       return Promise.reject("async need to set prop: asyncLoad with function wich will return promise object");
     }
+    return Promise.resolve(true);
   };
   const deepAutoOpen = () => {
     const autoOpenNodes = flatData.data.filter((item) => item.async && item.isOpen && !getNodeAttr2(item, NODE_ATTRIBUTES.IS_ASYNC_INIT));
@@ -21466,25 +21499,39 @@ var useNodeAction = (props, ctx, flatData, renderData, schemaValues) => {
     hanldeTreeNodeClick(node, e);
   };
   const setSelect = (uuid2, selected = true, autoOpen = true) => {
-    const resolvedItem = resolveNodeItem(uuid2);
+    const nodeList2 = Array.isArray(uuid2) ? uuid2 : [uuid2];
+    if (!nodeList2.length) {
+      return;
+    }
+    const resolvedItem = resolveNodeItem(nodeList2[0]);
     if (resolvedItem[NODE_ATTRIBUTES.IS_NULL]) {
       return;
     }
     if (props.selectable) {
-      if (selectedNodeId !== null) {
+      if (selectedNodeId !== null && selectedNodeId !== void 0) {
         setNodeAttr({
           [NODE_ATTRIBUTES.UUID]: selectedNodeId
         }, NODE_ATTRIBUTES.IS_SELECTED, !selected);
       }
       setNodeAttr(resolvedItem, NODE_ATTRIBUTES.IS_SELECTED, selected);
       selectedNodeId = getNodeId(resolvedItem);
-    }
-    if (autoOpen) {
-      setOpen(uuid2, true, true);
+      if (autoOpen && nodeList2.length === 1) {
+        setOpen(resolvedItem, true, true);
+      }
+      if (getNodeAttr2(resolvedItem, NODE_ATTRIBUTES.IS_ASYNC)) {
+        asyncNodeClick(resolvedItem).then(() => {
+          nextTick(() => {
+            nodeList2.shift();
+            setSelect(nodeList2, selected, autoOpen);
+          });
+        });
+      }
+    } else {
+      console.warn("props.selectable is false or undefined, please set selectable with true");
     }
   };
   const handleNodeContentClick = (item, e) => {
-    setSelect(item);
+    setSelect(item, true, false);
     if (!isNodeOpened(item)) {
       hanldeTreeNodeClick(item, e);
     }
@@ -21863,10 +21910,26 @@ var useTreeInit = (props) => {
     const outputData = [];
     let order2 = 0;
     const schema = /* @__PURE__ */ new Map();
+    function loopUpdateNodeAttr(uuid2, attrName, attrValue, callFn) {
+      if (uuid2 === void 0 || uuid2 === null) {
+        return;
+      }
+      if (schema.has(uuid2) && ![NODE_ATTRIBUTES.UUID, NODE_ATTRIBUTES.PARENT_ID].includes(attrName)) {
+        const target = schema.get(uuid2);
+        if (Object.prototype.hasOwnProperty.call(target, attrName)) {
+          if (typeof callFn === "function" && Reflect.apply(callFn, self, [target, attrName, attrValue])) {
+            Object.assign(target, {
+              [attrName]: attrValue
+            });
+            loopUpdateNodeAttr(target[NODE_ATTRIBUTES.PARENT_ID], attrName, attrValue, callFn);
+          }
+        }
+      }
+    }
     function getUid(item) {
       let uid = null;
       if (typeof props2.nodeKey === "string") {
-        uid = item[props2.nodeKey];
+        uid = item[props2.nodeKey] || uuid_1.v4();
       }
       return uid || item[NODE_ATTRIBUTES.UUID] || uuid_1.v4();
     }
@@ -21876,7 +21939,7 @@ var useTreeInit = (props) => {
       if (cached) {
         result = cached[cachedAttr];
       } else {
-        result = node[attr];
+        result = attr === null ? void 0 : node[attr];
       }
       if (result === void 0) {
         result = defVal;
@@ -21893,7 +21956,16 @@ var useTreeInit = (props) => {
       return getCachedTreeNodeAttr(uuid2, node, "isMatch", NODE_ATTRIBUTES.IS_MATCH, true);
     }
     function isCachedTreeNodeSelected(uuid2, node) {
-      return getCachedTreeNodeAttr(uuid2, node, "isSelected", NODE_ATTRIBUTES.IS_SELECTED, false);
+      return getCachedTreeNodeAttr(uuid2, node, null, NODE_ATTRIBUTES.IS_SELECTED, false);
+    }
+    function isCachedTreeNodeHasCached(uuid2, node) {
+      return getCachedTreeNodeAttr(uuid2, node, "cached", NODE_ATTRIBUTES.IS_CACHED, false);
+    }
+    function isCachedTreeNodeAsync(uuid2, node) {
+      return getCachedTreeNodeAttr(uuid2, node, "async", NODE_ATTRIBUTES.IS_ASYNC, false);
+    }
+    function validateIsOpenLoopFn(target) {
+      return !target[NODE_ATTRIBUTES.IS_OPENED];
     }
     function flatten(array, depth = 0, parent = null, path = null) {
       const arrLength = array.length;
@@ -21919,6 +21991,8 @@ var useTreeInit = (props) => {
               [NODE_ATTRIBUTES.IS_MATCH]: isCachedTreeNodeMatch(uuid2, item),
               [NODE_ATTRIBUTES.IS_OPENED]: isCachedTreeNodeOpened(uuid2, item),
               [NODE_ATTRIBUTES.IS_CHECKED]: isCachedTreeNodeChecked(uuid2, item),
+              [NODE_ATTRIBUTES.IS_CACHED]: isCachedTreeNodeHasCached(uuid2, item),
+              [NODE_ATTRIBUTES.IS_ASYNC]: isCachedTreeNodeAsync(uuid2, item),
               [children]: null
             };
             Object.assign(item, {
@@ -21929,6 +22003,9 @@ var useTreeInit = (props) => {
             outputData.push(__spreadProps(__spreadValues({}, item), {
               [children]: null
             }));
+            if (attrs[NODE_ATTRIBUTES.IS_OPENED] || attrs[NODE_ATTRIBUTES.IS_SELECTED]) {
+              loopUpdateNodeAttr(parent, NODE_ATTRIBUTES.IS_OPENED, true, validateIsOpenLoopFn);
+            }
             if (Object.prototype.hasOwnProperty.call(item, children)) {
               flatten(item[children] || [], depth + 1, uuid2, currentPath);
             }
@@ -21940,6 +22017,7 @@ var useTreeInit = (props) => {
     return [outputData, schema];
   };
   const formatData = getFlatdata(props);
+  const loopEvents = [];
   const flatData = reactive({
     data: formatData[0],
     schema: formatData[1],
@@ -21958,9 +22036,17 @@ var useTreeInit = (props) => {
     if (((_a2 = props.async) == null ? void 0 : _a2.callback) && ((_b = props.async) == null ? void 0 : _b.deepAutoOpen) === "every") {
       deepAutoOpen();
     }
+    nextTick(() => {
+      loopEvents.forEach((event) => {
+        Reflect.apply(event, globalThis, []);
+      });
+    });
   }, {
     deep: true
   });
+  const afterDataUpdate = (callFn) => {
+    loopEvents.push(callFn);
+  };
   if ((_a = props.async) == null ? void 0 : _a.callback) {
     deepAutoOpen();
   }
@@ -21968,7 +22054,8 @@ var useTreeInit = (props) => {
     flatData,
     schemaValues,
     asyncNodeClick,
-    deepAutoOpen
+    deepAutoOpen,
+    afterDataUpdate
   };
 };
 var Component$2 = defineComponent({
@@ -21978,7 +22065,8 @@ var Component$2 = defineComponent({
   setup(props, ctx) {
     const {
       flatData,
-      schemaValues
+      schemaValues,
+      afterDataUpdate
     } = useTreeInit(props);
     const {
       setNodeAttr,
@@ -22031,7 +22119,7 @@ var Component$2 = defineComponent({
     };
     if (props.selectable) {
       watch(() => props.selected, (newData) => {
-        setSelect(newData, true, true);
+        afterDataUpdate(() => setSelect(newData, true, true));
       }, {
         immediate: true
       });