@aotearoan/neon/dist/components/user-input/filter/NeonFilter.vue.es.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import y from "./NeonFilter.es.js";
import { resolveComponent as t, openBlock as s, createBlock as a, withCtx as i, createVNode as n, createElementVNode as c, toDisplayString as u, createTextVNode as _, createElementBlock as p, Fragment as h, renderList as V, normalizeClass as z } from "vue";
import S from "../../../_virtual/_plugin-vue_export-helper.es.js";
const v = { class: "neon-filter__title" }, w = ["onClick"];
function $(e, o, L, N, T, U) {
  const d = t("neon-button"), b = t("neon-field-group"), f = t("neon-link"), m = t("neon-input"), r = t("neon-stack"), k = t("neon-switch"), g = t("neon-dropdown");
  return s(), a(g, {
    modelValue: e.open,
    "onUpdate:modelValue": o[4] || (o[4] = (l) => e.open = l),
    class: "neon-filter"
  }, {
    "dropdown-button": i(() => [
      e.selected.length ? (s(), a(b, {
        key: 0,
        "indicator-style": "external"
      }, {
        default: i(() => [
          n(d, {
            color: e.color,
            disabled: e.disabled,
            label: e.computedLabel,
            size: e.size,
            title: e.editTitle,
            "button-style": "solid",
            onClick: o[0] || (o[0] = (l) => e.open = !0)
          }, null, 8, ["color", "disabled", "label", "size", "title"]),
          n(d, {
            color: e.color,
            disabled: e.disabled,
            size: e.size,
            title: e.clearTitle,
            "button-style": "solid",
            icon: "close",
            onClick: e.clearSelection
          }, null, 8, ["color", "disabled", "size", "title", "onClick"])
        ]),
        _: 1
      })) : (s(), a(d, {
        key: 1,
        disabled: e.disabled,
        label: e.computedLabel,
        size: e.size,
        "button-style": "outline",
        color: "high-contrast",
        indicator: "",
        onClick: o[1] || (o[1] = (l) => e.open = !0)
      }, null, 8, ["disabled", "label", "size"]))
    ]),
    default: i(() => [
      n(r, { class: "neon-filter__content" }, {
        default: i(() => [
          n(r, { gap: "m" }, {
            default: i(() => [
              c("span", v, u(e.computedTitle), 1),
              n(f, {
                class: "neon-filter__reset-link",
                onClick: e.resetFilter
              }, {
                default: i(() => [
                  _(u(e.resetLabel), 1)
                ]),
                _: 1
              }, 8, ["onClick"]),
              n(m, {
                modelValue: e.filterString,
                "onUpdate:modelValue": o[2] || (o[2] = (l) => e.filterString = l),
                icon: e.filterString === "" ? "search" : "close",
                placeholder: e.placeholder,
                color: "high-contrast",
                onIconClick: o[3] || (o[3] = (l) => e.filterString !== "" ? e.filterString = "" : void 0)
              }, null, 8, ["modelValue", "icon", "placeholder"])
            ]),
            _: 1
          }),
          n(r, {
            class: "neon-filter__items",
            gap: "s"
          }, {
            default: i(() => [
              (s(!0), p(h, null, V(e.filteredItems, (l) => (s(), p("div", {
                key: l.label,
                class: "neon-filter__item"
              }, [
                n(k, {
                  disabled: l.disabled,
                  label: l.label,
                  "model-value": l.selected,
                  color: "brand",
                  "switch-style": "checkbox",
                  "onUpdate:modelValue": (C) => e.toggleSelected(l.label)
                }, null, 8, ["disabled", "label", "model-value", "onUpdate:modelValue"]),
                c("span", {
                  class: z([
                    "neon-number",
                    "neon-filter__item-count",
                    { "neon-filter__item-count--disabled": l.disabled }
                  ]),
                  onClick: (C) => !l.disabled && e.toggleSelected(l.label)
                }, u(e.formatNumber(l.count)), 11, w)
              ]))), 128))
            ]),
            _: 1
          }),
          n(d, {
            "button-style": e.isDirty ? "solid" : "outline",
            label: e.computedShowLabel,
            class: "neon-filter__cta",
            color: "high-contrast",
            "full-width": "",
            onClick: e.ctaClick
          }, null, 8, ["button-style", "label", "onClick"])
        ]),
        _: 1
      })
    ]),
    _: 1
  }, 8, ["modelValue"]);
}
const E = /* @__PURE__ */ S(y, [["render", $]]);
export {
  E as default
};
//# sourceMappingURL=NeonFilter.vue.es.js.map