zartui 3.1.15 → 3.1.17-beta.1

package/lib/zartui.cjs.js

@@ -134,6 +134,20 @@ function colorFromCSSClass(className, defaultColor) {
   document.body.removeChild(tmp);
   return !classColor ? defaultColor : classColor;
 }
+const getTargetDom = (target) => {
+  if (target) {
+    if (typeof target === "string") {
+      return document.querySelectorAll(target)[0];
+    }
+    if (typeof target === "function") {
+      return target();
+    }
+    if (typeof target === "object" && target instanceof window.HTMLElement) {
+      return target;
+    }
+  }
+  return document.body;
+};
 const { width: windowWidth, height: windowHeight } = use.useWindowSize();
 function addUnit(value) {
   if (isDef(value)) {
@@ -3908,6 +3922,7 @@ var stdin_default$1v = vue.defineComponent({
     const root = vue.ref();
     const navRef = vue.ref();
     const wrapRef = vue.ref();
+    const navTopRef = vue.ref();
     const id = useId();
     const scroller = use.useScrollParent(root);
     const [titleRefs, setTitleRefs] = useRefs();
@@ -3941,7 +3956,11 @@ var stdin_default$1v = vue.defineComponent({
     const offsetTopPx = vue.computed(() => unitToPx(props.offsetTop));
     const scrollOffset = vue.computed(() => {
       if (props.sticky) {
-        return offsetTopPx.value + tabHeight;
+        let navTopHeight = 0;
+        if (navTopRef.value) {
+          navTopHeight = use.useRect(navTopRef.value).height;
+        }
+        return offsetTopPx.value + tabHeight + navTopHeight;
       }
       return 0;
     });
@@ -4208,7 +4227,7 @@ var stdin_default$1v = vue.defineComponent({
       scrollIntoView
     });
     return () => {
-      var _a;
+      var _a, _b;
       return vue.createVNode("div", {
         "ref": root,
         "class": bem$15([props.type])
@@ -4218,10 +4237,12 @@ var stdin_default$1v = vue.defineComponent({
         "onScroll": onStickyScroll
       }, {
         default: () => {
-          var _a2;
-          return [renderHeader(), (_a2 = slots["nav-bottom"]) == null ? void 0 : _a2.call(slots)];
+          var _a2, _b2;
+          return [slots["nav-top"] ? vue.createVNode("div", {
+            "ref": navTopRef
+          }, [(_a2 = slots["nav-top"]) == null ? void 0 : _a2.call(slots)]) : null, renderHeader(), (_b2 = slots["nav-bottom"]) == null ? void 0 : _b2.call(slots)];
         }
-      }) : [renderHeader(), (_a = slots["nav-bottom"]) == null ? void 0 : _a.call(slots)], vue.createVNode(stdin_default$1w, {
+      }) : [(_a = slots["nav-top"]) == null ? void 0 : _a.call(slots), renderHeader(), (_b = slots["nav-bottom"]) == null ? void 0 : _b.call(slots)], vue.createVNode(stdin_default$1w, {
         "count": children.length,
         "inited": state.inited,
         "animated": props.animated,
@@ -5652,6 +5673,7 @@ var stdin_default$1i = vue.defineComponent({
       toggle();
     };
     const renderTitle = () => {
+      var _a;
       const {
         titleBackground,
         color
@@ -5665,7 +5687,7 @@ var stdin_default$1i = vue.defineComponent({
           custom: titleBackground
         }),
         "style": color ? `background:${color};` : ""
-      }, null), vue.createVNode("span", {
+      }, null), slots.title ? (_a = slots.title) == null ? void 0 : _a.call(slots) : vue.createVNode("span", {
         "style": color ? `color:${color};` : "",
         "class": bem$V("text", {
           custom: titleBackground
@@ -7193,7 +7215,7 @@ var stdin_default$17 = vue.defineComponent({
         }
       }
       onClose();
-      emit("confirm");
+      emit("confirm", currentValue.value);
     };
     const onOpen = () => {
       var _a, _b, _c;
@@ -13969,6 +13991,7 @@ const FILE_SIZE_LIMIT = 100;
 const mediaPickerProps = {
   disabled: Boolean,
   showTitle: Boolean,
+  useFileNameAsLabel: Boolean,
   title: makeStringProp("添加附件"),
   mediaList: makeArrayProp(),
   // 图片压缩后的最大边长
@@ -14019,7 +14042,8 @@ var stdin_default$A = vue.defineComponent({
   props: mediaPickerProps,
   emits: ["update:mediaList", "delete"],
   setup(props, {
-    emit
+    emit,
+    slots
   }) {
     const videoOptionsVisible = vue.ref(false);
     const audioOptionsVisible = vue.ref(false);
@@ -14303,6 +14327,11 @@ var stdin_default$A = vue.defineComponent({
           newMedias = newMedias.concat(medias);
         }
       }).finally(() => {
+        if (props.useFileNameAsLabel) {
+          newMedias.forEach((newMedia) => {
+            newMedia.label = newMedia.originalName;
+          });
+        }
         emit("update:mediaList", [...props.mediaList, ...newMedias]);
         if (props.afterRead) {
           props.afterRead(newMedias);
@@ -14521,6 +14550,18 @@ var stdin_default$A = vue.defineComponent({
         }, null);
       }
     };
+    const renderMediaLabel = (media) => {
+      if (slots["preview-cover"]) {
+        return slots["preview-cover"]({
+          file: media
+        });
+      }
+      if (!isEmptyValue(media.label)) {
+        return vue.createVNode("div", {
+          "class": bem$t("thumbnail-label")
+        }, [media.label]);
+      }
+    };
     const onDelete = (media, index) => {
       if (props.beforeDelete) {
         const response = props.beforeDelete(media);
@@ -14574,7 +14615,7 @@ var stdin_default$A = vue.defineComponent({
         "key": media.uniqueCode,
         "onClick": () => previewMedia(index)
       }, {
-        default: () => [renderMediaThumbnail(media), genThumbnailMask(media), deleteIcon]
+        default: () => [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), deleteIcon]
       });
     });
     const selectAction = (action) => {
@@ -15925,7 +15966,8 @@ const pullRefreshProps = {
   loadingText: String,
   pullDistance: numericProp,
   successDuration: makeNumericProp(500),
-  animationDuration: makeNumericProp(300)
+  animationDuration: makeNumericProp(300),
+  scrollElement: null
 };
 var stdin_default$q = vue.defineComponent({
   name: name$k,
@@ -15938,7 +15980,17 @@ var stdin_default$q = vue.defineComponent({
     let reachTop;
     const root = vue.ref();
     const track = vue.ref();
-    const scrollParent = use.useScrollParent(root);
+    const rootScrollElement = use.useScrollParent(root);
+    const scrollParent = vue.computed(() => {
+      if (props.scrollElement) {
+        const targetDom = getTargetDom(props.scrollElement);
+        if (!targetDom) {
+          console.warn("请检查props scroll-element元素是否存在！");
+        }
+        return targetDom != null ? targetDom : rootScrollElement.value;
+      }
+      return rootScrollElement.value;
+    });
     const state = vue.reactive({
       status: "normal",
       distance: 0,
@@ -20561,7 +20613,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.15";
+const version = "3.1.16";
 function install(app) {
   const components = [
     ActionSheet,

package/lib/zartui.es.js

@@ -132,6 +132,20 @@ function colorFromCSSClass(className, defaultColor) {
   document.body.removeChild(tmp);
   return !classColor ? defaultColor : classColor;
 }
+const getTargetDom = (target) => {
+  if (target) {
+    if (typeof target === "string") {
+      return document.querySelectorAll(target)[0];
+    }
+    if (typeof target === "function") {
+      return target();
+    }
+    if (typeof target === "object" && target instanceof window.HTMLElement) {
+      return target;
+    }
+  }
+  return document.body;
+};
 const { width: windowWidth, height: windowHeight } = useWindowSize();
 function addUnit(value) {
   if (isDef(value)) {
@@ -3906,6 +3920,7 @@ var stdin_default$1v = defineComponent({
     const root = ref();
     const navRef = ref();
     const wrapRef = ref();
+    const navTopRef = ref();
     const id = useId();
     const scroller = useScrollParent(root);
     const [titleRefs, setTitleRefs] = useRefs();
@@ -3939,7 +3954,11 @@ var stdin_default$1v = defineComponent({
     const offsetTopPx = computed(() => unitToPx(props.offsetTop));
     const scrollOffset = computed(() => {
       if (props.sticky) {
-        return offsetTopPx.value + tabHeight;
+        let navTopHeight = 0;
+        if (navTopRef.value) {
+          navTopHeight = useRect(navTopRef.value).height;
+        }
+        return offsetTopPx.value + tabHeight + navTopHeight;
       }
       return 0;
     });
@@ -4206,7 +4225,7 @@ var stdin_default$1v = defineComponent({
       scrollIntoView
     });
     return () => {
-      var _a;
+      var _a, _b;
       return createVNode("div", {
         "ref": root,
         "class": bem$15([props.type])
@@ -4216,10 +4235,12 @@ var stdin_default$1v = defineComponent({
         "onScroll": onStickyScroll
       }, {
         default: () => {
-          var _a2;
-          return [renderHeader(), (_a2 = slots["nav-bottom"]) == null ? void 0 : _a2.call(slots)];
+          var _a2, _b2;
+          return [slots["nav-top"] ? createVNode("div", {
+            "ref": navTopRef
+          }, [(_a2 = slots["nav-top"]) == null ? void 0 : _a2.call(slots)]) : null, renderHeader(), (_b2 = slots["nav-bottom"]) == null ? void 0 : _b2.call(slots)];
         }
-      }) : [renderHeader(), (_a = slots["nav-bottom"]) == null ? void 0 : _a.call(slots)], createVNode(stdin_default$1w, {
+      }) : [(_a = slots["nav-top"]) == null ? void 0 : _a.call(slots), renderHeader(), (_b = slots["nav-bottom"]) == null ? void 0 : _b.call(slots)], createVNode(stdin_default$1w, {
         "count": children.length,
         "inited": state.inited,
         "animated": props.animated,
@@ -5650,6 +5671,7 @@ var stdin_default$1i = defineComponent({
       toggle();
     };
     const renderTitle = () => {
+      var _a;
       const {
         titleBackground,
         color
@@ -5663,7 +5685,7 @@ var stdin_default$1i = defineComponent({
           custom: titleBackground
         }),
         "style": color ? `background:${color};` : ""
-      }, null), createVNode("span", {
+      }, null), slots.title ? (_a = slots.title) == null ? void 0 : _a.call(slots) : createVNode("span", {
         "style": color ? `color:${color};` : "",
         "class": bem$V("text", {
           custom: titleBackground
@@ -7191,7 +7213,7 @@ var stdin_default$17 = defineComponent({
         }
       }
       onClose();
-      emit("confirm");
+      emit("confirm", currentValue.value);
     };
     const onOpen = () => {
       var _a, _b, _c;
@@ -13967,6 +13989,7 @@ const FILE_SIZE_LIMIT = 100;
 const mediaPickerProps = {
   disabled: Boolean,
   showTitle: Boolean,
+  useFileNameAsLabel: Boolean,
   title: makeStringProp("添加附件"),
   mediaList: makeArrayProp(),
   // 图片压缩后的最大边长
@@ -14017,7 +14040,8 @@ var stdin_default$A = defineComponent({
   props: mediaPickerProps,
   emits: ["update:mediaList", "delete"],
   setup(props, {
-    emit
+    emit,
+    slots
   }) {
     const videoOptionsVisible = ref(false);
     const audioOptionsVisible = ref(false);
@@ -14301,6 +14325,11 @@ var stdin_default$A = defineComponent({
           newMedias = newMedias.concat(medias);
         }
       }).finally(() => {
+        if (props.useFileNameAsLabel) {
+          newMedias.forEach((newMedia) => {
+            newMedia.label = newMedia.originalName;
+          });
+        }
         emit("update:mediaList", [...props.mediaList, ...newMedias]);
         if (props.afterRead) {
           props.afterRead(newMedias);
@@ -14519,6 +14548,18 @@ var stdin_default$A = defineComponent({
         }, null);
       }
     };
+    const renderMediaLabel = (media) => {
+      if (slots["preview-cover"]) {
+        return slots["preview-cover"]({
+          file: media
+        });
+      }
+      if (!isEmptyValue(media.label)) {
+        return createVNode("div", {
+          "class": bem$t("thumbnail-label")
+        }, [media.label]);
+      }
+    };
     const onDelete = (media, index) => {
       if (props.beforeDelete) {
         const response = props.beforeDelete(media);
@@ -14572,7 +14613,7 @@ var stdin_default$A = defineComponent({
         "key": media.uniqueCode,
         "onClick": () => previewMedia(index)
       }, {
-        default: () => [renderMediaThumbnail(media), genThumbnailMask(media), deleteIcon]
+        default: () => [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), deleteIcon]
       });
     });
     const selectAction = (action) => {
@@ -15923,7 +15964,8 @@ const pullRefreshProps = {
   loadingText: String,
   pullDistance: numericProp,
   successDuration: makeNumericProp(500),
-  animationDuration: makeNumericProp(300)
+  animationDuration: makeNumericProp(300),
+  scrollElement: null
 };
 var stdin_default$q = defineComponent({
   name: name$k,
@@ -15936,7 +15978,17 @@ var stdin_default$q = defineComponent({
     let reachTop;
     const root = ref();
     const track = ref();
-    const scrollParent = useScrollParent(root);
+    const rootScrollElement = useScrollParent(root);
+    const scrollParent = computed(() => {
+      if (props.scrollElement) {
+        const targetDom = getTargetDom(props.scrollElement);
+        if (!targetDom) {
+          console.warn("请检查props scroll-element元素是否存在！");
+        }
+        return targetDom != null ? targetDom : rootScrollElement.value;
+      }
+      return rootScrollElement.value;
+    });
     const state = reactive({
       status: "normal",
       distance: 0,
@@ -20559,7 +20611,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.15";
+const version = "3.1.16";
 function install(app) {
   const components = [
     ActionSheet,

package/lib/zartui.js

@@ -404,6 +404,20 @@
     document.body.removeChild(tmp);
     return !classColor ? defaultColor : classColor;
   }
+  const getTargetDom = (target) => {
+    if (target) {
+      if (typeof target === "string") {
+        return document.querySelectorAll(target)[0];
+      }
+      if (typeof target === "function") {
+        return target();
+      }
+      if (typeof target === "object" && target instanceof window.HTMLElement) {
+        return target;
+      }
+    }
+    return document.body;
+  };
   const { width: windowWidth, height: windowHeight } = useWindowSize();
   function addUnit(value) {
     if (isDef(value)) {
@@ -4175,6 +4189,7 @@
       const root = vue.ref();
       const navRef = vue.ref();
       const wrapRef = vue.ref();
+      const navTopRef = vue.ref();
       const id = useId();
       const scroller = useScrollParent(root);
       const [titleRefs, setTitleRefs] = useRefs();
@@ -4208,7 +4223,11 @@
       const offsetTopPx = vue.computed(() => unitToPx(props.offsetTop));
       const scrollOffset = vue.computed(() => {
         if (props.sticky) {
-          return offsetTopPx.value + tabHeight;
+          let navTopHeight = 0;
+          if (navTopRef.value) {
+            navTopHeight = useRect(navTopRef.value).height;
+          }
+          return offsetTopPx.value + tabHeight + navTopHeight;
         }
         return 0;
       });
@@ -4475,7 +4494,7 @@
         scrollIntoView
       });
       return () => {
-        var _a;
+        var _a, _b;
         return vue.createVNode("div", {
           "ref": root,
           "class": bem$15([props.type])
@@ -4485,10 +4504,12 @@
           "onScroll": onStickyScroll
         }, {
           default: () => {
-            var _a2;
-            return [renderHeader(), (_a2 = slots["nav-bottom"]) == null ? void 0 : _a2.call(slots)];
+            var _a2, _b2;
+            return [slots["nav-top"] ? vue.createVNode("div", {
+              "ref": navTopRef
+            }, [(_a2 = slots["nav-top"]) == null ? void 0 : _a2.call(slots)]) : null, renderHeader(), (_b2 = slots["nav-bottom"]) == null ? void 0 : _b2.call(slots)];
           }
-        }) : [renderHeader(), (_a = slots["nav-bottom"]) == null ? void 0 : _a.call(slots)], vue.createVNode(stdin_default$1w, {
+        }) : [(_a = slots["nav-top"]) == null ? void 0 : _a.call(slots), renderHeader(), (_b = slots["nav-bottom"]) == null ? void 0 : _b.call(slots)], vue.createVNode(stdin_default$1w, {
           "count": children.length,
           "inited": state.inited,
           "animated": props.animated,
@@ -5896,6 +5917,7 @@
         toggle();
       };
       const renderTitle = () => {
+        var _a;
         const {
           titleBackground,
           color
@@ -5909,7 +5931,7 @@
             custom: titleBackground
           }),
           "style": color ? `background:${color};` : ""
-        }, null), vue.createVNode("span", {
+        }, null), slots.title ? (_a = slots.title) == null ? void 0 : _a.call(slots) : vue.createVNode("span", {
           "style": color ? `color:${color};` : "",
           "class": bem$V("text", {
             custom: titleBackground
@@ -7437,7 +7459,7 @@
           }
         }
         onClose();
-        emit("confirm");
+        emit("confirm", currentValue.value);
       };
       const onOpen = () => {
         var _a, _b, _c;
@@ -14286,6 +14308,7 @@
   const mediaPickerProps = {
     disabled: Boolean,
     showTitle: Boolean,
+    useFileNameAsLabel: Boolean,
     title: makeStringProp("添加附件"),
     mediaList: makeArrayProp(),
     // 图片压缩后的最大边长
@@ -14336,7 +14359,8 @@
     props: mediaPickerProps,
     emits: ["update:mediaList", "delete"],
     setup(props, {
-      emit
+      emit,
+      slots
     }) {
       const videoOptionsVisible = vue.ref(false);
       const audioOptionsVisible = vue.ref(false);
@@ -14620,6 +14644,11 @@
             newMedias = newMedias.concat(medias);
           }
         }).finally(() => {
+          if (props.useFileNameAsLabel) {
+            newMedias.forEach((newMedia) => {
+              newMedia.label = newMedia.originalName;
+            });
+          }
           emit("update:mediaList", [...props.mediaList, ...newMedias]);
           if (props.afterRead) {
             props.afterRead(newMedias);
@@ -14838,6 +14867,18 @@
           }, null);
         }
       };
+      const renderMediaLabel = (media) => {
+        if (slots["preview-cover"]) {
+          return slots["preview-cover"]({
+            file: media
+          });
+        }
+        if (!isEmptyValue(media.label)) {
+          return vue.createVNode("div", {
+            "class": bem$t("thumbnail-label")
+          }, [media.label]);
+        }
+      };
       const onDelete = (media, index) => {
         if (props.beforeDelete) {
           const response = props.beforeDelete(media);
@@ -14891,7 +14932,7 @@
           "key": media.uniqueCode,
           "onClick": () => previewMedia(index)
         }, {
-          default: () => [renderMediaThumbnail(media), genThumbnailMask(media), deleteIcon]
+          default: () => [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), deleteIcon]
         });
       });
       const selectAction = (action) => {
@@ -17566,7 +17607,8 @@
     loadingText: String,
     pullDistance: numericProp,
     successDuration: makeNumericProp(500),
-    animationDuration: makeNumericProp(300)
+    animationDuration: makeNumericProp(300),
+    scrollElement: null
   };
   var stdin_default$q = vue.defineComponent({
     name: name$k,
@@ -17579,7 +17621,17 @@
       let reachTop;
       const root = vue.ref();
       const track = vue.ref();
-      const scrollParent = useScrollParent(root);
+      const rootScrollElement = useScrollParent(root);
+      const scrollParent = vue.computed(() => {
+        if (props.scrollElement) {
+          const targetDom = getTargetDom(props.scrollElement);
+          if (!targetDom) {
+            console.warn("请检查props scroll-element元素是否存在！");
+          }
+          return targetDom != null ? targetDom : rootScrollElement.value;
+        }
+        return rootScrollElement.value;
+      });
       const state = vue.reactive({
         status: "normal",
         distance: 0,
@@ -22179,7 +22231,7 @@
       });
     }
   };
-  const version = "3.1.15";
+  const version = "3.1.16";
   function install(app) {
     const components = [
       ActionSheet,