@progress/kendo-vue-animation
Version:
Kendo UI for Vue Animation package
130 lines (129 loc) • 3.42 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as a, createVNode as s, isVNode as p } from "vue";
import { Animation as l } from "./Animation.mjs";
import r from "./util.mjs";
import { getDefaultSlots as m } from "@progress/kendo-vue-common";
function h(t) {
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !p(t);
}
const c = function() {
}, E = /* @__PURE__ */ a({
props: {
appear: {
type: Boolean,
default: !1
},
enter: {
type: Boolean,
default: !0
},
exit: {
type: Boolean,
default: !0
},
transitionEnterDuration: {
type: Number,
default: 300
},
transitionExitDuration: {
type: Number,
default: 300
},
componentChildStyle: Object,
childFactory: Object,
className: String,
direction: {
type: String,
default: "vertical"
},
tag: String,
id: String,
onEnter: Function,
onEntering: Function,
onExit: Function,
onExited: Function
},
data() {
return {
maxHeight: "",
maxWidth: ""
};
},
methods: {
componentWillEnter(t) {
const {
onEnter: n
} = this.$props;
this.updateContainerDimensions(t.animatedElement, () => {
n && n.call(void 0, t);
});
},
componentIsEntering(t) {
const {
onEntering: n
} = this.$props;
this.updateContainerDimensions(t.animatedElement, () => {
n && n.call(void 0, t);
});
},
componentWillExit(t) {
const {
onExit: n
} = this.$props;
this.updateContainerDimensions(t.animatedElement, () => {
n && n.call(void 0, t);
});
},
updateContainerDimensions(t, n = c) {
const i = t ? t.firstElementChild : null;
if (i) {
const o = r.outerHeight(i), e = r.outerWidth(i);
this.$data.maxHeight = o, this.$data.maxWidth = e, n();
}
}
},
computed: {
animationEnteringStyle() {
let t;
return this.$props.direction === "vertical" ? t = {
maxHeight: this.maxHeight ? `${this.maxHeight}px` : null
} : t = {
maxWidth: this.maxWidth ? `${this.maxWidth}px` : null
}, {
maxHeight: t.maxHeight,
maxWidth: t.maxWidth
};
}
},
render() {
const t = m(this), {
direction: n,
childFactory: i,
...o
} = this.$props, e = `reveal-${this.$props.direction}`;
return s(l, {
appear: this.$props.appear,
enter: this.$props.enter,
exit: this.$props.exit,
transitionEnterDuration: this.$props.transitionEnterDuration,
transitionExitDuration: this.$props.transitionExitDuration,
onEnter: this.componentWillEnter,
onEntering: this.componentIsEntering,
onExit: this.componentWillExit,
componentChildStyle: this.$props.componentChildStyle,
animationEnteringStyle: this.animationEnteringStyle,
transitionName: e
}, h(t) ? t : {
default: () => [t]
});
}
});
export {
E as Reveal
};