@sandlada/vue-mdc
Version:
81 lines (80 loc) • 2.65 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { defineComponent, ref, onMounted, createVNode } from "vue";
import { useReflectAttribute } from "../../node_modules/@glare-labs/vue-reflect-attribute/build/vue-reflect-attribute.js";
import { componentNamePrefix } from "../../internals/component-name-prefix/component-name-prefix.js";
import { useNavigable } from "../../internals/controller/use-navigable.js";
import { renderNavigationDestination } from "../../internals/navigation/render-navigation-destination.js";
import { isServer } from "../../utils/is-server.js";
import { NavigationRailTab } from "../navigation-rail-tab/navigation-rail-tab.js";
import { props } from "./navigation-rail.definition.js";
import css from "./styles/navigation-rail.module.scss.js";
const NavigationRail = /* @__PURE__ */ defineComponent({
name: `${componentNamePrefix}-navigation-rail`,
props,
slots: {},
emits: ["change"],
setup(props2, {
slots,
emit
}) {
const root = ref(null);
const tabContainer = ref(null);
const _position = ref(props2.position);
const handleChange = (e) => {
emit("change", e);
};
useReflectAttribute(root, {
attributes: [{
attribute: "position",
ref: _position,
reflect: true,
type: "string"
}],
tick: "after"
});
useNavigable(root, {
tabs: props2.tabs,
handleChange
});
onMounted(() => {
if (isServer()) {
return;
}
});
return () => {
renderNavigationDestination({
tabs: props2.tabs,
container: tabContainer,
component: NavigationRailTab,
props: (tabConfig) => ({
hideInactiveLabel: typeof tabConfig.hideInactiveLabel === "undefined" ? props2.hideInactiveLabel : tabConfig.hideInactiveLabel,
label: tabConfig.label ?? "Unnamed Tab"
})
});
return createVNode("div", {
"data-component": "navigation-rail",
"class": [css["navigation-rail"], css[_position.value]],
"ref": root
}, [createVNode("span", {
"class": css["start-wrapper"]
}, [slots.start && slots.start()]), createVNode("span", {
"class": css["tabs-wrapper"],
"ref": tabContainer
}, [slots.default && slots.default()]), createVNode("span", {
"class": css["end-wrapper"]
}, [slots.end && slots.end()]), createVNode("span", {
"aria-hidden": "true",
"class": css.background
}, null)]);
};
},
inheritAttrs: true
});
export {
NavigationRail
};
//# sourceMappingURL=navigation-rail.js.map