@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
80 lines (79 loc) • 3.04 kB
JavaScript
import p from "./NeonMenu.es.js";
import { resolveComponent as s, openBlock as o, createElementBlock as r, createElementVNode as a, normalizeClass as l, Fragment as m, renderList as _, createBlock as i, withKeys as k, withCtx as y, createCommentVNode as b, toDisplayString as f, createVNode as h } from "vue";
import v from "../../../_virtual/_plugin-vue_export-helper.es.js";
const $ = {
ref: "menuWrapper",
class: "neon-menu__wrapper"
}, w = ["onClick"], z = { class: "neon-menu__item-label" };
function C(n, M, I, g, N, B) {
const c = s("neon-dropdown-menu"), d = s("neon-icon"), t = s("neon-link");
return o(), r("nav", $, [
a("ul", {
class: l([[`neon-menu--${n.color}`, `neon-menu--${n.size}`], "neon-menu no-style"]),
role: "menubar"
}, [
(o(!0), r(m, null, _(n.menu, (e) => (o(), r("li", {
key: e.key,
ref_for: !0,
ref: "menuItem",
class: l([{ "neon-menu__item--disabled": e.disabled }, "neon-menu__item"]),
role: "menuitem"
}, [
e.children ? (o(), i(c, {
key: `${e.key}DropdownMenu`,
class: l({ "router-link-active": n.routeMatches(e.href) }),
color: n.color,
disabled: e.disabled,
icon: e.icon,
label: e.label,
model: e.children,
openOnHover: !e.disabled,
size: n.size,
"dropdown-style": "text"
}, null, 8, ["class", "color", "disabled", "icon", "label", "model", "openOnHover", "size"])) : (o(), i(t, {
key: `${e.key}Link`,
class: l({ "router-link-active": n.routeMatches(e.href) }),
href: e.href,
"no-style": !0,
tabindex: e.disabled ? -1 : 0,
"outline-style": "none",
onKeydown: k((u) => !e.disabled && n.onClick(e.key), ["enter"])
}, {
default: y(() => [
a("div", {
class: "neon-menu__link-container",
tabindex: "-1",
onClick: (u) => !e.disabled && n.onClick(e.key)
}, [
e.icon ? (o(), i(d, {
id: `${e.key}MenuIcon`,
key: `${e.key}LinkIcon`,
name: e.icon,
class: "neon-menu__item-icon",
color: "neutral"
}, null, 8, ["id", "name"])) : b("", !0),
a("span", z, f(e.label), 1)
], 8, w)
]),
_: 2
}, 1032, ["class", "href", "tabindex", "onKeydown"]))
], 2))), 128))
], 2),
h(c, {
class: l([{ "neon-menu__responsive-menu--hidden": n.responsiveMenuItems.length === 0 }, "neon-menu__responsive-menu"]),
color: n.color,
indicator: !1,
model: n.responsiveMenuItems,
openOnHover: !0,
size: n.size,
"dropdown-style": "text",
icon: "ellipsis",
placement: "bottom-right"
}, null, 8, ["class", "color", "model", "size"])
], 512);
}
const O = /* @__PURE__ */ v(p, [["render", C]]);
export {
O as default
};
//# sourceMappingURL=NeonMenu.vue.es.js.map