| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- exports.__esModule = true;
- exports["default"] = void 0;
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
- var _utils = require("../utils");
- var _raf = require("../utils/raf");
- var _cell = _interopRequireDefault(require("../cell"));
- var _shared = require("../cell/shared");
- var _findParent = require("../mixins/find-parent");
- var _use = (0, _utils.use)('collapse-item'),
- sfc = _use[0],
- bem = _use[1];
- var CELL_SLOTS = ['title', 'icon', 'right-icon'];
- var _default = sfc({
- mixins: [_findParent.FindParentMixin],
- props: (0, _extends2["default"])({}, _shared.cellProps, {
- name: [String, Number],
- disabled: Boolean,
- isLink: {
- type: Boolean,
- "default": true
- }
- }),
- data: function data() {
- return {
- show: null,
- inited: null
- };
- },
- computed: {
- items: function items() {
- return this.parent.items;
- },
- index: function index() {
- return this.items.indexOf(this);
- },
- currentName: function currentName() {
- return (0, _utils.isDef)(this.name) ? this.name : this.index;
- },
- expanded: function expanded() {
- var _this = this;
- if (!this.parent) {
- return null;
- }
- var value = this.parent.value;
- return this.parent.accordion ? value === this.currentName : value.some(function (name) {
- return name === _this.currentName;
- });
- }
- },
- created: function created() {
- this.findParent('van-collapse');
- this.items.push(this);
- this.show = this.expanded;
- this.inited = this.expanded;
- },
- destroyed: function destroyed() {
- this.items.splice(this.index, 1);
- },
- watch: {
- expanded: function expanded(_expanded, prev) {
- var _this2 = this;
- if (prev === null) {
- return;
- }
- if (_expanded) {
- this.show = true;
- this.inited = true;
- }
- (0, _raf.raf)(function () {
- var _this2$$refs = _this2.$refs,
- content = _this2$$refs.content,
- wrapper = _this2$$refs.wrapper;
- if (!content || !wrapper) {
- return;
- }
- var clientHeight = content.clientHeight;
- if (clientHeight) {
- var contentHeight = clientHeight + "px";
- wrapper.style.height = _expanded ? 0 : contentHeight;
- (0, _raf.raf)(function () {
- wrapper.style.height = _expanded ? contentHeight : 0;
- });
- } else {
- _this2.onTransitionEnd();
- }
- });
- }
- },
- methods: {
- onClick: function onClick() {
- if (this.disabled) {
- return;
- }
- var parent = this.parent;
- var name = parent.accordion && this.currentName === parent.value ? '' : this.currentName;
- var expanded = !this.expanded;
- this.parent["switch"](name, expanded);
- },
- onTransitionEnd: function onTransitionEnd() {
- if (!this.expanded) {
- this.show = false;
- } else {
- this.$refs.wrapper.style.height = null;
- }
- }
- },
- render: function render(h) {
- var _this3 = this;
- 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');
- };
- }
- var Title = h(_cell["default"], {
- "class": bem('title', {
- disabled: this.disabled,
- expanded: this.expanded
- }),
- "on": {
- "click": this.onClick
- },
- "scopedSlots": titleSlots,
- "props": (0, _extends2["default"])({}, this.$props)
- });
- var Content = this.inited && 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()])]);
- return h("div", {
- "class": [bem(), {
- 'van-hairline--top': this.index
- }]
- }, [Title, Content]);
- }
- });
- exports["default"] = _default;
|