112 lines
3.1 KiB
JavaScript
112 lines
3.1 KiB
JavaScript
// Utilities
|
|
import { h, Transition, TransitionGroup } from 'vue';
|
|
import { genericComponent, propsFactory } from "../../util/index.mjs"; // Types
|
|
export const makeTransitionProps = propsFactory({
|
|
disabled: Boolean,
|
|
group: Boolean,
|
|
hideOnLeave: Boolean,
|
|
leaveAbsolute: Boolean,
|
|
mode: String,
|
|
origin: String
|
|
}, 'transition');
|
|
export function createCssTransition(name, origin, mode) {
|
|
return genericComponent()({
|
|
name,
|
|
props: makeTransitionProps({
|
|
mode,
|
|
origin
|
|
}),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const functions = {
|
|
onBeforeEnter(el) {
|
|
if (props.origin) {
|
|
el.style.transformOrigin = props.origin;
|
|
}
|
|
},
|
|
onLeave(el) {
|
|
if (props.leaveAbsolute) {
|
|
const {
|
|
offsetTop,
|
|
offsetLeft,
|
|
offsetWidth,
|
|
offsetHeight
|
|
} = el;
|
|
el._transitionInitialStyles = {
|
|
position: el.style.position,
|
|
top: el.style.top,
|
|
left: el.style.left,
|
|
width: el.style.width,
|
|
height: el.style.height
|
|
};
|
|
el.style.position = 'absolute';
|
|
el.style.top = `${offsetTop}px`;
|
|
el.style.left = `${offsetLeft}px`;
|
|
el.style.width = `${offsetWidth}px`;
|
|
el.style.height = `${offsetHeight}px`;
|
|
}
|
|
if (props.hideOnLeave) {
|
|
el.style.setProperty('display', 'none', 'important');
|
|
}
|
|
},
|
|
onAfterLeave(el) {
|
|
if (props.leaveAbsolute && el?._transitionInitialStyles) {
|
|
const {
|
|
position,
|
|
top,
|
|
left,
|
|
width,
|
|
height
|
|
} = el._transitionInitialStyles;
|
|
delete el._transitionInitialStyles;
|
|
el.style.position = position || '';
|
|
el.style.top = top || '';
|
|
el.style.left = left || '';
|
|
el.style.width = width || '';
|
|
el.style.height = height || '';
|
|
}
|
|
}
|
|
};
|
|
return () => {
|
|
const tag = props.group ? TransitionGroup : Transition;
|
|
return h(tag, {
|
|
name: props.disabled ? '' : name,
|
|
css: !props.disabled,
|
|
...(props.group ? undefined : {
|
|
mode: props.mode
|
|
}),
|
|
...(props.disabled ? {} : functions)
|
|
}, slots.default);
|
|
};
|
|
}
|
|
});
|
|
}
|
|
export function createJavascriptTransition(name, functions) {
|
|
let mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'in-out';
|
|
return genericComponent()({
|
|
name,
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
default: mode
|
|
},
|
|
disabled: Boolean
|
|
},
|
|
setup(props, _ref2) {
|
|
let {
|
|
slots
|
|
} = _ref2;
|
|
return () => {
|
|
return h(Transition, {
|
|
name: props.disabled ? '' : name,
|
|
css: !props.disabled,
|
|
// mode: props.mode, // TODO: vuejs/vue-next#3104
|
|
...(props.disabled ? {} : functions)
|
|
}, slots.default);
|
|
};
|
|
}
|
|
});
|
|
}
|
|
//# sourceMappingURL=createTransition.mjs.map
|