@volverjs/ui-vue/dist/components/VvSelect/VvSelect.es.js

@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.

import{computed as e,isRef as l,defineComponent as t,h as a,inject as i,unref as o,mergeDefaults as n,ref as r,toRefs as u,createBlock as s,createCommentVNode as d,openBlock as v,mergeProps as c,watch as f,useId as p,useSlots as b,createElementBlock as y,normalizeClass as h,createElementVNode as g,createVNode as m,toDisplayString as S,renderSlot as L,normalizeProps as $,guardReactiveProps as O,withDirectives as B,Fragment as k,renderList as V,vModelSelect as A,createSlots as _,withCtx as w}from"vue";import{iconLoaded as I,Icon as x,addIcon as F}from"@iconify/vue";import{useFocus as C,useElementVisibility as j}from"@vueuse/core";import{getProperty as N}from"dot-prop";const H={prefix:"normal"};var q=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(q||{}),z=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(z||{}),K=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(K||{}),P=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(P||{}),D=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(D||{});const E=Symbol.for("volver"),T={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},M={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},J={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},G={disabled:{type:Boolean,default:!1}},R={showClearAction:{type:Boolean,default:!1},iconClear:{type:[String,Object],default:"close"},labelClear:{type:String,default:"Clear"}},U={label:{type:[String,Number],default:void 0}},Q={readonly:{type:Boolean,default:!1}},W={modifiers:{type:[String,Array],default:void 0}},X={hintLabel:{type:String,default:""}},Y={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}},Z={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:K.before,validation:e=>Object.values(K).includes(e)}},ee={tabindex:{type:[String,Number],default:0}},le={floating:{type:Boolean,default:!1}},te={unselectable:{type:Boolean,default:!0}},ae={id:[String,Number]};z.bottom;const ie={...ae,name:{type:String,required:!0}},oe={autofocus:{type:Boolean,default:!1}},ne={autocomplete:{type:String,default:"off"}};P.button,D.button,q.local;const re={...ie,...oe,...ne,...ee,...T,...M,...X,...J,...G,...Q,...W,...Y,...Z,...le,...te,...U,...R,multiple:Boolean,required:Boolean,size:[String,Number],modelValue:{type:[String,Number,Boolean,Object,Array],default:void 0},autoselectFirst:{type:Boolean,default:!1},placeholder:String};function ue(){return{...re,options:{...re.options,type:Array,default:()=>[]}}}function se(e){return Array.isArray(e)?e.filter(e=>"string"==typeof e).join(" "):e}function de(){return i(E,void 0)}function ve(l,t,a){return e(()=>{const e={[l]:!0},i="string"==typeof t?.value?t.value.split(" "):t?.value;return i&&Array.isArray(i)&&i.forEach(t=>{t&&(e[`${l}--${t}`]=!0)}),a&&Object.keys(a.value).forEach(t=>{e[`${l}--${t}`]=o(a.value[t])}),e})}const ce=/* @__PURE__ */t({name:"VvIcon",props:/* @__PURE__ */n({name:{},color:{},width:{},height:{},provider:{},prefix:{},src:{},horizontalFlip:{type:Boolean},verticalFlip:{type:Boolean},flip:{},mode:{},inline:{type:Boolean},rotate:{},onLoad:{type:Function},svg:{},modifiers:{}},H),setup(l){const t=l,a=e(()=>"string"==typeof t.rotate?Number.parseFloat(t.rotate):t.rotate),i=r(!0),n=de(),{modifiers:f}=u(t),p=ve("vv-icon",f),b=e(()=>t.provider||n?.iconsProvider),y=e(()=>{const e=t.name??"",l=`@${b.value}:${t.prefix}:${e}`;if(I(l))return l;const a=n?.iconsCollections.find(l=>{const t=`@${b.value}:${l.prefix}:${e}`;return I(t)});return a?`@${b.value}:${a.prefix}:${e}`:e});function h(e){const l=function(e){let l;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");l=(new e).window}return(l?new l.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),a=l?.innerHTML.trim()||"";l&&a&&F(`@${b.value}:${t.prefix}:${t.name}`,{body:a,height:l.viewBox.baseVal.height,width:l.viewBox.baseVal.width})}return n&&t.src&&!I(`@${b.value}:${t.prefix}:${t.name}`)&&(i.value=!1,n.fetchIcon(t.src).then(e=>{e&&(h(e),i.value=!0)}).catch(e=>{throw new Error(`Error during fetch icon: ${e?.message}`)})),t.svg&&h(t.svg),(e,t)=>o(i)?(v(),s(o(x),c({key:0,class:o(p)},{inline:l.inline,width:l.width,height:l.height,horizontalFlip:l.horizontalFlip,verticalFlip:l.verticalFlip,flip:l.flip,rotate:o(a),color:l.color,icon:o(y)},{onLoad:l.onLoad}),null,16,["class","onLoad"])):d("v-if",!0)}});function fe(l,t){const a=e(()=>"string"==typeof l?.value?{name:l?.value}:l?.value),i=e(()=>t?.value===K.before?a.value:void 0),o=e(()=>t?.value===K.after?a.value:void 0),n=e(()=>t?.value===z.left?a.value:void 0),r=e(()=>t?.value===z.right?a.value:void 0),u=e(()=>t?.value===z.top?a.value:void 0),s=e(()=>t?.value===z.bottom?a.value:void 0);return{hasIcon:a,hasIconLeft:n,hasIconRight:r,hasIconTop:u,hasIconBottom:s,hasIconBefore:i,hasIconAfter:o}}const pe=t({components:{VvIcon:ce},props:{inputType:{type:String,default:"input-text"},disabled:{type:Boolean,default:!1},label:{type:String,default:"Clear"},icon:{type:[String,Object],default:"close"}},emits:["clear"],setup(l,{emit:t}){const{hasIcon:a}=fe(e(()=>l.icon));return{hasIcon:a,onClick:function(e){e?.stopPropagation(),l.disabled||t("clear")}}},render(){const e=this.hasIcon?a(ce,{...this.hasIcon,class:`vv-${this.inputType}__icon`}):void 0;return a("button",{disabled:this.disabled,class:`vv-${this.inputType}__action`,ariaLabel:this.label,type:"button",onClick:this.onClick},e)}});const be=["for"],ye={class:"vv-select__wrapper"},he={key:0,class:"vv-select__input-before"},ge={class:"vv-select__inner"},me=["id"],Se=["disabled","hidden"],Le=["disabled","value"],$e=["disabled","label"],Oe=["disabled","value"],Be={key:2,class:"vv-select__input-after"},ke=/* @__PURE__ */t({name:"VvSelect",props:ue(),emits:["update:modelValue","focus","blur","clear"],setup(i,{emit:n}){const I=i,x=n,F=b(),H=function(l,t,a){const i=de(),o=e(()=>{if(i&&i.defaults.value?.[l])return i.defaults.value[l]});return e(()=>{if(void 0===o.value)return a;const e=o.value,l=t,i=a;return Object.keys(l).reduce((t,a)=>{const o=i[a];if(t[a]=o,a in e){if(Array.isArray(l[a])){const i=l[a];i.length&&i[0]===o&&(t[a]=e[a])}if("function"==typeof l[a]&&(0,l[a])()===o&&(t[a]=e[a]),"object"==typeof l[a]){let i=l[a].default;"function"==typeof i&&(i=i()),"object"==typeof i?JSON.stringify(i)===JSON.stringify(o)&&(t[a]=e[a]):i===o&&(t[a]=e[a])}}return t},{})})}("VvSelect",ue(),I),q=r(),{HintSlot:z,hasHintLabelOrSlot:K,hasInvalidLabelOrSlot:P,hintSlotScope:D}=function(i,o){const n=e(()=>l(i)?i.value:i),r=e(()=>se(n.value.invalidLabel)),u=e(()=>se(n.value.validLabel)),s=e(()=>n.value.loadingLabel),d=e(()=>n.value.hintLabel),v=e(()=>Boolean(n.value.loading&&(o.loading||s.value))),c=e(()=>!v.value&&Boolean(n.value.invalid&&(o.invalid||r.value))),f=e(()=>!v.value&&!c.value&&Boolean(n.value.valid&&(o.valid||u.value))),p=e(()=>!v.value&&!c.value&&!f.value&&Boolean(o.hint||d.value)),b=e(()=>c.value||f.value||v.value||p.value),y=e(()=>({modelValue:n.value.modelValue,valid:n.value.valid,invalid:n.value.invalid,loading:n.value.loading})),h=t({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup:()=>({isVisible:b,invalidLabel:r,validLabel:u,loadingLabel:s,hintLabel:d,hasInvalidLabelOrSlot:c,hasValidLabelOrSlot:f,hasLoadingLabelOrSlot:v,hasHintLabelOrSlot:p}),render(){if(this.isVisible){let e;return this.hasInvalidLabelOrSlot&&(e="alert"),this.hasValidLabelOrSlot&&(e="status"),this.hasLoadingLabelOrSlot?a(this.tag,{role:e},this.$slots.loading?.()??this.loadingLabel):this.hasInvalidLabelOrSlot?a(this.tag,{role:e},this.$slots.invalid?.()??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?a(this.tag,{role:e},this.$slots.valid?.()??this.validLabel):a(this.tag,{role:e},this.$slots.hint?.()??this.$slots.hint??this.hintLabel)}return null}});return{hasInvalidLabelOrSlot:c,hasHintLabelOrSlot:p,hasValidLabelOrSlot:f,hasLoadingLabelOrSlot:v,hintSlotScope:y,HintSlot:h}}(H,F),{focused:E}=function(e,l){const{focused:t}=C(e);return f(t,t=>{l(t?"focus":"blur",o(e))}),{focused:t}}(q,x);function T(e){return"string"!=typeof e&&e.options?.length}const{id:M,modifiers:J,disabled:G,readonly:R,loading:U,icon:Q,iconPosition:W,invalid:X,valid:Y,floating:Z,multiple:ee}=u(I),le=function(l){return e(()=>String(l?.value||p()))}(M),te=e(()=>`${le.value}-hint`),ae=e(()=>I.disabled||I.readonly),ie=e(()=>ae.value?-1:I.tabindex),oe=e({get:()=>I.modelValue,set:e=>{Array.isArray(e)&&0===(e=e.filter(e=>void 0!==e)).length&&!I.unselectable&&q.value?q.value.value=String(I.modelValue):x("update:modelValue",e)}}),ne=e(()=>Array.isArray(oe.value)?oe.value.length>0:void 0!==oe.value&&null!==oe.value),re=e(()=>!ae.value&&I.unselectable),ke=j(q);f(ke,e=>{e&&I.autofocus&&(E.value=!0)});const{hasIconBefore:Ve,hasIconAfter:Ae}=fe(Q,W),_e=e(()=>!0===I.invalid||!0!==I.valid&&void 0),we=ve("vv-select",J,e(()=>({valid:Y.value,invalid:X.value,loading:U.value,disabled:G.value,readonly:R.value,"icon-before":void 0!==Ve.value,"icon-after":void 0!==Ae.value,dirty:ne.value,focus:E.value&&!ae.value,floating:Z.value,multiple:ee.value}))),{getOptionLabel:Ie,getOptionValue:xe,isOptionDisabled:Fe,getOptionGrouped:Ce}=function(e){const{options:l,labelKey:t,valueKey:a,disabledKey:i}=u(e);return{options:l,getOptionLabel:e=>"string"==typeof e?e:"function"==typeof t.value?t.value(e):String(t.value?N(e,t.value):e),getOptionValue:e=>"string"==typeof e?e:"function"==typeof a.value?a.value(e):a.value?N(e,a.value):e,isOptionDisabled:e=>"string"!=typeof e&&("function"==typeof i.value?i.value(e):!!i.value&&Boolean(N(e,i.value))),getOptionGrouped:e=>"string"==typeof e?[]:"object"==typeof e&&e&&"options"in e?e.options:[]}}(I);function je(){Array.isArray(oe.value)?oe.value=[]:oe.value=void 0,x("clear")}f(()=>I.options,e=>{if(e?.length&&I.autoselectFirst&&!ne.value){const l=xe(e[0]);oe.value=I.multiple?[l]:l}},{immediate:!0});const Ne=e(()=>({name:I.name,tabindex:ie.value,disabled:ae.value,required:I.required,size:I.size,autocomplete:I.autocomplete,multiple:I.multiple,"aria-invalid":_e.value,"aria-describedby":K.value?te.value:void 0,"aria-errormessage":P.value?te.value:void 0})),He=e(()=>({valid:I.valid,invalid:I.invalid,modelValue:I.modelValue}));return(e,t)=>(v(),y("div",{class:h(o(we))},[e.label?(v(),y("label",{key:0,for:o(le)},S(e.label),9,be)):d("v-if",!0),g("div",ye,[e.$slots.before?(v(),y("div",he,[L(e.$slots,"before",$(O(o(He))))])):d("v-if",!0),g("div",ge,[o(Ve)?(v(),s(ce,c({key:0},o(Ve),{class:"vv-select__icon"}),null,16)):d("v-if",!0),B(g("select",c({id:o(le),ref_key:"selectEl",ref:q},o(Ne),{"onUpdate:modelValue":t[0]||(t[0]=e=>l(oe)?oe.value=e:null)}),[e.placeholder?(v(),y("option",{key:0,value:void 0,disabled:!o(re),hidden:!o(re)},S(e.placeholder),9,Se)):d("v-if",!0),(v(!0),y(k,null,V(e.options,(e,l)=>(v(),y(k,null,[T(e)?(v(),y("optgroup",{key:`group-${l}`,disabled:o(Fe)(e),label:o(Ie)(e)},[(v(!0),y(k,null,V(o(Ce)(e),(e,t)=>(v(),y("option",{key:`group-${l}-item-${t}`,disabled:o(Fe)(e),value:o(xe)(e)},S(o(Ie)(e)),9,Oe))),128))],8,$e)):(v(),y("option",{key:l,disabled:o(Fe)(e),value:o(xe)(e)},S(o(Ie)(e)),9,Le))],64))),256))],16,me),[[A,o(oe)]]),o(Ae)?(v(),s(ce,c({key:1},o(Ae),{class:"vv-select__icon vv-select__icon-after"}),null,16)):d("v-if",!0)]),o(re)&&o(H).showClearAction?(v(),s(o(pe),{key:1,"input-type":"select",label:e.labelClear,icon:e.iconClear,disabled:!o(ne),onClear:je},null,8,["label","icon","disabled"])):d("v-if",!0),e.$slots.after?(v(),y("div",Be,[L(e.$slots,"after",$(O(o(He))))])):d("v-if",!0)]),m(o(z),{id:o(te),class:"vv-select__hint"},_({_:2},[e.$slots.hint?{name:"hint",fn:w(()=>[L(e.$slots,"hint",$(O(o(D))))]),key:"0"}:void 0,e.$slots.loading?{name:"loading",fn:w(()=>[L(e.$slots,"loading",$(O(o(D))))]),key:"1"}:void 0,e.$slots.valid?{name:"valid",fn:w(()=>[L(e.$slots,"valid",$(O(o(D))))]),key:"2"}:void 0,e.$slots.invalid?{name:"invalid",fn:w(()=>[L(e.$slots,"invalid",$(O(o(D))))]),key:"3"}:void 0]),1032,["id"])],2))}});export{ke as default};