@sandlada/vue-mdc
Version:
72 lines (71 loc) • 2.4 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { createVNode, defineComponent } from "vue";
import { componentNamePrefix } from "../../internals/component-name-prefix/component-name-prefix.js";
import { isServer } from "../../utils/is-server.js";
import { FocusRing } from "../focus-ring/focus-ring.js";
import "../../internals/navigation/render-navigation-destination.js";
import { Ripple } from "../ripple/ripple.js";
import "../ripple/ripple-state.js";
import css from "./styles/navigation-drawer.module.scss.js";
const defaultIcon = createVNode("svg", {
"xmlns": "http://www.w3.org/2000/svg",
"height": "24px",
"viewBox": "0 -960 960 960",
"width": "24px",
"fill": "#1f1f1f"
}, [createVNode("path", {
"d": "M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
}, null)]);
const NavigationDrawerIndicator = /* @__PURE__ */ defineComponent({
name: `${componentNamePrefix}-navigation-drawer-indicator`,
props: {
defaultActive: {
type: Boolean,
default: false
},
label: {
type: String,
default: "Unnamed Label"
}
},
slots: {},
emits: ["request-route"],
mounted() {
if (isServer()) {
return;
}
const root = this.$el;
root.addEventListener("click", this.handleClick);
},
methods: {
handleClick() {
const root = this.$el;
const event = new CustomEvent("request-route", {
bubbles: true,
cancelable: false,
detail: {
element: this.$el
}
});
root.dispatchEvent(event);
this.$emit("request-route", event);
}
},
render() {
return createVNode("button", {
"data-component": "navigation-drawer-indicator",
"data-label": this.label,
"class": [css["navigation-drawer-indicator-component-styles"], this.defaultActive && css.active]
}, [this.$slots.icon ? this.$slots.icon() : defaultIcon, createVNode("span", {
"class": css.label
}, [this.label]), createVNode(Ripple, null, null), createVNode(FocusRing, null, null)]);
}
});
export {
NavigationDrawerIndicator
};
//# sourceMappingURL=navigation-drawer-indicator.js.map