@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
138 lines (137 loc) • 5.97 kB
JavaScript
import $ from "./NeonTreeMenu.es.js";
import { resolveComponent as C, openBlock as o, createElementBlock as r, normalizeClass as k, createElementVNode as s, Fragment as _, renderList as h, createVNode as p, withCtx as b, createBlock as v, createCommentVNode as d, withKeys as a, withModifiers as m, toDisplayString as y } from "vue";
import w from "../../../_virtual/_plugin-vue_export-helper.es.js";
const x = ["id"], K = { class: "no-style" }, M = ["tabindex", "onKeydown"], V = { class: "no-style neon-tree-menu__items" }, N = ["onKeydown"];
function A(n, u, B, S, E, I) {
const f = C("neon-icon"), c = C("neon-link");
return n.modelValue ? (o(), r("nav", {
key: 0,
id: n.id,
class: k([[
`neon-tree-menu--${n.color}`,
n.exactHighlighting ? "neon-tree-menu--exact" : "neon-tree-menu--active",
{ "neon-tree-menu--expand-all": n.expandAll }
], "neon-tree-menu"])
}, [
s("ul", K, [
(o(!0), r(_, null, h(n.modelValue, (e) => {
var g;
return o(), r("li", {
key: e.key,
class: k([{
"neon-tree-menu__section--expanded": (e.expanded || n.expandAll) && e.children && ((g = e.children) == null ? void 0 : g.length) !== 0,
"neon-tree-menu__section--disabled": e.disabled
}, "neon-tree-menu__section"])
}, [
p(c, {
href: e.href,
"no-style": !e.href,
target: e.external ? "_blank" : void 0,
class: "neon-tree-menu__section-link",
"outline-style": "none",
tabindex: "-1",
onClick: (l) => {
var t;
return !e.disabled && ((((t = e.children) == null ? void 0 : t.length) || 0) > 0 ? n.onSectionClick(e.key) : n.emit("click", e.href));
}
}, {
default: b(() => [
e.icon ? (o(), v(f, {
key: 0,
id: n.id + "_" + e.key,
name: e.icon,
class: "neon-tree-menu__section-link-icon"
}, null, 8, ["id", "name"])) : d("", !0),
s("span", {
tabindex: e.disabled ? -1 : 0,
class: "neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text",
role: "link",
onKeydown: [
a(m((l) => !e.disabled && n.onSectionClick(e.key), ["stop", "prevent"]), ["space"]),
a((l) => e.href && n.click(l), ["enter"]),
a((l) => e.href && n.click(l), ["space"])
]
}, y(e.label), 41, M),
e.children && e.children.length !== 0 ? (o(), v(f, {
key: 1,
class: "neon-tree-menu__section-link-expansion-icon",
name: "chevron-right"
})) : d("", !0)
]),
_: 2
}, 1032, ["href", "no-style", "target", "onClick"]),
s("ul", V, [
(o(!0), r(_, null, h(e.children, (l) => (o(), r("li", {
key: l.key,
class: "neon-tree-menu__item"
}, [
p(c, {
href: l.href,
"no-style": !0,
target: l.external ? "_blank" : void 0,
class: "neon-tree-menu__item-link",
"outline-style": "none",
tabindex: "-1",
onClick: (t) => {
var i;
return (((i = l.subMenu) == null ? void 0 : i.length) || 0) > 0 ? n.onItemClick(l.key) : n.emit("click", l.href);
}
}, {
default: b(() => [
s("span", {
class: "neon-tree-menu__item-link-label neon-tree-menu__item-link-label--outline-text",
role: "link",
tabindex: "0",
onKeydown: [
u[0] || (u[0] = a((t) => n.click(t), ["enter"])),
a(m((t) => n.onItemClick(l.key), ["prevent"]), ["space"])
]
}, y(l.label), 41, N)
]),
_: 2
}, 1032, ["href", "target", "onClick"]),
l.subMenu && l.subMenu.length > 0 ? (o(), r("ul", {
key: 0,
class: k([{
"neon-tree-menu__sub-menu--expanded": (n.expandAll || l.expanded) && l.subMenu && l.subMenu.length !== 0
}, "no-style neon-tree-menu__sub-menu"])
}, [
(o(!0), r(_, null, h(l.subMenu, (t) => (o(), r("li", {
key: t.href,
class: "neon-tree-menu__sub-menu-item"
}, [
p(c, {
href: t.href,
class: "neon-link--no-style neon-tree-menu__sub-menu-item-link",
"no-style": "",
"outline-style": "none",
tabindex: "-1",
onClick: (i) => n.emit("click", t.href)
}, {
default: b(() => [
s("span", {
class: "neon-tree-menu__sub-menu-item-link-label neon-tree-menu__sub-menu-item-link-label--outline-text",
role: "link",
tabindex: "0",
onKeydown: [
u[1] || (u[1] = a(m((i) => n.click(i), ["prevent"]), ["space"])),
u[2] || (u[2] = a(m((i) => n.click(i), ["prevent"]), ["enter"]))
]
}, y(t.label), 33)
]),
_: 2
}, 1032, ["href", "onClick"])
]))), 128))
], 2)) : d("", !0)
]))), 128))
])
], 2);
}), 128))
])
], 10, x)) : d("", !0);
}
const H = /* @__PURE__ */ w($, [["render", A]]);
export {
H as default
};
//# sourceMappingURL=NeonTreeMenu.vue.es.js.map