@volverjs/ui-vue 0.0.5 → 0.0.6-beta.15

package/dist/components/VvSelect/VvSelect.es.js

@@ -1,7 +1,7 @@
-import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, h, watch, useSlots, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withDirectives, isRef, Fragment, renderList, vModelSelect, createVNode } from "vue";
+import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, h, watch, useSlots, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withDirectives, isRef, Fragment, renderList, vModelSelect, createVNode, createSlots, withCtx } from "vue";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
-import { toReactive, useFocus, useElementVisibility } from "@vueuse/core";
 import { nanoid } from "nanoid";
+import { useFocus, useElementVisibility } from "@vueuse/core";
 const VvIconProps = {
   /**
    * Color
@@ -90,7 +90,7 @@ const VvIconProps = {
   svg: String,
   /**
    * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
-   * @values string | Array<string>
+   * @values string | string[]
    */
   modifiers: {
     type: [String, Array]
@@ -167,6 +167,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);
@@ -175,25 +181,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;
@@ -224,12 +229,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,
@@ -241,7 +247,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)
@@ -249,136 +255,120 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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;
-  }
-}
 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 hasInvalidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && Boolean(props.invalid && (slots.invalid || invalidLabel.value))
   );
-  const hasValid = computed(
-    () => !!(validLabel && validLabel.value || validSlot)
+  const hasValidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.valid && (slots.valid || validLabel.value))
   );
-  const hasLoading = computed(
-    () => !!((loading == null ? void 0 : loading.value) && loadingSlot || (loading == null ? void 0 : loading.value) && (loadingLabel == null ? void 0 : loadingLabel.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(
+            this.tag,
+            {
+              role
+            },
+            ((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
+          );
+        }
+        if (this.hasInvalidLabelOrSlot) {
           return h(
-            "small",
+            this.tag,
             {
-              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
+              role
             },
-            this.hintContent
+            ((_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 LinkProps = {
@@ -618,11 +608,11 @@ const IdProps = {
     default: false
   },
   /**
-   * Close dropdown on click outside
+   * Keep open dropdown on click outside
    */
-  autoClose: {
+  keepOpen: {
     type: Boolean,
-    default: true
+    default: false
   },
   /**
    * Autofocus first item on dropdown open
@@ -775,7 +765,9 @@ function useOptions(props) {
   const getOptionLabel = (option) => {
     if (typeof option !== "object" && option !== null)
       return option;
-    return typeof labelKey.value === "function" ? labelKey.value(option) : option[labelKey.value];
+    return String(
+      typeof labelKey.value === "function" ? labelKey.value(option) : option[labelKey.value]
+    );
   };
   const getOptionValue = (option) => {
     if (typeof option !== "object" && option !== null)
@@ -827,7 +819,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const slots = useSlots();
     const select = ref();
-    const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots);
+    const {
+      HintSlot,
+      hasHintLabelOrSlot,
+      hasInvalidLabelOrSlot,
+      hintSlotScope
+    } = HintSlotFactory(props, slots);
     const {
       id,
       modifiers,
@@ -842,7 +839,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       multiple
     } = toRefs(props);
     const hasId = useUniqueId(id);
-    const hasDescribedBy = computed(() => `${hasId.value}-hint`);
+    const hasHintId = computed(() => `${hasId.value}-hint`);
     const { focused } = useComponentFocus(select, emit);
     const isVisible = useElementVisibility(select);
     watch(isVisible, (newValue) => {
@@ -895,8 +892,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         autocomplete: props.autocomplete,
         multiple: props.multiple,
         "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(() => ({
@@ -989,9 +986,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])) : createCommentVNode("", true)
         ]),
         createVNode(unref(HintSlot), {
-          id: unref(hasDescribedBy),
+          id: unref(hasHintId),
           class: "vv-select__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/VvSelect/VvSelect.umd.js

@@ -1 +1 @@
-!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?module.exports=l(require("vue"),require("@iconify/vue"),require("@vueuse/core"),require("nanoid")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue","@vueuse/core","nanoid"],l):(e="undefined"!=typeof globalThis?globalThis:e||self).VvSelect=l(e.vue,e.vue$1,e.core,e.nanoid)}(this,(function(e,l,o,n){"use strict";const t={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 a=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(a||{}),i=(e=>(e.before="before",e.after="after",e))(i||{}),r=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(r||{});const u=Symbol.for("volver");function d(l,o,n){return e.computed((()=>{const t={[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&&(t[`${l}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((o=>{t[`${l}--${o}`]=e.unref(n.value[o])})),t}))}const c=e.defineComponent({name:"VvIcon",props:t,setup(o){const n=o,t=e.ref(!0),a=e.inject(u),{modifiers:i}=e.toRefs(n),r=d("vv-icon",i),c=e.computed((()=>n.provider||(null==a?void 0:a.iconsProvider))),s=e.computed((()=>{const e=n.name??"",o=`@${c.value}:${n.prefix}:${n.name}`;return l.iconExists(e)?e:l.iconExists(o)?o:(null==a?void 0:a.iconsCollections.find((o=>{const n=`@${c.value}:${o.prefix}:${e}`;if(l.iconExists(n))return n})))||e}));function v(e){const o=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),t=(null==o?void 0:o.innerHTML.trim())||"";o&&t&&l.addIcon(`@${c.value}:${n.prefix}:${n.name}`,{body:t,height:o.viewBox.baseVal.height,width:o.viewBox.baseVal.width})}return a&&(n.src&&!l.iconExists(`@${c.value}:${n.prefix}:${n.name}`)?(t.value=!1,a.fetchIcon(n.src).then((e=>{e&&(v(e),t.value=!0)})).catch((e=>{throw new Error(`During fetch icon: ${null==e?void 0:e.message}`)}))):n.svg&&v(n.svg)),(o,n)=>e.unref(t)?(e.openBlock(),e.createBlock(e.unref(l.Icon),e.mergeProps({key:0,class:e.unref(r)},{inline:o.inline,width:o.width,height:o.height,horizontalFlip:o.horizontalFlip,verticalFlip:o.verticalFlip,flip:o.flip,rotate:o.rotate,color:o.color,onLoad:o.onLoad,icon:e.unref(s)}),null,16,["class"])):e.createCommentVNode("",!0)}});function s(e,l){if(e&&Object.keys(e).length&&l){if(-1===l.indexOf("."))return e[l];{const o=l.split(".");let n=e;for(let l=0,t=o.length;l<t;++l){if(null==e)return null;n=n[o[l]]}return n}}return null}function v(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 p(e){return Array.isArray(e)?e.filter((e=>{return"string"==typeof(l=e)||l instanceof String;var l})).join(" "):e}const f={valid:Boolean,validLabel:[String,Array]},m={invalid:Boolean,invalidLabel:[String,Array]},g={loading:Boolean,loadingLabel:{type:String,default:"Loading..."}},b={disabled:Boolean},y=(Boolean,Boolean,{label:[String,Number]}),h={readonly:Boolean},B={modifiers:[String,Array]},S={hintLabel:{type:String,default:""}},k={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}},V={icon:{type:[String,Object]},iconPosition:{type:String,default:i.before,validation:e=>Object.values(i).includes(e)}},$={tabindex:{type:[String,Number],default:0}},L={floating:Boolean},w={unselectable:{type:Boolean,default:!0}},E={id:[String,Number]};a.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const N={...E,name:{type:String,required:!0}},O={autofocus:Boolean},x={autocomplete:{type:String,default:"off"}};r.button;const A={...N,...O,...x,...$,...f,...m,...S,...g,...b,...h,...B,...k,...V,...L,...w,...y,multiple:Boolean,required:Boolean,size:[String,Number],modelValue:{type:[String,Number,Boolean,Object,Array],default:void 0},placeholder:String};const I=["for"],_={class:"vv-select__wrapper"},j={key:0,class:"vv-select__input-before"},F={class:"vv-select__inner"},C=["id"],P=["disabled","hidden"],D=["disabled","value"],q=["disabled","label"],z=["disabled","value"],R={key:1,class:"vv-select__input-after"};return e.defineComponent({name:"VvSelect",props:A,emits:["update:modelValue","focus","blur"],setup(l,{emit:t}){const r=l,u=e.useSlots(),f=e.ref(),{HintSlot:m,hasHint:g,hasInvalid:b}=function(l,n){const{invalid:t,valid:a,hint:i,loading:r}=n,{hintLabel:u,modelValue:d,valid:c,validLabel:f,invalid:m,invalidLabel:g,...b}=e.toRefs(l),y=s(b,"loading"),h=s(b,"loadingLabel"),B=e.computed((()=>!(!m.value||(!m.value||!t)&&!((null==g?void 0:g.value)&&Array.isArray(g.value)&&g.value.length>0)&&(!(null==g?void 0:g.value)||v(g))))),S=e.computed((()=>!!(u&&u.value||i))),k=e.computed((()=>!!(f&&f.value||a))),V=e.computed((()=>!!((null==y?void 0:y.value)&&r||(null==y?void 0:y.value)&&(null==h?void 0:h.value)))),$=e.computed((()=>S.value||k.value||B.value||V.value));return{hasInvalid:B,hasHint:S,hasValid:k,hasLoading:V,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(l){const n=e.computed((()=>{const e=o.toReactive({hintLabel:u,modelValue:d,valid:c,validLabel:f,invalid:m,invalidLabel:g,loading:y,loadingLabel:h,...l.params});return(null==m?void 0:m.value)?(null==t?void 0:t(e))||p(null==g?void 0:g.value)||(null==u?void 0:u.value):(null==c?void 0:c.value)?(null==a?void 0:a(e))||p(null==f?void 0:f.value)||(null==u?void 0:u.value):(null==y?void 0:y.value)?(null==r?void 0:r(e))||p(null==h?void 0:h.value)||(null==u?void 0:u.value):(null==i?void 0:i(e))||p(null==u?void 0:u.value)||(null==u?void 0:u.value)}));return{isVisible:$,hasInvalid:B,hasValid:k,hintContent:n}},render(){if(this.isVisible)return e.h("small",{role:this.hasInvalid?"alert":this.hasValid?"status":void 0},this.hintContent)}}}}(r,u),{id:y,modifiers:h,disabled:B,readonly:S,loading:k,icon:V,iconPosition:$,invalid:L,valid:w,floating:E,multiple:N}=e.toRefs(r),O=(l=>e.computed((()=>String((null==l?void 0:l.value)||n.nanoid()))))(y),x=e.computed((()=>`${O.value}-hint`)),{focused:A}=function(l,n){const{focused:t}=o.useFocus(l);return e.watch(t,(o=>{n(o?"focus":"blur",e.unref(l))})),{focused:t}}(f,t),H=o.useElementVisibility(f);e.watch(H,(e=>{e&&r.autofocus&&(A.value=!0)}));const{hasIcon:K,hasIconBefore:M,hasIconAfter:T}=function(l,o){const n=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===i.before))),t=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===i.after))),r=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===a.left))),u=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===a.right))),d=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===a.top))),c=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===a.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:r,hasIconRight:u,hasIconTop:d,hasIconBottom:c,hasIconBefore:n,hasIconAfter:t}}(V,$),G=e.computed((()=>!v(r.modelValue))),J=e.computed((()=>r.disabled||r.readonly)),U=e.computed((()=>J.value?-1:r.tabindex)),Q=e.computed((()=>!0===r.invalid||!0!==r.valid&&void 0)),W=d("vv-select",h,e.computed((()=>({valid:w.value,invalid:L.value,loading:k.value,disabled:B.value,readonly:S.value,"icon-before":M.value,"icon-after":T.value,dirty:G.value,focus:A.value,floating:E.value,multiple:N.value})))),X=e.computed((()=>({name:r.name,tabindex:U.value,disabled:J.value,required:r.required,size:r.size,autocomplete:r.autocomplete,multiple:r.multiple,"aria-invalid":Q.value,"aria-describedby":!b.value&&g.value?x.value:void 0,"aria-errormessage":b.value?x.value:void 0}))),Y=e.computed((()=>({valid:r.valid,invalid:r.invalid,modelValue:r.modelValue}))),{getOptionLabel:Z,getOptionValue:ee,getOptionDisabled:le,getOptionGrouped:oe}=function(l){const{options:o,labelKey:n,valueKey:t,disabledKey:a}=e.toRefs(l);return{options:o,getOptionLabel:e=>"object"!=typeof e&&null!==e?e:"function"==typeof n.value?n.value(e):e[n.value],getOptionValue:e=>"object"!=typeof e&&null!==e?e:"function"==typeof t.value?t.value(e):e[t.value],getOptionDisabled:e=>("object"==typeof e||null===e)&&("function"==typeof a.value?a.value(e):e[a.value]),getOptionGrouped:e=>"object"!=typeof e&&null!==e?[]:e.options||[]}}(r),ne=e.computed({get:()=>r.modelValue,set:e=>{Array.isArray(e)&&(e=e.filter((e=>void 0!==e))),t("update:modelValue",e)}}),te=e=>"string"!=typeof e&&(e&&e.options&&e.options.length>0);return(l,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(W))},[l.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(O)},e.toDisplayString(l.label),9,I)):e.createCommentVNode("",!0),e.createElementVNode("div",_,[l.$slots.before?(e.openBlock(),e.createElementBlock("div",j,[e.renderSlot(l.$slots,"before",e.normalizeProps(e.guardReactiveProps(e.unref(Y))))])):e.createCommentVNode("",!0),e.createElementVNode("div",F,[e.unref(M)?(e.openBlock(),e.createBlock(c,e.mergeProps({key:0,class:"vv-select__icon"},e.unref(K)),null,16)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("select",e.mergeProps({id:e.unref(O),ref_key:"select",ref:f,"onUpdate:modelValue":o[0]||(o[0]=l=>e.isRef(ne)?ne.value=l:null)},e.unref(X)),[l.placeholder?(e.openBlock(),e.createElementBlock("option",{key:0,value:void 0,disabled:!l.unselectable,hidden:!l.unselectable},e.toDisplayString(l.placeholder),9,P)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,((l,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[te(l)?(e.openBlock(),e.createElementBlock("optgroup",{key:`group-${o}`,disabled:e.unref(le)(l),label:e.unref(Z)(l)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(oe)(l),((l,n)=>(e.openBlock(),e.createElementBlock("option",{key:`group-${o}-item-${n}`,disabled:e.unref(le)(l),value:e.unref(ee)(l)},e.toDisplayString(e.unref(Z)(l)),9,z)))),128))],8,q)):(e.openBlock(),e.createElementBlock("option",{key:o,disabled:e.unref(le)(l),value:e.unref(ee)(l)},e.toDisplayString(e.unref(Z)(l)),9,D))],64)))),256))],16,C),[[e.vModelSelect,e.unref(ne)]]),e.unref(T)?(e.openBlock(),e.createBlock(c,e.mergeProps({key:1,class:"vv-select__icon vv-select__icon-after"},e.unref(K)),null,16)):e.createCommentVNode("",!0)]),l.$slots.after?(e.openBlock(),e.createElementBlock("div",R,[e.renderSlot(l.$slots,"after",e.normalizeProps(e.guardReactiveProps(e.unref(Y))))])):e.createCommentVNode("",!0)]),e.createVNode(e.unref(m),{id:e.unref(x),class:"vv-select__hint"},null,8,["id"])],2))}})}));
+!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?module.exports=l(require("vue"),require("@iconify/vue"),require("nanoid"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue","nanoid","@vueuse/core"],l):(e="undefined"!=typeof globalThis?globalThis:e||self).VvSelect=l(e.vue,e.vue$1,e.nanoid,e.core)}(this,(function(e,l,o,t){"use strict";const n={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 a=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(a||{}),i=(e=>(e.before="before",e.after="after",e))(i||{}),r=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(r||{});const u=Symbol.for("volver");function d(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 s=e.defineComponent({name:"VvIcon",props:n,setup(o){const t=o,n=e.computed((()=>"string"==typeof t.rotate?parseFloat(t.rotate):t.rotate)),a=e.ref(!0),i=e.inject(u),{modifiers:r}=e.toRefs(t),s=d("vv-icon",r),c=e.computed((()=>t.provider||(null==i?void 0:i.iconsProvider))),v=e.computed((()=>{const e=t.name??"",o=`@${c.value}:${t.prefix}:${e}`;if(l.iconExists(o))return o;const n=null==i?void 0:i.iconsCollections.find((o=>{const t=`@${c.value}:${o.prefix}:${e}`;return l.iconExists(t)}));return n?`@${c.value}:${n.prefix}:${e}`:e}));function p(e){const o=function(e){let l;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==o?void 0:o.innerHTML.trim())||"";o&&n&&l.addIcon(`@${c.value}:${t.prefix}:${t.name}`,{body:n,height:o.viewBox.baseVal.height,width:o.viewBox.baseVal.width})}return i&&t.src&&!l.iconExists(`@${c.value}:${t.prefix}:${t.name}`)&&(a.value=!1,i.fetchIcon(t.src).then((e=>{e&&(p(e),a.value=!0)})).catch((e=>{throw new Error(`Error during fetch icon: ${null==e?void 0:e.message}`)}))),t.svg&&p(t.svg),(o,t)=>e.unref(a)?(e.openBlock(),e.createBlock(e.unref(l.Icon),e.mergeProps({key:0,class:e.unref(s)},{inline:o.inline,width:o.width,height:o.height,horizontalFlip:o.horizontalFlip,verticalFlip:o.verticalFlip,flip:o.flip,rotate:e.unref(n),color:o.color,onLoad:o.onLoad,icon:e.unref(v)}),null,16,["class"])):e.createCommentVNode("",!0)}});function c(e){return Array.isArray(e)?e.filter((e=>{return"string"==typeof(l=e)||l instanceof String;var l})).join(" "):e}const v={valid:Boolean,validLabel:[String,Array]},p={invalid:Boolean,invalidLabel:[String,Array]},f={loading:Boolean,loadingLabel:{type:String,default:"Loading..."}},m={disabled:Boolean},g=(Boolean,Boolean,{label:[String,Number]}),b={readonly:Boolean},h={modifiers:[String,Array]},y={hintLabel:{type:String,default:""}},S={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}},B={icon:{type:[String,Object]},iconPosition:{type:String,default:i.before,validation:e=>Object.values(i).includes(e)}},k={tabindex:{type:[String,Number],default:0}},L={floating:Boolean},$={unselectable:{type:Boolean,default:!0}},V={id:[String,Number]};a.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const O={...V,name:{type:String,required:!0}},w={autofocus:Boolean},E={autocomplete:{type:String,default:"off"}};r.button;const x={...O,...w,...E,...k,...v,...p,...y,...f,...m,...b,...h,...S,...B,...L,...$,...g,multiple:Boolean,required:Boolean,size:[String,Number],modelValue:{type:[String,Number,Boolean,Object,Array],default:void 0},placeholder:String};const P=["for"],I={class:"vv-select__wrapper"},N={key:0,class:"vv-select__input-before"},_={class:"vv-select__inner"},A=["id"],C=["disabled","hidden"],F=["disabled","value"],j=["disabled","label"],z=["disabled","value"],q={key:1,class:"vv-select__input-after"};return e.defineComponent({name:"VvSelect",props:x,emits:["update:modelValue","focus","blur"],setup(l,{emit:n}){const r=l,u=e.useSlots(),v=e.ref(),{HintSlot:p,hasHintLabelOrSlot:f,hasInvalidLabelOrSlot:m,hintSlotScope:g}=function(l,o){const t=e.computed((()=>c(l.invalidLabel))),n=e.computed((()=>c(l.validLabel))),a=e.computed((()=>l.loadingLabel)),i=e.computed((()=>l.hintLabel)),r=e.computed((()=>Boolean(l.loading&&(o.loading||a.value)))),u=e.computed((()=>!r.value&&Boolean(l.invalid&&(o.invalid||t.value)))),d=e.computed((()=>!r.value&&!u.value&&Boolean(l.valid&&(o.valid||n.value)))),s=e.computed((()=>!r.value&&!u.value&&!d.value&&Boolean(o.hint||i.value))),v=e.computed((()=>u.value||d.value||r.value||s.value)),p=e.computed((()=>({modelValue:l.modelValue,valid:l.valid,invalid:l.invalid,loading:l.loading}))),f=e.defineComponent({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup:()=>({isVisible:v,invalidLabel:t,validLabel:n,loadingLabel:a,hintLabel:i,hasInvalidLabelOrSlot:u,hasValidLabelOrSlot:d,hasLoadingLabelOrSlot:r,hasHintLabelOrSlot:s}),render(){var l,o,t,n,a,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=(l=this.$slots).loading)?void 0:o.call(l))??this.loadingLabel):this.hasInvalidLabelOrSlot?e.h(this.tag,{role:d},(null==(n=(t=this.$slots).invalid)?void 0:n.call(t))??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?e.h(this.tag,{role:d},(null==(i=(a=this.$slots).valid)?void 0:i.call(a))??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:u,hasHintLabelOrSlot:s,hasValidLabelOrSlot:d,hasLoadingLabelOrSlot:r,hintSlotScope:p,HintSlot:f}}(r,u),{id:b,modifiers:h,disabled:y,readonly:S,loading:B,icon:k,iconPosition:L,invalid:$,valid:V,floating:O,multiple:w}=e.toRefs(r),E=(l=>e.computed((()=>String((null==l?void 0:l.value)||o.nanoid()))))(b),x=e.computed((()=>`${E.value}-hint`)),{focused:D}=function(l,o){const{focused:n}=t.useFocus(l);return e.watch(n,(t=>{o(t?"focus":"blur",e.unref(l))})),{focused:n}}(v,n),R=t.useElementVisibility(v);e.watch(R,(e=>{e&&r.autofocus&&(D.value=!0)}));const{hasIcon:H,hasIconBefore:K,hasIconAfter:M}=function(l,o){const t=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===i.before))),n=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===i.after))),r=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===a.left))),u=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===a.right))),d=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===a.top))),s=e.computed((()=>Boolean((null==l?void 0:l.value)&&o.value===a.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:r,hasIconRight:u,hasIconTop:d,hasIconBottom:s,hasIconBefore:t,hasIconAfter:n}}(k,L),T=e.computed((()=>{return l=r.modelValue,!(null==(o=e.unref(l))||""===o||Array.isArray(o)&&0===o.length||!(o instanceof Date)&&"object"==typeof o&&0===Object.keys(o).length);var l,o})),G=e.computed((()=>r.disabled||r.readonly)),J=e.computed((()=>G.value?-1:r.tabindex)),U=e.computed((()=>!0===r.invalid||!0!==r.valid&&void 0)),Q=d("vv-select",h,e.computed((()=>({valid:V.value,invalid:$.value,loading:B.value,disabled:y.value,readonly:S.value,"icon-before":K.value,"icon-after":M.value,dirty:T.value,focus:D.value,floating:O.value,multiple:w.value})))),W=e.computed((()=>({name:r.name,tabindex:J.value,disabled:G.value,required:r.required,size:r.size,autocomplete:r.autocomplete,multiple:r.multiple,"aria-invalid":U.value,"aria-describedby":f.value?x.value:void 0,"aria-errormessage":m.value?x.value:void 0}))),X=e.computed((()=>({valid:r.valid,invalid:r.invalid,modelValue:r.modelValue}))),{getOptionLabel:Y,getOptionValue:Z,getOptionDisabled:ee,getOptionGrouped:le}=function(l){const{options:o,labelKey:t,valueKey:n,disabledKey:a}=e.toRefs(l);return{options:o,getOptionLabel:e=>"object"!=typeof e&&null!==e?e:String("function"==typeof t.value?t.value(e):e[t.value]),getOptionValue:e=>"object"!=typeof e&&null!==e?e:"function"==typeof n.value?n.value(e):e[n.value],getOptionDisabled:e=>("object"==typeof e||null===e)&&("function"==typeof a.value?a.value(e):e[a.value]),getOptionGrouped:e=>"object"!=typeof e&&null!==e?[]:e.options||[]}}(r),oe=e.computed({get:()=>r.modelValue,set:e=>{Array.isArray(e)&&(e=e.filter((e=>void 0!==e))),n("update:modelValue",e)}}),te=e=>"string"!=typeof e&&(e&&e.options&&e.options.length>0);return(l,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(Q))},[l.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(E)},e.toDisplayString(l.label),9,P)):e.createCommentVNode("",!0),e.createElementVNode("div",I,[l.$slots.before?(e.openBlock(),e.createElementBlock("div",N,[e.renderSlot(l.$slots,"before",e.normalizeProps(e.guardReactiveProps(e.unref(X))))])):e.createCommentVNode("",!0),e.createElementVNode("div",_,[e.unref(K)?(e.openBlock(),e.createBlock(s,e.mergeProps({key:0,class:"vv-select__icon"},e.unref(H)),null,16)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("select",e.mergeProps({id:e.unref(E),ref_key:"select",ref:v,"onUpdate:modelValue":o[0]||(o[0]=l=>e.isRef(oe)?oe.value=l:null)},e.unref(W)),[l.placeholder?(e.openBlock(),e.createElementBlock("option",{key:0,value:void 0,disabled:!l.unselectable,hidden:!l.unselectable},e.toDisplayString(l.placeholder),9,C)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,((l,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[te(l)?(e.openBlock(),e.createElementBlock("optgroup",{key:`group-${o}`,disabled:e.unref(ee)(l),label:e.unref(Y)(l)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(le)(l),((l,t)=>(e.openBlock(),e.createElementBlock("option",{key:`group-${o}-item-${t}`,disabled:e.unref(ee)(l),value:e.unref(Z)(l)},e.toDisplayString(e.unref(Y)(l)),9,z)))),128))],8,j)):(e.openBlock(),e.createElementBlock("option",{key:o,disabled:e.unref(ee)(l),value:e.unref(Z)(l)},e.toDisplayString(e.unref(Y)(l)),9,F))],64)))),256))],16,A),[[e.vModelSelect,e.unref(oe)]]),e.unref(M)?(e.openBlock(),e.createBlock(s,e.mergeProps({key:1,class:"vv-select__icon vv-select__icon-after"},e.unref(H)),null,16)):e.createCommentVNode("",!0)]),l.$slots.after?(e.openBlock(),e.createElementBlock("div",q,[e.renderSlot(l.$slots,"after",e.normalizeProps(e.guardReactiveProps(e.unref(X))))])):e.createCommentVNode("",!0)]),e.createVNode(e.unref(p),{id:e.unref(x),class:"vv-select__hint"},e.createSlots({_:2},[l.$slots.hint?{name:"hint",fn:e.withCtx((()=>[e.renderSlot(l.$slots,"hint",e.normalizeProps(e.guardReactiveProps(e.unref(g))))])),key:"0"}:void 0,l.$slots.loading?{name:"loading",fn:e.withCtx((()=>[e.renderSlot(l.$slots,"loading",e.normalizeProps(e.guardReactiveProps(e.unref(g))))])),key:"1"}:void 0,l.$slots.valid?{name:"valid",fn:e.withCtx((()=>[e.renderSlot(l.$slots,"valid",e.normalizeProps(e.guardReactiveProps(e.unref(g))))])),key:"2"}:void 0,l.$slots.invalid?{name:"invalid",fn:e.withCtx((()=>[e.renderSlot(l.$slots,"invalid",e.normalizeProps(e.guardReactiveProps(e.unref(g))))])),key:"3"}:void 0]),1032,["id"])],2))}})}));

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

@@ -4,7 +4,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     required: BooleanConstructor;
     size: (StringConstructor | NumberConstructor)[];
     modelValue: {
-        type: (StringConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
     placeholder: StringConstructor;
@@ -15,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     floating: BooleanConstructor;
     icon: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: (ObjectConstructor | StringConstructor)[];
     };
     iconPosition: {
         type: globalThis.PropType<"before" | "after">;
@@ -51,9 +51,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     invalid: BooleanConstructor;
-    invalidLabel: (StringConstructor | ArrayConstructor)[];
+    invalidLabel: (ArrayConstructor | StringConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (StringConstructor | ArrayConstructor)[];
+    validLabel: (ArrayConstructor | StringConstructor)[];
     tabindex: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
@@ -73,7 +73,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     required: BooleanConstructor;
     size: (StringConstructor | NumberConstructor)[];
     modelValue: {
-        type: (StringConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
     placeholder: StringConstructor;
@@ -84,7 +84,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     floating: BooleanConstructor;
     icon: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: (ObjectConstructor | StringConstructor)[];
     };
     iconPosition: {
         type: globalThis.PropType<"before" | "after">;
@@ -120,9 +120,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     invalid: BooleanConstructor;
-    invalidLabel: (StringConstructor | ArrayConstructor)[];
+    invalidLabel: (ArrayConstructor | StringConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (StringConstructor | ArrayConstructor)[];
+    validLabel: (ArrayConstructor | StringConstructor)[];
     tabindex: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
@@ -140,37 +140,61 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: string | number | boolean | unknown[] | Record<string, any>;
     disabled: boolean;
     options: (string | Option)[];
     floating: boolean;
+    modelValue: string | number | boolean | unknown[] | Record<string, any>;
+    tabindex: string | number;
+    unselectable: boolean;
     required: boolean;
     iconPosition: "before" | "after";
+    autofocus: boolean;
     loading: boolean;
     loadingLabel: string;
-    unselectable: boolean;
     multiple: boolean;
     readonly: boolean;
     hintLabel: string;
     invalid: boolean;
     valid: boolean;
-    tabindex: string | number;
+    autocomplete: string;
     labelKey: string | Function;
     valueKey: string | Function;
     disabledKey: string | Function;
-    autocomplete: string;
-    autofocus: boolean;
-}>, {
-    before: (_: {
+}, {}>, {
+    before?(_: {
         valid: boolean;
         invalid: boolean;
         modelValue: string | number | boolean | unknown[] | Record<string, any> | undefined;
-    }) => any;
-    after: (_: {
+    }): any;
+    after?(_: {
         valid: boolean;
         invalid: boolean;
         modelValue: string | number | boolean | unknown[] | Record<string, any> | undefined;
-    }) => any;
+    }): 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/VvSelect/index.d.ts

@@ -22,7 +22,7 @@ export declare const VvSelectProps: {
      * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
      */
     modelValue: {
-        type: (StringConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
     /**
@@ -36,7 +36,7 @@ export declare const VvSelectProps: {
     };
     floating: BooleanConstructor;
     icon: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: (ObjectConstructor | StringConstructor)[];
     };
     iconPosition: {
         type: globalThis.PropType<"before" | "after">;
@@ -72,9 +72,9 @@ export declare const VvSelectProps: {
         default: string;
     };
     invalid: BooleanConstructor;
-    invalidLabel: (StringConstructor | ArrayConstructor)[];
+    invalidLabel: (ArrayConstructor | StringConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (StringConstructor | ArrayConstructor)[];
+    validLabel: (ArrayConstructor | StringConstructor)[];
     tabindex: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;