@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
68 lines (67 loc) • 2.68 kB
JavaScript
import m from "./NeonExpansionPanel.es.js";
import { resolveComponent as l, openBlock as d, createElementBlock as b, normalizeClass as i, createElementVNode as a, withKeys as s, withModifiers as u, renderSlot as p, createBlock as g, createCommentVNode as f, toDisplayString as h, createVNode as $, withDirectives as c, vShow as E } from "vue";
import v from "../../../_virtual/_plugin-vue_export-helper.es.js";
const V = ["aria-disabled", "aria-expanded"], w = ["aria-controls"], k = { class: "neon-expansion-panel__label" }, x = ["id"];
function y(e, n, C, N, B, S) {
const r = l("neon-icon"), t = l("neon-expansion-indicator");
return d(), b("div", {
"aria-disabled": e.disabled,
"aria-expanded": e.modelValue,
class: i([[
{
"neon-expansion-panel--expanded": e.modelValue,
"neon-expansion-panel--full-width": e.fullWidth,
"neon-expansion-panel--indented": e.indent,
"neon-expansion-panel--disabled": e.disabled,
"neon-expansion-panel--custom-header": e.slots.header
},
`neon-expansion-panel--${e.position}`,
`neon-expansion-panel--${e.size}`,
`neon-expansion-panel--${e.color}`
], "neon-expansion-panel"])
}, [
a("div", {
"aria-controls": e.id,
class: i([[`neon-expansion-panel__header--${e.indicatorPosition}`], "neon-expansion-panel__header"]),
tabindex: "-1",
onClick: n[2] || (n[2] = (...o) => e.toggleExpanded && e.toggleExpanded(...o))
}, [
a("div", {
class: "neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text",
tabindex: "0",
onKeydown: [
n[0] || (n[0] = s((...o) => e.toggleExpanded && e.toggleExpanded(...o), ["enter"])),
n[1] || (n[1] = s(u((...o) => e.toggleExpanded && e.toggleExpanded(...o), ["prevent"]), ["space"]))
]
}, [
p(e.$slots, "header", { expanded: e.modelValue }, () => [
e.icon ? (d(), g(r, {
key: 0,
color: e.color,
disabled: e.disabled,
name: e.icon
}, null, 8, ["color", "disabled", "name"])) : f("", !0),
a("span", k, h(e.label), 1)
])
], 32),
$(t, {
color: e.color,
disabled: e.disabled,
expanded: e.modelValue
}, null, 8, ["color", "disabled", "expanded"])
], 10, w),
c(a("div", {
id: e.id,
class: "neon-expansion-panel__content"
}, [
p(e.$slots, "default")
], 8, x), [
[E, e.modelValue]
])
], 10, V);
}
const P = /* @__PURE__ */ v(m, [["render", y]]);
export {
P as default
};
//# sourceMappingURL=NeonExpansionPanel.vue.es.js.map