Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

VStepperContent.js 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. // Components
  2. import { VTabTransition, VTabReverseTransition } from '../transitions';
  3. // Mixins
  4. import { inject as RegistrableInject } from '../../mixins/registrable';
  5. // Helpers
  6. import { convertToUnit } from '../../util/helpers';
  7. // Util
  8. import mixins from '../../util/mixins';
  9. export default mixins(RegistrableInject('stepper', 'v-stepper-content', 'v-stepper')
  10. /* @vue/component */
  11. ).extend({
  12. name: 'v-stepper-content',
  13. inject: {
  14. isVerticalProvided: {
  15. from: 'isVertical'
  16. }
  17. },
  18. props: {
  19. step: {
  20. type: [Number, String],
  21. required: true
  22. }
  23. },
  24. data: function data() {
  25. return {
  26. height: 0,
  27. // Must be null to allow
  28. // previous comparison
  29. isActive: null,
  30. isReverse: false,
  31. isVertical: this.isVerticalProvided
  32. };
  33. },
  34. computed: {
  35. classes: function classes() {
  36. return {
  37. 'v-stepper__content': true
  38. };
  39. },
  40. computedTransition: function computedTransition() {
  41. return this.isReverse ? VTabReverseTransition : VTabTransition;
  42. },
  43. styles: function styles() {
  44. if (!this.isVertical) return {};
  45. return {
  46. height: convertToUnit(this.height)
  47. };
  48. },
  49. wrapperClasses: function wrapperClasses() {
  50. return {
  51. 'v-stepper__wrapper': true
  52. };
  53. }
  54. },
  55. watch: {
  56. isActive: function isActive(current, previous) {
  57. // If active and the previous state
  58. // was null, is just booting up
  59. if (current && previous == null) {
  60. this.height = 'auto';
  61. return;
  62. }
  63. if (!this.isVertical) return;
  64. if (this.isActive) this.enter();else this.leave();
  65. }
  66. },
  67. mounted: function mounted() {
  68. this.$refs.wrapper.addEventListener('transitionend', this.onTransition, false);
  69. this.stepper && this.stepper.register(this);
  70. },
  71. beforeDestroy: function beforeDestroy() {
  72. this.$refs.wrapper.removeEventListener('transitionend', this.onTransition, false);
  73. this.stepper && this.stepper.unregister(this);
  74. },
  75. methods: {
  76. onTransition: function onTransition(e) {
  77. if (!this.isActive || e.propertyName !== 'height') return;
  78. this.height = 'auto';
  79. },
  80. enter: function enter() {
  81. var _this = this;
  82. var scrollHeight = 0;
  83. // Render bug with height
  84. requestAnimationFrame(function () {
  85. scrollHeight = _this.$refs.wrapper.scrollHeight;
  86. });
  87. this.height = 0;
  88. // Give the collapsing element time to collapse
  89. setTimeout(function () {
  90. return _this.isActive && (_this.height = scrollHeight || 'auto');
  91. }, 450);
  92. },
  93. leave: function leave() {
  94. var _this2 = this;
  95. this.height = this.$refs.wrapper.clientHeight;
  96. setTimeout(function () {
  97. return _this2.height = 0;
  98. }, 10);
  99. },
  100. toggle: function toggle(step, reverse) {
  101. this.isActive = step.toString() === this.step.toString();
  102. this.isReverse = reverse;
  103. }
  104. },
  105. render: function render(h) {
  106. var contentData = {
  107. 'class': this.classes
  108. };
  109. var wrapperData = {
  110. 'class': this.wrapperClasses,
  111. style: this.styles,
  112. ref: 'wrapper'
  113. };
  114. if (!this.isVertical) {
  115. contentData.directives = [{
  116. name: 'show',
  117. value: this.isActive
  118. }];
  119. }
  120. var wrapper = h('div', wrapperData, [this.$slots.default]);
  121. var content = h('div', contentData, [wrapper]);
  122. return h(this.computedTransition, {
  123. on: this.$listeners
  124. }, [content]);
  125. }
  126. });
  127. //# sourceMappingURL=VStepperContent.js.map