index.js 5.4 KB

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