@aotearoan/neon 19.0.0 → 19.0.2

package/dist/components/user-input/search/NeonSearch.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonSearch.vue.cjs.js","sources":["../../../../src/components/user-input/search/NeonSearch.vue"],"sourcesContent":["<template>\n  <div class=\"neon-search__wrapper\">\n    <neon-dropdown\n      ref=\"dropdown\"\n      v-model=\"open\"\n      :aria-activedescendant=\"multiple && Array.isArray(modelValue) ? modelValue[0] && modelValue[0].key : modelValue\"\n      :aria-multiselectable=\"multiple\"\n      :class=\"[\n        `neon-search--${color}`,\n        {\n          'neon-search--multiple': multiple,\n          'neon-search--disabled': disabled,\n          'neon-search--empty': computedOptions.length === 0,\n        },\n      ]\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :placement=\"dropdownPlacement\"\n      :size=\"size\"\n      class=\"neon-search\"\n      role=\"listbox\"\n      v-bind=\"sanitizedAttributes\"\n      @dropdown-placement=\"onPlacement\"\n    >\n      <template #dropdown-button>\n        <div\n          ref=\"dropdownButton\"\n          :class=\"[\n            `neon-search__container--${size}`,\n            `neon-search__container--${color}`,\n            { 'neon-search__container--disabled': disabled },\n          ]\"\n          class=\"neon-search__container\"\n        >\n          <neon-icon :disabled=\"disabled\" class=\"neon-search__search-icon\" color=\"low-contrast\" name=\"search\" />\n          <template v-if=\"multiple && Array.isArray(modelValue)\">\n            <neon-chip\n              v-for=\"(selected, index) in modelValue\"\n              :id=\"selected.key\"\n              :key=\"selected.key\"\n              :class=\"{ 'neon-chip--last-chip': index === modelValue.length - 1 }\"\n              :color=\"selected.chipColor\"\n              :disabled=\"disabled\"\n              :label=\"selected.label\"\n              :size=\"size\"\n              action=\"remove\"\n              aria-selected=\"true\"\n              role=\"option\"\n              @close=\"removeSelected(selected)\"\n            />\n          </template>\n          <neon-input\n            :disabled=\"disabled\"\n            :modelValue=\"filter\"\n            :placeholder=\"placeholder\"\n            :size=\"size\"\n            class=\"neon-search__input\"\n            v-bind=\"sanitizedAttributes\"\n            @focus=\"showOptions()\"\n            @keydown.enter.prevent.stop.capture=\"\"\n            @update:modelValue=\"onFilterChange\"\n            @icon-click=\"onFilterChange('')\"\n          />\n        </div>\n      </template>\n      <template #default>\n        <ul class=\"no-style neon-search__options\">\n          <li\n            v-for=\"option in computedOptions\"\n            :id=\"option.key\"\n            :key=\"option.key\"\n            :class=\"[\n              {\n                'neon-search__option--separator-before': option.separatorBefore,\n                'neon-search__option--highlighted': option.key === highlightedKey,\n              },\n              `neon-search__option--${size}`,\n            ]\"\n            aria-selected=\"false\"\n            class=\"neon-search__option\"\n            role=\"option\"\n            @mouseover=\"changeHighlighted(option.key)\"\n            @click.stop.prevent.capture=\"clickOption(option)\"\n            @space.stop.prevent.capture=\"clickOption(option)\"\n            @enter.stop.prevent.capture=\"clickOption(option)\"\n          >\n            <div class=\"neon-search__option-container\">\n              <!-- @slot provide a custom template for an option.<br />Bindings: <strong>option</strong>\n              (<em>NeonSearchOption</em>). This slot is purely for formatting the option, all accessibility actions\n              still apply. -->\n              <slot :option=\"option\" name=\"option\">\n                <neon-icon v-if=\"option.icon\" :name=\"option.icon\" class=\"neon-search__option-icon\" />\n                <span class=\"neon-search__option-label\">{{ option.label }}</span>\n              </slot>\n            </div>\n          </li>\n        </ul>\n      </template>\n    </neon-dropdown>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSearch.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_createVNode","_component_neon_dropdown","_mergeProps","_ctx","$event","_createElementVNode","_normalizeClass","_component_neon_icon","_Fragment","_renderList","selected","index","_createBlock","_component_neon_chip","_component_neon_input","option","_withModifiers","_renderSlot","_toDisplayString"],"mappings":"qIACOA,EAAA,CAAA,MAAM,sBAAsB,EAiEvBC,EAAA,CAAA,MAAM,+BAA+B,4EAoBhCC,EAAA,CAAA,MAAM,+BAA+B,EAMhCC,EAAA,CAAA,MAAM,2BAA2B,6KA3FrD,OAAAC,YAAA,EAAAC,qBAkGM,MAlGNL,EAkGM,CAjGJM,EAAAA,YAgGgBC,EAhGhBC,aAgGgB,CA/Fd,IAAI,sBACKC,EAAA,0CAAAA,EAAA,KAAIC,GACZ,wBAAuBD,EAAA,UAAY,MAAM,QAAQA,EAAA,UAAU,EAAIA,aAAU,CAAA,GAAOA,EAAA,WAAU,CAAA,EAAI,IAAMA,EAAA,WACpG,uBAAsBA,EAAA,SACtB,MAAK,CAAA,iBAA4BA,EAAA,KAAK,4BAAiDA,EAAA,iCAA6CA,EAAA,SAA0C,qBAAAA,EAAA,gBAAgB,SAAM,IAY/L,aAAa,EAJlB,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,UAAWA,EAAA,kBACX,KAAMA,EAAA,KAEP,KAAK,WACGA,EAAA,oBAAmB,CAC1B,oBAAoBA,EAAA,WAAW,CAAA,EAAA,CAErB,4BACT,IAsCM,CAtCNE,EAAAA,mBAsCM,MAAA,CArCJ,IAAI,iBACH,MAAKC,EAAAA,eAAA,CAAA,4BAA2CH,EAAA,IAAI,8BAA2CA,EAAA,KAAK,uCAAsDA,EAAA,QAAQ,GAK7J,wBAAwB,CAAA,IAE9BH,EAAAA,YAAsGO,EAAA,CAA1F,SAAUJ,EAAA,SAAU,MAAM,2BAA2B,MAAM,eAAe,KAAK,+BAC3EA,EAAA,UAAY,MAAM,QAAQA,EAAA,UAAU,GAClDL,EAAAA,UAAA,EAAA,EAAAC,qBAaES,EAAAA,SAAA,CAAA,IAAA,CAAA,EAAAC,EAAAA,WAZ4BN,EAAA,WAAU,CAA9BO,EAAUC,mBADpBC,EAAAA,YAaEC,EAAA,CAXC,GAAIH,EAAS,IACb,IAAKA,EAAS,IACd,MAAKJ,EAAAA,eAAA,CAAA,uBAA4BK,IAAUR,EAAA,WAAW,OAAM,EAAA,EAC5D,MAAOO,EAAS,UAChB,SAAUP,EAAA,SACV,MAAOO,EAAS,MAChB,KAAMP,EAAA,KACP,OAAO,SACP,gBAAc,OACd,KAAK,SACJ,QAAKC,GAAED,EAAA,eAAeO,CAAQ,0GAGnCV,EAAAA,YAWEc,EAXFZ,aAWE,CAVC,SAAUC,EAAA,SACV,WAAYA,EAAA,OACZ,YAAaA,EAAA,YACb,KAAMA,EAAA,KACP,MAAM,sBACEA,EAAA,oBAAmB,CAC1B,uBAAOA,EAAA,YAAW,2DACnB,IAAA,CAAA,EAAsC,CAAA,UAAA,MAAA,CAAA,EAAA,CAAA,OAAA,CAAA,GACrC,sBAAmBA,EAAA,eACnB,2BAAYA,EAAA,eAAc,EAAA,yFAItB,kBACT,IA8BK,CA9BLE,EAAAA,mBA8BK,KA9BLV,EA8BK,kBA7BHI,EAAAA,mBA4BKS,EAAAA,SAAA,KAAAC,EAAAA,WA3BcN,EAAA,gBAAVY,kBADThB,EAAAA,mBA4BK,KAAA,CA1BF,GAAIgB,EAAO,IACX,IAAKA,EAAO,IACZ,MAAKT,EAAAA,eAAA,CAAA,EAA6E,wCAAAS,EAAO,mDAAqEA,EAAO,MAAQZ,EAAA,wCAAuEA,EAAA,IAAI,IAQnP,qBAAqB,CAAA,EAD3B,gBAAc,QAEd,KAAK,SACJ,YAASC,GAAED,EAAA,kBAAkBY,EAAO,GAAG,EACX,eAAAC,EAAAA,cAAAZ,GAAAD,EAAA,YAAYY,CAAM,EAAA,CAAA,OAAA,SAAA,CAAA,EAClB,eAAAC,EAAAA,cAAAZ,GAAAD,EAAA,YAAYY,CAAM,EAAA,CAAA,OAAA,SAAA,CAAA,EAClB,eAAAC,EAAAA,cAAAZ,GAAAD,EAAA,YAAYY,CAAM,EAAA,CAAA,OAAA,SAAA,CAAA,IAE/CV,EAAAA,mBAQM,MARNT,EAQM,CAJJqB,EAAAA,WAGOd,EAAA,OAAA,SAAA,CAHA,OAAQY,CAAM,EAArB,IAGO,CAFYA,EAAO,oBAAxBH,EAAAA,YAAqFL,EAAA,OAAtD,KAAMQ,EAAO,KAAM,MAAM,0EACxDV,EAAAA,mBAAiE,OAAjER,EAAiEqB,EAAAA,gBAAtBH,EAAO,KAAK,EAAA,CAAA"}
+{"version":3,"file":"NeonSearch.vue.cjs.js","sources":["../../../../src/components/user-input/search/NeonSearch.vue"],"sourcesContent":["<template>\n  <div class=\"neon-search__wrapper\">\n    <neon-dropdown\n      ref=\"dropdown\"\n      v-model=\"open\"\n      :aria-activedescendant=\"multiple && Array.isArray(modelValue) ? modelValue[0] && modelValue[0].key : modelValue\"\n      :aria-multiselectable=\"multiple\"\n      :class=\"[\n        `neon-search--${color}`,\n        {\n          'neon-search--multiple': multiple,\n          'neon-search--disabled': disabled,\n          'neon-search--empty': computedOptions.length === 0,\n        },\n      ]\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :placement=\"dropdownPlacement\"\n      :size=\"size\"\n      class=\"neon-search\"\n      role=\"listbox\"\n      v-bind=\"sanitizedAttributes\"\n      @dropdown-placement=\"onPlacement\"\n    >\n      <template #dropdown-button>\n        <div\n          ref=\"dropdownButton\"\n          :class=\"[\n            `neon-search__container--${size}`,\n            `neon-search__container--${color}`,\n            { 'neon-search__container--disabled': disabled },\n          ]\"\n          class=\"neon-search__container\"\n        >\n          <neon-icon :disabled=\"disabled\" class=\"neon-search__search-icon\" color=\"low-contrast\" name=\"search\" />\n          <template v-if=\"multiple && Array.isArray(modelValue)\">\n            <neon-chip\n              v-for=\"(selected, index) in modelValue\"\n              :id=\"selected.key\"\n              :key=\"selected.key\"\n              :class=\"{ 'neon-chip--last-chip': index === modelValue.length - 1 }\"\n              :color=\"selected.chipColor\"\n              :disabled=\"disabled\"\n              :label=\"selected.label\"\n              :size=\"size\"\n              action=\"remove\"\n              aria-selected=\"true\"\n              role=\"option\"\n              @close=\"removeSelected(selected)\"\n            />\n          </template>\n          <neon-input\n            ref=\"searchInput\"\n            :autocomplete=\"autocomplete\"\n            :color=\"color\"\n            :disabled=\"disabled\"\n            :modelValue=\"filter\"\n            :placeholder=\"placeholder\"\n            :size=\"size\"\n            class=\"neon-search__input\"\n            v-bind=\"sanitizedAttributes\"\n            @focus=\"showOptions()\"\n            @keydown.enter.prevent.stop.capture=\"\"\n            @update:modelValue=\"onFilterChange\"\n            @icon-click=\"onFilterChange('')\"\n          />\n        </div>\n      </template>\n      <template #default>\n        <ul class=\"no-style neon-search__options\">\n          <li\n            v-for=\"option in computedOptions\"\n            :id=\"option.key\"\n            :key=\"option.key\"\n            :class=\"[\n              {\n                'neon-search__option--separator-before': option.separatorBefore,\n                'neon-search__option--highlighted': option.key === highlightedKey,\n              },\n              `neon-search__option--${size}`,\n            ]\"\n            aria-selected=\"false\"\n            class=\"neon-search__option\"\n            role=\"option\"\n            tabindex=\"0\"\n            @mouseover=\"changeHighlighted(option.key)\"\n            @click.stop.prevent.capture=\"clickOption(option)\"\n            @space.stop.prevent.capture=\"clickOption(option)\"\n            @enter.stop.prevent.capture=\"clickOption(option)\"\n          >\n            <div class=\"neon-search__option-container\">\n              <!-- @slot provide a custom template for an option.<br />Bindings: <strong>option</strong>\n              (<em>NeonSearchOption</em>). This slot is purely for formatting the option, all accessibility actions\n              still apply. -->\n              <slot :option=\"option\" name=\"option\">\n                <neon-icon v-if=\"option.icon\" :name=\"option.icon\" class=\"neon-search__option-icon\" />\n                <span class=\"neon-search__option-label\">{{ option.label }}</span>\n              </slot>\n            </div>\n          </li>\n        </ul>\n      </template>\n    </neon-dropdown>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSearch.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_createVNode","_component_neon_dropdown","_mergeProps","_ctx","$event","_createElementVNode","_normalizeClass","_component_neon_icon","_Fragment","_renderList","selected","index","_createBlock","_component_neon_chip","_component_neon_input","option","_withModifiers","_renderSlot","_toDisplayString"],"mappings":"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"}

package/dist/components/user-input/search/NeonSearch.vue.es.js

@@ -1,11 +1,11 @@
-import f from "./NeonSearch.es.js";
+import V 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 $, createBlock as v, createCommentVNode as y, toDisplayString as w, withKeys as g } from "vue";
 import z from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const _ = { class: "neon-search__wrapper" }, A = { class: "no-style neon-search__options" }, O = ["id", "onMouseover", "onClickCapture", "onSpaceCapture", "onEnterCapture"], S = { class: "neon-search__option-container" }, B = { class: "neon-search__option-label" };
+const A = { class: "neon-search__wrapper" }, O = { class: "no-style neon-search__options" }, S = ["id", "onMouseover", "onClickCapture", "onSpaceCapture", "onEnterCapture"], _ = { class: "neon-search__option-container" }, B = { class: "neon-search__option-label" };
 function P(e, n, E, F, N, D) {
-  const c = r("neon-icon"), k = r("neon-chip"), C = r("neon-input"), V = r("neon-dropdown");
-  return l(), s("div", _, [
-    d(V, u({
+  const c = r("neon-icon"), k = r("neon-chip"), C = r("neon-input"), f = r("neon-dropdown");
+  return l(), s("div", A, [
+    d(f, u({
       ref: "dropdown",
       modelValue: e.open,
       "onUpdate:modelValue": n[3] || (n[3] = (o) => e.open = o),
@@ -54,6 +54,9 @@ function P(e, n, E, F, N, D) {
             onClose: (K) => e.removeSelected(o)
           }, null, 8, ["id", "class", "color", "disabled", "label", "size", "onClose"]))), 128)) : y("", !0),
           d(C, u({
+            ref: "searchInput",
+            autocomplete: e.autocomplete,
+            color: e.color,
             disabled: e.disabled,
             modelValue: e.filter,
             placeholder: e.placeholder,
@@ -65,11 +68,11 @@ function P(e, n, E, F, N, D) {
             }, ["prevent", "stop"]), ["enter"])),
             "onUpdate:modelValue": e.onFilterChange,
             onIconClick: n[2] || (n[2] = (o) => e.onFilterChange(""))
-          }), null, 16, ["disabled", "modelValue", "placeholder", "size", "onUpdate:modelValue"])
+          }), null, 16, ["autocomplete", "color", "disabled", "modelValue", "placeholder", "size", "onUpdate:modelValue"])
         ], 2)
       ]),
       default: m(() => [
-        i("ul", A, [
+        i("ul", O, [
           (l(!0), s(h, null, b(e.computedOptions, (o) => (l(), s("li", {
             id: o.key,
             key: o.key,
@@ -82,12 +85,13 @@ function P(e, n, E, F, N, D) {
             ], "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", S, [
+            i("div", _, [
               $(e.$slots, "option", { option: o }, () => [
                 o.icon ? (l(), v(c, {
                   key: 0,
@@ -97,15 +101,15 @@ function P(e, n, E, F, N, D) {
                 i("span", B, w(o.label), 1)
               ])
             ])
-          ], 42, O))), 128))
+          ], 42, S))), 128))
         ])
       ]),
       _: 3
     }, 16, ["modelValue", "aria-activedescendant", "aria-multiselectable", "class", "color", "disabled", "placement", "size", "onDropdownPlacement"])
   ]);
 }
-const I = /* @__PURE__ */ z(f, [["render", P]]);
+const H = /* @__PURE__ */ z(V, [["render", P]]);
 export {
-  I as default
+  H as default
 };
 //# sourceMappingURL=NeonSearch.vue.es.js.map

package/dist/components/user-input/search/NeonSearch.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonSearch.vue.es.js","sources":["../../../../src/components/user-input/search/NeonSearch.vue"],"sourcesContent":["<template>\n  <div class=\"neon-search__wrapper\">\n    <neon-dropdown\n      ref=\"dropdown\"\n      v-model=\"open\"\n      :aria-activedescendant=\"multiple && Array.isArray(modelValue) ? modelValue[0] && modelValue[0].key : modelValue\"\n      :aria-multiselectable=\"multiple\"\n      :class=\"[\n        `neon-search--${color}`,\n        {\n          'neon-search--multiple': multiple,\n          'neon-search--disabled': disabled,\n          'neon-search--empty': computedOptions.length === 0,\n        },\n      ]\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :placement=\"dropdownPlacement\"\n      :size=\"size\"\n      class=\"neon-search\"\n      role=\"listbox\"\n      v-bind=\"sanitizedAttributes\"\n      @dropdown-placement=\"onPlacement\"\n    >\n      <template #dropdown-button>\n        <div\n          ref=\"dropdownButton\"\n          :class=\"[\n            `neon-search__container--${size}`,\n            `neon-search__container--${color}`,\n            { 'neon-search__container--disabled': disabled },\n          ]\"\n          class=\"neon-search__container\"\n        >\n          <neon-icon :disabled=\"disabled\" class=\"neon-search__search-icon\" color=\"low-contrast\" name=\"search\" />\n          <template v-if=\"multiple && Array.isArray(modelValue)\">\n            <neon-chip\n              v-for=\"(selected, index) in modelValue\"\n              :id=\"selected.key\"\n              :key=\"selected.key\"\n              :class=\"{ 'neon-chip--last-chip': index === modelValue.length - 1 }\"\n              :color=\"selected.chipColor\"\n              :disabled=\"disabled\"\n              :label=\"selected.label\"\n              :size=\"size\"\n              action=\"remove\"\n              aria-selected=\"true\"\n              role=\"option\"\n              @close=\"removeSelected(selected)\"\n            />\n          </template>\n          <neon-input\n            :disabled=\"disabled\"\n            :modelValue=\"filter\"\n            :placeholder=\"placeholder\"\n            :size=\"size\"\n            class=\"neon-search__input\"\n            v-bind=\"sanitizedAttributes\"\n            @focus=\"showOptions()\"\n            @keydown.enter.prevent.stop.capture=\"\"\n            @update:modelValue=\"onFilterChange\"\n            @icon-click=\"onFilterChange('')\"\n          />\n        </div>\n      </template>\n      <template #default>\n        <ul class=\"no-style neon-search__options\">\n          <li\n            v-for=\"option in computedOptions\"\n            :id=\"option.key\"\n            :key=\"option.key\"\n            :class=\"[\n              {\n                'neon-search__option--separator-before': option.separatorBefore,\n                'neon-search__option--highlighted': option.key === highlightedKey,\n              },\n              `neon-search__option--${size}`,\n            ]\"\n            aria-selected=\"false\"\n            class=\"neon-search__option\"\n            role=\"option\"\n            @mouseover=\"changeHighlighted(option.key)\"\n            @click.stop.prevent.capture=\"clickOption(option)\"\n            @space.stop.prevent.capture=\"clickOption(option)\"\n            @enter.stop.prevent.capture=\"clickOption(option)\"\n          >\n            <div class=\"neon-search__option-container\">\n              <!-- @slot provide a custom template for an option.<br />Bindings: <strong>option</strong>\n              (<em>NeonSearchOption</em>). This slot is purely for formatting the option, all accessibility actions\n              still apply. -->\n              <slot :option=\"option\" name=\"option\">\n                <neon-icon v-if=\"option.icon\" :name=\"option.icon\" class=\"neon-search__option-icon\" />\n                <span class=\"neon-search__option-label\">{{ option.label }}</span>\n              </slot>\n            </div>\n          </li>\n        </ul>\n      </template>\n    </neon-dropdown>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSearch.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_createVNode","_component_neon_dropdown","_mergeProps","_ctx","$event","_createElementVNode","_normalizeClass","_component_neon_icon","_Fragment","_renderList","selected","index","_createBlock","_component_neon_chip","_component_neon_input","option","_withModifiers","_renderSlot","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"NeonSearch.vue.es.js","sources":["../../../../src/components/user-input/search/NeonSearch.vue"],"sourcesContent":["<template>\n  <div class=\"neon-search__wrapper\">\n    <neon-dropdown\n      ref=\"dropdown\"\n      v-model=\"open\"\n      :aria-activedescendant=\"multiple && Array.isArray(modelValue) ? modelValue[0] && modelValue[0].key : modelValue\"\n      :aria-multiselectable=\"multiple\"\n      :class=\"[\n        `neon-search--${color}`,\n        {\n          'neon-search--multiple': multiple,\n          'neon-search--disabled': disabled,\n          'neon-search--empty': computedOptions.length === 0,\n        },\n      ]\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :placement=\"dropdownPlacement\"\n      :size=\"size\"\n      class=\"neon-search\"\n      role=\"listbox\"\n      v-bind=\"sanitizedAttributes\"\n      @dropdown-placement=\"onPlacement\"\n    >\n      <template #dropdown-button>\n        <div\n          ref=\"dropdownButton\"\n          :class=\"[\n            `neon-search__container--${size}`,\n            `neon-search__container--${color}`,\n            { 'neon-search__container--disabled': disabled },\n          ]\"\n          class=\"neon-search__container\"\n        >\n          <neon-icon :disabled=\"disabled\" class=\"neon-search__search-icon\" color=\"low-contrast\" name=\"search\" />\n          <template v-if=\"multiple && Array.isArray(modelValue)\">\n            <neon-chip\n              v-for=\"(selected, index) in modelValue\"\n              :id=\"selected.key\"\n              :key=\"selected.key\"\n              :class=\"{ 'neon-chip--last-chip': index === modelValue.length - 1 }\"\n              :color=\"selected.chipColor\"\n              :disabled=\"disabled\"\n              :label=\"selected.label\"\n              :size=\"size\"\n              action=\"remove\"\n              aria-selected=\"true\"\n              role=\"option\"\n              @close=\"removeSelected(selected)\"\n            />\n          </template>\n          <neon-input\n            ref=\"searchInput\"\n            :autocomplete=\"autocomplete\"\n            :color=\"color\"\n            :disabled=\"disabled\"\n            :modelValue=\"filter\"\n            :placeholder=\"placeholder\"\n            :size=\"size\"\n            class=\"neon-search__input\"\n            v-bind=\"sanitizedAttributes\"\n            @focus=\"showOptions()\"\n            @keydown.enter.prevent.stop.capture=\"\"\n            @update:modelValue=\"onFilterChange\"\n            @icon-click=\"onFilterChange('')\"\n          />\n        </div>\n      </template>\n      <template #default>\n        <ul class=\"no-style neon-search__options\">\n          <li\n            v-for=\"option in computedOptions\"\n            :id=\"option.key\"\n            :key=\"option.key\"\n            :class=\"[\n              {\n                'neon-search__option--separator-before': option.separatorBefore,\n                'neon-search__option--highlighted': option.key === highlightedKey,\n              },\n              `neon-search__option--${size}`,\n            ]\"\n            aria-selected=\"false\"\n            class=\"neon-search__option\"\n            role=\"option\"\n            tabindex=\"0\"\n            @mouseover=\"changeHighlighted(option.key)\"\n            @click.stop.prevent.capture=\"clickOption(option)\"\n            @space.stop.prevent.capture=\"clickOption(option)\"\n            @enter.stop.prevent.capture=\"clickOption(option)\"\n          >\n            <div class=\"neon-search__option-container\">\n              <!-- @slot provide a custom template for an option.<br />Bindings: <strong>option</strong>\n              (<em>NeonSearchOption</em>). This slot is purely for formatting the option, all accessibility actions\n              still apply. -->\n              <slot :option=\"option\" name=\"option\">\n                <neon-icon v-if=\"option.icon\" :name=\"option.icon\" class=\"neon-search__option-icon\" />\n                <span class=\"neon-search__option-label\">{{ option.label }}</span>\n              </slot>\n            </div>\n          </li>\n        </ul>\n      </template>\n    </neon-dropdown>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSearch.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_createVNode","_component_neon_dropdown","_mergeProps","_ctx","$event","_createElementVNode","_normalizeClass","_component_neon_icon","_Fragment","_renderList","selected","index","_createBlock","_component_neon_chip","_component_neon_input","option","_withModifiers","_renderSlot","_toDisplayString"],"mappings":"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"}

package/dist/components/user-input/select/NeonSelect.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),D=require("../../../common/enums/NeonSize.cjs.js"),I=require("../../../common/enums/NeonFunctionalColor.cjs.js"),x=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),L=require("../switch/NeonSwitch.vue.cjs.js"),c=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),z=require("../../../common/utils/NeonScrollUtils.cjs.js"),K=n.defineComponent({name:"NeonSelect",components:{NeonDropdown:x,NeonIcon:B,NeonSwitch:L},props:{id:{type:String},placeholder:{type:String,required:!0},placeholderAsOption:{type:Boolean,default:!1},placeholderIcon:{type:String,required:!1},options:{type:Array,required:!1},groupedOptions:{type:Array,required:!1},modelValue:{type:[String,Array],required:!0},multiple:{type:Boolean,default:!1},multiselectPlaceholder:{type:String,required:!1},disabled:{type:Boolean,default:!1},size:{type:String,default:D.NeonSize.Medium},color:{type:String,default:I.NeonFunctionalColor.Primary},placement:{type:String,default:c.NeonDropdownPlacement.BottomLeft}},emits:["update:modelValue"],setup(t,{emit:h}){const w=n.useAttrs(),m=n.ref(null),i=n.ref(!1),y=n.ref(t.placement),s=n.ref(null),u=n.ref(-1),o=n.computed(()=>{var e;return t.options?t.options:t.groupedOptions?(e=t.groupedOptions)==null?void 0:e.flatMap(l=>l.options):[]}),k=()=>{if(!t.groupedOptions)switch(y.value){case c.NeonDropdownPlacement.TopLeft:case c.NeonDropdownPlacement.TopRight:case c.NeonDropdownPlacement.LeftBottom:case c.NeonDropdownPlacement.RightBottom:return!0}return!1},N=()=>{var l;const e=(l=m.value)==null?void 0:l.querySelector(".neon-select__option--highlighted");e&&z.NeonScrollUtils.scrollIntoView(e)},p=(e,l)=>{const a=u.value+e;a>=0&&a<=o.value.length-1&&(u.value=a,s.value=o.value[u.value].key,l.preventDefault(),setTimeout(N))},d=e=>{h("update:modelValue",e)},v=e=>{if(t.multiple){const l=[...t.modelValue],a=l.findIndex(f=>f===e.key);a>=0?l.splice(a,1):l.push(e.key),d(l)}else t.modelValue!==e.key&&(i.value=!1,d(e.key))},g=e=>{if(i.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const l=k()?-1:1;e.code==="ArrowUp"?p(-1*l,e):p(1*l,e)}break;case"Enter":case"Space":o.value[u.value].disabled||(v(o.value[u.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(i.value=!1);break}},S=n.computed(()=>t.groupedOptions||[{group:"",options:t.options||[]}]),q=n.computed(()=>{const{...e}=w;return e}),V=n.computed(()=>{if(t.multiple&&t.modelValue.length>0){if(t.multiselectPlaceholder)return t.multiselectPlaceholder;if(t.modelValue.length>1)return`${t.modelValue.length} items selected`;{const e=o.value.find(l=>l.key===t.modelValue[0]);return(e==null?void 0:e.label)||""}}else if(t.modelValue){const e=o.value.find(l=>l.key===t.modelValue);if(e)return e.label}return t.placeholder}),O=n.computed(()=>{if(t.modelValue){const e=o.value.find(l=>l.key===t.modelValue);if(e)return e.icon}return t.placeholderIcon}),P=e=>{const l=Array.from(e.target.options).filter(r=>r.selected).map(r=>r.value),a=o.value.filter(r=>l.indexOf(r.key)>=0),f=t.multiple?a.map(r=>r.key):a[0].key;d(f)},b=e=>{s.value=e,u.value=o.value.findIndex(l=>l.key===e)},A=e=>{y.value=e};return n.onMounted(()=>{document.addEventListener("keydown",g)}),n.onUnmounted(()=>{document.removeEventListener("keydown",g)}),n.watch(()=>i.value,e=>{e&&(s.value=o.value[0].key,u.value=0)}),{dropdown:m,open:i,highlightedKey:s,highlightedIndex:u,flattenedOptions:o,computedLabel:V,sanitizedAttributes:q,computedOptions:S,computedIcon:O,clickOption:v,nativeSelectChange:P,changeHighlighted:b,onPlacement:A}}});module.exports=K;
+"use strict";const n=require("vue"),D=require("../../../common/enums/NeonSize.cjs.js"),I=require("../../../common/enums/NeonFunctionalColor.cjs.js"),x=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),L=require("../switch/NeonSwitch.vue.cjs.js"),c=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),z=require("../../../common/utils/NeonScrollUtils.cjs.js"),C=n.defineComponent({name:"NeonSelect",components:{NeonDropdown:x,NeonIcon:B,NeonSwitch:L},props:{id:{type:String},placeholder:{type:String,required:!0},placeholderAsOption:{type:Boolean,default:!1},placeholderIcon:{type:String,required:!1},options:{type:Array,required:!1},groupedOptions:{type:Array,required:!1},modelValue:{type:[String,Array],required:!0},multiple:{type:Boolean,default:!1},multiselectPlaceholder:{type:String,required:!1},disabled:{type:Boolean,default:!1},size:{type:String,default:D.NeonSize.Medium},color:{type:String,default:I.NeonFunctionalColor.Primary},placement:{type:String,default:c.NeonDropdownPlacement.BottomLeft}},emits:["update:modelValue"],setup(l,{emit:v}){const w=n.useAttrs(),y=n.ref(null),i=n.ref(!1),p=n.ref(l.placement),s=n.ref(null),u=n.ref(-1),a=n.computed(()=>{var e;return l.options?l.options:l.groupedOptions?(e=l.groupedOptions)==null?void 0:e.flatMap(t=>t.options):[]}),k=()=>{if(!l.groupedOptions)switch(p.value){case c.NeonDropdownPlacement.TopLeft:case c.NeonDropdownPlacement.TopRight:case c.NeonDropdownPlacement.LeftBottom:case c.NeonDropdownPlacement.RightBottom:return!0}return!1},N=()=>{var t,o;const e=(o=(t=y.value)==null?void 0:t.dropdownContent)==null?void 0:o.querySelector(".neon-select__option--highlighted");e&&(e.focus(),z.NeonScrollUtils.scrollIntoView(e))},d=(e,t)=>{const o=u.value+e;o>=0&&o<=a.value.length-1&&(u.value=o,s.value=a.value[u.value].key,t==null||t.preventDefault(),setTimeout(N))},f=e=>{v("update:modelValue",e)},g=e=>{if(l.multiple){const t=[...l.modelValue],o=t.findIndex(m=>m===e.key);o>=0?t.splice(o,1):t.push(e.key),f(t)}else l.modelValue!==e.key&&(i.value=!1,f(e.key))},h=e=>{if(i.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const t=k()?-1:1;e.code==="ArrowUp"?d(-1*t,e):d(1*t,e)}break;case"Enter":case"Space":a.value[u.value].disabled||(g(a.value[u.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(i.value=!1);break}},S=n.computed(()=>l.groupedOptions||[{group:"",options:l.options||[]}]),q=n.computed(()=>{const{...e}=w;return e}),V=n.computed(()=>{if(l.multiple&&l.modelValue.length>0){if(l.multiselectPlaceholder)return l.multiselectPlaceholder;if(l.modelValue.length>1)return`${l.modelValue.length} items selected`;{const e=a.value.find(t=>t.key===l.modelValue[0]);return(e==null?void 0:e.label)||""}}else if(l.modelValue){const e=a.value.find(t=>t.key===l.modelValue);if(e)return e.label}return l.placeholder}),O=n.computed(()=>{if(l.modelValue){const e=a.value.find(t=>t.key===l.modelValue);if(e)return e.icon}return l.placeholderIcon}),P=e=>{const t=Array.from(e.target.options).filter(r=>r.selected).map(r=>r.value),o=a.value.filter(r=>t.indexOf(r.key)>=0),m=l.multiple?o.map(r=>r.key):o[0].key;f(m)},b=e=>{s.value=e,u.value=a.value.findIndex(t=>t.key===e)},A=e=>{p.value=e};return n.onMounted(()=>{document.addEventListener("keydown",h)}),n.onUnmounted(()=>{document.removeEventListener("keydown",h)}),n.watch(()=>i.value,e=>{e&&(s.value=a.value[0].key,u.value=0,d(u.value))}),{dropdown:y,open:i,highlightedKey:s,highlightedIndex:u,flattenedOptions:a,computedLabel:V,sanitizedAttributes:q,computedOptions:S,computedIcon:O,clickOption:g,nativeSelectChange:P,changeHighlighted:b,onPlacement:A}}});module.exports=C;
 //# sourceMappingURL=NeonSelect.cjs.js.map

package/dist/components/user-input/select/NeonSelect.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonSelect.cjs.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonSelectGroup } from '@/common/models/NeonSelectGroup';\nimport type { NeonSelectOption } from '@/common/models/NeonSelectOption';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonSwitch from '@/components/user-input/switch/NeonSwitch.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/**\n * <p>The <strong>NeonSelect</strong> is the equivalent of an HTML &lt;select&gt; form control. On touch devices\n * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n */\nexport default defineComponent({\n  name: 'NeonSelect',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonSwitch,\n  },\n  props: {\n    /**\n     * Id for the dropdown button\n     */\n    id: { type: String },\n    /**\n     * Placeholder to display as button label when there is no option selected.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.\n     */\n    placeholderAsOption: { type: Boolean, default: false },\n    /**\n     * Optional placeholder icon.\n     */\n    placeholderIcon: { type: String, required: false },\n    /**\n     * A list of options to render in the select.\n     */\n    options: { type: Array as () => Array<NeonSelectOption>, required: false },\n    /**\n     * A list of grouped options to render in the select.\n     */\n    groupedOptions: { type: Array as () => Array<NeonSelectGroup>, required: false },\n    /**\n     * Either a single string, indicating the key of the selected option or an array of selected keys in the case\n     * multiple = true.\n     */\n    modelValue: { type: [String, Array as () => Array<string>], required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Placeholder when multiple values are selected.\n     */\n    multiselectPlaceholder: { type: String, required: false },\n    /**\n     * Disable the select\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the select.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys\n     * (multi-select).\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<HTMLElement | null>(null);\n\n    const open = ref(false);\n    const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const flattenedOptions = computed((): NeonSelectOption[] => {\n      if (props.options) {\n        return props.options;\n      } else if (props.groupedOptions) {\n        return props.groupedOptions?.flatMap((group) => group.options);\n      }\n      return [];\n    });\n\n    const isReverse = () => {\n      if (!props.groupedOptions) {\n        switch (dropdownPlacement.value) {\n          case NeonDropdownPlacement.TopLeft:\n          case NeonDropdownPlacement.TopRight:\n          case NeonDropdownPlacement.LeftBottom:\n          case NeonDropdownPlacement.RightBottom:\n            return true;\n        }\n      }\n\n      return false;\n    };\n\n    const scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-select__option--highlighted') as HTMLElement;\n\n      if (element) {\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= flattenedOptions.value.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = flattenedOptions.value[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(scrollOnNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | string[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const clickOption = (option: NeonSelectOption) => {\n      if (props.multiple) {\n        const values = [...props.modelValue];\n        const index = values.findIndex((v) => v === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option.key);\n        }\n        emitInputEvent(values);\n      } else if (props.modelValue !== option.key) {\n        open.value = false;\n        emitInputEvent(option.key);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (open.value) {\n        switch ($event.code) {\n          case 'ArrowUp':\n          case 'ArrowDown':\n            {\n              const reverseOffset = isReverse() ? -1 : 1;\n              if ($event.code === 'ArrowUp') {\n                navigateBy(-1 * reverseOffset, $event);\n              } else {\n                navigateBy(1 * reverseOffset, $event);\n              }\n            }\n            break;\n          case 'Enter':\n          case 'Space':\n            if (!flattenedOptions.value[highlightedIndex.value].disabled) {\n              clickOption(flattenedOptions.value[highlightedIndex.value]);\n              $event.preventDefault();\n            }\n            break;\n          case 'Tab':\n            if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n              open.value = false;\n            }\n            break;\n        }\n      }\n    };\n\n    const computedOptions = computed((): Array<NeonSelectGroup> => {\n      return (\n        props.groupedOptions || [\n          {\n            group: '',\n            options: props.options || [],\n          },\n        ]\n      );\n    });\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const computedLabel = computed(() => {\n      if (props.multiple && props.modelValue.length > 0) {\n        if (props.multiselectPlaceholder) {\n          return props.multiselectPlaceholder;\n        } else if (props.modelValue.length > 1) {\n          return `${props.modelValue.length} items selected`;\n        } else {\n          const selected = flattenedOptions.value.find((option) => option.key === props.modelValue[0]);\n          return selected?.label || '';\n        }\n      } else if (props.modelValue) {\n        const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n        if (selected) {\n          return selected.label;\n        }\n      }\n\n      return props.placeholder;\n    });\n\n    const computedIcon = computed(() => {\n      if (props.modelValue) {\n        const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n        if (selected) {\n          return selected.icon;\n        }\n      }\n\n      return props.placeholderIcon;\n    });\n\n    const nativeSelectChange = (event: Event) => {\n      const selectedKeys = Array.from((event.target as HTMLSelectElement).options)\n        .filter((opt) => opt.selected)\n        .map((opt) => opt.value);\n      const selectedOptions = flattenedOptions.value.filter((v) => selectedKeys.indexOf(v.key) >= 0);\n      const value = props.multiple ? selectedOptions.map((value) => value.key) : selectedOptions[0].key;\n      emitInputEvent(value);\n    };\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = flattenedOptions.value.findIndex((opt) => opt.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open) {\n          highlightedKey.value = flattenedOptions.value[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      flattenedOptions,\n      computedLabel,\n      sanitizedAttributes,\n      computedOptions,\n      computedIcon,\n      clickOption,\n      nativeSelectChange,\n      changeHighlighted,\n      onPlacement,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonSwitch","NeonSize","NeonFunctionalColor","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","open","dropdownPlacement","highlightedKey","highlightedIndex","flattenedOptions","computed","_a","group","isReverse","scrollOnNavigate","element","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","clickOption","option","values","index","v","keyboardHandler","reverseOffset","computedOptions","sanitizedAttributes","sanitized","computedLabel","selected","computedIcon","nativeSelectChange","event","selectedKeys","opt","selectedOptions","changeHighlighted","key","onPlacement","placement","onMounted","onUnmounted","watch"],"mappings":"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"}
+{"version":3,"file":"NeonSelect.cjs.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonSelectGroup } from '@/common/models/NeonSelectGroup';\nimport type { NeonSelectOption } from '@/common/models/NeonSelectOption';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonSwitch from '@/components/user-input/switch/NeonSwitch.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/**\n * <p>The <strong>NeonSelect</strong> is the equivalent of an HTML &lt;select&gt; form control. On touch devices\n * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n */\nexport default defineComponent({\n  name: 'NeonSelect',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonSwitch,\n  },\n  props: {\n    /**\n     * Id for the dropdown button\n     */\n    id: { type: String },\n    /**\n     * Placeholder to display as button label when there is no option selected.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.\n     */\n    placeholderAsOption: { type: Boolean, default: false },\n    /**\n     * Optional placeholder icon.\n     */\n    placeholderIcon: { type: String, required: false },\n    /**\n     * A list of options to render in the select.\n     */\n    options: { type: Array as () => Array<NeonSelectOption>, required: false },\n    /**\n     * A list of grouped options to render in the select.\n     */\n    groupedOptions: { type: Array as () => Array<NeonSelectGroup>, required: false },\n    /**\n     * Either a single string, indicating the key of the selected option or an array of selected keys in the case\n     * multiple = true.\n     */\n    modelValue: { type: [String, Array as () => Array<string>], required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Placeholder when multiple values are selected.\n     */\n    multiselectPlaceholder: { type: String, required: false },\n    /**\n     * Disable the select\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the select.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys\n     * (multi-select).\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<InstanceType<typeof NeonDropdown> | null>(null);\n\n    const open = ref(false);\n    const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const flattenedOptions = computed((): NeonSelectOption[] => {\n      if (props.options) {\n        return props.options;\n      } else if (props.groupedOptions) {\n        return props.groupedOptions?.flatMap((group) => group.options);\n      }\n      return [];\n    });\n\n    const isReverse = () => {\n      if (!props.groupedOptions) {\n        switch (dropdownPlacement.value) {\n          case NeonDropdownPlacement.TopLeft:\n          case NeonDropdownPlacement.TopRight:\n          case NeonDropdownPlacement.LeftBottom:\n          case NeonDropdownPlacement.RightBottom:\n            return true;\n        }\n      }\n\n      return false;\n    };\n\n    const onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-select__option--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n    const navigateBy = (offset: number, $event?: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= flattenedOptions.value.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = flattenedOptions.value[highlightedIndex.value].key;\n        $event?.preventDefault();\n        setTimeout(onNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | string[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const clickOption = (option: NeonSelectOption) => {\n      if (props.multiple) {\n        const values = [...props.modelValue];\n        const index = values.findIndex((v) => v === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option.key);\n        }\n        emitInputEvent(values);\n      } else if (props.modelValue !== option.key) {\n        open.value = false;\n        emitInputEvent(option.key);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (open.value) {\n        switch ($event.code) {\n          case 'ArrowUp':\n          case 'ArrowDown':\n            {\n              const reverseOffset = isReverse() ? -1 : 1;\n              if ($event.code === 'ArrowUp') {\n                navigateBy(-1 * reverseOffset, $event);\n              } else {\n                navigateBy(1 * reverseOffset, $event);\n              }\n            }\n            break;\n          case 'Enter':\n          case 'Space':\n            if (!flattenedOptions.value[highlightedIndex.value].disabled) {\n              clickOption(flattenedOptions.value[highlightedIndex.value]);\n              $event.preventDefault();\n            }\n            break;\n          case 'Tab':\n            if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n              open.value = false;\n            }\n            break;\n        }\n      }\n    };\n\n    const computedOptions = computed((): Array<NeonSelectGroup> => {\n      return (\n        props.groupedOptions || [\n          {\n            group: '',\n            options: props.options || [],\n          },\n        ]\n      );\n    });\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const computedLabel = computed(() => {\n      if (props.multiple && props.modelValue.length > 0) {\n        if (props.multiselectPlaceholder) {\n          return props.multiselectPlaceholder;\n        } else if (props.modelValue.length > 1) {\n          return `${props.modelValue.length} items selected`;\n        } else {\n          const selected = flattenedOptions.value.find((option) => option.key === props.modelValue[0]);\n          return selected?.label || '';\n        }\n      } else if (props.modelValue) {\n        const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n        if (selected) {\n          return selected.label;\n        }\n      }\n\n      return props.placeholder;\n    });\n\n    const computedIcon = computed(() => {\n      if (props.modelValue) {\n        const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n        if (selected) {\n          return selected.icon;\n        }\n      }\n\n      return props.placeholderIcon;\n    });\n\n    const nativeSelectChange = (event: Event) => {\n      const selectedKeys = Array.from((event.target as HTMLSelectElement).options)\n        .filter((opt) => opt.selected)\n        .map((opt) => opt.value);\n      const selectedOptions = flattenedOptions.value.filter((v) => selectedKeys.indexOf(v.key) >= 0);\n      const value = props.multiple ? selectedOptions.map((value) => value.key) : selectedOptions[0].key;\n      emitInputEvent(value);\n    };\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = flattenedOptions.value.findIndex((opt) => opt.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open) {\n          highlightedKey.value = flattenedOptions.value[0].key;\n          highlightedIndex.value = 0;\n          navigateBy(highlightedIndex.value);\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      flattenedOptions,\n      computedLabel,\n      sanitizedAttributes,\n      computedOptions,\n      computedIcon,\n      clickOption,\n      nativeSelectChange,\n      changeHighlighted,\n      onPlacement,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonSwitch","NeonSize","NeonFunctionalColor","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","open","dropdownPlacement","highlightedKey","highlightedIndex","flattenedOptions","computed","_a","group","isReverse","onNavigate","element","_b","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","clickOption","option","values","index","v","keyboardHandler","reverseOffset","computedOptions","sanitizedAttributes","sanitized","computedLabel","selected","computedIcon","nativeSelectChange","event","selectedKeys","opt","selectedOptions","changeHighlighted","key","onPlacement","placement","onMounted","onUnmounted","watch"],"mappings":"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"}

package/dist/components/user-input/select/NeonSelect.es.js

@@ -1,17 +1,17 @@
-import { defineComponent as B, useAttrs as P, ref as u, computed as c, onMounted as L, onUnmounted as D, watch as K } from "vue";
+import { defineComponent as B, useAttrs as P, ref as r, computed as c, onMounted as L, onUnmounted as D, watch as K } from "vue";
 import { NeonSize as z } from "../../../common/enums/NeonSize.es.js";
-import { NeonFunctionalColor as E } from "../../../common/enums/NeonFunctionalColor.es.js";
-import T from "../../presentation/dropdown/NeonDropdown.vue.es.js";
-import U from "../../presentation/icon/NeonIcon.vue.es.js";
-import _ from "../switch/NeonSwitch.vue.es.js";
+import { NeonFunctionalColor as C } from "../../../common/enums/NeonFunctionalColor.es.js";
+import E from "../../presentation/dropdown/NeonDropdown.vue.es.js";
+import T from "../../presentation/icon/NeonIcon.vue.es.js";
+import U from "../switch/NeonSwitch.vue.es.js";
 import { NeonDropdownPlacement as d } from "../../../common/enums/NeonDropdownPlacement.es.js";
-import { NeonScrollUtils as C } from "../../../common/utils/NeonScrollUtils.es.js";
+import { NeonScrollUtils as _ } from "../../../common/utils/NeonScrollUtils.es.js";
 const W = B({
   name: "NeonSelect",
   components: {
-    NeonDropdown: T,
-    NeonIcon: U,
-    NeonSwitch: _
+    NeonDropdown: E,
+    NeonIcon: T,
+    NeonSwitch: U
   },
   props: {
     /**
@@ -62,7 +62,7 @@ const W = B({
     /**
      * The color of the select.
      */
-    color: { type: String, default: E.Primary },
+    color: { type: String, default: C.Primary },
     /**
      * Placement of the dropdown contents.
      */
@@ -76,13 +76,13 @@ const W = B({
      */
     "update:modelValue"
   ],
-  setup(t, { emit: k }) {
-    const w = P(), y = u(null), r = u(!1), p = u(t.placement), s = u(null), a = u(-1), n = c(() => {
+  setup(l, { emit: k }) {
+    const w = P(), p = r(null), u = r(!1), g = r(l.placement), s = r(null), a = r(-1), n = c(() => {
       var e;
-      return t.options ? t.options : t.groupedOptions ? (e = t.groupedOptions) == null ? void 0 : e.flatMap((l) => l.options) : [];
+      return l.options ? l.options : l.groupedOptions ? (e = l.groupedOptions) == null ? void 0 : e.flatMap((t) => t.options) : [];
     }), S = () => {
-      if (!t.groupedOptions)
-        switch (p.value) {
+      if (!l.groupedOptions)
+        switch (g.value) {
           case d.TopLeft:
           case d.TopRight:
           case d.LeftBottom:
@@ -91,88 +91,90 @@ const W = B({
         }
       return !1;
     }, V = () => {
-      var l;
-      const e = (l = y.value) == null ? void 0 : l.querySelector(".neon-select__option--highlighted");
-      e && C.scrollIntoView(e);
-    }, v = (e, l) => {
+      var t, o;
+      const e = (o = (t = p.value) == null ? void 0 : t.dropdownContent) == null ? void 0 : o.querySelector(
+        ".neon-select__option--highlighted"
+      );
+      e && (e.focus(), _.scrollIntoView(e));
+    }, f = (e, t) => {
       const o = a.value + e;
-      o >= 0 && o <= n.value.length - 1 && (a.value = o, s.value = n.value[a.value].key, l.preventDefault(), setTimeout(V));
-    }, f = (e) => {
+      o >= 0 && o <= n.value.length - 1 && (a.value = o, s.value = n.value[a.value].key, t == null || t.preventDefault(), setTimeout(V));
+    }, m = (e) => {
       k("update:modelValue", e);
-    }, g = (e) => {
-      if (t.multiple) {
-        const l = [...t.modelValue], o = l.findIndex((m) => m === e.key);
-        o >= 0 ? l.splice(o, 1) : l.push(e.key), f(l);
-      } else t.modelValue !== e.key && (r.value = !1, f(e.key));
     }, h = (e) => {
-      if (r.value)
+      if (l.multiple) {
+        const t = [...l.modelValue], o = t.findIndex((y) => y === e.key);
+        o >= 0 ? t.splice(o, 1) : t.push(e.key), m(t);
+      } else l.modelValue !== e.key && (u.value = !1, m(e.key));
+    }, v = (e) => {
+      if (u.value)
         switch (e.code) {
           case "ArrowUp":
           case "ArrowDown":
             {
-              const l = S() ? -1 : 1;
-              e.code === "ArrowUp" ? v(-1 * l, e) : v(1 * l, e);
+              const t = S() ? -1 : 1;
+              e.code === "ArrowUp" ? f(-1 * t, e) : f(1 * t, e);
             }
             break;
           case "Enter":
           case "Space":
-            n.value[a.value].disabled || (g(n.value[a.value]), e.preventDefault());
+            n.value[a.value].disabled || (h(n.value[a.value]), e.preventDefault());
             break;
           case "Tab":
-            !e.ctrlKey && !e.metaKey && !e.altKey && (r.value = !1);
+            !e.ctrlKey && !e.metaKey && !e.altKey && (u.value = !1);
             break;
         }
-    }, O = c(() => t.groupedOptions || [
+    }, O = c(() => l.groupedOptions || [
       {
         group: "",
-        options: t.options || []
+        options: l.options || []
       }
     ]), b = c(() => {
       const { ...e } = w;
       return e;
     }), A = c(() => {
-      if (t.multiple && t.modelValue.length > 0) {
-        if (t.multiselectPlaceholder)
-          return t.multiselectPlaceholder;
-        if (t.modelValue.length > 1)
-          return `${t.modelValue.length} items selected`;
+      if (l.multiple && l.modelValue.length > 0) {
+        if (l.multiselectPlaceholder)
+          return l.multiselectPlaceholder;
+        if (l.modelValue.length > 1)
+          return `${l.modelValue.length} items selected`;
         {
-          const e = n.value.find((l) => l.key === t.modelValue[0]);
+          const e = n.value.find((t) => t.key === l.modelValue[0]);
           return (e == null ? void 0 : e.label) || "";
         }
-      } else if (t.modelValue) {
-        const e = n.value.find((l) => l.key === t.modelValue);
+      } else if (l.modelValue) {
+        const e = n.value.find((t) => t.key === l.modelValue);
         if (e)
           return e.label;
       }
-      return t.placeholder;
+      return l.placeholder;
     }), I = c(() => {
-      if (t.modelValue) {
-        const e = n.value.find((l) => l.key === t.modelValue);
+      if (l.modelValue) {
+        const e = n.value.find((t) => t.key === l.modelValue);
         if (e)
           return e.icon;
       }
-      return t.placeholderIcon;
+      return l.placeholderIcon;
     }), N = (e) => {
-      const l = Array.from(e.target.options).filter((i) => i.selected).map((i) => i.value), o = n.value.filter((i) => l.indexOf(i.key) >= 0), m = t.multiple ? o.map((i) => i.key) : o[0].key;
-      f(m);
+      const t = Array.from(e.target.options).filter((i) => i.selected).map((i) => i.value), o = n.value.filter((i) => t.indexOf(i.key) >= 0), y = l.multiple ? o.map((i) => i.key) : o[0].key;
+      m(y);
     }, q = (e) => {
-      s.value = e, a.value = n.value.findIndex((l) => l.key === e);
+      s.value = e, a.value = n.value.findIndex((t) => t.key === e);
     }, x = (e) => {
-      p.value = e;
+      g.value = e;
     };
     return L(() => {
-      document.addEventListener("keydown", h);
+      document.addEventListener("keydown", v);
     }), D(() => {
-      document.removeEventListener("keydown", h);
+      document.removeEventListener("keydown", v);
     }), K(
-      () => r.value,
+      () => u.value,
       (e) => {
-        e && (s.value = n.value[0].key, a.value = 0);
+        e && (s.value = n.value[0].key, a.value = 0, f(a.value));
       }
     ), {
-      dropdown: y,
-      open: r,
+      dropdown: p,
+      open: u,
       highlightedKey: s,
       highlightedIndex: a,
       flattenedOptions: n,
@@ -180,7 +182,7 @@ const W = B({
       sanitizedAttributes: b,
       computedOptions: O,
       computedIcon: I,
-      clickOption: g,
+      clickOption: h,
       nativeSelectChange: N,
       changeHighlighted: q,
       onPlacement: x

package/dist/components/user-input/select/NeonSelect.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonSelect.es.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonSelectGroup } from '@/common/models/NeonSelectGroup';\nimport type { NeonSelectOption } from '@/common/models/NeonSelectOption';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonSwitch from '@/components/user-input/switch/NeonSwitch.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/**\n * <p>The <strong>NeonSelect</strong> is the equivalent of an HTML &lt;select&gt; form control. On touch devices\n * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n */\nexport default defineComponent({\n  name: 'NeonSelect',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonSwitch,\n  },\n  props: {\n    /**\n     * Id for the dropdown button\n     */\n    id: { type: String },\n    /**\n     * Placeholder to display as button label when there is no option selected.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.\n     */\n    placeholderAsOption: { type: Boolean, default: false },\n    /**\n     * Optional placeholder icon.\n     */\n    placeholderIcon: { type: String, required: false },\n    /**\n     * A list of options to render in the select.\n     */\n    options: { type: Array as () => Array<NeonSelectOption>, required: false },\n    /**\n     * A list of grouped options to render in the select.\n     */\n    groupedOptions: { type: Array as () => Array<NeonSelectGroup>, required: false },\n    /**\n     * Either a single string, indicating the key of the selected option or an array of selected keys in the case\n     * multiple = true.\n     */\n    modelValue: { type: [String, Array as () => Array<string>], required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Placeholder when multiple values are selected.\n     */\n    multiselectPlaceholder: { type: String, required: false },\n    /**\n     * Disable the select\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the select.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys\n     * (multi-select).\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<HTMLElement | null>(null);\n\n    const open = ref(false);\n    const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const flattenedOptions = computed((): NeonSelectOption[] => {\n      if (props.options) {\n        return props.options;\n      } else if (props.groupedOptions) {\n        return props.groupedOptions?.flatMap((group) => group.options);\n      }\n      return [];\n    });\n\n    const isReverse = () => {\n      if (!props.groupedOptions) {\n        switch (dropdownPlacement.value) {\n          case NeonDropdownPlacement.TopLeft:\n          case NeonDropdownPlacement.TopRight:\n          case NeonDropdownPlacement.LeftBottom:\n          case NeonDropdownPlacement.RightBottom:\n            return true;\n        }\n      }\n\n      return false;\n    };\n\n    const scrollOnNavigate = () => {\n      const element = dropdown.value?.querySelector('.neon-select__option--highlighted') as HTMLElement;\n\n      if (element) {\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= flattenedOptions.value.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = flattenedOptions.value[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(scrollOnNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | string[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const clickOption = (option: NeonSelectOption) => {\n      if (props.multiple) {\n        const values = [...props.modelValue];\n        const index = values.findIndex((v) => v === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option.key);\n        }\n        emitInputEvent(values);\n      } else if (props.modelValue !== option.key) {\n        open.value = false;\n        emitInputEvent(option.key);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (open.value) {\n        switch ($event.code) {\n          case 'ArrowUp':\n          case 'ArrowDown':\n            {\n              const reverseOffset = isReverse() ? -1 : 1;\n              if ($event.code === 'ArrowUp') {\n                navigateBy(-1 * reverseOffset, $event);\n              } else {\n                navigateBy(1 * reverseOffset, $event);\n              }\n            }\n            break;\n          case 'Enter':\n          case 'Space':\n            if (!flattenedOptions.value[highlightedIndex.value].disabled) {\n              clickOption(flattenedOptions.value[highlightedIndex.value]);\n              $event.preventDefault();\n            }\n            break;\n          case 'Tab':\n            if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n              open.value = false;\n            }\n            break;\n        }\n      }\n    };\n\n    const computedOptions = computed((): Array<NeonSelectGroup> => {\n      return (\n        props.groupedOptions || [\n          {\n            group: '',\n            options: props.options || [],\n          },\n        ]\n      );\n    });\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const computedLabel = computed(() => {\n      if (props.multiple && props.modelValue.length > 0) {\n        if (props.multiselectPlaceholder) {\n          return props.multiselectPlaceholder;\n        } else if (props.modelValue.length > 1) {\n          return `${props.modelValue.length} items selected`;\n        } else {\n          const selected = flattenedOptions.value.find((option) => option.key === props.modelValue[0]);\n          return selected?.label || '';\n        }\n      } else if (props.modelValue) {\n        const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n        if (selected) {\n          return selected.label;\n        }\n      }\n\n      return props.placeholder;\n    });\n\n    const computedIcon = computed(() => {\n      if (props.modelValue) {\n        const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n        if (selected) {\n          return selected.icon;\n        }\n      }\n\n      return props.placeholderIcon;\n    });\n\n    const nativeSelectChange = (event: Event) => {\n      const selectedKeys = Array.from((event.target as HTMLSelectElement).options)\n        .filter((opt) => opt.selected)\n        .map((opt) => opt.value);\n      const selectedOptions = flattenedOptions.value.filter((v) => selectedKeys.indexOf(v.key) >= 0);\n      const value = props.multiple ? selectedOptions.map((value) => value.key) : selectedOptions[0].key;\n      emitInputEvent(value);\n    };\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = flattenedOptions.value.findIndex((opt) => opt.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open) {\n          highlightedKey.value = flattenedOptions.value[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      flattenedOptions,\n      computedLabel,\n      sanitizedAttributes,\n      computedOptions,\n      computedIcon,\n      clickOption,\n      nativeSelectChange,\n      changeHighlighted,\n      onPlacement,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonSwitch","NeonSize","NeonFunctionalColor","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","open","dropdownPlacement","highlightedKey","highlightedIndex","flattenedOptions","computed","_a","group","isReverse","scrollOnNavigate","element","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","clickOption","option","values","index","v","keyboardHandler","reverseOffset","computedOptions","sanitizedAttributes","sanitized","computedLabel","selected","computedIcon","nativeSelectChange","event","selectedKeys","opt","selectedOptions","changeHighlighted","key","onPlacement","placement","onMounted","onUnmounted","watch"],"mappings":"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"}
+{"version":3,"file":"NeonSelect.es.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonSelectGroup } from '@/common/models/NeonSelectGroup';\nimport type { NeonSelectOption } from '@/common/models/NeonSelectOption';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonSwitch from '@/components/user-input/switch/NeonSwitch.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/**\n * <p>The <strong>NeonSelect</strong> is the equivalent of an HTML &lt;select&gt; form control. On touch devices\n * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n */\nexport default defineComponent({\n  name: 'NeonSelect',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonSwitch,\n  },\n  props: {\n    /**\n     * Id for the dropdown button\n     */\n    id: { type: String },\n    /**\n     * Placeholder to display as button label when there is no option selected.\n     */\n    placeholder: { type: String, required: true },\n    /**\n     * Display the placeholder as the first option in the select, this is useful as an alternative to a label.\n     */\n    placeholderAsOption: { type: Boolean, default: false },\n    /**\n     * Optional placeholder icon.\n     */\n    placeholderIcon: { type: String, required: false },\n    /**\n     * A list of options to render in the select.\n     */\n    options: { type: Array as () => Array<NeonSelectOption>, required: false },\n    /**\n     * A list of grouped options to render in the select.\n     */\n    groupedOptions: { type: Array as () => Array<NeonSelectGroup>, required: false },\n    /**\n     * Either a single string, indicating the key of the selected option or an array of selected keys in the case\n     * multiple = true.\n     */\n    modelValue: { type: [String, Array as () => Array<string>], required: true },\n    /**\n     * Allow multi-select.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * Placeholder when multiple values are selected.\n     */\n    multiselectPlaceholder: { type: String, required: false },\n    /**\n     * Disable the select\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The color of the select.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n  },\n  emits: [\n    /**\n     * emitted when the user changes the selection.\n     * @type {string | string[]} either the selected option's key (single select) or an array of the selected keys\n     * (multi-select).\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const dropdown = ref<InstanceType<typeof NeonDropdown> | null>(null);\n\n    const open = ref(false);\n    const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const flattenedOptions = computed((): NeonSelectOption[] => {\n      if (props.options) {\n        return props.options;\n      } else if (props.groupedOptions) {\n        return props.groupedOptions?.flatMap((group) => group.options);\n      }\n      return [];\n    });\n\n    const isReverse = () => {\n      if (!props.groupedOptions) {\n        switch (dropdownPlacement.value) {\n          case NeonDropdownPlacement.TopLeft:\n          case NeonDropdownPlacement.TopRight:\n          case NeonDropdownPlacement.LeftBottom:\n          case NeonDropdownPlacement.RightBottom:\n            return true;\n        }\n      }\n\n      return false;\n    };\n\n    const onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-select__option--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n    const navigateBy = (offset: number, $event?: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= flattenedOptions.value.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = flattenedOptions.value[highlightedIndex.value].key;\n        $event?.preventDefault();\n        setTimeout(onNavigate);\n      }\n    };\n\n    const emitInputEvent = (value: string | string[]) => {\n      emit('update:modelValue', value);\n    };\n\n    const clickOption = (option: NeonSelectOption) => {\n      if (props.multiple) {\n        const values = [...props.modelValue];\n        const index = values.findIndex((v) => v === option.key);\n        if (index >= 0) {\n          values.splice(index, 1);\n        } else {\n          values.push(option.key);\n        }\n        emitInputEvent(values);\n      } else if (props.modelValue !== option.key) {\n        open.value = false;\n        emitInputEvent(option.key);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (open.value) {\n        switch ($event.code) {\n          case 'ArrowUp':\n          case 'ArrowDown':\n            {\n              const reverseOffset = isReverse() ? -1 : 1;\n              if ($event.code === 'ArrowUp') {\n                navigateBy(-1 * reverseOffset, $event);\n              } else {\n                navigateBy(1 * reverseOffset, $event);\n              }\n            }\n            break;\n          case 'Enter':\n          case 'Space':\n            if (!flattenedOptions.value[highlightedIndex.value].disabled) {\n              clickOption(flattenedOptions.value[highlightedIndex.value]);\n              $event.preventDefault();\n            }\n            break;\n          case 'Tab':\n            if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n              open.value = false;\n            }\n            break;\n        }\n      }\n    };\n\n    const computedOptions = computed((): Array<NeonSelectGroup> => {\n      return (\n        props.groupedOptions || [\n          {\n            group: '',\n            options: props.options || [],\n          },\n        ]\n      );\n    });\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const computedLabel = computed(() => {\n      if (props.multiple && props.modelValue.length > 0) {\n        if (props.multiselectPlaceholder) {\n          return props.multiselectPlaceholder;\n        } else if (props.modelValue.length > 1) {\n          return `${props.modelValue.length} items selected`;\n        } else {\n          const selected = flattenedOptions.value.find((option) => option.key === props.modelValue[0]);\n          return selected?.label || '';\n        }\n      } else if (props.modelValue) {\n        const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n        if (selected) {\n          return selected.label;\n        }\n      }\n\n      return props.placeholder;\n    });\n\n    const computedIcon = computed(() => {\n      if (props.modelValue) {\n        const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n        if (selected) {\n          return selected.icon;\n        }\n      }\n\n      return props.placeholderIcon;\n    });\n\n    const nativeSelectChange = (event: Event) => {\n      const selectedKeys = Array.from((event.target as HTMLSelectElement).options)\n        .filter((opt) => opt.selected)\n        .map((opt) => opt.value);\n      const selectedOptions = flattenedOptions.value.filter((v) => selectedKeys.indexOf(v.key) >= 0);\n      const value = props.multiple ? selectedOptions.map((value) => value.key) : selectedOptions[0].key;\n      emitInputEvent(value);\n    };\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = flattenedOptions.value.findIndex((opt) => opt.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open) {\n          highlightedKey.value = flattenedOptions.value[0].key;\n          highlightedIndex.value = 0;\n          navigateBy(highlightedIndex.value);\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      flattenedOptions,\n      computedLabel,\n      sanitizedAttributes,\n      computedOptions,\n      computedIcon,\n      clickOption,\n      nativeSelectChange,\n      changeHighlighted,\n      onPlacement,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonSwitch","NeonSize","NeonFunctionalColor","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","open","dropdownPlacement","highlightedKey","highlightedIndex","flattenedOptions","computed","_a","group","isReverse","onNavigate","element","_b","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","clickOption","option","values","index","v","keyboardHandler","reverseOffset","computedOptions","sanitizedAttributes","sanitized","computedLabel","selected","computedIcon","nativeSelectChange","event","selectedKeys","opt","selectedOptions","changeHighlighted","key","onPlacement","placement","onMounted","onUnmounted","watch"],"mappings":"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"}

package/dist/components/user-input/select/NeonSelect.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const r=require("./NeonSelect.cjs.js"),e=require("vue"),c=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),p={class:"neon-select__wrapper"},u={class:"no-style neon-select__options"},m={class:"neon-select__option-container"},k={class:"neon-select__option-label"},b=["id","aria-selected","onMouseover","onClickCapture","onEnter"],y={class:"neon-select__option-container"},h={class:"neon-select__option-label"},g=["disabled","multiple"],B=["selected"],V=["label"],v=["data-index","disabled","multiple","selected","value"],_=["data-index","disabled","multiple","selected","value"];function E(l,t,N,f,$,w){const a=e.resolveComponent("neon-switch"),i=e.resolveComponent("neon-icon"),d=e.resolveComponent("neon-dropdown");return e.openBlock(),e.createElementBlock("div",p,[e.createVNode(d,e.mergeProps({id:l.id,ref:"dropdown",modelValue:l.open,"onUpdate:modelValue":t[0]||(t[0]=n=>l.open=n),"aria-activedescendant":l.multiple?l.modelValue[0]:l.modelValue,"aria-multiselectable":l.multiple,class:[[`neon-select--${l.color}`,{"neon-select--grouped":l.groupedOptions,"neon-select--multiple":l.multiple}],"neon-select"],color:l.color,disabled:l.disabled,icon:l.computedIcon,label:l.computedLabel,size:l.size,role:"listbox"},l.sanitizedAttributes,{onDropdownPlacement:l.onPlacement}),{default:e.withCtx(()=>[e.createElementVNode("ul",u,[l.placeholderAsOption?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass([`neon-select__option--${l.size}`,"neon-select__option neon-select__option--disabled neon-select__option-placeholder"])},[e.createElementVNode("div",m,[e.createElementVNode("span",k,e.toDisplayString(l.placeholder),1)])],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.computedOptions,n=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.group!==""?(e.openBlock(),e.createElementBlock("li",{key:n.group,class:"neon-select__option-title"},e.toDisplayString(n.group),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,o=>(e.openBlock(),e.createElementBlock("li",{id:o.key,key:o.key,"aria-selected":l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,class:e.normalizeClass([[{"neon-select__option--disabled":o.disabled,"neon-select__option--separator-before":o.separatorBefore,"neon-select__option--selected":l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,"neon-select__option--highlighted":o.key===l.highlightedKey},`neon-select__option--${l.size}`],"neon-select__option"]),role:"option",onMouseover:s=>l.changeHighlighted(o.key),onClickCapture:e.withModifiers(s=>!o.disabled&&l.clickOption(o),["stop","prevent"]),onEnter:e.withModifiers(s=>!o.disabled&&l.clickOption(o),["stop","prevent"])},[e.createElementVNode("div",y,[e.renderSlot(l.$slots,"option",{option:o},()=>[l.multiple?(e.openBlock(),e.createBlock(a,{key:0,color:l.color,modelValue:l.modelValue.indexOf(o.key)>=0,size:l.size==="l"?"m":"s","switch-style":"checkbox"},null,8,["color","modelValue","size"])):e.createCommentVNode("",!0),o.icon?(e.openBlock(),e.createBlock(i,{key:1,disabled:o.disabled,name:o.icon,class:"neon-select__option-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",h,e.toDisplayString(o.label),1)])])],42,b))),128))],64))),256))])]),_:3},16,["id","modelValue","aria-activedescendant","aria-multiselectable","class","color","disabled","icon","label","size","onDropdownPlacement"]),e.createElementVNode("select",e.mergeProps({disabled:l.disabled,multiple:l.multiple,class:"neon-select__native"},l.sanitizedAttributes,{onInput:t[1]||(t[1]=(...n)=>l.nativeSelectChange&&l.nativeSelectChange(...n))}),[e.createElementVNode("option",{selected:l.multiple?l.modelValue.length===0:l.modelValue==="",disabled:"",hidden:"",value:""},e.toDisplayString(l.placeholder),9,B),l.groupedOptions?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(l.groupedOptions,n=>(e.openBlock(),e.createElementBlock("optgroup",{key:n.group,label:n.group},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,(o,s)=>(e.openBlock(),e.createElementBlock("option",{key:`${o.key}-native`,"data-index":s,disabled:o.disabled,multiple:l.multiple,selected:l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,value:o.key},e.toDisplayString(o.label),9,v))),128))],8,V))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(l.options,(n,o)=>(e.openBlock(),e.createElementBlock("option",{key:`${n.key}-native`,"data-index":o,disabled:n.disabled,multiple:l.multiple,selected:l.multiple?l.modelValue.indexOf(n.key)>=0:n.key===l.modelValue,value:n.key},e.toDisplayString(n.label),9,_))),128))],16,g)])}const C=c(r,[["render",E]]);module.exports=C;
+"use strict";const r=require("./NeonSelect.cjs.js"),e=require("vue"),c=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),p={class:"neon-select__wrapper"},u={class:"no-style neon-select__options"},m={class:"neon-select__option-container"},k={class:"neon-select__option-label"},b=["id","aria-selected","onMouseover","onClickCapture","onEnter"],y={class:"neon-select__option-container"},h={class:"neon-select__option-label"},g=["disabled","multiple"],B=["selected"],V=["label"],v=["data-index","disabled","multiple","selected","value"],_=["data-index","disabled","multiple","selected","value"];function E(l,t,N,f,$,w){const a=e.resolveComponent("neon-switch"),i=e.resolveComponent("neon-icon"),d=e.resolveComponent("neon-dropdown");return e.openBlock(),e.createElementBlock("div",p,[e.createVNode(d,e.mergeProps({id:l.id,ref:"dropdown",modelValue:l.open,"onUpdate:modelValue":t[0]||(t[0]=n=>l.open=n),"aria-activedescendant":l.multiple?l.modelValue[0]:l.modelValue,"aria-multiselectable":l.multiple,class:[[`neon-select--${l.color}`,{"neon-select--grouped":l.groupedOptions,"neon-select--multiple":l.multiple}],"neon-select"],color:l.color,disabled:l.disabled,icon:l.computedIcon,label:l.computedLabel,size:l.size,role:"listbox"},l.sanitizedAttributes,{onDropdownPlacement:l.onPlacement}),{default:e.withCtx(()=>[e.createElementVNode("ul",u,[l.placeholderAsOption?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass([`neon-select__option--${l.size}`,"neon-select__option neon-select__option--disabled neon-select__option-placeholder"])},[e.createElementVNode("div",m,[e.createElementVNode("span",k,e.toDisplayString(l.placeholder),1)])],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.computedOptions,n=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.group!==""?(e.openBlock(),e.createElementBlock("li",{key:n.group,class:"neon-select__option-title"},e.toDisplayString(n.group),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,o=>(e.openBlock(),e.createElementBlock("li",{id:o.key,key:o.key,"aria-selected":l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,class:e.normalizeClass([[{"neon-select__option--disabled":o.disabled,"neon-select__option--separator-before":o.separatorBefore,"neon-select__option--selected":l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,"neon-select__option--highlighted":o.key===l.highlightedKey},`neon-select__option--${l.size}`],"neon-select__option"]),role:"option",tabindex:"0",onMouseover:s=>l.changeHighlighted(o.key),onClickCapture:e.withModifiers(s=>!o.disabled&&l.clickOption(o),["stop","prevent"]),onEnter:e.withModifiers(s=>!o.disabled&&l.clickOption(o),["stop","prevent"])},[e.createElementVNode("div",y,[e.renderSlot(l.$slots,"option",{option:o},()=>[l.multiple?(e.openBlock(),e.createBlock(a,{key:0,color:l.color,modelValue:l.modelValue.indexOf(o.key)>=0,size:l.size==="l"?"m":"s","switch-style":"checkbox"},null,8,["color","modelValue","size"])):e.createCommentVNode("",!0),o.icon?(e.openBlock(),e.createBlock(i,{key:1,disabled:o.disabled,name:o.icon,class:"neon-select__option-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",h,e.toDisplayString(o.label),1)])])],42,b))),128))],64))),256))])]),_:3},16,["id","modelValue","aria-activedescendant","aria-multiselectable","class","color","disabled","icon","label","size","onDropdownPlacement"]),e.createElementVNode("select",e.mergeProps({disabled:l.disabled,multiple:l.multiple,class:"neon-select__native"},l.sanitizedAttributes,{onInput:t[1]||(t[1]=(...n)=>l.nativeSelectChange&&l.nativeSelectChange(...n))}),[e.createElementVNode("option",{selected:l.multiple?l.modelValue.length===0:l.modelValue==="",disabled:"",hidden:"",value:""},e.toDisplayString(l.placeholder),9,B),l.groupedOptions?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(l.groupedOptions,n=>(e.openBlock(),e.createElementBlock("optgroup",{key:n.group,label:n.group},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,(o,s)=>(e.openBlock(),e.createElementBlock("option",{key:`${o.key}-native`,"data-index":s,disabled:o.disabled,multiple:l.multiple,selected:l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,value:o.key},e.toDisplayString(o.label),9,v))),128))],8,V))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(l.options,(n,o)=>(e.openBlock(),e.createElementBlock("option",{key:`${n.key}-native`,"data-index":o,disabled:n.disabled,multiple:l.multiple,selected:l.multiple?l.modelValue.indexOf(n.key)>=0:n.key===l.modelValue,value:n.key},e.toDisplayString(n.label),9,_))),128))],16,g)])}const C=c(r,[["render",E]]);module.exports=C;
 //# sourceMappingURL=NeonSelect.vue.cjs.js.map