@volverjs/ui-vue 0.0.6-beta.5 → 0.0.6-beta.7

package/dist/components/VvTextarea/VvTextarea.es.js

@@ -1,137 +1,121 @@
-import { unref, toRefs, computed, h, inject, defineComponent, ref, openBlock, createBlock, mergeProps, createCommentVNode, watch, useSlots, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withDirectives, isRef, vModelText, createTextVNode, createVNode } from "vue";
-import { toReactive, useFocus, useElementVisibility } from "@vueuse/core";
+import { unref, computed, defineComponent, h, inject, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, useSlots, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withDirectives, isRef, vModelText, createTextVNode, createVNode, createSlots, withCtx } from "vue";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { nanoid } from "nanoid";
-function resolveFieldData(data, field) {
-  if (data && Object.keys(data).length && field) {
-    if (field.indexOf(".") === -1) {
-      return data[field];
-    } else {
-      const fields = field.split(".");
-      let value = data;
-      for (let i = 0, len = fields.length; i < len; ++i) {
-        if (data == null) {
-          return null;
-        }
-        value = value[fields[i]];
-      }
-      return value;
-    }
-  } else {
-    return null;
-  }
-}
+import { useFocus, useElementVisibility } from "@vueuse/core";
 function isEmpty(value) {
   return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
 }
 function isString(value) {
   return typeof value === "string" || value instanceof String;
 }
-function joinLines(errors) {
-  if (Array.isArray(errors)) {
-    return errors.filter((e) => isString(e)).join(" ");
+function joinLines(items) {
+  if (Array.isArray(items)) {
+    return items.filter((item) => isString(item)).join(" ");
   }
-  return errors;
+  return items;
 }
-function HintSlotFactory(parentProps, parentSlots) {
-  const {
-    invalid: invalidSlot,
-    valid: validSlot,
-    hint: hintSlot,
-    loading: loadingSlot
-  } = parentSlots;
-  const {
-    hintLabel,
-    modelValue,
-    valid,
-    validLabel,
-    invalid,
-    invalidLabel,
-    ...otherProps
-  } = toRefs(parentProps);
-  const loading = resolveFieldData(otherProps, "loading");
-  const loadingLabel = resolveFieldData(otherProps, "loadingLabel");
-  const hasInvalid = computed(() => {
-    if (!invalid.value) {
-      return false;
-    }
-    if (invalid.value && invalidSlot) {
-      return true;
-    }
-    if ((invalidLabel == null ? void 0 : invalidLabel.value) && Array.isArray(invalidLabel.value) && invalidLabel.value.length > 0) {
-      return true;
-    }
-    if ((invalidLabel == null ? void 0 : invalidLabel.value) && !isEmpty(invalidLabel)) {
-      return true;
-    }
-    return false;
-  });
-  const hasHint = computed(
-    () => !!(hintLabel && hintLabel.value || hintSlot)
+function HintSlotFactory(props, slots) {
+  const invalidLabel = computed(() => joinLines(props.invalidLabel));
+  const validLabel = computed(() => joinLines(props.validLabel));
+  const loadingLabel = computed(() => props.loadingLabel);
+  const hintLabel = computed(() => props.hintLabel);
+  const hasLoadingLabelOrSlot = computed(
+    () => Boolean(props.loading && (slots.loading || loadingLabel.value))
   );
-  const hasValid = computed(
-    () => !!(validLabel && validLabel.value || validSlot)
+  const hasInvalidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && Boolean(props.invalid && (slots.invalid || invalidLabel.value))
   );
-  const hasLoading = computed(
-    () => !!((loading == null ? void 0 : loading.value) && loadingSlot || (loading == null ? void 0 : loading.value) && (loadingLabel == null ? void 0 : loadingLabel.value))
+  const hasValidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.valid && (slots.valid || validLabel.value))
+  );
+  const hasHintLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && !hasValidLabelOrSlot.value && Boolean(slots.hint || hintLabel.value)
   );
   const isVisible = computed(
-    () => hasHint.value || hasValid.value || hasInvalid.value || hasLoading.value
+    () => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
   );
-  return {
-    hasInvalid,
-    hasHint,
-    hasValid,
-    hasLoading,
-    HintSlot: {
-      name: "HintSlot",
-      props: {
-        params: {
-          type: Object,
-          default: () => ({})
+  const hintSlotScope = computed(() => ({
+    modelValue: props.modelValue,
+    valid: props.valid,
+    invalid: props.invalid,
+    loading: props.loading
+  }));
+  const HintSlot = defineComponent({
+    name: "HintSlot",
+    props: {
+      tag: {
+        type: String,
+        default: "small"
+      }
+    },
+    setup() {
+      return {
+        isVisible,
+        invalidLabel,
+        validLabel,
+        loadingLabel,
+        hintLabel,
+        hasInvalidLabelOrSlot,
+        hasValidLabelOrSlot,
+        hasLoadingLabelOrSlot,
+        hasHintLabelOrSlot
+      };
+    },
+    render() {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if (this.isVisible) {
+        let role;
+        if (this.hasInvalidLabelOrSlot) {
+          role = "alert";
         }
-      },
-      setup(props) {
-        const hintContent = computed(() => {
-          const slotProps = toReactive({
-            hintLabel,
-            modelValue,
-            valid,
-            validLabel,
-            invalid,
-            invalidLabel,
-            loading,
-            loadingLabel,
-            ...props.params
-          });
-          if (invalid == null ? void 0 : invalid.value) {
-            return (invalidSlot == null ? void 0 : invalidSlot(slotProps)) || joinLines(invalidLabel == null ? void 0 : invalidLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
-          }
-          if (valid == null ? void 0 : valid.value)
-            return (validSlot == null ? void 0 : validSlot(slotProps)) || joinLines(validLabel == null ? void 0 : validLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
-          if (loading == null ? void 0 : loading.value)
-            return (loadingSlot == null ? void 0 : loadingSlot(slotProps)) || joinLines(loadingLabel == null ? void 0 : loadingLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
-          return (hintSlot == null ? void 0 : hintSlot(slotProps)) || joinLines(hintLabel == null ? void 0 : hintLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
-        });
-        return {
-          isVisible,
-          hasInvalid,
-          hasValid,
-          hintContent
-        };
-      },
-      render() {
-        if (this.isVisible) {
+        if (this.hasValidLabelOrSlot) {
+          role = "status";
+        }
+        if (this.hasLoadingLabelOrSlot) {
           return h(
-            "small",
+            this.tag,
             {
-              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
+              role
             },
-            this.hintContent
+            ((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
           );
         }
+        if (this.hasInvalidLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
+          );
+        }
+        if (this.hasValidLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
+          );
+        }
+        return h(
+          this.tag,
+          {
+            role
+          },
+          ((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
+        );
       }
+      return null;
     }
+  });
+  return {
+    hasInvalidLabelOrSlot,
+    hasHintLabelOrSlot,
+    hasValidLabelOrSlot,
+    hasLoadingLabelOrSlot,
+    hintSlotScope,
+    HintSlot
   };
 }
 const VvIconProps = {
@@ -299,6 +283,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   props: VvIconProps,
   setup(__props) {
     const props = __props;
+    const hasRotate = computed(() => {
+      if (typeof props.rotate === "string") {
+        return parseFloat(props.rotate);
+      }
+      return props.rotate;
+    });
     const show = ref(true);
     const volver = useVolver();
     const { modifiers } = toRefs(props);
@@ -307,25 +297,24 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return props.provider || (volver == null ? void 0 : volver.iconsProvider);
     });
     const icon = computed(() => {
-      const _name = props.name ?? "";
-      const iconName = `@${provider.value}:${props.prefix}:${props.name}`;
-      if (iconExists(_name)) {
-        return _name;
-      } else if (iconExists(iconName)) {
+      const name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${name}`;
+      if (iconExists(iconName)) {
         return iconName;
-      } else {
-        return (volver == null ? void 0 : volver.iconsCollections.find(
-          (iconsCollection) => {
-            const icon2 = `@${provider.value}:${iconsCollection.prefix}:${_name}`;
-            if (iconExists(icon2)) {
-              return icon2;
-            }
-          }
-        )) || _name;
       }
+      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
+        (iconsCollection2) => {
+          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
+          return iconExists(icon2);
+        }
+      );
+      if (iconsCollection) {
+        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
+      }
+      return name;
     });
     function getSvgContent(svg) {
-      let dom = null;
+      let dom;
       if (typeof window === "undefined") {
         const { JSDOM } = require("jsdom");
         dom = new JSDOM().window;
@@ -356,12 +345,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             show.value = true;
           }
         }).catch((e) => {
-          throw new Error(`During fetch icon: ${e == null ? void 0 : e.message}`);
+          throw new Error(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
         });
-      } else if (props.svg) {
-        addIconFromSvg(props.svg);
       }
     }
+    if (props.svg) {
+      addIconFromSvg(props.svg);
+    }
     return (_ctx, _cache) => {
       return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
         key: 0,
@@ -373,7 +363,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         horizontalFlip: _ctx.horizontalFlip,
         verticalFlip: _ctx.verticalFlip,
         flip: _ctx.flip,
-        rotate: _ctx.rotate,
+        rotate: unref(hasRotate),
         color: _ctx.color,
         onLoad: _ctx.onLoad,
         icon: unref(icon)
@@ -892,7 +882,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       modifiers
     } = toRefs(props);
     const hasId = useUniqueId(id);
-    const hasDescribedBy = computed(() => `${hasId.value}-hint`);
+    const hasHintId = computed(() => `${hasId.value}-hint`);
     const hasPlaceholder = computed(
       () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
     );
@@ -927,7 +917,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return void 0;
     });
-    const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots);
+    const {
+      HintSlot,
+      hasHintLabelOrSlot,
+      hasInvalidLabelOrSlot,
+      hintSlotScope
+    } = HintSlotFactory(props, slots);
     const bemCssClasses = useModifiers(
       "vv-textarea",
       modifiers,
@@ -961,8 +956,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         wrap: props.wrap,
         spellcheck: props.spellcheck,
         "aria-invalid": isInvalid.value,
-        "aria-describedby": !hasInvalid.value && hasHint.value ? hasDescribedBy.value : void 0,
-        "aria-errormessage": hasInvalid.value ? hasDescribedBy.value : void 0
+        "aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
+        "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
       })
     );
     const slotProps = computed(() => ({
@@ -1020,9 +1015,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])) : createCommentVNode("", true)
         ]),
         createVNode(unref(HintSlot), {
-          id: unref(hasDescribedBy),
+          id: unref(hasHintId),
           class: "vv-textarea__hint"
-        }, null, 8, ["id"])
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.hint ? {
+            name: "hint",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.loading ? {
+            name: "loading",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "1"
+          } : void 0,
+          _ctx.$slots.valid ? {
+            name: "valid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "2"
+          } : void 0,
+          _ctx.$slots.invalid ? {
+            name: "invalid",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+            ]),
+            key: "3"
+          } : void 0
+        ]), 1032, ["id"])
       ], 2);
     };
   }

package/dist/components/VvTextarea/VvTextarea.umd.js

@@ -1 +1 @@
-!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?module.exports=l(require("vue"),require("@vueuse/core"),require("@iconify/vue"),require("nanoid")):"function"==typeof define&&define.amd?define(["vue","@vueuse/core","@iconify/vue","nanoid"],l):(e="undefined"!=typeof globalThis?globalThis:e||self).VvTextarea=l(e.vue,e.core,e.vue$1,e.nanoid)}(this,(function(e,l,o,t){"use strict";function n(e,l){if(e&&Object.keys(e).length&&l){if(-1===l.indexOf("."))return e[l];{const o=l.split(".");let t=e;for(let l=0,n=o.length;l<n;++l){if(null==e)return null;t=t[o[l]]}return t}}return null}function a(l){return null==(o=e.unref(l))||""===o||Array.isArray(o)&&0===o.length||!(o instanceof Date)&&"object"==typeof o&&0===Object.keys(o).length;var o}function i(e){return Array.isArray(e)?e.filter((e=>{return"string"==typeof(l=e)||l instanceof String;var l})).join(" "):e}const r={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]}};var u=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(u||{}),d=(e=>(e.before="before",e.after="after",e))(d||{}),v=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(v||{});const c=Symbol.for("volver");function s(l,o,t){return e.computed((()=>{const n={[l]:!0},a="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return a&&Array.isArray(a)&&a.forEach((e=>{e&&(n[`${l}--${e}`]=!0)})),t&&Object.keys(t.value).forEach((o=>{n[`${l}--${o}`]=e.unref(t.value[o])})),n}))}const m=e.defineComponent({name:"VvIcon",props:r,setup(l){const t=l,n=e.ref(!0),a=e.inject(c),{modifiers:i}=e.toRefs(t),r=s("vv-icon",i),u=e.computed((()=>t.provider||(null==a?void 0:a.iconsProvider))),d=e.computed((()=>{const e=t.name??"",l=`@${u.value}:${t.prefix}:${t.name}`;return o.iconExists(e)?e:o.iconExists(l)?l:(null==a?void 0:a.iconsCollections.find((l=>{const t=`@${u.value}:${l.prefix}:${e}`;if(o.iconExists(t))return t})))||e}));function v(e){const l=function(e){let l=null;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");l=(new e).window}return(l?new l.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),n=(null==l?void 0:l.innerHTML.trim())||"";l&&n&&o.addIcon(`@${u.value}:${t.prefix}:${t.name}`,{body:n,height:l.viewBox.baseVal.height,width:l.viewBox.baseVal.width})}return a&&(t.src&&!o.iconExists(`@${u.value}:${t.prefix}:${t.name}`)?(n.value=!1,a.fetchIcon(t.src).then((e=>{e&&(v(e),n.value=!0)})).catch((e=>{throw new Error(`During fetch icon: ${null==e?void 0:e.message}`)}))):t.svg&&v(t.svg)),(l,t)=>e.unref(n)?(e.openBlock(),e.createBlock(e.unref(o.Icon),e.mergeProps({key:0,class:e.unref(r)},{inline:l.inline,width:l.width,height:l.height,horizontalFlip:l.horizontalFlip,verticalFlip:l.verticalFlip,flip:l.flip,rotate:l.rotate,color:l.color,onLoad:l.onLoad,icon:e.unref(d)}),null,16,["class"])):e.createCommentVNode("",!0)}}),f={valid:Boolean,validLabel:[String,Array]},p={invalid:Boolean,invalidLabel:[String,Array]},g={loading:Boolean,loadingLabel:{type:String,default:"Loading..."}},h={disabled:Boolean},b=(Boolean,Boolean,{label:[String,Number]}),y={readonly:Boolean},B={modifiers:[String,Array]},S={hintLabel:{type:String,default:""}},x={count:{type:[Boolean,String],default:!1,validator:e=>[!0,!1,"limit","countdown"].includes(e)}},w={debounce:[Number,String]},L={icon:{type:[String,Object]},iconPosition:{type:String,default:d.before,validation:e=>Object.values(d).includes(e)}},k={tabindex:{type:[String,Number],default:0}},V={floating:Boolean},$={id:[String,Number]};u.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const N={...{...$,name:{type:String,required:!0}},...{autofocus:Boolean},...{autocomplete:{type:String,default:"off"}},...k,...h,...y,...f,...p,...S,...g,...B,...x,...w,...L,...V,...b,minlength:[String,Number],maxlength:[String,Number],placeholder:String,required:Boolean};v.button;const _={...N,modelValue:String,cols:{type:[String,Number],default:20},rows:{type:[String,Number],default:2},wrap:{type:String,default:"soft"},spellcheck:{type:[Boolean,String],default:"default"},resizable:Boolean};const I=["for"],E={class:"vv-textarea__wrapper"},P={key:0,class:"vv-textarea__input-before"},A={class:"vv-textarea__inner"},C=["id"],j={key:1,class:"vv-textarea__input-after"},q={key:2,class:"vv-textarea__limit"};return e.defineComponent({name:"VvTextarea",props:_,emits:["update:modelValue","focus","blur","keyup"],setup(o,{emit:r}){const v=o,c=e.useSlots(),f=e.ref(),{id:p,icon:g,iconPosition:h,label:b,modelValue:y,count:B,valid:S,invalid:x,loading:w,modifiers:L}=e.toRefs(v),k=(l=>e.computed((()=>String((null==l?void 0:l.value)||t.nanoid()))))(p),V=e.computed((()=>`${k.value}-hint`)),$=e.computed((()=>v.floating&&a(v.placeholder)?" ":v.placeholder)),N=function(l,o,t=0,{getter:n=(e=>e),setter:a=(e=>e)}={}){let i;return"string"==typeof t&&(t=parseInt(t)),e.computed({get:()=>n(null==l?void 0:l.value),set:e=>{i&&clearTimeout(i),i=setTimeout((()=>{o("update:modelValue",a(e))}),t)}})}(y,r,v.debounce),{hasIcon:_,hasIconBefore:z,hasIconAfter:O}=function(l,o){const t=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===d.before))),n=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===d.after))),a=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===u.left))),i=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===u.right))),r=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===u.top))),v=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===u.bottom)));return{hasIcon:e.computed((()=>"string"==typeof(null==l?void 0:l.value)?{name:null==l?void 0:l.value}:null==l?void 0:l.value)),hasIconLeft:a,hasIconRight:i,hasIconTop:r,hasIconBottom:v,hasIconBefore:t,hasIconAfter:n}}(g,h),{focused:T}=function(o,t){const{focused:n}=l.useFocus(o);return e.watch(n,(l=>{t(l?"focus":"blur",e.unref(o))})),{focused:n}}(f,r),F=l.useElementVisibility(f);e.watch(F,(e=>{e&&v.autofocus&&(T.value=!0)}));const{formatted:R}=function(l,o){const t=e.computed((()=>(e.unref(l)??"").length)),n=e.computed((()=>void 0!==(null==o?void 0:o.lowerLimit)&&t.value<(null==o?void 0:o.lowerLimit)?t.value-o.lowerLimit:void 0!==(null==o?void 0:o.upperLimit)&&t.value<(null==o?void 0:o.upperLimit)?o.upperLimit-t.value:0)),a=e.computed((()=>{if(!1===(null==o?void 0:o.mode))return"";if("limit"===(null==o?void 0:o.mode)&&(null==o?void 0:o.upperLimit))return`${t.value} / ${o.lowerLimit?`${o.lowerLimit}-`:""}${o.upperLimit}`;if("countdown"===(null==o?void 0:o.mode)){if(0===n.value)return;return n}return t.value}));return{length:t,gap:n,formatted:a}}(N,{mode:v.count,upperLimit:Number(v.maxlength),lowerLimit:Number(v.minlength)}),D=e.computed((()=>!v.disabled&&!v.readonly)),H=e.computed((()=>D.value?v.tabindex:-1)),M=e.computed((()=>!a(y))),J=e.computed((()=>!0===v.invalid||!0!==v.valid&&void 0)),{HintSlot:K,hasHint:U,hasInvalid:G}=function(o,t){const{invalid:r,valid:u,hint:d,loading:v}=t,{hintLabel:c,modelValue:s,valid:m,validLabel:f,invalid:p,invalidLabel:g,...h}=e.toRefs(o),b=n(h,"loading"),y=n(h,"loadingLabel"),B=e.computed((()=>!(!p.value||(!p.value||!r)&&!((null==g?void 0:g.value)&&Array.isArray(g.value)&&g.value.length>0)&&(!(null==g?void 0:g.value)||a(g))))),S=e.computed((()=>!!(c&&c.value||d))),x=e.computed((()=>!!(f&&f.value||u))),w=e.computed((()=>!!((null==b?void 0:b.value)&&v||(null==b?void 0:b.value)&&(null==y?void 0:y.value)))),L=e.computed((()=>S.value||x.value||B.value||w.value));return{hasInvalid:B,hasHint:S,hasValid:x,hasLoading:w,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(o){const t=e.computed((()=>{const e=l.toReactive({hintLabel:c,modelValue:s,valid:m,validLabel:f,invalid:p,invalidLabel:g,loading:b,loadingLabel:y,...o.params});return(null==p?void 0:p.value)?(null==r?void 0:r(e))||i(null==g?void 0:g.value)||(null==c?void 0:c.value):(null==m?void 0:m.value)?(null==u?void 0:u(e))||i(null==f?void 0:f.value)||(null==c?void 0:c.value):(null==b?void 0:b.value)?(null==v?void 0:v(e))||i(null==y?void 0:y.value)||(null==c?void 0:c.value):(null==d?void 0:d(e))||i(null==c?void 0:c.value)||(null==c?void 0:c.value)}));return{isVisible:L,hasInvalid:B,hasValid:x,hintContent:t}},render(){if(this.isVisible)return e.h("small",{role:this.hasInvalid?"alert":this.hasValid?"status":void 0},this.hintContent)}}}}(v,c),Q=s("vv-textarea",L,e.computed((()=>({valid:S.value,invalid:x.value,loading:w.value,disabled:v.disabled,readonly:v.readonly,"icon-before":z.value,"icon-after":O.value,floating:v.floating&&!a(v.label),dirty:M.value,focused:T.value,resizable:v.resizable})))),W=e.computed((()=>({name:v.name,placeholder:$.value,tabindex:H.value,disabled:v.disabled,readonly:v.readonly,required:v.required,autocomplete:v.autocomplete,minlength:v.minlength,maxlength:v.maxlength,cols:v.cols,rows:v.rows,wrap:v.wrap,spellcheck:v.spellcheck,"aria-invalid":J.value,"aria-describedby":!G.value&&U.value?V.value:void 0,"aria-errormessage":G.value?V.value:void 0}))),X=e.computed((()=>({valid:v.valid,invalid:v.invalid,modelValue:v.modelValue,hintLabel:v.hintLabel,maxlength:v.maxlength,minlength:v.minlength,clear:Y}))),Y=()=>{N.value=void 0};return(l,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(Q))},[e.unref(b)?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(k),class:"vv-textarea__label"},e.toDisplayString(e.unref(b)),9,I)):e.createCommentVNode("",!0),e.createElementVNode("div",E,[l.$slots.before?(e.openBlock(),e.createElementBlock("div",P,[e.renderSlot(l.$slots,"before",e.normalizeProps(e.guardReactiveProps(e.unref(X))))])):e.createCommentVNode("",!0),e.createElementVNode("div",A,[e.unref(z)?(e.openBlock(),e.createBlock(m,e.mergeProps({key:0,class:"vv-textarea__icon"},e.unref(_)),null,16)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("textarea",e.mergeProps({id:e.unref(k),ref_key:"textarea",ref:f,"onUpdate:modelValue":o[0]||(o[0]=l=>e.isRef(N)?N.value=l:null)},e.unref(W),{onKeyup:o[1]||(o[1]=e=>r("keyup",e))}),null,16,C),[[e.vModelText,e.unref(N)]]),e.unref(O)?(e.openBlock(),e.createBlock(m,e.mergeProps({key:1,class:"vv-textarea__icon vv-textarea__icon-after"},e.unref(_)),null,16)):e.createCommentVNode("",!0)]),l.$slots.after?(e.openBlock(),e.createElementBlock("div",j,[e.renderSlot(l.$slots,"after",e.normalizeProps(e.guardReactiveProps(e.unref(X))))])):e.createCommentVNode("",!0),e.unref(B)?(e.openBlock(),e.createElementBlock("span",q,[e.renderSlot(l.$slots,"count",e.normalizeProps(e.guardReactiveProps(e.unref(X))),(()=>[e.createTextVNode(e.toDisplayString(e.unref(R)),1)]))])):e.createCommentVNode("",!0)]),e.createVNode(e.unref(K),{id:e.unref(V),class:"vv-textarea__hint"},null,8,["id"])],2))}})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("@iconify/vue"),require("nanoid"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue","nanoid","@vueuse/core"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvTextarea=t(e.vue,e.vue$1,e.nanoid,e.core)}(this,(function(e,t,o,l){"use strict";function a(t){return null==(o=e.unref(t))||""===o||Array.isArray(o)&&0===o.length||!(o instanceof Date)&&"object"==typeof o&&0===Object.keys(o).length;var o}function n(e){return Array.isArray(e)?e.filter((e=>{return"string"==typeof(t=e)||t instanceof String;var t})).join(" "):e}const i={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]}};var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),u=(e=>(e.before="before",e.after="after",e))(u||{}),d=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(d||{});const s=Symbol.for("volver");function c(t,o,l){return e.computed((()=>{const a={[t]:!0},n="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return n&&Array.isArray(n)&&n.forEach((e=>{e&&(a[`${t}--${e}`]=!0)})),l&&Object.keys(l.value).forEach((o=>{a[`${t}--${o}`]=e.unref(l.value[o])})),a}))}const v=e.defineComponent({name:"VvIcon",props:i,setup(o){const l=o,a=e.computed((()=>"string"==typeof l.rotate?parseFloat(l.rotate):l.rotate)),n=e.ref(!0),i=e.inject(s),{modifiers:r}=e.toRefs(l),u=c("vv-icon",r),d=e.computed((()=>l.provider||(null==i?void 0:i.iconsProvider))),v=e.computed((()=>{const e=l.name??"",o=`@${d.value}:${l.prefix}:${e}`;if(t.iconExists(o))return o;const a=null==i?void 0:i.iconsCollections.find((o=>{const l=`@${d.value}:${o.prefix}:${e}`;return t.iconExists(l)}));return a?`@${d.value}:${a.prefix}:${e}`:e}));function m(e){const o=function(e){let t;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");t=(new e).window}return(t?new t.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),a=(null==o?void 0:o.innerHTML.trim())||"";o&&a&&t.addIcon(`@${d.value}:${l.prefix}:${l.name}`,{body:a,height:o.viewBox.baseVal.height,width:o.viewBox.baseVal.width})}return i&&l.src&&!t.iconExists(`@${d.value}:${l.prefix}:${l.name}`)&&(n.value=!1,i.fetchIcon(l.src).then((e=>{e&&(m(e),n.value=!0)})).catch((e=>{throw new Error(`Error during fetch icon: ${null==e?void 0:e.message}`)}))),l.svg&&m(l.svg),(o,l)=>e.unref(n)?(e.openBlock(),e.createBlock(e.unref(t.Icon),e.mergeProps({key:0,class:e.unref(u)},{inline:o.inline,width:o.width,height:o.height,horizontalFlip:o.horizontalFlip,verticalFlip:o.verticalFlip,flip:o.flip,rotate:e.unref(a),color:o.color,onLoad:o.onLoad,icon:e.unref(v)}),null,16,["class"])):e.createCommentVNode("",!0)}}),m={valid:Boolean,validLabel:[String,Array]},p={invalid:Boolean,invalidLabel:[String,Array]},f={loading:Boolean,loadingLabel:{type:String,default:"Loading..."}},h={disabled:Boolean},g=(Boolean,Boolean,{label:[String,Number]}),b={readonly:Boolean},S={modifiers:[String,Array]},y={hintLabel:{type:String,default:""}},B={count:{type:[Boolean,String],default:!1,validator:e=>[!0,!1,"limit","countdown"].includes(e)}},L={debounce:[Number,String]},$={icon:{type:[String,Object]},iconPosition:{type:String,default:u.before,validation:e=>Object.values(u).includes(e)}},x={tabindex:{type:[String,Number],default:0}},w={floating:Boolean},k={id:[String,Number]};r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const V={...{...k,name:{type:String,required:!0}},...{autofocus:Boolean},...{autocomplete:{type:String,default:"off"}},...x,...h,...b,...m,...p,...y,...f,...S,...B,...L,...$,...w,...g,minlength:[String,Number],maxlength:[String,Number],placeholder:String,required:Boolean};d.button;const N={...V,modelValue:String,cols:{type:[String,Number],default:20},rows:{type:[String,Number],default:2},wrap:{type:String,default:"soft"},spellcheck:{type:[Boolean,String],default:"default"},resizable:Boolean};const P=["for"],O={class:"vv-textarea__wrapper"},_={key:0,class:"vv-textarea__input-before"},I={class:"vv-textarea__inner"},C=["id"],E={key:1,class:"vv-textarea__input-after"},z={key:2,class:"vv-textarea__limit"};return e.defineComponent({name:"VvTextarea",props:N,emits:["update:modelValue","focus","blur","keyup"],setup(t,{emit:i}){const d=t,s=e.useSlots(),m=e.ref(),{id:p,icon:f,iconPosition:h,label:g,modelValue:b,count:S,valid:y,invalid:B,loading:L,modifiers:$}=e.toRefs(d),x=(t=>e.computed((()=>String((null==t?void 0:t.value)||o.nanoid()))))(p),w=e.computed((()=>`${x.value}-hint`)),k=e.computed((()=>d.floating&&a(d.placeholder)?" ":d.placeholder)),V=function(t,o,l=0,{getter:a=(e=>e),setter:n=(e=>e)}={}){let i;return"string"==typeof l&&(l=parseInt(l)),e.computed({get:()=>a(null==t?void 0:t.value),set:e=>{i&&clearTimeout(i),i=setTimeout((()=>{o("update:modelValue",n(e))}),l)}})}(b,i,d.debounce),{hasIcon:N,hasIconBefore:A,hasIconAfter:q}=function(t,o){const l=e.computed((()=>Boolean((null==t?void 0:t.value)&&o.value===u.before))),a=e.computed((()=>Boolean((null==t?void 0:t.value)&&o.value===u.after))),n=e.computed((()=>Boolean((null==t?void 0:t.value)&&o.value===r.left))),i=e.computed((()=>Boolean((null==t?void 0:t.value)&&o.value===r.right))),d=e.computed((()=>Boolean((null==t?void 0:t.value)&&o.value===r.top))),s=e.computed((()=>Boolean((null==t?void 0:t.value)&&o.value===r.bottom)));return{hasIcon:e.computed((()=>"string"==typeof(null==t?void 0:t.value)?{name:null==t?void 0:t.value}:null==t?void 0:t.value)),hasIconLeft:n,hasIconRight:i,hasIconTop:d,hasIconBottom:s,hasIconBefore:l,hasIconAfter:a}}(f,h),{focused:R}=function(t,o){const{focused:a}=l.useFocus(t);return e.watch(a,(l=>{o(l?"focus":"blur",e.unref(t))})),{focused:a}}(m,i),F=l.useElementVisibility(m);e.watch(F,(e=>{e&&d.autofocus&&(R.value=!0)}));const{formatted:T}=function(t,o){const l=e.computed((()=>(e.unref(t)??"").length)),a=e.computed((()=>void 0!==(null==o?void 0:o.lowerLimit)&&l.value<(null==o?void 0:o.lowerLimit)?l.value-o.lowerLimit:void 0!==(null==o?void 0:o.upperLimit)&&l.value<(null==o?void 0:o.upperLimit)?o.upperLimit-l.value:0)),n=e.computed((()=>{if(!1===(null==o?void 0:o.mode))return"";if("limit"===(null==o?void 0:o.mode)&&(null==o?void 0:o.upperLimit))return`${l.value} / ${o.lowerLimit?`${o.lowerLimit}-`:""}${o.upperLimit}`;if("countdown"===(null==o?void 0:o.mode)){if(0===a.value)return;return a}return l.value}));return{length:l,gap:a,formatted:n}}(V,{mode:d.count,upperLimit:Number(d.maxlength),lowerLimit:Number(d.minlength)}),j=e.computed((()=>!d.disabled&&!d.readonly)),D=e.computed((()=>j.value?d.tabindex:-1)),H=e.computed((()=>!a(b))),M=e.computed((()=>!0===d.invalid||!0!==d.valid&&void 0)),{HintSlot:J,hasHintLabelOrSlot:K,hasInvalidLabelOrSlot:U,hintSlotScope:G}=function(t,o){const l=e.computed((()=>n(t.invalidLabel))),a=e.computed((()=>n(t.validLabel))),i=e.computed((()=>t.loadingLabel)),r=e.computed((()=>t.hintLabel)),u=e.computed((()=>Boolean(t.loading&&(o.loading||i.value)))),d=e.computed((()=>!u.value&&Boolean(t.invalid&&(o.invalid||l.value)))),s=e.computed((()=>!u.value&&!d.value&&Boolean(t.valid&&(o.valid||a.value)))),c=e.computed((()=>!u.value&&!d.value&&!s.value&&Boolean(o.hint||r.value))),v=e.computed((()=>d.value||s.value||u.value||c.value)),m=e.computed((()=>({modelValue:t.modelValue,valid:t.valid,invalid:t.invalid,loading:t.loading}))),p=e.defineComponent({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup:()=>({isVisible:v,invalidLabel:l,validLabel:a,loadingLabel:i,hintLabel:r,hasInvalidLabelOrSlot:d,hasValidLabelOrSlot:s,hasLoadingLabelOrSlot:u,hasHintLabelOrSlot:c}),render(){var t,o,l,a,n,i,r,u;if(this.isVisible){let d;return this.hasInvalidLabelOrSlot&&(d="alert"),this.hasValidLabelOrSlot&&(d="status"),this.hasLoadingLabelOrSlot?e.h(this.tag,{role:d},(null==(o=(t=this.$slots).loading)?void 0:o.call(t))??this.loadingLabel):this.hasInvalidLabelOrSlot?e.h(this.tag,{role:d},(null==(a=(l=this.$slots).invalid)?void 0:a.call(l))??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?e.h(this.tag,{role:d},(null==(i=(n=this.$slots).valid)?void 0:i.call(n))??this.validLabel):e.h(this.tag,{role:d},(null==(u=(r=this.$slots).hint)?void 0:u.call(r))??this.$slots.hint??this.hintLabel)}return null}});return{hasInvalidLabelOrSlot:d,hasHintLabelOrSlot:c,hasValidLabelOrSlot:s,hasLoadingLabelOrSlot:u,hintSlotScope:m,HintSlot:p}}(d,s),Q=c("vv-textarea",$,e.computed((()=>({valid:y.value,invalid:B.value,loading:L.value,disabled:d.disabled,readonly:d.readonly,"icon-before":A.value,"icon-after":q.value,floating:d.floating&&!a(d.label),dirty:H.value,focused:R.value,resizable:d.resizable})))),W=e.computed((()=>({name:d.name,placeholder:k.value,tabindex:D.value,disabled:d.disabled,readonly:d.readonly,required:d.required,autocomplete:d.autocomplete,minlength:d.minlength,maxlength:d.maxlength,cols:d.cols,rows:d.rows,wrap:d.wrap,spellcheck:d.spellcheck,"aria-invalid":M.value,"aria-describedby":K.value?w.value:void 0,"aria-errormessage":U.value?w.value:void 0}))),X=e.computed((()=>({valid:d.valid,invalid:d.invalid,modelValue:d.modelValue,hintLabel:d.hintLabel,maxlength:d.maxlength,minlength:d.minlength,clear:Y}))),Y=()=>{V.value=void 0};return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(Q))},[e.unref(g)?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(x),class:"vv-textarea__label"},e.toDisplayString(e.unref(g)),9,P)):e.createCommentVNode("",!0),e.createElementVNode("div",O,[t.$slots.before?(e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(t.$slots,"before",e.normalizeProps(e.guardReactiveProps(e.unref(X))))])):e.createCommentVNode("",!0),e.createElementVNode("div",I,[e.unref(A)?(e.openBlock(),e.createBlock(v,e.mergeProps({key:0,class:"vv-textarea__icon"},e.unref(N)),null,16)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("textarea",e.mergeProps({id:e.unref(x),ref_key:"textarea",ref:m,"onUpdate:modelValue":o[0]||(o[0]=t=>e.isRef(V)?V.value=t:null)},e.unref(W),{onKeyup:o[1]||(o[1]=e=>i("keyup",e))}),null,16,C),[[e.vModelText,e.unref(V)]]),e.unref(q)?(e.openBlock(),e.createBlock(v,e.mergeProps({key:1,class:"vv-textarea__icon vv-textarea__icon-after"},e.unref(N)),null,16)):e.createCommentVNode("",!0)]),t.$slots.after?(e.openBlock(),e.createElementBlock("div",E,[e.renderSlot(t.$slots,"after",e.normalizeProps(e.guardReactiveProps(e.unref(X))))])):e.createCommentVNode("",!0),e.unref(S)?(e.openBlock(),e.createElementBlock("span",z,[e.renderSlot(t.$slots,"count",e.normalizeProps(e.guardReactiveProps(e.unref(X))),(()=>[e.createTextVNode(e.toDisplayString(e.unref(T)),1)]))])):e.createCommentVNode("",!0)]),e.createVNode(e.unref(J),{id:e.unref(w),class:"vv-textarea__hint"},e.createSlots({_:2},[t.$slots.hint?{name:"hint",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"hint",e.normalizeProps(e.guardReactiveProps(e.unref(G))))])),key:"0"}:void 0,t.$slots.loading?{name:"loading",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"loading",e.normalizeProps(e.guardReactiveProps(e.unref(G))))])),key:"1"}:void 0,t.$slots.valid?{name:"valid",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"valid",e.normalizeProps(e.guardReactiveProps(e.unref(G))))])),key:"2"}:void 0,t.$slots.invalid?{name:"invalid",fn:e.withCtx((()=>[e.renderSlot(t.$slots,"invalid",e.normalizeProps(e.guardReactiveProps(e.unref(G))))])),key:"3"}:void 0]),1032,["id"])],2))}})}));

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

@@ -186,6 +186,30 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         minlength: string | number | undefined;
         clear: () => void;
     }) => any;
+    hint: (_: {
+        modelValue: any;
+        valid: boolean;
+        invalid: boolean;
+        loading: boolean;
+    }) => any;
+    loading: (_: {
+        modelValue: any;
+        valid: boolean;
+        invalid: boolean;
+        loading: boolean;
+    }) => any;
+    valid: (_: {
+        modelValue: any;
+        valid: boolean;
+        invalid: boolean;
+        loading: boolean;
+    }) => any;
+    invalid: (_: {
+        modelValue: any;
+        valid: boolean;
+        invalid: boolean;
+        loading: boolean;
+    }) => any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/common/HintSlot.d.ts

@@ -1,5 +1,5 @@
-import type { Component, ExtractPropTypes, Slots, Ref } from 'vue';
-interface HintSlotProps {
+import type { ExtractPropTypes, Slots } from 'vue';
+export type HintSlotProps = Readonly<ExtractPropTypes<{
     hintLabel: {
         type: StringConstructor;
         default: '';
@@ -10,22 +10,48 @@ interface HintSlotProps {
     validLabel: (StringConstructor | ArrayConstructor)[];
     invalid: BooleanConstructor;
     invalidLabel: (StringConstructor | ArrayConstructor)[];
-}
-interface HintSlotPropsWithLoading extends HintSlotProps {
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
-}
+}>>;
 /**
  * Return a vue component (HintSlot) to render and manage hint, errors, valid, loading state and messages
- * @param {Readonly<ExtractPropTypes<HintSlotProps | HintSlotPropsWithLoading>>} parentProps vue props
+ * @param {HintSlotProps} parentProps vue props
  * @param {Slots} parentSlots vue slots
  * @returns {Component} vue component
  */
-export declare function HintSlotFactory(parentProps: Readonly<ExtractPropTypes<HintSlotProps | HintSlotPropsWithLoading>>, parentSlots: Slots): {
-    HintSlot: Component;
-    hasHint: Ref<boolean>;
-    hasInvalid: Ref<boolean>;
-    hasValid: Ref<boolean>;
-    hasLoading: Ref<boolean>;
+export declare function HintSlotFactory(props: HintSlotProps, slots: Slots): {
+    hasInvalidLabelOrSlot: globalThis.ComputedRef<boolean>;
+    hasHintLabelOrSlot: globalThis.ComputedRef<boolean>;
+    hasValidLabelOrSlot: globalThis.ComputedRef<boolean>;
+    hasLoadingLabelOrSlot: globalThis.ComputedRef<boolean>;
+    hintSlotScope: globalThis.ComputedRef<{
+        modelValue: any;
+        valid: boolean;
+        invalid: boolean;
+        loading: boolean;
+    }>;
+    HintSlot: import("vue").DefineComponent<{
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+    }, {
+        isVisible: globalThis.ComputedRef<boolean>;
+        invalidLabel: globalThis.ComputedRef<string | undefined>;
+        validLabel: globalThis.ComputedRef<string | undefined>;
+        loadingLabel: globalThis.ComputedRef<string | undefined>;
+        hintLabel: globalThis.ComputedRef<string>;
+        hasInvalidLabelOrSlot: globalThis.ComputedRef<boolean>;
+        hasValidLabelOrSlot: globalThis.ComputedRef<boolean>;
+        hasLoadingLabelOrSlot: globalThis.ComputedRef<boolean>;
+        hasHintLabelOrSlot: globalThis.ComputedRef<boolean>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>>, {
+        tag: string;
+    }>;
 };
 export default HintSlotFactory;