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