maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
80 lines (79 loc) • 4.23 kB
JavaScript
import { defineComponent, computed, ref, onMounted, onBeforeUnmount, createElementBlock, openBlock, createBlock, resolveDynamicComponent, mergeProps, withCtx, createCommentVNode, Fragment, renderList, createElementVNode, normalizeStyle, normalizeClass, toDisplayString, createTextVNode } from "vue";
import { l } from "../chunks/checkAvailability.UFZSC8-1.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazAnimatedText.CHvAudRU.css';const _hoisted_1 = { class: "m-reset-css m-animated-text" }, _hoisted_2 = { class: "m-animated-text__last-word-inner" }, _hoisted_3 = { class: "m-animated-text__last-word-inner-text" }, _sfc_main = /* @__PURE__ */ defineComponent({
inheritAttrs: !1,
__name: "MazAnimatedText",
props: {
text: {},
lastWord: {},
delay: { default: 0 },
direction: { default: "up" },
tag: { default: "span" },
wordDelay: { default: 75 },
columnGap: { default: 0.5 },
rowGap: { default: 0 },
duration: { default: 2e3 },
once: { type: Boolean, default: !0 }
},
setup(__props) {
const words = computed(() => __props.text.split(" ")), wordCount = computed(() => words.value.length), isVisible = ref(!1), isClient = ref(!1), animatedClass = computed(() => isVisible.value ? `maz-animate-slide-${__props.direction}-blur` : "maz-invisible"), element = ref();
let observer = null;
return onMounted(() => {
isClient.value = !0, observer = new IntersectionObserver(([entry]) => {
isVisible.value = entry.isIntersecting, __props.once && element.value && observer?.unobserve(element.value);
}), l(() => element.value, (element2) => {
observer?.observe(element2);
});
}), onBeforeUnmount(() => observer?.disconnect()), (_ctx, _cache) => (openBlock(), createElementBlock("div", _hoisted_1, [
isClient.value ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), mergeProps({
key: 0,
ref_key: "element",
ref: element
}, _ctx.$attrs, {
class: "m-animated-text__root",
style: { columnGap: `${_ctx.columnGap}rem`, rowGap: `${_ctx.rowGap}rem` }
}), {
default: withCtx(() => [
(openBlock(!0), createElementBlock(Fragment, null, renderList(words.value, (word, index) => (openBlock(), createElementBlock("span", {
key: word + index,
class: "m-animated-text__word"
}, [
createElementVNode("span", {
class: normalizeClass(["m-animated-text__word-inner", animatedClass.value]),
style: normalizeStyle({
animationDelay: `${_ctx.delay + index * (_ctx.wordDelay ?? 150)}ms`,
animationDuration: `${_ctx.duration}ms`
})
}, toDisplayString(word), 7)
]))), 128)),
_ctx.lastWord ? (openBlock(), createElementBlock("span", {
key: 0,
class: normalizeClass(["m-animated-text__last-word", animatedClass.value]),
style: normalizeStyle({
animationDelay: `${_ctx.delay + wordCount.value * (_ctx.wordDelay ?? 150)}ms`,
animationDuration: `${_ctx.duration}ms`
})
}, [
createElementVNode("span", _hoisted_2, [
_cache[0] || (_cache[0] = createElementVNode("span", { class: "m-animated-text__last-word-inner-gradient" }, null, -1)),
createElementVNode("span", _hoisted_3, toDisplayString(_ctx.lastWord), 1)
])
], 6)) : createCommentVNode("", !0)
]),
_: 1
}, 16, ["style"])) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), mergeProps({ key: 1 }, _ctx.$attrs, { class: "maz-invisible maz-inline-flex" }), {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.text) + " ", 1),
_ctx.lastWord ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createTextVNode(toDisplayString(_ctx.lastWord), 1)
], 64)) : createCommentVNode("", !0)
]),
_: 1
}, 16))
]));
}
}), MazAnimatedText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-00727bc1"]]);
export {
MazAnimatedText as default
};