|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- // Mixins
- import Bootable from '../../mixins/bootable';
- import { factory as GroupableFactory } from '../../mixins/groupable';
- // Directives
- import Touch from '../../directives/touch';
- // Utilities
- import { convertToUnit } from '../../util/helpers';
- import mixins from '../../util/mixins';
- export default mixins(Bootable, GroupableFactory('windowGroup', 'v-window-item', 'v-window')
- /* @vue/component */
- ).extend({
- name: 'v-window-item',
- directives: {
- Touch: Touch
- },
- props: {
- reverseTransition: {
- type: [Boolean, String],
- default: undefined
- },
- transition: {
- type: [Boolean, String],
- default: undefined
- },
- value: {
- required: false
- }
- },
- data: function data() {
- return {
- done: null,
- isActive: false,
- wasCancelled: false
- };
- },
-
- computed: {
- computedTransition: function computedTransition() {
- if (!this.windowGroup.internalReverse) {
- return typeof this.transition !== 'undefined' ? this.transition || '' : this.windowGroup.computedTransition;
- }
- return typeof this.reverseTransition !== 'undefined' ? this.reverseTransition || '' : this.windowGroup.computedTransition;
- }
- },
- mounted: function mounted() {
- this.$el.addEventListener('transitionend', this.onTransitionEnd, false);
- },
- beforeDestroy: function beforeDestroy() {
- this.$el.removeEventListener('transitionend', this.onTransitionEnd, false);
- },
-
- methods: {
- genDefaultSlot: function genDefaultSlot() {
- return this.$slots.default;
- },
- onAfterEnter: function onAfterEnter() {
- var _this = this;
-
- if (this.wasCancelled) {
- this.wasCancelled = false;
- return;
- }
- requestAnimationFrame(function () {
- _this.windowGroup.internalHeight = undefined;
- _this.windowGroup.isActive = false;
- });
- },
- onBeforeEnter: function onBeforeEnter() {
- this.windowGroup.isActive = true;
- },
- onLeave: function onLeave(el) {
- this.windowGroup.internalHeight = convertToUnit(el.clientHeight);
- },
- onEnterCancelled: function onEnterCancelled() {
- this.wasCancelled = true;
- },
- onEnter: function onEnter(el, done) {
- var _this2 = this;
-
- var isBooted = this.windowGroup.isBooted;
- if (isBooted) this.done = done;
- requestAnimationFrame(function () {
- if (!_this2.computedTransition) return done();
- _this2.windowGroup.internalHeight = convertToUnit(el.clientHeight);
- // On initial render, there is no transition
- // Vue leaves a `enter` transition class
- // if done is called too fast
- !isBooted && setTimeout(done, 100);
- });
- },
- onTransitionEnd: function onTransitionEnd(e) {
- // This ensures we only call done
- // when the element transform
- // completes
- if (e.propertyName !== 'transform' || e.target !== this.$el || !this.done) return;
- this.done();
- this.done = null;
- }
- },
- render: function render(h) {
- var div = h('div', {
- staticClass: 'v-window-item',
- directives: [{
- name: 'show',
- value: this.isActive
- }],
- on: this.$listeners
- }, this.showLazyContent(this.genDefaultSlot()));
- return h('transition', {
- props: {
- name: this.computedTransition
- },
- on: {
- afterEnter: this.onAfterEnter,
- beforeEnter: this.onBeforeEnter,
- leave: this.onLeave,
- enter: this.onEnter,
- enterCancelled: this.onEnterCancelled
- }
- }, [div]);
- }
- });
- //# sourceMappingURL=VWindowItem.js.map
|