| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 | import _extends from "@babel/runtime/helpers/esm/extends";// Utilsimport { createNamespace } from '../utils';import { raf, doubleRaf } from '../utils/dom/raf'; // Mixinsimport { ChildrenMixin } from '../mixins/relation'; // Componentsimport Cell from '../cell';import { cellProps } from '../cell/shared';var _createNamespace = createNamespace('collapse-item'),    createComponent = _createNamespace[0],    bem = _createNamespace[1];var CELL_SLOTS = ['title', 'icon', 'right-icon'];export default createComponent({  mixins: [ChildrenMixin('vanCollapse')],  props: _extends({}, cellProps, {    name: [Number, String],    disabled: Boolean,    lazyRender: {      type: Boolean,      default: true    },    isLink: {      type: Boolean,      default: true    }  }),  data: function data() {    return {      show: null,      inited: null    };  },  computed: {    currentName: function currentName() {      var _this$name;      return (_this$name = this.name) != null ? _this$name : this.index;    },    expanded: function expanded() {      var _this = this;      if (!this.parent) {        return null;      }      var _this$parent = this.parent,          value = _this$parent.value,          accordion = _this$parent.accordion;      if (process.env.NODE_ENV === 'development' && !accordion && !Array.isArray(value)) {        console.error('[Vant] Collapse: type of prop "value" should be Array');        return;      }      return accordion ? value === this.currentName : value.some(function (name) {        return name === _this.currentName;      });    }  },  created: function created() {    this.show = this.expanded;    this.inited = this.expanded;  },  watch: {    expanded: function expanded(_expanded, prev) {      var _this2 = this;      if (prev === null) {        return;      }      if (_expanded) {        this.show = true;        this.inited = true;      } // Use raf: flick when opened in safari      // Use nextTick: closing animation failed when set `user-select: none`      var nextTick = _expanded ? this.$nextTick : raf;      nextTick(function () {        var _this2$$refs = _this2.$refs,            content = _this2$$refs.content,            wrapper = _this2$$refs.wrapper;        if (!content || !wrapper) {          return;        }        var offsetHeight = content.offsetHeight;        if (offsetHeight) {          var contentHeight = offsetHeight + "px";          wrapper.style.height = _expanded ? 0 : contentHeight; // use double raf to ensure animation can start          doubleRaf(function () {            wrapper.style.height = _expanded ? contentHeight : 0;          });        } else {          _this2.onTransitionEnd();        }      });    }  },  methods: {    onClick: function onClick() {      if (!this.disabled) {        this.toggle();      }    },    // @exposed-api    toggle: function toggle(expanded) {      if (expanded === void 0) {        expanded = !this.expanded;      }      var parent = this.parent,          currentName = this.currentName;      var close = parent.accordion && currentName === parent.value;      var name = close ? '' : currentName;      this.parent.switch(name, expanded);    },    onTransitionEnd: function onTransitionEnd() {      if (!this.expanded) {        this.show = false;      } else {        this.$refs.wrapper.style.height = '';      }    },    genTitle: function genTitle() {      var _this3 = this;      var h = this.$createElement;      var border = this.border,          disabled = this.disabled,          expanded = this.expanded;      var titleSlots = CELL_SLOTS.reduce(function (slots, name) {        if (_this3.slots(name)) {          slots[name] = function () {            return _this3.slots(name);          };        }        return slots;      }, {});      if (this.slots('value')) {        titleSlots.default = function () {          return _this3.slots('value');        };      }      return h(Cell, {        "attrs": {          "role": "button",          "tabindex": disabled ? -1 : 0,          "aria-expanded": String(expanded)        },        "class": bem('title', {          disabled: disabled,          expanded: expanded,          borderless: !border        }),        "on": {          "click": this.onClick        },        "scopedSlots": titleSlots,        "props": _extends({}, this.$props)      });    },    genContent: function genContent() {      var h = this.$createElement;      if (this.inited || !this.lazyRender) {        return h("div", {          "directives": [{            name: "show",            value: this.show          }],          "ref": "wrapper",          "class": bem('wrapper'),          "on": {            "transitionend": this.onTransitionEnd          }        }, [h("div", {          "ref": "content",          "class": bem('content')        }, [this.slots()])]);      }    }  },  render: function render() {    var h = arguments[0];    return h("div", {      "class": [bem({        border: this.index && this.border      })]    }, [this.genTitle(), this.genContent()]);  }});
 |