zartui 0.1.82 → 0.1.85

package/es/dropdown-item/index.css

@@ -1 +1 @@
-.zt-dropdown-item{position:fixed;right:0;left:0;z-index:10;overflow:hidden}.zt-dropdown-item__icon{display:block;line-height:inherit;font-size:24px}.zt-dropdown-item .zt-cell::after{border:none}.zt-dropdown-item__option{text-align:left;font-size:14px;padding-left:0}.zt-dropdown-item__option--active{color:#0091fa}.zt-dropdown-item__option--active .zt-dropdown-item__icon{color:#0091fa}.zt-dropdown-item--up{top:0}.zt-dropdown-item--down{bottom:0}.zt-dropdown-item__content{position:absolute;max-height:80%;padding-left:16px;box-sizing:border-box}
+.zt-dropdown-item{position:fixed;right:0;left:0;z-index:10;overflow:hidden}.zt-dropdown-item__icon{display:block;line-height:inherit;font-size:24px}.zt-dropdown-item .zt-cell::after{border:none}.zt-dropdown-item__option{text-align:left;font-size:14px;padding-left:0}.zt-dropdown-item__option--active{color:#0091fa}.zt-dropdown-item__option--active .zt-dropdown-item__icon{color:#0091fa}.zt-dropdown-item--up{top:0}.zt-dropdown-item--down{bottom:0}.zt-dropdown-item__content,.zt-dropdown-item__content.zt-popup{position:absolute;max-height:80%;padding-left:16px;box-sizing:border-box}.button{width:100%;height:44px;display:-webkit-box;display:-webkit-flex;display:flex;border-top:1px solid rgba(0,0,0,.05)}.button-reset{width:50%;font-family:PingFangSC-Regular;font-weight:400;font-size:16px;color:#ff9623;text-align:center;padding-top:11px}.button-confirm{width:50%;background-color:#0091fa;font-family:PingFangSC-Semibold;font-weight:600;font-size:16px;color:#f5f5fa;text-align:center;padding-top:11px}

package/es/dropdown-item/index.js

@@ -8,6 +8,7 @@ import { ChildrenMixin } from '../mixins/relation'; // Components
 import Cell from '../cell';
 import Icon from '../icon';
 import Popup from '../popup';
+import Checkbox from '../checkbox';
 
 var _createNamespace = createNamespace('dropdown-item'),
     createComponent = _createNamespace[0],
@@ -31,6 +32,14 @@ export default createComponent({
     lazyRender: {
       type: Boolean,
       default: true
+    },
+    multiSelect: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: '未选择'
     }
   },
   data: function data() {
@@ -48,10 +57,25 @@ export default createComponent({
         return this.title;
       }
 
-      var match = this.options.filter(function (option) {
-        return option.value === _this.value;
-      });
-      return match.length ? match[0].text : '';
+      if (this.multiSelect) {
+        if (this.value.length) {
+          var value = '';
+          this.options.forEach(function (item) {
+            if (_this.value.indexOf(item.value) >= 0) {
+              value += item.text + '、';
+            }
+          });
+          value = value.substr(0, value.length - 1);
+          return value;
+        } else {
+          return this.placeholder;
+        }
+      } else {
+        var match = this.options.filter(function (option) {
+          return option.value === _this.value;
+        });
+        return match.length ? match[0].text : '';
+      }
     }
   },
   watch: {
@@ -108,6 +132,30 @@ export default createComponent({
       if (this.getContainer) {
         event.stopPropagation();
       }
+    },
+    select: function select(value) {
+      if (this.value.indexOf(value) >= 0) {
+        this.value.splice(this.value.indexOf(value), 1);
+      } else {
+        this.value.push(value);
+      }
+    },
+    isSelect: function isSelect(value) {
+      if (this.value.indexOf(value) >= 0) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    reset: function reset() {
+      this.showPopup = false;
+      this.$emit('input', []);
+      this.$emit('reset', []);
+    },
+    confirm: function confirm() {
+      this.showPopup = false;
+      this.$emit('input', this.value);
+      this.$emit('change', this.value);
     }
   },
   render: function render() {
@@ -122,40 +170,73 @@ export default createComponent({
         direction = _this$parent.direction,
         activeColor = _this$parent.activeColor,
         closeOnClickOverlay = _this$parent.closeOnClickOverlay;
-    var Options = this.options.map(function (option) {
-      var active = option.value === _this3.value;
-      return h(Cell, {
-        "attrs": {
-          "clickable": true,
-          "icon": option.icon,
-          "title": option.text
-        },
-        "key": option.value,
-        "class": "half-border-bottom " + bem('option', {
-          active: active
-        }),
-        "style": {
-          color: active ? activeColor : ''
-        },
-        "on": {
-          "click": function click() {
-            _this3.showPopup = false;
+    var Options;
 
-            if (option.value !== _this3.value) {
-              _this3.$emit('input', option.value);
+    if (this.multiSelect) {
+      Options = this.options.map(function (option, index) {
+        var active = _this3.value.indexOf(option.value) >= 0;
+        return h(Cell, {
+          "attrs": {
+            "clickable": true,
+            "icon": option.icon,
+            "title": option.text
+          },
+          "key": option.value,
+          "class": index === _this3.options.length - 1 ? bem('option', {
+            active: active
+          }) : "half-border-bottom " + bem('option', {
+            active: active
+          }),
+          "style": "padding-left: 16px",
+          "on": {
+            "click": function click() {
+              _this3.select(option.value);
+            }
+          }
+        }, [h(Checkbox, {
+          "style": "padding:0;position: absolute;right: 0px;",
+          "attrs": {
+            "value": _this3.isSelect(option.value)
+          }
+        })]);
+      });
+    } else {
+      Options = this.options.map(function (option) {
+        var active = option.value === _this3.value;
+        return h(Cell, {
+          "attrs": {
+            "clickable": true,
+            "icon": option.icon,
+            "title": option.text
+          },
+          "key": option.value,
+          "class": "half-border-bottom " + bem('option', {
+            active: active
+          }),
+          "style": {
+            color: active ? activeColor : ''
+          },
+          "on": {
+            "click": function click() {
+              _this3.showPopup = false;
+
+              if (option.value !== _this3.value) {
+                _this3.$emit('input', option.value);
 
-              _this3.$emit('change', option.value);
+                _this3.$emit('change', option.value);
+              }
             }
           }
-        }
-      }, [active && h(Icon, {
-        "class": bem('icon'),
-        "attrs": {
-          "color": activeColor,
-          "name": "correct-checked"
-        }
-      })]);
-    });
+        }, [active && h(Icon, {
+          "class": bem('icon'),
+          "attrs": {
+            "color": activeColor,
+            "name": "correct-checked"
+          }
+        })]);
+      });
+    }
+
     var style = {
       zIndex: zIndex
     };
@@ -189,6 +270,7 @@ export default createComponent({
         "closeOnClickOverlay": closeOnClickOverlay
       },
       "class": bem('content'),
+      "style": this.multiSelect ? "padding-left: 0px" : "",
       "on": {
         "open": this.onOpen,
         "close": this.onClose,
@@ -205,6 +287,22 @@ export default createComponent({
           _this3.showPopup = $$v;
         }
       }
-    }, [Options, this.slots('default')])])]);
+    }, [Options, h("div", {
+      "class": "button",
+      "directives": [{
+        name: "show",
+        value: this.multiSelect
+      }]
+    }, [h("div", {
+      "class": "button-reset",
+      "on": {
+        "click": this.reset
+      }
+    }, ["\u91CD\u7F6E"]), h("div", {
+      "class": "button-confirm",
+      "on": {
+        "click": this.confirm
+      }
+    }, ["\u786E\u5B9A"])]), this.slots('default')])])]);
   }
 });

package/es/dropdown-item/index.less

@@ -39,10 +39,36 @@
     bottom: 0;
   }
 
-  &__content {
+  &__content, &__content.zt-popup {
     position: absolute;
     max-height: @dropdown-menu-content-max-height;
     padding-left: @padding-md;
     box-sizing: border-box;
   }
+
+}
+.button{
+  width: 100%;
+  height: 44px;
+  display: flex;
+  border-top: 1px solid rgba(0,0,0,0.05);
+}
+.button-reset{
+  width: 50%;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FF9623;
+  text-align: center;
+  padding-top: 11px;
 }
+.button-confirm{
+  width: 50%;
+  background-color: #0091FA;
+  font-family: PingFangSC-Semibold;
+  font-weight: 600;
+  font-size: 16px;
+  color: #F5F5FA;
+  text-align: center;
+  padding-top: 11px;
+}

package/es/dropdown-item/style/index.js

@@ -2,6 +2,7 @@ import '../../style/base.css';
 import '../../overlay/index.css';
 import '../../info/index.css';
 import '../../icon/index.css';
+import '../../checkbox/index.css';
 import '../../cell/index.css';
 import '../../popup/index.css';
 import '../index.css';

package/es/dropdown-item/style/less.js

@@ -2,6 +2,7 @@ import '../../style/base.less';
 import '../../overlay/index.less';
 import '../../info/index.less';
 import '../../icon/index.less';
+import '../../checkbox/index.less';
 import '../../cell/index.less';
 import '../../popup/index.less';
 import '../index.less';

package/es/dropdown-menu/index.js

@@ -117,7 +117,8 @@ export default createComponent({
           color: item.showPopup ? _this.activeColor : ''
         }
       }, [h("div", {
-        "class": "zt-ellipsis"
+        "class": "zt-ellipsis",
+        "style": "padding-right: 10px"
       }, [item.slots('title') || item.displayTitle, item.slots('icon') || h(Icon, {
         "class": bem('icon'),
         "attrs": {

package/es/index.js

@@ -74,7 +74,7 @@ import Tabs from './tabs';
 import Tag from './tag';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '0.1.82';
+var version = '0.1.85';
 
 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, PdfViewer, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Toast, Uploader];

package/es/media-picker/index.js

@@ -596,10 +596,14 @@ export default createComponent({
           startPosition: imageIndex
         });
       } else if (media.type === MediaType.AUDIO || media.type === MediaType.VIDEO) {
-        this.mediaTypeToPlay = media.type;
-        this.mediaUrlToPlay = (URL || webkitURL).createObjectURL(media.file); // this.mediaUrlToPlay = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
+        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;
+          this.mediaPlayerVisible = true;
+        }
       } else if (media.type === MediaType.FILE) {
         Toast('暂不支持此类文件的预览');
       }
@@ -927,8 +931,9 @@ export default createComponent({
         }, [_this8.renderMediaThumbnail(media), _this8.genThumbnailMask(media), deleteIcon]);
       });
     },
-    selectVideoAction: function selectVideoAction(videoAction) {
-      videoAction.func && videoAction.func();
+    selectAction: function selectAction(action) {
+      this.actionVisible = false;
+      action.func && action.func();
     }
   },
   render: function render() {
@@ -959,7 +964,7 @@ export default createComponent({
         "close-on-click-action": true
       },
       "on": {
-        "select": this.selectVideoAction
+        "select": this.selectAction
       },
       "model": {
         value: _this9.actionVisible,

package/lib/dropdown-item/index.css

@@ -1 +1 @@
-.zt-dropdown-item{position:fixed;right:0;left:0;z-index:10;overflow:hidden}.zt-dropdown-item__icon{display:block;line-height:inherit;font-size:24px}.zt-dropdown-item .zt-cell::after{border:none}.zt-dropdown-item__option{text-align:left;font-size:14px;padding-left:0}.zt-dropdown-item__option--active{color:#0091fa}.zt-dropdown-item__option--active .zt-dropdown-item__icon{color:#0091fa}.zt-dropdown-item--up{top:0}.zt-dropdown-item--down{bottom:0}.zt-dropdown-item__content{position:absolute;max-height:80%;padding-left:16px;box-sizing:border-box}
+.zt-dropdown-item{position:fixed;right:0;left:0;z-index:10;overflow:hidden}.zt-dropdown-item__icon{display:block;line-height:inherit;font-size:24px}.zt-dropdown-item .zt-cell::after{border:none}.zt-dropdown-item__option{text-align:left;font-size:14px;padding-left:0}.zt-dropdown-item__option--active{color:#0091fa}.zt-dropdown-item__option--active .zt-dropdown-item__icon{color:#0091fa}.zt-dropdown-item--up{top:0}.zt-dropdown-item--down{bottom:0}.zt-dropdown-item__content,.zt-dropdown-item__content.zt-popup{position:absolute;max-height:80%;padding-left:16px;box-sizing:border-box}.button{width:100%;height:44px;display:-webkit-box;display:-webkit-flex;display:flex;border-top:1px solid rgba(0,0,0,.05)}.button-reset{width:50%;font-family:PingFangSC-Regular;font-weight:400;font-size:16px;color:#ff9623;text-align:center;padding-top:11px}.button-confirm{width:50%;background-color:#0091fa;font-family:PingFangSC-Semibold;font-weight:600;font-size:16px;color:#f5f5fa;text-align:center;padding-top:11px}

package/lib/dropdown-item/index.js

@@ -19,6 +19,8 @@ var _icon = _interopRequireDefault(require("../icon"));
 
 var _popup = _interopRequireDefault(require("../popup"));
 
+var _checkbox = _interopRequireDefault(require("../checkbox"));
+
 // Utils
 // Mixins
 // Components
@@ -44,6 +46,14 @@ var _default2 = createComponent({
     lazyRender: {
       type: Boolean,
       default: true
+    },
+    multiSelect: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: '未选择'
     }
   },
   data: function data() {
@@ -61,10 +71,25 @@ var _default2 = createComponent({
         return this.title;
       }
 
-      var match = this.options.filter(function (option) {
-        return option.value === _this.value;
-      });
-      return match.length ? match[0].text : '';
+      if (this.multiSelect) {
+        if (this.value.length) {
+          var value = '';
+          this.options.forEach(function (item) {
+            if (_this.value.indexOf(item.value) >= 0) {
+              value += item.text + '、';
+            }
+          });
+          value = value.substr(0, value.length - 1);
+          return value;
+        } else {
+          return this.placeholder;
+        }
+      } else {
+        var match = this.options.filter(function (option) {
+          return option.value === _this.value;
+        });
+        return match.length ? match[0].text : '';
+      }
     }
   },
   watch: {
@@ -121,6 +146,30 @@ var _default2 = createComponent({
       if (this.getContainer) {
         event.stopPropagation();
       }
+    },
+    select: function select(value) {
+      if (this.value.indexOf(value) >= 0) {
+        this.value.splice(this.value.indexOf(value), 1);
+      } else {
+        this.value.push(value);
+      }
+    },
+    isSelect: function isSelect(value) {
+      if (this.value.indexOf(value) >= 0) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    reset: function reset() {
+      this.showPopup = false;
+      this.$emit('input', []);
+      this.$emit('reset', []);
+    },
+    confirm: function confirm() {
+      this.showPopup = false;
+      this.$emit('input', this.value);
+      this.$emit('change', this.value);
     }
   },
   render: function render() {
@@ -135,40 +184,73 @@ var _default2 = createComponent({
         direction = _this$parent.direction,
         activeColor = _this$parent.activeColor,
         closeOnClickOverlay = _this$parent.closeOnClickOverlay;
-    var Options = this.options.map(function (option) {
-      var active = option.value === _this3.value;
-      return h(_cell.default, {
-        "attrs": {
-          "clickable": true,
-          "icon": option.icon,
-          "title": option.text
-        },
-        "key": option.value,
-        "class": "half-border-bottom " + bem('option', {
-          active: active
-        }),
-        "style": {
-          color: active ? activeColor : ''
-        },
-        "on": {
-          "click": function click() {
-            _this3.showPopup = false;
+    var Options;
+
+    if (this.multiSelect) {
+      Options = this.options.map(function (option, index) {
+        var active = _this3.value.indexOf(option.value) >= 0;
+        return h(_cell.default, {
+          "attrs": {
+            "clickable": true,
+            "icon": option.icon,
+            "title": option.text
+          },
+          "key": option.value,
+          "class": index === _this3.options.length - 1 ? bem('option', {
+            active: active
+          }) : "half-border-bottom " + bem('option', {
+            active: active
+          }),
+          "style": "padding-left: 16px",
+          "on": {
+            "click": function click() {
+              _this3.select(option.value);
+            }
+          }
+        }, [h(_checkbox.default, {
+          "style": "padding:0;position: absolute;right: 0px;",
+          "attrs": {
+            "value": _this3.isSelect(option.value)
+          }
+        })]);
+      });
+    } else {
+      Options = this.options.map(function (option) {
+        var active = option.value === _this3.value;
+        return h(_cell.default, {
+          "attrs": {
+            "clickable": true,
+            "icon": option.icon,
+            "title": option.text
+          },
+          "key": option.value,
+          "class": "half-border-bottom " + bem('option', {
+            active: active
+          }),
+          "style": {
+            color: active ? activeColor : ''
+          },
+          "on": {
+            "click": function click() {
+              _this3.showPopup = false;
 
-            if (option.value !== _this3.value) {
-              _this3.$emit('input', option.value);
+              if (option.value !== _this3.value) {
+                _this3.$emit('input', option.value);
 
-              _this3.$emit('change', option.value);
+                _this3.$emit('change', option.value);
+              }
             }
           }
-        }
-      }, [active && h(_icon.default, {
-        "class": bem('icon'),
-        "attrs": {
-          "color": activeColor,
-          "name": "correct-checked"
-        }
-      })]);
-    });
+        }, [active && h(_icon.default, {
+          "class": bem('icon'),
+          "attrs": {
+            "color": activeColor,
+            "name": "correct-checked"
+          }
+        })]);
+      });
+    }
+
     var style = {
       zIndex: zIndex
     };
@@ -202,6 +284,7 @@ var _default2 = createComponent({
         "closeOnClickOverlay": closeOnClickOverlay
       },
       "class": bem('content'),
+      "style": this.multiSelect ? "padding-left: 0px" : "",
       "on": {
         "open": this.onOpen,
         "close": this.onClose,
@@ -218,7 +301,23 @@ var _default2 = createComponent({
           _this3.showPopup = $$v;
         }
       }
-    }, [Options, this.slots('default')])])]);
+    }, [Options, h("div", {
+      "class": "button",
+      "directives": [{
+        name: "show",
+        value: this.multiSelect
+      }]
+    }, [h("div", {
+      "class": "button-reset",
+      "on": {
+        "click": this.reset
+      }
+    }, ["\u91CD\u7F6E"]), h("div", {
+      "class": "button-confirm",
+      "on": {
+        "click": this.confirm
+      }
+    }, ["\u786E\u5B9A"])]), this.slots('default')])])]);
   }
 });
 

package/lib/dropdown-item/index.less

@@ -39,10 +39,36 @@
     bottom: 0;
   }
 
-  &__content {
+  &__content, &__content.zt-popup {
     position: absolute;
     max-height: @dropdown-menu-content-max-height;
     padding-left: @padding-md;
     box-sizing: border-box;
   }
+
+}
+.button{
+  width: 100%;
+  height: 44px;
+  display: flex;
+  border-top: 1px solid rgba(0,0,0,0.05);
+}
+.button-reset{
+  width: 50%;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FF9623;
+  text-align: center;
+  padding-top: 11px;
 }
+.button-confirm{
+  width: 50%;
+  background-color: #0091FA;
+  font-family: PingFangSC-Semibold;
+  font-weight: 600;
+  font-size: 16px;
+  color: #F5F5FA;
+  text-align: center;
+  padding-top: 11px;
+}

package/lib/dropdown-item/style/index.js

@@ -2,6 +2,7 @@ require('../../style/base.css');
 require('../../overlay/index.css');
 require('../../info/index.css');
 require('../../icon/index.css');
+require('../../checkbox/index.css');
 require('../../cell/index.css');
 require('../../popup/index.css');
 require('../index.css');

package/lib/dropdown-item/style/less.js

@@ -2,6 +2,7 @@ require('../../style/base.less');
 require('../../overlay/index.less');
 require('../../info/index.less');
 require('../../icon/index.less');
+require('../../checkbox/index.less');
 require('../../cell/index.less');
 require('../../popup/index.less');
 require('../index.less');

package/lib/dropdown-menu/index.js

@@ -128,7 +128,8 @@ var _default = createComponent({
           color: item.showPopup ? _this.activeColor : ''
         }
       }, [h("div", {
-        "class": "zt-ellipsis"
+        "class": "zt-ellipsis",
+        "style": "padding-right: 10px"
       }, [item.slots('title') || item.displayTitle, item.slots('icon') || h(_icon.default, {
         "class": bem('icon'),
         "attrs": {