@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
223 lines (220 loc) • 7.66 kB
JavaScript
import { defineComponent, ref, reactive, computed, watch, provide, onMounted, nextTick, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, unref, renderSlot, createCommentVNode } from 'vue';
import { useEventListener } from '@vueuse/core';
import '../../../hooks/index.mjs';
import '../../../utils/index.mjs';
import { navbarContextKey, navbarRegisterContextKey } from '../../../tokens/navbar.mjs';
import '../../../constants/index.mjs';
import { navbarProps, navbarEmits } from './navbar.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useVuesaxBaseComponent } from '../../../hooks/use-base-component/index.mjs';
import { useColor } from '../../../hooks/use-common-props/index.mjs';
import { getVsColor } from '../../../utils/color.mjs';
import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
const __default__ = defineComponent({
name: "VsNavbar"
});
const _sfc_main = defineComponent({
...__default__,
props: navbarProps,
emits: navbarEmits,
setup(__props, { emit }) {
const props = __props;
const ns = useNamespace("navbar");
const navbarRef = ref();
const navbarLeftRef = ref();
const navbarRightRef = ref();
const navbarCenterRef = ref();
const children = reactive(/* @__PURE__ */ new Set());
const state = reactive({
scrollTop: 0,
collapsedWidth: 0,
collapsedForced: false,
hidden: false,
shadowActive: false,
paddingScrollActive: false,
lineNotTransition: false
});
const vsBaseClasses = useVuesaxBaseComponent(useColor());
const navbarKls = computed(() => [
ns.b(),
vsBaseClasses,
ns.is("fixed", props.fixed),
ns.is("shadow", props.shadow),
ns.is("not-line", props.notLine),
ns.is("hidden", state.hidden),
ns.is("shadow-active", state.shadowActive),
ns.is("text-white", props.textWhite),
ns.is("padding-scroll", props.paddingScroll),
ns.is("padding-scroll-active", state.paddingScrollActive),
ns.is("square", props.square)
]);
const navbarStyles = computed(
() => ns.cssVar({
color: getVsColor(props.color)
})
);
const scroll = () => {
const _scrollTop = props.targetScroll ? document.querySelector(props.targetScroll).scrollTop : window.pageYOffset;
if (props.hideScroll) {
if (Math.sign(_scrollTop - state.scrollTop) === 1) {
state.hidden = true;
} else {
state.hidden = false;
}
}
if (props.shadowScroll) {
if (_scrollTop > 0) {
state.shadowActive = true;
} else {
state.shadowActive = false;
}
}
if (props.paddingScroll) {
if (_scrollTop > 0) {
state.paddingScrollActive = true;
} else {
state.paddingScrollActive = false;
}
}
state.scrollTop = _scrollTop;
};
const handleScroll = () => {
if (props.hideScroll || props.shadowScroll || props.paddingScroll) {
if (props.targetScroll) {
const scrollElement = document.querySelector(props.targetScroll);
scrollElement == null ? void 0 : scrollElement.addEventListener("scroll", scroll);
} else {
window.addEventListener("scroll", scroll);
}
}
};
const handleResize = () => {
const navbar = navbarRef.value;
if (props.leftCollapsed || props.centerCollapsed || props.rightCollapsed) {
if (navbar.offsetWidth < state.collapsedWidth) {
state.collapsedForced = true;
}
}
if (state.collapsedForced) {
emit("collapsed", true);
} else {
emit("collapsed", false);
}
if (navbar.offsetWidth < state.collapsedWidth) {
emit("collapsed", true);
} else {
emit("collapsed", false);
state.collapsedForced = false;
}
};
const isLeft = computed(
() => props.leftCollapsed ? !state.collapsedForced : true
);
const isRight = computed(
() => props.rightCollapsed ? !state.collapsedForced : true
);
const isCenter = computed(
() => props.centerCollapsed ? !state.collapsedForced : true
);
watch(
[() => props.hideScroll, () => props.paddingScroll, () => props.shadowScroll],
handleScroll
);
provide(navbarContextKey, {
modelValue: computed(() => props.modelValue)
});
provide(navbarRegisterContextKey, (id) => {
children.add(id);
return {
unregister: () => children.delete(id),
onClick: () => emit(UPDATE_MODEL_EVENT, id),
isActive: computed(() => props.modelValue === id)
};
});
onMounted(() => {
nextTick(() => {
if (navbarRef.value && navbarLeftRef.value && navbarCenterRef.value && navbarRightRef.value) {
const left = navbarLeftRef.value;
const center = navbarCenterRef.value;
const right = navbarRightRef.value;
const navbar = navbarRef.value;
const GAP_PADDING_SLOT = 120 + 30;
state.collapsedWidth = left.offsetWidth + center.offsetWidth + right.offsetWidth + GAP_PADDING_SLOT;
if (navbar.offsetWidth < state.collapsedWidth) {
state.collapsedForced = true;
emit("collapsed", true);
handleResize();
}
}
});
handleScroll();
useEventListener(window, "resize", handleResize);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(
"div",
{
ref_key: "navbarRef",
ref: navbarRef,
class: normalizeClass(navbarKls.value),
style: normalizeStyle(navbarStyles.value)
},
[
createElementVNode(
"div",
{
class: normalizeClass(unref(ns).e("content"))
},
[
isLeft.value ? (openBlock(), createElementBlock(
"div",
{
key: 0,
ref_key: "navbarLeftRef",
ref: navbarLeftRef,
class: normalizeClass(unref(ns).e("left"))
},
[
renderSlot(_ctx.$slots, "left")
],
2
)) : createCommentVNode("v-if", true),
isCenter.value ? (openBlock(), createElementBlock(
"div",
{
key: 1,
ref_key: "navbarCenterRef",
ref: navbarCenterRef,
class: normalizeClass(unref(ns).e("center"))
},
[
renderSlot(_ctx.$slots, "default")
],
2
)) : createCommentVNode("v-if", true),
isRight.value ? (openBlock(), createElementBlock(
"div",
{
key: 2,
ref_key: "navbarRightRef",
ref: navbarRightRef,
class: normalizeClass(unref(ns).e("right"))
},
[
renderSlot(_ctx.$slots, "right")
],
2
)) : createCommentVNode("v-if", true)
],
2
)
],
6
);
};
}
});
var Navbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/navbar/src/navbar.vue"]]);
export { Navbar as default };
//# sourceMappingURL=navbar2.mjs.map