@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
108 lines (107 loc) • 4.56 kB
JavaScript
import v from "./NeonSearch.es.js";
import { resolveComponent as a, openBlock as l, createElementBlock as s, createVNode as d, mergeProps as c, withCtx as m, createElementVNode as r, normalizeClass as t, Fragment as u, renderList as h, createBlock as b, createCommentVNode as y, renderSlot as g, toDisplayString as z } from "vue";
import $ from "../../../_virtual/_plugin-vue_export-helper.es.js";
const w = { class: "neon-search__wrapper" }, C = { class: "no-style neon-search__options" }, _ = ["id", "onClick", "onMouseover"], A = { class: "neon-search__option-container" }, B = { class: "neon-search__option-label" };
function P(e, n, F, N, O, S) {
const p = a("neon-icon"), k = a("neon-chip"), V = a("neon-input"), f = a("neon-dropdown");
return l(), s("div", w, [
d(f, c({
ref: "dropdown",
modelValue: e.open,
"onUpdate:modelValue": n[2] || (n[2] = (o) => e.open = o),
"aria-activedescendant": e.multiple && Array.isArray(e.modelValue) ? e.modelValue[0] && e.modelValue[0].key : e.modelValue,
"aria-multiselectable": e.multiple,
class: [[
`neon-search--${e.color}`,
{
"neon-search--multiple": e.multiple,
"neon-search--disabled": e.disabled,
"neon-search--empty": e.computedOptions.length === 0
}
], "neon-search"],
color: e.color,
disabled: e.disabled,
placement: e.dropdownPlacement,
size: e.size,
role: "listbox"
}, e.sanitizedAttributes, { onDropdownPlacement: e.onPlacement }), {
"dropdown-button": m(() => [
r("div", {
ref: "dropdownButton",
class: t([[
`neon-search__container--${e.size}`,
`neon-search__container--${e.color}`,
{ "neon-search__container--disabled": e.disabled }
], "neon-search__container"])
}, [
d(p, {
disabled: e.disabled,
class: "neon-search__search-icon",
color: "low-contrast",
name: "search"
}, null, 8, ["disabled"]),
e.multiple && Array.isArray(e.modelValue) ? (l(!0), s(u, { key: 0 }, h(e.modelValue, (o, i) => (l(), b(k, {
id: o.key,
key: o.key,
class: t({ "neon-chip--last-chip": i === e.modelValue.length - 1 }),
color: o.chipColor,
disabled: e.disabled,
label: o.label,
size: e.size,
action: "remove",
"aria-selected": "true",
role: "option",
onClose: (D) => e.removeSelected(o)
}, null, 8, ["id", "class", "color", "disabled", "label", "size", "onClose"]))), 128)) : y("", !0),
d(V, c({
disabled: e.disabled,
modelValue: e.filter,
placeholder: e.placeholder,
size: e.size,
class: "neon-search__input"
}, e.sanitizedAttributes, {
onFocus: n[0] || (n[0] = (o) => e.showOptions()),
"onUpdate:modelValue": e.onFilterChange,
onIconClick: n[1] || (n[1] = (o) => e.onFilterChange(""))
}), null, 16, ["disabled", "modelValue", "placeholder", "size", "onUpdate:modelValue"])
], 2)
]),
default: m(() => [
r("ul", C, [
(l(!0), s(u, null, h(e.computedOptions, (o) => (l(), s("li", {
id: o.key,
key: o.key,
class: t([[
{
"neon-search__option--separator-before": o.separatorBefore,
"neon-search__option--highlighted": o.key === e.highlightedKey
},
`neon-search__option--${e.size}`
], "neon-search__option"]),
"aria-selected": "false",
role: "option",
onClick: (i) => e.clickOption(o),
onMouseover: (i) => e.changeHighlighted(o.key)
}, [
r("div", A, [
g(e.$slots, "option", { option: o }, () => [
o.icon ? (l(), b(p, {
key: 0,
name: o.icon,
class: "neon-search__option-icon"
}, null, 8, ["name"])) : y("", !0),
r("span", B, z(o.label), 1)
])
])
], 42, _))), 128))
])
]),
_: 3
}, 16, ["modelValue", "aria-activedescendant", "aria-multiselectable", "class", "color", "disabled", "placement", "size", "onDropdownPlacement"])
]);
}
const H = /* @__PURE__ */ $(v, [["render", P]]);
export {
H as default
};
//# sourceMappingURL=NeonSearch.vue.es.js.map