zartui 2.1.20 → 2.1.22

package/es/index.js

@@ -76,7 +76,7 @@ import TextEllipsis from './text-ellipsis';
 import Timeline from './timeline';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '2.1.20';
+var version = '2.1.22';
 function install(Vue) {
   var components = [ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, SpeechRecognizer, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, TextEllipsis, Timeline, Toast, Uploader];
   components.forEach(function (item) {

package/es/media-picker/index.js

@@ -38,6 +38,7 @@ import { FRAME_CONTAINER, CERTIFICATE_BACKGROUND, CERTIFICATE_BUTTON } from './i
 import { getFileUniqueCode, getUniqueFileName, isAudioType, isImageType, isVideoType, isPdfType, isDocType, isTextType, isPptType, isExcelType } from "./media-util";
 import { isWeixin } from '../utils/device';
 import { wxUploadImage } from './wx-util';
+import Sortable from "sortablejs";
 
 // 单个文件最大限制，单位为M（目前限制是100M）
 var FILE_SIZE_LIMIT = 100;
@@ -182,6 +183,10 @@ export default createComponent({
       default: function _default() {
         return {};
       }
+    },
+    sortable: {
+      type: Boolean,
+      default: false
     }
   },
   model: {
@@ -195,7 +200,8 @@ export default createComponent({
       actionVisible: false,
       mediaPlayerVisible: false,
       mediaTypeToPlay: '',
-      mediaUrlToPlay: ''
+      mediaUrlToPlay: '',
+      sort: undefined
     };
   },
   computed: {
@@ -243,11 +249,36 @@ export default createComponent({
           }
         }];
       }
+    },
+    showPreview: function showPreview() {
+      return this.mediaList.length > 0 && this.pickerMode !== "certificate";
+    }
+  },
+  watch: {
+    showPreview: function showPreview() {
+      var _this$$refs$grid,
+        _this2 = this;
+      if (this.sort || !this.sortable) return;
+      this.sort = Sortable.create((_this$$refs$grid = this.$refs.grid) == null ? void 0 : _this$$refs$grid.$el, {
+        animation: 200,
+        handle: ".zt2-grid-item",
+        onEnd: function onEnd(evt) {
+          var raws = _this2.exchangeArrayIndex(_this2.mediaList, evt.oldIndex, evt.newIndex);
+          _this2.$emit('input', raws);
+        }
+      });
     }
   },
   methods: {
+    exchangeArrayIndex: function exchangeArrayIndex(list, index, newIndex) {
+      var raws = [].concat(list);
+      var raw = raws[index];
+      raws.splice(index, 1);
+      raws.splice(newIndex, 0, raw);
+      return [].concat(raws);
+    },
     mediaPick: function mediaPick(mediaType, mediaAddType) {
-      var _this2 = this;
+      var _this3 = this;
       if (this.disabled) {
         return;
       }
@@ -269,7 +300,7 @@ export default createComponent({
         if (this.useWx && isWeixin() && window.wx) {
           var type = mediaAddType === MediaAddType.TAKE ? 'camera' : 'album';
           wxUploadImage(type).then(function (newMedias) {
-            _this2.$emit('input', [].concat(_this2.mediaList, newMedias));
+            _this3.$emit('input', [].concat(_this3.mediaList, newMedias));
           });
         } else {
           if (mediaAddType === MediaAddType.TAKE) {
@@ -344,7 +375,7 @@ export default createComponent({
       }
     },
     handleInputFiles: function handleInputFiles(event) {
-      var _this3 = this;
+      var _this4 = this;
       return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var files, response, data;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -357,29 +388,29 @@ export default createComponent({
               }
               return _context.abrupt("return");
             case 3:
-              if (_this3.pickerMode === "certificate") {
+              if (_this4.pickerMode === "certificate") {
                 files = [files[0]];
               }
-              files = _this3.filterValidFiles(files);
+              files = _this4.filterValidFiles(files);
               if (!(files.length === 0)) {
                 _context.next = 7;
                 break;
               }
               return _context.abrupt("return");
             case 7:
-              if (_this3.checkFileCountAfterAdd(files)) {
+              if (_this4.checkFileCountAfterAdd(files)) {
                 _context.next = 9;
                 break;
               }
               return _context.abrupt("return");
             case 9:
-              if (!_this3.beforeRead) {
+              if (!_this4.beforeRead) {
                 _context.next = 24;
                 break;
               }
               _context.prev = 10;
               _context.next = 13;
-              return _this3.beforeRead(files);
+              return _this4.beforeRead(files);
             case 13:
               response = _context.sent;
               if (response) {
@@ -392,9 +423,9 @@ export default createComponent({
                 data = response.filter(function (item) {
                   return !!item;
                 });
-                _this3.readFiles(data);
+                _this4.readFiles(data);
               } else {
-                _this3.readFiles(files);
+                _this4.readFiles(files);
               }
               _context.next = 22;
               break;
@@ -406,7 +437,7 @@ export default createComponent({
               _context.next = 25;
               break;
             case 24:
-              _this3.readFiles(files);
+              _this4.readFiles(files);
             case 25:
             case "end":
               return _context.stop();
@@ -415,12 +446,12 @@ export default createComponent({
       }))();
     },
     readFiles: function readFiles(files) {
-      var _this4 = this;
+      var _this5 = this;
       // 处理非图片
       var notImages = files.filter(function (f) {
         return !isImageType(f);
       }).map(function (f) {
-        return _this4.transformNotImageFile(f);
+        return _this5.transformNotImageFile(f);
       });
       var newMedias = [];
       if (notImages.length > 0) {
@@ -441,13 +472,13 @@ export default createComponent({
           newMedias = newMedias.concat(medias);
         }
       }).finally(function () {
-        if (_this4.pickerMode === "certificate") {
-          _this4.$emit('input', [].concat(newMedias));
+        if (_this5.pickerMode === "certificate") {
+          _this5.$emit('input', [].concat(newMedias));
         } else {
-          _this4.$emit('input', [].concat(_this4.mediaList, newMedias));
+          _this5.$emit('input', [].concat(_this5.mediaList, newMedias));
         }
-        if (_this4.afterRead) {
-          _this4.afterRead(newMedias);
+        if (_this5.afterRead) {
+          _this5.afterRead(newMedias);
         }
       });
     },
@@ -535,24 +566,24 @@ export default createComponent({
      * @return {Promise<[Media]>}
      */
     transformImageFiles: function transformImageFiles(files) {
-      var _this5 = this;
+      var _this6 = this;
       var promisesTodo = [];
       var resizeOptions = new ResizeOptions(this.maxImageSideLength);
       var compressOptions = new CompressOptions(this.maxImageFileSize);
       var _loop = function _loop() {
         var inputFile = files[i];
-        var watermarkEnabled = _this5.watermarkOptions && _this5.watermarkOptions.watermarkConfigString && checkWatermarkConfigSupported(_this5.watermarkOptions.watermarkConfigString);
+        var watermarkEnabled = _this6.watermarkOptions && _this6.watermarkOptions.watermarkConfigString && checkWatermarkConfigSupported(_this6.watermarkOptions.watermarkConfigString);
         var watermarkOpt;
         if (watermarkEnabled) {
           watermarkOpt = new WatermarkOptions({
             enabled: true,
-            watermarkConfigString: watermarkEnabled ? _this5.watermarkOptions.watermarkConfigString : '',
+            watermarkConfigString: watermarkEnabled ? _this6.watermarkOptions.watermarkConfigString : '',
             context: {
-              address: _this5.watermarkOptions.address || "",
-              humanName: _this5.watermarkOptions.humanName || _this5.watermarkOptions.humanname || "",
-              projectName: _this5.watermarkOptions.projectName || "",
-              logo: _this5.watermarkOptions.logo || "",
-              applicationName: _this5.watermarkOptions.applicationName || "",
+              address: _this6.watermarkOptions.address || "",
+              humanName: _this6.watermarkOptions.humanName || _this6.watermarkOptions.humanname || "",
+              projectName: _this6.watermarkOptions.projectName || "",
+              logo: _this6.watermarkOptions.logo || "",
+              applicationName: _this6.watermarkOptions.applicationName || "",
               watermarkTime: new Date()
             }
           });
@@ -664,62 +695,87 @@ export default createComponent({
      * 点击预览
      */
     previewMedia: function previewMedia(media, index) {
-      if (this.preview && this.preview(media, index)) {
-        return;
-      }
-      if (media.type === MediaType.PHOTO) {
-        var imageIndex = this.imageList.indexOf(media);
-        ImagePreview({
-          images: this.imageList.map(function (image) {
-            return {
-              url: image.showSrc
-            };
-          }),
-          startPosition: imageIndex,
-          closeable: true
-        });
-      } else if (media.type === MediaType.AUDIO || media.type === MediaType.VIDEO) {
-        if (!media.file && !media.url) {
-          Toast('文件参数缺失');
-        } else {
-          this.mediaTypeToPlay = media.type;
-          this.mediaUrlToPlay = media.url || (URL || webkitURL).createObjectURL(media.file);
-          // this.mediaUrlToPlay = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
-          this.mediaPlayerVisible = true;
-        }
-      } else {
-        Toast('暂不支持此类文件的预览');
-      }
-    },
-    onDelete: function onDelete(media, index) {
-      var _this6 = this;
+      var _this7 = this;
       return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var response;
+        var imageIndex;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              if (!_this6.beforeDelete) {
-                _context2.next = 6;
+              _context2.t0 = _this7.preview;
+              if (!_context2.t0) {
+                _context2.next = 5;
                 break;
               }
-              _context2.next = 3;
-              return _this6.beforeDelete(media);
-            case 3:
-              response = _context2.sent;
-              if (response) {
-                _context2.next = 6;
+              _context2.next = 4;
+              return _this7.preview(media, index);
+            case 4:
+              _context2.t0 = _context2.sent;
+            case 5:
+              if (!_context2.t0) {
+                _context2.next = 7;
                 break;
               }
               return _context2.abrupt("return");
-            case 6:
-              _this6.deleteMedia(media, index);
             case 7:
+              if (media.type === MediaType.PHOTO) {
+                imageIndex = _this7.imageList.indexOf(media);
+                ImagePreview({
+                  images: _this7.imageList.map(function (image) {
+                    return {
+                      url: image.showSrc
+                    };
+                  }),
+                  startPosition: imageIndex,
+                  closeable: true
+                });
+              } else if (media.type === MediaType.AUDIO || media.type === MediaType.VIDEO) {
+                if (!media.file && !media.url) {
+                  Toast('文件参数缺失');
+                } else {
+                  _this7.mediaTypeToPlay = media.type;
+                  _this7.mediaUrlToPlay = media.url || (URL || webkitURL).createObjectURL(media.file);
+                  // this.mediaUrlToPlay = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
+                  _this7.mediaPlayerVisible = true;
+                }
+              } else {
+                Toast('暂不支持此类文件的预览');
+              }
+            case 8:
             case "end":
               return _context2.stop();
           }
         }, _callee2);
       }))();
     },
+    onDelete: function onDelete(media, index) {
+      var _this8 = this;
+      return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        var response;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!_this8.beforeDelete) {
+                _context3.next = 6;
+                break;
+              }
+              _context3.next = 3;
+              return _this8.beforeDelete(media);
+            case 3:
+              response = _context3.sent;
+              if (response) {
+                _context3.next = 6;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 6:
+              _this8.deleteMedia(media, index);
+            case 7:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }))();
+    },
     deleteMedia: function deleteMedia(media, index) {
       var list = this.mediaList.slice(0);
       list.splice(index, 1);
@@ -727,7 +783,7 @@ export default createComponent({
       this.$emit('delete', media, index);
     },
     hiddenInput: function hiddenInput() {
-      var _this7 = this;
+      var _this9 = this;
       var h = this.$createElement;
       return [h("input", {
         "attrs": {
@@ -740,7 +796,7 @@ export default createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(MediaType.PHOTO, MediaAddType.TAKE);
+            return _this9.resetInput(MediaType.PHOTO, MediaAddType.TAKE);
           }
         },
         "class": bem('hidden')
@@ -754,7 +810,7 @@ export default createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(MediaType.PHOTO, MediaAddType.PICK);
+            return _this9.resetInput(MediaType.PHOTO, MediaAddType.PICK);
           }
         },
         "class": bem('hidden')
@@ -768,7 +824,7 @@ export default createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(MediaType.VIDEO, MediaAddType.TAKE);
+            return _this9.resetInput(MediaType.VIDEO, MediaAddType.TAKE);
           }
         },
         "class": bem('hidden')
@@ -781,7 +837,7 @@ export default createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(MediaType.VIDEO, MediaAddType.PICK);
+            return _this9.resetInput(MediaType.VIDEO, MediaAddType.PICK);
           }
         },
         "class": bem('hidden')
@@ -795,7 +851,7 @@ export default createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(MediaType.AUDIO, MediaAddType.TAKE);
+            return _this9.resetInput(MediaType.AUDIO, MediaAddType.TAKE);
           }
         },
         "class": bem('hidden')
@@ -808,7 +864,7 @@ export default createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(MediaType.AUDIO, MediaAddType.PICK);
+            return _this9.resetInput(MediaType.AUDIO, MediaAddType.PICK);
           }
         },
         "class": bem('hidden')
@@ -821,14 +877,14 @@ export default createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(MediaType.FILE, MediaAddType.PICK);
+            return _this9.resetInput(MediaType.FILE, MediaAddType.PICK);
           }
         },
         "class": bem('hidden')
       })];
     },
     renderIcon: function renderIcon(mediaType, mediaAddType) {
-      var _this8 = this;
+      var _this10 = this;
       var h = this.$createElement;
       if (mediaType === MediaType.PHOTO) {
         if (mediaAddType === MediaAddType.TAKE) {
@@ -836,7 +892,7 @@ export default createComponent({
             "class": bem('button'),
             "on": {
               "click": function click() {
-                return _this8.mediaPick(mediaType, mediaAddType);
+                return _this10.mediaPick(mediaType, mediaAddType);
               }
             }
           });
@@ -845,7 +901,7 @@ export default createComponent({
             "class": bem('button'),
             "on": {
               "click": function click() {
-                return _this8.mediaPick(mediaType, mediaAddType);
+                return _this10.mediaPick(mediaType, mediaAddType);
               }
             }
           });
@@ -855,7 +911,7 @@ export default createComponent({
           "class": bem('button'),
           "on": {
             "click": function click() {
-              return _this8.mediaPick(mediaType, mediaAddType);
+              return _this10.mediaPick(mediaType, mediaAddType);
             }
           }
         });
@@ -864,7 +920,7 @@ export default createComponent({
           "class": bem('button'),
           "on": {
             "click": function click() {
-              return _this8.mediaPick(mediaType, mediaAddType);
+              return _this10.mediaPick(mediaType, mediaAddType);
             }
           }
         });
@@ -873,7 +929,7 @@ export default createComponent({
           "class": bem('button'),
           "on": {
             "click": function click() {
-              return _this8.mediaPick(mediaType, mediaAddType);
+              return _this10.mediaPick(mediaType, mediaAddType);
             }
           }
         });
@@ -914,7 +970,7 @@ export default createComponent({
       }
     },
     renderCertificates: function renderCertificates() {
-      var _this9 = this;
+      var _this11 = this;
       var h = this.$createElement;
       if (this.mediaList && this.mediaList.length) {
         var media = this.mediaList[0];
@@ -924,8 +980,8 @@ export default createComponent({
           "on": {
             "click": function click(event) {
               event.stopPropagation();
-              _this9.onDelete(media, 0);
-              _this9.mediaPick(MediaType.PHOTO, MediaAddType.PICK);
+              _this11.onDelete(media, 0);
+              _this11.mediaPick(MediaType.PHOTO, MediaAddType.PICK);
             }
           }
         }, [h(ReUploadIcon, {
@@ -943,7 +999,7 @@ export default createComponent({
             "click": function click(event) {
               event.stopPropagation();
               // 证件照模式只有一张图片
-              _this9.previewMedia(media, 0);
+              _this11.previewMedia(media, 0);
             }
           }
         }, [reUpload]);
@@ -1035,6 +1091,11 @@ export default createComponent({
      */
     renderMediaThumbnail: function renderMediaThumbnail(media) {
       var h = this.$createElement;
+      if (this.$scopedSlots['preview-media']) {
+        return this.slots('preview-media', {
+          file: media
+        });
+      }
       if (media.showSrc) {
         return h(ZtImage, {
           "attrs": {
@@ -1078,7 +1139,7 @@ export default createComponent({
       }
     },
     renderMediaList: function renderMediaList() {
-      var _this10 = this;
+      var _this12 = this;
       var h = this.$createElement;
       return this.mediaList.map(function (media, index) {
         var showDelete = media.deletable && media.status !== MediaUploadStatus.UPLOADING;
@@ -1087,7 +1148,7 @@ export default createComponent({
           "on": {
             "click": function click(event) {
               event.stopPropagation();
-              _this10.onDelete(media, index);
+              _this12.onDelete(media, index);
             }
           }
         });
@@ -1096,10 +1157,10 @@ export default createComponent({
           "on": {
             "click": function click(event) {
               event.stopPropagation();
-              _this10.previewMedia(media, index);
+              _this12.previewMedia(media, index);
             }
           }
-        }, [_this10.renderMediaBox(media), _this10.genThumbnailMask(media), deleteIcon]);
+        }, [_this12.renderMediaBox(media), _this12.genThumbnailMask(media), deleteIcon]);
       });
     },
     selectAction: function selectAction(action) {
@@ -1108,7 +1169,7 @@ export default createComponent({
     }
   },
   render: function render() {
-    var _this11 = this;
+    var _this13 = this;
     var h = arguments[0];
     var title = this.showTitle && h("div", {
       "class": bem('title')
@@ -1121,9 +1182,9 @@ export default createComponent({
         "mediaUrl": this.mediaUrlToPlay
       }, this.mediaPlayerProps),
       "model": {
-        value: _this11.mediaPlayerVisible,
+        value: _this13.mediaPlayerVisible,
         callback: function callback($$v) {
-          _this11.mediaPlayerVisible = $$v;
+          _this13.mediaPlayerVisible = $$v;
         }
       }
     }), h(ZtActionSheet, {
@@ -1137,9 +1198,9 @@ export default createComponent({
         "select": this.selectAction
       },
       "model": {
-        value: _this11.actionVisible,
+        value: _this13.actionVisible,
         callback: function callback($$v) {
-          _this11.actionVisible = $$v;
+          _this13.actionVisible = $$v;
         }
       }
     }), this.pickerMode === "certificate" ? h("div", {
@@ -1150,9 +1211,10 @@ export default createComponent({
     }, [this.renderCertificates()]) : h("div", {
       "class": bem('line')
     }, [this.renderButtons(), this.slots('extend')]), h(ZtGrid, {
+      "ref": "grid",
       "directives": [{
         name: "show",
-        value: this.mediaList.length && this.pickerMode !== "certificate"
+        value: this.showPreview
       }],
       "attrs": {
         "column-num": '3',

package/lib/index.js

@@ -161,7 +161,7 @@ var _toast = _interopRequireDefault(require("./toast"));
 exports.Toast = _toast.default;
 var _uploader = _interopRequireDefault(require("./uploader"));
 exports.Uploader = _uploader.default;
-var version = exports.version = '2.1.20';
+var version = exports.version = '2.1.22';
 function install(Vue) {
   var components = [_actionSheet.default, _area.default, _avatar.default, _backTop.default, _badge.default, _button.default, _calendar.default, _cascader.default, _cell.default, _cellGroup.default, _checkbox.default, _checkboxGroup.default, _col.default, _collapse.default, _collapseItem.default, _countDown.default, _datetimePicker.default, _dialog.default, _divider.default, _dropdownItem.default, _dropdownMenu.default, _empty.default, _field.default, _foldDialog.default, _form.default, _grid.default, _gridItem.default, _hierarchySelect.default, _icon.default, _image.default, _imagePreview.default, _indexAnchor.default, _indexBar.default, _info.default, _lazyload.default, _list.default, _loading.default, _locale.default, _mediaPicker.default, _mediaPlayer.default, _multiplePicker.default, _navBar.default, _noticeBar.default, _numberKeyboard.default, _overlay.default, _passwordInput.default, _picker.default, _popover.default, _popup.default, _pullRefresh.default, _radio.default, _radioGroup.default, _rate.default, _row.default, _search.default, _signature.default, _skeleton.default, _slider.default, _speechRecognizer.default, _step.default, _stepper.default, _steps.default, _sticky.default, _swipe.default, _swipeCell.default, _swipeItem.default, _switch.default, _switchCell.default, _tab.default, _tabbar.default, _tabbarItem.default, _table.default, _tabs.default, _tag.default, _textEllipsis.default, _timeline.default, _toast.default, _uploader.default];
   components.forEach(function (item) {