zartui 3.1.58 → 3.1.59

package/es/index.d.ts

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

package/es/index.mjs

@@ -77,7 +77,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.57";
+const version = "3.1.59";
 function install(app) {
   const components = [
     ActionSheet,

package/es/media-picker/MediaPicker.d.ts

@@ -2,6 +2,10 @@ import { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue';
 import type { Media, MediaAddType, MediaAfterRead, MediaBeforeDelete, MediaBeforeRead, MediaPick, MediaPreview, MediaSizeType, MediaType } from './type';
 import { MediaPlayerProps } from '../media-player';
 declare const mediaPickerProps: {
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
     useFileNameAsLabel: BooleanConstructor;
@@ -85,6 +89,10 @@ export type MediaPickerInstance = ComponentPublicInstance<{
     mediaPickAction: (mediaType: MediaType, mediaAddType: MediaAddType) => void;
 }>;
 declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
     useFileNameAsLabel: BooleanConstructor;
@@ -163,6 +171,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     };
     mediaPlayerProps: PropType<Partial<MediaPlayerProps>>;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "processing" | "update:mediaList")[], "delete" | "processing" | "update:mediaList", import("vue").PublicProps, Readonly<ExtractPropTypes<{
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
     useFileNameAsLabel: BooleanConstructor;
@@ -248,6 +260,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     title: string;
     disabled: boolean;
     showTitle: boolean;
+    sortable: boolean;
     useFileNameAsLabel: boolean;
     mediaList: Media[];
     maxImageSideLength: number;

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 } from "vue";
+import { computed, defineComponent, ref, watch } from "vue";
 import { showFailToast, showLoadingToast, closeToast } from "../toast/index.mjs";
 import DeleteIcon from "./image/DeleteIcon.mjs";
 import ZtGrid from "../grid/index.mjs";
@@ -44,9 +44,14 @@ import { ImageProcessor, checkWatermarkConfigSupported, CompressOptions, ResizeO
 import { isEmptyValue } from "../field/utils.mjs";
 import { wxUploadImage } from "./util/wx-util.mjs";
 import { useExpose } from "../composables/use-expose.mjs";
+import Sortable from "sortablejs";
 const [name, bem] = createNamespace("media-picker");
 const FILE_SIZE_LIMIT = 100;
 const mediaPickerProps = {
+  sortable: {
+    type: Boolean,
+    default: false
+  },
   disabled: Boolean,
   showTitle: Boolean,
   useFileNameAsLabel: Boolean,
@@ -120,7 +125,29 @@ var stdin_default = defineComponent({
     const audioRecorderInputRef = ref();
     const audioFileInputRef = ref();
     const fileInputRef = ref();
+    const gridRef = ref();
     const mediaListPlaceholder = ref([]);
+    const sort = ref();
+    watch(() => props.mediaList.length, () => {
+      var _a;
+      if (sort.value || !props.sortable)
+        return;
+      sort.value = Sortable.create((_a = gridRef.value) == null ? void 0 : _a.$el, {
+        animation: 200,
+        handle: ".zt-grid-item",
+        onEnd: (evt) => {
+          const raws = exchangeArrayIndex(props.mediaList, evt.oldIndex, evt.newIndex);
+          emit("update:mediaList", raws);
+        }
+      });
+    });
+    const exchangeArrayIndex = (list, index, newIndex) => {
+      const raws = [...list];
+      const raw = raws[index];
+      raws.splice(index, 1);
+      raws.splice(newIndex, 0, raw);
+      return [...raws];
+    };
     const checkFileCountBeforeAdd = (mediaType) => {
       if (props.mediaList.length === props.maxMediaCount) {
         showFailToast("\u5DF2\u8FBE\u5230\u6587\u4EF6\u6700\u5927\u6570\u91CF\u9650\u5236");
@@ -793,7 +820,8 @@ var stdin_default = defineComponent({
     useExpose({
       mediaPickAction,
       handleInputFiles,
-      transformImageFiles
+      transformImageFiles,
+      resetInput
     });
     return () => {
       const title = props.showTitle && _createVNode("div", {
@@ -818,6 +846,7 @@ var stdin_default = defineComponent({
       }, null), _withDirectives(_createVNode("div", {
         "class": bem("line")
       }, [renderButtons(), slots["extend"] ? slots.extend() : ""]), [[_vShow, showButtons]]), _withDirectives(_createVNode(ZtGrid, {
+        "ref": gridRef,
         "column-num": "3",
         "border": false,
         "square": true,

package/es/media-picker/index.d.ts

@@ -1,4 +1,8 @@
 export declare const MediaPicker: import("../utils").WithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
     useFileNameAsLabel: BooleanConstructor;
@@ -67,6 +71,10 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
     };
     mediaPlayerProps: import("vue").PropType<Partial<import("..").MediaPlayerProps>>;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "processing" | "update:mediaList")[], "delete" | "processing" | "update:mediaList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
     useFileNameAsLabel: BooleanConstructor;
@@ -142,6 +150,7 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
     title: string;
     disabled: boolean;
     showTitle: boolean;
+    sortable: boolean;
     useFileNameAsLabel: boolean;
     mediaList: import("./type").Media[];
     maxImageSideLength: number;

package/lib/index.d.ts

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

package/lib/index.js

@@ -182,7 +182,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.57";
+const version = "3.1.59";
 function install(app) {
   const components = [
     import_action_sheet.ActionSheet,

package/lib/media-picker/MediaPicker.d.ts

@@ -2,6 +2,10 @@ import { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue';
 import type { Media, MediaAddType, MediaAfterRead, MediaBeforeDelete, MediaBeforeRead, MediaPick, MediaPreview, MediaSizeType, MediaType } from './type';
 import { MediaPlayerProps } from '../media-player';
 declare const mediaPickerProps: {
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
     useFileNameAsLabel: BooleanConstructor;
@@ -85,6 +89,10 @@ export type MediaPickerInstance = ComponentPublicInstance<{
     mediaPickAction: (mediaType: MediaType, mediaAddType: MediaAddType) => void;
 }>;
 declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
     useFileNameAsLabel: BooleanConstructor;
@@ -163,6 +171,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     };
     mediaPlayerProps: PropType<Partial<MediaPlayerProps>>;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "processing" | "update:mediaList")[], "delete" | "processing" | "update:mediaList", import("vue").PublicProps, Readonly<ExtractPropTypes<{
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
     useFileNameAsLabel: BooleanConstructor;
@@ -248,6 +260,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     title: string;
     disabled: boolean;
     showTitle: boolean;
+    sortable: boolean;
     useFileNameAsLabel: boolean;
     mediaList: Media[];
     maxImageSideLength: number;

package/lib/media-picker/MediaPicker.js

@@ -76,9 +76,14 @@ var import_app_media_utils = require("@egova-mobile/app-media-utils");
 var import_utils2 = require("../field/utils");
 var import_wx_util = require("./util/wx-util");
 var import_use_expose = require("../composables/use-expose");
+var import_sortablejs = __toESM(require("sortablejs"));
 const [name, bem] = (0, import_utils.createNamespace)("media-picker");
 const FILE_SIZE_LIMIT = 100;
 const mediaPickerProps = {
+  sortable: {
+    type: Boolean,
+    default: false
+  },
   disabled: Boolean,
   showTitle: Boolean,
   useFileNameAsLabel: Boolean,
@@ -152,7 +157,29 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const audioRecorderInputRef = (0, import_vue2.ref)();
     const audioFileInputRef = (0, import_vue2.ref)();
     const fileInputRef = (0, import_vue2.ref)();
+    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, () => {
+      var _a;
+      if (sort.value || !props.sortable)
+        return;
+      sort.value = import_sortablejs.default.create((_a = gridRef.value) == null ? void 0 : _a.$el, {
+        animation: 200,
+        handle: ".zt-grid-item",
+        onEnd: (evt) => {
+          const raws = exchangeArrayIndex(props.mediaList, evt.oldIndex, evt.newIndex);
+          emit("update:mediaList", raws);
+        }
+      });
+    });
+    const exchangeArrayIndex = (list, index, newIndex) => {
+      const raws = [...list];
+      const raw = raws[index];
+      raws.splice(index, 1);
+      raws.splice(newIndex, 0, raw);
+      return [...raws];
+    };
     const checkFileCountBeforeAdd = (mediaType) => {
       if (props.mediaList.length === props.maxMediaCount) {
         (0, import_toast.showFailToast)("\u5DF2\u8FBE\u5230\u6587\u4EF6\u6700\u5927\u6570\u91CF\u9650\u5236");
@@ -825,7 +852,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
     (0, import_use_expose.useExpose)({
       mediaPickAction,
       handleInputFiles,
-      transformImageFiles
+      transformImageFiles,
+      resetInput
     });
     return () => {
       const title = props.showTitle && (0, import_vue.createVNode)("div", {
@@ -850,6 +878,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }, null), (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
         "class": bem("line")
       }, [renderButtons(), slots["extend"] ? slots.extend() : ""]), [[import_vue.vShow, showButtons]]), (0, import_vue.withDirectives)((0, import_vue.createVNode)(import_grid.default, {
+        "ref": gridRef,
         "column-num": "3",
         "border": false,
         "square": true,

package/lib/media-picker/index.d.ts

@@ -1,4 +1,8 @@
 export declare const MediaPicker: import("../utils").WithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
     useFileNameAsLabel: BooleanConstructor;
@@ -67,6 +71,10 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
     };
     mediaPlayerProps: import("vue").PropType<Partial<import("..").MediaPlayerProps>>;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "processing" | "update:mediaList")[], "delete" | "processing" | "update:mediaList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
     useFileNameAsLabel: BooleanConstructor;
@@ -142,6 +150,7 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
     title: string;
     disabled: boolean;
     showTitle: boolean;
+    sortable: boolean;
     useFileNameAsLabel: boolean;
     mediaList: import("./type").Media[];
     maxImageSideLength: number;