index.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. // Utils
  3. import { createNamespace } from '../utils';
  4. import { raf, doubleRaf } from '../utils/dom/raf'; // Mixins
  5. import { ChildrenMixin } from '../mixins/relation'; // Components
  6. import Cell from '../cell';
  7. import { cellProps } from '../cell/shared';
  8. var _createNamespace = createNamespace('collapse-item'),
  9. createComponent = _createNamespace[0],
  10. bem = _createNamespace[1];
  11. var CELL_SLOTS = ['title', 'icon', 'right-icon'];
  12. export default createComponent({
  13. mixins: [ChildrenMixin('vanCollapse')],
  14. props: _extends({}, cellProps, {
  15. name: [Number, String],
  16. disabled: Boolean,
  17. isLink: {
  18. type: Boolean,
  19. default: true
  20. }
  21. }),
  22. data: function data() {
  23. return {
  24. show: null,
  25. inited: null
  26. };
  27. },
  28. computed: {
  29. currentName: function currentName() {
  30. var _this$name;
  31. return (_this$name = this.name) != null ? _this$name : this.index;
  32. },
  33. expanded: function expanded() {
  34. var _this = this;
  35. if (!this.parent) {
  36. return null;
  37. }
  38. var _this$parent = this.parent,
  39. value = _this$parent.value,
  40. accordion = _this$parent.accordion;
  41. if (process.env.NODE_ENV === 'development' && !accordion && !Array.isArray(value)) {
  42. console.error('[Vant] Collapse: type of prop "value" should be Array');
  43. return;
  44. }
  45. return accordion ? value === this.currentName : value.some(function (name) {
  46. return name === _this.currentName;
  47. });
  48. }
  49. },
  50. created: function created() {
  51. this.show = this.expanded;
  52. this.inited = this.expanded;
  53. },
  54. watch: {
  55. expanded: function expanded(_expanded, prev) {
  56. var _this2 = this;
  57. if (prev === null) {
  58. return;
  59. }
  60. if (_expanded) {
  61. this.show = true;
  62. this.inited = true;
  63. } // Use raf: flick when opened in safari
  64. // Use nextTick: closing animation failed when set `user-select: none`
  65. var nextTick = _expanded ? this.$nextTick : raf;
  66. nextTick(function () {
  67. var _this2$$refs = _this2.$refs,
  68. content = _this2$$refs.content,
  69. wrapper = _this2$$refs.wrapper;
  70. if (!content || !wrapper) {
  71. return;
  72. }
  73. var offsetHeight = content.offsetHeight;
  74. if (offsetHeight) {
  75. var contentHeight = offsetHeight + "px";
  76. wrapper.style.height = _expanded ? 0 : contentHeight; // use double raf to ensure animation can start
  77. doubleRaf(function () {
  78. wrapper.style.height = _expanded ? contentHeight : 0;
  79. });
  80. } else {
  81. _this2.onTransitionEnd();
  82. }
  83. });
  84. }
  85. },
  86. methods: {
  87. onClick: function onClick() {
  88. if (!this.disabled) {
  89. this.toggle();
  90. }
  91. },
  92. // @exposed-api
  93. toggle: function toggle(expanded) {
  94. if (expanded === void 0) {
  95. expanded = !this.expanded;
  96. }
  97. var parent = this.parent,
  98. currentName = this.currentName;
  99. var close = parent.accordion && currentName === parent.value;
  100. var name = close ? '' : currentName;
  101. this.parent.switch(name, expanded);
  102. },
  103. onTransitionEnd: function onTransitionEnd() {
  104. if (!this.expanded) {
  105. this.show = false;
  106. } else {
  107. this.$refs.wrapper.style.height = '';
  108. }
  109. },
  110. genTitle: function genTitle() {
  111. var _this3 = this;
  112. var h = this.$createElement;
  113. var border = this.border,
  114. disabled = this.disabled,
  115. expanded = this.expanded;
  116. var titleSlots = CELL_SLOTS.reduce(function (slots, name) {
  117. if (_this3.slots(name)) {
  118. slots[name] = function () {
  119. return _this3.slots(name);
  120. };
  121. }
  122. return slots;
  123. }, {});
  124. if (this.slots('value')) {
  125. titleSlots.default = function () {
  126. return _this3.slots('value');
  127. };
  128. }
  129. return h(Cell, {
  130. "attrs": {
  131. "role": "button",
  132. "tabindex": disabled ? -1 : 0,
  133. "aria-expanded": String(expanded)
  134. },
  135. "class": bem('title', {
  136. disabled: disabled,
  137. expanded: expanded,
  138. borderless: !border
  139. }),
  140. "on": {
  141. "click": this.onClick
  142. },
  143. "scopedSlots": titleSlots,
  144. "props": _extends({}, this.$props)
  145. });
  146. },
  147. genContent: function genContent() {
  148. var h = this.$createElement;
  149. if (this.inited) {
  150. return h("div", {
  151. "directives": [{
  152. name: "show",
  153. value: this.show
  154. }],
  155. "ref": "wrapper",
  156. "class": bem('wrapper'),
  157. "on": {
  158. "transitionend": this.onTransitionEnd
  159. }
  160. }, [h("div", {
  161. "ref": "content",
  162. "class": bem('content')
  163. }, [this.slots()])]);
  164. }
  165. }
  166. },
  167. render: function render() {
  168. var h = arguments[0];
  169. return h("div", {
  170. "class": [bem({
  171. border: this.index && this.border
  172. })]
  173. }, [this.genTitle(), this.genContent()]);
  174. }
  175. });