vue3-select-component - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/index.es.js

@@ -1,6 +0,7 @@
-import { openBlock as c, createElementBlock as p, createElementVNode as k, defineComponent as x, ref as g, watch as P, normalizeClass as O, withKeys as Q, renderSlot as M, mergeModels as N, useModel as W, computed as q, onMounted as Y, onBeforeUnmount as ee, createTextVNode as C, toDisplayString as _, createCommentVNode as D, Fragment as K, renderList as U, createVNode as V, withDirectives as le, vModelText as te, createBlock as z, Teleport as ae, normalizeStyle as oe, withCtx as ne } from "vue";
-const I = (n, v) => {
-  const l = n.__vccOpts || n;
-  for (const [f, t] of v)
-    l[f] = t;
+(function(){"use strict";try{if(typeof document!="undefined"){var o=document.createElement("style");o.appendChild(document.createTextNode(":root{--vs-input-bg: #fff;--vs-input-outline: #3b82f6;--vs-input-placeholder-color: #52525b;--vs-padding: .25rem .5rem;--vs-border: 1px solid #e4e4e7;--vs-border-radius: 4px;--vs-font-size: 16px;--vs-font-weight: 400;--vs-font-family: inherit;--vs-text-color: #18181b;--vs-line-height: 1.5;--vs-menu-offset-top: 8px;--vs-menu-height: 200px;--vs-menu-padding: 0;--vs-menu-border: 1px solid #e4e4e7;--vs-menu-bg: #fff;--vs-menu-box-shadow: none;--vs-menu-z-index: 2;--vs-option-padding: 8px 12px;--vs-option-font-size: var(--vs-font-size);--vs-option-font-weight: var(--vs-font-weight);--vs-option-text-color: var(--vs-text-color);--vs-option-bg: var(--vs-menu-bg);--vs-option-hover-color: #dbeafe;--vs-option-focused-color: var(--vs-option-hover-color);--vs-option-selected-color: #93c5fd;--vs-option-disabled-color: #f4f4f5;--vs-option-disabled-text-color: #52525b;--vs-multi-value-gap: 4px;--vs-multi-value-padding: 4px;--vs-multi-value-font-size: 14px;--vs-multi-value-font-weight: 400;--vs-multi-value-line-height: 1;--vs-multi-value-text-color: #3f3f46;--vs-multi-value-bg: #f4f4f5;--vs-multi-value-xmark-size: 16px;--vs-multi-value-xmark-color: var(--vs-multi-value-text-color);--vs-indicators-gap: 4px;--vs-icon-size: 20px;--vs-icon-color: var(--vs-text-color);--vs-dropdown-transition: transform .25s ease-out}.vue-select[data-v-e46c3bc1]{position:relative;box-sizing:border-box;width:100%}.vue-select[data-v-e46c3bc1] *{box-sizing:border-box}.vue-select.open .single-value[data-v-e46c3bc1]{position:absolute;opacity:.4}.vue-select.open .dropdown-icon[data-v-e46c3bc1]{transform:rotate(180deg)}.vue-select.typing .single-value[data-v-e46c3bc1]{opacity:0}.control[data-v-e46c3bc1]{display:flex;min-height:32px;border:var(--vs-border);border-radius:var(--vs-border-radius);background-color:var(--vs-input-bg)}.control.focused[data-v-e46c3bc1]{box-shadow:0 0 0 1px var(--vs-input-outline);border-color:var(--vs-input-outline)}.value-container[data-v-e46c3bc1]{position:relative;display:flex;flex-wrap:wrap;align-items:center;flex-basis:100%;flex-grow:1;padding:var(--vs-padding)}.value-container.multi[data-v-e46c3bc1]{gap:var(--vs-multi-value-gap)}.single-value[data-v-e46c3bc1]{display:flex;align-items:center;font-size:var(--vs-font-size);font-weight:var(--vs-font-weight);font-family:var(--vs-font-family);line-height:var(--vs-line-height);color:var(--vs-text-color);z-index:0}.multi-value[data-v-e46c3bc1]{appearance:none;display:flex;align-items:center;gap:var(--vs-multi-value-gap);padding:var(--vs-multi-value-padding);margin:0;border:0;font-size:var(--vs-multi-value-font-size);font-weight:var(--vs-multi-value-font-weight);color:var(--vs-multi-value-text-color);line-height:var(--vs-multi-value-line-height);background:var(--vs-multi-value-bg);outline:none;cursor:pointer}.multi-value svg[data-v-e46c3bc1]{width:var(--vs-multi-value-xmark-size);height:var(--vs-multi-value-xmark-size);fill:var(--vs-multi-value-xmark-color)}.search-input[data-v-e46c3bc1]{appearance:none;display:inline-block;max-width:100%;flex-grow:1;width:0;margin:0;padding:0;border:0;background:none;font-size:var(--vs-font-size);font-family:var(--vs-font-family);line-height:var(--vs-line-height);color:var(--vs-text-color);outline:none;z-index:1}.search-input[data-v-e46c3bc1]::placeholder{color:var(--vs-input-placeholder-color)}.indicators-container[data-v-e46c3bc1]{display:flex;align-items:center;flex-shrink:0;gap:var(--vs-indicators-gap);padding:var(--vs-padding)}.clear-button[data-v-e46c3bc1]{appearance:none;display:inline-block;padding:0;margin:0;border:0;width:var(--vs-icon-size);height:var(--vs-icon-size);fill:var(--vs-icon-color);background:none;outline:none;cursor:pointer}.dropdown-icon[data-v-e46c3bc1]{appearance:none;display:inline-block;padding:0;margin:0;border:0;width:var(--vs-icon-size);height:var(--vs-icon-size);fill:var(--vs-icon-color);background:none;outline:none;cursor:pointer;transition:var(--vs-dropdown-transition)}.menu[data-v-e46c3bc1]{position:absolute;left:0;right:0;padding:var(--vs-menu-padding);margin-top:var(--vs-menu-offset-top);max-height:var(--vs-menu-height);overflow-y:auto;border:var(--vs-menu-border);border-radius:var(--vs-border-radius);box-shadow:var(--vs-menu-box-shadow);background-color:var(--vs-menu-bg);z-index:var(--vs-menu-z-index)}.menu-option[data-v-e46c3bc1]{display:flex;width:100%;border:0;margin:0;padding:var(--vs-option-padding);font-size:var(--vs-option-font-size);font-weight:var(--vs-option-font-weight);font-family:var(--vs-font-family);color:var(--vs-option-text-color);background-color:var(--vs-option-bg);text-align:-webkit-auto;cursor:pointer}.menu-option[data-v-e46c3bc1]:hover{background-color:var(--vs-option-hover-color)}.menu-option.focused[data-v-e46c3bc1]{background-color:var(--vs-option-focused-color)}.menu-option.selected[data-v-e46c3bc1]{background-color:var(--vs-option-selected-color)}.menu-option.disabled[data-v-e46c3bc1]{background-color:var(--vs-option-disabled-color);color:var(--vs-option-disabled-text-color)}.no-results[data-v-e46c3bc1]{padding:var(--vs-option-padding);font-size:var(--vs-font-size);font-family:var(--vs-font-family);color:var(--vs-text-color)}")),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { openBlock as c, createElementBlock as b, createElementVNode as O, defineComponent as H, ref as w, watch as P, normalizeClass as B, withKeys as Q, renderSlot as $, mergeModels as A, useModel as W, computed as N, onMounted as Y, onBeforeUnmount as ee, createTextVNode as C, toDisplayString as _, createCommentVNode as S, Fragment as q, renderList as K, createVNode as V, withDirectives as le, vModelText as te, createBlock as U, Teleport as ae, normalizeStyle as ne, withCtx as oe } from "vue";
+const T = (s, v) => {
+  const l = s.__vccOpts || s;
+  for (const [m, a] of v)
+    l[m] = a;
   return l;
@@ -11,23 +12,23 @@ }, ie = {}, se = {
   fill: "currentColor"
-}, ue = /* @__PURE__ */ k("path", {
+}, ue = /* @__PURE__ */ O("path", {
   "fill-rule": "evenodd",
   d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z",
   "clip-rule": "evenodd"
-}, null, -1), re = [
+}, null, -1), de = [
   ue
 ];
-function de(n, v) {
-  return c(), p("svg", se, re);
+function re(s, v) {
+  return c(), b("svg", se, de);
 }
-const ce = /* @__PURE__ */ I(ie, [["render", de]]), ve = {}, pe = {
+const ce = /* @__PURE__ */ T(ie, [["render", re]]), ve = {}, pe = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 20 20",
   fill: "currentColor"
-}, fe = /* @__PURE__ */ k("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }, null, -1), me = [
+}, fe = /* @__PURE__ */ O("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }, null, -1), be = [
   fe
 ];
-function be(n, v) {
-  return c(), p("svg", pe, me);
+function me(s, v) {
+  return c(), b("svg", pe, be);
 }
-const H = /* @__PURE__ */ I(ve, [["render", be]]), ye = /* @__PURE__ */ x({
+const z = /* @__PURE__ */ T(ve, [["render", me]]), ye = ["aria-disabled", "aria-selected"], he = /* @__PURE__ */ H({
   __name: "MenuOption",
@@ -38,7 +39,8 @@ props: {
     isFocused: { type: Boolean },
-    isSelected: { type: Boolean }
+    isSelected: { type: Boolean },
+    isDisabled: { type: Boolean }
   },
   emits: ["select"],
-  setup(n, { emit: v }) {
-    const l = n, f = v, t = g(null);
+  setup(s, { emit: v }) {
+    const l = s, m = v, a = w(null);
     return P(
@@ -48,25 +50,26 @@ () => l.isFocused,
         if (l.isFocused && l.menu) {
-          const r = l.menu.children[l.index], s = r.offsetTop, h = s + r.clientHeight, a = l.menu.scrollTop, i = l.menu.clientHeight;
-          s < a ? l.menu.scrollTop = s : h > a + i && (l.menu.scrollTop = h - i);
+          const d = l.menu.children[l.index], r = d.offsetTop, M = r + d.clientHeight, i = l.menu.scrollTop, u = l.menu.clientHeight;
+          r < i ? l.menu.scrollTop = r : M > i + u && (l.menu.scrollTop = M - u);
         }
       }
-    ), (r, s) => (c(), p("div", {
+    ), (d, r) => (c(), b("div", {
       ref_key: "option",
-      ref: t,
+      ref: a,
       tabindex: "-1",
       role: "option",
-      class: O({ focused: r.isFocused, selected: r.isSelected }),
-      "aria-disabled": !1,
-      onClick: s[0] || (s[0] = (h) => f("select")),
-      onKeydown: s[1] || (s[1] = Q((h) => f("select"), ["enter"]))
+      class: B({ focused: d.isFocused, selected: d.isSelected, disabled: d.isDisabled }),
+      "aria-disabled": d.isDisabled,
+      "aria-selected": d.isSelected,
+      onClick: r[0] || (r[0] = (M) => m("select")),
+      onKeydown: r[1] || (r[1] = Q((M) => m("select"), ["enter"]))
     }, [
-      M(r.$slots, "default")
-    ], 34));
+      $(d.$slots, "default")
+    ], 42, ye));
   }
-}), he = ["aria-expanded", "aria-describedby", "aria-description", "aria-labelledby", "aria-label", "aria-required"], ge = ["onClick"], Me = ["id", "disabled", "placeholder"], ke = { class: "indicators-container" }, we = ["disabled"], $e = ["disabled"], Le = ["aria-label", "aria-multiselectable"], De = {
+}), ge = ["aria-expanded", "aria-describedby", "aria-description", "aria-labelledby", "aria-label", "aria-required"], ke = ["onClick"], Me = ["id", "disabled", "placeholder"], we = { class: "indicators-container" }, $e = ["disabled"], Oe = ["disabled"], De = ["aria-label", "aria-multiselectable"], Le = {
   key: 0,
   class: "no-results"
-}, Oe = /* @__PURE__ */ x({
+}, Se = /* @__PURE__ */ H({
   __name: "Select",
-  props: /* @__PURE__ */ N({
+  props: /* @__PURE__ */ A({
     options: {},
@@ -83,66 +86,83 @@ displayedOptions: {},
     aria: { default: void 0 },
-    filterBy: { type: Function, default: (n, v, l) => v.toLowerCase().includes(l.toLowerCase()) },
-    getOptionLabel: { type: Function, default: (n) => n.label },
-    getMultiValueLabel: { type: Function, default: (n) => n.label }
+    filterBy: { type: Function, default: (s, v, l) => v.toLowerCase().includes(l.toLowerCase()) },
+    getOptionLabel: { type: Function, default: (s) => s.label },
+    getMultiValueLabel: { type: Function, default: (s) => s.label }
   }, {
     modelValue: {
       required: !0,
-      validator: (n, v) => v.isMulti ? Array.isArray(n) : !Array.isArray(n)
+      validator: (s, v) => v.isMulti ? Array.isArray(s) : !Array.isArray(s)
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ N(["optionSelected", "optionDeselected", "search"], ["update:modelValue"]),
-  setup(n, { emit: v }) {
-    const l = n, f = v, t = W(n, "modelValue"), r = g(null), s = g(null), h = g(null), a = g(""), i = g(!1), b = g(-1), $ = q(() => {
-      const e = l.displayedOptions || l.options, o = (u) => u.filter(
-        (y) => !t.value.includes(y.value)
+  emits: /* @__PURE__ */ A(["optionSelected", "optionDeselected", "search"], ["update:modelValue"]),
+  setup(s, { emit: v }) {
+    const l = s, m = v, a = W(s, "modelValue"), d = w(null), r = w(null), M = w(null), i = w(""), u = w(!1), D = w(-1), g = N(() => {
+      const e = l.displayedOptions || l.options, t = (p) => p.filter(
+        (n) => !a.value.includes(n.value)
       );
-      if (l.isSearchable && a.value) {
-        const u = e.filter((y) => {
-          const S = l.isMulti ? l.getMultiValueLabel(y) : l.getOptionLabel(y);
-          return l.filterBy(y, S, a.value);
+      if (l.isSearchable && i.value) {
+        const p = e.filter((n) => {
+          const k = l.isMulti ? l.getMultiValueLabel(n) : l.getOptionLabel(n);
+          return l.filterBy(n, k, i.value);
         });
-        return l.isMulti ? o(u) : u;
+        return l.isMulti ? t(p) : p;
       }
-      return l.isMulti ? o(e) : e;
-    }), m = q(() => {
+      return l.isMulti ? t(e) : e;
+    }), y = N(() => {
       if (l.isMulti)
-        return t.value.map(
-          (o) => l.options.find((u) => u.value === o)
+        return a.value.map(
+          (t) => l.options.find((p) => p.value === t)
         );
-      const e = l.options.find((o) => o.value === t.value);
+      const e = l.options.find((t) => t.value === a.value);
       return e ? [e] : [];
     }), L = (e) => {
-      i.value = !0, b.value = 0, e != null && e.focusInput && s.value && s.value.focus();
+      u.value = !0, D.value = l.options.findIndex((t) => !t.disabled), e != null && e.focusInput && r.value && r.value.focus();
     }, R = () => {
-      i.value = !1, a.value = "";
-    }, B = (e) => {
-      l.isMulti ? t.value.push(e.value) : t.value = e.value, f("optionSelected", e), a.value = "", l.closeOnSelect && (i.value = !1), s.value && s.value.blur();
+      u.value = !1, i.value = "";
+    }, I = (e) => {
+      e.disabled || (l.isMulti ? a.value.push(e.value) : a.value = e.value, m("optionSelected", e), i.value = "", l.closeOnSelect && (u.value = !1), r.value && r.value.blur());
     }, Z = (e) => {
-      l.isMulti && !l.isDisabled && (t.value = t.value.filter((o) => o !== e.value), f("optionDeselected", e));
+      l.isMulti && !l.isDisabled && (a.value = a.value.filter((t) => t !== e.value), m("optionDeselected", e));
     }, j = () => {
-      l.isMulti ? (t.value = [], f("optionDeselected", null)) : (t.value = void 0, f("optionDeselected", m.value[0])), i.value = !1, a.value = "", s.value && s.value.blur();
-    }, T = (e) => {
-      if (i.value) {
-        if (e.key === "ArrowDown" && (e.preventDefault(), b.value = Math.min(b.value + 1, $.value.length - 1)), e.key === "ArrowUp" && (e.preventDefault(), b.value = Math.max(b.value - 1, 0)), e.key === "Enter") {
-          const u = $.value[b.value];
-          e.preventDefault(), u && B(u);
+      l.isMulti ? (a.value = [], m("optionDeselected", null)) : (a.value = void 0, m("optionDeselected", y.value[0])), u.value = !1, i.value = "", r.value && r.value.blur();
+    }, E = (e) => {
+      if (u.value) {
+        const t = D.value;
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          const n = g.value.findIndex((h, o) => !h.disabled && o > t), k = g.value.findIndex((h) => !h.disabled);
+          D.value = n === -1 ? k : n;
         }
-        if (e.code === "Space" && a.value.length === 0) {
-          const u = $.value[b.value];
-          e.preventDefault(), u && B(u);
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          const n = g.value.reduce(
+            (h, o, f) => !o.disabled && f < t ? f : h,
+            -1
+          ), k = g.value.reduce(
+            (h, o, f) => o.disabled ? h : f,
+            -1
+          );
+          D.value = n === -1 ? k : n;
         }
-        e.key === "Escape" && (e.preventDefault(), i.value = !1, a.value = "");
-        const o = l.isMulti ? t.value.length > 0 : !!t.value;
-        e.key === "Backspace" && a.value.length === 0 && o && (e.preventDefault(), l.isMulti ? t.value = t.value.slice(0, -1) : t.value = void 0);
+        if (e.key === "Enter") {
+          const n = g.value[t];
+          e.preventDefault(), n && I(n);
+        }
+        if (e.code === "Space" && i.value.length === 0) {
+          const n = g.value[t];
+          e.preventDefault(), n && I(n);
+        }
+        e.key === "Escape" && (e.preventDefault(), u.value = !1, i.value = "");
+        const p = l.isMulti ? a.value.length > 0 : !!a.value;
+        e.key === "Backspace" && i.value.length === 0 && p && (e.preventDefault(), l.isMulti ? a.value = a.value.slice(0, -1) : a.value = void 0);
       }
     }, X = (e) => {
-      !i.value && a.value.length === 0 && (e.preventDefault(), e.stopImmediatePropagation(), L());
+      !u.value && i.value.length === 0 && (e.preventDefault(), e.stopImmediatePropagation(), L());
     }, G = (e) => {
       e.key === "Tab" ? R() : e.key === "Space" && X(e);
-    }, E = (e) => {
-      r.value && !r.value.contains(e.target) && (i.value = !1, a.value = "");
-    }, F = () => {
-      if (r.value) {
-        const e = r.value.getBoundingClientRect();
+    }, F = (e) => {
+      d.value && !d.value.contains(e.target) && (u.value = !1, i.value = "");
+    }, x = () => {
+      if (d.value) {
+        const e = d.value.getBoundingClientRect();
         return {
@@ -156,56 +176,56 @@ left: `${e.x}px`,
     return P(
-      () => a.value,
+      () => i.value,
       () => {
-        f("search", a.value), a.value && !i.value && L();
+        m("search", i.value), i.value && !u.value && L();
       }
     ), Y(() => {
-      document.addEventListener("click", E), document.addEventListener("keydown", T);
+      document.addEventListener("click", F), document.addEventListener("keydown", E);
     }), ee(() => {
-      document.removeEventListener("click", E), document.removeEventListener("keydown", T);
-    }), (e, o) => {
-      var u, y, S, A;
-      return c(), p("div", {
+      document.removeEventListener("click", F), document.removeEventListener("keydown", E);
+    }), (e, t) => {
+      var p, n, k, h;
+      return c(), b("div", {
         ref_key: "container",
-        ref: r,
+        ref: d,
         dir: "auto",
-        class: O(["vue-select", { open: i.value, typing: i.value && a.value.length > 0, disabled: e.isDisabled }])
+        class: B(["vue-select", { open: u.value, typing: u.value && i.value.length > 0, disabled: e.isDisabled }])
       }, [
-        k("div", {
-          class: O(["control", { focused: i.value }])
+        O("div", {
+          class: B(["control", { focused: u.value }])
         }, [
-          k("div", {
-            class: O(["value-container", { multi: e.isMulti }]),
+          O("div", {
+            class: B(["value-container", { multi: e.isMulti }]),
             role: "combobox",
-            "aria-expanded": i.value,
+            "aria-expanded": u.value,
             "aria-describedby": e.placeholder,
             "aria-description": e.placeholder,
-            "aria-labelledby": (u = e.aria) == null ? void 0 : u.labelledby,
-            "aria-label": m.value.length ? m.value.map(e.isMulti ? e.getMultiValueLabel : e.getOptionLabel).join(", ") : "",
-            "aria-required": (y = e.aria) == null ? void 0 : y.required
+            "aria-labelledby": (p = e.aria) == null ? void 0 : p.labelledby,
+            "aria-label": y.value.length ? y.value.map(e.isMulti ? e.getMultiValueLabel : e.getOptionLabel).join(", ") : "",
+            "aria-required": (n = e.aria) == null ? void 0 : n.required
           }, [
-            !l.isMulti && m.value[0] ? (c(), p("div", {
+            !l.isMulti && y.value[0] ? (c(), b("div", {
               key: 0,
               class: "single-value",
-              onClick: o[0] || (o[0] = (d) => L({ focusInput: !0 }))
+              onClick: t[0] || (t[0] = (o) => L({ focusInput: !0 }))
             }, [
-              M(e.$slots, "value", {
-                option: m.value[0]
+              $(e.$slots, "value", {
+                option: y.value[0]
               }, () => [
-                C(_(e.getOptionLabel(m.value[0])), 1)
+                C(_(e.getOptionLabel(y.value[0])), 1)
               ], !0)
-            ])) : D("", !0),
-            l.isMulti && m.value.length ? (c(!0), p(K, { key: 1 }, U(m.value, (d, w) => (c(), p("button", {
-              key: w,
+            ])) : S("", !0),
+            l.isMulti && y.value.length ? (c(!0), b(q, { key: 1 }, K(y.value, (o, f) => (c(), b("button", {
+              key: f,
               type: "button",
               class: "multi-value",
-              onClick: (J) => Z(d)
+              onClick: (J) => Z(o)
             }, [
-              C(_(e.getMultiValueLabel(d)) + " ", 1),
-              V(H)
-            ], 8, ge))), 128)) : D("", !0),
-            le(k("input", {
+              C(_(e.getMultiValueLabel(o)) + " ", 1),
+              V(z)
+            ], 8, ke))), 128)) : S("", !0),
+            le(O("input", {
               id: e.inputId,
               ref_key: "input",
-              ref: s,
-              "onUpdate:modelValue": o[1] || (o[1] = (d) => a.value = d),
+              ref: r,
+              "onUpdate:modelValue": t[1] || (t[1] = (o) => i.value = o),
               class: "search-input",
@@ -220,11 +240,11 @@ type: "text",
               disabled: e.isDisabled,
-              placeholder: m.value.length === 0 ? e.placeholder : "",
-              onMousedown: o[2] || (o[2] = (d) => L()),
+              placeholder: y.value.length === 0 ? e.placeholder : "",
+              onMousedown: t[2] || (t[2] = (o) => L()),
               onKeydown: G
             }, null, 40, Me), [
-              [te, a.value]
+              [te, i.value]
             ])
-          ], 10, he),
-          k("div", ke, [
-            m.value.length > 0 && e.isClearable ? (c(), p("button", {
+          ], 10, ge),
+          O("div", we, [
+            y.value.length > 0 && e.isClearable ? (c(), b("button", {
               key: 0,
@@ -237,7 +257,7 @@ type: "button",
             }, [
-              M(e.$slots, "clear", {}, () => [
-                V(H)
+              $(e.$slots, "clear", {}, () => [
+                V(z)
               ], !0)
-            ], 8, we)) : D("", !0),
-            k("button", {
+            ], 8, $e)) : S("", !0),
+            O("button", {
               type: "button",
@@ -247,52 +267,53 @@ class: "dropdown-icon",
               disabled: e.isDisabled,
-              onClick: o[3] || (o[3] = (d) => L({ focusInput: !0 }))
+              onClick: t[3] || (t[3] = (o) => L({ focusInput: !0 }))
             }, [
-              M(e.$slots, "dropdown", {}, () => [
+              $(e.$slots, "dropdown", {}, () => [
                 V(ce)
               ], !0)
-            ], 8, $e)
+            ], 8, Oe)
           ])
         ], 2),
-        (c(), z(ae, {
+        (c(), U(ae, {
           to: e.teleport,
           disabled: !e.teleport
         }, [
-          i.value ? (c(), p("div", {
+          u.value ? (c(), b("div", {
             key: 0,
             ref_key: "menu",
-            ref: h,
+            ref: M,
             class: "menu",
             role: "listbox",
-            "aria-label": (S = e.aria) == null ? void 0 : S.labelledby,
+            "aria-label": (k = e.aria) == null ? void 0 : k.labelledby,
             "aria-multiselectable": e.isMulti,
-            style: oe({
-              width: l.teleport ? `${(A = r.value) == null ? void 0 : A.getBoundingClientRect().width}px` : "100%",
-              top: l.teleport ? F().top : "unset",
-              left: l.teleport ? F().left : "unset"
+            style: ne({
+              width: l.teleport ? `${(h = d.value) == null ? void 0 : h.getBoundingClientRect().width}px` : "100%",
+              top: l.teleport ? x().top : "unset",
+              left: l.teleport ? x().left : "unset"
             })
           }, [
-            M(e.$slots, "menu-header", {}, void 0, !0),
-            (c(!0), p(K, null, U($.value, (d, w) => (c(), z(ye, {
-              key: w,
+            $(e.$slots, "menu-header", {}, void 0, !0),
+            (c(!0), b(q, null, K(g.value, (o, f) => (c(), U(he, {
+              key: f,
               type: "button",
-              class: O(["menu-option", { focused: b.value === w, selected: d.value === t.value }]),
-              menu: h.value,
-              index: w,
-              "is-focused": b.value === w,
-              "is-selected": d.value === t.value,
-              onSelect: (J) => B(d)
+              class: B(["menu-option", { focused: D.value === f, selected: o.value === a.value }]),
+              menu: M.value,
+              index: f,
+              "is-focused": D.value === f,
+              "is-selected": o.value === a.value,
+              "is-disabled": o.disabled || !1,
+              onSelect: (J) => I(o)
             }, {
-              default: ne(() => [
-                M(e.$slots, "option", { option: d }, () => [
-                  C(_(e.getOptionLabel(d)), 1)
+              default: oe(() => [
+                $(e.$slots, "option", { option: o }, () => [
+                  C(_(e.getOptionLabel(o)), 1)
                 ], !0)
               ]),
               _: 2
-            }, 1032, ["class", "menu", "index", "is-focused", "is-selected", "onSelect"]))), 128)),
-            $.value.length === 0 ? (c(), p("div", De, [
-              M(e.$slots, "no-options", {}, () => [
+            }, 1032, ["class", "menu", "index", "is-focused", "is-selected", "is-disabled", "onSelect"]))), 128)),
+            g.value.length === 0 ? (c(), b("div", Le, [
+              $(e.$slots, "no-options", {}, () => [
                 C(" No results found ")
               ], !0)
-            ])) : D("", !0)
-          ], 12, Le)) : D("", !0)
+            ])) : S("", !0)
+          ], 12, De)) : S("", !0)
         ], 8, ["to", "disabled"]))
@@ -302,5 +323,5 @@ ], 2);
   }
-}), Ce = /* @__PURE__ */ I(Oe, [["__scopeId", "data-v-0d3c3f89"]]);
+}), Ce = /* @__PURE__ */ T(Se, [["__scopeId", "data-v-e46c3bc1"]]);
 export {
   Ce as default
 };

dist/index.umd.js

@@ -1,1 +0,2 @@
-(function(e,h){typeof exports=="object"&&typeof module!="undefined"?module.exports=h(require("vue")):typeof define=="function"&&define.amd?define(["vue"],h):(e=typeof globalThis!="undefined"?globalThis:e||self,e["vue3-select-component"]=h(e.Vue))})(this,function(e){"use strict";const h=(i,p)=>{const l=i.__vccOpts||i;for(const[f,o]of p)l[f]=o;return l},E={},L={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},_=[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z","clip-rule":"evenodd"},null,-1)];function O(i,p){return e.openBlock(),e.createElementBlock("svg",L,_)}const N=h(E,[["render",O]]),T={},I={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},F=[e.createElementVNode("path",{d:"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"},null,-1)];function z(i,p){return e.openBlock(),e.createElementBlock("svg",I,F)}const V=h(T,[["render",z]]),x=e.defineComponent({__name:"MenuOption",props:{menu:{},index:{},isFocused:{type:Boolean},isSelected:{type:Boolean}},emits:["select"],setup(i,{emit:p}){const l=i,f=p,o=e.ref(null);return e.watch(()=>l.isFocused,()=>{if(l.isFocused&&l.menu){const d=l.menu.children[l.index],r=d.offsetTop,v=r+d.clientHeight,n=l.menu.scrollTop,s=l.menu.clientHeight;r<n?l.menu.scrollTop=r:v>n+s&&(l.menu.scrollTop=v-s)}}),(d,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"option",ref:o,tabindex:"-1",role:"option",class:e.normalizeClass({focused:d.isFocused,selected:d.isSelected}),"aria-disabled":!1,onClick:r[0]||(r[0]=v=>f("select")),onKeydown:r[1]||(r[1]=e.withKeys(v=>f("select"),["enter"]))},[e.renderSlot(d.$slots,"default")],34))}}),A=["aria-expanded","aria-describedby","aria-description","aria-labelledby","aria-label","aria-required"],q=["onClick"],K=["id","disabled","placeholder"],U={class:"indicators-container"},H=["disabled"],j=["disabled"],P=["aria-label","aria-multiselectable"],R={key:0,class:"no-results"};return h(e.defineComponent({__name:"Select",props:e.mergeModels({options:{},displayedOptions:{},placeholder:{default:"Select an option"},isClearable:{type:Boolean,default:!0},isDisabled:{type:Boolean,default:!1},isSearchable:{type:Boolean,default:!0},isMulti:{type:Boolean,default:!1},closeOnSelect:{type:Boolean,default:!0},teleport:{default:void 0},inputId:{default:void 0},aria:{default:void 0},filterBy:{type:Function,default:(i,p,l)=>p.toLowerCase().includes(l.toLowerCase())},getOptionLabel:{type:Function,default:i=>i.label},getMultiValueLabel:{type:Function,default:i=>i.label}},{modelValue:{required:!0,validator:(i,p)=>p.isMulti?Array.isArray(i):!Array.isArray(i)},modelModifiers:{}}),emits:e.mergeModels(["optionSelected","optionDeselected","search"],["update:modelValue"]),setup(i,{emit:p}){const l=i,f=p,o=e.useModel(i,"modelValue"),d=e.ref(null),r=e.ref(null),v=e.ref(null),n=e.ref(""),s=e.ref(!1),b=e.ref(-1),g=e.computed(()=>{const t=l.displayedOptions||l.options,a=c=>c.filter(y=>!o.value.includes(y.value));if(l.isSearchable&&n.value){const c=t.filter(y=>{const M=l.isMulti?l.getMultiValueLabel(y):l.getOptionLabel(y);return l.filterBy(y,M,n.value)});return l.isMulti?a(c):c}return l.isMulti?a(t):t}),m=e.computed(()=>{if(l.isMulti)return o.value.map(a=>l.options.find(c=>c.value===a));const t=l.options.find(a=>a.value===o.value);return t?[t]:[]}),B=t=>{s.value=!0,b.value=0,t!=null&&t.focusInput&&r.value&&r.value.focus()},Z=()=>{s.value=!1,n.value=""},w=t=>{l.isMulti?o.value.push(t.value):o.value=t.value,f("optionSelected",t),n.value="",l.closeOnSelect&&(s.value=!1),r.value&&r.value.blur()},X=t=>{l.isMulti&&!l.isDisabled&&(o.value=o.value.filter(a=>a!==t.value),f("optionDeselected",t))},G=()=>{l.isMulti?(o.value=[],f("optionDeselected",null)):(o.value=void 0,f("optionDeselected",m.value[0])),s.value=!1,n.value="",r.value&&r.value.blur()},S=t=>{if(s.value){if(t.key==="ArrowDown"&&(t.preventDefault(),b.value=Math.min(b.value+1,g.value.length-1)),t.key==="ArrowUp"&&(t.preventDefault(),b.value=Math.max(b.value-1,0)),t.key==="Enter"){const c=g.value[b.value];t.preventDefault(),c&&w(c)}if(t.code==="Space"&&n.value.length===0){const c=g.value[b.value];t.preventDefault(),c&&w(c)}t.key==="Escape"&&(t.preventDefault(),s.value=!1,n.value="");const a=l.isMulti?o.value.length>0:!!o.value;t.key==="Backspace"&&n.value.length===0&&a&&(t.preventDefault(),l.isMulti?o.value=o.value.slice(0,-1):o.value=void 0)}},J=t=>{!s.value&&n.value.length===0&&(t.preventDefault(),t.stopImmediatePropagation(),B())},Q=t=>{t.key==="Tab"?Z():t.key==="Space"&&J(t)},C=t=>{d.value&&!d.value.contains(t.target)&&(s.value=!1,n.value="")},$=()=>{if(d.value){const t=d.value.getBoundingClientRect();return{left:`${t.x}px`,top:`${t.y+t.height}px`}}return console.warn("Unable to calculate dynamic menu position because of missing internal DOM reference."),{top:"0px",left:"0px"}};return e.watch(()=>n.value,()=>{f("search",n.value),n.value&&!s.value&&B()}),e.onMounted(()=>{document.addEventListener("click",C),document.addEventListener("keydown",S)}),e.onBeforeUnmount(()=>{document.removeEventListener("click",C),document.removeEventListener("keydown",S)}),(t,a)=>{var c,y,M,D;return e.openBlock(),e.createElementBlock("div",{ref_key:"container",ref:d,dir:"auto",class:e.normalizeClass(["vue-select",{open:s.value,typing:s.value&&n.value.length>0,disabled:t.isDisabled}])},[e.createElementVNode("div",{class:e.normalizeClass(["control",{focused:s.value}])},[e.createElementVNode("div",{class:e.normalizeClass(["value-container",{multi:t.isMulti}]),role:"combobox","aria-expanded":s.value,"aria-describedby":t.placeholder,"aria-description":t.placeholder,"aria-labelledby":(c=t.aria)==null?void 0:c.labelledby,"aria-label":m.value.length?m.value.map(t.isMulti?t.getMultiValueLabel:t.getOptionLabel).join(", "):"","aria-required":(y=t.aria)==null?void 0:y.required},[!l.isMulti&&m.value[0]?(e.openBlock(),e.createElementBlock("div",{key:0,class:"single-value",onClick:a[0]||(a[0]=u=>B({focusInput:!0}))},[e.renderSlot(t.$slots,"value",{option:m.value[0]},()=>[e.createTextVNode(e.toDisplayString(t.getOptionLabel(m.value[0])),1)],!0)])):e.createCommentVNode("",!0),l.isMulti&&m.value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(m.value,(u,k)=>(e.openBlock(),e.createElementBlock("button",{key:k,type:"button",class:"multi-value",onClick:W=>X(u)},[e.createTextVNode(e.toDisplayString(t.getMultiValueLabel(u))+" ",1),e.createVNode(V)],8,q))),128)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{id:t.inputId,ref_key:"input",ref:r,"onUpdate:modelValue":a[1]||(a[1]=u=>n.value=u),class:"search-input",type:"text","aria-autocomplete":"list",autocapitalize:"none",autocomplete:"off",autocorrect:"off",spellcheck:"false",tabindex:"0",disabled:t.isDisabled,placeholder:m.value.length===0?t.placeholder:"",onMousedown:a[2]||(a[2]=u=>B()),onKeydown:Q},null,40,K),[[e.vModelText,n.value]])],10,A),e.createElementVNode("div",U,[m.value.length>0&&t.isClearable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"clear-button",tabindex:"-1",disabled:t.isDisabled,onClick:G},[e.renderSlot(t.$slots,"clear",{},()=>[e.createVNode(V)],!0)],8,H)):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"button",class:"dropdown-icon",tabindex:"-1",disabled:t.isDisabled,onClick:a[3]||(a[3]=u=>B({focusInput:!0}))},[e.renderSlot(t.$slots,"dropdown",{},()=>[e.createVNode(N)],!0)],8,j)])],2),(e.openBlock(),e.createBlock(e.Teleport,{to:t.teleport,disabled:!t.teleport},[s.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"menu",ref:v,class:"menu",role:"listbox","aria-label":(M=t.aria)==null?void 0:M.labelledby,"aria-multiselectable":t.isMulti,style:e.normalizeStyle({width:l.teleport?`${(D=d.value)==null?void 0:D.getBoundingClientRect().width}px`:"100%",top:l.teleport?$().top:"unset",left:l.teleport?$().left:"unset"})},[e.renderSlot(t.$slots,"menu-header",{},void 0,!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value,(u,k)=>(e.openBlock(),e.createBlock(x,{key:k,type:"button",class:e.normalizeClass(["menu-option",{focused:b.value===k,selected:u.value===o.value}]),menu:v.value,index:k,"is-focused":b.value===k,"is-selected":u.value===o.value,onSelect:W=>w(u)},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"option",{option:u},()=>[e.createTextVNode(e.toDisplayString(t.getOptionLabel(u)),1)],!0)]),_:2},1032,["class","menu","index","is-focused","is-selected","onSelect"]))),128)),g.value.length===0?(e.openBlock(),e.createElementBlock("div",R,[e.renderSlot(t.$slots,"no-options",{},()=>[e.createTextVNode(" No results found ")],!0)])):e.createCommentVNode("",!0)],12,P)):e.createCommentVNode("",!0)],8,["to","disabled"]))],2)}}}),[["__scopeId","data-v-0d3c3f89"]])});
+(function(){"use strict";try{if(typeof document!="undefined"){var o=document.createElement("style");o.appendChild(document.createTextNode(":root{--vs-input-bg: #fff;--vs-input-outline: #3b82f6;--vs-input-placeholder-color: #52525b;--vs-padding: .25rem .5rem;--vs-border: 1px solid #e4e4e7;--vs-border-radius: 4px;--vs-font-size: 16px;--vs-font-weight: 400;--vs-font-family: inherit;--vs-text-color: #18181b;--vs-line-height: 1.5;--vs-menu-offset-top: 8px;--vs-menu-height: 200px;--vs-menu-padding: 0;--vs-menu-border: 1px solid #e4e4e7;--vs-menu-bg: #fff;--vs-menu-box-shadow: none;--vs-menu-z-index: 2;--vs-option-padding: 8px 12px;--vs-option-font-size: var(--vs-font-size);--vs-option-font-weight: var(--vs-font-weight);--vs-option-text-color: var(--vs-text-color);--vs-option-bg: var(--vs-menu-bg);--vs-option-hover-color: #dbeafe;--vs-option-focused-color: var(--vs-option-hover-color);--vs-option-selected-color: #93c5fd;--vs-option-disabled-color: #f4f4f5;--vs-option-disabled-text-color: #52525b;--vs-multi-value-gap: 4px;--vs-multi-value-padding: 4px;--vs-multi-value-font-size: 14px;--vs-multi-value-font-weight: 400;--vs-multi-value-line-height: 1;--vs-multi-value-text-color: #3f3f46;--vs-multi-value-bg: #f4f4f5;--vs-multi-value-xmark-size: 16px;--vs-multi-value-xmark-color: var(--vs-multi-value-text-color);--vs-indicators-gap: 4px;--vs-icon-size: 20px;--vs-icon-color: var(--vs-text-color);--vs-dropdown-transition: transform .25s ease-out}.vue-select[data-v-e46c3bc1]{position:relative;box-sizing:border-box;width:100%}.vue-select[data-v-e46c3bc1] *{box-sizing:border-box}.vue-select.open .single-value[data-v-e46c3bc1]{position:absolute;opacity:.4}.vue-select.open .dropdown-icon[data-v-e46c3bc1]{transform:rotate(180deg)}.vue-select.typing .single-value[data-v-e46c3bc1]{opacity:0}.control[data-v-e46c3bc1]{display:flex;min-height:32px;border:var(--vs-border);border-radius:var(--vs-border-radius);background-color:var(--vs-input-bg)}.control.focused[data-v-e46c3bc1]{box-shadow:0 0 0 1px var(--vs-input-outline);border-color:var(--vs-input-outline)}.value-container[data-v-e46c3bc1]{position:relative;display:flex;flex-wrap:wrap;align-items:center;flex-basis:100%;flex-grow:1;padding:var(--vs-padding)}.value-container.multi[data-v-e46c3bc1]{gap:var(--vs-multi-value-gap)}.single-value[data-v-e46c3bc1]{display:flex;align-items:center;font-size:var(--vs-font-size);font-weight:var(--vs-font-weight);font-family:var(--vs-font-family);line-height:var(--vs-line-height);color:var(--vs-text-color);z-index:0}.multi-value[data-v-e46c3bc1]{appearance:none;display:flex;align-items:center;gap:var(--vs-multi-value-gap);padding:var(--vs-multi-value-padding);margin:0;border:0;font-size:var(--vs-multi-value-font-size);font-weight:var(--vs-multi-value-font-weight);color:var(--vs-multi-value-text-color);line-height:var(--vs-multi-value-line-height);background:var(--vs-multi-value-bg);outline:none;cursor:pointer}.multi-value svg[data-v-e46c3bc1]{width:var(--vs-multi-value-xmark-size);height:var(--vs-multi-value-xmark-size);fill:var(--vs-multi-value-xmark-color)}.search-input[data-v-e46c3bc1]{appearance:none;display:inline-block;max-width:100%;flex-grow:1;width:0;margin:0;padding:0;border:0;background:none;font-size:var(--vs-font-size);font-family:var(--vs-font-family);line-height:var(--vs-line-height);color:var(--vs-text-color);outline:none;z-index:1}.search-input[data-v-e46c3bc1]::placeholder{color:var(--vs-input-placeholder-color)}.indicators-container[data-v-e46c3bc1]{display:flex;align-items:center;flex-shrink:0;gap:var(--vs-indicators-gap);padding:var(--vs-padding)}.clear-button[data-v-e46c3bc1]{appearance:none;display:inline-block;padding:0;margin:0;border:0;width:var(--vs-icon-size);height:var(--vs-icon-size);fill:var(--vs-icon-color);background:none;outline:none;cursor:pointer}.dropdown-icon[data-v-e46c3bc1]{appearance:none;display:inline-block;padding:0;margin:0;border:0;width:var(--vs-icon-size);height:var(--vs-icon-size);fill:var(--vs-icon-color);background:none;outline:none;cursor:pointer;transition:var(--vs-dropdown-transition)}.menu[data-v-e46c3bc1]{position:absolute;left:0;right:0;padding:var(--vs-menu-padding);margin-top:var(--vs-menu-offset-top);max-height:var(--vs-menu-height);overflow-y:auto;border:var(--vs-menu-border);border-radius:var(--vs-border-radius);box-shadow:var(--vs-menu-box-shadow);background-color:var(--vs-menu-bg);z-index:var(--vs-menu-z-index)}.menu-option[data-v-e46c3bc1]{display:flex;width:100%;border:0;margin:0;padding:var(--vs-option-padding);font-size:var(--vs-option-font-size);font-weight:var(--vs-option-font-weight);font-family:var(--vs-font-family);color:var(--vs-option-text-color);background-color:var(--vs-option-bg);text-align:-webkit-auto;cursor:pointer}.menu-option[data-v-e46c3bc1]:hover{background-color:var(--vs-option-hover-color)}.menu-option.focused[data-v-e46c3bc1]{background-color:var(--vs-option-focused-color)}.menu-option.selected[data-v-e46c3bc1]{background-color:var(--vs-option-selected-color)}.menu-option.disabled[data-v-e46c3bc1]{background-color:var(--vs-option-disabled-color);color:var(--vs-option-disabled-text-color)}.no-results[data-v-e46c3bc1]{padding:var(--vs-option-padding);font-size:var(--vs-font-size);font-family:var(--vs-font-family);color:var(--vs-text-color)}")),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(e,g){typeof exports=="object"&&typeof module!="undefined"?module.exports=g(require("vue")):typeof define=="function"&&define.amd?define(["vue"],g):(e=typeof globalThis!="undefined"?globalThis:e||self,e["vue3-select-component"]=g(e.Vue))})(this,function(e){"use strict";const g=(r,p)=>{const l=r.__vccOpts||r;for(const[b,n]of p)l[b]=n;return l},O={},E={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},L=[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z","clip-rule":"evenodd"},null,-1)];function _(r,p){return e.openBlock(),e.createElementBlock("svg",E,L)}const N=g(O,[["render",_]]),I={},T={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},x=[e.createElementVNode("path",{d:"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"},null,-1)];function F(r,p){return e.openBlock(),e.createElementBlock("svg",T,x)}const V=g(I,[["render",F]]),z=["aria-disabled","aria-selected"],A=e.defineComponent({__name:"MenuOption",props:{menu:{},index:{},isFocused:{type:Boolean},isSelected:{type:Boolean},isDisabled:{type:Boolean}},emits:["select"],setup(r,{emit:p}){const l=r,b=p,n=e.ref(null);return e.watch(()=>l.isFocused,()=>{if(l.isFocused&&l.menu){const c=l.menu.children[l.index],u=c.offsetTop,B=u+c.clientHeight,s=l.menu.scrollTop,d=l.menu.clientHeight;u<s?l.menu.scrollTop=u:B>s+d&&(l.menu.scrollTop=B-d)}}),(c,u)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"option",ref:n,tabindex:"-1",role:"option",class:e.normalizeClass({focused:c.isFocused,selected:c.isSelected,disabled:c.isDisabled}),"aria-disabled":c.isDisabled,"aria-selected":c.isSelected,onClick:u[0]||(u[0]=B=>b("select")),onKeydown:u[1]||(u[1]=e.withKeys(B=>b("select"),["enter"]))},[e.renderSlot(c.$slots,"default")],42,z))}}),q=["aria-expanded","aria-describedby","aria-description","aria-labelledby","aria-label","aria-required"],K=["onClick"],U=["id","disabled","placeholder"],H={class:"indicators-container"},j=["disabled"],P=["disabled"],R=["aria-label","aria-multiselectable"],Z={key:0,class:"no-results"};return g(e.defineComponent({__name:"Select",props:e.mergeModels({options:{},displayedOptions:{},placeholder:{default:"Select an option"},isClearable:{type:Boolean,default:!0},isDisabled:{type:Boolean,default:!1},isSearchable:{type:Boolean,default:!0},isMulti:{type:Boolean,default:!1},closeOnSelect:{type:Boolean,default:!0},teleport:{default:void 0},inputId:{default:void 0},aria:{default:void 0},filterBy:{type:Function,default:(r,p,l)=>p.toLowerCase().includes(l.toLowerCase())},getOptionLabel:{type:Function,default:r=>r.label},getMultiValueLabel:{type:Function,default:r=>r.label}},{modelValue:{required:!0,validator:(r,p)=>p.isMulti?Array.isArray(r):!Array.isArray(r)},modelModifiers:{}}),emits:e.mergeModels(["optionSelected","optionDeselected","search"],["update:modelValue"]),setup(r,{emit:p}){const l=r,b=p,n=e.useModel(r,"modelValue"),c=e.ref(null),u=e.ref(null),B=e.ref(null),s=e.ref(""),d=e.ref(!1),M=e.ref(-1),h=e.computed(()=>{const t=l.displayedOptions||l.options,o=f=>f.filter(a=>!n.value.includes(a.value));if(l.isSearchable&&s.value){const f=t.filter(a=>{const k=l.isMulti?l.getMultiValueLabel(a):l.getOptionLabel(a);return l.filterBy(a,k,s.value)});return l.isMulti?o(f):f}return l.isMulti?o(t):t}),y=e.computed(()=>{if(l.isMulti)return n.value.map(o=>l.options.find(f=>f.value===o));const t=l.options.find(o=>o.value===n.value);return t?[t]:[]}),w=t=>{d.value=!0,M.value=l.options.findIndex(o=>!o.disabled),t!=null&&t.focusInput&&u.value&&u.value.focus()},X=()=>{d.value=!1,s.value=""},S=t=>{t.disabled||(l.isMulti?n.value.push(t.value):n.value=t.value,b("optionSelected",t),s.value="",l.closeOnSelect&&(d.value=!1),u.value&&u.value.blur())},G=t=>{l.isMulti&&!l.isDisabled&&(n.value=n.value.filter(o=>o!==t.value),b("optionDeselected",t))},J=()=>{l.isMulti?(n.value=[],b("optionDeselected",null)):(n.value=void 0,b("optionDeselected",y.value[0])),d.value=!1,s.value="",u.value&&u.value.blur()},$=t=>{if(d.value){const o=M.value;if(t.key==="ArrowDown"){t.preventDefault();const a=h.value.findIndex((v,i)=>!v.disabled&&i>o),k=h.value.findIndex(v=>!v.disabled);M.value=a===-1?k:a}if(t.key==="ArrowUp"){t.preventDefault();const a=h.value.reduce((v,i,m)=>!i.disabled&&m<o?m:v,-1),k=h.value.reduce((v,i,m)=>i.disabled?v:m,-1);M.value=a===-1?k:a}if(t.key==="Enter"){const a=h.value[o];t.preventDefault(),a&&S(a)}if(t.code==="Space"&&s.value.length===0){const a=h.value[o];t.preventDefault(),a&&S(a)}t.key==="Escape"&&(t.preventDefault(),d.value=!1,s.value="");const f=l.isMulti?n.value.length>0:!!n.value;t.key==="Backspace"&&s.value.length===0&&f&&(t.preventDefault(),l.isMulti?n.value=n.value.slice(0,-1):n.value=void 0)}},Q=t=>{!d.value&&s.value.length===0&&(t.preventDefault(),t.stopImmediatePropagation(),w())},W=t=>{t.key==="Tab"?X():t.key==="Space"&&Q(t)},C=t=>{c.value&&!c.value.contains(t.target)&&(d.value=!1,s.value="")},D=()=>{if(c.value){const t=c.value.getBoundingClientRect();return{left:`${t.x}px`,top:`${t.y+t.height}px`}}return console.warn("Unable to calculate dynamic menu position because of missing internal DOM reference."),{top:"0px",left:"0px"}};return e.watch(()=>s.value,()=>{b("search",s.value),s.value&&!d.value&&w()}),e.onMounted(()=>{document.addEventListener("click",C),document.addEventListener("keydown",$)}),e.onBeforeUnmount(()=>{document.removeEventListener("click",C),document.removeEventListener("keydown",$)}),(t,o)=>{var f,a,k,v;return e.openBlock(),e.createElementBlock("div",{ref_key:"container",ref:c,dir:"auto",class:e.normalizeClass(["vue-select",{open:d.value,typing:d.value&&s.value.length>0,disabled:t.isDisabled}])},[e.createElementVNode("div",{class:e.normalizeClass(["control",{focused:d.value}])},[e.createElementVNode("div",{class:e.normalizeClass(["value-container",{multi:t.isMulti}]),role:"combobox","aria-expanded":d.value,"aria-describedby":t.placeholder,"aria-description":t.placeholder,"aria-labelledby":(f=t.aria)==null?void 0:f.labelledby,"aria-label":y.value.length?y.value.map(t.isMulti?t.getMultiValueLabel:t.getOptionLabel).join(", "):"","aria-required":(a=t.aria)==null?void 0:a.required},[!l.isMulti&&y.value[0]?(e.openBlock(),e.createElementBlock("div",{key:0,class:"single-value",onClick:o[0]||(o[0]=i=>w({focusInput:!0}))},[e.renderSlot(t.$slots,"value",{option:y.value[0]},()=>[e.createTextVNode(e.toDisplayString(t.getOptionLabel(y.value[0])),1)],!0)])):e.createCommentVNode("",!0),l.isMulti&&y.value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(y.value,(i,m)=>(e.openBlock(),e.createElementBlock("button",{key:m,type:"button",class:"multi-value",onClick:Y=>G(i)},[e.createTextVNode(e.toDisplayString(t.getMultiValueLabel(i))+" ",1),e.createVNode(V)],8,K))),128)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{id:t.inputId,ref_key:"input",ref:u,"onUpdate:modelValue":o[1]||(o[1]=i=>s.value=i),class:"search-input",type:"text","aria-autocomplete":"list",autocapitalize:"none",autocomplete:"off",autocorrect:"off",spellcheck:"false",tabindex:"0",disabled:t.isDisabled,placeholder:y.value.length===0?t.placeholder:"",onMousedown:o[2]||(o[2]=i=>w()),onKeydown:W},null,40,U),[[e.vModelText,s.value]])],10,q),e.createElementVNode("div",H,[y.value.length>0&&t.isClearable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"clear-button",tabindex:"-1",disabled:t.isDisabled,onClick:J},[e.renderSlot(t.$slots,"clear",{},()=>[e.createVNode(V)],!0)],8,j)):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"button",class:"dropdown-icon",tabindex:"-1",disabled:t.isDisabled,onClick:o[3]||(o[3]=i=>w({focusInput:!0}))},[e.renderSlot(t.$slots,"dropdown",{},()=>[e.createVNode(N)],!0)],8,P)])],2),(e.openBlock(),e.createBlock(e.Teleport,{to:t.teleport,disabled:!t.teleport},[d.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"menu",ref:B,class:"menu",role:"listbox","aria-label":(k=t.aria)==null?void 0:k.labelledby,"aria-multiselectable":t.isMulti,style:e.normalizeStyle({width:l.teleport?`${(v=c.value)==null?void 0:v.getBoundingClientRect().width}px`:"100%",top:l.teleport?D().top:"unset",left:l.teleport?D().left:"unset"})},[e.renderSlot(t.$slots,"menu-header",{},void 0,!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(i,m)=>(e.openBlock(),e.createBlock(A,{key:m,type:"button",class:e.normalizeClass(["menu-option",{focused:M.value===m,selected:i.value===n.value}]),menu:B.value,index:m,"is-focused":M.value===m,"is-selected":i.value===n.value,"is-disabled":i.disabled||!1,onSelect:Y=>S(i)},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"option",{option:i},()=>[e.createTextVNode(e.toDisplayString(t.getOptionLabel(i)),1)],!0)]),_:2},1032,["class","menu","index","is-focused","is-selected","is-disabled","onSelect"]))),128)),h.value.length===0?(e.openBlock(),e.createElementBlock("div",Z,[e.renderSlot(t.$slots,"no-options",{},()=>[e.createTextVNode(" No results found ")],!0)])):e.createCommentVNode("",!0)],12,R)):e.createCommentVNode("",!0)],8,["to","disabled"]))],2)}}}),[["__scopeId","data-v-e46c3bc1"]])});

dist/MenuOption.d.ts

@@ -9,2 +9,3 @@ declare function __VLS_template(): {
     isSelected: boolean;
+    isDisabled: boolean;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -17,2 +18,3 @@ select: () => void;
     isSelected: boolean;
+    isDisabled: boolean;
 }>>> & {
@@ -19,0 +21,0 @@ onSelect?: (() => any) | undefined;

dist/types.d.ts

 export type Option<T> = {
     label: string;
     value: T;
+    disabled?: boolean;
 };

package.json

 {
   "name": "vue3-select-component",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A flexible & modern select-input control for Vue 3.",
@@ -22,7 +22,2 @@ "author": "Thomas Cazade <[e-mail]>",
       "require": "./dist/index.umd.js"
-    },
-    "./dist/style.css": {
-      "types": "./dist/style.css",
-      "import": "./dist/style.css",
-      "require": "./dist/style.css"
     }
@@ -53,3 +48,3 @@ },
   "devDependencies": {
-    "@antfu/eslint-config": "2.21.1",
+    "@antfu/eslint-config": "2.21.2",
     "@tsconfig/node20": "20.1.4",
@@ -66,13 +61,14 @@ "@types/node": "20.14.9",
     "npm-run-all2": "6.2.0",
-    "postcss": "8.4.38",
+    "postcss": "8.4.39",
     "sass": "1.77.6",
     "typescript": "5.5.2",
-    "vite": "5.3.1",
+    "vite": "5.3.2",
+    "vite-plugin-css-injected-by-js": "3.5.1",
     "vite-plugin-dts": "3.9.1",
-    "vite-plugin-vue-devtools": "7.3.4",
+    "vite-plugin-vue-devtools": "7.3.5",
     "vitepress": "1.2.3",
     "vitest": "1.6.0",
-    "vue": "3.4.30",
-    "vue-tsc": "2.0.22"
+    "vue": "3.4.31",
+    "vue-tsc": "2.0.24"
   }
 }

README.md

@@ -50,4 +50,2 @@ # Vue3-Select-Component
 
-import "vue3-select-component/dist/style.css";
-
 const option = ref("");
@@ -81,4 +79,2 @@ </script>
 
-import "vue3-select-component/dist/style.css";
-
 type UserOption = Option<number> & { username: string };
@@ -85,0 +81,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45863

17.24%

Lines of code

566

9.06%

Worsened metrics

Dev dependency count

23

4.55%

Number of package files

12

-7.69%

Number of lines in readme file

102

-3.77%

Number of low supply chain risk alerts

3

200%

No dependency changes