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

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

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

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

@@ -18,6 +18,7 @@ declare const _default: {
             searchable: boolean;
             debounceSearch: string | number;
             separator: string;
+            native: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
             label: StringConstructor;
@@ -53,7 +54,8 @@ declare const _default: {
             };
             iconLeft: StringConstructor;
             iconRight: StringConstructor;
-            modifiers: (StringConstructor | ArrayConstructor)[];
+            native: BooleanConstructor;
+            modifiers: import("vue").PropType<string | string[]>;
             readonly: BooleanConstructor;
             disabled: BooleanConstructor;
             loading: BooleanConstructor;
@@ -69,7 +71,7 @@ declare const _default: {
         }>> & {
             "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">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "readonly" | "loading" | "error" | "valid" | "hintLabel" | "labelNoResult" | "useObject" | "multiple" | "labelKey" | "valueKey" | "searchable" | "debounceSearch" | "separator" | "native">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -118,7 +120,8 @@ declare const _default: {
             };
             iconLeft: StringConstructor;
             iconRight: StringConstructor;
-            modifiers: (StringConstructor | ArrayConstructor)[];
+            native: BooleanConstructor;
+            modifiers: import("vue").PropType<string | string[]>;
             readonly: BooleanConstructor;
             disabled: BooleanConstructor;
             loading: BooleanConstructor;
@@ -149,6 +152,7 @@ declare const _default: {
             searchable: boolean;
             debounceSearch: string | number;
             separator: string;
+            native: boolean;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -204,7 +208,8 @@ declare const _default: {
         };
         iconLeft: StringConstructor;
         iconRight: StringConstructor;
-        modifiers: (StringConstructor | ArrayConstructor)[];
+        native: BooleanConstructor;
+        modifiers: import("vue").PropType<string | string[]>;
         readonly: BooleanConstructor;
         disabled: BooleanConstructor;
         loading: BooleanConstructor;
@@ -259,7 +264,8 @@ declare const _default: {
     };
     iconLeft: StringConstructor;
     iconRight: StringConstructor;
-    modifiers: (StringConstructor | ArrayConstructor)[];
+    native: BooleanConstructor;
+    modifiers: import("vue").PropType<string | string[]>;
     readonly: BooleanConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
@@ -290,5 +296,6 @@ declare const _default: {
     searchable: boolean;
     debounceSearch: string | number;
     separator: string;
+    native: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;

package/dist/components/VvTextarea/VvTextarea.d.ts

@@ -71,7 +71,7 @@ export declare const VvTextareaProps: {
         default: boolean;
         validator: (value: string) => boolean;
     };
-    modifiers: (StringConstructor | ArrayConstructor)[];
+    modifiers: import("vue").PropType<string | string[]>;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
     hintLabel: {

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

@@ -70,7 +70,7 @@ declare const _default: {
                 default: boolean;
                 validator: (value: string) => boolean;
             };
-            modifiers: (StringConstructor | ArrayConstructor)[];
+            modifiers: import("vue").PropType<string | string[]>;
             loading: BooleanConstructor;
             loadingLabel: StringConstructor;
             hintLabel: {
@@ -146,7 +146,7 @@ declare const _default: {
                 default: boolean;
                 validator: (value: string) => boolean;
             };
-            modifiers: (StringConstructor | ArrayConstructor)[];
+            modifiers: import("vue").PropType<string | string[]>;
             loading: BooleanConstructor;
             loadingLabel: StringConstructor;
             hintLabel: {
@@ -247,7 +247,7 @@ declare const _default: {
             default: boolean;
             validator: (value: string) => boolean;
         };
-        modifiers: (StringConstructor | ArrayConstructor)[];
+        modifiers: import("vue").PropType<string | string[]>;
         loading: BooleanConstructor;
         loadingLabel: StringConstructor;
         hintLabel: {
@@ -313,7 +313,7 @@ declare const _default: {
         default: boolean;
         validator: (value: string) => boolean;
     };
-    modifiers: (StringConstructor | ArrayConstructor)[];
+    modifiers: import("vue").PropType<string | string[]>;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
     hintLabel: {