forked from daren.hsu/line_push
144 lines
3.6 KiB
JavaScript
144 lines
3.6 KiB
JavaScript
// 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';
|
|
const baseMixins = mixins(Bootable, GroupableFactory('windowGroup', 'v-window-item', 'v-window'));
|
|
export default baseMixins.extend().extend().extend({
|
|
name: 'v-window-item',
|
|
directives: {
|
|
Touch
|
|
},
|
|
props: {
|
|
disabled: Boolean,
|
|
reverseTransition: {
|
|
type: [Boolean, String],
|
|
default: undefined
|
|
},
|
|
transition: {
|
|
type: [Boolean, String],
|
|
default: undefined
|
|
},
|
|
value: {
|
|
required: false
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
isActive: false,
|
|
inTransition: false
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
classes() {
|
|
return this.groupClasses;
|
|
},
|
|
|
|
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;
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
genDefaultSlot() {
|
|
return this.$slots.default;
|
|
},
|
|
|
|
genWindowItem() {
|
|
return this.$createElement('div', {
|
|
staticClass: 'v-window-item',
|
|
class: this.classes,
|
|
directives: [{
|
|
name: 'show',
|
|
value: this.isActive
|
|
}],
|
|
on: this.$listeners
|
|
}, this.genDefaultSlot());
|
|
},
|
|
|
|
onAfterTransition() {
|
|
if (!this.inTransition) {
|
|
return;
|
|
} // Finalize transition state.
|
|
|
|
|
|
this.inTransition = false;
|
|
|
|
if (this.windowGroup.transitionCount > 0) {
|
|
this.windowGroup.transitionCount--; // Remove container height if we are out of transition.
|
|
|
|
if (this.windowGroup.transitionCount === 0) {
|
|
this.windowGroup.transitionHeight = undefined;
|
|
}
|
|
}
|
|
},
|
|
|
|
onBeforeTransition() {
|
|
if (this.inTransition) {
|
|
return;
|
|
} // Initialize transition state here.
|
|
|
|
|
|
this.inTransition = true;
|
|
|
|
if (this.windowGroup.transitionCount === 0) {
|
|
// Set initial height for height transition.
|
|
this.windowGroup.transitionHeight = convertToUnit(this.windowGroup.$el.clientHeight);
|
|
}
|
|
|
|
this.windowGroup.transitionCount++;
|
|
},
|
|
|
|
onTransitionCancelled() {
|
|
this.onAfterTransition(); // This should have the same path as normal transition end.
|
|
},
|
|
|
|
onEnter(el) {
|
|
if (!this.inTransition) {
|
|
return;
|
|
}
|
|
|
|
this.$nextTick(() => {
|
|
// Do not set height if no transition or cancelled.
|
|
if (!this.computedTransition || !this.inTransition) {
|
|
return;
|
|
} // Set transition target height.
|
|
|
|
|
|
this.windowGroup.transitionHeight = convertToUnit(el.clientHeight);
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
render(h) {
|
|
return h('transition', {
|
|
props: {
|
|
name: this.computedTransition
|
|
},
|
|
on: {
|
|
// Handlers for enter windows.
|
|
beforeEnter: this.onBeforeTransition,
|
|
afterEnter: this.onAfterTransition,
|
|
enterCancelled: this.onTransitionCancelled,
|
|
// Handlers for leave windows.
|
|
beforeLeave: this.onBeforeTransition,
|
|
afterLeave: this.onAfterTransition,
|
|
leaveCancelled: this.onTransitionCancelled,
|
|
// Enter handler for height transition.
|
|
enter: this.onEnter
|
|
}
|
|
}, this.showLazyContent(() => [this.genWindowItem()]));
|
|
}
|
|
|
|
});
|
|
//# sourceMappingURL=VWindowItem.js.map
|