@volverjs/ui-vue 0.0.10-beta.68 → 0.0.10-beta.69

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

@@ -1,5 +1,5 @@
 import { computed, isRef, defineComponent, h, inject, unref, mergeDefaults, ref, toRefs, createBlock, createCommentVNode, openBlock, mergeProps, watch, useId, useSlots, createElementBlock, normalizeClass, createElementVNode, createVNode, toDisplayString, renderSlot, normalizeProps, guardReactiveProps, withDirectives, Fragment, renderList, vModelSelect, createSlots, withCtx } from "vue";
-import { iconExists, Icon, addIcon } from "@iconify/vue";
+import { iconLoaded, Icon, addIcon } from "@iconify/vue";
 import { useFocus, useElementVisibility } from "@vueuse/core";
 import { get } from "ts-dot-prop";
 var StorageType = /* @__PURE__ */ ((StorageType2) => {
@@ -135,7 +135,7 @@ const OptionsProps = {
 const IconProps = {
   /**
    * VvIcon name or props
-   * @see VVIcon
+   * @see VvIcon
    */
   icon: {
     type: [String, Object],
@@ -232,6 +232,13 @@ const AutocompleteProps = {
     default: StorageType.local
   }
 });
+const ACTION_ICONS = {
+  clear: "close"
+};
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
+};
 const VvSelectProps = {
   ...IdNameProps,
   ...AutofocusProps,
@@ -285,7 +292,22 @@ const VvSelectProps = {
   /**
    * Select placeholder
    */
-  placeholder: String
+  placeholder: String,
+  /**
+   * VvIcon name for clear button
+   * @see VvIcon
+   */
+  iconClear: {
+    type: [String, Object],
+    default: ACTION_ICONS.clear
+  },
+  /**
+   * Label for clear button
+   */
+  labelClear: {
+    type: String,
+    default: "Clear"
+  }
 };
 function useVvSelectProps() {
   return {
@@ -418,10 +440,6 @@ function HintSlotFactory(propsOrRef, slots) {
     HintSlot
   };
 }
-const VvIconPropsDefaults = {
-  prefix: "normal"
-  /* normal */
-};
 function useVolver() {
   return inject(INJECTION_KEY_VOLVER, void 0);
 }
@@ -489,13 +507,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const icon = computed(() => {
       const name = props.name ?? "";
       const iconName = `@${provider.value}:${props.prefix}:${name}`;
-      if (iconExists(iconName)) {
+      if (iconLoaded(iconName)) {
         return iconName;
       }
       const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
         (iconsCollection2) => {
           const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
-          return iconExists(icon2);
+          return iconLoaded(icon2);
         }
       );
       if (iconsCollection) {
@@ -527,7 +545,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     }
     if (volver) {
-      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
+      if (props.src && !iconLoaded(`@${provider.value}:${props.prefix}:${props.name}`)) {
         show.value = false;
         volver.fetchIcon(props.src).then((svg) => {
           if (svg) {
@@ -555,12 +573,100 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         flip: _ctx.flip,
         rotate: unref(hasRotate),
         color: _ctx.color,
-        onLoad: _ctx.onLoad,
         icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
+      }, { onLoad: _ctx.onLoad }), null, 16, ["class", "onLoad"])) : createCommentVNode("v-if", true);
     };
   }
 });
+function useComponentIcon(icon, iconPosition) {
+  const hasIcon = computed(() => {
+    if (typeof (icon == null ? void 0 : icon.value) === "string") {
+      return { name: icon == null ? void 0 : icon.value };
+    }
+    return icon == null ? void 0 : icon.value;
+  });
+  const hasIconBefore = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
+  );
+  const hasIconAfter = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
+  );
+  const hasIconLeft = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
+  );
+  const hasIconRight = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
+  );
+  const hasIconTop = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
+  );
+  const hasIconBottom = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
+  );
+  return {
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
+  };
+}
+const VvInputClearAction = defineComponent({
+  components: {
+    VvIcon: _sfc_main$1
+  },
+  props: {
+    inputType: {
+      type: String,
+      default: "input-text"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: "Clear"
+    },
+    icon: {
+      type: [String, Object],
+      default: "close"
+    }
+  },
+  emits: ["clear"],
+  setup(props, { emit }) {
+    const { hasIcon } = useComponentIcon(computed(() => props.icon));
+    function onClick(e) {
+      e == null ? void 0 : e.stopPropagation();
+      if (!props.disabled) {
+        emit("clear");
+      }
+    }
+    return {
+      hasIcon,
+      onClick
+    };
+  },
+  render() {
+    const icon = this.hasIcon ? h(_sfc_main$1, {
+      ...this.hasIcon,
+      class: `vv-${this.inputType}__icon`
+    }) : void 0;
+    return h(
+      "button",
+      {
+        disabled: this.disabled,
+        class: `vv-${this.inputType}__action`,
+        ariaLabel: this.label,
+        type: "button",
+        onClick: this.onClick
+      },
+      icon
+    );
+  }
+});
 function useDefaults(componentName, propsDefinition, props) {
   const volver = useVolver();
   const volverComponentDefaults = computed(() => {
@@ -626,41 +732,6 @@ function useComponentFocus(inputTemplateRef, emit) {
 function useUniqueId(id) {
   return computed(() => String((id == null ? void 0 : id.value) || useId()));
 }
-function useComponentIcon(icon, iconPosition) {
-  const hasIcon = computed(() => {
-    if (typeof (icon == null ? void 0 : icon.value) === "string") {
-      return { name: icon == null ? void 0 : icon.value };
-    }
-    return icon == null ? void 0 : icon.value;
-  });
-  const hasIconBefore = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
-  );
-  const hasIconAfter = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
-  );
-  const hasIconLeft = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
-  );
-  const hasIconRight = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
-  );
-  const hasIconTop = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
-  );
-  const hasIconBottom = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
-  );
-  return {
-    hasIcon,
-    hasIconLeft,
-    hasIconRight,
-    hasIconTop,
-    hasIconBottom,
-    hasIconBefore,
-    hasIconAfter
-  };
-}
 function useOptions(props) {
   const { options, labelKey, valueKey, disabledKey } = toRefs(props);
   const getOptionLabel = (option) => {
@@ -731,7 +802,7 @@ const __default__ = {
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: useVvSelectProps(),
-  emits: ["update:modelValue", "focus", "blur"],
+  emits: ["update:modelValue", "focus", "blur", "clear"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -797,6 +868,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return localModelValue.value !== void 0 && localModelValue.value !== null;
     });
+    const isUnselectable = computed(() => {
+      if (isDisabledOrReadonly.value) {
+        return false;
+      }
+      return props.unselectable;
+    });
     const isVisible = useElementVisibility(selectEl);
     watch(isVisible, (newValue) => {
       if (newValue && props.autofocus) {
@@ -846,6 +923,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
+    function onClear() {
+      if (Array.isArray(localModelValue.value)) {
+        localModelValue.value = [];
+      } else {
+        localModelValue.value = void 0;
+      }
+      emit("clear");
+    }
     const hasAttrs = computed(() => {
       return {
         "name": props.name,
@@ -898,8 +983,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 _ctx.placeholder ? (openBlock(), createElementBlock("option", {
                   key: 0,
                   value: void 0,
-                  disabled: !_ctx.unselectable,
-                  hidden: !_ctx.unselectable
+                  disabled: !unref(isUnselectable),
+                  hidden: !unref(isUnselectable)
                 }, toDisplayString(_ctx.placeholder), 9, _hoisted_6)) : createCommentVNode("v-if", true),
                 (openBlock(true), createElementBlock(
                   Fragment,
@@ -943,9 +1028,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ], 16, _hoisted_5), [
                 [vModelSelect, unref(localModelValue)]
               ]),
+              unref(isUnselectable) ? (openBlock(), createBlock(unref(VvInputClearAction), {
+                key: 1,
+                "input-type": "select",
+                label: _ctx.labelClear,
+                icon: _ctx.iconClear,
+                onClear
+              }, null, 8, ["label", "icon"])) : createCommentVNode("v-if", true),
               unref(hasIconAfter) ? (openBlock(), createBlock(
                 _sfc_main$1,
-                mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
+                mergeProps({ key: 2 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
                 null,
                 16
                 /* FULL_PROPS */

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

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

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

@@ -25,6 +25,8 @@ declare const _default: <T extends string | Option>(__VLS_props: NonNullable<Awa
         valueKey: string | Function;
         disabledKey: string | Function;
         autoselectFirst: boolean;
+        iconClear: string | import("../VvIcon").VvIconProps;
+        labelClear: string;
         autocomplete: string;
         autofocus: boolean;
     }> & Omit<{
@@ -46,6 +48,8 @@ declare const _default: <T extends string | Option>(__VLS_props: NonNullable<Awa
         readonly valueKey: string | Function;
         readonly disabledKey: string | Function;
         readonly autoselectFirst: boolean;
+        readonly iconClear: string | import("../VvIcon").VvIconProps;
+        readonly labelClear: string;
         readonly autocomplete: string;
         readonly autofocus: boolean;
         readonly size?: string | number | undefined;
@@ -58,49 +62,55 @@ declare const _default: <T extends string | Option>(__VLS_props: NonNullable<Awa
         readonly invalidLabel?: string | unknown[] | undefined;
         readonly validLabel?: string | unknown[] | undefined;
         readonly placeholder?: string | undefined;
+        readonly onClear?: (() => any) | undefined;
         readonly "onUpdate:modelValue"?: ((args_0: any) => any) | undefined;
         readonly onBlur?: ((args_0: import("@vueuse/core").MaybeElement) => any) | undefined;
         readonly onFocus?: ((args_0: import("@vueuse/core").MaybeElement) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "floating" | "label" | "disabled" | "modelValue" | "modifiers" | "icon" | "iconPosition" | "required" | "loading" | "loadingLabel" | "unselectable" | "multiple" | "readonly" | "hintLabel" | "invalid" | "invalidLabel" | "valid" | "validLabel" | "tabindex" | "options" | "labelKey" | "valueKey" | "disabledKey" | "autoselectFirst" | "autocomplete" | "autofocus">, "size" | "name" | "id" | "onFocus" | "onBlur" | "onUpdate:modelValue" | "placeholder" | ("floating" | "label" | "disabled" | "modelValue" | "modifiers" | "icon" | "iconPosition" | "required" | "loading" | "loadingLabel" | "unselectable" | "multiple" | "readonly" | "hintLabel" | "invalid" | "invalidLabel" | "valid" | "validLabel" | "tabindex" | "options" | "labelKey" | "valueKey" | "disabledKey" | "autoselectFirst" | "autocomplete" | "autofocus")> & {} & Partial<{}>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "floating" | "label" | "disabled" | "modelValue" | "modifiers" | "icon" | "iconPosition" | "required" | "loading" | "loadingLabel" | "unselectable" | "multiple" | "readonly" | "hintLabel" | "invalid" | "invalidLabel" | "valid" | "validLabel" | "tabindex" | "options" | "labelKey" | "valueKey" | "disabledKey" | "autoselectFirst" | "iconClear" | "labelClear" | "autocomplete" | "autofocus">, "size" | "name" | "id" | "onFocus" | "onBlur" | "onClear" | "onUpdate:modelValue" | "placeholder" | ("floating" | "label" | "disabled" | "modelValue" | "modifiers" | "icon" | "iconPosition" | "required" | "loading" | "loadingLabel" | "unselectable" | "multiple" | "readonly" | "hintLabel" | "invalid" | "invalidLabel" | "valid" | "validLabel" | "tabindex" | "options" | "labelKey" | "valueKey" | "disabledKey" | "autoselectFirst" | "iconClear" | "labelClear" | "autocomplete" | "autofocus")> & {} & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
-        before?: ((props: {
+        before?: (props: {
             valid: boolean;
             invalid: boolean;
             modelValue: string | number | boolean | unknown[] | Record<string, any> | undefined;
-        }) => any) | undefined;
-        after?: ((props: {
+        }) => any;
+    } & {
+        after?: (props: {
             valid: boolean;
             invalid: boolean;
             modelValue: string | number | boolean | unknown[] | Record<string, any> | undefined;
-        }) => any) | undefined;
-        hint?: ((props: {
+        }) => any;
+    } & {
+        hint?: (props: {
             modelValue: unknown;
             valid: boolean;
             invalid: boolean;
             loading: boolean;
-        }) => any) | undefined;
-        loading?: ((props: {
+        }) => any;
+    } & {
+        loading?: (props: {
             modelValue: unknown;
             valid: boolean;
             invalid: boolean;
             loading: boolean;
-        }) => any) | undefined;
-        valid?: ((props: {
+        }) => any;
+    } & {
+        valid?: (props: {
             modelValue: unknown;
             valid: boolean;
             invalid: boolean;
             loading: boolean;
-        }) => any) | undefined;
-        invalid?: ((props: {
+        }) => any;
+    } & {
+        invalid?: (props: {
             modelValue: unknown;
             valid: boolean;
             invalid: boolean;
             loading: boolean;
-        }) => any) | undefined;
+        }) => any;
     };
-    emit: ((evt: "update:modelValue", args_0: any) => void) & ((evt: "blur", args_0: import("@vueuse/core").MaybeElement) => void) & ((evt: "focus", args_0: import("@vueuse/core").MaybeElement) => void);
+    emit: ((evt: "clear") => void) & ((evt: "update:modelValue", args_0: any) => void) & ((evt: "blur", args_0: import("@vueuse/core").MaybeElement) => void) & ((evt: "focus", args_0: import("@vueuse/core").MaybeElement) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,9 +1,11 @@
 import type { MaybeElement } from '@vueuse/core';
 import type { Option } from '../../types/generic';
+import type { VvIconProps } from '../VvIcon';
 export type VvSelectEmits = {
     'update:modelValue': [any];
     'focus': [MaybeElement];
     'blur': [MaybeElement];
+    'clear': [];
 };
 export declare const VvSelectProps: {
     /**
@@ -43,6 +45,21 @@ export declare const VvSelectProps: {
      * Select placeholder
      */
     placeholder: StringConstructor;
+    /**
+     * VvIcon name for clear button
+     * @see VvIcon
+     */
+    iconClear: {
+        type: PropType<string | VvIconProps>;
+        default: "close";
+    };
+    /**
+     * Label for clear button
+     */
+    labelClear: {
+        type: StringConstructor;
+        default: string;
+    };
     label: {
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
@@ -56,7 +73,7 @@ export declare const VvSelectProps: {
         default: boolean;
     };
     icon: {
-        type: PropType<string | import("../VvIcon").VvIconProps>;
+        type: PropType<string | VvIconProps>;
         default: undefined;
     };
     iconPosition: {
@@ -180,6 +197,21 @@ export declare function useVvSelectProps<T extends Option | string>(): {
      * Select placeholder
      */
     placeholder: StringConstructor;
+    /**
+     * VvIcon name for clear button
+     * @see VvIcon
+     */
+    iconClear: {
+        type: PropType<string | VvIconProps>;
+        default: "close";
+    };
+    /**
+     * Label for clear button
+     */
+    labelClear: {
+        type: StringConstructor;
+        default: string;
+    };
     label: {
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
@@ -193,7 +225,7 @@ export declare function useVvSelectProps<T extends Option | string>(): {
         default: boolean;
     };
     icon: {
-        type: PropType<string | import("../VvIcon").VvIconProps>;
+        type: PropType<string | VvIconProps>;
         default: undefined;
     };
     iconPosition: {

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

@@ -37,7 +37,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<globalThis
     items: NavItemTab[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     [x: `panel::${string}`]: ((props: {}) => any) | undefined;
-    'nav-item'?: ((props: {
+} & {
+    'nav-item'?: (props: {
         item: {
             label: string;
             ariaLabel?: string;
@@ -52,7 +53,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<globalThis
         };
         data: Record<string, unknown> | undefined;
         index: number;
-    }) => any) | undefined;
+    }) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -2,7 +2,7 @@ import { unref, computed, isRef, defineComponent, h, useId, Fragment, provide, r
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, useElementHover, onKeyStroke, useFocus, useStorage, useElementVisibility } from "@vueuse/core";
 import mitt from "mitt";
-import { iconExists, Icon, addIcon } from "@iconify/vue";
+import { iconLoaded, Icon, addIcon } from "@iconify/vue";
 var StorageType = /* @__PURE__ */ ((StorageType2) => {
   StorageType2["local"] = "local";
   StorageType2["session"] = "session";
@@ -193,7 +193,7 @@ const DebounceProps = {
 const IconProps = {
   /**
    * VvIcon name or props
-   * @see VVIcon
+   * @see VvIcon
    */
   icon: {
     type: [String, Object],
@@ -472,7 +472,7 @@ const VvTextareaProps = {
   spellcheck: { type: [Boolean, String], default: SPELLCHECK.default },
   /**
    * VvIcon name for remove suggestion button
-   * @see VVIcon
+   * @see VvIcon
    */
   iconRemoveSuggestion: {
     type: [String, Object],
@@ -1331,13 +1331,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const icon = computed(() => {
       const name = props.name ?? "";
       const iconName = `@${provider.value}:${props.prefix}:${name}`;
-      if (iconExists(iconName)) {
+      if (iconLoaded(iconName)) {
         return iconName;
       }
       const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
         (iconsCollection2) => {
           const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
-          return iconExists(icon2);
+          return iconLoaded(icon2);
         }
       );
       if (iconsCollection) {
@@ -1369,7 +1369,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     }
     if (volver) {
-      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
+      if (props.src && !iconLoaded(`@${provider.value}:${props.prefix}:${props.name}`)) {
         show.value = false;
         volver.fetchIcon(props.src).then((svg) => {
           if (svg) {
@@ -1397,9 +1397,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         flip: _ctx.flip,
         rotate: unref(hasRotate),
         color: _ctx.color,
-        onLoad: _ctx.onLoad,
         icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
+      }, { onLoad: _ctx.onLoad }), null, 16, ["class", "onLoad"])) : createCommentVNode("v-if", true);
     };
   }
 });