zartui 0.1.57 → 0.1.60

package/es/checkbox/index.css

@@ -1 +1 @@
-.zt-checkbox{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;padding:10px 16px}.zt-checkbox--disabled{cursor:not-allowed}.zt-checkbox--label-disabled{cursor:default}.zt-checkbox--horizontal{margin-right:12px}.zt-checkbox__icon{-webkit-box-flex:0;-webkit-flex:none;flex:none;height:1em;font-size:24px;line-height:1em;cursor:pointer}.zt-checkbox__icon i,.zt-checkbox__icon img{-webkit-transform:scale(.8333);transform:scale(.8333);-webkit-transform-origin:center;transform-origin:center}.zt-checkbox__icon .zt-icon{display:block;box-sizing:border-box;width:1.25em;height:1.25em;color:transparent;font-size:.8em;line-height:1.25;text-align:center;border:1px solid #c8c9cc;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:color,border-color,background-color;transition-property:color,border-color,background-color}.zt-checkbox__icon--round .zt-icon{border-radius:100%}.zt-checkbox__icon--checked .zt-icon{color:#fff;background-color:#0091fa;border-color:#0091fa}.zt-checkbox__icon--disabled{cursor:not-allowed}.zt-checkbox__icon--disabled .zt-icon{background-color:rgba(0,0,0,.1);border-color:#c8c9cc}.zt-checkbox__icon--disabled.zt-checkbox__icon--checked .zt-icon{opacity:.4;background-color:#0091fa;color:#fff}.zt-checkbox__label{margin-left:8px;color:#000;line-height:24px}.zt-checkbox__label--left{margin:0 8px 0 0}.zt-checkbox__label--disabled{color:#c8c9cc}
+.zt-checkbox{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;padding:10px 0}.zt-checkbox--disabled{cursor:not-allowed}.zt-checkbox--label-disabled{cursor:default}.zt-checkbox--horizontal{margin-left:12px}.zt-checkbox__icon{-webkit-box-flex:0;-webkit-flex:none;flex:none;height:1em;font-size:24px;line-height:1em;cursor:pointer}.zt-checkbox__icon i,.zt-checkbox__icon img{-webkit-transform:scale(.8333);transform:scale(.8333);-webkit-transform-origin:center;transform-origin:center}.zt-checkbox__icon .zt-icon{display:block;box-sizing:border-box;width:1.25em;height:1.25em;color:transparent;font-size:.8em;line-height:1.25;text-align:center;border:1px solid #c8c9cc;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:color,border-color,background-color;transition-property:color,border-color,background-color}.zt-checkbox__icon--round .zt-icon{border-radius:100%}.zt-checkbox__icon--checked .zt-icon{color:#fff;background-color:#0091fa;border-color:#0091fa}.zt-checkbox__icon--disabled{cursor:not-allowed}.zt-checkbox__icon--disabled .zt-icon{background-color:rgba(0,0,0,.1);border-color:#c8c9cc}.zt-checkbox__icon--disabled.zt-checkbox__icon--checked .zt-icon{opacity:.4;background-color:#0091fa;color:#fff}.zt-checkbox__label{margin-left:8px;color:#000;line-height:24px}.zt-checkbox__label--left{margin:0 8px 0 0}.zt-checkbox__label--disabled{color:#c8c9cc}

package/es/checkbox/index.js

@@ -15,7 +15,7 @@ export default createComponent({
     checked: {
       get: function get() {
         if (this.parent) {
-          return this.parent.value.indexOf(this.name) !== -1;
+          return this.parent.value && this.parent.value.indexOf(this.name) !== -1;
         }
 
         return this.value;

package/es/checkbox/index.less

@@ -17,7 +17,7 @@
   }
 
   &--horizontal {
-    margin-right: @padding-sm;
+    margin-left: @padding-sm;
   }
 
   &__icon {

package/es/index.js

@@ -33,6 +33,7 @@ import Lazyload from './lazyload';
 import List from './list';
 import Loading from './loading';
 import Locale from './locale';
+import MultiplePicker from './multiple-picker';
 import NavBar from './nav-bar';
 import NoticeBar from './notice-bar';
 import NumberKeyboard from './number-keyboard';
@@ -68,10 +69,10 @@ import Tabs from './tabs';
 import Tag from './tag';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '0.1.57';
+var version = '0.1.60';
 
 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, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, 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];
+  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, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, 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];
   components.forEach(function (item) {
     if (item.install) {
       Vue.use(item);
@@ -85,7 +86,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-export { install, version, 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, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, 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 };
+export { install, version, 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, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, 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 };
 export default {
   install: install,
   version: version

package/es/multiple-picker/MultiplePickerOptions.js

@@ -0,0 +1,158 @@
+import _mergeJSXProps2 from "@vue/babel-helper-vue-jsx-merge-props";
+import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
+import { deepClone } from '../utils/deep-clone';
+import { createNamespace, isObject } from '../utils';
+
+var _createNamespace = createNamespace('multiple-picker-options'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+function isOptionDisabled(option) {
+  return isObject(option) && option.disabled;
+}
+
+export default createComponent({
+  props: {
+    valueKey: String,
+    readonly: Boolean,
+    allowHtml: Boolean,
+    itemHeight: Number,
+    defaultIndexs: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    columnCounts: Number,
+    initialOptions: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    }
+  },
+  data: function data() {
+    return {
+      options: deepClone(this.initialOptions),
+      currentIndexs: []
+    };
+  },
+  watch: {
+    initialOptions: 'setOptions',
+    defaultIndexs: {
+      deep: true,
+      handler: function handler() {
+        this.setDefaultIndexs();
+      }
+    }
+  },
+  computed: {
+    count: function count() {
+      return this.options.length;
+    }
+  },
+  mounted: function mounted() {
+    this.setDefaultIndexs();
+  },
+  methods: {
+    setOptions: function setOptions(options) {
+      if (JSON.stringify(options) !== JSON.stringify(this.options)) {
+        this.options = deepClone(options);
+        this.setDefaultIndexs();
+      }
+    },
+    setDefaultIndexs: function setDefaultIndexs() {
+      this.currentIndexs = deepClone(this.defaultIndexs);
+    },
+    onClickItem: function onClickItem(index) {
+      var _this = this;
+
+      if (this.readonly) {
+        return;
+      }
+
+      var exist = false;
+      this.currentIndexs.forEach(function (v, i) {
+        if (v === index) {
+          exist = true;
+
+          _this.currentIndexs.splice(i, 1);
+        }
+      });
+
+      if (!exist) {
+        this.currentIndexs.push(index);
+      }
+
+      var currentOptions = [];
+      this.currentIndexs.forEach(function (index) {
+        currentOptions.push(_this.options[index]);
+      });
+      this.$emit('change');
+    },
+    getOptionText: function getOptionText(option) {
+      if (isObject(option) && this.valueKey in option) {
+        return option[this.valueKey];
+      }
+
+      return option;
+    },
+    genOptions: function genOptions() {
+      var _this2 = this;
+
+      var h = this.$createElement;
+      this.columnCounts = Number(this.columnCounts);
+
+      if (this.columnCounts && this.columnCounts > 3) {
+        this.columnCounts = 3;
+      }
+
+      if (this.columnCounts && this.columnCounts < 1) {
+        this.columnCounts = 1;
+      }
+
+      var optionStyle = {
+        height: this.itemHeight + "px",
+        width: 1 / this.columnCounts * 100 + "%"
+      };
+      return this.options.map(function (option, index) {
+        var _domProps;
+
+        var text = _this2.getOptionText(option);
+
+        var disabled = isOptionDisabled(option);
+        var data = {
+          style: optionStyle,
+          attrs: {
+            role: 'button',
+            tabindex: disabled ? -1 : 0
+          },
+          class: [bem('item', {
+            disabled: disabled,
+            selected: _this2.currentIndexs.indexOf(index) > -1,
+            last: (index + 1) % _this2.columnCounts === 0
+          })],
+          on: {
+            click: function click() {
+              _this2.onClickItem(index);
+            }
+          }
+        };
+        var childData = {
+          class: 'zt-ellipsis',
+          domProps: (_domProps = {}, _domProps[_this2.allowHtml ? 'innerHTML' : 'textContent'] = text, _domProps)
+        };
+        return h("div", _mergeJSXProps2([{}, data]), [_this2.slots('option', option) || h("div", _mergeJSXProps([{}, childData]))]);
+      });
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("div", {
+      "class": bem()
+    }, [h("div", {
+      "ref": "wrapper",
+      "class": bem('wrapper')
+    }, [this.genOptions()])]);
+  }
+});

package/es/multiple-picker/index.css

@@ -0,0 +1 @@
+[class*=zt-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid rgba(0,0,0,.1);-webkit-transform:scale(.5);transform:scale(.5)}.zt-hairline,.zt-hairline--bottom,.zt-hairline--left,.zt-hairline--right,.zt-hairline--surround,.zt-hairline--top,.zt-hairline--top-bottom{position:relative}.zt-hairline--top::after{border-top-width:1px}.zt-hairline--left::after{border-left-width:1px}.zt-hairline--right::after{border-right-width:1px}.zt-hairline--bottom::after{border-bottom-width:1px}.zt-hairline--top-bottom::after,.zt-hairline-unset--top-bottom::after{border-width:1px 0}.zt-hairline--surround::after{border-width:1px}.zt-multiple-picker{position:relative;background-color:#fff;-webkit-user-select:none;user-select:none}.zt-multiple-picker__toolbar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;height:44px}.zt-multiple-picker__border{position:relative}.zt-multiple-picker__border::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-multiple-picker__cancel,.zt-multiple-picker__confirm{height:100%;padding:0 16px;font-size:16px;background-color:transparent;border:none;cursor:pointer}.zt-multiple-picker__cancel:active,.zt-multiple-picker__confirm:active{opacity:.7}.zt-multiple-picker__confirm{color:#0091fa;font-weight:700}.zt-multiple-picker__cancel{color:#000;font-weight:400}.zt-multiple-picker__title{max-width:50%;font-weight:400;font-size:14px;line-height:20px;text-align:center;color:rgba(0,0,0,.4)}.zt-multiple-picker__header{width:100%;height:40px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-size:14px;font-weight:400}.zt-multiple-picker__header>li{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;text-align:center}.zt-multiple-picker__options{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;cursor:grab}.zt-multiple-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#0091fa;background-color:rgba(255,255,255,.9)}.zt-multiple-picker-options{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:scroll;font-size:16px}.zt-multiple-picker-options__wrapper{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;background-color:#fff;padding:12px 4px 4px 4px}.zt-multiple-picker-options__item{color:rgba(0,0,0,.6);padding:0 4px 8px 0;box-sizing:border-box;border-radius:2px;text-align:center;font-size:14px}.zt-multiple-picker-options__item .zt-ellipsis{height:28px;line-height:28px;background-color:rgba(0,0,0,.04)}.zt-multiple-picker-options__item--disabled{cursor:not-allowed;opacity:.3}.zt-multiple-picker-options__item--last{padding-right:0}.zt-multiple-picker-options__item--selected .zt-ellipsis{background:rgba(0,145,250,.1);border:1px solid #0091fa;border-radius:2px;color:#0091fa}

package/es/multiple-picker/index.js

@@ -0,0 +1,208 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+// Utils
+import { createNamespace } from '../utils';
+import { pickerProps, DEFAULT_ITEM_HEIGHT } from './shared';
+import { unitToPx } from '../utils/format/unit'; // Components
+
+import Loading from '../loading';
+import MultiplePickerOptions from './MultiplePickerOptions';
+import Popup from '../popup';
+import { PopupMixin } from '../mixins/popup';
+import { deepClone } from '../utils/deep-clone';
+
+var _createNamespace = createNamespace('multiple-picker'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1],
+    t = _createNamespace[2];
+
+export default createComponent({
+  mixins: [PopupMixin()],
+  props: _extends({}, pickerProps, {
+    showToolbar: {
+      type: Boolean,
+      default: true
+    },
+    defaultIndexs: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    options: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    toolbarPosition: {
+      type: String,
+      default: 'top'
+    },
+    valueKey: {
+      type: String,
+      default: 'text'
+    },
+    columnCounts: {
+      type: Number,
+      default: 3
+    }
+  }),
+  data: function data() {
+    return {};
+  },
+  computed: {
+    itemPxHeight: function itemPxHeight() {
+      return this.itemHeight ? unitToPx(this.itemHeight) : DEFAULT_ITEM_HEIGHT;
+    }
+  },
+  methods: {
+    onClickOverlay: function onClickOverlay() {
+      if (this.closeOnClickOverlay) {
+        this.cancel();
+      }
+    },
+    emit: function emit(event) {
+      this.$emit(event, this.getOptions());
+    },
+    getOptions: function getOptions() {
+      var _this = this;
+
+      var indexs = this.$refs.pickerOptions.currentIndexs;
+      var result = [];
+      indexs.forEach(function (index) {
+        result.push(_this.options[index]);
+      });
+      return result;
+    },
+    onChange: function onChange() {
+      this.$emit('change', this.getOptions());
+    },
+    cancel: function cancel() {
+      this.emit('cancel');
+    },
+    confirm: function confirm() {
+      this.emit('confirm', this.getOptions());
+    },
+    genTitle: function genTitle() {
+      var h = this.$createElement;
+      var titleSlot = this.slots('title');
+
+      if (titleSlot) {
+        return titleSlot;
+      }
+
+      if (this.title) {
+        return h("div", {
+          "class": ['zt-ellipsis', bem('title')]
+        }, [this.title]);
+      }
+    },
+    genCancel: function genCancel() {
+      var h = this.$createElement;
+      return h("button", {
+        "attrs": {
+          "type": "button"
+        },
+        "class": bem('cancel'),
+        "on": {
+          "click": this.cancel
+        }
+      }, [this.slots('cancel') || this.cancelButtonText || t('cancel')]);
+    },
+    genConfirm: function genConfirm() {
+      var h = this.$createElement;
+      return h("button", {
+        "attrs": {
+          "type": "button"
+        },
+        "class": bem('confirm'),
+        "on": {
+          "click": this.confirm
+        }
+      }, [this.slots('confirm') || this.confirmButtonText || t('confirm')]);
+    },
+    genToolbar: function genToolbar() {
+      var h = this.$createElement;
+
+      if (this.showToolbar) {
+        return h("div", {
+          "class": bem('toolbar')
+        }, [this.slots() || [this.genCancel(), this.genTitle(), this.genConfirm()]]);
+      }
+    },
+    genOptions: function genOptions() {
+      var h = this.$createElement;
+      var rowsCount = Math.ceil(this.options.length / this.columnCounts);
+      var wrapHeight = 196;
+
+      if (rowsCount > 5) {
+        wrapHeight = 460;
+      }
+
+      var optionsStyle = {
+        height: wrapHeight + "px"
+      };
+      return h("div", {
+        "class": bem('options'),
+        "style": optionsStyle
+      }, [this.genOptionItems()]);
+    },
+    genOptionItems: function genOptionItems() {
+      var _this2 = this;
+
+      var h = this.$createElement;
+      var formatOptions = [];
+
+      if (this.options && this.options[0] && typeof this.options[0] !== 'object') {
+        formatOptions = this.options.map(function (v) {
+          return {
+            value: v,
+            text: v
+          };
+        });
+      } else {
+        formatOptions = this.options;
+      }
+
+      return h(MultiplePickerOptions, {
+        "ref": "pickerOptions",
+        "attrs": {
+          "readonly": this.readonly,
+          "valueKey": this.valueKey,
+          "allowHtml": this.allowHtml,
+          "itemHeight": this.itemPxHeight,
+          "defaultIndexs": this.defaultIndexs,
+          "initialOptions": formatOptions,
+          "columnCounts": this.columnCounts
+        },
+        "scopedSlots": {
+          option: this.$scopedSlots.option
+        },
+        "on": {
+          "change": function change() {
+            _this2.onChange();
+          }
+        }
+      });
+    }
+  },
+  render: function render(h) {
+    return h(Popup, {
+      "attrs": {
+        "value": this.showPicker,
+        "round": true,
+        "position": "bottom",
+        "closeOnPopstate": this.closeOnPopstate,
+        "closeOnClickOverlay": this.closeOnClickOverlay,
+        "customOnClickOverlay": this.onClickOverlay
+      }
+    }, [h("div", {
+      "class": bem(),
+      "ref": 'columnParent'
+    }, [this.toolbarPosition === 'top' ? this.genToolbar() : h(), this.toolbarPosition === 'top' ? h("div", {
+      "class": bem('border')
+    }) : h(), this.loading ? h(Loading, {
+      "class": bem('loading')
+    }) : h(), this.genOptions(), this.toolbarPosition === 'bottom' ? this.genToolbar() : h()])]);
+  }
+});

package/es/multiple-picker/index.less

@@ -0,0 +1,135 @@
+@import '../style/var';
+@import '../style/hairline';
+
+.zt-multiple-picker {
+  position: relative;
+  background-color: @picker-background-color;
+  user-select: none;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: @picker-toolbar-height;
+  }
+
+  &__border {
+    position: relative;
+  }
+
+  &__border::after {
+    .hairline-bottom();
+  }
+
+  &__cancel,
+  &__confirm {
+    height: 100%;
+    padding: @picker-action-padding;
+    font-size: @picker-action-font-size;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    &:active {
+      opacity: @active-opacity;
+    }
+  }
+
+  &__confirm {
+    color: @picker-confirm-action-color;
+    font-weight: @picker-confirm-action-font-weight;
+  }
+
+  &__cancel {
+    color: @picker-cancel-action-color;
+    font-weight: @picker-cancel-action-font-weight;
+  }
+
+  &__title {
+    max-width: 50%;
+    font-weight: @plain-font-weight;
+    font-size: @picker-title-font-size;
+    line-height: @picker-title-line-height;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  &__header {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    font-size: @picker-title-font-size;
+    font-weight: @plain-font-weight;
+
+    >li {
+      flex: auto;
+      text-align: center;
+    }
+  }
+
+  &__options {
+    position: relative;
+    display: flex;
+    cursor: grab;
+  }
+
+  &__loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @picker-loading-icon-color;
+    background-color: @picker-loading-mask-color;
+  }
+
+  &-options {
+    flex: 1;
+    overflow: scroll;
+    font-size: @picker-option-font-size;
+
+    &__wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      background-color: #fff;
+      padding: @multiple-picker-warpper-padding;
+    }
+
+    &__item {
+      color: @multiple-picker-option-text-color;
+      padding: 0 4px 8px 0;
+      box-sizing: border-box;
+      border-radius: 2px;
+      text-align: center;
+      font-size: 14px;
+      .zt-ellipsis {
+        height: 28px;
+        line-height: 28px;
+        background-color: rgba(0,0,0,.04);
+      }
+
+      &--disabled {
+        cursor: not-allowed;
+        opacity: @picker-option-disabled-opacity;
+      }
+
+      &--last {
+        padding-right: 0;
+      }
+
+      &--selected {
+        .zt-ellipsis {
+          background: rgba(0,145,250,0.10);
+          border: 1px solid #0091FA;
+          border-radius: 2px;
+          color: #0091FA;
+        }
+      }
+    }
+  }
+}

package/es/multiple-picker/shared.js

@@ -0,0 +1,26 @@
+export var DEFAULT_ITEM_HEIGHT = 36;
+export var pickerProps = {
+  title: String,
+  loading: Boolean,
+  readonly: Boolean,
+  itemHeight: [Number, String],
+  showToolbar: Boolean,
+  cancelButtonText: String,
+  confirmButtonText: String,
+  showPicker: {
+    type: Boolean,
+    default: false
+  },
+  allowHtml: {
+    type: Boolean,
+    default: true
+  },
+  closeOnPopstate: {
+    type: Boolean,
+    default: true
+  },
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true
+  }
+};

package/es/multiple-picker/style/index.js

@@ -0,0 +1,7 @@
+import '../../style/base.css';
+import '../../overlay/index.css';
+import '../../info/index.css';
+import '../../icon/index.css';
+import '../../popup/index.css';
+import '../../loading/index.css';
+import '../index.css';

package/es/multiple-picker/style/less.js

@@ -0,0 +1,7 @@
+import '../../style/base.less';
+import '../../overlay/index.less';
+import '../../info/index.less';
+import '../../icon/index.less';
+import '../../popup/index.less';
+import '../../loading/index.less';
+import '../index.less';

package/es/radio/index.css

@@ -1 +1 @@
-.zt-radio{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;padding:10px 16px}.zt-radio__custom-svg{width:24px;height:24px;border-radius:50%}.zt-radio__icon--disabled .zt-radio__custom-svg{opacity:.2}.zt-radio--disabled{cursor:not-allowed}.zt-radio--label-disabled{cursor:default}.zt-radio--horizontal{margin-right:12px}.zt-radio__icon{-webkit-box-flex:0;-webkit-flex:none;flex:none;height:1em;font-size:24px;line-height:1em;cursor:pointer}.zt-radio__icon i,.zt-radio__icon img{-webkit-transform:scale(.8333);transform:scale(.8333);-webkit-transform-origin:center;transform-origin:center}.zt-radio__icon img{width:1em;height:1em}.zt-radio__icon .zt-icon{display:block;box-sizing:border-box;width:1em;height:1em;color:transparent;font-size:1em;line-height:1.25;text-align:center;border:1px solid #c8c9cc;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:color,border-color,background-color;transition-property:color,border-color,background-color}.zt-radio__icon--round .zt-icon{border-radius:100%}.zt-radio__icon--checked .zt-icon{color:#fff;background-color:#0091fa;border-color:#0091fa}.zt-radio__icon--disabled{cursor:not-allowed}.zt-radio__icon--disabled .zt-icon{background-color:rgba(0,0,0,.1);border-color:#c8c9cc}.zt-radio__icon--disabled.zt-radio__icon--checked .zt-icon{color:#c8c9cc}.zt-radio__label{margin-left:8px;color:#000;line-height:24px}.zt-radio__label--left{margin:0 8px 0 0}.zt-radio__label--disabled{color:#c8c9cc}
+.zt-radio{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;padding:10px 0}.zt-radio__custom-svg{width:24px;height:24px;border-radius:50%}.zt-radio__icon--disabled .zt-radio__custom-svg{opacity:.2}.zt-radio--disabled{cursor:not-allowed}.zt-radio--label-disabled{cursor:default}.zt-radio--horizontal{margin-left:12px}.zt-radio__icon{-webkit-box-flex:0;-webkit-flex:none;flex:none;height:1em;font-size:24px;line-height:1em;cursor:pointer}.zt-radio__icon i,.zt-radio__icon img{-webkit-transform:scale(.8333);transform:scale(.8333);-webkit-transform-origin:center;transform-origin:center}.zt-radio__icon img{width:1em;height:1em}.zt-radio__icon .zt-icon{display:block;box-sizing:border-box;width:1em;height:1em;color:transparent;font-size:1em;line-height:1.25;text-align:center;border:1px solid #c8c9cc;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:color,border-color,background-color;transition-property:color,border-color,background-color}.zt-radio__icon--round .zt-icon{border-radius:100%}.zt-radio__icon--checked .zt-icon{color:#fff;background-color:#0091fa;border-color:#0091fa}.zt-radio__icon--disabled{cursor:not-allowed}.zt-radio__icon--disabled .zt-icon{background-color:rgba(0,0,0,.1);border-color:#c8c9cc}.zt-radio__icon--disabled.zt-radio__icon--checked .zt-icon{color:#c8c9cc}.zt-radio__label{margin-left:8px;color:#000;line-height:24px}.zt-radio__label--left{margin:0 8px 0 0}.zt-radio__label--disabled{color:#c8c9cc}

package/es/radio/index.less

@@ -26,7 +26,7 @@
   }
 
   &--horizontal {
-    margin-right: @padding-sm;
+    margin-left: @padding-sm;
   }
 
   &__icon {

package/es/style/var.less

@@ -267,7 +267,7 @@
 
 // Checkbox
 @checkbox-size: 24px;
-@checkbox-padding: 10px 16px;
+@checkbox-padding: 10px 0;
 @checkbox-border-color: @gray-5;
 @checkbox-transition-duration: @animation-duration-fast;
 @checkbox-label-margin: @padding-xs;
@@ -638,6 +638,10 @@
 @picker-loading-icon-color: @blue;
 @picker-loading-mask-color: rgba(255, 255, 255, 0.9);
 
+// MultiplePicker
+@multiple-picker-warpper-padding: 12px 4px 4px 4px;
+@multiple-picker-option-text-color: @gray-a6;
+
 // Popover
 @popover-arrow-size: 5px;
 @popover-border-radius: @border-radius-sm;
@@ -680,7 +684,7 @@
 
 // Radio
 @radio-size: 24px;
-@radio-padding: 10px 16px;
+@radio-padding: 10px 0;
 @radio-border-color: @gray-5;
 @radio-transition-duration: @animation-duration-fast;
 @radio-label-margin: @padding-xs;

package/es/uploader/index.js

@@ -378,7 +378,7 @@ export default createComponent({
           "name": "description"
         }
       }), h("div", {
-        "class": [bem('file-name'), 'van-ellipsis']
+        "class": [bem('file-name'), 'zt-ellipsis']
       }, [item.file ? item.file.name : item.url]), PreviewCover]);
       return h("div", {
         "class": bem('preview'),

package/lib/checkbox/index.css

@@ -1 +1 @@
-.zt-checkbox{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;padding:10px 16px}.zt-checkbox--disabled{cursor:not-allowed}.zt-checkbox--label-disabled{cursor:default}.zt-checkbox--horizontal{margin-right:12px}.zt-checkbox__icon{-webkit-box-flex:0;-webkit-flex:none;flex:none;height:1em;font-size:24px;line-height:1em;cursor:pointer}.zt-checkbox__icon i,.zt-checkbox__icon img{-webkit-transform:scale(.8333);transform:scale(.8333);-webkit-transform-origin:center;transform-origin:center}.zt-checkbox__icon .zt-icon{display:block;box-sizing:border-box;width:1.25em;height:1.25em;color:transparent;font-size:.8em;line-height:1.25;text-align:center;border:1px solid #c8c9cc;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:color,border-color,background-color;transition-property:color,border-color,background-color}.zt-checkbox__icon--round .zt-icon{border-radius:100%}.zt-checkbox__icon--checked .zt-icon{color:#fff;background-color:#0091fa;border-color:#0091fa}.zt-checkbox__icon--disabled{cursor:not-allowed}.zt-checkbox__icon--disabled .zt-icon{background-color:rgba(0,0,0,.1);border-color:#c8c9cc}.zt-checkbox__icon--disabled.zt-checkbox__icon--checked .zt-icon{opacity:.4;background-color:#0091fa;color:#fff}.zt-checkbox__label{margin-left:8px;color:#000;line-height:24px}.zt-checkbox__label--left{margin:0 8px 0 0}.zt-checkbox__label--disabled{color:#c8c9cc}
+.zt-checkbox{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;padding:10px 0}.zt-checkbox--disabled{cursor:not-allowed}.zt-checkbox--label-disabled{cursor:default}.zt-checkbox--horizontal{margin-left:12px}.zt-checkbox__icon{-webkit-box-flex:0;-webkit-flex:none;flex:none;height:1em;font-size:24px;line-height:1em;cursor:pointer}.zt-checkbox__icon i,.zt-checkbox__icon img{-webkit-transform:scale(.8333);transform:scale(.8333);-webkit-transform-origin:center;transform-origin:center}.zt-checkbox__icon .zt-icon{display:block;box-sizing:border-box;width:1.25em;height:1.25em;color:transparent;font-size:.8em;line-height:1.25;text-align:center;border:1px solid #c8c9cc;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:color,border-color,background-color;transition-property:color,border-color,background-color}.zt-checkbox__icon--round .zt-icon{border-radius:100%}.zt-checkbox__icon--checked .zt-icon{color:#fff;background-color:#0091fa;border-color:#0091fa}.zt-checkbox__icon--disabled{cursor:not-allowed}.zt-checkbox__icon--disabled .zt-icon{background-color:rgba(0,0,0,.1);border-color:#c8c9cc}.zt-checkbox__icon--disabled.zt-checkbox__icon--checked .zt-icon{opacity:.4;background-color:#0091fa;color:#fff}.zt-checkbox__label{margin-left:8px;color:#000;line-height:24px}.zt-checkbox__label--left{margin:0 8px 0 0}.zt-checkbox__label--disabled{color:#c8c9cc}