@volverjs/ui-vue 0.0.1-beta.11 → 0.0.1-beta.16

package/dist/components/VvSelect/VvSelect.umd.js

@@ -1,2 +1 @@
-(function(t,k){typeof exports=="object"&&typeof module<"u"?module.exports=k(require("vue"),require("@vueuse/core"),require("uuid")):typeof define=="function"&&define.amd?define(["vue","@vueuse/core","uuid"],k):(t=typeof globalThis<"u"?globalThis:t||self,t.VvSelect=k(t.vue,t.core,t.uuid))})(this,function(t,k,N){"use strict";const g={equals(r,n,e){return e?this.resolveFieldData(r,e)===this.resolveFieldData(n,e):this.deepEquals(r,n)},deepEquals(r,n){if(r===n)return!0;if(r&&n&&typeof r=="object"&&typeof n=="object"){const e=Array.isArray(r),u=Array.isArray(n);let l,s,c;if(e&&u){if(s=r.length,s!=n.length)return!1;for(l=s;l--!==0;)if(!this.deepEquals(r[l],n[l]))return!1;return!0}if(e!=u)return!1;const m=r instanceof Date,a=n instanceof Date;if(m!=a)return!1;if(m&&a)return r.getTime()==n.getTime();const h=r instanceof RegExp,b=n instanceof RegExp;if(h!=b)return!1;if(h&&b)return r.toString()==n.toString();const o=Object.keys(r);if(s=o.length,s!==Object.keys(n).length)return!1;for(l=s;l--!==0;)if(!Object.prototype.hasOwnProperty.call(n,o[l]))return!1;for(l=s;l--!==0;)if(c=o[l],!this.deepEquals(r[c],n[c]))return!1;return!0}return r!==r&&n!==n},resolveFieldData(r,n){if(r&&Object.keys(r).length&&n){if(n.indexOf(".")===-1)return r[n];{const e=n.split(".");let u=r;for(let l=0,s=e.length;l<s;++l){if(r==null)return null;u=u[e[l]]}return u}}else return null},isFunction(r){return!!(r&&r.constructor&&r.call&&r.apply)},findIndexInList(r,n){let e=-1;if(n){for(let u=0;u<n.length;u++)if(this.equals(n[u],r)){e=u;break}}return e},contains(r,n){if(r!=null&&n&&n.length){for(const e of n)if(this.equals(r,e))return!0}return!1},isEmpty(r){return r==null||r===""||Array.isArray(r)&&r.length===0||!(r instanceof Date)&&typeof r=="object"&&Object.keys(r).length===0},isNotEmpty(r){return!this.isEmpty(r)},pickBy(r,n){return Object.fromEntries(Object.entries(r).filter(([e])=>n(e)))},removeFromList(r,n){const e=this.findIndexInList(r,n);return e>-1?n.filter((u,l)=>l!==e):n},isString(r){return typeof r=="string"||r instanceof String},propsToObject(r){return Object.keys(r).reduce((n,e)=>{var u,l,s,c,m;return this.isFunction(r[e])?n[e]=r[e]():Array.isArray(r[e])?n[e]=r[e][0]():(u=r[e])!=null&&u.type&&(Array.isArray(r[e].type)?n[e]=((l=r[e])==null?void 0:l.default)||((s=r[e])==null?void 0:s.type[0]()):n[e]=((c=r[e])==null?void 0:c.default)||((m=r[e])==null?void 0:m.type())),n},{})},filterArray(r,n,e){return r.filter(u=>n.some(l=>typeof l=="string"?u[e]==l:this.equals(u[e],l[e])))},kebabCase(r){var n,e;if(r)return(e=(n=r.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g))==null?void 0:n.join("-"))==null?void 0:e.toLowerCase()}},K={valid:Boolean,validLabel:[String,Array]},q={error:Boolean,errorLabel:[String,Array]},P={loading:Boolean,loadingLabel:String},w={disabled:Boolean},$={readonly:Boolean},D={modifiers:[String,Array]},x={...K,...q,...{hintLabel:{type:String,default:""}},...P,...w,...$,...D,modelValue:[String,Array,Object],label:String,labelNoResult:{type:String,default:"No results"},placeholder:String,searchable:Boolean,searchPlaceholder:String,debounceSearch:{type:[Number,String],default:0},options:{type:Array,required:!0},useObject:Boolean,multiple:Boolean,maxValues:[Number,String],separator:{type:String,default:", "},labelKey:{type:String,default:"label"},valueKey:{type:String,default:"value"},iconLeft:String,iconRight:String};function E(r){return Array.isArray(r)?r.filter(n=>g.isString(n)).reduce((n,e)=>n.length>0?n+`
-`+e:e,""):r}function F(r,n){return{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(e){const u=t.toRefs(r),{error:l,valid:s,hint:c,loading:m}=n,{hintLabel:a,modelValue:h,valid:b,validLabel:o,error:V,errorLabel:i}=u,f=g.resolveFieldData(u,"loading"),y=g.resolveFieldData(u,"loadingLabel"),S=t.computed(()=>V.value?!!(V.value&&l||(i==null?void 0:i.value)&&Array.isArray(i.value)&&i.value.length>0||(i==null?void 0:i.value)&&g.isNotEmpty(i.value)):!1),C=t.computed(()=>!!(a&&a.value||c||s||o&&o.value||S.value||(f==null?void 0:f.value)&&m||(f==null?void 0:f.value)&&(y==null?void 0:y.value))),O=t.computed(()=>{const B=k.toReactive({hintLabel:a,modelValue:h,valid:b,validLabel:o,error:V,errorLabel:i,loading:f,loadingLabel:y,...e.params});return V!=null&&V.value?(l==null?void 0:l(B))||E(i==null?void 0:i.value)||(a==null?void 0:a.value):b!=null&&b.value?(s==null?void 0:s(B))||E(o==null?void 0:o.value)||(a==null?void 0:a.value):f!=null&&f.value?(m==null?void 0:m(B))||E(y==null?void 0:y.value)||(a==null?void 0:a.value):(c==null?void 0:c(B))||E(a==null?void 0:a.value)||(a==null?void 0:a.value)});return{hasHint:C,hintContent:O}},render(){if(this.hasHint)return t.h("pre",{style:{"white-space":"pre"}},this.hintContent)}}}function _(r,n){const e={[`${r}`]:!0};return{bemCssClasses:t.computed(()=>Object.keys(n).reduce((l,s)=>{const c=t.unref(n[s])||!1;if(!c)return l;if(s==="modifiers"){const m=Array.isArray(c)?c:[c];return{...l,...m.reduce((a,h)=>({...a,[`${r}--${g.kebabCase(h)}`]:!0}),{})}}else return{...l,[`${r}--${g.kebabCase(s)}`]:c}},e)||{})}}const R={...w,...D,modelValue:[String,Array,Object],labelNoResult:{type:String,default:"No results"},options:{type:Array,required:!0},useObject:Boolean,multiple:Boolean,maxValues:[Number,String],labelKey:{type:String,default:"label"},valueKey:{type:String,default:"value"}},T={key:0},H=["for"],I=["id","type","value","checked","disabled"],z=t.defineComponent({__name:"VvDropdown",props:R,emits:["update:modelValue"],setup(r,{emit:n}){const e=r,u=N.v4(),{modifiers:l,disabled:s}=t.toRefs(e),{bemCssClasses:c}=_("vv-dropdown",{modifiers:l,disabled:s});function m(o){return Array.isArray(e.modelValue)?g.contains(o,e.modelValue)||g.contains(a(o),e.modelValue):g.equals(o,e.modelValue)||g.equals(a(o),e.modelValue)}function a(o){return typeof o=="string"?o:String(o[e.valueKey])}function h(o){return typeof o=="string"?o:o[e.labelKey]}function b(o){var y,S;const V=o.target;let i=V.value;if(i=(e.useObject?(y=e.options)==null?void 0:y.find(C=>C[e.valueKey]==i):null)||i,e.multiple){if(typeof e.maxValues<"u"&&e.maxValues>=0&&((S=e.modelValue)==null?void 0:S.length)>=e.maxValues&&(Array.isArray(e.modelValue)&&!g.contains(i,e.modelValue)||e.maxValues==0)){V.checked=!1;return}Array.isArray(e.modelValue)?i=g.contains(i,e.modelValue)?g.removeFromList(i,e.modelValue):[...e.modelValue,i]:i=[i]}n("update:modelValue",i)}return(o,V)=>{var i;return t.openBlock(),t.createElementBlock("ul",{class:t.normalizeClass(t.unref(c)),role:"listbox"},[(i=o.options)!=null&&i.length?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("li",T,[t.createElementVNode("label",null,t.toDisplayString(o.labelNoResult),1)])),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(o.options,(f,y)=>{var S;return t.openBlock(),t.createElementBlock("li",{key:y},[t.createElementVNode("label",{for:`dropdown-${y}-${t.unref(u)}`},[t.createElementVNode("input",{id:`dropdown-${y}-${t.unref(u)}`,type:o.multiple?"checkbox":"radio",value:a(f),checked:m(f),disabled:typeof f=="object"&&(S=f.disabled)!=null?S:t.unref(s),onInput:b},null,40,I),t.createTextVNode(" "+t.toDisplayString(h(f)),1)],8,H)])}),128))],2)}}}),M=["id"],Z={key:0,for:"select"},U=["placeholder"];return t.defineComponent({__name:"VvSelect",props:x,emits:["update:modelValue","change:search"],setup(r,{emit:n}){const e=r,u=t.useSlots(),l=F(e,u),s=t.ref(),c=t.ref();k.useFocus(c,{initialValue:!0});const m=N.v4(),a=t.ref(""),h=k.refDebounced(a,Number(e.debounceSearch)),b=t.ref(!1),{modifiers:o,disabled:V,readonly:i,loading:f,iconLeft:y,iconRight:S,valid:C,error:O}=t.toRefs(e);t.watch(h,()=>n("change:search",h.value));const{bemCssClasses:B}=_("vv-select",{modifiers:o,disabled:V,loading:f,readonly:i,iconLeft:y,iconRight:S,valid:C,invalid:O,dirty:t.computed(()=>g.isNotEmpty(e.modelValue))}),L=t.computed(()=>{var d;return(d=e.options)==null?void 0:d.every(p=>typeof p=="object")}),G=t.computed(()=>e.searchable?J.value:e.options),J=t.computed(()=>{var d;return(d=e.options)==null?void 0:d.filter(p=>typeof p=="string"?p.toLowerCase().includes(h.value.toLowerCase().trim()):p[e.labelKey].toLowerCase().includes(h.value.toLowerCase().trim()))}),Q=t.computed(()=>{var p,A;if(e.multiple&&((p=e.modelValue)==null?void 0:p.length)&&Array.isArray(e.modelValue))return L.value?g.filterArray(e.options,e.modelValue,e.valueKey).map(j=>j[e.labelKey]).join(e.separator):e.modelValue.join(e.separator);const d=e.useObject?e.modelValue:(A=e.options)==null?void 0:A.find(j=>typeof j=="object"?j[e.valueKey]==e.modelValue:j==e.modelValue);return typeof d=="object"?d==null?void 0:d[e.labelKey]:d});k.onClickOutside(s,()=>{s.value.open=!1});function W(d){const p=d.target;b.value=p.open}function X(d){s.value&&!e.multiple&&(s.value.open=!1),n("update:modelValue",d)}return(d,p)=>(t.openBlock(),t.createElementBlock("div",{id:t.unref(m),class:t.normalizeClass(t.unref(B))},[d.label?(t.openBlock(),t.createElementBlock("label",Z,t.toDisplayString(d.label),1)):t.createCommentVNode("",!0),t.createElementVNode("details",{ref_key:"dropdown",ref:s,role:"list",class:"vv-select__wrapper",onClick:p[2]||(p[2]=A=>t.unref(V)||t.unref(i)?A.preventDefault():null),onKeyup:p[3]||(p[3]=t.withKeys(A=>s.value.open=!1,["esc"])),onToggle:W},[t.createElementVNode("summary",{class:"vv-select__input","aria-haspopup":"listbox",onKeyup:p[1]||(p[1]=t.withKeys(A=>d.searchable?A.preventDefault():null,["space"]))},[d.searchable&&b.value?t.withDirectives((t.openBlock(),t.createElementBlock("input",{key:0,ref_key:"inputSearch",ref:c,"onUpdate:modelValue":p[0]||(p[0]=A=>a.value=A),placeholder:d.searchPlaceholder},null,8,U)),[[t.vModelText,a.value]]):(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[t.createTextVNode(t.toDisplayString(t.unref(Q)||d.placeholder),1)],64))],32),t.createVNode(z,t.mergeProps({...e,options:t.unref(G)},{"onUpdate:modelValue":X}),null,16)],544),t.createVNode(t.unref(l),{class:"vv-select__hint"})],10,M))}})});
+(function(e,C){typeof exports=="object"&&typeof module<"u"?module.exports=C(require("vue"),require("nanoid"),require("@vueuse/core"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","nanoid","@vueuse/core","@iconify/vue"],C):(e=typeof globalThis<"u"?globalThis:e||self,e.VvSelect=C(e.vue,e.nanoid,e.core,e.vue$1))})(this,function(e,C,P,N){"use strict";function $(n,r,t){return t?x(n,t)===x(r,t):T(n,r)}function T(n,r){if(n===r)return!0;if(n&&r&&typeof n=="object"&&typeof r=="object"){const t=Array.isArray(n),u=Array.isArray(r);let o,c,l;if(t&&u){if(c=n.length,c!=r.length)return!1;for(o=c;o--!==0;)if(!T(n[o],r[o]))return!1;return!0}if(t!=u)return!1;const b=n instanceof Date,h=r instanceof Date;if(b!=h)return!1;if(b&&h)return n.getTime()==r.getTime();const g=n instanceof RegExp,i=r instanceof RegExp;if(g!=i)return!1;if(g&&i)return n.toString()==r.toString();const s=Object.keys(n);if(c=s.length,c!==Object.keys(r).length)return!1;for(o=c;o--!==0;)if(!Object.prototype.hasOwnProperty.call(r,s[o]))return!1;for(o=c;o--!==0;)if(l=s[o],!T(n[l],r[l]))return!1;return!0}return n!==n&&r!==r}function x(n,r){if(n&&Object.keys(n).length&&r){if(r.indexOf(".")===-1)return n[r];{const t=r.split(".");let u=n;for(let o=0,c=t.length;o<c;++o){if(n==null)return null;u=u[t[o]]}return u}}else return null}function Y(n,r){let t=-1;if(r){for(let u=0;u<r.length;u++)if($(r[u],n)){t=u;break}}return t}function K(n,r){if(n!=null&&r&&r.length){for(const t of r)if($(n,t))return!0}return!1}function F(n){return(r=>r==null||r===""||Array.isArray(r)&&r.length===0||!(r instanceof Date)&&typeof r=="object"&&Object.keys(r).length===0)(e.unref(n))}function ee(n,r){const t=Y(n,r);return t>-1?r.filter((u,o)=>o!==t):r}function te(n){return typeof n=="string"||n instanceof String}function re(n,r,t){return n.filter(u=>r.some(o=>typeof o=="string"?u[t]==o:$(u[t],o[t])))}function z(n){var r,t;if(n)return(t=(r=n.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g))==null?void 0:r.join("-"))==null?void 0:t.toLowerCase()}function R(n,r){const t={[`${n}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(r).reduce((o,c)=>{const l=e.unref(r[c])||!1;if(!l)return o;if(c==="modifiers"){const b=Array.isArray(l)?l:l.split(" ");return{...o,...b.reduce((h,g)=>({...h,[`${n}--${z(g)}`]:!0}),{})}}else return{...o,[`${n}--${z(c)}`]:l}},t)||{})}}function q(n){return Array.isArray(n)?n.filter(r=>te(r)).join(" "):n}function U(n,r){const{error:t,valid:u,hint:o,loading:c}=r,{hintLabel:l,modelValue:b,valid:h,validLabel:g,error:i,errorLabel:s,...a}=e.toRefs(n),y=x(a,"loading"),m=x(a,"loadingLabel"),V=e.computed(()=>i.value?!!(i.value&&t||s!=null&&s.value&&Array.isArray(s.value)&&s.value.length>0||s!=null&&s.value&&!F(s)):!1),S=e.computed(()=>!!(l&&l.value||o)),B=e.computed(()=>!!(g&&g.value||u)),_=e.computed(()=>!!(y!=null&&y.value&&c||y!=null&&y.value&&(m!=null&&m.value))),w=e.computed(()=>S.value||B||V.value||_.value);return{hasErrors:V,hasHint:S,hasValid:B,hasLoading:_,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(E){const j=e.computed(()=>{const A=P.toReactive({hintLabel:l,modelValue:b,valid:h,validLabel:g,error:i,errorLabel:s,loading:y,loadingLabel:m,...E.params});return i!=null&&i.value?(t==null?void 0:t(A))||q(s==null?void 0:s.value)||(l==null?void 0:l.value):h!=null&&h.value?(u==null?void 0:u(A))||q(g==null?void 0:g.value)||(l==null?void 0:l.value):y!=null&&y.value?(c==null?void 0:c(A))||q(m==null?void 0:m.value)||(l==null?void 0:l.value):(o==null?void 0:o(A))||q(l==null?void 0:l.value)||(l==null?void 0:l.value)});return{isVisible:w,hasErrors:V,hasValid:B,hintContent:j}},render(){if(this.isVisible)return e.h("small",{role:this.hasErrors||this.hasValid?"alert":void 0},this.hintContent)}}}}const Z={valid:Boolean,validLabel:[String,Array]},J={error:Boolean,errorLabel:[String,Array]},X={loading:Boolean,loadingLabel:String},I={disabled:Boolean},G={readonly:Boolean},M={modifiers:[String,Array]},Q={hintLabel:{type:String,default:""}},ne={...I,...M,modelValue:{type:[String,Number,Boolean,Object,Array],required:!0},labelNoResult:{type:String,default:"No results"},options:{type:Array,required:!0},useObject:Boolean,multiple:Boolean,maxValues:[Number,String],labelKey:{type:String,default:"label"},valueKey:{type:String,default:"value"}},oe={key:0,role:"option"},le=["aria-selected"],se=["for"],ae=["id","type","value","checked","disabled"],ie={name:"VvDropdown"},ce=e.defineComponent({...ie,props:ne,emits:["update:modelValue"],setup(n,{emit:r}){const t=n,u=C.nanoid(),{modifiers:o,disabled:c}=e.toRefs(t),{bemCssClasses:l}=R("vv-dropdown",{modifiers:o,disabled:c});function b(a){return Array.isArray(t.modelValue)?K(a,t.modelValue)||K(h(a),t.modelValue):$(a,t.modelValue)||$(h(a),t.modelValue)}function h(a){return typeof a=="string"?a:String(a[t.valueKey])}function g(a){return typeof a=="string"?a:a[t.labelKey]}function i(a){return typeof a=="string"||a.disabled===void 0?c.value:a.disabled}function s(a){var S,B;const y=a.target;let m=y.value;if(m=(t.useObject?(S=t.options)==null?void 0:S.find(_=>_[t.valueKey]==m):null)||m,t.multiple){if(typeof t.maxValues<"u"&&t.maxValues>=0&&Array.isArray(t.modelValue)&&((B=t.modelValue)==null?void 0:B.length)>=t.maxValues&&(Array.isArray(t.modelValue)&&!K(m,t.modelValue)||t.maxValues==0)){y.checked=!1;return}Array.isArray(t.modelValue)?m=K(m,t.modelValue)?ee(m,t.modelValue):[...t.modelValue,m]:m=[m]}r("update:modelValue",m)}return(a,y)=>{var m;return e.openBlock(),e.createElementBlock("ul",{class:e.normalizeClass(e.unref(l)),role:"listbox"},[(m=a.options)!=null&&m.length?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("li",oe,[e.createElementVNode("label",null,e.toDisplayString(a.labelNoResult),1)])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.options,(V,S)=>(e.openBlock(),e.createElementBlock("li",{key:S,role:"option","aria-selected":b(V)},[e.createElementVNode("label",{for:`dropdown-${S}-${e.unref(u)}`},[e.createElementVNode("input",{id:`dropdown-${S}-${e.unref(u)}`,type:a.multiple?"checkbox":"radio",value:h(V),checked:b(V),disabled:i(V),tabindex:"-1","aria-hidden":"true",onInput:s},null,40,ae),e.createTextVNode(" "+e.toDisplayString(g(V)),1)],8,se)],8,le))),128))],2)}}}),de="ds",ue={color:String,width:{type:[String,Number]},height:{type:[String,Number]},name:{type:String,required:!0},provider:{type:String},prefix:{type:String,default:"normal"},src:String,horizontalFlip:Boolean,verticalFlip:Boolean,flip:String,mode:String,inline:Boolean,rotate:[Number,String],onLoad:Function,svg:String,modifiers:{type:[String,Array]}},fe={name:"VvIcon"},W=e.defineComponent({...fe,props:ue,setup(n){const r=n,t=e.ref(!0),{modifiers:u}=e.toRefs(r),o=e.inject(de),{bemCssClasses:c}=R("vv-icon",{modifiers:u}),l=e.computed(()=>r.provider||(o==null?void 0:o.provider)),b=e.computed(()=>{const i=r.name||"",s=`@${l.value}:${r.prefix}:${r.name}`;return N.iconExists(i)?i:N.iconExists(s)?s:(o==null?void 0:o.iconsCollections.find(a=>{const y=`@${l.value}:${a.prefix}:${i}`;if(N.iconExists(y))return y}))||i});function h(i){let s=null;if(typeof window>"u"){const{JSDOM:V}=require("jsdom");s=new V().window}return(s?new s.DOMParser:new window.DOMParser).parseFromString(i,"text/html").querySelector("svg")}function g(i){const s=h(i),a=(s==null?void 0:s.innerHTML.trim())||"";s&&a&&N.addIcon(`@${l.value}:${r.prefix}:${r.name}`,{body:a,height:s.viewBox.baseVal.height,width:s.viewBox.baseVal.width})}return o&&(r.src&&!N.iconExists(`@${l.value}:${r.prefix}:${r.name}`)?(t.value=!1,o.fetchIcon(r.src).then(i=>{i&&(g(i),t.value=!0)}).catch(i=>{throw new Error(`During fetch icon: ${i==null?void 0:i.message}`)})):r.svg&&g(r.svg)),(i,s)=>t.value?(e.openBlock(),e.createBlock(e.unref(N.Icon),e.mergeProps({key:0,class:e.unref(c)},{...i.$props,provider:e.unref(l),icon:e.unref(b)}),null,16,["class"])):e.createCommentVNode("",!0)}}),pe={...Z,...J,...Q,...X,...I,...G,...M,id:[String,Number],name:{type:String,required:!0},modelValue:{type:[String,Number,Boolean,Object,Array],default:void 0},label:String,required:Boolean,placeholder:String,options:{type:Array,required:!0},useObject:Boolean,labelKey:{type:String,default:"label"},valueKey:{type:String,default:"value"},iconLeft:String,iconRight:String,modifiers:[String,Array],tabindex:{type:[String,Number],default:0}},me=["update:modelValue"],ye=["for"],ge={class:"vv-select__wrapper"},he=["id","disabled","required"],be={key:0,value:void 0,disabled:""},Ve=["disabled","value"],Se={name:"VvNativeSelect"},ke=e.defineComponent({...Se,props:pe,emits:me,setup(n,{emit:r}){const t=n,u=e.useSlots(),{HintSlot:o,hasHint:c,hasErrors:l}=U(t,u),{modifiers:b,disabled:h,readonly:g,loading:i,iconLeft:s,iconRight:a,error:y,valid:m}=e.toRefs(t),V=e.computed(()=>String(t.id||C.nanoid())),S=e.computed(()=>`${V.value}-hint`),B=e.computed(()=>!F(t.modelValue)),_=e.computed(()=>t.disabled||t.readonly),w=e.computed(()=>_.value?-1:t.tabindex),E=e.computed(()=>{if(t.error===!0)return!0;if(t.valid===!0)return!1}),{bemCssClasses:j}=R("vv-select",{modifiers:b,loading:i,readonly:g,iconLeft:s,iconRight:a,valid:m,invalid:y,dirty:B}),A=e.computed(()=>({name:t.name,tabindex:w.value,"aria-invalid":E.value,"aria-describedby":!l.value&&c.value?S.value:void 0,"aria-errormessage":l.value?S.value:void 0}));function H(p){return typeof p=="string"?p:p[t.valueKey]}function L(p){return typeof p=="string"?p:p[t.labelKey]}function v(p){return typeof p=="string"||p.disabled===void 0?h.value:p.disabled}const D=e.computed({get:()=>{var p;return typeof t.modelValue=="object"?(p=t.modelValue)==null?void 0:p[t.valueKey]:t.modelValue},set:p=>{var d;const f=t.useObject?(d=t.options)==null?void 0:d.find(k=>k[t.valueKey]===p):void 0;r("update:modelValue",f??p)}});return(p,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(j))},[p.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(V)},e.toDisplayString(p.label),9,ye)):e.createCommentVNode("",!0),e.createElementVNode("div",ge,[e.renderSlot(p.$slots,"icon-left",{},()=>[e.unref(s)?(e.openBlock(),e.createBlock(W,{key:0,name:e.unref(s)},null,8,["name"])):e.createCommentVNode("",!0)]),e.withDirectives(e.createElementVNode("select",e.mergeProps({id:e.unref(V),"onUpdate:modelValue":f[0]||(f[0]=d=>e.isRef(D)?D.value=d:null)},e.unref(A),{disabled:e.unref(_),required:p.required}),[p.placeholder?(e.openBlock(),e.createElementBlock("option",be,e.toDisplayString(p.placeholder),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.options,(d,k)=>(e.openBlock(),e.createElementBlock("option",{key:k,disabled:v(d),value:H(d)},e.toDisplayString(L(d)),9,Ve))),128))],16,he),[[e.vModelSelect,e.unref(D)]]),e.renderSlot(p.$slots,"icon-right",{},()=>[e.unref(a)?(e.openBlock(),e.createBlock(W,{key:0,name:e.unref(a)},null,8,["name"])):e.createCommentVNode("",!0)])]),e.createVNode(e.unref(o),{id:e.unref(S),class:"vv-select__hint"},null,8,["id"])],2))}}),Be={...Z,...J,...Q,...X,...I,...G,...M,modelValue:{type:[String,Number,Boolean,Object,Array],default:void 0},label:String,labelNoResult:{type:String,default:"No results"},placeholder:String,searchable:Boolean,searchPlaceholder:String,debounceSearch:{type:[Number,String],default:0},options:{type:Array,required:!0},useObject:Boolean,multiple:Boolean,maxValues:[Number,String],separator:{type:String,default:", "},labelKey:{type:String,default:"label"},valueKey:{type:String,default:"value"},iconLeft:String,iconRight:String,native:Boolean,tabindex:{type:[Number,String],default:0}},_e=["id"],Ae=["id","for"],Ce=["tabindex"],Ne=["id","placeholder"],$e={name:"VvSelect"};return e.defineComponent({...$e,props:Be,emits:["update:modelValue","change:search"],setup(n,{emit:r}){const t=n,u=e.useSlots(),{HintSlot:o}=U(t,u),c=e.ref(),l=e.ref();P.useFocus(l,{initialValue:!0});const b=C.nanoid(),h=e.ref(""),g=P.refDebounced(h,Number(t.debounceSearch)),i=e.ref(!1),{modifiers:s,disabled:a,readonly:y,loading:m,iconLeft:V,iconRight:S,valid:B,error:_}=e.toRefs(t);e.watch(g,()=>r("change:search",g.value));const w=e.computed(()=>!F(t.modelValue)),E=e.computed(()=>a.value||y.value?-1:t.tabindex),{bemCssClasses:j}=R("vv-select",{modifiers:s,disabled:a,loading:m,readonly:y,iconLeft:V,iconRight:S,valid:B,invalid:_,dirty:w}),A=e.computed(()=>{var f;return(f=t.options)==null?void 0:f.every(d=>typeof d=="object")}),H=e.computed(()=>t.searchable?L.value:t.options),L=e.computed(()=>{var f;return(f=t.options)==null?void 0:f.filter(d=>typeof d=="string"?d.toLowerCase().includes(g.value.toLowerCase().trim()):typeof d[t.labelKey]=="string"?d[t.labelKey].toLowerCase().includes(g.value.toLowerCase().trim()):!1)}),v=e.computed(()=>{var d,k;if(t.multiple&&Array.isArray(t.modelValue)&&((d=t.modelValue)!=null&&d.length))return A.value?re(t.options,t.modelValue,t.valueKey).map(O=>O[t.labelKey]).join(t.separator):t.modelValue.join(t.separator);const f=t.useObject?t.modelValue:(k=t.options)==null?void 0:k.find(O=>typeof O=="object"?O[t.valueKey]==t.modelValue:O==t.modelValue);return typeof f=="object"?f==null?void 0:f[t.labelKey]:f});P.onClickOutside(c,()=>{c.value.open=!1});function D(f){const d=f.target;i.value=d.open}function p(f){c.value&&!t.multiple&&(c.value.open=!1),r("update:modelValue",f)}return(f,d)=>f.native?(e.openBlock(),e.createBlock(ke,e.mergeProps({key:1},t,{"onUpdate:modelValue":d[4]||(d[4]=k=>r("update:modelValue",k))}),null,16)):(e.openBlock(),e.createElementBlock("div",{key:0,id:e.unref(b),class:e.normalizeClass(e.unref(j))},[f.label?(e.openBlock(),e.createElementBlock("label",{key:0,id:`${e.unref(b)}-label`,for:f.searchable&&i.value?`${e.unref(b)}-input`:void 0},e.toDisplayString(f.label),9,Ae)):e.createCommentVNode("",!0),e.createElementVNode("details",{ref_key:"dropdown",ref:c,class:"vv-select__wrapper",onClick:d[2]||(d[2]=k=>e.unref(a)||e.unref(y)?k.preventDefault():null),onKeyup:d[3]||(d[3]=e.withKeys(k=>c.value.open=!1,["esc"])),onToggle:D},[e.createElementVNode("summary",{class:"vv-select__input",tabindex:e.unref(E),onKeyup:d[1]||(d[1]=e.withKeys(k=>f.searchable?k.preventDefault():null,["space"]))},[f.searchable&&i.value?e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:0,id:`${e.unref(b)}-input`,ref_key:"inputSearch",ref:l,"onUpdate:modelValue":d[0]||(d[0]=k=>h.value=k),role:"combobox",placeholder:f.searchPlaceholder},null,8,Ne)),[[e.vModelText,h.value]]):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(e.unref(v)||f.placeholder),1)],64))],40,Ce),e.createVNode(ce,e.mergeProps({id:`${e.unref(b)}-dropdown`},{...t,options:e.unref(H)},{"onUpdate:modelValue":p}),null,16,["id"])],544),e.createVNode(e.unref(o),{class:"vv-select__hint"})],10,_e))}})});

package/dist/components/VvSelect/VvSelect.vue.d.ts

@@ -1,231 +1,9 @@
-import type { Option } from '../VvDropdown/VvDropdown';
-declare const _default: {
-    new (...args: any[]): {
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            disabled: boolean;
-            readonly: boolean;
-            loading: boolean;
-            error: boolean;
-            valid: boolean;
-            hintLabel: string;
-            labelNoResult: string;
-            useObject: boolean;
-            multiple: boolean;
-            labelKey: string;
-            valueKey: string;
-            searchable: boolean;
-            debounceSearch: string | number;
-            separator: string;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            modelValue: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
-            label: StringConstructor;
-            labelNoResult: {
-                type: StringConstructor;
-                default: string;
-            };
-            placeholder: StringConstructor;
-            searchable: BooleanConstructor;
-            searchPlaceholder: StringConstructor;
-            debounceSearch: {
-                type: (StringConstructor | NumberConstructor)[];
-                default: number;
-            };
-            options: {
-                type: import("vue").PropType<(string | Option)[]>;
-                required: boolean;
-            };
-            useObject: BooleanConstructor;
-            multiple: BooleanConstructor;
-            maxValues: (StringConstructor | NumberConstructor)[];
-            separator: {
-                type: StringConstructor;
-                default: string;
-            };
-            labelKey: {
-                type: StringConstructor;
-                default: string;
-            };
-            valueKey: {
-                type: StringConstructor;
-                default: string;
-            };
-            iconLeft: StringConstructor;
-            iconRight: StringConstructor;
-            modifiers: (StringConstructor | ArrayConstructor)[];
-            readonly: BooleanConstructor;
-            disabled: BooleanConstructor;
-            loading: BooleanConstructor;
-            loadingLabel: StringConstructor;
-            hintLabel: {
-                type: StringConstructor;
-                default: string;
-            };
-            error: BooleanConstructor;
-            errorLabel: (StringConstructor | ArrayConstructor)[];
-            valid: BooleanConstructor;
-            validLabel: (StringConstructor | ArrayConstructor)[];
-        }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-            "onChange:search"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "readonly" | "loading" | "error" | "valid" | "hintLabel" | "labelNoResult" | "useObject" | "multiple" | "labelKey" | "valueKey" | "searchable" | "debounceSearch" | "separator">;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot | undefined;
-        }>;
-        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $emit: (event: "update:modelValue" | "change:search", ...args: any[]) => void;
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            modelValue: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
-            label: StringConstructor;
-            labelNoResult: {
-                type: StringConstructor;
-                default: string;
-            };
-            placeholder: StringConstructor;
-            searchable: BooleanConstructor;
-            searchPlaceholder: StringConstructor;
-            debounceSearch: {
-                type: (StringConstructor | NumberConstructor)[];
-                default: number;
-            };
-            options: {
-                type: import("vue").PropType<(string | Option)[]>;
-                required: boolean;
-            };
-            useObject: BooleanConstructor;
-            multiple: BooleanConstructor;
-            maxValues: (StringConstructor | NumberConstructor)[];
-            separator: {
-                type: StringConstructor;
-                default: string;
-            };
-            labelKey: {
-                type: StringConstructor;
-                default: string;
-            };
-            valueKey: {
-                type: StringConstructor;
-                default: string;
-            };
-            iconLeft: StringConstructor;
-            iconRight: StringConstructor;
-            modifiers: (StringConstructor | ArrayConstructor)[];
-            readonly: BooleanConstructor;
-            disabled: BooleanConstructor;
-            loading: BooleanConstructor;
-            loadingLabel: StringConstructor;
-            hintLabel: {
-                type: StringConstructor;
-                default: string;
-            };
-            error: BooleanConstructor;
-            errorLabel: (StringConstructor | ArrayConstructor)[];
-            valid: BooleanConstructor;
-            validLabel: (StringConstructor | ArrayConstructor)[];
-        }>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-            "onChange:search"?: ((...args: any[]) => any) | undefined;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change:search")[], string, {
-            disabled: boolean;
-            readonly: boolean;
-            loading: boolean;
-            error: boolean;
-            valid: boolean;
-            hintLabel: string;
-            labelNoResult: string;
-            useObject: boolean;
-            multiple: boolean;
-            labelKey: string;
-            valueKey: string;
-            searchable: boolean;
-            debounceSearch: string | number;
-            separator: string;
-        }, {}, string> & {
-            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-            created?: ((() => void) | (() => void)[]) | undefined;
-            beforeMount?: ((() => void) | (() => void)[]) | undefined;
-            mounted?: ((() => void) | (() => void)[]) | undefined;
-            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-            updated?: ((() => void) | (() => void)[]) | undefined;
-            activated?: ((() => void) | (() => void)[]) | undefined;
-            deactivated?: ((() => void) | (() => void)[]) | undefined;
-            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-            destroyed?: ((() => void) | (() => void)[]) | undefined;
-            unmounted?: ((() => void) | (() => void)[]) | undefined;
-            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<{
-        modelValue: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
-        label: StringConstructor;
-        labelNoResult: {
-            type: StringConstructor;
-            default: string;
-        };
-        placeholder: StringConstructor;
-        searchable: BooleanConstructor;
-        searchPlaceholder: StringConstructor;
-        debounceSearch: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: number;
-        };
-        options: {
-            type: import("vue").PropType<(string | Option)[]>;
-            required: boolean;
-        };
-        useObject: BooleanConstructor;
-        multiple: BooleanConstructor;
-        maxValues: (StringConstructor | NumberConstructor)[];
-        separator: {
-            type: StringConstructor;
-            default: string;
-        };
-        labelKey: {
-            type: StringConstructor;
-            default: string;
-        };
-        valueKey: {
-            type: StringConstructor;
-            default: string;
-        };
-        iconLeft: StringConstructor;
-        iconRight: StringConstructor;
-        modifiers: (StringConstructor | ArrayConstructor)[];
-        readonly: BooleanConstructor;
-        disabled: BooleanConstructor;
-        loading: BooleanConstructor;
-        loadingLabel: StringConstructor;
-        hintLabel: {
-            type: StringConstructor;
-            default: string;
-        };
-        error: BooleanConstructor;
-        errorLabel: (StringConstructor | ArrayConstructor)[];
-        valid: BooleanConstructor;
-        validLabel: (StringConstructor | ArrayConstructor)[];
-    }>> & {
-        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        "onChange:search"?: ((...args: any[]) => any) | undefined;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
-    __isFragment?: undefined;
-    __isTeleport?: undefined;
-    __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    modelValue: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+import type { Option } from '@/components/VvDropdown';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: (ArrayConstructor | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     label: StringConstructor;
     labelNoResult: {
         type: StringConstructor;
@@ -259,7 +37,12 @@ declare const _default: {
     };
     iconLeft: StringConstructor;
     iconRight: StringConstructor;
-    modifiers: (StringConstructor | ArrayConstructor)[];
+    native: BooleanConstructor;
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    modifiers: import("vue").PropType<string | string[]>;
     readonly: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
@@ -269,19 +52,77 @@ declare const _default: {
         default: string;
     };
     error: BooleanConstructor;
-    errorLabel: (StringConstructor | ArrayConstructor)[];
+    errorLabel: (ArrayConstructor | StringConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (StringConstructor | ArrayConstructor)[];
+    validLabel: (ArrayConstructor | StringConstructor)[];
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change:search")[], "update:modelValue" | "change:search", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (ArrayConstructor | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    label: StringConstructor;
+    labelNoResult: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: StringConstructor;
+    searchable: BooleanConstructor;
+    searchPlaceholder: StringConstructor;
+    debounceSearch: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    options: {
+        type: import("vue").PropType<(string | Option)[]>;
+        required: boolean;
+    };
+    useObject: BooleanConstructor;
+    multiple: BooleanConstructor;
+    maxValues: (StringConstructor | NumberConstructor)[];
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    iconLeft: StringConstructor;
+    iconRight: StringConstructor;
+    native: BooleanConstructor;
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    modifiers: import("vue").PropType<string | string[]>;
+    readonly: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    hintLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    error: BooleanConstructor;
+    errorLabel: (ArrayConstructor | StringConstructor)[];
+    valid: BooleanConstructor;
+    validLabel: (ArrayConstructor | StringConstructor)[];
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onChange:search"?: ((...args: any[]) => any) | undefined;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change:search")[], "update:modelValue" | "change:search", {
+}, {
+    modelValue: string | number | boolean | unknown[] | Record<string, any>;
     disabled: boolean;
-    readonly: boolean;
-    loading: boolean;
     error: boolean;
-    valid: boolean;
+    loading: boolean;
+    readonly: boolean;
+    tabindex: string | number;
     hintLabel: string;
+    valid: boolean;
     labelNoResult: string;
     useObject: boolean;
     multiple: boolean;
@@ -290,5 +131,6 @@ declare const _default: {
     searchable: boolean;
     debounceSearch: string | number;
     separator: string;
-}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+    native: boolean;
+}>;
 export default _default;

package/dist/components/VvSelect/{VvSelect.d.ts → index.d.ts}

@@ -1,10 +1,13 @@
 import type { PropType } from 'vue';
-import type { Option } from '../VvDropdown/VvDropdown';
+import type { Option } from '@/components/VvDropdown';
 export declare const VvSelectProps: {
     /**
-     * modelValue can be an Object, a String or an Array of Object/String
+     * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
      */
-    modelValue: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+    modelValue: {
+        type: (ArrayConstructor | ObjectConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     /**
      * Select input label
      */
@@ -83,7 +86,15 @@ export declare const VvSelectProps: {
      * Icon name of icon in right position
      */
     iconRight: StringConstructor;
-    modifiers: (StringConstructor | ArrayConstructor)[];
+    /**
+     * Icon name of icon in right position
+     */
+    native: BooleanConstructor;
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    modifiers: PropType<string | string[]>;
     readonly: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
@@ -93,7 +104,7 @@ export declare const VvSelectProps: {
         default: string;
     };
     error: BooleanConstructor;
-    errorLabel: (StringConstructor | ArrayConstructor)[];
+    errorLabel: (ArrayConstructor | StringConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (StringConstructor | ArrayConstructor)[];
+    validLabel: (ArrayConstructor | StringConstructor)[];
 };