zartui 1.0.21 → 1.0.23

package/es/radio-picker/index.js

@@ -0,0 +1,477 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+// Utils
+import { createNamespace } from '../utils';
+import { preventDefault } from '../utils/dom/event';
+import { unitToPx } from '../utils/format/unit';
+import { DEFAULT_WRAP_HEIGHT, radioPickerProps } from './shared'; // Components
+
+import Loading from '../loading';
+import { PopupMixin } from '../mixins/popup';
+import Popup from '../popup';
+import Search from '../search';
+import PickerColumn from './PickerColumn';
+
+var _createNamespace = createNamespace('radio-picker'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1],
+    t = _createNamespace[2];
+
+export default createComponent({
+  mixins: [PopupMixin()],
+  props: _extends({}, radioPickerProps, {
+    defaultIndex: {
+      type: [Number, String],
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    headers: {
+      type: Array,
+      default: null
+    },
+    toolbarPosition: {
+      type: String,
+      default: 'top'
+    },
+    valueKey: {
+      type: String,
+      default: 'text'
+    },
+    searchable: {
+      type: Boolean,
+      default: false
+    },
+    searchPlaceholder: {
+      type: String,
+      default: '请输入'
+    }
+  }),
+  data: function data() {
+    return {
+      children: [],
+      formattedColumns: [],
+      confirmIndex: '',
+      searchVal: '',
+      searchConfirmVal: ''
+    };
+  },
+  computed: {
+    wrapPxHeight: function wrapPxHeight() {
+      return this.wrapHeight ? unitToPx(this.wrapHeight) : DEFAULT_WRAP_HEIGHT;
+    },
+    dataType: function dataType() {
+      var columns = this.columns;
+      var firstColumn = columns[0] || {};
+
+      if (firstColumn.children) {
+        return 'cascade';
+      }
+
+      if (firstColumn.values) {
+        return 'object';
+      }
+
+      return 'text';
+    }
+  },
+  watch: {
+    columns: {
+      handler: 'format',
+      immediate: true
+    },
+    showPicker: {
+      handler: function handler(val) {
+        var _this = this;
+
+        if (val) {
+          this.$nextTick(function () {
+            _this.children.forEach(function (child) {
+              child.setConfirmIndex();
+            });
+
+            _this.children.forEach(function (child) {
+              child.recordConfirmIndex();
+            });
+          });
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    onClickOverlay: function onClickOverlay() {
+      if (this.closeOnClickOverlay) {
+        this.cancel();
+      }
+    },
+    format: function format() {
+      var columns = this.columns,
+          dataType = this.dataType;
+
+      if (dataType === 'text') {
+        this.formattedColumns = [{
+          values: columns
+        }];
+      } else if (dataType === 'cascade') {
+        this.formatCascade();
+      } else {
+        this.formattedColumns = columns;
+      }
+    },
+    formatCascade: function formatCascade() {
+      var formatted = [];
+      var cursor = {
+        children: this.columns
+      };
+
+      while (cursor && cursor.children) {
+        var _cursor$defaultIndex;
+
+        var _cursor = cursor,
+            children = _cursor.children;
+        var defaultIndex = (_cursor$defaultIndex = cursor.defaultIndex) != null ? _cursor$defaultIndex : +this.defaultIndex;
+
+        while (children[defaultIndex] && children[defaultIndex].disabled) {
+          if (defaultIndex < children.length - 1) {
+            defaultIndex++;
+          } else {
+            defaultIndex = 0;
+            break;
+          }
+        }
+
+        formatted.push({
+          values: cursor.children,
+          className: cursor.className,
+          defaultIndex: defaultIndex
+        });
+        cursor = children[defaultIndex];
+      }
+
+      this.formattedColumns = formatted;
+    },
+    emit: function emit(event) {
+      var _this2 = this;
+
+      if (this.dataType === 'text') {
+        this.$emit(event, this.getColumnValue(0), this.getColumnIndex(0));
+      } else {
+        var values = this.getValues(); // compatible with old version of wrong parameters
+        // should be removed in next major version
+        // see: https://github.com/vant-ui/vant/issues/5905
+
+        if (this.dataType === 'cascade') {
+          values = values.map(function (item) {
+            return item[_this2.valueKey];
+          });
+        }
+
+        this.$emit(event, values, this.getIndexes());
+      }
+    },
+    onCascadeChange: function onCascadeChange(columnIndex) {
+      var cursor = {
+        children: this.columns
+      };
+      var indexes = this.getIndexes();
+
+      for (var i = 0; i <= columnIndex; i++) {
+        cursor = cursor.children[indexes[i]];
+      }
+
+      while (cursor && cursor.children) {
+        columnIndex++;
+        this.setColumnValues(columnIndex, cursor.children);
+        cursor = cursor.children[cursor.defaultIndex || 0];
+      }
+    },
+    onChange: function onChange(columnIndex) {
+      var _this3 = this;
+
+      if (this.dataType === 'cascade') {
+        this.onCascadeChange(columnIndex);
+      }
+
+      if (this.dataType === 'text') {
+        this.$emit('change', this, this.getColumnValue(0), this.getColumnIndex(0));
+      } else {
+        var values = this.getValues(); // compatible with old version of wrong parameters
+        // should be removed in next major version
+        // see: https://github.com/vant-ui/vant/issues/5905
+
+        if (this.dataType === 'cascade') {
+          values = values.map(function (item) {
+            return item[_this3.valueKey];
+          });
+        }
+
+        this.$emit('change', this, values, columnIndex);
+      }
+    },
+    getColumnCount: function getColumnCount() {
+      return this.children ? this.children.length : 0;
+    },
+    // get column instance by index
+    getColumn: function getColumn(index) {
+      return this.children[index];
+    },
+    // @exposed-api
+    // get column value by index
+    getColumnValue: function getColumnValue(index) {
+      var column = this.getColumn(index);
+      return column && column.getValue();
+    },
+    // @exposed-api
+    // set column value by index
+    setColumnValue: function setColumnValue(index, value) {
+      var column = this.getColumn(index);
+
+      if (column) {
+        column.setValue(value);
+
+        if (this.dataType === 'cascade') {
+          this.onCascadeChange(index);
+        }
+      }
+    },
+    // @exposed-api
+    // get column option index by column index
+    getColumnIndex: function getColumnIndex(columnIndex) {
+      return (this.getColumn(columnIndex) || {}).currentIndex;
+    },
+    // @exposed-api
+    // set column option index by column index
+    setColumnIndex: function setColumnIndex(columnIndex, optionIndex) {
+      var column = this.getColumn(columnIndex);
+
+      if (column) {
+        column.setIndex(optionIndex);
+
+        if (this.dataType === 'cascade') {
+          this.onCascadeChange(columnIndex);
+        }
+      }
+    },
+    // @exposed-api
+    // get options of column by index
+    getColumnValues: function getColumnValues(index) {
+      return (this.children[index] || {}).options;
+    },
+    // @exposed-api
+    // set options of column by index
+    setColumnValues: function setColumnValues(index, options) {
+      var column = this.children[index];
+
+      if (column) {
+        column.setOptions(options);
+      }
+    },
+    // @exposed-api
+    // get values of all columns
+    getValues: function getValues() {
+      return this.children.map(function (child) {
+        return child.getValue();
+      });
+    },
+    // @exposed-api
+    // set values of all columns
+    setValues: function setValues(values) {
+      var _this4 = this;
+
+      values.forEach(function (value, index) {
+        _this4.setColumnValue(index, value);
+      });
+    },
+    // @exposed-api
+    // get indexes of all columns
+    getIndexes: function getIndexes() {
+      return this.children.map(function (child) {
+        return child.currentIndex;
+      });
+    },
+    // @exposed-api
+    // set indexes of all columns
+    setIndexes: function setIndexes(indexes) {
+      var _this5 = this;
+
+      indexes.forEach(function (optionIndex, columnIndex) {
+        _this5.setColumnIndex(columnIndex, optionIndex);
+      });
+    },
+    // @exposed-api
+    confirm: function confirm() {
+      this.children.forEach(function (child) {
+        return child.stopMomentum();
+      });
+      this.children.forEach(function (child) {
+        return child.recordConfirmIndex();
+      });
+      this.emit('confirm');
+    },
+    cancel: function cancel() {
+      this.$emit('update:showPicker', false);
+      this.emit('cancel');
+    },
+    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()]]);
+      }
+    },
+    genHeaders: function genHeaders() {
+      var h = this.$createElement;
+      return h("ul", {
+        "class": bem('header')
+      }, [this.genHeaderItems()]);
+    },
+    genHeaderItems: function genHeaderItems() {
+      var h = this.$createElement;
+      return this.headers.map(function (header) {
+        return h("li", [header]);
+      });
+    },
+    genSearch: function genSearch() {
+      var h = this.$createElement;
+      return h(Search, {
+        "attrs": {
+          "value": this.searchVal,
+          "placeholder": this.searchPlaceholder
+        },
+        "on": {
+          "input": this.handleSearchInput,
+          "search": this.handleSearch
+        }
+      });
+    },
+    handleSearchInput: function handleSearchInput(inputVal) {
+      this.searchVal = inputVal; // 直接清空输入框的情况，就不继续展示已经查询的内容了
+
+      if (!inputVal) {
+        this.handleSearch(inputVal);
+      }
+    },
+
+    /**
+     * @description: 这里才将输入值实际传递给子组件进行过滤
+     * @param {*} e 搜索框的输入值
+     */
+    handleSearch: function handleSearch(e) {
+      this.searchConfirmVal = e;
+    },
+    genColumns: function genColumns() {
+      var h = this.$createElement;
+      var wrapHeight = this.wrapHeight;
+      var columnsStyle = {
+        height: wrapHeight + "px"
+      };
+      return h("div", {
+        "class": bem('columns'),
+        "style": columnsStyle,
+        "on": {
+          "touchmove": preventDefault
+        }
+      }, [this.genColumnItems()]);
+    },
+    genColumnItems: function genColumnItems() {
+      var _this6 = this;
+
+      var h = this.$createElement;
+      return this.formattedColumns.map(function (item, columnIndex) {
+        var _item$defaultIndex;
+
+        return h(PickerColumn, {
+          "attrs": {
+            "columnCollector": _this6.children,
+            "readonly": _this6.readonly,
+            "valueKey": _this6.valueKey,
+            "allowHtml": _this6.allowHtml,
+            "searchVal": _this6.searchConfirmVal,
+            "searchable": _this6.searchable,
+            "toolbarPosition": _this6.toolbarPosition,
+            "className": item.className,
+            "wrapHeight": _this6.wrapPxHeight,
+            "defaultIndex": (_item$defaultIndex = item.defaultIndex) != null ? _item$defaultIndex : +_this6.defaultIndex,
+            "swipeDuration": _this6.swipeDuration,
+            "initialOptions": item.values
+          },
+          "scopedSlots": {
+            option: _this6.$scopedSlots.option
+          },
+          "on": {
+            "change": function change() {
+              _this6.onChange(columnIndex);
+            }
+          }
+        });
+      });
+    }
+  },
+  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.slots('columns-top'), this.headers && this.headers.length > 0 ? this.genHeaders() : h(), this.headers && this.headers.length > 0 ? h("div", {
+      "class": bem('border')
+    }) : h(), this.searchable ? this.genSearch() : h(), this.searchable ? h("div", {
+      "class": bem('border')
+    }) : h(), this.genColumns(), this.slots('columns-bottom'), this.toolbarPosition === 'bottom' ? this.genToolbar() : h()])]);
+  }
+});

package/es/radio-picker/index.less

@@ -0,0 +1,152 @@
+@import '../style/var';
+@import '../style/hairline';
+
+.zt-radio-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;
+    }
+  }
+
+  &__columns {
+    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;
+  }
+
+  &__frame {
+    position: absolute;
+    top: 50%;
+    right: @padding-md;
+    left: @padding-md;
+    z-index: 2;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  &__background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+  }
+
+  &-column {
+    flex: 1;
+    overflow: hidden;
+    font-size: @picker-option-font-size;
+
+    &__wrapper {
+      transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
+    }
+
+    &__item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: @radio-picker-warpper-item-padding;
+      color: @picker-option-text-color;
+
+      &::after {
+        // ui要求，border需居于文字底部，故去除了radio与一些padding、margin的距离
+        .hairline-bottom(@border-color, calc(16px + 24px + 8px));
+      }
+
+      &--disabled {
+        cursor: not-allowed;
+        opacity: @picker-option-disabled-opacity;
+      }
+
+      &--not-match {
+        display: none;
+      }
+
+      &--selected {
+        font-weight: @font-weight-bold;
+      }
+
+      // ui效果，需要修改label的行高
+      .zt-radio__label {
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: @font-size-md;
+        line-height: @line-height-md;
+      }
+    }
+  }
+}

package/es/radio-picker/shared.js

@@ -0,0 +1,36 @@
+export var DEFAULT_WRAP_HEIGHT = 350;
+export var radioPickerProps = {
+  title: String,
+  loading: Boolean,
+  readonly: Boolean,
+  cancelButtonText: String,
+  confirmButtonText: String,
+  showToolbar: {
+    type: Boolean,
+    default: true
+  },
+  showPicker: {
+    type: Boolean,
+    default: false
+  },
+  wrapHeight: {
+    type: [Number, String],
+    default: DEFAULT_WRAP_HEIGHT
+  },
+  allowHtml: {
+    type: Boolean,
+    default: true
+  },
+  swipeDuration: {
+    type: [Number, String],
+    default: 1000
+  },
+  closeOnPopstate: {
+    type: Boolean,
+    default: true
+  },
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true
+  }
+};

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

@@ -0,0 +1,13 @@
+import '../../style/base.css';
+import '../../overlay/index.css';
+import '../../info/index.css';
+import '../../icon/index.css';
+import '../../radio/index.css';
+import '../../cell/index.css';
+import '../../field/index.css';
+import '../../search/index.css';
+import '../../popup/index.css';
+import '../../loading/index.css';
+import '../../empty/index.css';
+import '../../radio-group/index.css';
+import '../index.css';

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

@@ -0,0 +1,13 @@
+import '../../style/base.less';
+import '../../overlay/index.less';
+import '../../info/index.less';
+import '../../icon/index.less';
+import '../../radio/index.less';
+import '../../cell/index.less';
+import '../../field/index.less';
+import '../../search/index.less';
+import '../../popup/index.less';
+import '../../loading/index.less';
+import '../../empty/index.less';
+import '../../radio-group/index.less';
+import '../index.less';

package/es/style/var.less

@@ -654,6 +654,9 @@
 @multiple-picker-warpper-padding: 12px 16px 4px 16px;
 @multiple-picker-option-text-color: @gray-a6;
 
+// RadioPicker
+@radio-picker-warpper-item-padding: 10px @padding-md;
+
 // Popover
 @popover-arrow-size: 5px;
 @popover-border-radius: @border-radius-sm;