vue3-select-component - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/index.es.js

@@ -1,12 +0,12 @@
-import { openBlock as s, createElementBlock as c, createElementVNode as g, defineComponent as z, ref as h, watch as H, normalizeClass as w, renderSlot as k, mergeModels as j, useModel as X, computed as F, onMounted as G, onBeforeUnmount as J, createTextVNode as L, toDisplayString as C, createCommentVNode as M, Fragment as N, renderList as x, createVNode as O, withDirectives as Q, withKeys as q, vModelText as W, createBlock as A, Teleport as Y, normalizeStyle as ee, withCtx as le } from "vue";
-const S = (n, l) => {
-  const t = n.__vccOpts || n;
-  for (const [v, r] of l)
-    t[v] = r;
-  return t;
-}, te = {}, ae = {
+import { openBlock as s, createElementBlock as c, createElementVNode as h, defineComponent as z, ref as y, watch as H, normalizeClass as w, renderSlot as g, mergeModels as j, useModel as X, computed as F, onMounted as G, onBeforeUnmount as J, createTextVNode as L, toDisplayString as C, createCommentVNode as M, Fragment as N, renderList as x, createVNode as O, withDirectives as Q, withKeys as q, vModelText as W, createBlock as A, Teleport as Y, normalizeStyle as ee, withCtx as te } from "vue";
+const S = (n, t) => {
+  const l = n.__vccOpts || n;
+  for (const [v, d] of t)
+    l[v] = d;
+  return l;
+}, le = {}, ae = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 20 20",
   fill: "currentColor"
-}, oe = /* @__PURE__ */ g("path", {
+}, oe = /* @__PURE__ */ h("path", {
   "fill-rule": "evenodd",
@@ -18,13 +18,13 @@ 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",
 ];
-function ue(n, l) {
+function ue(n, t) {
   return s(), c("svg", ae, ne);
 }
-const ie = /* @__PURE__ */ S(te, [["render", ue]]), se = {}, re = {
+const ie = /* @__PURE__ */ S(le, [["render", ue]]), se = {}, re = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 20 20",
   fill: "currentColor"
-}, de = /* @__PURE__ */ g("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), ce = [
+}, de = /* @__PURE__ */ h("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), ce = [
   de
 ];
-function ve(n, l) {
+function ve(n, t) {
   return s(), c("svg", re, ce);
@@ -41,10 +41,10 @@ }
   emits: ["select"],
-  setup(n, { emit: l }) {
-    const t = n, v = l, r = h(null);
+  setup(n, { emit: t }) {
+    const l = n, v = t, d = y(null);
     return H(
-      () => t.isFocused,
+      () => l.isFocused,
       () => {
-        if (t.isFocused && t.menu) {
-          const f = t.menu.children[t.index], a = f.offsetTop, u = a + f.clientHeight, d = t.menu.scrollTop, b = t.menu.clientHeight;
-          a < d ? t.menu.scrollTop = a : u > d + b && (t.menu.scrollTop = u - b);
+        if (l.isFocused && l.menu) {
+          const f = l.menu.children[l.index], a = f.offsetTop, u = a + f.clientHeight, r = l.menu.scrollTop, b = l.menu.clientHeight;
+          a < r ? l.menu.scrollTop = a : u > r + b && (l.menu.scrollTop = u - b);
         }
@@ -54,3 +54,3 @@ }
       ref_key: "option",
-      ref: r,
+      ref: d,
       tabindex: "-1",
@@ -62,3 +62,3 @@ role: "option",
     }, [
-      k(f.$slots, "default")
+      g(f.$slots, "default")
     ], 2));
@@ -83,3 +83,3 @@ }
     aria: { default: void 0 },
-    filterBy: { type: Function, default: (n, l, t) => l.toLowerCase().includes(t.toLowerCase()) },
+    filterBy: { type: Function, default: (n, t, l) => t.toLowerCase().includes(l.toLowerCase()) },
     getOptionLabel: { type: Function, default: (n) => n.label },
@@ -90,3 +90,3 @@ getMultiValueLabel: { type: Function, default: (n) => n.label }
       required: !0,
-      validator: (n, l) => l.isMulti ? Array.isArray(n) && n.every((t) => typeof t == "string") : typeof n == "string"
+      validator: (n, t) => t.isMulti ? Array.isArray(n) && n.every((l) => typeof l == "string") : typeof n == "string"
     },
@@ -97,33 +97,33 @@ modelModifiers: {}
   setup(n) {
-    const l = n, t = X(n, "modelValue"), v = h(null), r = h(null), f = h(null), a = h(""), u = h(!1), d = h(-1), b = F(() => {
+    const t = n, l = X(n, "modelValue"), v = y(null), d = y(null), f = y(null), a = y(""), u = y(!1), r = y(-1), b = F(() => {
       const e = (o) => o.filter(
-        (p) => !t.value.includes(p.value)
+        (p) => !l.value.includes(p.value)
       );
-      if (l.isSearchable && a.value) {
-        const o = l.options.filter((p) => {
-          const _ = l.isMulti ? l.getMultiValueLabel(p) : l.getOptionLabel(p);
-          return l.filterBy(p, _, a.value);
+      if (t.isSearchable && a.value) {
+        const o = t.options.filter((p) => {
+          const $ = t.isMulti ? t.getMultiValueLabel(p) : t.getOptionLabel(p);
+          return t.filterBy(p, $, a.value);
         });
-        return l.isMulti ? e(o) : o;
+        return t.isMulti ? e(o) : o;
       }
-      return l.isMulti ? e(l.options) : l.options;
+      return t.isMulti ? e(t.options) : t.options;
     }), m = F(() => {
-      if (l.isMulti)
-        return t.value.map((o) => l.options.find((p) => p.value === o));
-      const e = l.options.find((o) => o.value === t.value);
+      if (t.isMulti)
+        return l.value.map((o) => t.options.find((p) => p.value === o));
+      const e = t.options.find((o) => o.value === l.value);
       return e ? [e] : [];
-    }), $ = (e) => {
-      u.value = !0, d.value = 0, e != null && e.focusInput && r.value && r.value.focus();
+    }), k = (e) => {
+      u.value = !0, r.value = 0, e != null && e.focusInput && d.value && d.value.focus();
     }, K = () => {
       u.value = !1, a.value = "";
     }, B = (e) => {
-      l.isMulti ? t.value = [...t.value, e] : t.value = e, a.value = "", l.closeOnSelect && (u.value = !1), r.value && r.value.blur();
+      t.isMulti ? l.value = [...l.value, e] : l.value = e, a.value = "", t.closeOnSelect && (u.value = !1), d.value && d.value.blur();
     }, P = (e) => {
-      l.isMulti && (t.value = t.value.filter((o) => o !== e));
+      t.isMulti && (l.value = l.value.filter((o) => o !== e));
     }, R = () => {
-      l.isMulti ? t.value = [] : t.value = "", u.value = !1, a.value = "", r.value && r.value.blur();
+      t.isMulti ? l.value = [] : l.value = "", u.value = !1, a.value = "", d.value && d.value.blur();
     }, D = (e) => {
-      u.value && (e.key === "ArrowDown" && (e.preventDefault(), d.value = Math.min(d.value + 1, b.value.length - 1)), e.key === "ArrowUp" && (e.preventDefault(), d.value = Math.max(d.value - 1, 0)), e.key === "Enter" && (e.preventDefault(), B(b.value[d.value].value)), e.code === "Space" && a.value.length === 0 && (e.preventDefault(), B(b.value[d.value].value)), e.key === "Escape" && (e.preventDefault(), u.value = !1, a.value = ""), e.key === "Backspace" && a.value.length === 0 && t.value.length > 0 && (e.preventDefault(), l.isMulti ? t.value = t.value.slice(0, -1) : t.value = ""));
+      u.value && (e.key === "ArrowDown" && (e.preventDefault(), r.value = Math.min(r.value + 1, b.value.length - 1)), e.key === "ArrowUp" && (e.preventDefault(), r.value = Math.max(r.value - 1, 0)), e.key === "Enter" && (e.preventDefault(), B(b.value[r.value].value)), e.code === "Space" && a.value.length === 0 && (e.preventDefault(), B(b.value[r.value].value)), e.key === "Escape" && (e.preventDefault(), u.value = !1, a.value = ""), e.key === "Backspace" && a.value.length === 0 && l.value.length > 0 && (e.preventDefault(), t.isMulti ? l.value = l.value.slice(0, -1) : l.value = ""));
     }, Z = (e) => {
-      !u.value && a.value.length === 0 && (e.preventDefault(), e.stopImmediatePropagation(), $());
+      !u.value && a.value.length === 0 && (e.preventDefault(), e.stopImmediatePropagation(), k());
     }, V = (e) => {
@@ -144,3 +144,3 @@ v.value && !v.value.contains(e.target) && (u.value = !1, a.value = "");
       () => {
-        a.value && !u.value && $();
+        a.value && !u.value && k();
       }
@@ -152,3 +152,3 @@ ), G(() => {
     }), (e, o) => {
-      var p, _, T, E;
+      var p, $, T, E;
       return s(), c("div", {
@@ -160,6 +160,6 @@ ref_key: "container",
       }, [
-        g("div", {
+        h("div", {
           class: w(["control", { focused: u.value }])
         }, [
-          g("div", {
+          h("div", {
             class: w(["value-container", { multi: e.isMulti }]),
@@ -172,13 +172,10 @@ role: "combobox",
             "aria-label": m.value.length ? m.value.map(e.getOptionLabel).join(", ") : "",
-            "aria-required": (_ = e.aria) == null ? void 0 : _.required
+            "aria-required": ($ = e.aria) == null ? void 0 : $.required
           }, [
-            !l.isMulti && m.value[0] ? (s(), c("div", {
+            !t.isMulti && m.value[0] ? (s(), c("div", {
               key: 0,
               class: "single-value",
-              onClick: o[0] || (o[0] = (i) => {
-                var y;
-                return (y = r.value) == null ? void 0 : y.focus();
-              })
+              onClick: o[0] || (o[0] = (i) => k({ focusInput: !0 }))
             }, [
-              k(e.$slots, "value", {
+              g(e.$slots, "value", {
                 option: m.value[0]
@@ -189,7 +186,7 @@ }, () => [
             ])) : M("", !0),
-            l.isMulti && m.value.length ? (s(!0), c(N, { key: 1 }, x(m.value, (i) => (s(), c("button", {
+            t.isMulti && m.value.length ? (s(!0), c(N, { key: 1 }, x(m.value, (i) => (s(), c("button", {
               key: i.value,
               type: "button",
               class: "multi-value",
-              onClick: (y) => P(i.value)
+              onClick: (_) => P(i.value)
             }, [
@@ -199,6 +196,6 @@ L(C(e.getMultiValueLabel(i)) + " ", 1),
             ], 8, me))), 128)) : M("", !0),
-            Q(g("input", {
+            Q(h("input", {
               id: e.inputId,
               ref_key: "input",
-              ref: r,
+              ref: d,
               "onUpdate:modelValue": o[1] || (o[1] = (i) => a.value = i),
@@ -215,3 +212,3 @@ class: "search-input",
               placeholder: m.value.length === 0 ? e.placeholder : "",
-              onMousedown: o[2] || (o[2] = (i) => $()),
+              onMousedown: o[2] || (o[2] = (i) => k()),
               onKeydown: [
@@ -225,3 +222,3 @@ q(K, ["tab"]),
           ], 10, fe),
-          g("div", ye, [
+          h("div", ye, [
             m.value.length > 0 && e.isClearable ? (s(), c("button", {
@@ -235,7 +232,7 @@ key: 0,
             }, [
-              k(e.$slots, "clear", {}, () => [
+              g(e.$slots, "clear", {}, () => [
                 O(U)
               ], !0)
             ], 8, he)) : M("", !0),
-            g("button", {
+            h("button", {
               type: "button",
@@ -245,5 +242,5 @@ class: "dropdown-icon",
               disabled: e.isDisabled,
-              onClick: o[3] || (o[3] = (i) => $({ focusInput: !0 }))
+              onClick: o[3] || (o[3] = (i) => k({ focusInput: !0 }))
             }, [
-              k(e.$slots, "dropdown", {}, () => [
+              g(e.$slots, "dropdown", {}, () => [
                 O(ie)
@@ -267,19 +264,19 @@ ], !0)
             style: ee({
-              width: l.teleport ? `${(E = v.value) == null ? void 0 : E.getBoundingClientRect().width}px` : "100%",
-              top: l.teleport ? I().top : "unset",
-              left: l.teleport ? I().left : "unset"
+              width: t.teleport ? `${(E = v.value) == null ? void 0 : E.getBoundingClientRect().width}px` : "100%",
+              top: t.teleport ? I().top : "unset",
+              left: t.teleport ? I().left : "unset"
             })
           }, [
-            (s(!0), c(N, null, x(b.value, (i, y) => (s(), A(pe, {
+            (s(!0), c(N, null, x(b.value, (i, _) => (s(), A(pe, {
               key: i.value,
               type: "button",
-              class: w(["menu-option", { focused: d.value === y, selected: i.value === t.value }]),
+              class: w(["menu-option", { focused: r.value === _, selected: i.value === l.value }]),
               menu: f.value,
-              index: y,
-              "is-focused": d.value === y,
-              "is-selected": i.value === t.value,
+              index: _,
+              "is-focused": r.value === _,
+              "is-selected": i.value === l.value,
               onSelect: ($e) => B(i.value)
             }, {
-              default: le(() => [
-                k(e.$slots, "option", { option: i }, () => [
+              default: te(() => [
+                g(e.$slots, "option", { option: i }, () => [
                   L(C(e.getOptionLabel(i)), 1)
@@ -291,3 +288,3 @@ ], !0)
             b.value.length === 0 ? (s(), c("div", Me, [
-              k(e.$slots, "no-options", {}, () => [
+              g(e.$slots, "no-options", {}, () => [
                 L(" No results found ")
@@ -301,5 +298,5 @@ ], !0)
   }
-}), Le = /* @__PURE__ */ S(we, [["__scopeId", "data-v-3cab74e1"]]);
+}), Le = /* @__PURE__ */ S(we, [["__scopeId", "data-v-5b4f6ad0"]]);
 export {
   Le as default
 };

dist/index.umd.js

@@ -1,1 +0,1 @@
-(function(e,y){typeof exports=="object"&&typeof module!="undefined"?module.exports=y(require("vue")):typeof define=="function"&&define.amd?define(["vue"],y):(e=typeof globalThis!="undefined"?globalThis:e||self,e["vue3-select-component"]=y(e.Vue))})(this,function(e){"use strict";const y=(i,l)=>{const o=i.__vccOpts||i;for(const[u,c]of l)o[u]=c;return o},$={},S={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},E=[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 L(i,l){return e.openBlock(),e.createElementBlock("svg",S,E)}const N=y($,[["render",L]]),D={},O={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},T=[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 x(i,l){return e.openBlock(),e.createElementBlock("svg",O,T)}const B=y(D,[["render",x]]),F=e.defineComponent({__name:"MenuOption",props:{menu:{},index:{},isFocused:{type:Boolean},isSelected:{type:Boolean}},emits:["select"],setup(i,{emit:l}){const o=i,u=l,c=e.ref(null);return e.watch(()=>o.isFocused,()=>{if(o.isFocused&&o.menu){const f=o.menu.children[o.index],n=f.offsetTop,s=n+f.clientHeight,d=o.menu.scrollTop,b=o.menu.clientHeight;n<d?o.menu.scrollTop=n:s>d+b&&(o.menu.scrollTop=s-b)}}),(f,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"option",ref:c,tabindex:"-1",role:"option",class:e.normalizeClass({focused:f.isFocused,selected:f.isSelected}),"aria-disabled":!1,onClick:n[0]||(n[0]=s=>u("select"))},[e.renderSlot(f.$slots,"default")],2))}}),I=["aria-expanded","aria-describedby","aria-description","aria-labelledby","aria-label","aria-required"],z=["onClick"],q=["id","disabled","placeholder"],A={class:"indicators-container"},U=["disabled"],H=["disabled"],K=["aria-label","aria-multiselectable"],j={key:0,class:"no-results"};return y(e.defineComponent({__name:"Select",props:e.mergeModels({options:{},autoscroll:{type:Boolean,default:!0},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,l,o)=>l.toLowerCase().includes(o.toLowerCase())},getOptionLabel:{type:Function,default:i=>i.label},getMultiValueLabel:{type:Function,default:i=>i.label}},{modelValue:{required:!0,validator:(i,l)=>l.isMulti?Array.isArray(i)&&i.every(o=>typeof o=="string"):typeof i=="string"},modelModifiers:{}}),emits:["update:modelValue"],setup(i){const l=i,o=e.useModel(i,"modelValue"),u=e.ref(null),c=e.ref(null),f=e.ref(null),n=e.ref(""),s=e.ref(!1),d=e.ref(-1),b=e.computed(()=>{const t=a=>a.filter(p=>!o.value.includes(p.value));if(l.isSearchable&&n.value){const a=l.options.filter(p=>{const k=l.isMulti?l.getMultiValueLabel(p):l.getOptionLabel(p);return l.filterBy(p,k,n.value)});return l.isMulti?t(a):a}return l.isMulti?t(l.options):l.options}),m=e.computed(()=>{if(l.isMulti)return o.value.map(a=>l.options.find(p=>p.value===a));const t=l.options.find(a=>a.value===o.value);return t?[t]:[]}),v=t=>{s.value=!0,d.value=0,t!=null&&t.focusInput&&c.value&&c.value.focus()},P=()=>{s.value=!1,n.value=""},g=t=>{l.isMulti?o.value=[...o.value,t]:o.value=t,n.value="",l.closeOnSelect&&(s.value=!1),c.value&&c.value.blur()},R=t=>{l.isMulti&&(o.value=o.value.filter(a=>a!==t))},Z=()=>{l.isMulti?o.value=[]:o.value="",s.value=!1,n.value="",c.value&&c.value.blur()},M=t=>{s.value&&(t.key==="ArrowDown"&&(t.preventDefault(),d.value=Math.min(d.value+1,b.value.length-1)),t.key==="ArrowUp"&&(t.preventDefault(),d.value=Math.max(d.value-1,0)),t.key==="Enter"&&(t.preventDefault(),g(b.value[d.value].value)),t.code==="Space"&&n.value.length===0&&(t.preventDefault(),g(b.value[d.value].value)),t.key==="Escape"&&(t.preventDefault(),s.value=!1,n.value=""),t.key==="Backspace"&&n.value.length===0&&o.value.length>0&&(t.preventDefault(),l.isMulti?o.value=o.value.slice(0,-1):o.value=""))},X=t=>{!s.value&&n.value.length===0&&(t.preventDefault(),t.stopImmediatePropagation(),v())},w=t=>{u.value&&!u.value.contains(t.target)&&(s.value=!1,n.value="")},V=()=>{if(u.value){const t=u.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,()=>{n.value&&!s.value&&v()}),e.onMounted(()=>{document.addEventListener("click",w),document.addEventListener("keydown",M)}),e.onBeforeUnmount(()=>{document.removeEventListener("click",w),document.removeEventListener("keydown",M)}),(t,a)=>{var p,k,C,_;return e.openBlock(),e.createElementBlock("div",{ref_key:"container",ref:u,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":(p=t.aria)==null?void 0:p.labelledby,"aria-label":m.value.length?m.value.map(t.getOptionLabel).join(", "):"","aria-required":(k=t.aria)==null?void 0:k.required},[!l.isMulti&&m.value[0]?(e.openBlock(),e.createElementBlock("div",{key:0,class:"single-value",onClick:a[0]||(a[0]=r=>{var h;return(h=c.value)==null?void 0:h.focus()})},[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,r=>(e.openBlock(),e.createElementBlock("button",{key:r.value,type:"button",class:"multi-value",onClick:h=>R(r.value)},[e.createTextVNode(e.toDisplayString(t.getMultiValueLabel(r))+" ",1),e.createVNode(B)],8,z))),128)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{id:t.inputId,ref_key:"input",ref:c,"onUpdate:modelValue":a[1]||(a[1]=r=>n.value=r),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]=r=>v()),onKeydown:[e.withKeys(P,["tab"]),e.withKeys(X,["space"])]},null,40,q),[[e.vModelText,n.value]])],10,I),e.createElementVNode("div",A,[m.value.length>0&&t.isClearable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"clear-button",tabindex:"-1",disabled:t.isDisabled,onClick:Z},[e.renderSlot(t.$slots,"clear",{},()=>[e.createVNode(B)],!0)],8,U)):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"button",class:"dropdown-icon",tabindex:"-1",disabled:t.isDisabled,onClick:a[3]||(a[3]=r=>v({focusInput:!0}))},[e.renderSlot(t.$slots,"dropdown",{},()=>[e.createVNode(N)],!0)],8,H)])],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:f,class:"menu",role:"listbox","aria-label":(C=t.aria)==null?void 0:C.labelledby,"aria-multiselectable":t.isMulti,style:e.normalizeStyle({width:l.teleport?`${(_=u.value)==null?void 0:_.getBoundingClientRect().width}px`:"100%",top:l.teleport?V().top:"unset",left:l.teleport?V().left:"unset"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,(r,h)=>(e.openBlock(),e.createBlock(F,{key:r.value,type:"button",class:e.normalizeClass(["menu-option",{focused:d.value===h,selected:r.value===o.value}]),menu:f.value,index:h,"is-focused":d.value===h,"is-selected":r.value===o.value,onSelect:Y=>g(r.value)},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"option",{option:r},()=>[e.createTextVNode(e.toDisplayString(t.getOptionLabel(r)),1)],!0)]),_:2},1032,["class","menu","index","is-focused","is-selected","onSelect"]))),128)),b.value.length===0?(e.openBlock(),e.createElementBlock("div",j,[e.renderSlot(t.$slots,"no-options",{},()=>[e.createTextVNode(" No results found ")],!0)])):e.createCommentVNode("",!0)],12,K)):e.createCommentVNode("",!0)],8,["to","disabled"]))],2)}}}),[["__scopeId","data-v-3cab74e1"]])});
+(function(e,y){typeof exports=="object"&&typeof module!="undefined"?module.exports=y(require("vue")):typeof define=="function"&&define.amd?define(["vue"],y):(e=typeof globalThis!="undefined"?globalThis:e||self,e["vue3-select-component"]=y(e.Vue))})(this,function(e){"use strict";const y=(i,l)=>{const o=i.__vccOpts||i;for(const[u,d]of l)o[u]=d;return o},$={},S={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},E=[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 L(i,l){return e.openBlock(),e.createElementBlock("svg",S,E)}const N=y($,[["render",L]]),D={},O={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"},T=[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 I(i,l){return e.openBlock(),e.createElementBlock("svg",O,T)}const B=y(D,[["render",I]]),x=e.defineComponent({__name:"MenuOption",props:{menu:{},index:{},isFocused:{type:Boolean},isSelected:{type:Boolean}},emits:["select"],setup(i,{emit:l}){const o=i,u=l,d=e.ref(null);return e.watch(()=>o.isFocused,()=>{if(o.isFocused&&o.menu){const f=o.menu.children[o.index],n=f.offsetTop,s=n+f.clientHeight,c=o.menu.scrollTop,b=o.menu.clientHeight;n<c?o.menu.scrollTop=n:s>c+b&&(o.menu.scrollTop=s-b)}}),(f,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"option",ref:d,tabindex:"-1",role:"option",class:e.normalizeClass({focused:f.isFocused,selected:f.isSelected}),"aria-disabled":!1,onClick:n[0]||(n[0]=s=>u("select"))},[e.renderSlot(f.$slots,"default")],2))}}),F=["aria-expanded","aria-describedby","aria-description","aria-labelledby","aria-label","aria-required"],z=["onClick"],q=["id","disabled","placeholder"],A={class:"indicators-container"},U=["disabled"],H=["disabled"],K=["aria-label","aria-multiselectable"],j={key:0,class:"no-results"};return y(e.defineComponent({__name:"Select",props:e.mergeModels({options:{},autoscroll:{type:Boolean,default:!0},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,l,o)=>l.toLowerCase().includes(o.toLowerCase())},getOptionLabel:{type:Function,default:i=>i.label},getMultiValueLabel:{type:Function,default:i=>i.label}},{modelValue:{required:!0,validator:(i,l)=>l.isMulti?Array.isArray(i)&&i.every(o=>typeof o=="string"):typeof i=="string"},modelModifiers:{}}),emits:["update:modelValue"],setup(i){const l=i,o=e.useModel(i,"modelValue"),u=e.ref(null),d=e.ref(null),f=e.ref(null),n=e.ref(""),s=e.ref(!1),c=e.ref(-1),b=e.computed(()=>{const t=a=>a.filter(p=>!o.value.includes(p.value));if(l.isSearchable&&n.value){const a=l.options.filter(p=>{const v=l.isMulti?l.getMultiValueLabel(p):l.getOptionLabel(p);return l.filterBy(p,v,n.value)});return l.isMulti?t(a):a}return l.isMulti?t(l.options):l.options}),m=e.computed(()=>{if(l.isMulti)return o.value.map(a=>l.options.find(p=>p.value===a));const t=l.options.find(a=>a.value===o.value);return t?[t]:[]}),h=t=>{s.value=!0,c.value=0,t!=null&&t.focusInput&&d.value&&d.value.focus()},P=()=>{s.value=!1,n.value=""},g=t=>{l.isMulti?o.value=[...o.value,t]:o.value=t,n.value="",l.closeOnSelect&&(s.value=!1),d.value&&d.value.blur()},R=t=>{l.isMulti&&(o.value=o.value.filter(a=>a!==t))},Z=()=>{l.isMulti?o.value=[]:o.value="",s.value=!1,n.value="",d.value&&d.value.blur()},M=t=>{s.value&&(t.key==="ArrowDown"&&(t.preventDefault(),c.value=Math.min(c.value+1,b.value.length-1)),t.key==="ArrowUp"&&(t.preventDefault(),c.value=Math.max(c.value-1,0)),t.key==="Enter"&&(t.preventDefault(),g(b.value[c.value].value)),t.code==="Space"&&n.value.length===0&&(t.preventDefault(),g(b.value[c.value].value)),t.key==="Escape"&&(t.preventDefault(),s.value=!1,n.value=""),t.key==="Backspace"&&n.value.length===0&&o.value.length>0&&(t.preventDefault(),l.isMulti?o.value=o.value.slice(0,-1):o.value=""))},X=t=>{!s.value&&n.value.length===0&&(t.preventDefault(),t.stopImmediatePropagation(),h())},w=t=>{u.value&&!u.value.contains(t.target)&&(s.value=!1,n.value="")},V=()=>{if(u.value){const t=u.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,()=>{n.value&&!s.value&&h()}),e.onMounted(()=>{document.addEventListener("click",w),document.addEventListener("keydown",M)}),e.onBeforeUnmount(()=>{document.removeEventListener("click",w),document.removeEventListener("keydown",M)}),(t,a)=>{var p,v,C,_;return e.openBlock(),e.createElementBlock("div",{ref_key:"container",ref:u,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":(p=t.aria)==null?void 0:p.labelledby,"aria-label":m.value.length?m.value.map(t.getOptionLabel).join(", "):"","aria-required":(v=t.aria)==null?void 0:v.required},[!l.isMulti&&m.value[0]?(e.openBlock(),e.createElementBlock("div",{key:0,class:"single-value",onClick:a[0]||(a[0]=r=>h({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,r=>(e.openBlock(),e.createElementBlock("button",{key:r.value,type:"button",class:"multi-value",onClick:k=>R(r.value)},[e.createTextVNode(e.toDisplayString(t.getMultiValueLabel(r))+" ",1),e.createVNode(B)],8,z))),128)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{id:t.inputId,ref_key:"input",ref:d,"onUpdate:modelValue":a[1]||(a[1]=r=>n.value=r),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]=r=>h()),onKeydown:[e.withKeys(P,["tab"]),e.withKeys(X,["space"])]},null,40,q),[[e.vModelText,n.value]])],10,F),e.createElementVNode("div",A,[m.value.length>0&&t.isClearable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"clear-button",tabindex:"-1",disabled:t.isDisabled,onClick:Z},[e.renderSlot(t.$slots,"clear",{},()=>[e.createVNode(B)],!0)],8,U)):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"button",class:"dropdown-icon",tabindex:"-1",disabled:t.isDisabled,onClick:a[3]||(a[3]=r=>h({focusInput:!0}))},[e.renderSlot(t.$slots,"dropdown",{},()=>[e.createVNode(N)],!0)],8,H)])],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:f,class:"menu",role:"listbox","aria-label":(C=t.aria)==null?void 0:C.labelledby,"aria-multiselectable":t.isMulti,style:e.normalizeStyle({width:l.teleport?`${(_=u.value)==null?void 0:_.getBoundingClientRect().width}px`:"100%",top:l.teleport?V().top:"unset",left:l.teleport?V().left:"unset"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,(r,k)=>(e.openBlock(),e.createBlock(x,{key:r.value,type:"button",class:e.normalizeClass(["menu-option",{focused:c.value===k,selected:r.value===o.value}]),menu:f.value,index:k,"is-focused":c.value===k,"is-selected":r.value===o.value,onSelect:Y=>g(r.value)},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"option",{option:r},()=>[e.createTextVNode(e.toDisplayString(t.getOptionLabel(r)),1)],!0)]),_:2},1032,["class","menu","index","is-focused","is-selected","onSelect"]))),128)),b.value.length===0?(e.openBlock(),e.createElementBlock("div",j,[e.renderSlot(t.$slots,"no-options",{},()=>[e.createTextVNode(" No results found ")],!0)])):e.createCommentVNode("",!0)],12,K)):e.createCommentVNode("",!0)],8,["to","disabled"]))],2)}}}),[["__scopeId","data-v-5b4f6ad0"]])});

package.json

 {
   "name": "vue3-select-component",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A flexible & modern select-input control for Vue 3.",
@@ -51,9 +51,9 @@ "author": "Thomas Cazade <[e-mail]>",
   "devDependencies": {
-    "@antfu/eslint-config": "2.6.4",
+    "@antfu/eslint-config": "2.8.0",
     "@tsconfig/node20": "20.1.2",
-    "@types/node": "20.11.21",
+    "@types/node": "20.11.25",
     "@vitejs/plugin-vue": "5.0.4",
     "@vue/tsconfig": "0.5.1",
-    "autoprefixer": "10.4.17",
-    "bumpp": "9.3.0",
+    "autoprefixer": "10.4.18",
+    "bumpp": "9.4.0",
     "eslint": "8.57.0",
@@ -63,10 +63,10 @@ "npm-run-all2": "6.1.2",
     "sass": "1.71.1",
-    "typescript": "5.3.3",
-    "vite": "5.1.1",
+    "typescript": "5.4.2",
+    "vite": "5.1.5",
     "vite-plugin-dts": "3.7.3",
-    "vite-plugin-vue-devtools": "7.0.15",
-    "vitepress": "1.0.0-rc.44",
+    "vite-plugin-vue-devtools": "7.0.16",
+    "vitepress": "1.0.0-rc.45",
     "vue": "3.4.21",
-    "vue-tsc": "1.8.27"
+    "vue-tsc": "2.0.6"
   }
 }

No alert changes

Worsened metrics

Total package byte prevSize

35543

-0.33%

Lines of code

545

-0.55%

No dependency changes