You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
vue3-select-component
Advanced tools
vue3-select-component - npm Package Compare versions
Comparing version 0.11.1 to 0.11.2
@@ -1,6 +0,6 @@ | ||
| (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('@keyframes spinner-circle-animation-ed866313{0%,39%,to{opacity:0}40%{opacity:1}}.spinner[data-v-ed866313]{position:relative;width:var(--vs-spinner-size);height:var(--vs-spinner-size);margin:0;padding:0}.spinner-circle[data-v-ed866313]{width:100%;height:100%;position:absolute;left:0;top:0}.spinner-circle[data-v-ed866313]:before{content:"";display:block;margin:0 auto;width:15%;height:15%;background-color:var(--vs-spinner-color);border-radius:100%;-webkit-animation:spinner-circle-animation-ed866313 1.2s infinite ease-in-out both;animation:spinner-circle-animation-ed866313 1.2s infinite ease-in-out both}.spinner-circle[data-v-ed866313]:nth-child(2){transform:rotate(30deg)}.spinner-circle[data-v-ed866313]:nth-child(3){transform:rotate(60deg)}.spinner-circle[data-v-ed866313]:nth-child(4){transform:rotate(90deg)}.spinner-circle[data-v-ed866313]:nth-child(5){transform:rotate(120deg)}.spinner-circle[data-v-ed866313]:nth-child(6){transform:rotate(150deg)}.spinner-circle[data-v-ed866313]:nth-child(7){transform:rotate(180deg)}.spinner-circle[data-v-ed866313]:nth-child(8){transform:rotate(210deg)}.spinner-circle[data-v-ed866313]:nth-child(9){transform:rotate(240deg)}.spinner-circle[data-v-ed866313]:nth-child(10){transform:rotate(270deg)}.spinner-circle[data-v-ed866313]:nth-child(11){transform:rotate(300deg)}.spinner-circle[data-v-ed866313]:nth-child(12){transform:rotate(330deg)}.spinner-circle[data-v-ed866313]:nth-child(2):before{animation-delay:-1.1s}.spinner-circle[data-v-ed866313]:nth-child(3):before{animation-delay:-1s}.spinner-circle[data-v-ed866313]:nth-child(4):before{animation-delay:-.9s}.spinner-circle[data-v-ed866313]:nth-child(5):before{animation-delay:-.8s}.spinner-circle[data-v-ed866313]:nth-child(6):before{animation-delay:-.7s}.spinner-circle[data-v-ed866313]:nth-child(7):before{animation-delay:-.6s}.spinner-circle[data-v-ed866313]:nth-child(8):before{animation-delay:-.5s}.spinner-circle[data-v-ed866313]:nth-child(9):before{animation-delay:-.4s}.spinner-circle[data-v-ed866313]:nth-child(10):before{animation-delay:-.3s}.spinner-circle[data-v-ed866313]:nth-child(11):before{animation-delay:-.2s}.spinner-circle[data-v-ed866313]:nth-child(12):before{animation-delay:-.1s}.indicators-container[data-v-c1d96dfe]{display:flex;align-items:center;align-self:stretch;flex-shrink:0;gap:var(--vs-indicators-gap);padding:var(--vs-padding)}.clear-button[data-v-c1d96dfe]{appearance:none;display:inline-block;padding:0;margin:0;border:0;width:var(--vs-indicator-icon-size);height:var(--vs-indicator-icon-size);color:var(--vs-indicator-icon-color);background:none;outline:none;cursor:var(--vs-indicator-icon-cursor)}.dropdown-icon[data-v-c1d96dfe]{appearance:none;display:inline-block;padding:0;margin:0;border:0;width:var(--vs-indicator-icon-size);height:var(--vs-indicator-icon-size);color:var(--vs-indicator-icon-color);background:none;outline:none;cursor:var(--vs-indicator-icon-cursor);transition:var(--vs-indicator-dropdown-icon-transition)}.dropdown-icon.active[data-v-c1d96dfe]{transform:rotate(180deg)}.menu-option[data-v-00296627]{display:flex;width:var(--vs-option-width);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);white-space:break-spaces;background-color:var(--vs-option-background-color);text-align:var(--vs-option-text-align);cursor:var(--vs-option-cursor)}.menu-option[data-v-00296627]:hover{background-color:var(--vs-option-hover-background-color);color:var(--vs-option-hover-text-color)}.menu-option.focused[data-v-00296627]{background-color:var(--vs-option-focused-background-color);color:var(--vs-option-focused-text-color)}.menu-option.selected[data-v-00296627]{background-color:var(--vs-option-selected-background-color);color:var(--vs-option-selected-text-color)}.menu-option.disabled[data-v-00296627]{background-color:var(--vs-option-disabled-background-color);color:var(--vs-option-disabled-text-color)}.multi-value[data-v-9395a16e]{display:flex;min-width:0px;margin:var(--vs-multi-value-margin);border-radius:var(--vs-multi-value-border-radius);background:var(--vs-multi-value-background-color)}.multi-value-label[data-v-9395a16e]{padding:var(--vs-multi-value-label-padding);border:var(--vs-multi-value-border);border-radius:var(--vs-multi-value-border-radius);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--vs-multi-value-label-font-size);font-weight:var(--vs-multi-value-label-font-weight);line-height:var(--vs-multi-value-label-line-height);color:var(--vs-multi-value-label-text-color)}.multi-value-remove[data-v-9395a16e]{border-radius:var(--vs-multi-value-border-radius);appearance:none;display:flex;align-items:center;padding:var(--vs-multi-value-delete-padding);border:none;outline:none;cursor:var(--vs-multi-value-xmark-cursor);background-color:var(--vs-multi-value-background-color)}.multi-value-remove[data-v-9395a16e]:hover{background-color:var(--vs-multi-value-delete-hover-background-color)}.multi-value-remove svg[data-v-9395a16e]{width:var(--vs-multi-value-xmark-size);height:var(--vs-multi-value-xmark-size);fill:var(--vs-multi-value-xmark-color)}.multi-value-remove:hover svg[data-v-9395a16e]{fill:var(--vs-multi-value-xmark-hover-color)}.placeholder[data-v-a248d754]{grid-area:1 / 1 / 2 / 3;color:var(--vs-placeholder-color)}:root{--vs-width: 100%;--vs-min-height: 38px;--vs-padding: 4px 8px;--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-placeholder-color: #52525b;--vs-background-color: #fff;--vs-disabled-background-color: #f4f4f5;--vs-outline-width: 1px;--vs-outline-color: #3b82f6;--vs-menu-offset-top: 8px;--vs-menu-height: 200px;--vs-menu-border: var(--vs-border);--vs-menu-background-color: var(--vs-background-color);--vs-menu-box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--vs-menu-z-index: 2;--vs-option-width: 100%;--vs-option-padding: 8px 12px;--vs-option-cursor: pointer;--vs-option-font-size: var(--vs-font-size);--vs-option-font-weight: var(--vs-font-weight);--vs-option-text-align: -webkit-auto;--vs-option-text-color: var(--vs-text-color);--vs-option-hover-text-color: var(--vs-text-color);--vs-option-focused-text-color: var(--vs-text-color);--vs-option-selected-text-color: var(--vs-text-color);--vs-option-disabled-text-color: #52525b;--vs-option-background-color: var(--vs-menu-background);--vs-option-hover-background-color: #dbeafe;--vs-option-focused-background-color: var(--vs-option-hover-background-color);--vs-option-selected-background-color: #93c5fd;--vs-option-disabled-background-color: #f4f4f5;--vs-option-opacity-menu-open: .4;--vs-multi-value-margin: 2px;--vs-multi-value-border: 0px;--vs-multi-value-border-radius: 2px;--vs-multi-value-background-color: #f4f4f5;--vs-multi-value-label-padding: 4px 4px 4px 8px;--vs-multi-value-label-font-size: 12px;--vs-multi-value-label-font-weight: 400;--vs-multi-value-label-line-height: 1;--vs-multi-value-label-text-color: #3f3f46;--vs-multi-value-delete-padding: 0 3px;--vs-multi-value-delete-hover-background-color: #FF6467;--vs-multi-value-xmark-size: 16px;--vs-multi-value-xmark-cursor: pointer;--vs-multi-value-xmark-color: var(--vs-multi-value-label-text-color);--vs-multi-value-xmark-hover-color: #fff;--vs-indicators-gap: 0px;--vs-indicator-icon-size: 20px;--vs-indicator-icon-color: var(--vs-text-color);--vs-indicator-icon-cursor: pointer;--vs-indicator-dropdown-icon-transition: transform .2s ease-out;--vs-spinner-color: var(--vs-text-color);--vs-spinner-size: 16px}[data-v-5f6f0b17]{box-sizing:border-box}.vue-select[data-v-5f6f0b17]{position:relative;box-sizing:border-box;width:var(--vs-width)}.control[data-v-5f6f0b17]{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;min-height:var(--vs-min-height);border:var(--vs-border);border-radius:var(--vs-border-radius);background-color:var(--vs-background-color)}.control.focused[data-v-5f6f0b17]{box-shadow:0 0 0 var(--vs-outline-width) var(--vs-outline-color);border-color:var(--vs-outline-color)}.control.disabled[data-v-5f6f0b17]{background-color:var(--vs-disabled-background-color)}.value-container[data-v-5f6f0b17]{position:relative;overflow:hidden;display:grid;align-items:center;flex:1 1 0%;padding:var(--vs-padding)}.value-container.multi.has-value[data-v-5f6f0b17]{display:flex;flex-wrap:wrap}.single-value[data-v-5f6f0b17]{display:block;grid-area:1 / 1 / 2 / 3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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)}.vue-select[data-state=open] .single-value[data-v-5f6f0b17]{opacity:var(--vs-option-opacity-menu-open)}.vue-select.typing .single-value[data-v-5f6f0b17]{opacity:0}.input-container[data-v-5f6f0b17]{visibility:visible;display:inline-grid;grid-area:1 / 1 / 2 / 3;grid-template-columns:0px min-content}.input-container.typing[data-v-5f6f0b17]{transform:translateZ(0)}.input-container.typing[data-v-5f6f0b17]:after{content:attr(data-value) " ";visibility:hidden;white-space:pre;grid-area:1 / 2;min-width:2px;padding:0;margin:0;border:0}.search-input[data-v-5f6f0b17]{margin:0;padding:0;border:0;min-width:2px;width:100%;grid-area:1 / 2;background:0px center;font-size:var(--vs-font-size);font-family:var(--vs-font-family);line-height:var(--vs-line-height);color:var(--vs-text-color);opacity:1;outline:none}.menu[data-v-5f6f0b17]{position:absolute;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-background-color);z-index:var(--vs-menu-z-index)}.no-results[data-v-5f6f0b17]{padding:var(--vs-option-padding);font-size:var(--vs-font-size);font-family:var(--vs-font-family);color:var(--vs-text-color)}.taggable-no-options[data-v-5f6f0b17]{padding:var(--vs-option-padding);font-size:var(--vs-font-size);font-family:var(--vs-font-family);color:var(--vs-text-color);cursor:pointer}')),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})(); | ||
| import { openBlock as u, createElementBlock as f, createElementVNode as w, Fragment as q, renderList as K, defineComponent as V, useTemplateRef as D, withModifiers as J, renderSlot as b, createVNode as _, createCommentVNode as k, normalizeClass as L, createBlock as T, ref as F, watch as U, withKeys as ae, toDisplayString as R, mergeModels as Q, useModel as se, computed as W, onMounted as ie, onBeforeUnmount as ue, createTextVNode as N, withDirectives as de, vModelText as re, withCtx as E, Teleport as ce, normalizeStyle as pe, unref as Y } from "vue"; | ||
| const M = (d, i) => { | ||
| (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('@keyframes spinner-circle-animation-ed866313{0%,39%,to{opacity:0}40%{opacity:1}}.spinner[data-v-ed866313]{position:relative;width:var(--vs-spinner-size);height:var(--vs-spinner-size);margin:0;padding:0}.spinner-circle[data-v-ed866313]{width:100%;height:100%;position:absolute;left:0;top:0}.spinner-circle[data-v-ed866313]:before{content:"";display:block;margin:0 auto;width:15%;height:15%;background-color:var(--vs-spinner-color);border-radius:100%;-webkit-animation:spinner-circle-animation-ed866313 1.2s infinite ease-in-out both;animation:spinner-circle-animation-ed866313 1.2s infinite ease-in-out both}.spinner-circle[data-v-ed866313]:nth-child(2){transform:rotate(30deg)}.spinner-circle[data-v-ed866313]:nth-child(3){transform:rotate(60deg)}.spinner-circle[data-v-ed866313]:nth-child(4){transform:rotate(90deg)}.spinner-circle[data-v-ed866313]:nth-child(5){transform:rotate(120deg)}.spinner-circle[data-v-ed866313]:nth-child(6){transform:rotate(150deg)}.spinner-circle[data-v-ed866313]:nth-child(7){transform:rotate(180deg)}.spinner-circle[data-v-ed866313]:nth-child(8){transform:rotate(210deg)}.spinner-circle[data-v-ed866313]:nth-child(9){transform:rotate(240deg)}.spinner-circle[data-v-ed866313]:nth-child(10){transform:rotate(270deg)}.spinner-circle[data-v-ed866313]:nth-child(11){transform:rotate(300deg)}.spinner-circle[data-v-ed866313]:nth-child(12){transform:rotate(330deg)}.spinner-circle[data-v-ed866313]:nth-child(2):before{animation-delay:-1.1s}.spinner-circle[data-v-ed866313]:nth-child(3):before{animation-delay:-1s}.spinner-circle[data-v-ed866313]:nth-child(4):before{animation-delay:-.9s}.spinner-circle[data-v-ed866313]:nth-child(5):before{animation-delay:-.8s}.spinner-circle[data-v-ed866313]:nth-child(6):before{animation-delay:-.7s}.spinner-circle[data-v-ed866313]:nth-child(7):before{animation-delay:-.6s}.spinner-circle[data-v-ed866313]:nth-child(8):before{animation-delay:-.5s}.spinner-circle[data-v-ed866313]:nth-child(9):before{animation-delay:-.4s}.spinner-circle[data-v-ed866313]:nth-child(10):before{animation-delay:-.3s}.spinner-circle[data-v-ed866313]:nth-child(11):before{animation-delay:-.2s}.spinner-circle[data-v-ed866313]:nth-child(12):before{animation-delay:-.1s}.indicators-container[data-v-c1d96dfe]{display:flex;align-items:center;align-self:stretch;flex-shrink:0;gap:var(--vs-indicators-gap);padding:var(--vs-padding)}.clear-button[data-v-c1d96dfe]{appearance:none;display:inline-block;padding:0;margin:0;border:0;width:var(--vs-indicator-icon-size);height:var(--vs-indicator-icon-size);color:var(--vs-indicator-icon-color);background:none;outline:none;cursor:var(--vs-indicator-icon-cursor)}.dropdown-icon[data-v-c1d96dfe]{appearance:none;display:inline-block;padding:0;margin:0;border:0;width:var(--vs-indicator-icon-size);height:var(--vs-indicator-icon-size);color:var(--vs-indicator-icon-color);background:none;outline:none;cursor:var(--vs-indicator-icon-cursor);transition:var(--vs-indicator-dropdown-icon-transition)}.dropdown-icon.active[data-v-c1d96dfe]{transform:rotate(180deg)}.menu-option[data-v-00296627]{display:flex;width:var(--vs-option-width);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);white-space:break-spaces;background-color:var(--vs-option-background-color);text-align:var(--vs-option-text-align);cursor:var(--vs-option-cursor)}.menu-option[data-v-00296627]:hover{background-color:var(--vs-option-hover-background-color);color:var(--vs-option-hover-text-color)}.menu-option.focused[data-v-00296627]{background-color:var(--vs-option-focused-background-color);color:var(--vs-option-focused-text-color)}.menu-option.selected[data-v-00296627]{background-color:var(--vs-option-selected-background-color);color:var(--vs-option-selected-text-color)}.menu-option.disabled[data-v-00296627]{background-color:var(--vs-option-disabled-background-color);color:var(--vs-option-disabled-text-color)}.multi-value[data-v-9395a16e]{display:flex;min-width:0px;margin:var(--vs-multi-value-margin);border-radius:var(--vs-multi-value-border-radius);background:var(--vs-multi-value-background-color)}.multi-value-label[data-v-9395a16e]{padding:var(--vs-multi-value-label-padding);border:var(--vs-multi-value-border);border-radius:var(--vs-multi-value-border-radius);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--vs-multi-value-label-font-size);font-weight:var(--vs-multi-value-label-font-weight);line-height:var(--vs-multi-value-label-line-height);color:var(--vs-multi-value-label-text-color)}.multi-value-remove[data-v-9395a16e]{border-radius:var(--vs-multi-value-border-radius);appearance:none;display:flex;align-items:center;padding:var(--vs-multi-value-delete-padding);border:none;outline:none;cursor:var(--vs-multi-value-xmark-cursor);background-color:var(--vs-multi-value-background-color)}.multi-value-remove[data-v-9395a16e]:hover{background-color:var(--vs-multi-value-delete-hover-background-color)}.multi-value-remove svg[data-v-9395a16e]{width:var(--vs-multi-value-xmark-size);height:var(--vs-multi-value-xmark-size);fill:var(--vs-multi-value-xmark-color)}.multi-value-remove:hover svg[data-v-9395a16e]{fill:var(--vs-multi-value-xmark-hover-color)}.placeholder[data-v-a248d754]{grid-area:1 / 1 / 2 / 3;color:var(--vs-placeholder-color)}:root{--vs-width: 100%;--vs-min-height: 38px;--vs-padding: 4px 8px;--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-placeholder-color: #52525b;--vs-background-color: #fff;--vs-disabled-background-color: #f4f4f5;--vs-outline-width: 1px;--vs-outline-color: #3b82f6;--vs-menu-offset-top: 8px;--vs-menu-height: 200px;--vs-menu-border: var(--vs-border);--vs-menu-background-color: var(--vs-background-color);--vs-menu-box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--vs-menu-z-index: 2;--vs-option-width: 100%;--vs-option-padding: 8px 12px;--vs-option-cursor: pointer;--vs-option-font-size: var(--vs-font-size);--vs-option-font-weight: var(--vs-font-weight);--vs-option-text-align: -webkit-auto;--vs-option-text-color: var(--vs-text-color);--vs-option-hover-text-color: var(--vs-text-color);--vs-option-focused-text-color: var(--vs-text-color);--vs-option-selected-text-color: var(--vs-text-color);--vs-option-disabled-text-color: #52525b;--vs-option-background-color: var(--vs-menu-background);--vs-option-hover-background-color: #dbeafe;--vs-option-focused-background-color: var(--vs-option-hover-background-color);--vs-option-selected-background-color: #93c5fd;--vs-option-disabled-background-color: #f4f4f5;--vs-option-opacity-menu-open: .4;--vs-multi-value-margin: 2px;--vs-multi-value-border: 0px;--vs-multi-value-border-radius: 2px;--vs-multi-value-background-color: #f4f4f5;--vs-multi-value-label-padding: 4px 4px 4px 8px;--vs-multi-value-label-font-size: 12px;--vs-multi-value-label-font-weight: 400;--vs-multi-value-label-line-height: 1;--vs-multi-value-label-text-color: #3f3f46;--vs-multi-value-delete-padding: 0 3px;--vs-multi-value-delete-hover-background-color: #FF6467;--vs-multi-value-xmark-size: 16px;--vs-multi-value-xmark-cursor: pointer;--vs-multi-value-xmark-color: var(--vs-multi-value-label-text-color);--vs-multi-value-xmark-hover-color: #fff;--vs-indicators-gap: 0px;--vs-indicator-icon-size: 20px;--vs-indicator-icon-color: var(--vs-text-color);--vs-indicator-icon-cursor: pointer;--vs-indicator-dropdown-icon-transition: transform .2s ease-out;--vs-spinner-color: var(--vs-text-color);--vs-spinner-size: 16px}[data-v-ed6ce7d1]{box-sizing:border-box}.vue-select[data-v-ed6ce7d1]{position:relative;box-sizing:border-box;width:var(--vs-width)}.control[data-v-ed6ce7d1]{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;min-height:var(--vs-min-height);border:var(--vs-border);border-radius:var(--vs-border-radius);background-color:var(--vs-background-color)}.control.focused[data-v-ed6ce7d1]{box-shadow:0 0 0 var(--vs-outline-width) var(--vs-outline-color);border-color:var(--vs-outline-color)}.control.disabled[data-v-ed6ce7d1]{background-color:var(--vs-disabled-background-color)}.value-container[data-v-ed6ce7d1]{position:relative;overflow:hidden;display:grid;align-items:center;flex:1 1 0%;padding:var(--vs-padding)}.value-container.multi.has-value[data-v-ed6ce7d1]{display:flex;flex-wrap:wrap}.single-value[data-v-ed6ce7d1]{display:block;grid-area:1 / 1 / 2 / 3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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)}.vue-select[data-state=open] .single-value[data-v-ed6ce7d1]{opacity:var(--vs-option-opacity-menu-open)}.vue-select.typing .single-value[data-v-ed6ce7d1]{opacity:0}.input-container[data-v-ed6ce7d1]{visibility:visible;display:inline-grid;grid-area:1 / 1 / 2 / 3;grid-template-columns:0px min-content}.input-container.typing[data-v-ed6ce7d1]{transform:translateZ(0)}.input-container.typing[data-v-ed6ce7d1]:after{content:attr(data-value) " ";visibility:hidden;white-space:pre;grid-area:1 / 2;min-width:2px;padding:0;margin:0;border:0}.search-input[data-v-ed6ce7d1]{margin:0;padding:0;border:0;min-width:2px;width:100%;grid-area:1 / 2;background:0px center;font-size:var(--vs-font-size);font-family:var(--vs-font-family);line-height:var(--vs-line-height);color:var(--vs-text-color);opacity:1;outline:none}.menu[data-v-ed6ce7d1]{position:absolute;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-background-color);z-index:var(--vs-menu-z-index)}.no-results[data-v-ed6ce7d1]{padding:var(--vs-option-padding);font-size:var(--vs-font-size);font-family:var(--vs-font-family);color:var(--vs-text-color)}.taggable-no-options[data-v-ed6ce7d1]{padding:var(--vs-option-padding);font-size:var(--vs-font-size);font-family:var(--vs-font-family);color:var(--vs-text-color);cursor:pointer}')),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})(); | ||
| import { openBlock as u, createElementBlock as f, createElementVNode as $, Fragment as P, renderList as K, defineComponent as V, useTemplateRef as D, withModifiers as J, renderSlot as m, createVNode as L, createCommentVNode as k, normalizeClass as S, createBlock as T, ref as F, watch as U, withKeys as ae, toDisplayString as R, mergeModels as Q, useModel as ie, computed as W, onMounted as se, onBeforeUnmount as ue, createTextVNode as N, withDirectives as de, vModelText as re, withCtx as E, Teleport as ce, normalizeStyle as pe, unref as Y } from "vue"; | ||
| const M = (d, s) => { | ||
| const t = d.__vccOpts || d; | ||
| for (const [r, n] of i) | ||
| for (const [r, n] of s) | ||
| t[r] = n; | ||
@@ -13,5 +13,5 @@ return t; | ||
| }; | ||
| function me(d, i) { | ||
| return u(), f("svg", fe, i[0] || (i[0] = [ | ||
| w("path", { | ||
| function be(d, s) { | ||
| return u(), f("svg", fe, s[0] || (s[0] = [ | ||
| $("path", { | ||
| "fill-rule": "evenodd", | ||
@@ -23,3 +23,3 @@ 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", | ||
| } | ||
| const x = /* @__PURE__ */ M(ve, [["render", me]]), be = {}, ge = { | ||
| const x = /* @__PURE__ */ M(ve, [["render", be]]), me = {}, ge = { | ||
| xmlns: "http://www.w3.org/2000/svg", | ||
@@ -29,11 +29,11 @@ viewBox: "0 0 20 20", | ||
| }; | ||
| function ye(d, i) { | ||
| return u(), f("svg", ge, i[0] || (i[0] = [ | ||
| w("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 ye(d, s) { | ||
| return u(), f("svg", ge, s[0] || (s[0] = [ | ||
| $("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) | ||
| ])); | ||
| } | ||
| const z = /* @__PURE__ */ M(be, [["render", ye]]), he = {}, we = { className: "spinner" }; | ||
| function $e(d, i) { | ||
| return u(), f("div", we, [ | ||
| (u(), f(q, null, K(12, (t) => w("div", { | ||
| const z = /* @__PURE__ */ M(me, [["render", ye]]), he = {}, $e = { className: "spinner" }; | ||
| function we(d, s) { | ||
| return u(), f("div", $e, [ | ||
| (u(), f(P, null, K(12, (t) => $("div", { | ||
| key: t, | ||
@@ -44,3 +44,3 @@ class: "spinner-circle" | ||
| } | ||
| const ee = /* @__PURE__ */ M(he, [["render", $e], ["__scopeId", "data-v-ed866313"]]), Oe = { | ||
| const ee = /* @__PURE__ */ M(he, [["render", we], ["__scopeId", "data-v-ed866313"]]), Oe = { | ||
| ref: "container", | ||
@@ -58,5 +58,5 @@ class: "indicators-container" | ||
| emits: ["clear", "toggle"], | ||
| setup(d, { expose: i, emit: t }) { | ||
| setup(d, { expose: s, emit: t }) { | ||
| const r = t, n = D("container"), c = D("clearButton"), v = D("dropdownButton"); | ||
| return i({ containerRef: n, clearButtonRef: c, dropdownButtonRef: v }), (p, y) => (u(), f("div", Oe, [ | ||
| return s({ containerRef: n, clearButtonRef: c, dropdownButtonRef: v }), (p, y) => (u(), f("div", Oe, [ | ||
| p.hasSelectedOption && p.isClearable && !p.isLoading ? (u(), f("button", { | ||
@@ -71,4 +71,4 @@ key: 0, | ||
| }, [ | ||
| b(p.$slots, "clear", {}, () => [ | ||
| _(z) | ||
| m(p.$slots, "clear", {}, () => [ | ||
| L(z) | ||
| ], !0) | ||
@@ -80,3 +80,3 @@ ], 8, ke)) : k("", !0), | ||
| type: "button", | ||
| class: L(["dropdown-icon", { active: p.isMenuOpen }]), | ||
| class: S(["dropdown-icon", { active: p.isMenuOpen }]), | ||
| tabindex: "-1", | ||
@@ -86,7 +86,7 @@ disabled: p.isDisabled, | ||
| }, [ | ||
| b(p.$slots, "dropdown", {}, () => [ | ||
| _(x) | ||
| m(p.$slots, "dropdown", {}, () => [ | ||
| L(x) | ||
| ], !0) | ||
| ], 10, Me)), | ||
| b(p.$slots, "loading", {}, () => [ | ||
| m(p.$slots, "loading", {}, () => [ | ||
| p.isLoading ? (u(), T(ee, { key: 0 })) : k("", !0) | ||
@@ -96,3 +96,3 @@ ], !0) | ||
| } | ||
| }), Ce = /* @__PURE__ */ M(Be, [["__scopeId", "data-v-c1d96dfe"]]), De = ["aria-disabled", "aria-selected"], _e = /* @__PURE__ */ V({ | ||
| }), Ce = /* @__PURE__ */ M(Be, [["__scopeId", "data-v-c1d96dfe"]]), De = ["aria-disabled", "aria-selected"], Le = /* @__PURE__ */ V({ | ||
| __name: "MenuOption", | ||
@@ -107,4 +107,4 @@ props: { | ||
| emits: ["select"], | ||
| setup(d, { emit: i }) { | ||
| const t = d, r = i, n = F(null); | ||
| setup(d, { emit: s }) { | ||
| const t = d, r = s, n = F(null); | ||
| return U( | ||
@@ -121,3 +121,3 @@ () => t.isFocused, | ||
| ref: n, | ||
| class: L(["menu-option", { focused: c.isFocused, selected: c.isSelected, disabled: c.isDisabled }]), | ||
| class: S(["menu-option", { focused: c.isFocused, selected: c.isSelected, disabled: c.isDisabled }]), | ||
| tabindex: "-1", | ||
@@ -130,6 +130,6 @@ role: "option", | ||
| }, [ | ||
| b(c.$slots, "default", {}, void 0, !0) | ||
| m(c.$slots, "default", {}, void 0, !0) | ||
| ], 42, De)); | ||
| } | ||
| }), Le = /* @__PURE__ */ M(_e, [["__scopeId", "data-v-00296627"]]), Se = { class: "multi-value" }, Ie = { class: "multi-value-label" }, Te = ["aria-label"], Re = /* @__PURE__ */ V({ | ||
| }), Se = /* @__PURE__ */ M(Le, [["__scopeId", "data-v-00296627"]]), _e = { class: "multi-value" }, Ie = { class: "multi-value-label" }, Te = ["aria-label"], Re = /* @__PURE__ */ V({ | ||
| __name: "MultiValue", | ||
@@ -140,7 +140,7 @@ props: { | ||
| emits: ["remove"], | ||
| setup(d, { emit: i }) { | ||
| const t = i; | ||
| return (r, n) => (u(), f("div", Se, [ | ||
| w("div", Ie, R(r.label), 1), | ||
| w("button", { | ||
| setup(d, { emit: s }) { | ||
| const t = s; | ||
| return (r, n) => (u(), f("div", _e, [ | ||
| $("div", Ie, R(r.label), 1), | ||
| $("button", { | ||
| type: "button", | ||
@@ -151,3 +151,3 @@ class: "multi-value-remove", | ||
| }, [ | ||
| _(z) | ||
| L(z) | ||
| ], 8, Te) | ||
@@ -162,8 +162,13 @@ ])); | ||
| setup(d) { | ||
| return (i, t) => (u(), f("div", Ae, R(i.text), 1)); | ||
| return (s, t) => (u(), f("div", Ae, R(s.text), 1)); | ||
| } | ||
| }), Ee = /* @__PURE__ */ M(Ne, [["__scopeId", "data-v-a248d754"]]), Fe = ["data-state"], Pe = ["aria-expanded", "aria-describedby", "aria-description", "aria-labelledby", "aria-label", "aria-required"], qe = ["data-value"], Ke = ["id", "disabled"], Ue = ["aria-label", "aria-multiselectable"], ze = { | ||
| }), Ee = /* @__PURE__ */ M(Ne, [["__scopeId", "data-v-a248d754"]]); | ||
| let Fe = 0; | ||
| function qe() { | ||
| return ++Fe; | ||
| } | ||
| const Pe = ["data-state"], Ke = ["id", "aria-expanded", "aria-describedby", "aria-description", "aria-labelledby", "aria-label", "aria-required", "aria-owns", "aria-controls"], Ue = ["data-value"], ze = ["id", "aria-labelledby", "disabled"], He = ["id", "aria-label", "aria-multiselectable"], Ze = { | ||
| key: 0, | ||
| class: "no-results" | ||
| }, He = /* @__PURE__ */ V({ | ||
| }, je = /* @__PURE__ */ V({ | ||
| __name: "Select", | ||
@@ -186,4 +191,5 @@ props: /* @__PURE__ */ Q({ | ||
| class: {}, | ||
| uid: { default: qe() }, | ||
| aria: { default: void 0 }, | ||
| filterBy: { type: Function, default: (d, i, t) => i.toLowerCase().includes(t.toLowerCase()) }, | ||
| filterBy: { type: Function, default: (d, s, t) => s.toLowerCase().includes(t.toLowerCase()) }, | ||
| getOptionValue: { type: Function, default: (d) => d.value }, | ||
@@ -194,3 +200,3 @@ getOptionLabel: { type: Function, default: (d) => d.label } | ||
| required: !0, | ||
| validator: (d, i) => i.isMulti ? Array.isArray(d) : !Array.isArray(d) | ||
| validator: (d, s) => s.isMulti ? Array.isArray(d) : !Array.isArray(d) | ||
| }, | ||
@@ -200,4 +206,4 @@ modelModifiers: {} | ||
| emits: /* @__PURE__ */ Q(["optionSelected", "optionDeselected", "optionCreated", "menuOpened", "menuClosed", "search"], ["update:modelValue"]), | ||
| setup(d, { emit: i }) { | ||
| const t = d, r = i, n = se(d, "modelValue"), c = D("container"), v = D("input"), p = D("menu"), y = D("indicators"), l = F(""), m = F(!1), S = F(-1), $ = W(() => { | ||
| setup(d, { emit: s }) { | ||
| const t = d, r = s, n = ie(d, "modelValue"), c = D("container"), v = D("input"), p = D("menu"), y = D("indicators"), l = F(""), b = F(!1), _ = F(-1), w = W(() => { | ||
| const e = t.displayedOptions || t.options; | ||
@@ -209,3 +215,3 @@ e?.length || console.warn("[vue3-select-component warn]: No options or displayedOptions were provided to the component."); | ||
| value: t.getOptionValue(a) | ||
| })), s = (a) => a.filter( | ||
| })), i = (a) => a.filter( | ||
| (h) => !n.value.includes(h.value) | ||
@@ -215,9 +221,9 @@ ); | ||
| const a = o.filter((h) => t.filterBy(h, t.getOptionLabel(h), l.value)); | ||
| return t.isMulti ? s(a) : a; | ||
| return t.isMulti ? i(a) : a; | ||
| } | ||
| return t.isMulti ? s(o) : o; | ||
| return t.isMulti ? i(o) : o; | ||
| }), g = W(() => { | ||
| if (t.isMulti) | ||
| return Array.isArray(n.value) || console.warn(`[vue3-select-component warn]: The v-model provided should be an array when using \`isMulti\` prop, instead it was: ${n.value}`), n.value.map( | ||
| (o) => t.options.find((s) => s.value === o) | ||
| (o) => t.options.find((i) => i.value === o) | ||
| ); | ||
@@ -228,9 +234,9 @@ const e = t.options.find((o) => t.getOptionValue(o) === n.value); | ||
| function B() { | ||
| t.isDisabled || (m.value = !0, t.shouldAutofocusOption && (S.value = t.options.findIndex((e) => !e.disabled)), v.value && v.value.focus(), r("menuOpened")); | ||
| t.isDisabled || (b.value = !0, t.shouldAutofocusOption && (_.value = t.options.findIndex((e) => !e.disabled)), v.value && v.value.focus(), r("menuOpened")); | ||
| } | ||
| function O() { | ||
| m.value = !1, l.value = "", r("menuClosed"); | ||
| b.value = !1, l.value = "", r("menuClosed"); | ||
| } | ||
| function te() { | ||
| m.value ? O() : B(); | ||
| b.value ? O() : B(); | ||
| } | ||
@@ -240,3 +246,3 @@ function le(e) { | ||
| } | ||
| const P = (e) => { | ||
| const q = (e) => { | ||
| e.disabled || (t.isMulti ? n.value.push(e.value) : n.value = e.value, r("optionSelected", e), l.value = "", t.closeOnSelect && O(), v.value && v.value.blur()); | ||
@@ -250,34 +256,34 @@ }, H = (e) => { | ||
| }, j = (e) => { | ||
| if (m.value) { | ||
| const o = S.value; | ||
| if (b.value) { | ||
| const o = _.value; | ||
| if (e.key === "ArrowDown") { | ||
| e.preventDefault(); | ||
| const a = $.value.findIndex((C, I) => !C.disabled && I > o), h = $.value.findIndex((C) => !C.disabled); | ||
| S.value = a === -1 ? h : a; | ||
| const a = w.value.findIndex((C, I) => !C.disabled && I > o), h = w.value.findIndex((C) => !C.disabled); | ||
| _.value = a === -1 ? h : a; | ||
| } | ||
| if (e.key === "ArrowUp") { | ||
| e.preventDefault(); | ||
| const a = $.value.reduce( | ||
| const a = w.value.reduce( | ||
| (C, I, A) => !I.disabled && A < o ? A : C, | ||
| -1 | ||
| ), h = $.value.reduce( | ||
| ), h = w.value.reduce( | ||
| (C, I, A) => I.disabled ? C : A, | ||
| -1 | ||
| ); | ||
| S.value = a === -1 ? h : a; | ||
| _.value = a === -1 ? h : a; | ||
| } | ||
| if (e.key === "Enter") { | ||
| const a = $.value[o]; | ||
| e.preventDefault(), a ? P(a) : t.isTaggable && l.value && Z(); | ||
| const a = w.value[o]; | ||
| e.preventDefault(), a ? q(a) : t.isTaggable && l.value && Z(); | ||
| } | ||
| if (e.code === "Space" && l.value.length === 0) { | ||
| const a = $.value[o]; | ||
| e.preventDefault(), a && P(a); | ||
| const a = w.value[o]; | ||
| e.preventDefault(), a && q(a); | ||
| } | ||
| e.key === "Escape" && (e.preventDefault(), O()); | ||
| const s = t.isMulti ? n.value.length > 0 : !!n.value; | ||
| e.key === "Backspace" && l.value.length === 0 && s && (e.preventDefault(), t.isMulti ? n.value = n.value.slice(0, -1) : n.value = void 0); | ||
| const i = t.isMulti ? n.value.length > 0 : !!n.value; | ||
| e.key === "Backspace" && l.value.length === 0 && i && (e.preventDefault(), t.isMulti ? n.value = n.value.slice(0, -1) : n.value = void 0); | ||
| } | ||
| }, oe = (e) => { | ||
| e.key === "Tab" ? O() : e.code === "Space" && !m.value && l.value.length === 0 && (e.preventDefault(), e.stopImmediatePropagation(), B()); | ||
| e.key === "Tab" ? O() : e.code === "Space" && !b.value && l.value.length === 0 && (e.preventDefault(), e.stopImmediatePropagation(), B()); | ||
| }, X = (e) => { | ||
@@ -298,3 +304,3 @@ c.value && !c.value.contains(e.target) && O(); | ||
| () => { | ||
| r("search", l.value), l.value && !m.value && B(); | ||
| r("search", l.value), l.value && !b.value && B(); | ||
| } | ||
@@ -307,3 +313,3 @@ ), U( | ||
| { immediate: !0 } | ||
| ), ie(() => { | ||
| ), se(() => { | ||
| document.addEventListener("mousedown", X), document.addEventListener("keydown", j); | ||
@@ -315,13 +321,14 @@ }), ue(() => { | ||
| dir: "auto", | ||
| class: L(["vue-select", [{ open: m.value, typing: m.value && l.value.length > 0, disabled: e.isDisabled }, t.class]]), | ||
| "data-state": m.value ? "open" : "closed" | ||
| class: S(["vue-select", [{ open: b.value, typing: b.value && l.value.length > 0, disabled: e.isDisabled }, t.class]]), | ||
| "data-state": b.value ? "open" : "closed" | ||
| }, [ | ||
| w("div", { | ||
| class: L(["control", { focused: m.value, disabled: t.isDisabled }]), | ||
| onClick: o[3] || (o[3] = (s) => le(s)) | ||
| $("div", { | ||
| class: S(["control", { focused: b.value, disabled: t.isDisabled }]), | ||
| onClick: o[3] || (o[3] = (i) => le(i)) | ||
| }, [ | ||
| w("div", { | ||
| class: L(["value-container", { multi: e.isMulti, "has-value": g.value.length > 0 }]), | ||
| $("div", { | ||
| id: `vue-select-${e.uid}-combobox`, | ||
| class: S(["value-container", { multi: e.isMulti, "has-value": g.value.length > 0 }]), | ||
| role: "combobox", | ||
| "aria-expanded": m.value, | ||
| "aria-expanded": b.value, | ||
| "aria-describedby": e.placeholder, | ||
@@ -332,2 +339,4 @@ "aria-description": e.placeholder, | ||
| "aria-required": e.aria?.required, | ||
| "aria-owns": `vue-select-${e.uid}-listbox`, | ||
| "aria-controls": `vue-select-${e.uid}-listbox`, | ||
| "aria-haspopup": "true" | ||
@@ -341,5 +350,5 @@ }, [ | ||
| class: "single-value", | ||
| onClick: o[0] || (o[0] = (s) => B()) | ||
| onClick: o[0] || (o[0] = (i) => B()) | ||
| }, [ | ||
| b(e.$slots, "value", { | ||
| m(e.$slots, "value", { | ||
| option: g.value[0] | ||
@@ -349,20 +358,20 @@ }, () => [ | ||
| ], !0) | ||
| ])) : t.isMulti && g.value.length ? (u(!0), f(q, { key: 2 }, K(g.value, (s) => b(e.$slots, "tag", { | ||
| key: s.value, | ||
| option: s, | ||
| removeOption: () => H(s) | ||
| ])) : t.isMulti && g.value.length ? (u(!0), f(P, { key: 2 }, K(g.value, (i) => m(e.$slots, "tag", { | ||
| key: i.value, | ||
| option: i, | ||
| removeOption: () => H(i) | ||
| }, () => [ | ||
| _(Ve, { | ||
| label: e.getOptionLabel(s), | ||
| onRemove: (a) => H(s) | ||
| L(Ve, { | ||
| label: e.getOptionLabel(i), | ||
| onRemove: (a) => H(i) | ||
| }, null, 8, ["label", "onRemove"]) | ||
| ], !0)), 128)) : k("", !0), | ||
| w("div", { | ||
| class: L(["input-container", { typing: m.value && l.value.length > 0 }]), | ||
| $("div", { | ||
| class: S(["input-container", { typing: b.value && l.value.length > 0 }]), | ||
| "data-value": l.value | ||
| }, [ | ||
| de(w("input", { | ||
| de($("input", { | ||
| id: e.inputId, | ||
| ref: "input", | ||
| "onUpdate:modelValue": o[1] || (o[1] = (s) => l.value = s), | ||
| "onUpdate:modelValue": o[1] || (o[1] = (i) => l.value = i), | ||
| class: "search-input", | ||
@@ -376,15 +385,16 @@ autocapitalize: "none", | ||
| "aria-autocomplete": "list", | ||
| "aria-labelledby": `vue-select-${e.uid}-combobox`, | ||
| disabled: e.isDisabled, | ||
| placeholder: "", | ||
| onMousedown: o[2] || (o[2] = (s) => B()), | ||
| onMousedown: o[2] || (o[2] = (i) => B()), | ||
| onKeydown: oe | ||
| }, null, 40, Ke), [ | ||
| }, null, 40, ze), [ | ||
| [re, l.value] | ||
| ]) | ||
| ], 10, qe) | ||
| ], 10, Pe), | ||
| _(Ce, { | ||
| ], 10, Ue) | ||
| ], 10, Ke), | ||
| L(Ce, { | ||
| ref: "indicators", | ||
| "has-selected-option": g.value.length > 0, | ||
| "is-menu-open": m.value, | ||
| "is-menu-open": b.value, | ||
| "is-clearable": e.isClearable, | ||
@@ -397,13 +407,13 @@ "is-loading": e.isLoading, | ||
| clear: E(() => [ | ||
| b(e.$slots, "clear", {}, () => [ | ||
| _(z) | ||
| m(e.$slots, "clear", {}, () => [ | ||
| L(z) | ||
| ], !0) | ||
| ]), | ||
| dropdown: E(() => [ | ||
| b(e.$slots, "dropdown", {}, () => [ | ||
| _(x) | ||
| m(e.$slots, "dropdown", {}, () => [ | ||
| L(x) | ||
| ], !0) | ||
| ]), | ||
| loading: E(() => [ | ||
| b(e.$slots, "loading", {}, () => [ | ||
| m(e.$slots, "loading", {}, () => [ | ||
| e.isLoading ? (u(), T(ee, { key: 0 })) : k("", !0) | ||
@@ -420,4 +430,5 @@ ], !0) | ||
| }, [ | ||
| m.value ? (u(), f("div", { | ||
| b.value ? (u(), f("div", { | ||
| key: 0, | ||
| id: `vue-select-${e.uid}-listbox`, | ||
| ref: "menu", | ||
@@ -434,4 +445,4 @@ class: "menu", | ||
| }, [ | ||
| b(e.$slots, "menu-header", {}, void 0, !0), | ||
| (u(!0), f(q, null, K($.value, (s, a) => (u(), T(Le, { | ||
| m(e.$slots, "menu-header", {}, void 0, !0), | ||
| (u(!0), f(P, null, K(w.value, (i, a) => (u(), T(Se, { | ||
| key: a, | ||
@@ -441,10 +452,10 @@ type: "button", | ||
| index: a, | ||
| "is-focused": S.value === a, | ||
| "is-selected": s.value === n.value, | ||
| "is-disabled": s.disabled || !1, | ||
| onSelect: (h) => P(s) | ||
| "is-focused": _.value === a, | ||
| "is-selected": i.value === n.value, | ||
| "is-disabled": i.disabled || !1, | ||
| onSelect: (h) => q(i) | ||
| }, { | ||
| default: E(() => [ | ||
| b(e.$slots, "option", { option: s }, () => [ | ||
| N(R(e.getOptionLabel(s)), 1) | ||
| m(e.$slots, "option", { option: i }, () => [ | ||
| N(R(e.getOptionLabel(i)), 1) | ||
| ], !0) | ||
@@ -454,4 +465,4 @@ ]), | ||
| }, 1032, ["menu", "index", "is-focused", "is-selected", "is-disabled", "onSelect"]))), 128)), | ||
| !e.isTaggable && $.value.length === 0 ? (u(), f("div", ze, [ | ||
| b(e.$slots, "no-options", {}, () => [ | ||
| !e.isTaggable && w.value.length === 0 ? (u(), f("div", Ze, [ | ||
| m(e.$slots, "no-options", {}, () => [ | ||
| o[4] || (o[4] = N(" No results found ")) | ||
@@ -465,13 +476,13 @@ ], !0) | ||
| }, [ | ||
| b(e.$slots, "taggable-no-options", { option: l.value }, () => [ | ||
| m(e.$slots, "taggable-no-options", { option: l.value }, () => [ | ||
| N(" Press enter to add " + R(l.value) + " option ", 1) | ||
| ], !0) | ||
| ])) : k("", !0) | ||
| ], 12, Ue)) : k("", !0) | ||
| ], 12, He)) : k("", !0) | ||
| ], 8, ["to", "disabled"])) | ||
| ], 10, Fe)); | ||
| ], 10, Pe)); | ||
| } | ||
| }), je = /* @__PURE__ */ M(He, [["__scopeId", "data-v-5f6f0b17"]]); | ||
| }), Ge = /* @__PURE__ */ M(je, [["__scopeId", "data-v-ed6ce7d1"]]); | ||
| export { | ||
| je as default | ||
| Ge as default | ||
| }; |
@@ -1,2 +0,2 @@ | ||
| (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('@keyframes spinner-circle-animation-ed866313{0%,39%,to{opacity:0}40%{opacity:1}}.spinner[data-v-ed866313]{position:relative;width:var(--vs-spinner-size);height:var(--vs-spinner-size);margin:0;padding:0}.spinner-circle[data-v-ed866313]{width:100%;height:100%;position:absolute;left:0;top:0}.spinner-circle[data-v-ed866313]:before{content:"";display:block;margin:0 auto;width:15%;height:15%;background-color:var(--vs-spinner-color);border-radius:100%;-webkit-animation:spinner-circle-animation-ed866313 1.2s infinite ease-in-out both;animation:spinner-circle-animation-ed866313 1.2s infinite ease-in-out both}.spinner-circle[data-v-ed866313]:nth-child(2){transform:rotate(30deg)}.spinner-circle[data-v-ed866313]:nth-child(3){transform:rotate(60deg)}.spinner-circle[data-v-ed866313]:nth-child(4){transform:rotate(90deg)}.spinner-circle[data-v-ed866313]:nth-child(5){transform:rotate(120deg)}.spinner-circle[data-v-ed866313]:nth-child(6){transform:rotate(150deg)}.spinner-circle[data-v-ed866313]:nth-child(7){transform:rotate(180deg)}.spinner-circle[data-v-ed866313]:nth-child(8){transform:rotate(210deg)}.spinner-circle[data-v-ed866313]:nth-child(9){transform:rotate(240deg)}.spinner-circle[data-v-ed866313]:nth-child(10){transform:rotate(270deg)}.spinner-circle[data-v-ed866313]:nth-child(11){transform:rotate(300deg)}.spinner-circle[data-v-ed866313]:nth-child(12){transform:rotate(330deg)}.spinner-circle[data-v-ed866313]:nth-child(2):before{animation-delay:-1.1s}.spinner-circle[data-v-ed866313]:nth-child(3):before{animation-delay:-1s}.spinner-circle[data-v-ed866313]:nth-child(4):before{animation-delay:-.9s}.spinner-circle[data-v-ed866313]:nth-child(5):before{animation-delay:-.8s}.spinner-circle[data-v-ed866313]:nth-child(6):before{animation-delay:-.7s}.spinner-circle[data-v-ed866313]:nth-child(7):before{animation-delay:-.6s}.spinner-circle[data-v-ed866313]:nth-child(8):before{animation-delay:-.5s}.spinner-circle[data-v-ed866313]:nth-child(9):before{animation-delay:-.4s}.spinner-circle[data-v-ed866313]:nth-child(10):before{animation-delay:-.3s}.spinner-circle[data-v-ed866313]:nth-child(11):before{animation-delay:-.2s}.spinner-circle[data-v-ed866313]:nth-child(12):before{animation-delay:-.1s}.indicators-container[data-v-c1d96dfe]{display:flex;align-items:center;align-self:stretch;flex-shrink:0;gap:var(--vs-indicators-gap);padding:var(--vs-padding)}.clear-button[data-v-c1d96dfe]{appearance:none;display:inline-block;padding:0;margin:0;border:0;width:var(--vs-indicator-icon-size);height:var(--vs-indicator-icon-size);color:var(--vs-indicator-icon-color);background:none;outline:none;cursor:var(--vs-indicator-icon-cursor)}.dropdown-icon[data-v-c1d96dfe]{appearance:none;display:inline-block;padding:0;margin:0;border:0;width:var(--vs-indicator-icon-size);height:var(--vs-indicator-icon-size);color:var(--vs-indicator-icon-color);background:none;outline:none;cursor:var(--vs-indicator-icon-cursor);transition:var(--vs-indicator-dropdown-icon-transition)}.dropdown-icon.active[data-v-c1d96dfe]{transform:rotate(180deg)}.menu-option[data-v-00296627]{display:flex;width:var(--vs-option-width);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);white-space:break-spaces;background-color:var(--vs-option-background-color);text-align:var(--vs-option-text-align);cursor:var(--vs-option-cursor)}.menu-option[data-v-00296627]:hover{background-color:var(--vs-option-hover-background-color);color:var(--vs-option-hover-text-color)}.menu-option.focused[data-v-00296627]{background-color:var(--vs-option-focused-background-color);color:var(--vs-option-focused-text-color)}.menu-option.selected[data-v-00296627]{background-color:var(--vs-option-selected-background-color);color:var(--vs-option-selected-text-color)}.menu-option.disabled[data-v-00296627]{background-color:var(--vs-option-disabled-background-color);color:var(--vs-option-disabled-text-color)}.multi-value[data-v-9395a16e]{display:flex;min-width:0px;margin:var(--vs-multi-value-margin);border-radius:var(--vs-multi-value-border-radius);background:var(--vs-multi-value-background-color)}.multi-value-label[data-v-9395a16e]{padding:var(--vs-multi-value-label-padding);border:var(--vs-multi-value-border);border-radius:var(--vs-multi-value-border-radius);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--vs-multi-value-label-font-size);font-weight:var(--vs-multi-value-label-font-weight);line-height:var(--vs-multi-value-label-line-height);color:var(--vs-multi-value-label-text-color)}.multi-value-remove[data-v-9395a16e]{border-radius:var(--vs-multi-value-border-radius);appearance:none;display:flex;align-items:center;padding:var(--vs-multi-value-delete-padding);border:none;outline:none;cursor:var(--vs-multi-value-xmark-cursor);background-color:var(--vs-multi-value-background-color)}.multi-value-remove[data-v-9395a16e]:hover{background-color:var(--vs-multi-value-delete-hover-background-color)}.multi-value-remove svg[data-v-9395a16e]{width:var(--vs-multi-value-xmark-size);height:var(--vs-multi-value-xmark-size);fill:var(--vs-multi-value-xmark-color)}.multi-value-remove:hover svg[data-v-9395a16e]{fill:var(--vs-multi-value-xmark-hover-color)}.placeholder[data-v-a248d754]{grid-area:1 / 1 / 2 / 3;color:var(--vs-placeholder-color)}:root{--vs-width: 100%;--vs-min-height: 38px;--vs-padding: 4px 8px;--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-placeholder-color: #52525b;--vs-background-color: #fff;--vs-disabled-background-color: #f4f4f5;--vs-outline-width: 1px;--vs-outline-color: #3b82f6;--vs-menu-offset-top: 8px;--vs-menu-height: 200px;--vs-menu-border: var(--vs-border);--vs-menu-background-color: var(--vs-background-color);--vs-menu-box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--vs-menu-z-index: 2;--vs-option-width: 100%;--vs-option-padding: 8px 12px;--vs-option-cursor: pointer;--vs-option-font-size: var(--vs-font-size);--vs-option-font-weight: var(--vs-font-weight);--vs-option-text-align: -webkit-auto;--vs-option-text-color: var(--vs-text-color);--vs-option-hover-text-color: var(--vs-text-color);--vs-option-focused-text-color: var(--vs-text-color);--vs-option-selected-text-color: var(--vs-text-color);--vs-option-disabled-text-color: #52525b;--vs-option-background-color: var(--vs-menu-background);--vs-option-hover-background-color: #dbeafe;--vs-option-focused-background-color: var(--vs-option-hover-background-color);--vs-option-selected-background-color: #93c5fd;--vs-option-disabled-background-color: #f4f4f5;--vs-option-opacity-menu-open: .4;--vs-multi-value-margin: 2px;--vs-multi-value-border: 0px;--vs-multi-value-border-radius: 2px;--vs-multi-value-background-color: #f4f4f5;--vs-multi-value-label-padding: 4px 4px 4px 8px;--vs-multi-value-label-font-size: 12px;--vs-multi-value-label-font-weight: 400;--vs-multi-value-label-line-height: 1;--vs-multi-value-label-text-color: #3f3f46;--vs-multi-value-delete-padding: 0 3px;--vs-multi-value-delete-hover-background-color: #FF6467;--vs-multi-value-xmark-size: 16px;--vs-multi-value-xmark-cursor: pointer;--vs-multi-value-xmark-color: var(--vs-multi-value-label-text-color);--vs-multi-value-xmark-hover-color: #fff;--vs-indicators-gap: 0px;--vs-indicator-icon-size: 20px;--vs-indicator-icon-color: var(--vs-text-color);--vs-indicator-icon-cursor: pointer;--vs-indicator-dropdown-icon-transition: transform .2s ease-out;--vs-spinner-color: var(--vs-text-color);--vs-spinner-size: 16px}[data-v-5f6f0b17]{box-sizing:border-box}.vue-select[data-v-5f6f0b17]{position:relative;box-sizing:border-box;width:var(--vs-width)}.control[data-v-5f6f0b17]{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;min-height:var(--vs-min-height);border:var(--vs-border);border-radius:var(--vs-border-radius);background-color:var(--vs-background-color)}.control.focused[data-v-5f6f0b17]{box-shadow:0 0 0 var(--vs-outline-width) var(--vs-outline-color);border-color:var(--vs-outline-color)}.control.disabled[data-v-5f6f0b17]{background-color:var(--vs-disabled-background-color)}.value-container[data-v-5f6f0b17]{position:relative;overflow:hidden;display:grid;align-items:center;flex:1 1 0%;padding:var(--vs-padding)}.value-container.multi.has-value[data-v-5f6f0b17]{display:flex;flex-wrap:wrap}.single-value[data-v-5f6f0b17]{display:block;grid-area:1 / 1 / 2 / 3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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)}.vue-select[data-state=open] .single-value[data-v-5f6f0b17]{opacity:var(--vs-option-opacity-menu-open)}.vue-select.typing .single-value[data-v-5f6f0b17]{opacity:0}.input-container[data-v-5f6f0b17]{visibility:visible;display:inline-grid;grid-area:1 / 1 / 2 / 3;grid-template-columns:0px min-content}.input-container.typing[data-v-5f6f0b17]{transform:translateZ(0)}.input-container.typing[data-v-5f6f0b17]:after{content:attr(data-value) " ";visibility:hidden;white-space:pre;grid-area:1 / 2;min-width:2px;padding:0;margin:0;border:0}.search-input[data-v-5f6f0b17]{margin:0;padding:0;border:0;min-width:2px;width:100%;grid-area:1 / 2;background:0px center;font-size:var(--vs-font-size);font-family:var(--vs-font-family);line-height:var(--vs-line-height);color:var(--vs-text-color);opacity:1;outline:none}.menu[data-v-5f6f0b17]{position:absolute;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-background-color);z-index:var(--vs-menu-z-index)}.no-results[data-v-5f6f0b17]{padding:var(--vs-option-padding);font-size:var(--vs-font-size);font-family:var(--vs-font-family);color:var(--vs-text-color)}.taggable-no-options[data-v-5f6f0b17]{padding:var(--vs-option-padding);font-size:var(--vs-font-size);font-family:var(--vs-font-family);color:var(--vs-text-color);cursor:pointer}')),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})(); | ||
| (function(e,b){typeof exports=="object"&&typeof module<"u"?module.exports=b(require("vue")):typeof define=="function"&&define.amd?define(["vue"],b):(e=typeof globalThis<"u"?globalThis:e||self,e["vue3-select-component"]=b(e.Vue))})(this,function(e){"use strict";const b=(d,r)=>{const o=d.__vccOpts||d;for(const[c,l]of r)o[c]=l;return o},I={},R={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"};function A(d,r){return e.openBlock(),e.createElementBlock("svg",R,r[0]||(r[0]=[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)]))}const M=b(I,[["render",A]]),F={},z={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"};function q(d,r){return e.openBlock(),e.createElementBlock("svg",z,r[0]||(r[0]=[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)]))}const S=b(F,[["render",q]]),x={},P={className:"spinner"};function K(d,r){return e.openBlock(),e.createElementBlock("div",P,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(12,o=>e.createElementVNode("div",{key:o,class:"spinner-circle"})),64))])}const _=b(x,[["render",K],["__scopeId","data-v-ed866313"]]),U={ref:"container",class:"indicators-container"},H=["disabled"],j=["disabled"],Z=b(e.defineComponent({__name:"Indicators",props:{hasSelectedOption:{type:Boolean},isMenuOpen:{type:Boolean},isClearable:{type:Boolean},isLoading:{type:Boolean},isDisabled:{type:Boolean}},emits:["clear","toggle"],setup(d,{expose:r,emit:o}){const c=o,l=e.useTemplateRef("container"),p=e.useTemplateRef("clearButton"),f=e.useTemplateRef("dropdownButton");return r({containerRef:l,clearButtonRef:p,dropdownButtonRef:f}),(u,y)=>(e.openBlock(),e.createElementBlock("div",U,[u.hasSelectedOption&&u.isClearable&&!u.isLoading?(e.openBlock(),e.createElementBlock("button",{key:0,ref:"clearButton",type:"button",class:"clear-button",tabindex:"-1",disabled:u.isDisabled,onClick:y[0]||(y[0]=e.withModifiers(n=>c("clear"),["stop"]))},[e.renderSlot(u.$slots,"clear",{},()=>[e.createVNode(S)],!0)],8,H)):e.createCommentVNode("",!0),u.isLoading?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:1,ref:"dropdownButton",type:"button",class:e.normalizeClass(["dropdown-icon",{active:u.isMenuOpen}]),tabindex:"-1",disabled:u.isDisabled,onClick:y[1]||(y[1]=e.withModifiers(n=>c("toggle"),["stop"]))},[e.renderSlot(u.$slots,"dropdown",{},()=>[e.createVNode(M)],!0)],10,j)),e.renderSlot(u.$slots,"loading",{},()=>[u.isLoading?(e.openBlock(),e.createBlock(_,{key:0})):e.createCommentVNode("",!0)],!0)],512))}}),[["__scopeId","data-v-c1d96dfe"]]),X=["aria-disabled","aria-selected"],G=b(e.defineComponent({__name:"MenuOption",props:{menu:{},index:{},isFocused:{type:Boolean},isSelected:{type:Boolean},isDisabled:{type:Boolean}},emits:["select"],setup(d,{emit:r}){const o=d,c=r,l=e.ref(null);return e.watch(()=>o.isFocused,()=>{if(o.isFocused&&o.menu){const p=o.menu.children[o.index],f=p.offsetTop,u=f+p.clientHeight,y=o.menu.scrollTop,n=o.menu.clientHeight;f<y?o.menu.scrollTop=f:u>y+n&&(o.menu.scrollTop=u-n)}}),(p,f)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"option",ref:l,class:e.normalizeClass(["menu-option",{focused:p.isFocused,selected:p.isSelected,disabled:p.isDisabled}]),tabindex:"-1",role:"option","aria-disabled":p.isDisabled,"aria-selected":p.isSelected,onClick:f[0]||(f[0]=u=>c("select")),onKeydown:f[1]||(f[1]=e.withKeys(u=>c("select"),["enter"]))},[e.renderSlot(p.$slots,"default",{},void 0,!0)],42,X))}}),[["__scopeId","data-v-00296627"]]),J={class:"multi-value"},Q={class:"multi-value-label"},W=["aria-label"],Y=b(e.defineComponent({__name:"MultiValue",props:{label:{}},emits:["remove"],setup(d,{emit:r}){const o=r;return(c,l)=>(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("div",Q,e.toDisplayString(c.label),1),e.createElementVNode("button",{type:"button",class:"multi-value-remove","aria-label":`Remove ${c.label}`,onClick:l[0]||(l[0]=p=>o("remove"))},[e.createVNode(S)],8,W)]))}}),[["__scopeId","data-v-9395a16e"]]),ee={class:"placeholder"},te=b(e.defineComponent({__name:"Placeholder",props:{text:{}},setup(d){return(r,o)=>(e.openBlock(),e.createElementBlock("div",ee,e.toDisplayString(r.text),1))}}),[["__scopeId","data-v-a248d754"]]),oe=["data-state"],ne=["aria-expanded","aria-describedby","aria-description","aria-labelledby","aria-label","aria-required"],le=["data-value"],ae=["id","disabled"],ie=["aria-label","aria-multiselectable"],se={key:0,class:"no-results"};return b(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},isTaggable:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},isMenuOpen:{type:Boolean,default:void 0},shouldAutofocusOption:{type:Boolean,default:!0},closeOnSelect:{type:Boolean,default:!0},teleport:{default:void 0},inputId:{default:void 0},class:{},aria:{default:void 0},filterBy:{type:Function,default:(d,r,o)=>r.toLowerCase().includes(o.toLowerCase())},getOptionValue:{type:Function,default:d=>d.value},getOptionLabel:{type:Function,default:d=>d.label}},{modelValue:{required:!0,validator:(d,r)=>r.isMulti?Array.isArray(d):!Array.isArray(d)},modelModifiers:{}}),emits:e.mergeModels(["optionSelected","optionDeselected","optionCreated","menuOpened","menuClosed","search"],["update:modelValue"]),setup(d,{emit:r}){const o=d,c=r,l=e.useModel(d,"modelValue"),p=e.useTemplateRef("container"),f=e.useTemplateRef("input"),u=e.useTemplateRef("menu"),y=e.useTemplateRef("indicators"),n=e.ref(""),m=e.ref(!1),C=e.ref(-1),h=e.computed(()=>{const t=o.displayedOptions||o.options;t?.length||console.warn("[vue3-select-component warn]: No options or displayedOptions were provided to the component.");const a=t.map(i=>({...i,label:o.getOptionLabel(i),value:o.getOptionValue(i)})),s=i=>i.filter(k=>!l.value.includes(k.value));if(o.isSearchable&&n.value){const i=a.filter(k=>o.filterBy(k,o.getOptionLabel(k),n.value));return o.isMulti?s(i):i}return o.isMulti?s(a):a}),g=e.computed(()=>{if(o.isMulti)return Array.isArray(l.value)||console.warn(`[vue3-select-component warn]: The v-model provided should be an array when using \`isMulti\` prop, instead it was: ${l.value}`),l.value.map(a=>o.options.find(s=>s.value===a));const t=o.options.find(a=>o.getOptionValue(a)===l.value);return t?[t]:[]});function w(){o.isDisabled||(m.value=!0,o.shouldAutofocusOption&&(C.value=o.options.findIndex(t=>!t.disabled)),f.value&&f.value.focus(),c("menuOpened"))}function B(){m.value=!1,n.value="",c("menuClosed")}function re(){m.value?B():w()}function de(t){y.value?.containerRef&&!y.value.containerRef.contains(t.target)&&w()}const V=t=>{t.disabled||(o.isMulti?l.value.push(t.value):l.value=t.value,c("optionSelected",t),n.value="",o.closeOnSelect&&B(),f.value&&f.value.blur())},D=t=>{o.isMulti&&!o.isDisabled&&(l.value=l.value.filter(a=>a!==t.value),c("optionDeselected",t))},ce=()=>{o.isMulti?(l.value=[],c("optionDeselected",null)):(l.value=void 0,c("optionDeselected",g.value[0])),B(),f.value&&f.value.blur()},N=()=>{c("optionCreated",n.value),n.value="",B()},E=t=>{if(m.value){const a=C.value;if(t.key==="ArrowDown"){t.preventDefault();const i=h.value.findIndex(($,v)=>!$.disabled&&v>a),k=h.value.findIndex($=>!$.disabled);C.value=i===-1?k:i}if(t.key==="ArrowUp"){t.preventDefault();const i=h.value.reduce(($,v,O)=>!v.disabled&&O<a?O:$,-1),k=h.value.reduce(($,v,O)=>v.disabled?$:O,-1);C.value=i===-1?k:i}if(t.key==="Enter"){const i=h.value[a];t.preventDefault(),i?V(i):o.isTaggable&&n.value&&N()}if(t.code==="Space"&&n.value.length===0){const i=h.value[a];t.preventDefault(),i&&V(i)}t.key==="Escape"&&(t.preventDefault(),B());const s=o.isMulti?l.value.length>0:!!l.value;t.key==="Backspace"&&n.value.length===0&&s&&(t.preventDefault(),o.isMulti?l.value=l.value.slice(0,-1):l.value=void 0)}},pe=t=>{t.key==="Tab"?B():t.code==="Space"&&!m.value&&n.value.length===0&&(t.preventDefault(),t.stopImmediatePropagation(),w())},L=t=>{p.value&&!p.value.contains(t.target)&&B()},T=()=>{if(p.value){const t=p.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,()=>{c("search",n.value),n.value&&!m.value&&w()}),e.watch(()=>o.isMenuOpen,t=>{t?w():B()},{immediate:!0}),e.onMounted(()=>{document.addEventListener("mousedown",L),document.addEventListener("keydown",E)}),e.onBeforeUnmount(()=>{document.removeEventListener("mousedown",L),document.removeEventListener("keydown",E)}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{ref:"container",dir:"auto",class:e.normalizeClass(["vue-select",[{open:m.value,typing:m.value&&n.value.length>0,disabled:t.isDisabled},o.class]]),"data-state":m.value?"open":"closed"},[e.createElementVNode("div",{class:e.normalizeClass(["control",{focused:m.value,disabled:o.isDisabled}]),onClick:a[3]||(a[3]=s=>de(s))},[e.createElementVNode("div",{class:e.normalizeClass(["value-container",{multi:t.isMulti,"has-value":g.value.length>0}]),role:"combobox","aria-expanded":m.value,"aria-describedby":t.placeholder,"aria-description":t.placeholder,"aria-labelledby":t.aria?.labelledby,"aria-label":g.value.length?g.value.map(t.getOptionLabel).join(", "):"","aria-required":t.aria?.required,"aria-haspopup":"true"},[!g.value[0]&&!n.value.length?(e.openBlock(),e.createBlock(te,{key:0,text:t.placeholder},null,8,["text"])):!o.isMulti&&g.value[0]?(e.openBlock(),e.createElementBlock("div",{key:1,class:"single-value",onClick:a[0]||(a[0]=s=>w())},[e.renderSlot(t.$slots,"value",{option:g.value[0]},()=>[e.createTextVNode(e.toDisplayString(t.getOptionLabel(g.value[0])),1)],!0)])):o.isMulti&&g.value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(g.value,s=>e.renderSlot(t.$slots,"tag",{key:s.value,option:s,removeOption:()=>D(s)},()=>[e.createVNode(Y,{label:t.getOptionLabel(s),onRemove:i=>D(s)},null,8,["label","onRemove"])],!0)),128)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["input-container",{typing:m.value&&n.value.length>0}]),"data-value":n.value},[e.withDirectives(e.createElementVNode("input",{id:t.inputId,ref:"input","onUpdate:modelValue":a[1]||(a[1]=s=>n.value=s),class:"search-input",autocapitalize:"none",autocomplete:"off",autocorrect:"off",spellcheck:"false",tabindex:"0",type:"text","aria-autocomplete":"list",disabled:t.isDisabled,placeholder:"",onMousedown:a[2]||(a[2]=s=>w()),onKeydown:pe},null,40,ae),[[e.vModelText,n.value]])],10,le)],10,ne),e.createVNode(Z,{ref:"indicators","has-selected-option":g.value.length>0,"is-menu-open":m.value,"is-clearable":t.isClearable,"is-loading":t.isLoading,"is-disabled":t.isDisabled,onClear:ce,onToggle:re},{clear:e.withCtx(()=>[e.renderSlot(t.$slots,"clear",{},()=>[e.createVNode(S)],!0)]),dropdown:e.withCtx(()=>[e.renderSlot(t.$slots,"dropdown",{},()=>[e.createVNode(M)],!0)]),loading:e.withCtx(()=>[e.renderSlot(t.$slots,"loading",{},()=>[t.isLoading?(e.openBlock(),e.createBlock(_,{key:0})):e.createCommentVNode("",!0)],!0)]),_:3},8,["has-selected-option","is-menu-open","is-clearable","is-loading","is-disabled"])],2),(e.openBlock(),e.createBlock(e.Teleport,{to:t.teleport,disabled:!t.teleport,defer:!0},[m.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref:"menu",class:"menu",role:"listbox","aria-label":t.aria?.labelledby,"aria-multiselectable":t.isMulti,style:e.normalizeStyle({width:o.teleport?`${e.unref(p)?.getBoundingClientRect().width}px`:"100%",top:o.teleport?T().top:"unset",left:o.teleport?T().left:"unset"})},[e.renderSlot(t.$slots,"menu-header",{},void 0,!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(s,i)=>(e.openBlock(),e.createBlock(G,{key:i,type:"button",menu:e.unref(u),index:i,"is-focused":C.value===i,"is-selected":s.value===l.value,"is-disabled":s.disabled||!1,onSelect:k=>V(s)},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"option",{option:s},()=>[e.createTextVNode(e.toDisplayString(t.getOptionLabel(s)),1)],!0)]),_:2},1032,["menu","index","is-focused","is-selected","is-disabled","onSelect"]))),128)),!t.isTaggable&&h.value.length===0?(e.openBlock(),e.createElementBlock("div",se,[e.renderSlot(t.$slots,"no-options",{},()=>[a[4]||(a[4]=e.createTextVNode(" No results found "))],!0)])):e.createCommentVNode("",!0),t.isTaggable&&n.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:"taggable-no-options",onClick:N},[e.renderSlot(t.$slots,"taggable-no-options",{option:n.value},()=>[e.createTextVNode(" Press enter to add "+e.toDisplayString(n.value)+" option ",1)],!0)])):e.createCommentVNode("",!0)],12,ie)):e.createCommentVNode("",!0)],8,["to","disabled"]))],10,oe))}}),[["__scopeId","data-v-5f6f0b17"]])}); | ||
| (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('@keyframes spinner-circle-animation-ed866313{0%,39%,to{opacity:0}40%{opacity:1}}.spinner[data-v-ed866313]{position:relative;width:var(--vs-spinner-size);height:var(--vs-spinner-size);margin:0;padding:0}.spinner-circle[data-v-ed866313]{width:100%;height:100%;position:absolute;left:0;top:0}.spinner-circle[data-v-ed866313]:before{content:"";display:block;margin:0 auto;width:15%;height:15%;background-color:var(--vs-spinner-color);border-radius:100%;-webkit-animation:spinner-circle-animation-ed866313 1.2s infinite ease-in-out both;animation:spinner-circle-animation-ed866313 1.2s infinite ease-in-out both}.spinner-circle[data-v-ed866313]:nth-child(2){transform:rotate(30deg)}.spinner-circle[data-v-ed866313]:nth-child(3){transform:rotate(60deg)}.spinner-circle[data-v-ed866313]:nth-child(4){transform:rotate(90deg)}.spinner-circle[data-v-ed866313]:nth-child(5){transform:rotate(120deg)}.spinner-circle[data-v-ed866313]:nth-child(6){transform:rotate(150deg)}.spinner-circle[data-v-ed866313]:nth-child(7){transform:rotate(180deg)}.spinner-circle[data-v-ed866313]:nth-child(8){transform:rotate(210deg)}.spinner-circle[data-v-ed866313]:nth-child(9){transform:rotate(240deg)}.spinner-circle[data-v-ed866313]:nth-child(10){transform:rotate(270deg)}.spinner-circle[data-v-ed866313]:nth-child(11){transform:rotate(300deg)}.spinner-circle[data-v-ed866313]:nth-child(12){transform:rotate(330deg)}.spinner-circle[data-v-ed866313]:nth-child(2):before{animation-delay:-1.1s}.spinner-circle[data-v-ed866313]:nth-child(3):before{animation-delay:-1s}.spinner-circle[data-v-ed866313]:nth-child(4):before{animation-delay:-.9s}.spinner-circle[data-v-ed866313]:nth-child(5):before{animation-delay:-.8s}.spinner-circle[data-v-ed866313]:nth-child(6):before{animation-delay:-.7s}.spinner-circle[data-v-ed866313]:nth-child(7):before{animation-delay:-.6s}.spinner-circle[data-v-ed866313]:nth-child(8):before{animation-delay:-.5s}.spinner-circle[data-v-ed866313]:nth-child(9):before{animation-delay:-.4s}.spinner-circle[data-v-ed866313]:nth-child(10):before{animation-delay:-.3s}.spinner-circle[data-v-ed866313]:nth-child(11):before{animation-delay:-.2s}.spinner-circle[data-v-ed866313]:nth-child(12):before{animation-delay:-.1s}.indicators-container[data-v-c1d96dfe]{display:flex;align-items:center;align-self:stretch;flex-shrink:0;gap:var(--vs-indicators-gap);padding:var(--vs-padding)}.clear-button[data-v-c1d96dfe]{appearance:none;display:inline-block;padding:0;margin:0;border:0;width:var(--vs-indicator-icon-size);height:var(--vs-indicator-icon-size);color:var(--vs-indicator-icon-color);background:none;outline:none;cursor:var(--vs-indicator-icon-cursor)}.dropdown-icon[data-v-c1d96dfe]{appearance:none;display:inline-block;padding:0;margin:0;border:0;width:var(--vs-indicator-icon-size);height:var(--vs-indicator-icon-size);color:var(--vs-indicator-icon-color);background:none;outline:none;cursor:var(--vs-indicator-icon-cursor);transition:var(--vs-indicator-dropdown-icon-transition)}.dropdown-icon.active[data-v-c1d96dfe]{transform:rotate(180deg)}.menu-option[data-v-00296627]{display:flex;width:var(--vs-option-width);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);white-space:break-spaces;background-color:var(--vs-option-background-color);text-align:var(--vs-option-text-align);cursor:var(--vs-option-cursor)}.menu-option[data-v-00296627]:hover{background-color:var(--vs-option-hover-background-color);color:var(--vs-option-hover-text-color)}.menu-option.focused[data-v-00296627]{background-color:var(--vs-option-focused-background-color);color:var(--vs-option-focused-text-color)}.menu-option.selected[data-v-00296627]{background-color:var(--vs-option-selected-background-color);color:var(--vs-option-selected-text-color)}.menu-option.disabled[data-v-00296627]{background-color:var(--vs-option-disabled-background-color);color:var(--vs-option-disabled-text-color)}.multi-value[data-v-9395a16e]{display:flex;min-width:0px;margin:var(--vs-multi-value-margin);border-radius:var(--vs-multi-value-border-radius);background:var(--vs-multi-value-background-color)}.multi-value-label[data-v-9395a16e]{padding:var(--vs-multi-value-label-padding);border:var(--vs-multi-value-border);border-radius:var(--vs-multi-value-border-radius);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--vs-multi-value-label-font-size);font-weight:var(--vs-multi-value-label-font-weight);line-height:var(--vs-multi-value-label-line-height);color:var(--vs-multi-value-label-text-color)}.multi-value-remove[data-v-9395a16e]{border-radius:var(--vs-multi-value-border-radius);appearance:none;display:flex;align-items:center;padding:var(--vs-multi-value-delete-padding);border:none;outline:none;cursor:var(--vs-multi-value-xmark-cursor);background-color:var(--vs-multi-value-background-color)}.multi-value-remove[data-v-9395a16e]:hover{background-color:var(--vs-multi-value-delete-hover-background-color)}.multi-value-remove svg[data-v-9395a16e]{width:var(--vs-multi-value-xmark-size);height:var(--vs-multi-value-xmark-size);fill:var(--vs-multi-value-xmark-color)}.multi-value-remove:hover svg[data-v-9395a16e]{fill:var(--vs-multi-value-xmark-hover-color)}.placeholder[data-v-a248d754]{grid-area:1 / 1 / 2 / 3;color:var(--vs-placeholder-color)}:root{--vs-width: 100%;--vs-min-height: 38px;--vs-padding: 4px 8px;--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-placeholder-color: #52525b;--vs-background-color: #fff;--vs-disabled-background-color: #f4f4f5;--vs-outline-width: 1px;--vs-outline-color: #3b82f6;--vs-menu-offset-top: 8px;--vs-menu-height: 200px;--vs-menu-border: var(--vs-border);--vs-menu-background-color: var(--vs-background-color);--vs-menu-box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--vs-menu-z-index: 2;--vs-option-width: 100%;--vs-option-padding: 8px 12px;--vs-option-cursor: pointer;--vs-option-font-size: var(--vs-font-size);--vs-option-font-weight: var(--vs-font-weight);--vs-option-text-align: -webkit-auto;--vs-option-text-color: var(--vs-text-color);--vs-option-hover-text-color: var(--vs-text-color);--vs-option-focused-text-color: var(--vs-text-color);--vs-option-selected-text-color: var(--vs-text-color);--vs-option-disabled-text-color: #52525b;--vs-option-background-color: var(--vs-menu-background);--vs-option-hover-background-color: #dbeafe;--vs-option-focused-background-color: var(--vs-option-hover-background-color);--vs-option-selected-background-color: #93c5fd;--vs-option-disabled-background-color: #f4f4f5;--vs-option-opacity-menu-open: .4;--vs-multi-value-margin: 2px;--vs-multi-value-border: 0px;--vs-multi-value-border-radius: 2px;--vs-multi-value-background-color: #f4f4f5;--vs-multi-value-label-padding: 4px 4px 4px 8px;--vs-multi-value-label-font-size: 12px;--vs-multi-value-label-font-weight: 400;--vs-multi-value-label-line-height: 1;--vs-multi-value-label-text-color: #3f3f46;--vs-multi-value-delete-padding: 0 3px;--vs-multi-value-delete-hover-background-color: #FF6467;--vs-multi-value-xmark-size: 16px;--vs-multi-value-xmark-cursor: pointer;--vs-multi-value-xmark-color: var(--vs-multi-value-label-text-color);--vs-multi-value-xmark-hover-color: #fff;--vs-indicators-gap: 0px;--vs-indicator-icon-size: 20px;--vs-indicator-icon-color: var(--vs-text-color);--vs-indicator-icon-cursor: pointer;--vs-indicator-dropdown-icon-transition: transform .2s ease-out;--vs-spinner-color: var(--vs-text-color);--vs-spinner-size: 16px}[data-v-ed6ce7d1]{box-sizing:border-box}.vue-select[data-v-ed6ce7d1]{position:relative;box-sizing:border-box;width:var(--vs-width)}.control[data-v-ed6ce7d1]{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;min-height:var(--vs-min-height);border:var(--vs-border);border-radius:var(--vs-border-radius);background-color:var(--vs-background-color)}.control.focused[data-v-ed6ce7d1]{box-shadow:0 0 0 var(--vs-outline-width) var(--vs-outline-color);border-color:var(--vs-outline-color)}.control.disabled[data-v-ed6ce7d1]{background-color:var(--vs-disabled-background-color)}.value-container[data-v-ed6ce7d1]{position:relative;overflow:hidden;display:grid;align-items:center;flex:1 1 0%;padding:var(--vs-padding)}.value-container.multi.has-value[data-v-ed6ce7d1]{display:flex;flex-wrap:wrap}.single-value[data-v-ed6ce7d1]{display:block;grid-area:1 / 1 / 2 / 3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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)}.vue-select[data-state=open] .single-value[data-v-ed6ce7d1]{opacity:var(--vs-option-opacity-menu-open)}.vue-select.typing .single-value[data-v-ed6ce7d1]{opacity:0}.input-container[data-v-ed6ce7d1]{visibility:visible;display:inline-grid;grid-area:1 / 1 / 2 / 3;grid-template-columns:0px min-content}.input-container.typing[data-v-ed6ce7d1]{transform:translateZ(0)}.input-container.typing[data-v-ed6ce7d1]:after{content:attr(data-value) " ";visibility:hidden;white-space:pre;grid-area:1 / 2;min-width:2px;padding:0;margin:0;border:0}.search-input[data-v-ed6ce7d1]{margin:0;padding:0;border:0;min-width:2px;width:100%;grid-area:1 / 2;background:0px center;font-size:var(--vs-font-size);font-family:var(--vs-font-family);line-height:var(--vs-line-height);color:var(--vs-text-color);opacity:1;outline:none}.menu[data-v-ed6ce7d1]{position:absolute;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-background-color);z-index:var(--vs-menu-z-index)}.no-results[data-v-ed6ce7d1]{padding:var(--vs-option-padding);font-size:var(--vs-font-size);font-family:var(--vs-font-family);color:var(--vs-text-color)}.taggable-no-options[data-v-ed6ce7d1]{padding:var(--vs-option-padding);font-size:var(--vs-font-size);font-family:var(--vs-font-family);color:var(--vs-text-color);cursor:pointer}')),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})(); | ||
| (function(e,b){typeof exports=="object"&&typeof module<"u"?module.exports=b(require("vue")):typeof define=="function"&&define.amd?define(["vue"],b):(e=typeof globalThis<"u"?globalThis:e||self,e["vue3-select-component"]=b(e.Vue))})(this,function(e){"use strict";const b=(d,r)=>{const o=d.__vccOpts||d;for(const[c,n]of r)o[c]=n;return o},I={},R={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"};function A(d,r){return e.openBlock(),e.createElementBlock("svg",R,r[0]||(r[0]=[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)]))}const M=b(I,[["render",A]]),F={},z={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor"};function q(d,r){return e.openBlock(),e.createElementBlock("svg",z,r[0]||(r[0]=[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)]))}const S=b(F,[["render",q]]),x={},P={className:"spinner"};function K(d,r){return e.openBlock(),e.createElementBlock("div",P,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(12,o=>e.createElementVNode("div",{key:o,class:"spinner-circle"})),64))])}const D=b(x,[["render",K],["__scopeId","data-v-ed866313"]]),U={ref:"container",class:"indicators-container"},H=["disabled"],j=["disabled"],Z=b(e.defineComponent({__name:"Indicators",props:{hasSelectedOption:{type:Boolean},isMenuOpen:{type:Boolean},isClearable:{type:Boolean},isLoading:{type:Boolean},isDisabled:{type:Boolean}},emits:["clear","toggle"],setup(d,{expose:r,emit:o}){const c=o,n=e.useTemplateRef("container"),u=e.useTemplateRef("clearButton"),f=e.useTemplateRef("dropdownButton");return r({containerRef:n,clearButtonRef:u,dropdownButtonRef:f}),(p,y)=>(e.openBlock(),e.createElementBlock("div",U,[p.hasSelectedOption&&p.isClearable&&!p.isLoading?(e.openBlock(),e.createElementBlock("button",{key:0,ref:"clearButton",type:"button",class:"clear-button",tabindex:"-1",disabled:p.isDisabled,onClick:y[0]||(y[0]=e.withModifiers(l=>c("clear"),["stop"]))},[e.renderSlot(p.$slots,"clear",{},()=>[e.createVNode(S)],!0)],8,H)):e.createCommentVNode("",!0),p.isLoading?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:1,ref:"dropdownButton",type:"button",class:e.normalizeClass(["dropdown-icon",{active:p.isMenuOpen}]),tabindex:"-1",disabled:p.isDisabled,onClick:y[1]||(y[1]=e.withModifiers(l=>c("toggle"),["stop"]))},[e.renderSlot(p.$slots,"dropdown",{},()=>[e.createVNode(M)],!0)],10,j)),e.renderSlot(p.$slots,"loading",{},()=>[p.isLoading?(e.openBlock(),e.createBlock(D,{key:0})):e.createCommentVNode("",!0)],!0)],512))}}),[["__scopeId","data-v-c1d96dfe"]]),X=["aria-disabled","aria-selected"],G=b(e.defineComponent({__name:"MenuOption",props:{menu:{},index:{},isFocused:{type:Boolean},isSelected:{type:Boolean},isDisabled:{type:Boolean}},emits:["select"],setup(d,{emit:r}){const o=d,c=r,n=e.ref(null);return e.watch(()=>o.isFocused,()=>{if(o.isFocused&&o.menu){const u=o.menu.children[o.index],f=u.offsetTop,p=f+u.clientHeight,y=o.menu.scrollTop,l=o.menu.clientHeight;f<y?o.menu.scrollTop=f:p>y+l&&(o.menu.scrollTop=p-l)}}),(u,f)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"option",ref:n,class:e.normalizeClass(["menu-option",{focused:u.isFocused,selected:u.isSelected,disabled:u.isDisabled}]),tabindex:"-1",role:"option","aria-disabled":u.isDisabled,"aria-selected":u.isSelected,onClick:f[0]||(f[0]=p=>c("select")),onKeydown:f[1]||(f[1]=e.withKeys(p=>c("select"),["enter"]))},[e.renderSlot(u.$slots,"default",{},void 0,!0)],42,X))}}),[["__scopeId","data-v-00296627"]]),J={class:"multi-value"},Q={class:"multi-value-label"},W=["aria-label"],Y=b(e.defineComponent({__name:"MultiValue",props:{label:{}},emits:["remove"],setup(d,{emit:r}){const o=r;return(c,n)=>(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("div",Q,e.toDisplayString(c.label),1),e.createElementVNode("button",{type:"button",class:"multi-value-remove","aria-label":`Remove ${c.label}`,onClick:n[0]||(n[0]=u=>o("remove"))},[e.createVNode(S)],8,W)]))}}),[["__scopeId","data-v-9395a16e"]]),ee={class:"placeholder"},te=b(e.defineComponent({__name:"Placeholder",props:{text:{}},setup(d){return(r,o)=>(e.openBlock(),e.createElementBlock("div",ee,e.toDisplayString(r.text),1))}}),[["__scopeId","data-v-a248d754"]]);let oe=0;function le(){return++oe}const ne=["data-state"],ae=["id","aria-expanded","aria-describedby","aria-description","aria-labelledby","aria-label","aria-required","aria-owns","aria-controls"],ie=["data-value"],se=["id","aria-labelledby","disabled"],re=["id","aria-label","aria-multiselectable"],de={key:0,class:"no-results"},ce=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},isTaggable:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},isMenuOpen:{type:Boolean,default:void 0},shouldAutofocusOption:{type:Boolean,default:!0},closeOnSelect:{type:Boolean,default:!0},teleport:{default:void 0},inputId:{default:void 0},class:{},uid:{default:le()},aria:{default:void 0},filterBy:{type:Function,default:(d,r,o)=>r.toLowerCase().includes(o.toLowerCase())},getOptionValue:{type:Function,default:d=>d.value},getOptionLabel:{type:Function,default:d=>d.label}},{modelValue:{required:!0,validator:(d,r)=>r.isMulti?Array.isArray(d):!Array.isArray(d)},modelModifiers:{}}),emits:e.mergeModels(["optionSelected","optionDeselected","optionCreated","menuOpened","menuClosed","search"],["update:modelValue"]),setup(d,{emit:r}){const o=d,c=r,n=e.useModel(d,"modelValue"),u=e.useTemplateRef("container"),f=e.useTemplateRef("input"),p=e.useTemplateRef("menu"),y=e.useTemplateRef("indicators"),l=e.ref(""),m=e.ref(!1),C=e.ref(-1),h=e.computed(()=>{const t=o.displayedOptions||o.options;t?.length||console.warn("[vue3-select-component warn]: No options or displayedOptions were provided to the component.");const a=t.map(i=>({...i,label:o.getOptionLabel(i),value:o.getOptionValue(i)})),s=i=>i.filter(k=>!n.value.includes(k.value));if(o.isSearchable&&l.value){const i=a.filter(k=>o.filterBy(k,o.getOptionLabel(k),l.value));return o.isMulti?s(i):i}return o.isMulti?s(a):a}),g=e.computed(()=>{if(o.isMulti)return Array.isArray(n.value)||console.warn(`[vue3-select-component warn]: The v-model provided should be an array when using \`isMulti\` prop, instead it was: ${n.value}`),n.value.map(a=>o.options.find(s=>s.value===a));const t=o.options.find(a=>o.getOptionValue(a)===n.value);return t?[t]:[]});function $(){o.isDisabled||(m.value=!0,o.shouldAutofocusOption&&(C.value=o.options.findIndex(t=>!t.disabled)),f.value&&f.value.focus(),c("menuOpened"))}function B(){m.value=!1,l.value="",c("menuClosed")}function ue(){m.value?B():$()}function pe(t){y.value?.containerRef&&!y.value.containerRef.contains(t.target)&&$()}const V=t=>{t.disabled||(o.isMulti?n.value.push(t.value):n.value=t.value,c("optionSelected",t),l.value="",o.closeOnSelect&&B(),f.value&&f.value.blur())},N=t=>{o.isMulti&&!o.isDisabled&&(n.value=n.value.filter(a=>a!==t.value),c("optionDeselected",t))},fe=()=>{o.isMulti?(n.value=[],c("optionDeselected",null)):(n.value=void 0,c("optionDeselected",g.value[0])),B(),f.value&&f.value.blur()},E=()=>{c("optionCreated",l.value),l.value="",B()},_=t=>{if(m.value){const a=C.value;if(t.key==="ArrowDown"){t.preventDefault();const i=h.value.findIndex((w,v)=>!w.disabled&&v>a),k=h.value.findIndex(w=>!w.disabled);C.value=i===-1?k:i}if(t.key==="ArrowUp"){t.preventDefault();const i=h.value.reduce((w,v,O)=>!v.disabled&&O<a?O:w,-1),k=h.value.reduce((w,v,O)=>v.disabled?w:O,-1);C.value=i===-1?k:i}if(t.key==="Enter"){const i=h.value[a];t.preventDefault(),i?V(i):o.isTaggable&&l.value&&E()}if(t.code==="Space"&&l.value.length===0){const i=h.value[a];t.preventDefault(),i&&V(i)}t.key==="Escape"&&(t.preventDefault(),B());const s=o.isMulti?n.value.length>0:!!n.value;t.key==="Backspace"&&l.value.length===0&&s&&(t.preventDefault(),o.isMulti?n.value=n.value.slice(0,-1):n.value=void 0)}},me=t=>{t.key==="Tab"?B():t.code==="Space"&&!m.value&&l.value.length===0&&(t.preventDefault(),t.stopImmediatePropagation(),$())},L=t=>{u.value&&!u.value.contains(t.target)&&B()},T=()=>{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(()=>l.value,()=>{c("search",l.value),l.value&&!m.value&&$()}),e.watch(()=>o.isMenuOpen,t=>{t?$():B()},{immediate:!0}),e.onMounted(()=>{document.addEventListener("mousedown",L),document.addEventListener("keydown",_)}),e.onBeforeUnmount(()=>{document.removeEventListener("mousedown",L),document.removeEventListener("keydown",_)}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{ref:"container",dir:"auto",class:e.normalizeClass(["vue-select",[{open:m.value,typing:m.value&&l.value.length>0,disabled:t.isDisabled},o.class]]),"data-state":m.value?"open":"closed"},[e.createElementVNode("div",{class:e.normalizeClass(["control",{focused:m.value,disabled:o.isDisabled}]),onClick:a[3]||(a[3]=s=>pe(s))},[e.createElementVNode("div",{id:`vue-select-${t.uid}-combobox`,class:e.normalizeClass(["value-container",{multi:t.isMulti,"has-value":g.value.length>0}]),role:"combobox","aria-expanded":m.value,"aria-describedby":t.placeholder,"aria-description":t.placeholder,"aria-labelledby":t.aria?.labelledby,"aria-label":g.value.length?g.value.map(t.getOptionLabel).join(", "):"","aria-required":t.aria?.required,"aria-owns":`vue-select-${t.uid}-listbox`,"aria-controls":`vue-select-${t.uid}-listbox`,"aria-haspopup":"true"},[!g.value[0]&&!l.value.length?(e.openBlock(),e.createBlock(te,{key:0,text:t.placeholder},null,8,["text"])):!o.isMulti&&g.value[0]?(e.openBlock(),e.createElementBlock("div",{key:1,class:"single-value",onClick:a[0]||(a[0]=s=>$())},[e.renderSlot(t.$slots,"value",{option:g.value[0]},()=>[e.createTextVNode(e.toDisplayString(t.getOptionLabel(g.value[0])),1)],!0)])):o.isMulti&&g.value.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(g.value,s=>e.renderSlot(t.$slots,"tag",{key:s.value,option:s,removeOption:()=>N(s)},()=>[e.createVNode(Y,{label:t.getOptionLabel(s),onRemove:i=>N(s)},null,8,["label","onRemove"])],!0)),128)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["input-container",{typing:m.value&&l.value.length>0}]),"data-value":l.value},[e.withDirectives(e.createElementVNode("input",{id:t.inputId,ref:"input","onUpdate:modelValue":a[1]||(a[1]=s=>l.value=s),class:"search-input",autocapitalize:"none",autocomplete:"off",autocorrect:"off",spellcheck:"false",tabindex:"0",type:"text","aria-autocomplete":"list","aria-labelledby":`vue-select-${t.uid}-combobox`,disabled:t.isDisabled,placeholder:"",onMousedown:a[2]||(a[2]=s=>$()),onKeydown:me},null,40,se),[[e.vModelText,l.value]])],10,ie)],10,ae),e.createVNode(Z,{ref:"indicators","has-selected-option":g.value.length>0,"is-menu-open":m.value,"is-clearable":t.isClearable,"is-loading":t.isLoading,"is-disabled":t.isDisabled,onClear:fe,onToggle:ue},{clear:e.withCtx(()=>[e.renderSlot(t.$slots,"clear",{},()=>[e.createVNode(S)],!0)]),dropdown:e.withCtx(()=>[e.renderSlot(t.$slots,"dropdown",{},()=>[e.createVNode(M)],!0)]),loading:e.withCtx(()=>[e.renderSlot(t.$slots,"loading",{},()=>[t.isLoading?(e.openBlock(),e.createBlock(D,{key:0})):e.createCommentVNode("",!0)],!0)]),_:3},8,["has-selected-option","is-menu-open","is-clearable","is-loading","is-disabled"])],2),(e.openBlock(),e.createBlock(e.Teleport,{to:t.teleport,disabled:!t.teleport,defer:!0},[m.value?(e.openBlock(),e.createElementBlock("div",{key:0,id:`vue-select-${t.uid}-listbox`,ref:"menu",class:"menu",role:"listbox","aria-label":t.aria?.labelledby,"aria-multiselectable":t.isMulti,style:e.normalizeStyle({width:o.teleport?`${e.unref(u)?.getBoundingClientRect().width}px`:"100%",top:o.teleport?T().top:"unset",left:o.teleport?T().left:"unset"})},[e.renderSlot(t.$slots,"menu-header",{},void 0,!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(s,i)=>(e.openBlock(),e.createBlock(G,{key:i,type:"button",menu:e.unref(p),index:i,"is-focused":C.value===i,"is-selected":s.value===n.value,"is-disabled":s.disabled||!1,onSelect:k=>V(s)},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"option",{option:s},()=>[e.createTextVNode(e.toDisplayString(t.getOptionLabel(s)),1)],!0)]),_:2},1032,["menu","index","is-focused","is-selected","is-disabled","onSelect"]))),128)),!t.isTaggable&&h.value.length===0?(e.openBlock(),e.createElementBlock("div",de,[e.renderSlot(t.$slots,"no-options",{},()=>[a[4]||(a[4]=e.createTextVNode(" No results found "))],!0)])):e.createCommentVNode("",!0),t.isTaggable&&l.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:"taggable-no-options",onClick:E},[e.renderSlot(t.$slots,"taggable-no-options",{option:l.value},()=>[e.createTextVNode(" Press enter to add "+e.toDisplayString(l.value)+" option ",1)],!0)])):e.createCommentVNode("",!0)],12,re)):e.createCommentVNode("",!0)],8,["to","disabled"]))],10,ne))}});return b(ce,[["__scopeId","data-v-ed6ce7d1"]])}); |
@@ -76,2 +76,7 @@ export type Option<T> = { | ||
| /** | ||
| * Unique identifier to identify the select component, using `id` attribute. | ||
| * This is useful for accessibility. | ||
| */ | ||
| uid?: string | number; | ||
| /** | ||
| * ARIA attributes to describe the select component. This is useful for accessibility. | ||
@@ -78,0 +83,0 @@ */ |
| { | ||
| "name": "vue3-select-component", | ||
| "type": "module", | ||
| "version": "0.11.1", | ||
| "version": "0.11.2", | ||
| "description": "A flexible & modern select-input control for Vue 3.", | ||
@@ -6,0 +6,0 @@ "author": "Thomas Cazade <cazade.thomas@gmail.com>", |
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains 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
69028
1.38%- Number of package files
17
6.25%- Lines of code
853
2.28%No dependency changes