@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
130 lines (129 loc) • 6.05 kB
JavaScript
import f from "./NeonSelect.es.js";
import { resolveComponent as m, openBlock as n, createElementBlock as s, createVNode as g, mergeProps as c, withCtx as _, createElementVNode as d, normalizeClass as b, toDisplayString as i, createCommentVNode as p, Fragment as t, renderList as a, withModifiers as h, renderSlot as w, createBlock as k } from "vue";
import $ from "../../../_virtual/_plugin-vue_export-helper.es.js";
const O = { class: "neon-select__wrapper" }, z = { class: "no-style neon-select__options" }, C = { class: "neon-select__option-container" }, S = { class: "neon-select__option-label" }, P = ["id", "aria-selected", "onMouseover", "onClickCapture", "onEnter"], B = { class: "neon-select__option-container" }, E = { class: "neon-select__option-label" }, N = ["disabled", "multiple"], A = ["selected"], D = ["label"], I = ["data-index", "disabled", "multiple", "selected", "value"], M = ["data-index", "disabled", "multiple", "selected", "value"];
function L(e, r, F, H, K, U) {
const y = m("neon-switch"), v = m("neon-icon"), V = m("neon-dropdown");
return n(), s("div", O, [
g(V, c({
id: e.id,
ref: "dropdown",
modelValue: e.open,
"onUpdate:modelValue": r[0] || (r[0] = (o) => e.open = o),
"aria-activedescendant": e.multiple ? e.modelValue[0] : e.modelValue,
"aria-multiselectable": e.multiple,
class: [[
`neon-select--${e.color}`,
{
"neon-select--grouped": e.groupedOptions,
"neon-select--multiple": e.multiple,
"neon-select--with-placeholder": e.labelIsPlaceholder
}
], "neon-select"],
color: e.color,
disabled: e.disabled,
"dropdown-style": e.buttonStyle,
icon: e.computedIcon,
label: e.computedLabel,
size: e.size,
role: "listbox"
}, e.sanitizedAttributes, { onDropdownPlacement: e.onPlacement }), {
default: _(() => [
d("ul", z, [
e.placeholderAsOption ? (n(), s("li", {
key: 0,
class: b([`neon-select__option--${e.size}`, "neon-select__option neon-select__option--disabled neon-select__option-placeholder"])
}, [
d("div", C, [
d("span", S, i(e.placeholder), 1)
])
], 2)) : p("", !0),
(n(!0), s(t, null, a(e.computedOptions, (o) => (n(), s(t, null, [
o.group !== "" ? (n(), s("li", {
key: o.group,
class: "neon-select__option-title"
}, i(o.group), 1)) : p("", !0),
(n(!0), s(t, null, a(o.options, (l) => (n(), s("li", {
id: l.key,
key: l.key,
"aria-selected": e.multiple ? e.modelValue.indexOf(l.key) >= 0 : l.key === e.modelValue,
class: b([[
{
"neon-select__option--disabled": l.disabled,
"neon-select__option--separator-before": l.separatorBefore,
"neon-select__option--selected": e.multiple ? e.modelValue.indexOf(l.key) >= 0 : l.key === e.modelValue,
"neon-select__option--highlighted": l.key === e.highlightedKey
},
`neon-select__option--${e.size}`
], "neon-select__option"]),
role: "option",
tabindex: "0",
onMouseover: (u) => e.changeHighlighted(l.key),
onClickCapture: h((u) => !l.disabled && e.clickOption(l), ["stop", "prevent"]),
onEnter: h((u) => !l.disabled && e.clickOption(l), ["stop", "prevent"])
}, [
d("div", B, [
w(e.$slots, "option", { option: l }, () => [
e.multiple ? (n(), k(y, {
key: 0,
color: e.color,
modelValue: e.modelValue.indexOf(l.key) >= 0,
size: e.size === "l" ? "m" : "s",
"switch-style": "checkbox"
}, null, 8, ["color", "modelValue", "size"])) : p("", !0),
l.icon ? (n(), k(v, {
key: 1,
disabled: l.disabled,
name: l.icon,
class: "neon-select__option-icon"
}, null, 8, ["disabled", "name"])) : p("", !0),
d("span", E, i(l.label), 1)
])
])
], 42, P))), 128))
], 64))), 256))
])
]),
_: 3
}, 16, ["id", "modelValue", "aria-activedescendant", "aria-multiselectable", "class", "color", "disabled", "dropdown-style", "icon", "label", "size", "onDropdownPlacement"]),
d("select", c({
disabled: e.disabled,
multiple: e.multiple,
class: "neon-select__native"
}, e.sanitizedAttributes, {
onInput: r[1] || (r[1] = (...o) => e.nativeSelectChange && e.nativeSelectChange(...o))
}), [
d("option", {
selected: e.multiple ? e.modelValue.length === 0 : e.modelValue === "",
disabled: "",
hidden: "",
value: ""
}, i(e.placeholder), 9, A),
e.groupedOptions ? (n(!0), s(t, { key: 0 }, a(e.groupedOptions, (o) => (n(), s("optgroup", {
key: o.group,
label: o.group
}, [
(n(!0), s(t, null, a(o.options, (l, u) => (n(), s("option", {
key: `${l.key}-native`,
"data-index": u,
disabled: l.disabled,
multiple: e.multiple,
selected: e.multiple ? e.modelValue.indexOf(l.key) >= 0 : l.key === e.modelValue,
value: l.key
}, i(l.label), 9, I))), 128))
], 8, D))), 128)) : (n(!0), s(t, { key: 1 }, a(e.options, (o, l) => (n(), s("option", {
key: `${o.key}-native`,
"data-index": l,
disabled: o.disabled,
multiple: e.multiple,
selected: e.multiple ? e.modelValue.indexOf(o.key) >= 0 : o.key === e.modelValue,
value: o.key
}, i(o.label), 9, M))), 128))
], 16, N)
]);
}
const J = /* @__PURE__ */ $(f, [["render", L]]);
export {
J as default
};
//# sourceMappingURL=NeonSelect.vue.es.js.map