@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
227 lines (222 loc) • 7.71 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var core = require('@vueuse/core');
require('../../../hooks/index.js');
require('../../../utils/index.js');
var navbar$1 = require('../../../tokens/navbar.js');
require('../../../constants/index.js');
var navbar = require('./navbar.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var index$1 = require('../../../hooks/use-base-component/index.js');
var index$2 = require('../../../hooks/use-common-props/index.js');
var color = require('../../../utils/color.js');
var event = require('../../../constants/event.js');
const __default__ = vue.defineComponent({
name: "VsNavbar"
});
const _sfc_main = vue.defineComponent({
...__default__,
props: navbar.navbarProps,
emits: navbar.navbarEmits,
setup(__props, { emit }) {
const props = __props;
const ns = index.useNamespace("navbar");
const navbarRef = vue.ref();
const navbarLeftRef = vue.ref();
const navbarRightRef = vue.ref();
const navbarCenterRef = vue.ref();
const children = vue.reactive(/* @__PURE__ */ new Set());
const state = vue.reactive({
scrollTop: 0,
collapsedWidth: 0,
collapsedForced: false,
hidden: false,
shadowActive: false,
paddingScrollActive: false,
lineNotTransition: false
});
const vsBaseClasses = index$1.useVuesaxBaseComponent(index$2.useColor());
const navbarKls = vue.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 = vue.computed(
() => ns.cssVar({
color: 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 = vue.computed(
() => props.leftCollapsed ? !state.collapsedForced : true
);
const isRight = vue.computed(
() => props.rightCollapsed ? !state.collapsedForced : true
);
const isCenter = vue.computed(
() => props.centerCollapsed ? !state.collapsedForced : true
);
vue.watch(
[() => props.hideScroll, () => props.paddingScroll, () => props.shadowScroll],
handleScroll
);
vue.provide(navbar$1.navbarContextKey, {
modelValue: vue.computed(() => props.modelValue)
});
vue.provide(navbar$1.navbarRegisterContextKey, (id) => {
children.add(id);
return {
unregister: () => children.delete(id),
onClick: () => emit(event.UPDATE_MODEL_EVENT, id),
isActive: vue.computed(() => props.modelValue === id)
};
});
vue.onMounted(() => {
vue.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();
core.useEventListener(window, "resize", handleResize);
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "navbarRef",
ref: navbarRef,
class: vue.normalizeClass(navbarKls.value),
style: vue.normalizeStyle(navbarStyles.value)
},
[
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(vue.unref(ns).e("content"))
},
[
isLeft.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
ref_key: "navbarLeftRef",
ref: navbarLeftRef,
class: vue.normalizeClass(vue.unref(ns).e("left"))
},
[
vue.renderSlot(_ctx.$slots, "left")
],
2
)) : vue.createCommentVNode("v-if", true),
isCenter.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
ref_key: "navbarCenterRef",
ref: navbarCenterRef,
class: vue.normalizeClass(vue.unref(ns).e("center"))
},
[
vue.renderSlot(_ctx.$slots, "default")
],
2
)) : vue.createCommentVNode("v-if", true),
isRight.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 2,
ref_key: "navbarRightRef",
ref: navbarRightRef,
class: vue.normalizeClass(vue.unref(ns).e("right"))
},
[
vue.renderSlot(_ctx.$slots, "right")
],
2
)) : vue.createCommentVNode("v-if", true)
],
2
)
],
6
);
};
}
});
var Navbar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/navbar/src/navbar.vue"]]);
exports["default"] = Navbar;
//# sourceMappingURL=navbar2.js.map