| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383 | import _extends from "@babel/runtime/helpers/esm/extends";// Utilsimport { createNamespace } from '../utils';import { preventDefault } from '../utils/dom/event';import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';import { pickerProps, DEFAULT_ITEM_HEIGHT } from './shared';import { unitToPx } from '../utils/format/unit'; // Componentsimport Loading from '../loading';import PickerColumn from './PickerColumn';var _createNamespace = createNamespace('picker'),    createComponent = _createNamespace[0],    bem = _createNamespace[1],    t = _createNamespace[2];export default createComponent({  props: _extends({}, pickerProps, {    defaultIndex: {      type: [Number, String],      default: 0    },    columns: {      type: Array,      default: function _default() {        return [];      }    },    toolbarPosition: {      type: String,      default: 'top'    },    valueKey: {      type: String,      default: 'text'    }  }),  data: function data() {    return {      children: [],      formattedColumns: []    };  },  computed: {    itemPxHeight: function itemPxHeight() {      return this.itemHeight ? unitToPx(this.itemHeight) : DEFAULT_ITEM_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    }  },  methods: {    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 _this = 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[_this.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 _this2 = 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[_this2.valueKey];          });        }        this.$emit('change', this, values, columnIndex);      }    },    // 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 _this3 = this;      values.forEach(function (value, index) {        _this3.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 _this4 = this;      indexes.forEach(function (optionIndex, columnIndex) {        _this4.setColumnIndex(columnIndex, optionIndex);      });    },    // @exposed-api    confirm: function confirm() {      this.children.forEach(function (child) {        return child.stopMomentum();      });      this.emit('confirm');    },    cancel: function cancel() {      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": ['van-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()]]);      }    },    genColumns: function genColumns() {      var h = this.$createElement;      var itemPxHeight = this.itemPxHeight;      var wrapHeight = itemPxHeight * this.visibleItemCount;      var frameStyle = {        height: itemPxHeight + "px"      };      var columnsStyle = {        height: wrapHeight + "px"      };      var maskStyle = {        backgroundSize: "100% " + (wrapHeight - itemPxHeight) / 2 + "px"      };      return h("div", {        "class": bem('columns'),        "style": columnsStyle,        "on": {          "touchmove": preventDefault        }      }, [this.genColumnItems(), h("div", {        "class": bem('mask'),        "style": maskStyle      }), h("div", {        "class": [BORDER_UNSET_TOP_BOTTOM, bem('frame')],        "style": frameStyle      })]);    },    genColumnItems: function genColumnItems() {      var _this5 = this;      var h = this.$createElement;      return this.formattedColumns.map(function (item, columnIndex) {        var _item$defaultIndex;        return h(PickerColumn, {          "attrs": {            "readonly": _this5.readonly,            "valueKey": _this5.valueKey,            "allowHtml": _this5.allowHtml,            "className": item.className,            "itemHeight": _this5.itemPxHeight,            "defaultIndex": (_item$defaultIndex = item.defaultIndex) != null ? _item$defaultIndex : +_this5.defaultIndex,            "swipeDuration": _this5.swipeDuration,            "visibleItemCount": _this5.visibleItemCount,            "initialOptions": item.values          },          "scopedSlots": {            option: _this5.$scopedSlots.option          },          "on": {            "change": function change() {              _this5.onChange(columnIndex);            }          }        });      });    }  },  render: function render(h) {    return h("div", {      "class": bem()    }, [this.toolbarPosition === 'top' ? this.genToolbar() : h(), this.loading ? h(Loading, {      "class": bem('loading')    }) : h(), this.slots('columns-top'), this.genColumns(), this.slots('columns-bottom'), this.toolbarPosition === 'bottom' ? this.genToolbar() : h()]);  }});
 |