zartui 3.1.84 → 3.1.86

package/lib/zartui.js

@@ -9301,12 +9301,19 @@ var __publicField = (obj, key, value) => {
       default: false
     },
     defaultSelectNode: Object,
-    activeClassName: makeStringProp("")
+    activeClassName: makeStringProp(""),
+    commonTypeList: makeArrayProp(),
+    showCommonTypes: {
+      type: Boolean,
+      default: false
+    },
+    commonTypeVisibleCount: Number,
+    hotTypeList: makeArrayProp()
   };
   var stdin_default$14 = vue.defineComponent({
     name: name$L,
     props: drawerSelectProps,
-    emits: ["change", "select"],
+    emits: ["change", "select", "clearAll"],
     setup(props, {
       emit
     }) {
@@ -9318,8 +9325,17 @@ var __publicField = (obj, key, value) => {
       const searchRef = vue.ref();
       const offset2 = vue.ref(0);
       const historyList = vue.ref([]);
+      const showAllCommonTypes = vue.ref(false);
+      const selectCommonId = vue.ref(-1);
       const defaultTreeNode = vue.ref(props.treeData);
       const fields = vue.computed(() => assignDefaultFields$1(props.treeFieldName));
+      const visibleCommonTypeList = vue.computed(() => {
+        const count = props.commonTypeVisibleCount;
+        if (typeof count !== "number") {
+          return props.commonTypeList;
+        }
+        return props.commonTypeList.slice(0, Math.max(0, count));
+      });
       const {
         value,
         children,
@@ -9403,6 +9419,37 @@ var __publicField = (obj, key, value) => {
         updateOffset();
       });
       const isEmpty = (item) => !item[children] || item[children].length === 0;
+      const syncExpandNodeByParent = (item) => {
+        var _a, _b, _c;
+        const parent = (_a = item.parent) != null ? _a : [];
+        if (parent.length >= 2) {
+          const parentValue = (_b = parent[parent.length - 2]) == null ? void 0 : _b[value];
+          if (parentValue !== void 0) {
+            const stack = [...props.treeData];
+            while (stack.length > 0) {
+              const current2 = stack.shift();
+              if (!current2)
+                continue;
+              if (current2[value] === parentValue) {
+                expandNode.value = {
+                  text: current2[key],
+                  value: current2[value],
+                  children: current2[children]
+                };
+                return;
+              }
+              if ((_c = current2[children]) == null ? void 0 : _c.length) {
+                stack.push(...current2[children]);
+              }
+            }
+          }
+        }
+        expandNode.value = {
+          text: allData[key],
+          value: allData[value],
+          children: allData[children]
+        };
+      };
       const onLabelClick = (item, assign = true) => {
         const {
           text,
@@ -9419,6 +9466,7 @@ var __publicField = (obj, key, value) => {
           }
           if (isEmpty(item)) {
             selectNode.value = item;
+            selectCommonId.value = item[value2];
             emit("select", item);
           }
           item.checked = !item.checked;
@@ -9481,6 +9529,117 @@ var __publicField = (obj, key, value) => {
           }));
         }
       };
+      const findCommonTypeNode = (id) => {
+        return flatArray.value.find((item) => item[value] === id);
+      };
+      const onCommonTypeClick = (item) => {
+        const matchNode = findCommonTypeNode(item.types.id);
+        if (!matchNode)
+          return;
+        selectCommonId.value = item.types.id;
+        syncExpandNodeByParent(matchNode);
+        selectNode.value = matchNode;
+        emit("select", Object.assign(matchNode, {
+          parent: matchNode.parent
+        }));
+      };
+      const onClearCommonTypes = () => {
+        selectCommonId.value = -1;
+        showAllCommonTypes.value = false;
+        emit("clearAll");
+      };
+      const findHotTypeNode = (id) => {
+        return flatArray.value.find((item) => item[value] === id);
+      };
+      const renderCommonTypeButton = (item) => {
+        const active = item.types.id === selectCommonId.value;
+        return vue.createVNode(stdin_default$1L, {
+          "size": "small",
+          "class": [bem$L("common-types--btn")],
+          "type": active ? "primary" : "default",
+          "backgroundColor": active ? "#3388ff" : "var(--zt-background)",
+          "borderColor": active ? "#3388ff" : "var(--zt-border-color)",
+          "color": active ? "var(--zt-white)" : "var(--zt-text-color)",
+          "onClick": () => onCommonTypeClick(item)
+        }, {
+          default: () => [item.types.name]
+        });
+      };
+      const onHotTypeClick = (item) => {
+        const matchNode = findHotTypeNode(item.id);
+        if (!matchNode)
+          return;
+        selectCommonId.value = item.id;
+        syncExpandNodeByParent(matchNode);
+        selectNode.value = matchNode;
+        emit("select", Object.assign(matchNode, {
+          parent: matchNode.parent
+        }));
+      };
+      const renderHotTypeButton = (item) => {
+        const active = item.id === selectCommonId.value;
+        return vue.createVNode(stdin_default$1L, {
+          "size": "small",
+          "class": [bem$L("common-types--btn")],
+          "type": active ? "primary" : "default",
+          "backgroundColor": active ? "#3388ff" : "var(--zt-background)",
+          "borderColor": active ? "#3388ff" : "var(--zt-border-color)",
+          "color": active ? "var(--zt-white)" : "var(--zt-text-color)",
+          "onClick": () => onHotTypeClick(item)
+        }, {
+          default: () => [item.text || item.name]
+        });
+      };
+      const renderCommonTypes = () => {
+        if (!props.showCommonTypes)
+          return null;
+        return vue.createVNode("section", {
+          "class": [bem$L("common-types")]
+        }, [vue.createVNode("div", {
+          "class": [bem$L("common-types--head")]
+        }, [vue.createVNode("span", {
+          "class": [bem$L("common-types--label")]
+        }, [vue.createTextVNode("常用小类")]), visibleCommonTypeList.value.length > 0 ? vue.createVNode("div", {
+          "class": [bem$L("common-types--mask")]
+        }, [vue.createVNode("div", {
+          "class": [bem$L("common-types--viewport")]
+        }, [vue.createVNode("div", {
+          "class": [bem$L("common-types--list")]
+        }, [visibleCommonTypeList.value.map(renderCommonTypeButton)])])]) : vue.createVNode("div", {
+          "class": [bem$L("common-types--empty")]
+        }, [vue.createTextVNode("暂无常用小类")]), visibleCommonTypeList.value.length > 0 && vue.createVNode("div", {
+          "class": [bem$L("common-types--icon")],
+          "onClick": () => showAllCommonTypes.value = !showAllCommonTypes.value
+        }, [vue.createVNode(stdin_default$1_, {
+          "size": "24",
+          "name": showAllCommonTypes.value ? "keyboard-arrow-up" : "keyboard-arrow-down",
+          "color": showAllCommonTypes.value ? "var(--zt-primary-color)" : void 0
+        }, null)])]), showAllCommonTypes.value && visibleCommonTypeList.value.length > 0 && vue.createVNode("div", {
+          "class": [bem$L("common-types--panel")]
+        }, [vue.createVNode("div", {
+          "class": [bem$L("common-types--panel-list")]
+        }, [visibleCommonTypeList.value.map(renderCommonTypeButton)]), vue.createVNode("div", {
+          "class": [bem$L("common-types--clear")],
+          "onClick": onClearCommonTypes
+        }, [vue.createVNode(stdin_default$1_, {
+          "name": "delete",
+          "size": "20"
+        }, null), vue.createVNode("span", {
+          "class": [bem$L("common-types--clear-text")]
+        }, [vue.createTextVNode("清空常用小类")])])])]);
+      };
+      const renderHotTypes = () => {
+        var _a;
+        if (!((_a = props.hotTypeList) == null ? void 0 : _a.length))
+          return null;
+        return vue.createVNode("section", {
+          "class": [bem$L("hot-types")]
+        }, [vue.createVNode("div", {
+          "class": [bem$L("hot-types--label")]
+        }, [vue.createTextVNode("热点小类")]), vue.createVNode("div", {
+          "class": [bem$L("hot-types--list")]
+        }, [props.hotTypeList.map(renderHotTypeButton)])]);
+      };
       const renderSecondTree = (item) => {
         var _a, _b;
         const text = item[fields.value.text];
@@ -9616,7 +9775,7 @@ var __publicField = (obj, key, value) => {
           }, null), vue.createTextVNode("清空搜索历史")])]), historyList.value.length === 0 && vue.createVNode("div", {
             "class": [bem$L("empty")]
           }, [vue.createTextVNode("暂无搜索记录")])])]
-        })]), [[vue.vShow, show.value]])]), vue.createVNode("div", {
+        })]), [[vue.vShow, show.value]])]), renderCommonTypes(), renderHotTypes(), vue.createVNode("div", {
           "class": [bem$L("name"), "zt-hairline--bottom"]
         }, [props.title]), vue.createVNode("main", {
           "class": [bem$L("tree")]
@@ -21404,11 +21563,29 @@ var __publicField = (obj, key, value) => {
       const gridRef = vue.ref();
       const mediaListPlaceholder = vue.ref([]);
       const sort = vue.ref();
-      vue.watch(() => props.mediaList.length, () => {
+      const shouldIsolateSortableTouch = () => props.sortable && props.mediaList.length > 0;
+      const stopSortableTouchStartPropagation = (event) => {
+        if (!shouldIsolateSortableTouch()) {
+          return;
+        }
+        event.stopPropagation();
+      };
+      const destroySortable = () => {
         var _a;
-        if (sort.value || !props.sortable)
+        if ((_a = sort.value) == null ? void 0 : _a.destroy) {
+          sort.value.destroy();
+        }
+        sort.value = void 0;
+      };
+      const initSortable = () => __async$2(this, null, function* () {
+        var _a;
+        if (sort.value || !props.sortable || !props.mediaList.length)
+          return;
+        yield vue.nextTick();
+        const gridEl = (_a = gridRef.value) == null ? void 0 : _a.$el;
+        if (!gridEl)
           return;
-        sort.value = Sortable.create((_a = gridRef.value) == null ? void 0 : _a.$el, {
+        sort.value = Sortable.create(gridEl, {
           animation: 200,
           handle: ".zt-grid-item",
           onEnd: (evt) => {
@@ -22139,6 +22316,18 @@ var __publicField = (obj, key, value) => {
         actionVisible.value = false;
         action.func && action.func();
       };
+      vue.watch(() => [props.sortable, props.mediaList.length], (_0) => __async$2(this, [_0], function* ([sortable, mediaCount]) {
+        if (!sortable || !mediaCount) {
+          destroySortable();
+          return;
+        }
+        yield initSortable();
+      }), {
+        immediate: true
+      });
+      vue.onBeforeUnmount(() => {
+        destroySortable();
+      });
       useExpose({
         mediaPickAction,
         handleInputFiles,
@@ -22176,7 +22365,8 @@ var __publicField = (obj, key, value) => {
           "border": false,
           "square": true,
           "gutter": "4",
-          "class": bem$v("grid")
+          "class": bem$v("grid"),
+          "onTouchstart": stopSortableTouchStartPropagation
         }, {
           default: () => [renderMediaList()]
         }), [[vue.vShow, props.mediaList.length]]), vue.withDirectives(vue.createVNode(stdin_default$Y, {
@@ -31183,7 +31373,7 @@ var __publicField = (obj, key, value) => {
       });
     }
   };
-  const version = "3.1.84";
+  const version = "3.1.86";
   function install(app) {
     const components = [
       ActionSheet,