zartui 3.1.85 → 3.1.86

package/lib/zartui.cjs.js

@@ -16334,11 +16334,29 @@ var stdin_default$D = vue.defineComponent({
     const gridRef = vue.ref();
     const mediaListPlaceholder = vue.ref([]);
     const sort2 = 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 (sort2.value || !props.sortable)
+      if ((_a = sort2.value) == null ? void 0 : _a.destroy) {
+        sort2.value.destroy();
+      }
+      sort2.value = void 0;
+    };
+    const initSortable = () => __async$2(this, null, function* () {
+      var _a;
+      if (sort2.value || !props.sortable || !props.mediaList.length)
+        return;
+      yield vue.nextTick();
+      const gridEl = (_a = gridRef.value) == null ? void 0 : _a.$el;
+      if (!gridEl)
         return;
-      sort2.value = Sortable.create((_a = gridRef.value) == null ? void 0 : _a.$el, {
+      sort2.value = Sortable.create(gridEl, {
         animation: 200,
         handle: ".zt-grid-item",
         onEnd: (evt) => {
@@ -17069,6 +17087,18 @@ var stdin_default$D = vue.defineComponent({
       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,
@@ -17106,7 +17136,8 @@ var stdin_default$D = vue.defineComponent({
         "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, {
@@ -23829,7 +23860,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.85";
+const version = "3.1.86";
 function install(app) {
   const components = [
     ActionSheet,

package/lib/zartui.es.js

@@ -16332,11 +16332,29 @@ var stdin_default$D = defineComponent({
     const gridRef = ref();
     const mediaListPlaceholder = ref([]);
     const sort2 = ref();
-    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 (sort2.value || !props.sortable)
+      if ((_a = sort2.value) == null ? void 0 : _a.destroy) {
+        sort2.value.destroy();
+      }
+      sort2.value = void 0;
+    };
+    const initSortable = () => __async$2(this, null, function* () {
+      var _a;
+      if (sort2.value || !props.sortable || !props.mediaList.length)
+        return;
+      yield nextTick();
+      const gridEl = (_a = gridRef.value) == null ? void 0 : _a.$el;
+      if (!gridEl)
         return;
-      sort2.value = Sortable.create((_a = gridRef.value) == null ? void 0 : _a.$el, {
+      sort2.value = Sortable.create(gridEl, {
         animation: 200,
         handle: ".zt-grid-item",
         onEnd: (evt) => {
@@ -17067,6 +17085,18 @@ var stdin_default$D = defineComponent({
       actionVisible.value = false;
       action.func && action.func();
     };
+    watch(() => [props.sortable, props.mediaList.length], (_0) => __async$2(this, [_0], function* ([sortable, mediaCount]) {
+      if (!sortable || !mediaCount) {
+        destroySortable();
+        return;
+      }
+      yield initSortable();
+    }), {
+      immediate: true
+    });
+    onBeforeUnmount(() => {
+      destroySortable();
+    });
     useExpose({
       mediaPickAction,
       handleInputFiles,
@@ -17104,7 +17134,8 @@ var stdin_default$D = defineComponent({
         "border": false,
         "square": true,
         "gutter": "4",
-        "class": bem$v("grid")
+        "class": bem$v("grid"),
+        "onTouchstart": stopSortableTouchStartPropagation
       }, {
         default: () => [renderMediaList()]
       }), [[vShow, props.mediaList.length]]), withDirectives(createVNode(stdin_default$Y, {
@@ -23827,7 +23858,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.85";
+const version = "3.1.86";
 function install(app) {
   const components = [
     ActionSheet,

package/lib/zartui.js

@@ -21563,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) => {
@@ -22298,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,
@@ -22335,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, {
@@ -31342,7 +31373,7 @@ var __publicField = (obj, key, value) => {
       });
     }
   };
-  const version = "3.1.85";
+  const version = "3.1.86";
   function install(app) {
     const components = [
       ActionSheet,