@volverjs/ui-vue 0.0.4 → 0.0.5-beta.2

package/dist/components/VvButton/VvButton.umd.js

@@ -1 +1 @@
-(function(e,b){typeof exports=="object"&&typeof module<"u"?module.exports=b(require("vue"),require("@iconify/vue"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","@iconify/vue","nanoid"],b):(e=typeof globalThis<"u"?globalThis:e||self,e.VvButton=b(e.vue,e.vue$1,e.nanoid))})(this,function(e,b,M){"use strict";const F={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 S=(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(S||{}),C=(t=>(t.topStart="top-start",t.topEnd="top-end",t.bottomStart="bottom-start",t.bottomEnd="bottom-end",t.leftStart="left-start",t.leftEnd="left-end",t.rightStart="right-start",t.rightEnd="right-end",t))(C||{}),j=(t=>(t.before="before",t.after="after",t))(j||{}),I=(t=>(t.button="button",t.submit="submit",t.reset="reset",t))(I||{}),k=(t=>(t.nuxtLink="nuxt-link",t.routerLink="router-link",t.a="a",t.button="button",t))(k||{}),E=(t=>(t._blank="_blank",t._self="_self",t._parent="_parent",t._top="_top",t))(E||{});const T=Symbol.for("volver"),G=Symbol.for("buttonGroup"),q=Symbol.for("dropdownTrigger"),J=Symbol.for("dropdownAction");function N(){return e.inject(T)}function w(t,n,s){return e.computed(()=>{const o={[t]:!0},l=typeof(n==null?void 0:n.value)=="string"?n.value.split(" "):n==null?void 0:n.value;return l&&Array.isArray(l)&&l.forEach(c=>{o[`${t}--${c}`]=!0}),s&&Object.keys(s.value).forEach(c=>{o[`${t}--${c}`]=e.unref(s.value[c])}),o})}const z={name:"VvIcon"},A=e.defineComponent({...z,props:F,setup(t){const n=t,s=e.ref(!0),o=N(),{modifiers:l}=e.toRefs(n),c=w("vv-icon",l),m=e.computed(()=>n.provider||(o==null?void 0:o.provider)),d=e.computed(()=>{const r=n.name??"",i=`@${m.value}:${n.prefix}:${n.name}`;return b.iconExists(r)?r:b.iconExists(i)?i:(o==null?void 0:o.iconsCollections.find(g=>{const h=`@${m.value}:${g.prefix}:${r}`;if(b.iconExists(h))return h}))||r});function p(r){let i=null;if(typeof window>"u"){const{JSDOM:v}=require("jsdom");i=new v().window}return(i?new i.DOMParser:new window.DOMParser).parseFromString(r,"text/html").querySelector("svg")}function a(r){const i=p(r),g=(i==null?void 0:i.innerHTML.trim())||"";i&&g&&b.addIcon(`@${m.value}:${n.prefix}:${n.name}`,{body:g,height:i.viewBox.baseVal.height,width:i.viewBox.baseVal.width})}return o&&(n.src&&!b.iconExists(`@${m.value}:${n.prefix}:${n.name}`)?(s.value=!1,o.fetchIcon(n.src).then(r=>{r&&(a(r),s.value=!0)}).catch(r=>{throw new Error(`During fetch icon: ${r==null?void 0:r.message}`)})):n.svg&&a(n.svg)),(r,i)=>e.unref(s)?(e.openBlock(),e.createBlock(e.unref(b.Icon),e.mergeProps({key:0,class:e.unref(c)},{inline:r.inline,width:r.width,height:r.height,horizontalFlip:r.horizontalFlip,verticalFlip:r.verticalFlip,flip:r.flip,rotate:r.rotate,color:r.color,onLoad:r.onLoad,icon:e.unref(d)}),null,16,["class"])):e.createCommentVNode("",!0)}}),K={to:{type:[String,Object]},href:String,target:{type:String,validator:t=>Object.values(E).includes(t)},rel:{type:String,default:"noopener noreferrer"}},U={loading:Boolean,loadingLabel:{type:String,default:"Loading..."}},Y={disabled:Boolean},W={active:Boolean},H={pressed:Boolean},x={label:[String,Number]},Q={modifiers:[String,Array]};j.before;const X={unselectable:{type:Boolean,default:!0}},Z={id:[String,Number]};S.bottom;const D={...Y,...x,...H,...W,...K,type:{type:String,default:I.button,validator:t=>Object.values(I).includes(t)}},ee=["click","mouseover","mouseleave"],te=D;function ne(){return e.inject(q,{})}function re(){return e.inject(J,{})}const oe={name:"VvAction"},se=e.defineComponent({...oe,props:te,emits:ee,setup(t,{expose:n,emit:s}){const o=t,l=N(),c=e.ref(null);n({$el:c});const{reference:m,bus:d,aria:p,expanded:a}=ne();e.watch(()=>c.value,u=>{m&&(m.value=u)});const r=e.computed(()=>o.pressed||(a==null?void 0:a.value)),{role:i}=re(),g=e.computed(()=>{switch(!0){case o.disabled:return k.button;case o.to!==void 0:return l!=null&&l.nuxt?k.nuxtLink:k.routerLink;case o.href!==void 0:return k.a;default:return k.button}}),h=e.computed(()=>{const u={...p==null?void 0:p.value,"aria-pressed":r.value?!0:void 0,role:i};switch(g.value){case k.a:return{...u,href:o.href,target:o.target,rel:o.rel};case k.routerLink:case k.nuxtLink:return{...u,to:o.to,target:o.target};default:return{...u,type:o.type,disabled:o.disabled}}}),O=u=>{if(o.disabled){u.preventDefault();return}d==null||d.emit("click",u),s("click",u)},v=u=>{d==null||d.emit("mouseover",u),s("mouseover",u)},y=u=>{d==null||d.emit("mouseleave",u),s("mouseleave",u)};return(u,B)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(g)),e.mergeProps(e.unref(h),{ref_key:"element",ref:c,class:{active:u.active,pressed:e.unref(r),disabled:u.disabled},onClickPassive:O,onMouseoverPassive:v,onMouseleavePassive:y}),{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(u.label),1)])]),_:3},16,["class"]))}});function P(t,n,s){return s?L(t,s)===L(n,s):V(t,n)}function V(t,n){if(t===n)return!0;if(t&&n&&typeof t=="object"&&typeof n=="object"){const s=Array.isArray(t),o=Array.isArray(n);let l,c,m;if(s&&o){if(c=t.length,c!=n.length)return!1;for(l=c;l--!==0;)if(!V(t[l],n[l]))return!1;return!0}if(s!=o)return!1;const d=t instanceof Date,p=n instanceof Date;if(d!=p)return!1;if(d&&p)return t.getTime()==n.getTime();const a=t instanceof RegExp,r=n instanceof RegExp;if(a!=r)return!1;if(a&&r)return t.toString()==n.toString();const i=Object.keys(t);if(c=i.length,c!==Object.keys(n).length)return!1;for(l=c;l--!==0;)if(!Object.prototype.hasOwnProperty.call(n,i[l]))return!1;for(l=c;l--!==0;)if(m=i[l],!V(t[m],n[m]))return!1;return!0}return t!==t&&n!==n}function L(t,n){if(t&&Object.keys(t).length&&n){if(n.indexOf(".")===-1)return t[n];{const s=n.split(".");let o=t;for(let l=0,c=s.length;l<c;++l){if(t==null)return null;o=o[s[l]]}return o}}else return null}function R(t,n){if(t!=null&&n&&n.length){for(const s of n)if(P(t,s))return!0}return!1}function le(t){return(n=>n==null||n===""||Array.isArray(n)&&n.length===0||!(n instanceof Date)&&typeof n=="object"&&Object.keys(n).length===0)(e.unref(t))}function ie(t){const n=e.inject(t,void 0),s=e.computed(()=>!le(n));function o(l,c,m){if(n!=null&&n.value){const p=e.unref(n.value)[l];return e.computed({get(){return p==null?void 0:p.value},set(a){p.value=a}})}const d=e.toRef(c,l);return e.computed({get(){return d.value},set(p){m&&m(`update:${l}`,p)}})}return{group:n,isInGroup:s,getGroupOrLocalRef:o}}const ae=["update:modelValue"],ce={...D,...Z,...Q,...X,...U,icon:[String,Object],iconPosition:{type:String,default:S.left,validator:t=>Object.values(S).includes(t)},loadingIcon:{type:String,default:"eos-icons:bubble-loading"},toggle:{type:Boolean,default:!1},modelValue:String};function ue(t,n){var u;const{group:s,isInGroup:o,getGroupOrLocalRef:l}=ie(G),{id:c,iconPosition:m,icon:d,label:p,pressed:a,modifiers:r}=e.toRefs(t),i=l("modelValue",t,n),g=l("disabled",t),h=l("toggle",t),O=l("unselectable",t),v=((u=s==null?void 0:s.value)==null?void 0:u.multiple)??e.ref(!1),y=e.computed(()=>{var _;const B=r!=null&&r.value?Array.isArray(r.value)?r.value:r.value.split(" "):[],$=(_=s==null?void 0:s.value.itemModifiers)!=null&&_.value?Array.isArray(s.value.itemModifiers.value)?s.value.itemModifiers.value:s.value.itemModifiers.value.split(" "):[];return[...B,...$]});return{group:s,isInGroup:o,modelValue:i,disabled:g,toggle:h,unselectable:O,multiple:v,id:c,modifiers:y,pressed:a,iconPosition:m,icon:d,label:p}}const fe=t=>e.computed(()=>String((t==null?void 0:t.value)||M.nanoid())),de={key:1,class:"vv-button__label"},pe={key:1,class:"vv-button__label"},me={name:"VvButton"};return e.defineComponent({...me,props:ce,emits:ae,setup(t,{expose:n,emit:s}){const o=t,l=e.useAttrs(),c=e.useSlots(),{id:m,modifiers:d,iconPosition:p,icon:a,label:r,modelValue:i,disabled:g,toggle:h,unselectable:O}=ue(o,s),v=fe(m),y=e.computed(()=>(l==null?void 0:l.name)||v.value),u=e.ref(null),B=e.computed(()=>{var f;return(f=u.value)==null?void 0:f.$el});n({$el:B});const $=e.computed(()=>h.value?Array.isArray(i.value)?R(y.value,i.value):P(y.value,i.value):o.pressed),_=w("vv-button",d,e.computed(()=>({reverse:[S.right,S.bottom].includes(p.value),column:[S.top,S.bottom].includes(p.value),"icon-only":Boolean((a==null?void 0:a.value)&&!(r!=null&&r.value)&&!c.default)}))),ge=e.computed(()=>typeof(a==null?void 0:a.value)=="string"?{name:a==null?void 0:a.value}:a==null?void 0:a.value),ye=()=>{if(h.value){if(Array.isArray(i.value)){if(R(y.value,i.value)){O.value&&(i.value=i.value.filter(f=>f!==y.value));return}i.value.push(y.value);return}if(P(y.value,i.value)&&O.value){i.value=void 0;return}i.value=y.value}};return(f,he)=>(e.openBlock(),e.createBlock(se,e.mergeProps({disabled:e.unref(g),pressed:e.unref($),active:f.active,type:f.type,to:f.to,href:f.href,target:f.target,rel:f.rel},{id:e.unref(v),ref_key:"element",ref:u,class:e.unref(_),onClick:ye}),{default:e.withCtx(()=>[e.renderSlot(f.$slots,"default",{},()=>[f.loading?e.renderSlot(f.$slots,"loading",{key:0},()=>[f.loadingIcon?(e.openBlock(),e.createBlock(A,{key:0,class:"vv-button__loading-icon",name:f.loadingIcon},null,8,["name"])):e.createCommentVNode("",!0),f.loadingLabel?(e.openBlock(),e.createElementBlock("span",de,e.toDisplayString(f.loadingLabel),1)):e.createCommentVNode("",!0)]):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.renderSlot(f.$slots,"before"),e.unref(a)?(e.openBlock(),e.createBlock(A,e.mergeProps({key:0,class:"vv-button__icon"},e.unref(ge)),null,16)):e.createCommentVNode("",!0),e.unref(r)?(e.openBlock(),e.createElementBlock("span",pe,[e.renderSlot(f.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(e.unref(r)),1)])])):e.createCommentVNode("",!0),e.renderSlot(f.$slots,"after")],64))])]),_:3},16,["id","class"]))}})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("@iconify/vue"),require("nanoid")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue","nanoid"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvButton=t(e.vue,e.vue$1,e.nanoid)}(this,(function(e,t,o){"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 r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),l=(e=>(e.before="before",e.after="after",e))(l||{}),i=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(i||{}),u=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(u||{}),a=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(a||{});const s=Symbol.for("volver"),c=Symbol.for("buttonGroup"),d=Symbol.for("dropdownTrigger"),v=Symbol.for("dropdownAction");function f(){return e.inject(s)}function p(t,o,n){return e.computed((()=>{const r={[t]:!0},l="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(r[`${t}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((o=>{r[`${t}--${o}`]=e.unref(n.value[o])})),r}))}const m=e.defineComponent({name:"VvIcon",props:n,setup(o){const n=o,r=e.ref(!0),l=f(),{modifiers:i}=e.toRefs(n),u=p("vv-icon",i),a=e.computed((()=>n.provider||(null==l?void 0:l.iconsProvider))),s=e.computed((()=>{const e=n.name??"",o=`@${a.value}:${n.prefix}:${n.name}`;return t.iconExists(e)?e:t.iconExists(o)?o:(null==l?void 0:l.iconsCollections.find((o=>{const n=`@${a.value}:${o.prefix}:${e}`;if(t.iconExists(n))return n})))||e}));function c(e){const o=function(e){let t=null;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),r=(null==o?void 0:o.innerHTML.trim())||"";o&&r&&t.addIcon(`@${a.value}:${n.prefix}:${n.name}`,{body:r,height:o.viewBox.baseVal.height,width:o.viewBox.baseVal.width})}return l&&(n.src&&!t.iconExists(`@${a.value}:${n.prefix}:${n.name}`)?(r.value=!1,l.fetchIcon(n.src).then((e=>{e&&(c(e),r.value=!0)})).catch((e=>{throw new Error(`During fetch icon: ${null==e?void 0:e.message}`)}))):n.svg&&c(n.svg)),(o,n)=>e.unref(r)?(e.openBlock(),e.createBlock(e.unref(t.Icon),e.mergeProps({key:0,class:e.unref(u)},{inline:o.inline,width:o.width,height:o.height,horizontalFlip:o.horizontalFlip,verticalFlip:o.verticalFlip,flip:o.flip,rotate:o.rotate,color:o.color,onLoad:o.onLoad,icon:e.unref(s)}),null,16,["class"])):e.createCommentVNode("",!0)}}),g={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(a).includes(e)},rel:{type:String,default:"noopener noreferrer"}},b={loading:Boolean,loadingLabel:{type:String,default:"Loading..."}},y={disabled:Boolean},h={active:Boolean},k={pressed:Boolean},S={label:[String,Number]},B={modifiers:[String,Array]};l.before;const x={unselectable:{type:Boolean,default:!0}},$={id:[String,Number]};r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const w={...y,...S,...k,...h,...g,type:{type:String,default:i.button,validator:e=>Object.values(i).includes(e)}},A=w;const j=e.defineComponent({name:"VvAction",props:A,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:n}){const r=t,l=f(),i=e.ref(null);o({$el:i});const{reference:a,bus:s,aria:c,expanded:p}=e.inject(d,{});e.watch((()=>i.value),(e=>{a&&(a.value=e)}));const m=e.computed((()=>r.pressed||(null==p?void 0:p.value))),{role:g}=e.inject(v,{}),b=e.computed((()=>{switch(!0){case r.disabled:return u.button;case void 0!==r.to:return(null==l?void 0:l.nuxt)?u.nuxtLink:u.routerLink;case void 0!==r.href:return u.a;default:return u.button}})),y=e.computed((()=>{const e={...null==c?void 0:c.value,"aria-pressed":!!m.value||void 0,role:g};switch(b.value){case u.a:return{...e,href:r.href,target:r.target,rel:r.rel};case u.routerLink:case u.nuxtLink:return{...e,to:r.to,target:r.target};default:return{...e,type:r.type,disabled:r.disabled}}})),h=e=>{r.disabled?e.preventDefault():(null==s||s.emit("click",e),n("click",e))},k=e=>{null==s||s.emit("mouseover",e),n("mouseover",e)},S=e=>{null==s||s.emit("mouseleave",e),n("mouseleave",e)};return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(b)),e.mergeProps(e.unref(y),{ref_key:"element",ref:i,class:{active:t.active,pressed:e.unref(m),disabled:t.disabled},onClickPassive:h,onMouseoverPassive:k,onMouseleavePassive:S}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}});function _(e,t,o){return o?V(e,o)===V(t,o):O(e,t)}function O(e,t){if(e===t)return!0;if(e&&t&&"object"==typeof e&&"object"==typeof t){const o=Array.isArray(e),n=Array.isArray(t);let r,l,i;if(o&&n){if(l=e.length,l!=t.length)return!1;for(r=l;0!=r--;)if(!O(e[r],t[r]))return!1;return!0}if(o!=n)return!1;const u=e instanceof Date,a=t instanceof Date;if(u!=a)return!1;if(u&&a)return e.getTime()==t.getTime();const s=e instanceof RegExp,c=t instanceof RegExp;if(s!=c)return!1;if(s&&c)return e.toString()==t.toString();const d=Object.keys(e);if(l=d.length,l!==Object.keys(t).length)return!1;for(r=l;0!=r--;)if(!Object.prototype.hasOwnProperty.call(t,d[r]))return!1;for(r=l;0!=r--;)if(i=d[r],!O(e[i],t[i]))return!1;return!0}return e!=e&&t!=t}function V(e,t){if(e&&Object.keys(e).length&&t){if(-1===t.indexOf("."))return e[t];{const o=t.split(".");let n=e;for(let t=0,r=o.length;t<r;++t){if(null==e)return null;n=n[o[t]]}return n}}return null}function L(e,t){if(null!=e&&t&&t.length)for(const o of t)if(_(e,o))return!0;return!1}function P(t){const o=e.inject(t,void 0),n=e.computed((()=>{return t=o,!(null==(n=e.unref(t))||""===n||Array.isArray(n)&&0===n.length||!(n instanceof Date)&&"object"==typeof n&&0===Object.keys(n).length);var t,n}));return{group:o,isInGroup:n,getGroupOrLocalRef:function(t,n,r){if(null==o?void 0:o.value){const n=e.unref(o.value)[t];return e.computed({get:()=>null==n?void 0:n.value,set(e){n.value=e}})}const l=e.toRef(n,t);return e.computed({get:()=>l.value,set(e){r&&r(`update:${t}`,e)}})}}}const C={...w,...$,...B,...x,...b,icon:[String,Object],iconPosition:{type:String,default:r.left,validator:e=>Object.values(r).includes(e)},loadingIcon:{type:String,default:"eos-icons:bubble-loading"},toggle:{type:Boolean,default:!1},modelValue:String};const D={key:1,class:"vv-button__label"},E={key:1,class:"vv-button__label"};return e.defineComponent({name:"VvButton",props:C,emits:["update:modelValue"],setup(t,{expose:n,emit:l}){const i=t,u=e.useAttrs(),a=e.useSlots(),{id:s,modifiers:d,iconPosition:v,icon:f,label:g,modelValue:b,disabled:y,toggle:h,unselectable:k}=function(t,o){const{group:n,isInGroup:r,getGroupOrLocalRef:l}=P(c),{id:i,iconPosition:u,icon:a,label:s,pressed:d,modifiers:v}=e.toRefs(t),f=l("modelValue",t,o),p=l("toggle",t),m=l("unselectable",t),g=e.computed((()=>(null==n?void 0:n.value.multiple.value)??!1)),b=e.computed((()=>{var e;return[...(null==v?void 0:v.value)?Array.isArray(v.value)?v.value:v.value.split(" "):[],...(null==(e=null==n?void 0:n.value.itemModifiers)?void 0:e.value)?Array.isArray(n.value.itemModifiers.value)?n.value.itemModifiers.value:n.value.itemModifiers.value.split(" "):[]]})),y=e.computed((()=>{var e;return Boolean(t.disabled||(null==(e=null==n?void 0:n.value)?void 0:e.disabled.value))}));return{group:n,isInGroup:r,modelValue:f,toggle:p,unselectable:m,multiple:g,modifiers:b,disabled:y,id:i,pressed:d,iconPosition:u,icon:a,label:s}}(i,l),S=(t=>e.computed((()=>String((null==t?void 0:t.value)||o.nanoid()))))(s),B=e.computed((()=>(null==u?void 0:u.name)||S.value)),x=e.ref(null);n({$el:e.computed((()=>{var e;return null==(e=x.value)?void 0:e.$el}))});const $=e.computed((()=>h.value?Array.isArray(b.value)?L(B.value,b.value):_(B.value,b.value):i.pressed)),w=p("vv-button",d,e.computed((()=>({reverse:[r.right,r.bottom].includes(v.value),column:[r.top,r.bottom].includes(v.value),"icon-only":Boolean((null==f?void 0:f.value)&&!(null==g?void 0:g.value)&&!a.default)})))),A=e.computed((()=>"string"==typeof(null==f?void 0:f.value)?{name:null==f?void 0:f.value}:null==f?void 0:f.value)),O=()=>{if(h.value){if(Array.isArray(b.value))return L(B.value,b.value)?void(k.value&&(b.value=b.value.filter((e=>e!==B.value)))):void b.value.push(B.value);if(_(B.value,b.value)&&k.value)return void(b.value=void 0);b.value=B.value}};return(t,o)=>(e.openBlock(),e.createBlock(j,e.mergeProps({disabled:e.unref(y),pressed:e.unref($),active:t.active,type:t.type,to:t.to,href:t.href,target:t.target,rel:t.rel},{id:e.unref(S),ref_key:"element",ref:x,class:e.unref(w),onClick:O}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[t.loading?e.renderSlot(t.$slots,"loading",{key:0},(()=>[t.loadingIcon?(e.openBlock(),e.createBlock(m,{key:0,class:"vv-button__loading-icon",name:t.loadingIcon},null,8,["name"])):e.createCommentVNode("",!0),t.loadingLabel?(e.openBlock(),e.createElementBlock("span",D,e.toDisplayString(t.loadingLabel),1)):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.renderSlot(t.$slots,"before"),e.unref(f)?(e.openBlock(),e.createBlock(m,e.mergeProps({key:0,class:"vv-button__icon"},e.unref(A)),null,16)):e.createCommentVNode("",!0),e.unref(g)?(e.openBlock(),e.createElementBlock("span",E,[e.renderSlot(t.$slots,"label",{},(()=>[e.createTextVNode(e.toDisplayString(e.unref(g)),1)]))])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"after")],64))]))])),_:3},16,["id","class"]))}})}));

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

@@ -1,8 +1,8 @@
-import { Side } from '@/constants';
+import { Side } from '../../constants';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     icon: (StringConstructor | ObjectConstructor)[];
     iconPosition: {
-        type: import("vue").PropType<Side>;
+        type: globalThis.PropType<"left" | "right" | "top" | "bottom">;
         default: Side;
         validator: (value: Side) => boolean;
     };
@@ -24,20 +24,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    modifiers: import("vue").PropType<string | string[]>;
+    modifiers: globalThis.PropType<string | string[]>;
     id: (StringConstructor | NumberConstructor)[];
     type: {
-        type: StringConstructor;
-        default: import("@/constants").ButtonType;
-        validator: (value: import("@/constants").ButtonType) => boolean;
+        type: globalThis.PropType<"button" | "submit" | "reset">;
+        default: import("../../constants").ButtonType;
+        validator: (value: import("../../constants").ButtonType) => boolean;
     };
     to: {
         type: (StringConstructor | ObjectConstructor)[];
     };
     href: StringConstructor;
     target: {
-        type: import("vue").PropType<import("@/constants").AnchorTarget>;
-        validator: (value: import("@/constants").AnchorTarget) => boolean;
+        type: globalThis.PropType<"_blank" | "_self" | "_parent" | "_top">;
+        validator: (value: import("../../constants").AnchorTarget) => boolean;
     };
     rel: {
         type: StringConstructor;
@@ -48,11 +48,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     label: (StringConstructor | NumberConstructor)[];
     disabled: BooleanConstructor;
 }, {
-    $el: import("vue").ComputedRef<HTMLElement | undefined>;
+    $el: globalThis.ComputedRef<HTMLElement | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     icon: (StringConstructor | ObjectConstructor)[];
     iconPosition: {
-        type: import("vue").PropType<Side>;
+        type: globalThis.PropType<"left" | "right" | "top" | "bottom">;
         default: Side;
         validator: (value: Side) => boolean;
     };
@@ -74,20 +74,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    modifiers: import("vue").PropType<string | string[]>;
+    modifiers: globalThis.PropType<string | string[]>;
     id: (StringConstructor | NumberConstructor)[];
     type: {
-        type: StringConstructor;
-        default: import("@/constants").ButtonType;
-        validator: (value: import("@/constants").ButtonType) => boolean;
+        type: globalThis.PropType<"button" | "submit" | "reset">;
+        default: import("../../constants").ButtonType;
+        validator: (value: import("../../constants").ButtonType) => boolean;
     };
     to: {
         type: (StringConstructor | ObjectConstructor)[];
     };
     href: StringConstructor;
     target: {
-        type: import("vue").PropType<import("@/constants").AnchorTarget>;
-        validator: (value: import("@/constants").AnchorTarget) => boolean;
+        type: globalThis.PropType<"_blank" | "_self" | "_parent" | "_top">;
+        validator: (value: import("../../constants").AnchorTarget) => boolean;
     };
     rel: {
         type: StringConstructor;
@@ -101,11 +101,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
-    type: string;
+    type: "button" | "submit" | "reset";
     rel: string;
     active: boolean;
     pressed: boolean;
-    iconPosition: Side;
+    iconPosition: "left" | "right" | "top" | "bottom";
     loadingIcon: string;
     toggle: boolean;
     loading: boolean;

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

@@ -1,6 +1,6 @@
 import type { Ref, PropType, ExtractPropTypes } from 'vue';
-import type { ButtonGroupState } from '@/types/group';
-import { Side } from '@/constants';
+import type { ButtonGroupState } from '../../types/group';
+import { Side } from '../../constants';
 export declare const VvButtonEvents: string[];
 export declare const VvButtonProps: {
     /**
@@ -11,7 +11,7 @@ export declare const VvButtonProps: {
      * Button icon position
      */
     iconPosition: {
-        type: PropType<Side>;
+        type: PropType<"left" | "right" | "top" | "bottom">;
         default: Side;
         validator: (value: Side) => boolean;
     };
@@ -39,17 +39,17 @@ export declare const VvButtonProps: {
     modifiers: PropType<string | string[]>;
     id: (StringConstructor | NumberConstructor)[];
     type: {
-        type: StringConstructor;
-        default: import("@/constants").ButtonType;
-        validator: (value: import("@/constants").ButtonType) => boolean;
+        type: PropType<"button" | "submit" | "reset">;
+        default: import("../../constants").ButtonType;
+        validator: (value: import("../../constants").ButtonType) => boolean;
     };
     to: {
         type: (StringConstructor | ObjectConstructor)[];
     };
     href: StringConstructor;
     target: {
-        type: PropType<import("@/constants").AnchorTarget>;
-        validator: (value: import("@/constants").AnchorTarget) => boolean;
+        type: PropType<"_blank" | "_self" | "_parent" | "_top">;
+        validator: (value: import("../../constants").AnchorTarget) => boolean;
     };
     rel: {
         type: StringConstructor;
@@ -66,16 +66,16 @@ export type VvButtonPropsTypes = ExtractPropTypes<typeof VvButtonProps>;
  */
 export declare function useGroupProps(props: VvButtonPropsTypes, emit: (event: (typeof VvButtonEvents)[number], value: unknown) => void): {
     group: Ref<ButtonGroupState> | undefined;
-    isInGroup: import("vue").ComputedRef<boolean>;
+    isInGroup: globalThis.ComputedRef<boolean>;
     modelValue: Ref<string | string[] | undefined>;
-    disabled: Ref<boolean>;
     toggle: Ref<boolean>;
     unselectable: Ref<boolean>;
-    multiple: Ref<boolean>;
+    multiple: globalThis.ComputedRef<boolean>;
+    modifiers: globalThis.ComputedRef<string[]>;
+    disabled: globalThis.ComputedRef<boolean>;
     id: Ref<string | number | undefined> | undefined;
-    modifiers: import("vue").ComputedRef<string[]>;
     pressed: Ref<boolean>;
-    iconPosition: Ref<Side>;
+    iconPosition: Ref<"left" | "right" | "top" | "bottom">;
     icon: Ref<string | Record<string, any> | undefined> | undefined;
     label: Ref<string | number | undefined> | undefined;
 };

package/dist/components/VvButtonGroup/VvButtonGroup.es.js

@@ -1,6 +1,42 @@
-import { isRef as O, provide as _, computed as d, unref as f, defineComponent as S, toRefs as j, watchEffect as E, openBlock as V, createElementBlock as A, normalizeClass as h, renderSlot as k } from "vue";
-var u = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t.top = "top", t.bottom = "bottom", t))(u || {}), c = /* @__PURE__ */ ((t) => (t.topStart = "top-start", t.topEnd = "top-end", t.bottomStart = "bottom-start", t.bottomEnd = "bottom-end", t.leftStart = "left-start", t.leftEnd = "left-end", t.rightStart = "right-start", t.rightEnd = "right-end", t))(c || {}), i = /* @__PURE__ */ ((t) => (t.before = "before", t.after = "after", t))(i || {}), p = /* @__PURE__ */ ((t) => (t.button = "button", t.submit = "submit", t.reset = "reset", t))(p || {}), b = /* @__PURE__ */ ((t) => (t._blank = "_blank", t._self = "_self", t._parent = "_parent", t._top = "_top", t))(b || {});
-const G = Symbol.for("buttonGroup"), C = {
+import { isRef, provide, computed, unref, defineComponent, toRefs, watchEffect, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  ButtonType2["reset"] = "reset";
+  return ButtonType2;
+})(ButtonType || {});
+var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
+const INJECTION_KEY_BUTTON_GROUP = Symbol.for("buttonGroup");
+const LinkProps = {
   /**
    * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
    * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
@@ -17,7 +53,7 @@ const G = Symbol.for("buttonGroup"), C = {
    */
   target: {
     type: String,
-    validator: (t) => Object.values(b).includes(t)
+    validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
    * Anchor rel
@@ -26,127 +62,273 @@ const G = Symbol.for("buttonGroup"), C = {
     type: String,
     default: "noopener noreferrer"
   }
-}, y = {
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, N = {
+};
+const ActiveProps = {
   /**
    * Whether the item is active
    */
   active: Boolean
-}, P = {
+};
+const PressedProps = {
   /**
    * Whether the item is pressed
    */
   pressed: Boolean
-}, $ = {
+};
+const LabelProps = {
   /**
    * The item label
    */
   label: [String, Number]
-}, M = {
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
 };
-i.before;
-const R = {
+({
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
+  icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
+  iconPosition: {
+    type: String,
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
+  }
+});
+const UnselectableProps = {
   /**
    * If true the input will be unselectable
    */
-  unselectable: { type: Boolean, default: !0 }
+  unselectable: { type: Boolean, default: true }
 };
-u.bottom;
 ({
-  ...y,
-  ...$,
-  ...P,
-  ...N,
-  ...C,
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
+  },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].includes(value);
+    }
+  },
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Close dropdown on click outside
+   */
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+({
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
   /**
    * Button type
    */
-  type: p.button
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
 });
-const U = {
-  ...M,
-  ...y,
-  ...R,
+const VvButtonGroupProps = {
+  ...ModifiersProps,
+  ...DisabledProps,
+  ...UnselectableProps,
   /**
    * String or String[] of css classes (modifiers) that will be provided to each button'
    */
   itemModifiers: { type: [String, Array], default: void 0 },
-  toggle: { type: Boolean, default: !1 },
-  multiple: { type: Boolean, default: !1 },
+  toggle: { type: Boolean, default: false },
+  multiple: { type: Boolean, default: false },
   modelValue: { type: [String, Array], default: void 0 }
-}, z = ["update:modelValue"];
-function I(t) {
-  if (Object.keys(t).some(
-    (e) => e !== "key" && !O(t[e])
+};
+const VvButtonGroupEvents = ["update:modelValue"];
+function useProvideGroupState(groupState) {
+  if (Object.keys(groupState).some(
+    (k) => k !== "key" && !isRef(groupState[k])
   ))
     throw Error("One or more groupState props aren't ref.");
-  _(
-    t.key,
-    d(() => t)
+  provide(
+    groupState.key,
+    computed(() => groupState)
   );
 }
-function L(t, e, o) {
-  return d(() => {
-    const l = {
-      [t]: !0
-    }, n = typeof (e == null ? void 0 : e.value) == "string" ? e.value.split(" ") : e == null ? void 0 : e.value;
-    return n && Array.isArray(n) && n.forEach((a) => {
-      l[`${t}--${a}`] = !0;
-    }), o && Object.keys(o.value).forEach((a) => {
-      l[`${t}--${a}`] = f(o.value[a]);
-    }), l;
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
   });
 }
-const D = {
+const __default__ = {
   name: "VvButtonGroup"
-}, K = /* @__PURE__ */ S({
-  ...D,
-  props: U,
-  emits: z,
-  setup(t, { emit: e }) {
-    const o = t, {
-      disabled: l,
-      toggle: n,
-      modifiers: a,
-      multiple: s,
-      unselectable: v,
-      itemModifiers: m
-    } = j(o);
-    E(() => {
-      typeof o.modelValue == "string" && s.value && console.warn(
-        "[VvButtonGroup]: modelValue is a string but multiple is true."
-      );
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvButtonGroupProps,
+  emits: VvButtonGroupEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const {
+      disabled,
+      toggle,
+      modifiers,
+      multiple,
+      unselectable,
+      itemModifiers
+    } = toRefs(props);
+    watchEffect(() => {
+      if (typeof props.modelValue === "string" && multiple.value) {
+        console.warn(
+          `[VvButtonGroup]: modelValue is a string but multiple is true.`
+        );
+      }
     });
-    const g = d({
-      get: () => s.value ? o.modelValue : Array.isArray(o.modelValue) ? o.modelValue[0] : o.modelValue,
-      set: (r) => (r !== void 0 && (Array.isArray(o.modelValue) || s.value) && !Array.isArray(r) && (r = [r]), e("update:modelValue", r))
+    const modelValue = computed({
+      get: () => {
+        if (!multiple.value) {
+          return Array.isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
+        }
+        return props.modelValue;
+      },
+      set: (newValue) => {
+        if (newValue !== void 0 && (Array.isArray(props.modelValue) || multiple.value) && !Array.isArray(newValue)) {
+          newValue = [newValue];
+        }
+        return emit("update:modelValue", newValue);
+      }
     });
-    I({
-      key: G,
-      modelValue: g,
-      disabled: l,
-      toggle: n,
-      multiple: s,
-      unselectable: v,
-      itemModifiers: m
+    useProvideGroupState({
+      key: INJECTION_KEY_BUTTON_GROUP,
+      modelValue,
+      disabled,
+      toggle,
+      multiple,
+      unselectable,
+      itemModifiers
     });
-    const B = L("vv-button-group", a);
-    return (r, F) => (V(), A("div", {
-      class: h(f(B)),
-      role: "group"
-    }, [
-      k(r.$slots, "default")
-    ], 2));
+    const bemCssClasses = useModifiers("vv-button-group", modifiers);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(bemCssClasses)),
+        role: "group"
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
   }
 });
 export {
-  K as default
+  _sfc_main as default
 };