@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
116 lines (115 loc) • 5.01 kB
JavaScript
import $ from "./NeonSearch.es.js";
import { resolveComponent as r, openBlock as l, createElementBlock as s, createVNode as d, mergeProps as u, withCtx as m, createElementVNode as i, Fragment as h, renderList as b, withModifiers as t, normalizeClass as p, renderSlot as w, createBlock as v, createCommentVNode as k, toDisplayString as g, withKeys as z } from "vue";
import V from "../../../_virtual/_plugin-vue_export-helper.es.js";
const _ = { class: "neon-search__wrapper" }, O = { class: "no-style neon-search__options" }, S = ["id", "onMouseover", "onClickCapture", "onSpaceCapture", "onEnterCapture"], B = { class: "neon-search__option-container" }, P = { class: "neon-search__option-label" };
function A(e, n, D, E, F, N) {
const c = r("neon-icon"), C = r("neon-chip"), y = r("neon-input"), f = r("neon-dropdown");
return l(), s("div", _, [
d(f, u({
ref: "dropdown",
modelValue: e.open,
"onUpdate:modelValue": n[3] || (n[3] = (o) => e.open = o),
"aria-activedescendant": e.activeDescendant,
"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(() => [
i("div", {
ref: "dropdownButton",
class: p([[
`neon-search__container--${e.size}`,
`neon-search__container--${e.color}`,
{ "neon-search__container--disabled": e.disabled }
], "neon-search__container"])
}, [
d(c, {
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(h, { key: 0 }, b(e.modelValue, (o, a) => (l(), v(C, {
id: o.key,
key: o.key,
class: p({ "neon-chip--last-chip": a === e.modelValue.length - 1 }),
color: o.chipColor,
disabled: e.disabled,
label: o.label,
size: e.size,
action: "remove",
"aria-selected": "true",
role: "option",
onClose: (K) => e.removeSelected(o)
}, null, 8, ["id", "class", "color", "disabled", "label", "size", "onClose"]))), 128)) : k("", !0),
d(y, u({
ref: "searchInput",
autocomplete: e.autocomplete,
color: e.color,
disabled: e.disabled,
"model-Value": e.filter,
placeholder: e.placeholder,
size: e.size,
class: "neon-search__input"
}, e.sanitizedAttributes, {
onFocus: n[0] || (n[0] = (o) => e.showOptions()),
onKeydownCapture: n[1] || (n[1] = z(t(() => {
}, ["prevent", "stop"]), ["enter"])),
"onUpdate:modelValue": e.onFilterChange,
onIconClick: n[2] || (n[2] = (o) => e.onFilterChange(""))
}), null, 16, ["autocomplete", "color", "disabled", "model-Value", "placeholder", "size", "onUpdate:modelValue"])
], 2)
]),
default: m(() => [
i("ul", O, [
(l(!0), s(h, null, b(e.computedOptions, (o) => (l(), s("li", {
id: o.key,
key: o.key,
class: p([[
{
"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",
tabindex: "0",
onMouseover: (a) => e.changeHighlighted(o.key),
onClickCapture: t((a) => e.clickOption(o), ["stop", "prevent"]),
onSpaceCapture: t((a) => e.clickOption(o), ["stop", "prevent"]),
onEnterCapture: t((a) => e.clickOption(o), ["stop", "prevent"])
}, [
i("div", B, [
w(e.$slots, "option", { option: o }, () => [
o.icon ? (l(), v(c, {
key: 0,
name: o.icon,
class: "neon-search__option-icon"
}, null, 8, ["name"])) : k("", !0),
i("span", P, g(o.label), 1)
])
])
], 42, S))), 128))
])
]),
_: 3
}, 16, ["modelValue", "aria-activedescendant", "aria-multiselectable", "class", "color", "disabled", "placement", "size", "onDropdownPlacement"])
]);
}
const H = /* @__PURE__ */ V($, [["render", A]]);
export {
H as default
};
//# sourceMappingURL=NeonSearch.vue.es.js.map