zartui 2.0.74 → 2.0.76

package/es/action-sheet/index.css

@@ -0,0 +1 @@
+.zt2-action-sheet{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;max-height:80%;overflow:hidden;color:rgba(0,0,0,.6)}.zt2-action-sheet__content{-webkit-box-flex:1;-webkit-flex:1 auto;flex:1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.zt2-action-sheet__cancel,.zt2-action-sheet__item{display:block;width:100%;padding:10px 16px;font-size:14px;line-height:24px;min-height:44px;background-color:#fff;border:none;cursor:pointer}.zt2-action-sheet__cancel:active,.zt2-action-sheet__item:active{background-color:rgba(0,0,0,.04)}.zt2-action-sheet__item{position:relative;color:#2d4b73}.zt2-action-sheet__item::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)}.zt2-action-sheet__item--disabled,.zt2-action-sheet__item--loading{color:rgba(0,0,0,.2)}.zt2-action-sheet__item--disabled:active,.zt2-action-sheet__item--loading:active{background-color:#fff}.zt2-action-sheet__item--disabled{cursor:not-allowed}.zt2-action-sheet__item--loading{cursor:default}.zt2-action-sheet__item--has-subname{padding-top:9px;padding-bottom:9px}.zt2-action-sheet__cancel{box-sizing:border-box;color:#2d4b73;background:rgba(45,75,115,.04);border-radius:20px;font-size:16px}.zt2-action-sheet__subname{margin-top:2px;color:#969799;font-size:12px;line-height:16px}.zt2-action-sheet__cancel-box{display:-webkit-box;display:-webkit-flex;display:flex;height:60px;padding:0 16px;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt2-action-sheet__header{-webkit-flex-shrink:0;flex-shrink:0;font-size:14px;line-height:44px;text-align:center;position:relative;color:rgba(45,75,115,.4)}.zt2-action-sheet__header::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)}.zt2-action-sheet__header--align-start{text-align:start}.zt2-action-sheet__description{position:relative;-webkit-flex-shrink:0;flex-shrink:0;padding:20px 16px;color:#969799;font-size:14px;line-height:20px;text-align:center}.zt2-action-sheet__description::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:16px;bottom:0;left:16px;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt2-action-sheet__loading-icon .zt2-loading__spinner{width:20px;height:20px}.zt2-action-sheet__close{position:absolute;top:0;right:0;padding:0 16px;color:rgba(0,0,0,.4);font-size:20px;line-height:inherit}.zt2-action-sheet__close:active{color:#969799}

package/es/action-sheet/index.js

@@ -0,0 +1,185 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
+import Vue from 'vue'; // Utils
+
+import { createNamespace } from '../utils';
+import { emit, inherit } from '../utils/functional'; // Mixins
+
+import { popupMixinProps } from '../mixins/popup'; // Components
+
+import Icon from '../icon';
+import Popup from '../popup';
+import Loading from '../loading'; // Types
+
+var _createNamespace = createNamespace('action-sheet'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+function ActionSheet(h, props, slots, ctx) {
+  var title = props.title,
+      cancelText = props.cancelText,
+      closeable = props.closeable;
+
+  function onCancel() {
+    emit(ctx, 'input', false);
+    emit(ctx, 'cancel');
+  }
+
+  function Header() {
+    if (slots.title) {
+      return h("div", {
+        "class": bem('header', 'align-start')
+      }, [slots.title(), closeable && h(Icon, {
+        "attrs": {
+          "name": props.closeIcon
+        },
+        "class": bem('close'),
+        "on": {
+          "click": onCancel
+        }
+      })]);
+    }
+
+    if (title) {
+      return h("div", {
+        "class": bem('header')
+      }, [title, closeable && h(Icon, {
+        "attrs": {
+          "name": props.closeIcon
+        },
+        "class": bem('close'),
+        "on": {
+          "click": onCancel
+        }
+      })]);
+    }
+  }
+
+  function Option(item, index) {
+    var disabled = item.disabled,
+        loading = item.loading,
+        callback = item.callback;
+
+    function onClickOption(event) {
+      event.stopPropagation();
+
+      if (disabled || loading) {
+        return;
+      }
+
+      if (callback) {
+        callback(item);
+      }
+
+      if (props.closeOnClickAction) {
+        emit(ctx, 'input', false);
+      }
+
+      Vue.nextTick(function () {
+        emit(ctx, 'select', item, index);
+      });
+    }
+
+    function OptionContent() {
+      if (loading) {
+        return h(Loading, {
+          "class": bem('loading-icon')
+        });
+      }
+
+      return [h("span", {
+        "class": bem('name')
+      }, [item.name]), item.subname && h("div", {
+        "class": bem('subname')
+      }, [item.subname])];
+    }
+
+    var hasSubName = !loading && item.subname;
+    return h("button", {
+      "attrs": {
+        "type": "button"
+      },
+      "class": [bem('item', {
+        disabled: disabled,
+        loading: loading,
+        'has-subname': hasSubName
+      }), item.className],
+      "style": {
+        color: item.color
+      },
+      "on": {
+        "click": onClickOption
+      }
+    }, [OptionContent()]);
+  }
+
+  function CancelText() {
+    if (cancelText) {
+      return [h("div", {
+        "class": bem('cancel-box')
+      }, [h("button", {
+        "attrs": {
+          "type": "button"
+        },
+        "class": bem('cancel'),
+        "on": {
+          "click": onCancel
+        }
+      }, [cancelText])])];
+    }
+  }
+
+  return h(Popup, _mergeJSXProps([{
+    "class": bem(),
+    "attrs": {
+      "position": "bottom",
+      "round": props.round,
+      "value": props.value,
+      "overlay": props.overlay,
+      "duration": props.duration,
+      "lazyRender": props.lazyRender,
+      "lockScroll": props.lockScroll,
+      "getContainer": props.getContainer,
+      "closeOnPopstate": props.closeOnPopstate,
+      "closeOnClickOverlay": props.closeOnClickOverlay,
+      "safeAreaInsetBottom": props.safeAreaInsetBottom
+    }
+  }, inherit(ctx, true)]), [Header(), h("div", {
+    "class": bem('content')
+  }, [props.actions && props.actions.map(Option), slots.default == null ? void 0 : slots.default()]), CancelText()]);
+}
+
+ActionSheet.props = _extends({}, popupMixinProps, {
+  title: String,
+  actions: Array,
+  duration: [Number, String],
+  cancelText: String,
+  getContainer: [String, Function],
+  closeOnPopstate: Boolean,
+  closeOnClickAction: Boolean,
+  round: {
+    type: Boolean,
+    default: true
+  },
+  closeable: {
+    type: Boolean,
+    default: false
+  },
+  closeIcon: {
+    type: String,
+    default: 'cross'
+  },
+  safeAreaInsetBottom: {
+    type: Boolean,
+    default: true
+  },
+  overlay: {
+    type: Boolean,
+    default: true
+  },
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true
+  }
+});
+export default createComponent(ActionSheet);

package/es/action-sheet/index.less

@@ -0,0 +1,137 @@
+@import '../style/var';
+@import '../style/mixins/hairline';
+
+.@{base-prefix}-action-sheet {
+  display: flex;
+  flex-direction: column;
+  max-height: @action-sheet-max-height;
+  overflow: hidden;
+  color: @action-sheet-item-text-color;
+
+  &__content {
+    flex: 1 auto;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  &__item,
+  &__cancel {
+    display: block;
+    width: 100%;
+    padding: 10px @padding-md;
+    font-size: @action-sheet-item-font-size;
+    line-height: @action-sheet-item-line-height;
+    min-height: @action-sheet-item-min-height;
+    background-color: @action-sheet-item-background;
+    border: none;
+    cursor: pointer;
+
+    &:active {
+      background-color: @active-color;
+    }
+  }
+
+  &__item {
+    position: relative;
+    color: @text-color-3;
+
+    &::after {
+      .hairline-bottom(@cell-border-color);
+    }
+
+    &--loading,
+    &--disabled {
+      color: @action-sheet-item-disabled-text-color;
+
+      &:active {
+        background-color: @action-sheet-item-background;
+      }
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+    }
+
+    &--loading {
+      cursor: default;
+    }
+
+    &--has-subname {
+      padding-top: 9px;
+      padding-bottom: 9px;
+    }
+  }
+
+  &__cancel {
+    //flex-shrink: 0;
+    box-sizing: border-box;
+    color: @action-sheet-cancel-text-color;
+    background: rgba(45, 75, 115, 0.04);
+    border-radius: 20px;
+    font-size: @font-size-lg;
+  }
+
+  &__subname {
+    margin-top: 2px;
+    color: @action-sheet-subname-color;
+    font-size: @action-sheet-subname-font-size;
+    line-height: @action-sheet-subname-line-height;
+  }
+
+  &__cancel-box {
+    display: flex;
+    height: 60px;
+    padding: 0 16px;
+    align-items: center;
+  }
+
+  &__header {
+    flex-shrink: 0;
+    font-size: @action-sheet-header-font-size;
+    line-height: @action-sheet-header-height;
+    text-align: center;
+    position: relative;
+    color: @text-color-4;
+
+    &::after {
+      .hairline-bottom(@cell-border-color);
+    }
+
+    &--align-start {
+      text-align: start;
+    }
+  }
+
+  &__description {
+    position: relative;
+    flex-shrink: 0;
+    padding: 20px @padding-md;
+    color: @action-sheet-description-color;
+    font-size: @action-sheet-description-font-size;
+    line-height: @action-sheet-description-line-height;
+    text-align: center;
+
+    &::after {
+      .hairline-bottom(@cell-border-color, @padding-md, @padding-md);
+    }
+  }
+
+  &__loading-icon .@{base-prefix}-loading__spinner {
+    width: @action-sheet-loading-icon-size;
+    height: @action-sheet-loading-icon-size;
+  }
+
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: @action-sheet-close-icon-padding;
+    color: @action-sheet-close-icon-color;
+    font-size: @action-sheet-close-icon-size;
+    line-height: inherit;
+
+    &:active {
+      color: @action-sheet-close-icon-active-color;
+    }
+  }
+}

package/es/action-sheet/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/action-sheet/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/area/index.js

@@ -0,0 +1,321 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createNamespace } from '../utils';
+import { pickerProps } from '../picker/shared';
+import Picker from '../picker';
+
+var _createNamespace = createNamespace('area'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+var PLACEHOLDER_CODE = '000000';
+
+function isOverseaCode(code) {
+  return code[0] === '9';
+}
+
+function pickSlots(instance, keys) {
+  var $slots = instance.$slots,
+      $scopedSlots = instance.$scopedSlots;
+  var scopedSlots = {};
+  keys.forEach(function (key) {
+    if ($scopedSlots[key]) {
+      scopedSlots[key] = $scopedSlots[key];
+    } else if ($slots[key]) {
+      scopedSlots[key] = function () {
+        return $slots[key];
+      };
+    }
+  });
+  return scopedSlots;
+}
+
+export default createComponent({
+  props: _extends({}, pickerProps, {
+    value: String,
+    areaList: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    columnsNum: {
+      type: [Number, String],
+      default: 3
+    },
+    isOverseaCode: {
+      type: Function,
+      default: isOverseaCode
+    },
+    columnsPlaceholder: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    }
+  }),
+  data: function data() {
+    return {
+      code: this.value,
+      columns: [{
+        values: []
+      }, {
+        values: []
+      }, {
+        values: []
+      }]
+    };
+  },
+  computed: {
+    province: function province() {
+      return this.areaList.province_list || {};
+    },
+    city: function city() {
+      return this.areaList.city_list || {};
+    },
+    county: function county() {
+      return this.areaList.county_list || {};
+    },
+    displayColumns: function displayColumns() {
+      return this.columns.slice(0, +this.columnsNum);
+    },
+    placeholderMap: function placeholderMap() {
+      return {
+        province: this.columnsPlaceholder[0] || '',
+        city: this.columnsPlaceholder[1] || '',
+        county: this.columnsPlaceholder[2] || ''
+      };
+    }
+  },
+  watch: {
+    value: function value(val) {
+      this.code = val;
+      this.setValues();
+    },
+    areaList: {
+      deep: true,
+      handler: 'setValues'
+    },
+    columnsNum: function columnsNum() {
+      var _this = this;
+
+      this.$nextTick(function () {
+        _this.setValues();
+      });
+    }
+  },
+  mounted: function mounted() {
+    this.setValues();
+  },
+  methods: {
+    // get list by code
+    getList: function getList(type, code) {
+      var result = [];
+
+      if (type !== 'province' && !code) {
+        return result;
+      }
+
+      var list = this[type];
+      result = Object.keys(list).map(function (listCode) {
+        return {
+          code: listCode,
+          name: list[listCode]
+        };
+      });
+
+      if (code) {
+        // oversea code
+        if (this.isOverseaCode(code) && type === 'city') {
+          code = '9';
+        }
+
+        result = result.filter(function (item) {
+          return item.code.indexOf(code) === 0;
+        });
+      }
+
+      if (this.placeholderMap[type] && result.length) {
+        // set columns placeholder
+        var codeFill = '';
+
+        if (type === 'city') {
+          codeFill = PLACEHOLDER_CODE.slice(2, 4);
+        } else if (type === 'county') {
+          codeFill = PLACEHOLDER_CODE.slice(4, 6);
+        }
+
+        result.unshift({
+          code: "" + code + codeFill,
+          name: this.placeholderMap[type]
+        });
+      }
+
+      return result;
+    },
+    // get index by code
+    getIndex: function getIndex(type, code) {
+      var compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
+      var list = this.getList(type, code.slice(0, compareNum - 2)); // oversea code
+
+      if (this.isOverseaCode(code) && type === 'province') {
+        compareNum = 1;
+      }
+
+      code = code.slice(0, compareNum);
+
+      for (var i = 0; i < list.length; i++) {
+        if (list[i].code.slice(0, compareNum) === code) {
+          return i;
+        }
+      }
+
+      return 0;
+    },
+    // parse output columns data
+    parseOutputValues: function parseOutputValues(values) {
+      var _this2 = this;
+
+      return values.map(function (value, index) {
+        // save undefined value
+        if (!value) return value;
+        value = JSON.parse(JSON.stringify(value));
+
+        if (!value.code || value.name === _this2.columnsPlaceholder[index]) {
+          value.code = '';
+          value.name = '';
+        }
+
+        return value;
+      });
+    },
+    onChange: function onChange(picker, values, index) {
+      this.code = values[index].code;
+      this.setValues();
+      var parsedValues = this.parseOutputValues(picker.getValues());
+      this.$emit('change', picker, parsedValues, index);
+    },
+    onConfirm: function onConfirm(values, index) {
+      values = this.parseOutputValues(values);
+      this.setValues();
+      this.$emit('confirm', values, index);
+    },
+    getDefaultCode: function getDefaultCode() {
+      if (this.columnsPlaceholder.length) {
+        return PLACEHOLDER_CODE;
+      }
+
+      var countyCodes = Object.keys(this.county);
+
+      if (countyCodes[0]) {
+        return countyCodes[0];
+      }
+
+      var cityCodes = Object.keys(this.city);
+
+      if (cityCodes[0]) {
+        return cityCodes[0];
+      }
+
+      return '';
+    },
+    setValues: function setValues() {
+      var code = this.code;
+
+      if (!code) {
+        code = this.getDefaultCode();
+      }
+
+      var picker = this.$refs.picker;
+      var province = this.getList('province');
+      var city = this.getList('city', code.slice(0, 2));
+
+      if (!picker) {
+        return;
+      }
+
+      picker.setColumnValues(0, province);
+      picker.setColumnValues(1, city);
+
+      if (city.length && code.slice(2, 4) === '00' && !this.isOverseaCode(code)) {
+        code = city[0].code;
+      }
+
+      picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
+      picker.setIndexes([this.getIndex('province', code), this.getIndex('city', code), this.getIndex('county', code)]);
+    },
+    getValues: function getValues() {
+      var picker = this.$refs.picker;
+      var getValues = picker ? picker.getValues().filter(function (value) {
+        return !!value;
+      }) : [];
+      getValues = this.parseOutputValues(getValues);
+      return getValues;
+    },
+    getArea: function getArea() {
+      var values = this.getValues();
+      var area = {
+        code: '',
+        country: '',
+        province: '',
+        city: '',
+        county: ''
+      };
+
+      if (!values.length) {
+        return area;
+      }
+
+      var names = values.map(function (item) {
+        return item.name;
+      });
+      var validValues = values.filter(function (value) {
+        return !!value.code;
+      });
+      area.code = validValues.length ? validValues[validValues.length - 1].code : '';
+
+      if (this.isOverseaCode(area.code)) {
+        area.country = names[1] || '';
+        area.province = names[2] || '';
+      } else {
+        area.province = names[0] || '';
+        area.city = names[1] || '';
+        area.county = names[2] || '';
+      }
+
+      return area;
+    },
+    // @exposed-api
+    reset: function reset(code) {
+      this.code = code || '';
+      this.setValues();
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+
+    var on = _extends({}, this.$listeners, {
+      change: this.onChange,
+      confirm: this.onConfirm
+    });
+
+    return h(Picker, {
+      "ref": "picker",
+      "class": bem(),
+      "attrs": {
+        "showToolbar": true,
+        "valueKey": "name",
+        "title": this.title,
+        "columns": this.displayColumns,
+        "loading": this.loading,
+        "readonly": this.readonly,
+        "itemHeight": this.itemHeight,
+        "swipeDuration": this.swipeDuration,
+        "visibleItemCount": this.visibleItemCount,
+        "cancelButtonText": this.cancelButtonText,
+        "confirmButtonText": this.confirmButtonText
+      },
+      "scopedSlots": pickSlots(this, ['title', 'columns-top', 'columns-bottom']),
+      "on": _extends({}, on)
+    });
+  }
+});

package/es/area/style/index.js

@@ -0,0 +1,8 @@
+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 '../../button/index.css';
+import '../../picker/index.css';

package/es/area/style/less.js

@@ -0,0 +1,8 @@
+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 '../../button/index.less';
+import '../../picker/index.less';