Some checks failed
🚀 Deploy - Demo / deployment (push) Has been cancelled
- 웹훅 URL을 https://admin.youtooplay.com/webhook로 변경 - Nginx 리버스 프록시 설정 파일 추가 - 배포 가이드 업데이트
189 lines
6.0 KiB
JavaScript
189 lines
6.0 KiB
JavaScript
import { TransitionGroup, Transition, h, camelize } from 'vue';
|
|
import { g as genericComponent, p as propsFactory } from './server.mjs';
|
|
|
|
const makeTransitionProps = propsFactory({
|
|
disabled: Boolean,
|
|
group: Boolean,
|
|
hideOnLeave: Boolean,
|
|
leaveAbsolute: Boolean,
|
|
mode: String,
|
|
origin: String
|
|
}, "transition");
|
|
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 == null ? void 0 : 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 ? void 0 : {
|
|
mode: props.mode
|
|
},
|
|
...props.disabled ? {} : functions
|
|
}, slots.default);
|
|
};
|
|
}
|
|
});
|
|
}
|
|
function createJavascriptTransition(name, functions) {
|
|
let mode = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "in-out";
|
|
return genericComponent()({
|
|
name,
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
default: mode
|
|
},
|
|
disabled: Boolean,
|
|
group: Boolean
|
|
},
|
|
setup(props, _ref2) {
|
|
let {
|
|
slots
|
|
} = _ref2;
|
|
const tag = props.group ? TransitionGroup : Transition;
|
|
return () => {
|
|
return h(tag, {
|
|
name: props.disabled ? "" : name,
|
|
css: !props.disabled,
|
|
// mode: props.mode, // TODO: vuejs/vue-next#3104
|
|
...props.disabled ? {} : functions
|
|
}, slots.default);
|
|
};
|
|
}
|
|
});
|
|
}
|
|
function ExpandTransitionGenerator() {
|
|
let expandedParentClass = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
|
|
let x = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
const sizeProperty = x ? "width" : "height";
|
|
const offsetProperty = camelize(`offset-${sizeProperty}`);
|
|
return {
|
|
onBeforeEnter(el) {
|
|
el._parent = el.parentNode;
|
|
el._initialStyle = {
|
|
transition: el.style.transition,
|
|
overflow: el.style.overflow,
|
|
[sizeProperty]: el.style[sizeProperty]
|
|
};
|
|
},
|
|
onEnter(el) {
|
|
const initialStyle = el._initialStyle;
|
|
el.style.setProperty("transition", "none", "important");
|
|
el.style.overflow = "hidden";
|
|
const offset = `${el[offsetProperty]}px`;
|
|
el.style[sizeProperty] = "0";
|
|
void el.offsetHeight;
|
|
el.style.transition = initialStyle.transition;
|
|
if (expandedParentClass && el._parent) {
|
|
el._parent.classList.add(expandedParentClass);
|
|
}
|
|
requestAnimationFrame(() => {
|
|
el.style[sizeProperty] = offset;
|
|
});
|
|
},
|
|
onAfterEnter: resetStyles,
|
|
onEnterCancelled: resetStyles,
|
|
onLeave(el) {
|
|
el._initialStyle = {
|
|
transition: "",
|
|
overflow: el.style.overflow,
|
|
[sizeProperty]: el.style[sizeProperty]
|
|
};
|
|
el.style.overflow = "hidden";
|
|
el.style[sizeProperty] = `${el[offsetProperty]}px`;
|
|
void el.offsetHeight;
|
|
requestAnimationFrame(() => el.style[sizeProperty] = "0");
|
|
},
|
|
onAfterLeave,
|
|
onLeaveCancelled: onAfterLeave
|
|
};
|
|
function onAfterLeave(el) {
|
|
if (expandedParentClass && el._parent) {
|
|
el._parent.classList.remove(expandedParentClass);
|
|
}
|
|
resetStyles(el);
|
|
}
|
|
function resetStyles(el) {
|
|
const size = el._initialStyle[sizeProperty];
|
|
el.style.overflow = el._initialStyle.overflow;
|
|
if (size != null) el.style[sizeProperty] = size;
|
|
delete el._initialStyle;
|
|
}
|
|
}
|
|
createCssTransition("fab-transition", "center center", "out-in");
|
|
createCssTransition("dialog-bottom-transition");
|
|
createCssTransition("dialog-top-transition");
|
|
const VFadeTransition = createCssTransition("fade-transition");
|
|
createCssTransition("scale-transition");
|
|
createCssTransition("scroll-x-transition");
|
|
createCssTransition("scroll-x-reverse-transition");
|
|
createCssTransition("scroll-y-transition");
|
|
createCssTransition("scroll-y-reverse-transition");
|
|
createCssTransition("slide-x-transition");
|
|
createCssTransition("slide-x-reverse-transition");
|
|
const VSlideYTransition = createCssTransition("slide-y-transition");
|
|
createCssTransition("slide-y-reverse-transition");
|
|
const VExpandTransition = createJavascriptTransition("expand-transition", ExpandTransitionGenerator());
|
|
const VExpandXTransition = createJavascriptTransition("expand-x-transition", ExpandTransitionGenerator("", true));
|
|
|
|
export { VExpandTransition as V, VExpandXTransition as a, VFadeTransition as b, VSlideYTransition as c };
|