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