@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
94 lines (93 loc) • 3.83 kB
JavaScript
import m from "./NeonDropdown.es.js";
import { resolveComponent as l, openBlock as d, createElementBlock as r, normalizeClass as a, createElementVNode as i, renderSlot as t, createVNode as s, withKeys as p, withModifiers as g, createBlock as v, createCommentVNode as f, withDirectives as y, vShow as $ } from "vue";
import c from "../../../_virtual/_plugin-vue_export-helper.es.js";
const k = { ref: "dropdownButton" }, O = {
key: 0,
class: "neon-dropdown__button-wrapper"
}, z = ["id", "tabindex"], C = /* @__PURE__ */ i("div", { class: "neon-dropdown__click-blocker" }, null, -1);
function V(o, e, B, S, N, A) {
const u = l("neon-button"), b = l("neon-badge"), w = l("neon-expansion-indicator");
return d(), r("div", {
class: a([[
{
"neon-dropdown--with-indicator": o.indicator,
"neon-dropdown--open": o.modelValue,
"neon-dropdown--open-on-hover": o.openOnHover,
"neon-dropdown--icon-only": o.icon && !o.label,
"neon-dropdown--disabled": o.disabled
},
`neon-dropdown--${o.size}`,
`neon-dropdown--${o.color}`
], "neon-dropdown"])
}, [
i("div", k, [
t(o.$slots, "dropdown-button", {}, () => [
o.dropdownStyle === "text-button" || o.dropdownStyle === "solid-button" ? (d(), r("div", O, [
s(u, {
id: o.id,
"alternate-color": o.alternateColor,
"aria-expanded": o.modelValue,
"button-style": o.dropdownStyle === "text-button" ? "text" : "solid",
color: o.color,
disabled: o.disabled,
icon: o.icon,
indicator: o.indicator,
"indicator-expanded": o.modelValue,
label: o.label,
size: o.size,
"aria-haspopup": "true",
class: "neon-dropdown__button",
onBlur: e[0] || (e[0] = (n) => o.onBlur()),
onClick: e[1] || (e[1] = (n) => o.toggleOpen()),
onFocus: e[2] || (e[2] = (n) => o.onFocus())
}, null, 8, ["id", "alternate-color", "aria-expanded", "button-style", "color", "disabled", "icon", "indicator", "indicator-expanded", "label", "size"])
])) : (d(), r("div", {
key: 1,
id: o.id,
ref: "dropdownButton",
tabindex: o.disabled ? void 0 : 0,
class: "neon-dropdown__badge",
role: "button",
onClick: e[3] || (e[3] = (...n) => o.toggleOpen && o.toggleOpen(...n)),
onKeydown: [
e[4] || (e[4] = p((...n) => o.toggleOpen && o.toggleOpen(...n), ["enter"])),
e[5] || (e[5] = p(g((...n) => o.toggleOpen && o.toggleOpen(...n), ["stop", "prevent"]), ["space"]))
]
}, [
s(b, {
"alternate-color": o.alternateColor,
circular: o.dropdownStyle === "circular-badge",
color: o.color,
disabled: o.disabled,
icon: o.icon,
image: o.image,
imageAlt: o.imageAlt,
label: o.label,
size: o.size
}, null, 8, ["alternate-color", "circular", "color", "disabled", "icon", "image", "imageAlt", "label", "size"]),
o.indicator ? (d(), v(w, {
key: 0,
color: o.color,
disabled: o.disabled,
expanded: o.modelValue,
class: "neon-button__indicator"
}, null, 8, ["color", "disabled", "expanded"])) : f("", !0)
], 40, z))
])
], 512),
C,
y(i("div", {
ref: "dropdownContent",
class: a([`neon-dropdown__content--${o.dropdownPlacement}`, "neon-dropdown__content"])
}, [
t(o.$slots, "default")
], 2), [
[$, o.openOnHover || o.modelValue]
])
], 2);
}
const H = /* @__PURE__ */ c(m, [["render", V]]);
export {
H as default
};
//# sourceMappingURL=NeonDropdown.vue.es.js.map