@volverjs/ui-vue 0.0.10-beta.40 → 0.0.10-beta.41

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

@@ -1,7 +1,7 @@
 import { inject, computed, unref, defineComponent, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, isRef, h, watch, useSlots, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withDirectives, Fragment, renderList, vModelSelect, createVNode, createSlots, withCtx } from "vue";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
-import { uid } from "uid";
 import { useFocus, useElementVisibility } from "@vueuse/core";
+import { uid } from "uid";
 import { get } from "ts-dot-prop";
 const VvIconPropsDefaults = {
   prefix: "normal"
@@ -193,9 +193,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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;
 }
@@ -715,6 +712,13 @@ const VvSelectProps = {
     type: [String, Number, Boolean, Object, Array],
     default: void 0
   },
+  /**
+   * Select first option automatically
+   */
+  autoselectFirst: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Select placeholder
    */
@@ -783,9 +787,6 @@ function useDefaults(componentName, propsDefinition, props) {
     }, {});
   });
 }
-function useUniqueId(id) {
-  return computed(() => String((id == null ? void 0 : id.value) || uid()));
-}
 function useComponentFocus(inputTemplateRef, emit) {
   const { focused } = useFocus(inputTemplateRef);
   watch(focused, (newValue) => {
@@ -795,6 +796,9 @@ function useComponentFocus(inputTemplateRef, emit) {
     focused
   };
 }
+function useUniqueId(id) {
+  return computed(() => String((id == null ? void 0 : id.value) || uid()));
+}
 function useComponentIcon(icon, iconPosition) {
   const hasIcon = computed(() => {
     if (typeof (icon == null ? void 0 : icon.value) === "string") {
@@ -836,21 +840,30 @@ function useOptions(props) {
     if (typeof option === "string") {
       return option;
     }
+    if (typeof labelKey.value === "function") {
+      return labelKey.value(option);
+    }
     return String(
-      typeof labelKey.value === "function" ? labelKey.value(option) : get(option, labelKey.value)
+      labelKey.value ? get(option, labelKey.value) : option
     );
   };
   const getOptionValue = (option) => {
     if (typeof option === "string") {
       return option;
     }
-    return typeof valueKey.value === "function" ? valueKey.value(option) : get(option, valueKey.value);
+    if (typeof valueKey.value === "function") {
+      return valueKey.value(option);
+    }
+    return valueKey.value ? get(option, valueKey.value) : option;
   };
   const isOptionDisabled = (option) => {
     if (typeof option === "string") {
       return false;
     }
-    return typeof disabledKey.value === "function" ? disabledKey.value(option) : get(option, disabledKey.value);
+    if (typeof disabledKey.value === "function") {
+      return disabledKey.value(option);
+    }
+    return disabledKey.value ? get(option, disabledKey.value) : false;
   };
   const getOptionGrouped = (option) => {
     if (typeof option == "string") {
@@ -902,13 +915,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       VvSelectProps2,
       props
     );
-    const select = ref();
+    const selectEl = ref();
     const {
       HintSlot,
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
     } = HintSlotFactory(propsDefaults, slots);
+    const { focused } = useComponentFocus(selectEl, emit);
+    function isGroup(option) {
+      var _a;
+      if (typeof option === "string") {
+        return false;
+      }
+      return (_a = option.options) == null ? void 0 : _a.length;
+    }
     const {
       id,
       modifiers,
@@ -924,19 +945,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
-    const { focused } = useComponentFocus(select, emit);
-    const isVisible = useElementVisibility(select);
+    const isDisabledOrReadonly = computed(() => props.disabled || props.readonly);
+    const hasTabindex = computed(() => {
+      return isDisabledOrReadonly.value ? -1 : props.tabindex;
+    });
+    const localModelValue = computed({
+      get: () => {
+        return props.modelValue;
+      },
+      set: (newValue) => {
+        if (Array.isArray(newValue)) {
+          newValue = newValue.filter((item) => item !== void 0);
+          if (newValue.length === 0 && !props.unselectable) {
+            selectEl.value.value = props.modelValue;
+            return;
+          }
+        }
+        emit("update:modelValue", newValue);
+      }
+    });
+    const isDirty = computed(() => {
+      if (Array.isArray(localModelValue.value)) {
+        return localModelValue.value.length > 0;
+      }
+      return localModelValue.value !== void 0 && localModelValue.value !== null;
+    });
+    const isVisible = useElementVisibility(selectEl);
     watch(isVisible, (newValue) => {
       if (newValue && props.autofocus) {
         focused.value = true;
       }
     });
     const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
-    const isDirty = computed(() => !isEmpty(props.modelValue));
-    const isDisabled = computed(() => props.disabled || props.readonly);
-    const hasTabindex = computed(() => {
-      return isDisabled.value ? -1 : props.tabindex;
-    });
     const isInvalid = computed(() => {
       if (props.invalid === true) {
         return true;
@@ -963,11 +1003,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "multiple": multiple.value
       }))
     );
+    const {
+      getOptionLabel,
+      getOptionValue,
+      isOptionDisabled,
+      getOptionGrouped
+    } = useOptions(props);
+    watch(
+      () => props.options,
+      (newValue) => {
+        if ((newValue == null ? void 0 : newValue.length) && props.autoselectFirst && !isDirty.value) {
+          const firstOptionValue = getOptionValue(newValue[0]);
+          localModelValue.value = props.multiple ? [firstOptionValue] : firstOptionValue;
+        }
+      },
+      { immediate: true }
+    );
     const hasAttrs = computed(() => {
       return {
         "name": props.name,
         "tabindex": hasTabindex.value,
-        "disabled": isDisabled.value,
+        "disabled": isDisabledOrReadonly.value,
         "required": props.required,
         "size": props.size,
         "autocomplete": props.autocomplete,
@@ -982,30 +1038,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       invalid: props.invalid,
       modelValue: props.modelValue
     }));
-    const {
-      getOptionLabel,
-      getOptionValue,
-      isOptionDisabled,
-      getOptionGrouped
-    } = useOptions(props);
-    const localModelValue = computed({
-      get: () => {
-        return props.modelValue;
-      },
-      set: (newValue) => {
-        if (Array.isArray(newValue)) {
-          newValue = newValue.filter((item) => item !== void 0);
-        }
-        emit("update:modelValue", newValue);
-      }
-    });
-    function isGroup(option) {
-      var _a;
-      if (typeof option === "string") {
-        return false;
-      }
-      return (_a = option.options) == null ? void 0 : _a.length;
-    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",
@@ -1031,10 +1063,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               )) : createCommentVNode("v-if", true),
               withDirectives(createElementVNode("select", mergeProps({
                 id: unref(hasId),
-                ref_key: "select",
-                ref: select,
+                ref_key: "selectEl",
+                ref: selectEl
+              }, unref(hasAttrs), {
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
-              }, unref(hasAttrs)), [
+              }), [
                 _ctx.placeholder ? (openBlock(), createElementBlock("option", {
                   key: 0,
                   value: void 0,

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

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

@@ -29,6 +29,7 @@ declare const _default: <T extends string | Option>(__VLS_props: {
     valueKey?: string | Function | undefined;
     disabledKey?: string | Function | undefined;
     "onUpdate:modelValue"?: ((args_0: any) => any) | undefined;
+    autoselectFirst?: boolean | undefined;
     readonly placeholder?: string | undefined;
     autocomplete?: string | undefined;
     autofocus?: boolean | undefined;
@@ -102,6 +103,7 @@ declare const _default: <T extends string | Option>(__VLS_props: {
         valueKey?: string | Function | undefined;
         disabledKey?: string | Function | undefined;
         "onUpdate:modelValue"?: ((args_0: any) => any) | undefined;
+        autoselectFirst?: boolean | undefined;
         readonly placeholder?: string | undefined;
         autocomplete?: string | undefined;
         autofocus?: boolean | undefined;
@@ -179,6 +181,7 @@ declare const _default: <T extends string | Option>(__VLS_props: {
             valueKey?: string | Function | undefined;
             disabledKey?: string | Function | undefined;
             "onUpdate:modelValue"?: ((args_0: any) => any) | undefined;
+            autoselectFirst?: boolean | undefined;
             readonly placeholder?: string | undefined;
             autocomplete?: string | undefined;
             autofocus?: boolean | undefined;

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

@@ -32,6 +32,13 @@ export declare const VvSelectProps: {
         type: (ObjectConstructor | ArrayConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
         default: undefined;
     };
+    /**
+     * Select first option automatically
+     */
+    autoselectFirst: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Select placeholder
      */
@@ -162,6 +169,13 @@ export declare function useVvSelectProps<T extends Option | string>(): {
         type: (ObjectConstructor | ArrayConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
         default: undefined;
     };
+    /**
+     * Select first option automatically
+     */
+    autoselectFirst: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Select placeholder
      */