index.js 5.3 KB

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