@aotearoan/neon/dist/components/user-input/select/NeonSelect.vue.es.js

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

import V from "./NeonSelect.es.js";
import { resolveComponent as m, openBlock as n, createElementBlock as s, createVNode as _, mergeProps as c, withCtx as f, createElementVNode as i, normalizeClass as b, toDisplayString as d, createCommentVNode as u, Fragment as t, renderList as a, withModifiers as g, renderSlot as $, createBlock as k } from "vue";
import w from "../../../_virtual/_plugin-vue_export-helper.es.js";
const z = { class: "neon-select__wrapper" }, O = { class: "no-style neon-select__options" }, C = { class: "neon-select__option-container" }, S = { class: "neon-select__option-label" }, B = ["id", "aria-selected", "onMouseover", "onClick"], N = { class: "neon-select__option-container" }, P = { class: "neon-select__option-label" }, A = ["disabled", "multiple"], D = ["selected"], M = ["label"], E = ["data-index", "disabled", "multiple", "selected", "value"], I = ["data-index", "disabled", "multiple", "selected", "value"];
function L(e, r, F, H, K, U) {
  const h = m("neon-switch"), y = m("neon-icon"), v = m("neon-dropdown");
  return n(), s("div", z, [
    _(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"],
      color: e.color,
      disabled: e.disabled,
      icon: e.computedIcon,
      label: e.computedLabel,
      size: e.size,
      role: "listbox"
    }, e.sanitizedAttributes, { onDropdownPlacement: e.onPlacement }), {
      default: f(() => [
        i("ul", O, [
          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"])
          }, [
            i("div", C, [
              i("span", S, d(e.placeholder), 1)
            ])
          ], 2)) : u("", !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"
            }, d(o.group), 1)) : u("", !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",
              onMouseover: (p) => e.changeHighlighted(l.key),
              onClick: g((p) => !l.disabled && e.clickOption(l), ["stop", "prevent"])
            }, [
              i("div", N, [
                $(e.$slots, "option", { option: l }, () => [
                  e.multiple ? (n(), k(h, {
                    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"])) : u("", !0),
                  l.icon ? (n(), k(y, {
                    key: 1,
                    disabled: l.disabled,
                    name: l.icon,
                    class: "neon-select__option-icon"
                  }, null, 8, ["disabled", "name"])) : u("", !0),
                  i("span", P, d(l.label), 1)
                ])
              ])
            ], 42, B))), 128))
          ], 64))), 256))
        ])
      ]),
      _: 3
    }, 16, ["id", "modelValue", "aria-activedescendant", "aria-multiselectable", "class", "color", "disabled", "icon", "label", "size", "onDropdownPlacement"]),
    i("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))
    }), [
      i("option", {
        selected: e.multiple ? e.modelValue.length === 0 : e.modelValue === "",
        disabled: "",
        hidden: "",
        value: ""
      }, d(e.placeholder), 9, D),
      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, p) => (n(), s("option", {
          key: `${l.key}-native`,
          "data-index": p,
          disabled: l.disabled,
          multiple: e.multiple,
          selected: e.multiple ? e.modelValue.indexOf(l.key) >= 0 : l.key === e.modelValue,
          value: l.key
        }, d(l.label), 9, E))), 128))
      ], 8, M))), 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
      }, d(o.label), 9, I))), 128))
    ], 16, A)
  ]);
}
const J = /* @__PURE__ */ w(V, [["render", L]]);
export {
  J as default
};
//# sourceMappingURL=NeonSelect.vue.es.js.map