maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
38 lines (37 loc) • 1.7 kB
JavaScript
import { defineComponent, ref, watch, computed, createBlock, openBlock, Transition, withCtx, createElementBlock, createCommentVNode, renderSlot } from "vue";
import { useInjectStrict } from "../composables/useInjectStrict.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazTabsContentItem.B1dilH-w.css';const _hoisted_1 = {
key: 0,
class: "m-tabs-content-item m-reset-css"
}, _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazTabsContentItem",
props: {
tab: { type: Number, required: !0 }
},
setup(__props) {
const props = __props, transitionName = ref("maz-tab-transition"), { currentTab } = useInjectStrict("maz-tabs");
watch(
() => currentTab.value,
(value, oldValue) => {
if (typeof value == "number" && typeof oldValue == "number") {
const newTabIsBigger = oldValue < value;
transitionName.value = newTabIsBigger ? "maz-tab-transition" : "maz-tab-reverse-transition";
}
},
{ immediate: !0 }
);
const itemTabNumber = computed(() => props.tab - 1), isCurrentTab = computed(() => currentTab.value - 1 === itemTabNumber.value);
return (_ctx, _cache) => (openBlock(), createBlock(Transition, { name: transitionName.value }, {
default: withCtx(() => [
isCurrentTab.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
renderSlot(_ctx.$slots, "default", {}, void 0, !0)
])) : createCommentVNode("", !0)
]),
_: 3
}, 8, ["name"]));
}
}), MazTabsContentItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-87e5244d"]]);
export {
MazTabsContentItem as default
};