zartui 3.1.91 → 3.1.92

package/lib/zartui.cjs.js

@@ -9080,6 +9080,10 @@ var stdin_default$15 = vue.defineComponent({
     const historyList = vue.ref([]);
     const showAllCommonTypes = vue.ref(false);
     const selectCommonId = vue.ref(-1);
+    const commonTypesListRef = vue.ref();
+    const showLeftCommonTypesMask = vue.ref(false);
+    const showRightCommonTypesMask = vue.ref(false);
+    let commonTypesResizeObserver;
     const defaultTreeNode = vue.ref(props.treeData);
     const fields = vue.computed(() => assignDefaultFields$1(props.treeFieldName));
     const visibleCommonTypeList = vue.computed(() => {
@@ -9094,6 +9098,35 @@ var stdin_default$15 = vue.defineComponent({
       children,
       text: key
     } = fields.value;
+    const updateCommonTypesMask = () => {
+      const list = commonTypesListRef.value;
+      if (!list) {
+        showLeftCommonTypesMask.value = false;
+        showRightCommonTypesMask.value = false;
+        return;
+      }
+      const remainingScrollWidth = list.scrollWidth - list.clientWidth - list.scrollLeft;
+      showLeftCommonTypesMask.value = list.scrollLeft > 0;
+      showRightCommonTypesMask.value = remainingScrollWidth > 1;
+    };
+    const onCommonTypesScroll = () => {
+      updateCommonTypesMask();
+    };
+    const observeCommonTypesList = () => {
+      commonTypesResizeObserver == null ? void 0 : commonTypesResizeObserver.disconnect();
+      const list = commonTypesListRef.value;
+      if (!list || typeof ResizeObserver === "undefined") {
+        return;
+      }
+      commonTypesResizeObserver = new ResizeObserver(updateCommonTypesMask);
+      commonTypesResizeObserver.observe(list);
+    };
+    const updateCommonTypesLayout = () => {
+      vue.nextTick(() => {
+        observeCommonTypesList();
+        updateCommonTypesMask();
+      });
+    };
     const allData = {
       [value]: -1,
       [key]: "全部",
@@ -9170,6 +9203,13 @@ var stdin_default$15 = vue.defineComponent({
       };
       flatData(props.treeData);
       updateOffset();
+      updateCommonTypesLayout();
+    });
+    vue.watch(visibleCommonTypeList, updateCommonTypesLayout, {
+      flush: "post"
+    });
+    vue.onBeforeUnmount(() => {
+      commonTypesResizeObserver == null ? void 0 : commonTypesResizeObserver.disconnect();
     });
     const isEmpty = (item) => !item[children] || item[children].length === 0;
     const syncExpandNodeByParent = (item) => {
@@ -9357,11 +9397,16 @@ var stdin_default$15 = vue.defineComponent({
       }, [vue.createVNode("span", {
         "class": [bem$M("common-types--label")]
       }, [vue.createTextVNode("常用小类")]), visibleCommonTypeList.value.length > 0 ? vue.createVNode("div", {
-        "class": [bem$M("common-types--mask")]
+        "class": [bem$M("common-types--mask"), bem$M("common-types--mask", {
+          "left-mask": showLeftCommonTypesMask.value,
+          "right-mask": showRightCommonTypesMask.value
+        })]
       }, [vue.createVNode("div", {
         "class": [bem$M("common-types--viewport")]
       }, [vue.createVNode("div", {
-        "class": [bem$M("common-types--list")]
+        "ref": commonTypesListRef,
+        "class": [bem$M("common-types--list")],
+        "onScroll": onCommonTypesScroll
       }, [visibleCommonTypeList.value.map(renderCommonTypeButton)])])]) : vue.createVNode("div", {
         "class": [bem$M("common-types--empty")]
       }, [vue.createTextVNode("暂无常用小类")]), visibleCommonTypeList.value.length > 0 && vue.createVNode("div", {
@@ -24379,7 +24424,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.91";
+const version = "3.1.92";
 function install(app) {
   const components = [
     ActionSheet,

package/lib/zartui.es.js

@@ -9078,6 +9078,10 @@ var stdin_default$15 = defineComponent({
     const historyList = ref([]);
     const showAllCommonTypes = ref(false);
     const selectCommonId = ref(-1);
+    const commonTypesListRef = ref();
+    const showLeftCommonTypesMask = ref(false);
+    const showRightCommonTypesMask = ref(false);
+    let commonTypesResizeObserver;
     const defaultTreeNode = ref(props.treeData);
     const fields = computed(() => assignDefaultFields$1(props.treeFieldName));
     const visibleCommonTypeList = computed(() => {
@@ -9092,6 +9096,35 @@ var stdin_default$15 = defineComponent({
       children,
       text: key
     } = fields.value;
+    const updateCommonTypesMask = () => {
+      const list = commonTypesListRef.value;
+      if (!list) {
+        showLeftCommonTypesMask.value = false;
+        showRightCommonTypesMask.value = false;
+        return;
+      }
+      const remainingScrollWidth = list.scrollWidth - list.clientWidth - list.scrollLeft;
+      showLeftCommonTypesMask.value = list.scrollLeft > 0;
+      showRightCommonTypesMask.value = remainingScrollWidth > 1;
+    };
+    const onCommonTypesScroll = () => {
+      updateCommonTypesMask();
+    };
+    const observeCommonTypesList = () => {
+      commonTypesResizeObserver == null ? void 0 : commonTypesResizeObserver.disconnect();
+      const list = commonTypesListRef.value;
+      if (!list || typeof ResizeObserver === "undefined") {
+        return;
+      }
+      commonTypesResizeObserver = new ResizeObserver(updateCommonTypesMask);
+      commonTypesResizeObserver.observe(list);
+    };
+    const updateCommonTypesLayout = () => {
+      nextTick(() => {
+        observeCommonTypesList();
+        updateCommonTypesMask();
+      });
+    };
     const allData = {
       [value]: -1,
       [key]: "全部",
@@ -9168,6 +9201,13 @@ var stdin_default$15 = defineComponent({
       };
       flatData(props.treeData);
       updateOffset();
+      updateCommonTypesLayout();
+    });
+    watch(visibleCommonTypeList, updateCommonTypesLayout, {
+      flush: "post"
+    });
+    onBeforeUnmount(() => {
+      commonTypesResizeObserver == null ? void 0 : commonTypesResizeObserver.disconnect();
     });
     const isEmpty = (item) => !item[children] || item[children].length === 0;
     const syncExpandNodeByParent = (item) => {
@@ -9355,11 +9395,16 @@ var stdin_default$15 = defineComponent({
       }, [createVNode("span", {
         "class": [bem$M("common-types--label")]
       }, [createTextVNode("常用小类")]), visibleCommonTypeList.value.length > 0 ? createVNode("div", {
-        "class": [bem$M("common-types--mask")]
+        "class": [bem$M("common-types--mask"), bem$M("common-types--mask", {
+          "left-mask": showLeftCommonTypesMask.value,
+          "right-mask": showRightCommonTypesMask.value
+        })]
       }, [createVNode("div", {
         "class": [bem$M("common-types--viewport")]
       }, [createVNode("div", {
-        "class": [bem$M("common-types--list")]
+        "ref": commonTypesListRef,
+        "class": [bem$M("common-types--list")],
+        "onScroll": onCommonTypesScroll
       }, [visibleCommonTypeList.value.map(renderCommonTypeButton)])])]) : createVNode("div", {
         "class": [bem$M("common-types--empty")]
       }, [createTextVNode("暂无常用小类")]), visibleCommonTypeList.value.length > 0 && createVNode("div", {
@@ -24377,7 +24422,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.91";
+const version = "3.1.92";
 function install(app) {
   const components = [
     ActionSheet,

package/lib/zartui.js

@@ -9329,6 +9329,10 @@ var __publicField = (obj, key, value) => {
       const historyList = vue.ref([]);
       const showAllCommonTypes = vue.ref(false);
       const selectCommonId = vue.ref(-1);
+      const commonTypesListRef = vue.ref();
+      const showLeftCommonTypesMask = vue.ref(false);
+      const showRightCommonTypesMask = vue.ref(false);
+      let commonTypesResizeObserver;
       const defaultTreeNode = vue.ref(props.treeData);
       const fields = vue.computed(() => assignDefaultFields$1(props.treeFieldName));
       const visibleCommonTypeList = vue.computed(() => {
@@ -9343,6 +9347,35 @@ var __publicField = (obj, key, value) => {
         children,
         text: key
       } = fields.value;
+      const updateCommonTypesMask = () => {
+        const list = commonTypesListRef.value;
+        if (!list) {
+          showLeftCommonTypesMask.value = false;
+          showRightCommonTypesMask.value = false;
+          return;
+        }
+        const remainingScrollWidth = list.scrollWidth - list.clientWidth - list.scrollLeft;
+        showLeftCommonTypesMask.value = list.scrollLeft > 0;
+        showRightCommonTypesMask.value = remainingScrollWidth > 1;
+      };
+      const onCommonTypesScroll = () => {
+        updateCommonTypesMask();
+      };
+      const observeCommonTypesList = () => {
+        commonTypesResizeObserver == null ? void 0 : commonTypesResizeObserver.disconnect();
+        const list = commonTypesListRef.value;
+        if (!list || typeof ResizeObserver === "undefined") {
+          return;
+        }
+        commonTypesResizeObserver = new ResizeObserver(updateCommonTypesMask);
+        commonTypesResizeObserver.observe(list);
+      };
+      const updateCommonTypesLayout = () => {
+        vue.nextTick(() => {
+          observeCommonTypesList();
+          updateCommonTypesMask();
+        });
+      };
       const allData = {
         [value]: -1,
         [key]: "全部",
@@ -9419,6 +9452,13 @@ var __publicField = (obj, key, value) => {
         };
         flatData(props.treeData);
         updateOffset();
+        updateCommonTypesLayout();
+      });
+      vue.watch(visibleCommonTypeList, updateCommonTypesLayout, {
+        flush: "post"
+      });
+      vue.onBeforeUnmount(() => {
+        commonTypesResizeObserver == null ? void 0 : commonTypesResizeObserver.disconnect();
       });
       const isEmpty = (item) => !item[children] || item[children].length === 0;
       const syncExpandNodeByParent = (item) => {
@@ -9606,11 +9646,16 @@ var __publicField = (obj, key, value) => {
         }, [vue.createVNode("span", {
           "class": [bem$M("common-types--label")]
         }, [vue.createTextVNode("常用小类")]), visibleCommonTypeList.value.length > 0 ? vue.createVNode("div", {
-          "class": [bem$M("common-types--mask")]
+          "class": [bem$M("common-types--mask"), bem$M("common-types--mask", {
+            "left-mask": showLeftCommonTypesMask.value,
+            "right-mask": showRightCommonTypesMask.value
+          })]
         }, [vue.createVNode("div", {
           "class": [bem$M("common-types--viewport")]
         }, [vue.createVNode("div", {
-          "class": [bem$M("common-types--list")]
+          "ref": commonTypesListRef,
+          "class": [bem$M("common-types--list")],
+          "onScroll": onCommonTypesScroll
         }, [visibleCommonTypeList.value.map(renderCommonTypeButton)])])]) : vue.createVNode("div", {
           "class": [bem$M("common-types--empty")]
         }, [vue.createTextVNode("暂无常用小类")]), visibleCommonTypeList.value.length > 0 && vue.createVNode("div", {
@@ -31892,7 +31937,7 @@ var __publicField = (obj, key, value) => {
       });
     }
   };
-  const version = "3.1.91";
+  const version = "3.1.92";
   function install(app) {
     const components = [
       ActionSheet,