index.js 5.1 KB

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