maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
47 lines (46 loc) • 2.33 kB
JavaScript
import { defineComponent, mergeModels, useModel, ref, onMounted, onUnmounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, mergeProps, renderSlot } from "vue";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazExpandAnimation.DYyRTW8i.css';const _hoisted_1 = ["aria-hidden"], _sfc_main = /* @__PURE__ */ defineComponent({
inheritAttrs: !1,
__name: "MazExpandAnimation",
props: /* @__PURE__ */ mergeModels({
duration: { default: "300ms" },
timingFunction: { default: "ease-in-out" }
}, {
modelValue: { type: Boolean },
modelModifiers: {}
}),
emits: ["update:modelValue"],
setup(__props) {
const isOpen = useModel(__props, "modelValue"), hasOverflowHidden = ref(!isOpen.value), expandAnimationRef = ref();
function onTransitionStart() {
isOpen.value || (hasOverflowHidden.value = !0);
}
function onTransitionEnd() {
isOpen.value && (hasOverflowHidden.value = !1);
}
return onMounted(() => {
expandAnimationRef.value?.addEventListener("transitionstart", onTransitionStart, !1), expandAnimationRef.value?.addEventListener("transitionend", onTransitionEnd, !1);
}), onUnmounted(() => {
expandAnimationRef.value?.removeEventListener("transitionstart", onTransitionStart, !1), expandAnimationRef.value?.removeEventListener("transitionend", onTransitionEnd, !1);
}), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
ref_key: "expandAnimationRef",
ref: expandAnimationRef,
class: normalizeClass(["m-expand-animation m-reset-css", { "m-expand-animation--expanded": isOpen.value }]),
"aria-hidden": !isOpen.value,
role: "region",
style: normalizeStyle([{ "--expand-animation-duration": _ctx.duration, "--expand-animation-timing-function": _ctx.timingFunction }])
}, [
createElementVNode("div", mergeProps({ class: "m-expand-animation__inner" }, _ctx.$attrs, {
class: {
"--overflow-hidden": hasOverflowHidden.value
}
}), [
renderSlot(_ctx.$slots, "default", {}, void 0, !0)
], 16)
], 14, _hoisted_1));
}
}), MazExpandAnimation = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5fce4b46"]]);
export {
MazExpandAnimation as default
};