@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
89 lines (88 loc) • 3.13 kB
JavaScript
import b from "./NeonSearchFilter.es.js";
import { resolveComponent as n, openBlock as s, createBlock as r, withCtx as t, createVNode as l, createElementVNode as m, toDisplayString as h } from "vue";
import f from "../../../_virtual/_plugin-vue_export-helper.es.js";
const k = { class: "neon-search-filter__title" };
function C(e, o, y, g, z, V) {
const a = n("neon-button"), p = n("neon-field-group"), u = n("neon-input"), d = n("neon-stack"), c = n("neon-dropdown");
return s(), r(c, {
modelValue: e.open,
"onUpdate:modelValue": o[3] || (o[3] = (i) => e.open = i),
class: "neon-search-filter"
}, {
"dropdown-button": t(() => [
e.modelValue !== "" ? (s(), r(p, {
key: 0,
"indicator-style": "external"
}, {
default: t(() => [
l(a, {
color: e.color,
disabled: e.disabled,
label: e.computedLabel,
size: e.size,
title: e.editTitle,
"button-style": "solid",
onClick: e.onOpen
}, null, 8, ["color", "disabled", "label", "size", "title", "onClick"]),
l(a, {
color: e.color,
disabled: e.disabled,
size: e.size,
title: e.clearTitle,
"button-style": "solid",
icon: "close",
onClick: o[0] || (o[0] = (i) => e.updateSearch(""))
}, null, 8, ["color", "disabled", "size", "title"])
]),
_: 1
})) : (s(), r(a, {
key: 1,
disabled: e.disabled,
label: e.label,
size: e.size,
"button-style": "outline",
color: "high-contrast",
icon: "search",
"icon-position": "right",
onClick: e.onOpen
}, null, 8, ["disabled", "label", "size", "onClick"]))
]),
default: t(() => [
l(d, { class: "neon-search-filter__content" }, {
default: t(() => [
l(d, { gap: "m" }, {
default: t(() => [
m("span", k, h(e.label), 1),
l(u, {
ref: "searchElement",
icon: e.search === "" ? "search" : "times",
"model-value": e.search,
placeholder: e.placeholder,
color: "high-contrast",
onIconClick: o[1] || (o[1] = (i) => e.onSearchClear()),
"onUpdate:modelValue": e.onSearchChange
}, null, 8, ["icon", "model-value", "placeholder", "onUpdate:modelValue"])
]),
_: 1
}),
l(a, {
"button-style": e.isDirty ? "solid" : "outline",
disabled: e.searchCount === 0,
label: e.computedShowLabel,
class: "neon-search-filter__cta",
color: "high-contrast",
"full-width": "",
onClick: o[2] || (o[2] = (i) => e.updateSearch(e.search))
}, null, 8, ["button-style", "disabled", "label"])
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue"]);
}
const w = /* @__PURE__ */ f(b, [["render", C]]);
export {
w as default
};
//# sourceMappingURL=NeonSearchFilter.vue.es.js.map