zartui 3.1.85 → 3.1.86

package/es/index.d.ts

@@ -85,4 +85,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.1.85";
+export const version: "3.1.86";

package/es/index.mjs

@@ -78,7 +78,7 @@ import { Timeline } from "./timeline/index.mjs";
 import { Toast } from "./toast/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
 import { Video } from "./video/index.mjs";
-const version = "3.1.85";
+const version = "3.1.86";
 function install(app) {
   const components = [
     ActionSheet,

package/es/media-picker/MediaPicker.mjs

@@ -20,7 +20,7 @@ var __async = (__this, __arguments, generator) => {
 };
 import { createVNode as _createVNode, mergeProps as _mergeProps, vShow as _vShow, withDirectives as _withDirectives } from "vue";
 import { createNamespace, isDef, isWeixin, makeArrayProp, makeNumberProp, makeStringProp, truthProp } from "../utils/index.mjs";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, nextTick, onBeforeUnmount, ref, watch } from "vue";
 import { showFailToast, showLoadingToast, closeToast } from "../toast/index.mjs";
 import DeleteIcon from "./image/DeleteIcon.mjs";
 import { fileTypeFromBuffer } from "file-type";
@@ -147,11 +147,29 @@ var stdin_default = defineComponent({
     const gridRef = ref();
     const mediaListPlaceholder = ref([]);
     const sort = 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 ((_a = sort.value) == null ? void 0 : _a.destroy) {
+        sort.value.destroy();
+      }
+      sort.value = void 0;
+    };
+    const initSortable = () => __async(this, null, function* () {
       var _a;
-      if (sort.value || !props.sortable)
+      if (sort.value || !props.sortable || !props.mediaList.length)
         return;
-      sort.value = Sortable.create((_a = gridRef.value) == null ? void 0 : _a.$el, {
+      yield nextTick();
+      const gridEl = (_a = gridRef.value) == null ? void 0 : _a.$el;
+      if (!gridEl)
+        return;
+      sort.value = Sortable.create(gridEl, {
         animation: 200,
         handle: ".zt-grid-item",
         onEnd: (evt) => {
@@ -882,6 +900,18 @@ var stdin_default = defineComponent({
       actionVisible.value = false;
       action.func && action.func();
     };
+    watch(() => [props.sortable, props.mediaList.length], (_0) => __async(this, [_0], function* ([sortable, mediaCount]) {
+      if (!sortable || !mediaCount) {
+        destroySortable();
+        return;
+      }
+      yield initSortable();
+    }), {
+      immediate: true
+    });
+    onBeforeUnmount(() => {
+      destroySortable();
+    });
     useExpose({
       mediaPickAction,
       handleInputFiles,
@@ -919,7 +949,8 @@ var stdin_default = defineComponent({
         "border": false,
         "square": true,
         "gutter": "4",
-        "class": bem("grid")
+        "class": bem("grid"),
+        "onTouchstart": stopSortableTouchStartPropagation
       }, {
         default: () => [renderMediaList()]
       }), [[_vShow, props.mediaList.length]]), _withDirectives(_createVNode(ZtGrid, {

package/lib/index.d.ts

@@ -85,4 +85,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.1.85";
+export const version: "3.1.86";

package/lib/index.js

@@ -184,7 +184,7 @@ __reExport(stdin_exports, require("./timeline"), module.exports);
 __reExport(stdin_exports, require("./toast"), module.exports);
 __reExport(stdin_exports, require("./uploader"), module.exports);
 __reExport(stdin_exports, require("./video"), module.exports);
-const version = "3.1.85";
+const version = "3.1.86";
 function install(app) {
   const components = [
     import_action_sheet.ActionSheet,

package/lib/media-picker/MediaPicker.js

@@ -179,11 +179,29 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const gridRef = (0, import_vue2.ref)();
     const mediaListPlaceholder = (0, import_vue2.ref)([]);
     const sort = (0, import_vue2.ref)();
-    (0, import_vue2.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 ((_a = sort.value) == null ? void 0 : _a.destroy) {
+        sort.value.destroy();
+      }
+      sort.value = void 0;
+    };
+    const initSortable = () => __async(this, null, function* () {
       var _a;
-      if (sort.value || !props.sortable)
+      if (sort.value || !props.sortable || !props.mediaList.length)
         return;
-      sort.value = import_sortablejs.default.create((_a = gridRef.value) == null ? void 0 : _a.$el, {
+      yield (0, import_vue2.nextTick)();
+      const gridEl = (_a = gridRef.value) == null ? void 0 : _a.$el;
+      if (!gridEl)
+        return;
+      sort.value = import_sortablejs.default.create(gridEl, {
         animation: 200,
         handle: ".zt-grid-item",
         onEnd: (evt) => {
@@ -914,6 +932,18 @@ var stdin_default = (0, import_vue2.defineComponent)({
       actionVisible.value = false;
       action.func && action.func();
     };
+    (0, import_vue2.watch)(() => [props.sortable, props.mediaList.length], (_0) => __async(this, [_0], function* ([sortable, mediaCount]) {
+      if (!sortable || !mediaCount) {
+        destroySortable();
+        return;
+      }
+      yield initSortable();
+    }), {
+      immediate: true
+    });
+    (0, import_vue2.onBeforeUnmount)(() => {
+      destroySortable();
+    });
     (0, import_use_expose.useExpose)({
       mediaPickAction,
       handleInputFiles,
@@ -951,7 +981,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "border": false,
         "square": true,
         "gutter": "4",
-        "class": bem("grid")
+        "class": bem("grid"),
+        "onTouchstart": stopSortableTouchStartPropagation
       }, {
         default: () => [renderMediaList()]
       }), [[import_vue.vShow, props.mediaList.length]]), (0, import_vue.withDirectives)((0, import_vue.createVNode)(import_grid.default, {