@volverjs/ui-vue 0.0.1-beta.5 → 0.0.1-beta.8

package/dist/components/VvSelect/vv-select.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,O){"use strict";const y={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),a=Array.isArray(n);let l,s,d;if(e&&a){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!=a)return!1;const i=r instanceof Date,h=n instanceof Date;if(i!=h)return!1;if(i&&h)return r.getTime()==n.getTime();const m=r instanceof RegExp,V=n instanceof RegExp;if(m!=V)return!1;if(m&&V)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(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 e=n.split(".");let a=r;for(let l=0,s=e.length;l<s;++l){if(r==null)return null;a=a[e[l]]}return a}}else return null},isFunction(r){return!!(r&&r.constructor&&r.call&&r.apply)},findIndexInList(r,n){let e=-1;if(n){for(let a=0;a<n.length;a++)if(this.equals(n[a],r)){e=a;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((a,l)=>l!==e):n},isString(r){return typeof r=="string"||r instanceof String},propsToObject(r){return Object.keys(r).reduce((n,e)=>{var a,l,s,d,i;return this.isFunction(r[e])?n[e]=r[e]():Array.isArray(r[e])?n[e]=r[e][0]():(a=r[e])!=null&&a.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]=((d=r[e])==null?void 0:d.default)||((i=r[e])==null?void 0:i.type())),n},{})},filterArray(r,n,e){return r.filter(a=>n.some(l=>typeof l=="string"?a[e]==l:this.equals(a[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()}},_={valid:Boolean,validLabel:[String,Array]},K={error:Boolean,errorLabel:[String,Array]},q={loading:Boolean,loadingLabel:String},N={disabled:Boolean},P={readonly:Boolean},w={modifiers:[String,Array]},$={..._,...K,...{hintLabel:{type:String,default:""}},...q,...N,...P,...w,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 x(r){return Array.isArray(r)?r.filter(n=>y.isString(n)).reduce((n,e)=>n.length>0?n+`
-`+e:e,""):r}function F(r,n){return{name:"HintSlot",setup(){const e=t.toRefs(r),{error:a,valid:l,hint:s,loading:d}=n,{hintLabel:i,modelValue:h,valid:m,validLabel:V,error:o,errorLabel:c}=e,u=y.resolveFieldData(e,"loading"),g=y.resolveFieldData(e,"loadingLabel"),b=t.computed(()=>o.value?!!(o.value&&a||(c==null?void 0:c.value)&&Array.isArray(c.value)&&c.value.length>0||(c==null?void 0:c.value)&&y.isNotEmpty(c.value)):!1),A=t.computed(()=>!!(i&&i.value||s||l||V&&V.value||b.value||(u==null?void 0:u.value)&&d||(u==null?void 0:u.value)&&(g==null?void 0:g.value))),B=t.computed(()=>Array.isArray(c==null?void 0:c.value)?x((c==null?void 0:c.value)||""):c==null?void 0:c.value),j=t.computed(()=>{const C={modelValue:h,error:o,valid:m};return o!=null&&o.value?(a==null?void 0:a(C))||(B==null?void 0:B.value)||(i==null?void 0:i.value):m!=null&&m.value?(l==null?void 0:l(C))||(V==null?void 0:V.value)||(i==null?void 0:i.value):u!=null&&u.value?(d==null?void 0:d(C))||(g==null?void 0:g.value)||(i==null?void 0:i.value):(s==null?void 0:s(C))||(i==null?void 0:i.value)||(i==null?void 0:i.value)});return{hasHint:A,hintContent:j}},render(){if(this.hasHint)return t.h("span",null,this.hintContent)}}}function D(r,n){const e={[`${r}`]:!0};return{bemCssClasses:t.computed(()=>Object.keys(n).reduce((l,s)=>{const d=t.unref(n[s])||!1;if(!d)return l;if(s==="modifiers"){const i=Array.isArray(d)?d:[d];return{...l,...i.reduce((h,m)=>({...h,[`${r}--${y.kebabCase(m)}`]:!0}),{})}}else return{...l,[`${r}--${y.kebabCase(s)}`]:d}},e)||{})}}const R={...N,...w,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,a=O.v4(),{modifiers:l,disabled:s}=t.toRefs(e),{bemCssClasses:d}=D("vv-dropdown",{modifiers:l,disabled:s});function i(o){return Array.isArray(e.modelValue)?y.contains(o,e.modelValue)||y.contains(h(o),e.modelValue):y.equals(o,e.modelValue)||y.equals(h(o),e.modelValue)}function h(o){return typeof o=="string"?o:String(o[e.valueKey])}function m(o){return typeof o=="string"?o:o[e.labelKey]}function V(o){var b,A;const c=o.target;let u=c.value;if(u=(e.useObject?(b=e.options)==null?void 0:b.find(B=>B[e.valueKey]==u):null)||u,e.multiple){if(typeof e.maxValues<"u"&&e.maxValues>=0&&((A=e.modelValue)==null?void 0:A.length)>=e.maxValues&&(Array.isArray(e.modelValue)&&!y.contains(u,e.modelValue)||e.maxValues==0)){c.checked=!1;return}Array.isArray(e.modelValue)?u=y.contains(u,e.modelValue)?y.removeFromList(u,e.modelValue):[...e.modelValue,u]:u=[u]}n("update:modelValue",u)}return(o,c)=>{var u;return t.openBlock(),t.createElementBlock("ul",{class:t.normalizeClass(t.unref(d)),role:"listbox"},[(u=o.options)!=null&&u.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,(g,b)=>{var A;return t.openBlock(),t.createElementBlock("li",{key:b},[t.createElementVNode("label",{for:`dropdown-${b}-${t.unref(a)}`},[t.createElementVNode("input",{id:`dropdown-${b}-${t.unref(a)}`,type:o.multiple?"checkbox":"radio",value:h(g),checked:i(g),disabled:typeof g=="object"&&(A=g.disabled)!=null?A:t.unref(s),onInput:V},null,40,I),t.createTextVNode(" "+t.toDisplayString(m(g)),1)],8,H)])}),128))],2)}}}),Z=["id"],M={key:0,for:"select"},U=["placeholder"];return t.defineComponent({__name:"VvSelect",props:$,emits:["update:modelValue","change:search"],setup(r,{emit:n}){const e=r,a=t.useSlots(),l=F(e,a),s=t.ref(),d=t.ref();k.useFocus(d,{initialValue:!0});const i=O.v4(),h=t.ref(""),m=k.refDebounced(h,Number(e.debounceSearch)),V=t.ref(!1),{modifiers:o,disabled:c,readonly:u,loading:g,iconLeft:b,iconRight:A,valid:B,error:j}=t.toRefs(e);t.watch(m,()=>n("change:search",m.value));const{bemCssClasses:C}=D("vv-select",{modifiers:o,disabled:c,loading:g,readonly:u,iconLeft:b,iconRight:A,valid:B,invalid:j,dirty:t.computed(()=>y.isNotEmpty(e.modelValue))}),G=t.computed(()=>{var f;return(f=e.options)==null?void 0:f.every(p=>typeof p=="object")}),J=t.computed(()=>e.searchable?Q.value:e.options),Q=t.computed(()=>{var f;return(f=e.options)==null?void 0:f.filter(p=>typeof p=="string"?p.toLowerCase().includes(m.value.toLowerCase().trim()):p[e.labelKey].toLowerCase().includes(m.value.toLowerCase().trim()))}),W=t.computed(()=>{var p,S;if(e.multiple&&((p=e.modelValue)==null?void 0:p.length)&&Array.isArray(e.modelValue))return G.value?y.filterArray(e.options,e.modelValue,e.valueKey).map(E=>E[e.labelKey]).join(e.separator):e.modelValue.join(e.separator);const f=e.useObject?e.modelValue:(S=e.options)==null?void 0:S.find(E=>typeof E=="object"?E[e.valueKey]==e.modelValue:E==e.modelValue);return typeof f=="object"?f==null?void 0:f[e.labelKey]:f});k.onClickOutside(s,()=>{s.value.open=!1});function X(f){const p=f.target;V.value=p.open}function Y(f){s.value&&!e.multiple&&(s.value.open=!1),n("update:modelValue",f)}return(f,p)=>(t.openBlock(),t.createElementBlock("div",{id:t.unref(i),class:t.normalizeClass(t.unref(C))},[f.label?(t.openBlock(),t.createElementBlock("label",M,t.toDisplayString(f.label),1)):t.createCommentVNode("",!0),t.createElementVNode("details",{ref_key:"dropdown",ref:s,role:"list",class:"vv-select__wrapper",onClick:p[2]||(p[2]=S=>t.unref(c)||t.unref(u)?S.preventDefault():null),onKeyup:p[3]||(p[3]=t.withKeys(S=>s.value.open=!1,["esc"])),onToggle:X},[t.createElementVNode("summary",{class:"vv-select__input","aria-haspopup":"listbox",onKeyup:p[1]||(p[1]=t.withKeys(S=>f.searchable?S.preventDefault():null,["space"]))},[f.searchable&&V.value?t.withDirectives((t.openBlock(),t.createElementBlock("input",{key:0,ref_key:"inputSearch",ref:d,"onUpdate:modelValue":p[0]||(p[0]=S=>h.value=S),placeholder:f.searchPlaceholder},null,8,U)),[[t.vModelText,h.value]]):(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[t.createTextVNode(t.toDisplayString(t.unref(W)||f.placeholder),1)],64))],32),t.createVNode(z,t.mergeProps({...e,options:t.unref(J)},{"onUpdate:modelValue":Y}),null,16)],544),t.createVNode(t.unref(l),{class:"vv-select__hint"})],10,Z))}})});
+(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))}})});

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

@@ -1,20 +1,15 @@
+import type { ExtractPropTypes } from 'vue';
 export declare const VvTextareaEvents: string[];
 export declare const VvTextareaProps: {
     modelValue: null;
-    id: StringConstructor;
-    name: {
-        type: StringConstructor;
-        required: boolean;
+    cols: {
+        type: NumberConstructor;
+        default: number;
     };
-    autocomplete: {
-        type: StringConstructor;
-        default: string;
+    rows: {
+        type: NumberConstructor;
+        default: number;
     };
-    autofocus: BooleanConstructor;
-    minlength: NumberConstructor;
-    maxlength: NumberConstructor;
-    label: StringConstructor;
-    placeholder: StringConstructor;
     /**
      * Nome dell'icona
      * @see DsIcon
@@ -35,15 +30,6 @@ export declare const VvTextareaProps: {
      * True = label flottante
      */
     floating: BooleanConstructor;
-    debounce: NumberConstructor;
-    cols: {
-        type: NumberConstructor;
-        default: number;
-    };
-    rows: {
-        type: NumberConstructor;
-        default: number;
-    };
     /**
      * Specifica come il testo sarà wrappato
      * @see Documentation https://www.w3schools.com/tags/att_textarea_wrap.asp
@@ -52,8 +38,40 @@ export declare const VvTextareaProps: {
         type: StringConstructor;
         default: string;
     };
-    readonly: BooleanConstructor;
+    /**
+     * Se true, attiva la possibilità di cancellare il testo nella textarea
+     */
+    autoclear: BooleanConstructor;
+    /**
+     * Se true, la textbox può essere ridimensionata verticalmente.
+     * @description
+     * Il resize è pilotato via css. Al momento è attivo solamente il resize verticale
+     */
+    resizable: BooleanConstructor;
+    debounce: NumberConstructor;
+    id: StringConstructor;
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    autofocus: BooleanConstructor;
+    minlength: NumberConstructor;
+    maxlength: NumberConstructor;
+    label: StringConstructor;
+    placeholder: StringConstructor;
+    required: BooleanConstructor;
     disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    limit: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+        validator: (value: string) => boolean;
+    };
+    modifiers: (StringConstructor | ArrayConstructor)[];
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
     hintLabel: {
@@ -65,3 +83,6 @@ export declare const VvTextareaProps: {
     valid: BooleanConstructor;
     validLabel: (StringConstructor | ArrayConstructor)[];
 };
+declare type VvTextareaPropsType = typeof VvTextareaProps;
+export declare type VvTextareaPropsTypes = ExtractPropTypes<VvTextareaPropsType>;
+export {};

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

@@ -3,6 +3,7 @@ declare const _default: {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            required: boolean;
             disabled: boolean;
             readonly: boolean;
             icon: string;
@@ -14,25 +15,22 @@ declare const _default: {
             autocomplete: string;
             autofocus: boolean;
             floating: boolean;
+            autoclear: boolean;
+            limit: string | boolean;
             cols: number;
             rows: number;
             wrap: string;
+            resizable: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             modelValue: null;
-            id: StringConstructor;
-            name: {
-                type: StringConstructor;
-                required: boolean;
+            cols: {
+                type: NumberConstructor;
+                default: number;
             };
-            autocomplete: {
-                type: StringConstructor;
-                default: string;
+            rows: {
+                type: NumberConstructor;
+                default: number;
             };
-            autofocus: BooleanConstructor;
-            minlength: NumberConstructor;
-            maxlength: NumberConstructor;
-            label: StringConstructor;
-            placeholder: StringConstructor;
             icon: {
                 type: StringConstructor;
                 default: string;
@@ -43,21 +41,36 @@ declare const _default: {
                 default: string;
             };
             floating: BooleanConstructor;
-            debounce: NumberConstructor;
-            cols: {
-                type: NumberConstructor;
-                default: number;
+            wrap: {
+                type: StringConstructor;
+                default: string;
             };
-            rows: {
-                type: NumberConstructor;
-                default: number;
+            autoclear: BooleanConstructor;
+            resizable: BooleanConstructor;
+            debounce: NumberConstructor;
+            id: StringConstructor;
+            name: {
+                type: StringConstructor;
+                required: boolean;
             };
-            wrap: {
+            autocomplete: {
                 type: StringConstructor;
                 default: string;
             };
-            readonly: BooleanConstructor;
+            autofocus: BooleanConstructor;
+            minlength: NumberConstructor;
+            maxlength: NumberConstructor;
+            label: StringConstructor;
+            placeholder: StringConstructor;
+            required: BooleanConstructor;
             disabled: BooleanConstructor;
+            readonly: BooleanConstructor;
+            limit: {
+                type: (StringConstructor | BooleanConstructor)[];
+                default: boolean;
+                validator: (value: string) => boolean;
+            };
+            modifiers: (StringConstructor | ArrayConstructor)[];
             loading: BooleanConstructor;
             loadingLabel: StringConstructor;
             hintLabel: {
@@ -70,7 +83,7 @@ declare const _default: {
             validLabel: (StringConstructor | ArrayConstructor)[];
         }>> & {
             [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "readonly" | "icon" | "iconPosition" | "loading" | "error" | "valid" | "hintLabel" | "autocomplete" | "autofocus" | "floating" | "cols" | "rows" | "wrap">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "disabled" | "readonly" | "icon" | "iconPosition" | "loading" | "error" | "valid" | "hintLabel" | "autocomplete" | "autofocus" | "floating" | "autoclear" | "limit" | "cols" | "rows" | "wrap" | "resizable">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -86,20 +99,14 @@ declare const _default: {
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             modelValue: null;
-            id: StringConstructor;
-            name: {
-                type: StringConstructor;
-                required: boolean;
+            cols: {
+                type: NumberConstructor;
+                default: number;
             };
-            autocomplete: {
-                type: StringConstructor;
-                default: string;
+            rows: {
+                type: NumberConstructor;
+                default: number;
             };
-            autofocus: BooleanConstructor;
-            minlength: NumberConstructor;
-            maxlength: NumberConstructor;
-            label: StringConstructor;
-            placeholder: StringConstructor;
             icon: {
                 type: StringConstructor;
                 default: string;
@@ -110,21 +117,36 @@ declare const _default: {
                 default: string;
             };
             floating: BooleanConstructor;
-            debounce: NumberConstructor;
-            cols: {
-                type: NumberConstructor;
-                default: number;
+            wrap: {
+                type: StringConstructor;
+                default: string;
             };
-            rows: {
-                type: NumberConstructor;
-                default: number;
+            autoclear: BooleanConstructor;
+            resizable: BooleanConstructor;
+            debounce: NumberConstructor;
+            id: StringConstructor;
+            name: {
+                type: StringConstructor;
+                required: boolean;
             };
-            wrap: {
+            autocomplete: {
                 type: StringConstructor;
                 default: string;
             };
-            readonly: BooleanConstructor;
+            autofocus: BooleanConstructor;
+            minlength: NumberConstructor;
+            maxlength: NumberConstructor;
+            label: StringConstructor;
+            placeholder: StringConstructor;
+            required: BooleanConstructor;
             disabled: BooleanConstructor;
+            readonly: BooleanConstructor;
+            limit: {
+                type: (StringConstructor | BooleanConstructor)[];
+                default: boolean;
+                validator: (value: string) => boolean;
+            };
+            modifiers: (StringConstructor | ArrayConstructor)[];
             loading: BooleanConstructor;
             loadingLabel: StringConstructor;
             hintLabel: {
@@ -138,6 +160,7 @@ declare const _default: {
         }>> & {
             [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, {
+            required: boolean;
             disabled: boolean;
             readonly: boolean;
             icon: string;
@@ -149,9 +172,12 @@ declare const _default: {
             autocomplete: string;
             autofocus: boolean;
             floating: boolean;
+            autoclear: boolean;
+            limit: string | boolean;
             cols: number;
             rows: number;
             wrap: string;
+            resizable: boolean;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -174,20 +200,14 @@ declare const _default: {
         $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: null;
-        id: StringConstructor;
-        name: {
-            type: StringConstructor;
-            required: boolean;
+        cols: {
+            type: NumberConstructor;
+            default: number;
         };
-        autocomplete: {
-            type: StringConstructor;
-            default: string;
+        rows: {
+            type: NumberConstructor;
+            default: number;
         };
-        autofocus: BooleanConstructor;
-        minlength: NumberConstructor;
-        maxlength: NumberConstructor;
-        label: StringConstructor;
-        placeholder: StringConstructor;
         icon: {
             type: StringConstructor;
             default: string;
@@ -198,21 +218,36 @@ declare const _default: {
             default: string;
         };
         floating: BooleanConstructor;
-        debounce: NumberConstructor;
-        cols: {
-            type: NumberConstructor;
-            default: number;
+        wrap: {
+            type: StringConstructor;
+            default: string;
         };
-        rows: {
-            type: NumberConstructor;
-            default: number;
+        autoclear: BooleanConstructor;
+        resizable: BooleanConstructor;
+        debounce: NumberConstructor;
+        id: StringConstructor;
+        name: {
+            type: StringConstructor;
+            required: boolean;
         };
-        wrap: {
+        autocomplete: {
             type: StringConstructor;
             default: string;
         };
-        readonly: BooleanConstructor;
+        autofocus: BooleanConstructor;
+        minlength: NumberConstructor;
+        maxlength: NumberConstructor;
+        label: StringConstructor;
+        placeholder: StringConstructor;
+        required: BooleanConstructor;
         disabled: BooleanConstructor;
+        readonly: BooleanConstructor;
+        limit: {
+            type: (StringConstructor | BooleanConstructor)[];
+            default: boolean;
+            validator: (value: string) => boolean;
+        };
+        modifiers: (StringConstructor | ArrayConstructor)[];
         loading: BooleanConstructor;
         loadingLabel: StringConstructor;
         hintLabel: {
@@ -231,20 +266,14 @@ declare const _default: {
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
     modelValue: null;
-    id: StringConstructor;
-    name: {
-        type: StringConstructor;
-        required: boolean;
+    cols: {
+        type: NumberConstructor;
+        default: number;
     };
-    autocomplete: {
-        type: StringConstructor;
-        default: string;
+    rows: {
+        type: NumberConstructor;
+        default: number;
     };
-    autofocus: BooleanConstructor;
-    minlength: NumberConstructor;
-    maxlength: NumberConstructor;
-    label: StringConstructor;
-    placeholder: StringConstructor;
     icon: {
         type: StringConstructor;
         default: string;
@@ -255,21 +284,36 @@ declare const _default: {
         default: string;
     };
     floating: BooleanConstructor;
-    debounce: NumberConstructor;
-    cols: {
-        type: NumberConstructor;
-        default: number;
+    wrap: {
+        type: StringConstructor;
+        default: string;
     };
-    rows: {
-        type: NumberConstructor;
-        default: number;
+    autoclear: BooleanConstructor;
+    resizable: BooleanConstructor;
+    debounce: NumberConstructor;
+    id: StringConstructor;
+    name: {
+        type: StringConstructor;
+        required: boolean;
     };
-    wrap: {
+    autocomplete: {
         type: StringConstructor;
         default: string;
     };
-    readonly: BooleanConstructor;
+    autofocus: BooleanConstructor;
+    minlength: NumberConstructor;
+    maxlength: NumberConstructor;
+    label: StringConstructor;
+    placeholder: StringConstructor;
+    required: BooleanConstructor;
     disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    limit: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+        validator: (value: string) => boolean;
+    };
+    modifiers: (StringConstructor | ArrayConstructor)[];
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
     hintLabel: {
@@ -283,6 +327,7 @@ declare const _default: {
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, {
+    required: boolean;
     disabled: boolean;
     readonly: boolean;
     icon: string;
@@ -294,21 +339,31 @@ declare const _default: {
     autocomplete: string;
     autofocus: boolean;
     floating: boolean;
+    autoclear: boolean;
+    limit: string | boolean;
     cols: number;
     rows: number;
     wrap: string;
+    resizable: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         'icon-left': (_: {
             valid: boolean;
             error: boolean;
             modelValue: any;
+            hintLabel: string;
+            maxlength: number | undefined;
+            textLength: import("vue").ComputedRef<number>;
         }) => any;
         'icon-right': (_: {
             valid: boolean;
             error: boolean;
             modelValue: any;
+            hintLabel: string;
+            maxlength: number | undefined;
+            textLength: import("vue").ComputedRef<number>;
         }) => any;
+        limit: (_: {}) => any;
     };
 });
 export default _default;