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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/README.md +61 -2
  2. package/dist/components/VvButton/vv-button.es.js +56 -58
  3. package/dist/components/VvButton/vv-button.umd.js +1 -1
  4. package/dist/components/VvCheckGroup/vv-check-group.es.js +221 -203
  5. package/dist/components/VvCheckGroup/vv-check-group.umd.js +2 -2
  6. package/dist/components/VvInputText/VvInputText.d.ts +14 -0
  7. package/dist/components/VvInputText/VvInputText.vue.d.ts +36 -1
  8. package/dist/components/VvInputText/VvInputTextActions.d.ts +3 -0
  9. package/dist/components/VvInputText/vv-input-text.es.js +509 -380
  10. package/dist/components/VvInputText/vv-input-text.umd.js +2 -2
  11. package/dist/components/VvNativeSelect/vv-native-select.es.js +180 -161
  12. package/dist/components/VvNativeSelect/vv-native-select.umd.js +2 -2
  13. package/dist/components/VvRadioGroup/vv-radio-group.es.js +211 -193
  14. package/dist/components/VvRadioGroup/vv-radio-group.umd.js +2 -2
  15. package/dist/components/VvSelect/vv-select.es.js +189 -171
  16. package/dist/components/VvSelect/vv-select.umd.js +2 -2
  17. package/dist/components/VvTextarea/VvTextarea.d.ts +43 -22
  18. package/dist/components/VvTextarea/VvTextarea.vue.d.ts +140 -85
  19. package/dist/components/VvTextarea/vv-textarea.es.js +364 -288
  20. package/dist/components/VvTextarea/vv-textarea.umd.js +2 -2
  21. package/dist/composables/debouncedInput/useDebouncedInput.d.ts +2 -0
  22. package/dist/composables/icons/useComponentIcons.d.ts +6 -0
  23. package/dist/composables/textLimit/useTextLimit.d.ts +14 -0
  24. package/dist/composables/useModifiers.d.ts +3 -2
  25. package/dist/icons.es.js +3 -3
  26. package/dist/icons.umd.js +1 -1
  27. package/dist/props/index.d.ts +42 -0
  28. package/dist/stories/utils.d.ts +5 -0
  29. package/dist/ui-vue.es.js +417 -401
  30. package/dist/ui-vue.umd.js +2 -2
  31. package/package.json +3 -1
  32. package/src/assets/icons/detailed.json +1 -1
  33. package/src/assets/icons/normal.json +1 -1
  34. package/src/assets/icons/simple.json +1 -1
  35. package/src/components/VvButton/VvButton.vue +1 -2
  36. package/src/components/VvInputText/VvInputText.ts +19 -2
  37. package/src/components/VvInputText/VvInputText.vue +123 -149
  38. package/src/components/VvInputText/VvInputTextActions.ts +151 -0
  39. package/src/components/VvTextarea/VvTextarea.ts +25 -16
  40. package/src/components/VvTextarea/VvTextarea.vue +89 -93
  41. package/src/components/common/HintSlot.ts +31 -13
  42. package/src/composables/debouncedInput/useDebouncedInput.ts +19 -0
  43. package/src/composables/icons/useComponentIcons.ts +35 -0
  44. package/src/composables/textLimit/useTextLimit.ts +44 -0
  45. package/src/composables/useModifiers.ts +47 -1
  46. package/src/props/index.ts +39 -0
  47. package/src/stories/InputText/InputTextMaxLength.stories.mdx +21 -0
  48. package/src/stories/Textarea/Textarea.stories.mdx +33 -51
  49. package/src/stories/Textarea/TextareaAutoclear.stories.mdx +23 -0
  50. package/src/stories/Textarea/TextareaAutocomplete.stories.mdx +10 -2
  51. package/src/stories/Textarea/TextareaAutofocus.stories.mdx +5 -1
  52. package/src/stories/Textarea/TextareaDebounce.stories.mdx +23 -0
  53. package/src/stories/Textarea/TextareaDisabled.stories.mdx +5 -1
  54. package/src/stories/Textarea/TextareaError.stories.mdx +6 -3
  55. package/src/stories/Textarea/TextareaErrorLabel.stories.mdx +37 -0
  56. package/src/stories/Textarea/TextareaFloating.stories.mdx +7 -2
  57. package/src/stories/Textarea/TextareaHintLabel.stories.mdx +5 -1
  58. package/src/stories/Textarea/TextareaIcon.stories.mdx +5 -1
  59. package/src/stories/Textarea/TextareaIconPosition.stories.mdx +9 -1
  60. package/src/stories/Textarea/TextareaId.stories.mdx +19 -0
  61. package/src/stories/Textarea/TextareaLabel.stories.mdx +5 -1
  62. package/src/stories/Textarea/TextareaLimit.stories.mdx +50 -0
  63. package/src/stories/Textarea/TextareaLoading.stories.mdx +6 -3
  64. package/src/stories/Textarea/TextareaLoadingLabel.stories.mdx +23 -0
  65. package/src/stories/Textarea/TextareaMaxLength.stories.mdx +6 -2
  66. package/src/stories/Textarea/TextareaMinLength.stories.mdx +5 -1
  67. package/src/stories/Textarea/TextareaModifiers.stories.mdx +24 -0
  68. package/src/stories/Textarea/TextareaName.stories.mdx +23 -0
  69. package/src/stories/Textarea/TextareaPlaceholder.stories.mdx +5 -1
  70. package/src/stories/Textarea/TextareaReadonly.stories.mdx +5 -1
  71. package/src/stories/Textarea/TextareaRequired.stories.mdx +22 -0
  72. package/src/stories/Textarea/TextareaResizable.stories.mdx +22 -0
  73. package/src/stories/Textarea/TextareaRowsCols.stories.mdx +9 -1
  74. package/src/stories/Textarea/TextareaValid.stories.mdx +7 -4
  75. package/src/stories/Textarea/TextareaValidLabel.stories.mdx +35 -0
  76. package/src/stories/stories.scss +11 -0
  77. package/src/stories/utils.ts +12 -0
  78. package/src/stories/volver-ui-vue.stories.mdx +7 -1
  79. package/dist/components/VvInputText/useInputNumber.d.ts +0 -16
  80. package/dist/components/VvInputText/useInputPassword.d.ts +0 -16
  81. package/src/components/VvInputText/useInputNumber.ts +0 -40
  82. package/src/components/VvInputText/useInputPassword.ts +0 -38
@@ -1,2 +1,2 @@
1
- (function(t,x){typeof exports=="object"&&typeof module<"u"?module.exports=x(require("vue"),require("@iconify/vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["vue","@iconify/vue","@vueuse/core"],x):(t=typeof globalThis<"u"?globalThis:t||self,t.VvTextarea=x(t.vue,t.vue$1,t.core))})(this,function(t,x,w){"use strict";const S={equals(e,n,r){return r?this.resolveFieldData(e,r)===this.resolveFieldData(n,r):this.deepEquals(e,n)},deepEquals(e,n){if(e===n)return!0;if(e&&n&&typeof e=="object"&&typeof n=="object"){const r=Array.isArray(e),s=Array.isArray(n);let o,c,a;if(r&&s){if(c=e.length,c!=n.length)return!1;for(o=c;o--!==0;)if(!this.deepEquals(e[o],n[o]))return!1;return!0}if(r!=s)return!1;const i=e instanceof Date,h=n instanceof Date;if(i!=h)return!1;if(i&&h)return e.getTime()==n.getTime();const m=e instanceof RegExp,l=n instanceof RegExp;if(m!=l)return!1;if(m&&l)return e.toString()==n.toString();const u=Object.keys(e);if(c=u.length,c!==Object.keys(n).length)return!1;for(o=c;o--!==0;)if(!Object.prototype.hasOwnProperty.call(n,u[o]))return!1;for(o=c;o--!==0;)if(a=u[o],!this.deepEquals(e[a],n[a]))return!1;return!0}return e!==e&&n!==n},resolveFieldData(e,n){if(e&&Object.keys(e).length&&n){if(n.indexOf(".")===-1)return e[n];{const r=n.split(".");let s=e;for(let o=0,c=r.length;o<c;++o){if(e==null)return null;s=s[r[o]]}return s}}else return null},isFunction(e){return!!(e&&e.constructor&&e.call&&e.apply)},findIndexInList(e,n){let r=-1;if(n){for(let s=0;s<n.length;s++)if(this.equals(n[s],e)){r=s;break}}return r},contains(e,n){if(e!=null&&n&&n.length){for(const r of n)if(this.equals(e,r))return!0}return!1},isEmpty(e){return e==null||e===""||Array.isArray(e)&&e.length===0||!(e instanceof Date)&&typeof e=="object"&&Object.keys(e).length===0},isNotEmpty(e){return!this.isEmpty(e)},pickBy(e,n){return Object.fromEntries(Object.entries(e).filter(([r])=>n(r)))},removeFromList(e,n){const r=this.findIndexInList(e,n);return r>-1?n.filter((s,o)=>o!==r):n},isString(e){return typeof e=="string"||e instanceof String},propsToObject(e){return Object.keys(e).reduce((n,r)=>{var s,o,c,a,i;return this.isFunction(e[r])?n[r]=e[r]():Array.isArray(e[r])?n[r]=e[r][0]():(s=e[r])!=null&&s.type&&(Array.isArray(e[r].type)?n[r]=((o=e[r])==null?void 0:o.default)||((c=e[r])==null?void 0:c.type[0]()):n[r]=((a=e[r])==null?void 0:a.default)||((i=e[r])==null?void 0:i.type())),n},{})},filterArray(e,n,r){return e.filter(s=>n.some(o=>typeof o=="string"?s[r]==o:this.equals(s[r],o[r])))},kebabCase(e){var n,r;if(e)return(r=(n=e.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:r.toLowerCase()}},$={valid:Boolean,validLabel:[String,Array]},j={error:Boolean,errorLabel:[String,Array]},q={loading:Boolean,loadingLabel:String},v={disabled:Boolean},R={readonly:Boolean},H={hintLabel:{type:String,default:""}},I={LEFT:"left",RIGHT:"right"},M={hard:"hard",soft:"soft"},z=["update:modelValue","focus","blur"],Z={...$,...j,...H,...q,...v,...R,modelValue:null,id:String,name:{type:String,required:!0},autocomplete:{type:String,default:"off"},autofocus:Boolean,minlength:Number,maxlength:Number,label:String,placeholder:String,icon:{type:String,default:""},iconPosition:{type:String,validation:e=>Object.values(I).includes(e),default:I.RIGHT},floating:Boolean,debounce:Number,cols:{type:Number,default:50},rows:{type:Number,default:5},wrap:{type:String,default:M.soft}},W={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]}};function N(e,n){const r={[`${e}`]:!0};return{bemCssClasses:t.computed(()=>Object.keys(n).reduce((o,c)=>{const a=t.unref(n[c])||!1;if(!a)return o;if(c==="modifiers"){const i=Array.isArray(a)?a:[a];return{...o,...i.reduce((h,m)=>({...h,[`${e}--${S.kebabCase(m)}`]:!0}),{})}}else return{...o,[`${e}--${S.kebabCase(c)}`]:a}},r)||{})}}const k=t.defineComponent({__name:"VvIcon",props:W,setup(e){const n=e,r=t.ref(!0),{modifiers:s}=t.toRefs(n),o=t.inject("ds"),{bemCssClasses:c}=N("vv-icon",{modifiers:s}),a=t.computed(()=>n.provider||(o==null?void 0:o.provider)),i=t.computed(()=>{const l=n.name||"",u=`@${a.value}:${n.prefix}:${n.name}`;return x.iconExists(l)?l:x.iconExists(u)?u:(o==null?void 0:o.iconsCollections.find(f=>{const d=`@${a.value}:${f.prefix}:${l}`;if(x.iconExists(d))return d}))||l});function h(l){let u=null;if(typeof window>"u"){const{JSDOM:P}=require("jsdom");u=new P().window}return(u?new u.DOMParser:new window.DOMParser).parseFromString(l,"text/html").querySelector("svg")}function m(l){const u=h(l),f=(u==null?void 0:u.innerHTML.trim())||"";u&&f&&x.addIcon(`@${a.value}:${n.prefix}:${n.name}`,{body:f,height:u.viewBox.baseVal.height,width:u.viewBox.baseVal.width})}return o&&(n.src?(r.value=!1,o.fetchIcon(n.src).then(l=>{l&&(m(l),r.value=!0)}).catch(l=>{throw new Error(`During fetch icon: ${l==null?void 0:l.message}`)})):n.svg&&m(n.svg)),(l,u)=>r.value?(t.openBlock(),t.createBlock(t.unref(x.Icon),t.mergeProps({key:0,class:t.unref(c)},{...l.$props,provider:t.unref(a),icon:t.unref(i)}),null,16,["class"])):t.createCommentVNode("",!0)}});function G(e){return Array.isArray(e)?e.filter(n=>S.isString(n)).reduce((n,r)=>n.length>0?n+`
2
- `+r:r,""):e}function U(e,n){return{name:"HintSlot",setup(){const r=t.toRefs(e),{error:s,valid:o,hint:c,loading:a}=n,{hintLabel:i,modelValue:h,valid:m,validLabel:l,error:u,errorLabel:f}=r,d=S.resolveFieldData(r,"loading"),g=S.resolveFieldData(r,"loadingLabel"),P=t.computed(()=>u.value?!!(u.value&&s||(f==null?void 0:f.value)&&Array.isArray(f.value)&&f.value.length>0||(f==null?void 0:f.value)&&S.isNotEmpty(f.value)):!1),_=t.computed(()=>!!(i&&i.value||c||o||l&&l.value||P.value||(d==null?void 0:d.value)&&a||(d==null?void 0:d.value)&&(g==null?void 0:g.value))),E=t.computed(()=>Array.isArray(f==null?void 0:f.value)?G((f==null?void 0:f.value)||""):f==null?void 0:f.value),B=t.computed(()=>{const C={modelValue:h,error:u,valid:m};return u!=null&&u.value?(s==null?void 0:s(C))||(E==null?void 0:E.value)||(i==null?void 0:i.value):m!=null&&m.value?(o==null?void 0:o(C))||(l==null?void 0:l.value)||(i==null?void 0:i.value):d!=null&&d.value?(a==null?void 0:a(C))||(g==null?void 0:g.value)||(i==null?void 0:i.value):(c==null?void 0:c(C))||(i==null?void 0:i.value)||(i==null?void 0:i.value)});return{hasHint:_,hintContent:B}},render(){if(this.hasHint)return t.h("span",null,this.hintContent)}}}function J(e,n){const{icon:r,iconPosition:s}=e,o=t.computed(()=>!!(r.value&&s.value==="left"||n.iconLeft)),c=t.computed(()=>!!(r.value&&s.value==="right"||n.iconRight)),a=t.computed(()=>!!(r.value&&s.value==="top"||n.iconTop)),i=t.computed(()=>!!(r.value&&s.value==="bottom"||n.iconBottom));return{icon:r,iconPosition:s,hasIconLeft:o,hasIconRight:c,hasIconTop:a,hasIconBottom:i}}function K(e,n){const{focused:r}=w.useFocus(e);return t.watch(r,s=>{n(s?"focus":"blur",e.value)}),{focused:r}}const Q=["for"],X={class:"vv-textarea__wrapper"},Y={inheritAttrs:!1};return t.defineComponent({...Y,__name:"VvTextarea",props:Z,emits:z,setup(e,{emit:n}){const r=e,s=t.useSlots(),o=t.useAttrs(),c=t.ref(),a=t.ref(r.modelValue),{readonly:i,icon:h,iconPosition:m,valid:l,error:u,loading:f,floating:d,label:g,modelValue:P}=t.toRefs(r),_=w.refDebounced(a,r.debounce||0);t.watch(_,p=>n("update:modelValue",p));const E={icon:h,iconPosition:m},B={iconLeft:s["icon-left"],iconRight:s["icon-right"]},{hasIconLeft:C,hasIconRight:V}=J(E,B),{focused:T}=K(c,n),{bemCssClasses:L}=N("vv-textarea",{readonly:i,valid:l,invalid:u,loading:f,iconLeft:C,iconRight:V,floating:t.computed(()=>d.value&&S.isNotEmpty(g==null?void 0:g.value)),dirty:t.computed(()=>S.isNotEmpty(P))}),ee=t.computed(()=>{const{class:p}=o;return{class:p,...L.value}}),te=t.computed(()=>{const{style:p}=o,y=S.pickBy(o,A=>A.startsWith("data-"));return{style:p,...y}}),D=t.computed(()=>{const{id:p,name:y,autocomplete:A,minlength:re,maxlength:oe,disabled:se,readonly:ie,floating:ce,placeholder:F,cols:ae,rows:le}=r,ue=p||y,fe=ce&&S.isEmpty(F)?" ":F;return{id:ue,placeholder:fe,name:y,autocomplete:A,disabled:se,readonly:ie,minlength:re,maxlength:oe,cols:ae,rows:le,...O.value}}),O=t.computed(()=>{const{name:p}=o,y=S.pickBy(o,A=>A.startsWith("aria-"));return{"aria-label":p,"aria-describedby":`${p}-hint`,"aria-invalid":r.error,...y}}),b=t.computed(()=>{const{modelValue:p,valid:y,error:A}=r;return{valid:y,error:A,modelValue:p}}),ne=U(r,s);return t.onMounted(()=>{r.autofocus&&(T.value=!0),console.log("Focused",T.value)}),(p,y)=>(t.openBlock(),t.createElementBlock("div",t.mergeProps(t.unref(te),{class:t.unref(ee)}),[t.unref(g)?(t.openBlock(),t.createElementBlock("label",{key:0,for:t.unref(D).id},t.toDisplayString(t.unref(g)),9,Q)):t.createCommentVNode("",!0),t.createElementVNode("div",X,[t.unref(C)?t.renderSlot(p.$slots,"icon-left",t.normalizeProps(t.mergeProps({key:0},t.unref(b))),()=>[t.createVNode(k,{class:"vv-textarea__icon-left",name:t.unref(h)},null,8,["name"])]):t.createCommentVNode("",!0),t.withDirectives(t.createElementVNode("textarea",t.mergeProps({ref_key:"input",ref:c},t.unref(D),{"onUpdate:modelValue":y[0]||(y[0]=A=>a.value=A),onInput:y[1]||(y[1]=A=>n("input",A))}),null,16),[[t.vModelText,a.value]]),t.unref(V)?t.renderSlot(p.$slots,"icon-right",t.normalizeProps(t.mergeProps({key:1},t.unref(b))),()=>[t.createVNode(k,{name:t.unref(h)},null,8,["name"])]):t.createCommentVNode("",!0)]),t.createVNode(t.unref(ne),{id:t.unref(O)["aria-describedby"],class:"vv-textarea__hint"},null,8,["id"])],16))}})});
1
+ (function(e,S){typeof exports=="object"&&typeof module<"u"?module.exports=S(require("vue"),require("@iconify/vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["vue","@iconify/vue","@vueuse/core"],S):(e=typeof globalThis<"u"?globalThis:e||self,e.VvTextarea=S(e.vue,e.vue$1,e.core))})(this,function(e,S,C){"use strict";const y={equals(t,n,r){return r?this.resolveFieldData(t,r)===this.resolveFieldData(n,r):this.deepEquals(t,n)},deepEquals(t,n){if(t===n)return!0;if(t&&n&&typeof t=="object"&&typeof n=="object"){const r=Array.isArray(t),s=Array.isArray(n);let o,i,a;if(r&&s){if(i=t.length,i!=n.length)return!1;for(o=i;o--!==0;)if(!this.deepEquals(t[o],n[o]))return!1;return!0}if(r!=s)return!1;const d=t instanceof Date,l=n instanceof Date;if(d!=l)return!1;if(d&&l)return t.getTime()==n.getTime();const g=t instanceof RegExp,c=n instanceof RegExp;if(g!=c)return!1;if(g&&c)return t.toString()==n.toString();const u=Object.keys(t);if(i=u.length,i!==Object.keys(n).length)return!1;for(o=i;o--!==0;)if(!Object.prototype.hasOwnProperty.call(n,u[o]))return!1;for(o=i;o--!==0;)if(a=u[o],!this.deepEquals(t[a],n[a]))return!1;return!0}return t!==t&&n!==n},resolveFieldData(t,n){if(t&&Object.keys(t).length&&n){if(n.indexOf(".")===-1)return t[n];{const r=n.split(".");let s=t;for(let o=0,i=r.length;o<i;++o){if(t==null)return null;s=s[r[o]]}return s}}else return null},isFunction(t){return!!(t&&t.constructor&&t.call&&t.apply)},findIndexInList(t,n){let r=-1;if(n){for(let s=0;s<n.length;s++)if(this.equals(n[s],t)){r=s;break}}return r},contains(t,n){if(t!=null&&n&&n.length){for(const r of n)if(this.equals(t,r))return!0}return!1},isEmpty(t){return t==null||t===""||Array.isArray(t)&&t.length===0||!(t instanceof Date)&&typeof t=="object"&&Object.keys(t).length===0},isNotEmpty(t){return!this.isEmpty(t)},pickBy(t,n){return Object.fromEntries(Object.entries(t).filter(([r])=>n(r)))},removeFromList(t,n){const r=this.findIndexInList(t,n);return r>-1?n.filter((s,o)=>o!==r):n},isString(t){return typeof t=="string"||t instanceof String},propsToObject(t){return Object.keys(t).reduce((n,r)=>{var s,o,i,a,d;return this.isFunction(t[r])?n[r]=t[r]():Array.isArray(t[r])?n[r]=t[r][0]():(s=t[r])!=null&&s.type&&(Array.isArray(t[r].type)?n[r]=((o=t[r])==null?void 0:o.default)||((i=t[r])==null?void 0:i.type[0]()):n[r]=((a=t[r])==null?void 0:a.default)||((d=t[r])==null?void 0:d.type())),n},{})},filterArray(t,n,r){return t.filter(s=>n.some(o=>typeof o=="string"?s[r]==o:this.equals(s[r],o[r])))},kebabCase(t){var n,r;if(t)return(r=(n=t.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:r.toLowerCase()}},D={valid:Boolean,validLabel:[String,Array]},V={error:Boolean,errorLabel:[String,Array]},O={loading:Boolean,loadingLabel:String},T={modifiers:[String,Array]},q={hintLabel:{type:String,default:""}},F={limit:{type:[Boolean,String],default:!1,validator:t=>[!0,!1,"countdown"].includes(t)}},L={id:String,name:{type:String,required:!0},autocomplete:{type:String,default:"off"},autofocus:Boolean,minlength:Number,maxlength:Number,label:String,placeholder:String,required:Boolean,disabled:Boolean,readonly:Boolean},j={debounce:Number},N={LEFT:"left",RIGHT:"right"},R={hard:"hard",soft:"soft"},M=["update:modelValue","focus","blur"],H={...D,...V,...q,...O,...T,...F,...L,...j,modelValue:null,cols:{type:Number,default:50},rows:{type:Number,default:5},icon:{type:String,default:""},iconPosition:{type:String,validation:t=>Object.values(N).includes(t),default:N.RIGHT},floating:Boolean,wrap:{type:String,default:R.soft},autoclear:Boolean,resizable:Boolean},z={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]}};function Z(t,n){const r={[`${t}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(n).reduce((o,i)=>{const a=e.unref(n[i])||!1;if(!a)return o;if(i==="modifiers"){const d=Array.isArray(a)?a:[a];return{...o,...d.reduce((l,g)=>({...l,[`${t}--${y.kebabCase(g)}`]:!0}),{})}}else return{...o,[`${t}--${y.kebabCase(i)}`]:a}},r)||{})}}function W(t,n){const r={[`${t}`]:!0};return Object.keys(n).reduce((s,o)=>{const i=e.unref(n[o])||!1;if(!i)return s;if(o==="modifiers"){const a=Array.isArray(i)?i:[i];return{...s,...a.reduce((d,l)=>({...d,[`${t}--${y.kebabCase(l)}`]:!0}),{})}}else return{...s,[`${t}--${y.kebabCase(o)}`]:i}},r)||{}}const P=e.defineComponent({__name:"VvIcon",props:z,setup(t){const n=t,r=e.ref(!0),{modifiers:s}=e.toRefs(n),o=e.inject("ds"),{bemCssClasses:i}=Z("vv-icon",{modifiers:s}),a=e.computed(()=>n.provider||(o==null?void 0:o.provider)),d=e.computed(()=>{const c=n.name||"",u=`@${a.value}:${n.prefix}:${n.name}`;return S.iconExists(c)?c:S.iconExists(u)?u:(o==null?void 0:o.iconsCollections.find(m=>{const f=`@${a.value}:${m.prefix}:${c}`;if(S.iconExists(f))return f}))||c});function l(c){let u=null;if(typeof window>"u"){const{JSDOM:h}=require("jsdom");u=new h().window}return(u?new u.DOMParser:new window.DOMParser).parseFromString(c,"text/html").querySelector("svg")}function g(c){const u=l(c),m=(u==null?void 0:u.innerHTML.trim())||"";u&&m&&S.addIcon(`@${a.value}:${n.prefix}:${n.name}`,{body:m,height:u.viewBox.baseVal.height,width:u.viewBox.baseVal.width})}return o&&(n.src?(r.value=!1,o.fetchIcon(n.src).then(c=>{c&&(g(c),r.value=!0)}).catch(c=>{throw new Error(`During fetch icon: ${c==null?void 0:c.message}`)})):n.svg&&g(n.svg)),(c,u)=>r.value?(e.openBlock(),e.createBlock(e.unref(S.Icon),e.mergeProps({key:0,class:e.unref(i)},{...c.$props,provider:e.unref(a),icon:e.unref(d)}),null,16,["class"])):e.createCommentVNode("",!0)}});function k(t){return Array.isArray(t)?t.filter(n=>y.isString(n)).reduce((n,r)=>n.length>0?n+`
2
+ `+r:r,""):t}function G(t,n){return{name:"HintSlot",props:{params:{type:Object,default:()=>{}}},setup(r){const s=e.toRefs(t),{error:o,valid:i,hint:a,loading:d}=n,{hintLabel:l,modelValue:g,valid:c,validLabel:u,error:m,errorLabel:f}=s,p=y.resolveFieldData(s,"loading"),h=y.resolveFieldData(s,"loadingLabel"),A=e.computed(()=>m.value?!!(m.value&&o||(f==null?void 0:f.value)&&Array.isArray(f.value)&&f.value.length>0||(f==null?void 0:f.value)&&y.isNotEmpty(f.value)):!1),E=e.computed(()=>!!(l&&l.value||a||i||u&&u.value||A.value||(p==null?void 0:p.value)&&d||(p==null?void 0:p.value)&&(h==null?void 0:h.value))),w=e.computed(()=>{const B=C.toReactive({hintLabel:l,modelValue:g,valid:c,validLabel:u,error:m,errorLabel:f,loading:p,loadingLabel:h,...r.params});return m!=null&&m.value?(o==null?void 0:o(B))||k(f==null?void 0:f.value)||(l==null?void 0:l.value):c!=null&&c.value?(i==null?void 0:i(B))||k(u==null?void 0:u.value)||(l==null?void 0:l.value):p!=null&&p.value?(d==null?void 0:d(B))||k(h==null?void 0:h.value)||(l==null?void 0:l.value):(a==null?void 0:a(B))||k(l==null?void 0:l.value)||(l==null?void 0:l.value)});return{hasHint:E,hintContent:w}},render(){if(this.hasHint)return e.h("pre",{style:{"white-space":"pre"}},this.hintContent)}}}function U(t,n,r){const s=e.computed(()=>!!(t.value&&n.value==="left"||r.iconLeft)),o=e.computed(()=>!!(t.value&&n.value==="right"||r.iconRight)),i=e.computed(()=>!!(t.value&&n.value==="top"||r.iconTop)),a=e.computed(()=>!!(t.value&&n.value==="bottom"||r.iconBottom));return{hasIconLeft:s,hasIconRight:o,hasIconTop:i,hasIconBottom:a}}function J(t,n){const{focused:r}=C.useFocus(t);return e.watch(r,s=>{n(s?"focus":"blur",t.value)}),{focused:r}}function K(t,n,r){const s=e.ref(t==null?void 0:t.value),o=C.refDebounced(s,n||0);return e.watch(o,i=>r("update:modelValue",i)),s}function Q(t,n){const r=e.computed(()=>{const i=e.unref(t);return C.isString(i)?i.length:0}),s=e.computed(()=>{const i=e.unref(t)||"";return!C.isString(i)||n.mode===!1?0:n.mode===!0?i.length:e.unref(n.upperLimit)-i.length}),o=e.computed(()=>n.mode===!1?"":n.mode===!0&&n.upperLimit&&n.upperLimit>0?`${s.value}/${e.unref(n.upperLimit)}`:s.value);return{textLength:r,textLimitLength:s,formattedTextLimitLength:o}}const X=["for"],Y={class:"vv-textarea__wrapper"},v={key:3,class:"vv-textarea__limit"},ee={inheritAttrs:!1};return e.defineComponent({...ee,__name:"VvTextarea",props:H,emits:M,setup(t,{emit:n}){const r=t,s=e.useSlots(),o=e.useAttrs(),i=e.ref(),{icon:a,iconPosition:d,label:l,modelValue:g,autoclear:c,limit:u}=e.toRefs(r),m=r.id||r.name,f=`${r.name}-label`,p=`${r.name}-hint`,h=e.computed(()=>r.floating&&y.isEmpty(r.placeholder)?" ":r.placeholder),A=K(g,r.debounce,n),{hasIconLeft:E,hasIconRight:w}=U(a,d,{iconLeft:s["icon-left"],iconRight:s["icon-right"]}),{focused:B}=J(i,n),{textLength:I,formattedTextLimitLength:te}=Q(A,{mode:r.limit,upperLimit:r.maxlength||0}),re=e.computed(()=>[W("vv-textarea",{modifiers:r.modifiers,readonly:r.readonly,valid:r.valid,invalid:r.error,loading:r.loading,iconLeft:E,iconRight:w,floating:r.floating&&y.isNotEmpty(r.label),dirty:y.isNotEmpty(g==null?void 0:g.value),resizable:r.resizable}),o.class]),ne=e.computed(()=>{const b=y.pickBy(o,x=>x.startsWith("data-"));return{style:o.style,...b}}),oe=e.computed(()=>{const b=y.pickBy(o,x=>x.startsWith("aria-"));return{id:m,placeholder:h.value,name:r.name,autocomplete:r.autocomplete,disabled:r.disabled,readonly:r.readonly,minlength:r.minlength,maxlength:r.maxlength,cols:r.cols,rows:r.rows,required:r.required,tabindex:o.tabindex,"aria-invalid":r.error,"aria-valid":!r.valid,"aria-labeledby":f,"aria-describedby":p,"aria-errormessage":p,...b}}),$=e.computed(()=>{const{modelValue:b,valid:x,error:_,maxlength:ae,hintLabel:le}=r;return{valid:x,error:_,modelValue:b,hintLabel:le,maxlength:ae,textLength:I}}),se=G(r,s);function ie(){A.value=""}return e.onMounted(()=>{r.autofocus&&(B.value=!0),console.log("Focused",B.value)}),(b,x)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps(e.unref(ne),{class:e.unref(re)}),[e.unref(l)?(e.openBlock(),e.createElementBlock("label",{key:0,id:f,for:e.unref(m)},e.toDisplayString(e.unref(l)),9,X)):e.createCommentVNode("",!0),e.createElementVNode("div",Y,[e.unref(E)?e.renderSlot(b.$slots,"icon-left",e.normalizeProps(e.mergeProps({key:0},e.unref($))),()=>[e.createVNode(P,{class:"vv-textarea__icon-left",name:e.unref(a)},null,8,["name"])]):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("textarea",e.mergeProps({ref_key:"input",ref:i,"onUpdate:modelValue":x[0]||(x[0]=_=>e.isRef(A)?A.value=_:null)},e.unref(oe),{onInput:x[1]||(x[1]=_=>n("input",_))}),null,16),[[e.vModelText,e.unref(A)]]),e.unref(c)&&e.unref(I)>0?(e.openBlock(),e.createElementBlock("button",{key:1,class:"vv-button vv-button--ghost",onClick:ie},[e.createVNode(P,{name:"clear-field"})])):e.createCommentVNode("",!0),e.unref(w)?e.renderSlot(b.$slots,"icon-right",e.normalizeProps(e.mergeProps({key:2},e.unref($))),()=>[e.createVNode(P,{name:e.unref(a)},null,8,["name"])]):e.createCommentVNode("",!0),e.unref(u)?(e.openBlock(),e.createElementBlock("span",v,[e.renderSlot(b.$slots,"limit",{},()=>[e.createTextVNode(e.toDisplayString(e.unref(te)),1)])])):e.createCommentVNode("",!0)]),e.createVNode(e.unref(se),{id:p,class:"vv-textarea__hint"})],16))}})});
@@ -0,0 +1,2 @@
1
+ import type { Ref } from 'vue';
2
+ export declare function useDebouncedInput(inputText: Ref<any> | undefined, debounced: number | undefined, emit: (event: any, ...args: any[]) => void): Ref<any>;
@@ -17,4 +17,10 @@ export declare function useComponentIcons(props: ComponentIconProps, slots: Comp
17
17
  hasIconTop: import("vue").ComputedRef<boolean>;
18
18
  hasIconBottom: import("vue").ComputedRef<boolean>;
19
19
  };
20
+ export declare function useComponentIcon(icon: Ref<string>, iconPosition: Ref<string>, slots: ComponentIconSlots): {
21
+ hasIconLeft: import("vue").ComputedRef<boolean>;
22
+ hasIconRight: import("vue").ComputedRef<boolean>;
23
+ hasIconTop: import("vue").ComputedRef<boolean>;
24
+ hasIconBottom: import("vue").ComputedRef<boolean>;
25
+ };
20
26
  export {};
@@ -0,0 +1,14 @@
1
+ import { type Ref } from 'vue';
2
+ interface useTextOptions {
3
+ mode: string | boolean;
4
+ upperLimit: number;
5
+ }
6
+ /**
7
+ *
8
+ */
9
+ export declare function useTextLimit(inputText: Ref<string>, options: useTextOptions): {
10
+ textLength: import("vue").ComputedRef<number>;
11
+ textLimitLength: import("vue").ComputedRef<number>;
12
+ formattedTextLimitLength: import("vue").ComputedRef<string | number>;
13
+ };
14
+ export {};
@@ -1,9 +1,10 @@
1
1
  import { type Ref } from 'vue';
2
2
  interface IBemModifiers {
3
- [key: string]: Ref<boolean> | Ref<string | unknown[] | undefined> | undefined;
4
- modifiers?: Ref<string | unknown[] | undefined> | undefined;
3
+ [key: string]: Ref<boolean> | Ref<string | unknown[] | undefined> | boolean | string | string[] | undefined | unknown[];
4
+ modifiers?: Ref<string | unknown[] | undefined> | undefined | string[] | string | unknown[];
5
5
  }
6
6
  export declare function useBemModifiers(prefix: string, modifiers: IBemModifiers): {
7
7
  bemCssClasses: import("vue").ComputedRef<object>;
8
8
  };
9
+ export declare function toBem(prefix: string, modifiers: IBemModifiers): object;
9
10
  export {};
package/dist/icons.es.js CHANGED
@@ -601,11 +601,11 @@ const t = {
601
601
  }
602
602
  }, o = 24, e = 24, l = {
603
603
  prefix: r,
604
- lastModified: 1668072348,
604
+ lastModified: 1668188662,
605
605
  icons: t,
606
606
  width: o,
607
607
  height: e
608
- }, n = "detailed", i = 1668072348, a = {
608
+ }, n = "detailed", i = 1668188662, a = {
609
609
  add: {
610
610
  body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 15.999h24m-12-12v24"/>'
611
611
  },
@@ -1209,7 +1209,7 @@ const t = {
1209
1209
  icons: a,
1210
1210
  width: c,
1211
1211
  height: h
1212
- }, d = "simple", k = 1668072348, m = {
1212
+ }, d = "simple", k = 1668188662, m = {
1213
1213
  add: {
1214
1214
  body: '<path fill="none" stroke="currentColor" stroke-linecap="round" d="M.5 8h15M8 .5v15"/>'
1215
1215
  },