@volverjs/ui-vue/dist/components/VvButton/VvButton.es.js

@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.

import{inject as e,computed as t,toRef as o,toRefs as r,defineComponent as n,getCurrentInstance as a,ref as l,watch as i,resolveComponent as u,createBlock as s,openBlock as c,resolveDynamicComponent as d,unref as v,mergeProps as f,withCtx as p,renderSlot as b,createTextVNode as g,toDisplayString as m,mergeDefaults as y,createCommentVNode as h,useId as $,useAttrs as S,useSlots as k,createElementBlock as w,Fragment as L}from"vue";import{iconLoaded as x,Icon as A,addIcon as B}from"@iconify/vue";var I=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(I||{}),O=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(O||{}),P=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(P||{}),j=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(j||{}),N=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(N||{});const V=Symbol.for("volver"),_=Symbol.for("buttonGroup"),F=Symbol.for("dropdownTrigger"),E=Symbol.for("dropdownAction"),M={prefix:"normal"},T={to:{type:[String,Object]},href:String,target:String,rel:{type:String,default:"noopener noreferrer"}},D={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},G={disabled:{type:Boolean,default:!1}},R={active:{type:Boolean,default:!1}},C={current:{type:Boolean,default:!1}},z={pressed:{type:Boolean,default:!1}},q={label:{type:[String,Number],default:void 0}},H={modifiers:{type:[String,Array],default:void 0}},J={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:P.before,validation:e=>Object.values(P).includes(e)}},K={unselectable:{type:Boolean,default:!0}},Q={id:[String,Number]};O.bottom;const U={...G,...q,...z,...R,...C,...T,type:{type:String,default:j.button,validator:e=>Object.values(j).includes(e)},ariaLabel:{type:String,default:void 0},defaultTag:{type:String,default:N.button}};I.local;const W={...U,...Q,...H,...K,...D,...J,iconPosition:{type:String,default:O.left,validator:e=>Object.values(O).includes(e)},loadingIcon:{type:String,default:"eos-icons:bubble-loading"},toggle:{type:Boolean,default:!1},value:{type:[String,Number,Boolean],default:void 0},uncheckedValue:{type:[String,Number,Boolean],default:void 0},modelValue:{type:[String,Number,Boolean],default:void 0}};function X(n,a){const{group:l,isInGroup:i,getGroupOrLocalRef:u}=function(r){const n=e(r,void 0),a=t(()=>void 0!==n);return{group:n,isInGroup:a,getGroupOrLocalRef:function(e,r,a){const l=n?.[e];if(l)return t({get:()=>l.value,set(e){l.value=e}});const i=o(r,e);return t({get:()=>i.value,set(t){a&&a(`update:${e}`,t)}})}}}(_),{id:s,iconPosition:c,icon:d,label:v,pressed:f}=r(n),p=u("modelValue",n,a),b=u("toggle",n),g=u("unselectable",n),m=t(()=>l?.multiple.value??!1),y=t(()=>{let e=n.modifiers,t=l?.modifiers.value;const o=/* @__PURE__ */new Set;return e&&(Array.isArray(e)||(e=e.split(" ")),e.forEach(e=>o.add(e))),t&&(Array.isArray(t)||(t=t.split(" ")),t.forEach(e=>o.add(e))),Array.from(o)}),h=t(()=>Boolean(n.disabled||l?.disabled.value));return{group:l,isInGroup:i,modelValue:p,toggle:b,unselectable:g,multiple:m,modifiers:y,disabled:h,id:s,pressed:f,iconPosition:c,icon:d,label:v}}function Y(){return e(V,void 0)}const Z=/* @__PURE__ */n({name:"VvAction",props:U,emits:["click","mouseover","mouseleave"],setup(o,{expose:r,emit:n}){const y=o,h=n,$=a(),S=Y(),k=l(null);r({$el:k});const{reference:w,bus:L,aria:x,expanded:A}=e(F,{});i(()=>k.value,e=>{w&&(w.value=e)});const B=t(()=>y.pressed||A?.value),{role:I}=e(E,{}),O=t(()=>{switch(!0){case y.disabled:return N.button;case void 0!==y.to:return S?.nuxt?u(N.nuxtLink):N.routerLink;case void 0!==y.href:return N.a;default:return y.defaultTag}}),P=t(()=>{const e={...x?.value,ariaPressed:!!B.value||void 0,ariaLabel:y.ariaLabel,role:I?.value};switch(O.value){case N.a:return{...e,href:y.href,target:y.target,rel:y.rel};case N.routerLink:case N.nuxtLink:return{...e,to:y.to,target:y.target};case N.button:return{...e,type:y.type,disabled:y.disabled};default:return e}});function j(e){y.disabled?e.preventDefault():$?.vnode.props?.onClick?h("click",e):L?.emit("click",e)}function V(e){$?.vnode.props?.onMouseover?h("mouseover",e):L?.emit("mouseover",e)}function _(e){$?.vnode.props?.onMouseleave?h("mouseleave",e):L?.emit("mouseleave",e)}return(e,t)=>(c(),s(d(v(O)),f(v(P),{ref_key:"element",ref:k,class:{active:e.active,pressed:v(B),disabled:e.disabled,current:e.current},onClickPassive:j,onMouseoverPassive:V,onMouseleavePassive:_}),{default:p(()=>[b(e.$slots,"default",{},()=>[g(m(e.label),1)])]),_:3},16,["class"]))}});function ee(e,o,r){return t(()=>{const t={[e]:!0},n="string"==typeof o?.value?o.value.split(" "):o?.value;return n&&Array.isArray(n)&&n.forEach(o=>{o&&(t[`${e}--${o}`]=!0)}),r&&Object.keys(r.value).forEach(o=>{t[`${e}--${o}`]=v(r.value[o])}),t})}const te=/* @__PURE__ */n({name:"VvIcon",props:/* @__PURE__ */y({name:{},color:{},width:{},height:{},provider:{},prefix:{},src:{},horizontalFlip:{type:Boolean},verticalFlip:{type:Boolean},flip:{},mode:{},inline:{type:Boolean},rotate:{},onLoad:{type:Function},svg:{},modifiers:{}},M),setup(e){const o=e,n=t(()=>"string"==typeof o.rotate?Number.parseFloat(o.rotate):o.rotate),a=l(!0),i=Y(),{modifiers:u}=r(o),d=ee("vv-icon",u),p=t(()=>o.provider||i?.iconsProvider),b=t(()=>{const e=o.name??"",t=`@${p.value}:${o.prefix}:${e}`;if(x(t))return t;const r=i?.iconsCollections.find(t=>{const o=`@${p.value}:${t.prefix}:${e}`;return x(o)});return r?`@${p.value}:${r.prefix}:${e}`:e});function g(e){const t=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),r=t?.innerHTML.trim()||"";t&&r&&B(`@${p.value}:${o.prefix}:${o.name}`,{body:r,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return i&&o.src&&!x(`@${p.value}:${o.prefix}:${o.name}`)&&(a.value=!1,i.fetchIcon(o.src).then(e=>{e&&(g(e),a.value=!0)}).catch(e=>{throw new Error(`Error during fetch icon: ${e?.message}`)})),o.svg&&g(o.svg),(t,o)=>v(a)?(c(),s(v(A),f({key:0,class:v(d)},{inline:e.inline,width:e.width,height:e.height,horizontalFlip:e.horizontalFlip,verticalFlip:e.verticalFlip,flip:e.flip,rotate:v(n),color:e.color,icon:v(b)},{onLoad:e.onLoad}),null,16,["class","onLoad"])):h("v-if",!0)}});function oe(e,t,o){return re(e,t)}function re(e,t){if(e===t)return!0;if(e&&t&&"object"==typeof e&&"object"==typeof t){const o=Array.isArray(e),r=Array.isArray(t);let n,a,l;if(o&&r){if(a=e.length,a!==t.length)return!1;for(n=a;0!==n--;)if(!re(e[n],t[n]))return!1;return!0}if(o!==r)return!1;const i=e instanceof Date,u=t instanceof Date;if(i!==u)return!1;if(i&&u)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(a=d.length,a!==Object.keys(t).length)return!1;for(n=a;0!==n--;)if(!Object.prototype.hasOwnProperty.call(t,d[n]))return!1;for(n=a;0!==n--;)if(l=d[n],!re(e[l],t[l]))return!1;return!0}return Number.isNaN(e)&&Number.isNaN(t)}function ne(e,t){if(null!=e&&t&&t.length)for(const o of t)if(oe(e,o))return!0;return!1}const ae={key:1,class:"vv-button__label"},le={key:1,class:"vv-button__label"},ie=/* @__PURE__ */n({name:"VvButton",inheritAttrs:!1,props:W,emits:["update:modelValue"],setup(e,{expose:o,emit:r}){const n=e,a=r,i=S(),u=k(),{id:d,modifiers:y,iconPosition:x,icon:A,label:B,modelValue:I,disabled:j,toggle:N,unselectable:V}=X(n,a),_=function(e){return t(()=>String(e?.value||$()))}(d),F=t(()=>i?.name||_.value),E=l(null);o({$el:t(()=>E.value?.$el)});const M=t(()=>N.value?Array.isArray(I.value)?ne(F.value,I.value):oe(F.value,I.value):n.pressed),T=ee("vv-button",y,t(()=>({reverse:[O.right,O.bottom].includes(x.value),column:[O.top,O.bottom].includes(x.value),"icon-only":Boolean(A?.value&&!B?.value&&!u.default)}))),{hasIcon:D}=function(e,o){const r=t(()=>"string"==typeof e?.value?{name:e?.value}:e?.value),n=t(()=>o?.value===P.before?r.value:void 0),a=t(()=>o?.value===P.after?r.value:void 0),l=t(()=>o?.value===O.left?r.value:void 0),i=t(()=>o?.value===O.right?r.value:void 0),u=t(()=>o?.value===O.top?r.value:void 0),s=t(()=>o?.value===O.bottom?r.value:void 0);return{hasIcon:r,hasIconLeft:l,hasIconRight:i,hasIconTop:u,hasIconBottom:s,hasIconBefore:n,hasIconAfter:a}}(A),G=t(()=>void 0!==n.value?n.value:F.value),R=t(()=>{if(N.value)return{onClick:C}});function C(){if(N.value){if(Array.isArray(I.value))return ne(G.value,I.value)?void(V.value&&(I.value=I.value.filter(e=>e!==G.value))):void I.value.push(G.value);if(G.value===I.value&&V.value)return void(I.value=n.uncheckedValue);I.value=G.value}}return(e,t)=>(c(),s(Z,f({...v(i),...v(R),disabled:v(j),pressed:v(M),active:e.active,type:e.type,to:e.to,href:e.href,target:e.target,rel:e.rel,ariaLabel:e.ariaLabel},{id:v(_),ref_key:"element",ref:E,class:v(T)}),{default:p(()=>[b(e.$slots,"default",{},()=>[e.loading?b(e.$slots,"loading",{key:0},()=>[e.loadingIcon?(c(),s(te,{key:0,class:"vv-button__loading-icon",name:e.loadingIcon},null,8,["name"])):h("v-if",!0),e.loadingLabel?(c(),w("span",ae,m(e.loadingLabel),1)):h("v-if",!0)]):(c(),w(L,{key:1},[b(e.$slots,"before"),v(D)?(c(),s(te,f({key:0},v(D),{class:"vv-button__icon"}),null,16)):h("v-if",!0),v(B)?(c(),w("span",le,[b(e.$slots,"label",{},()=>[g(m(v(B)),1)])])):h("v-if",!0),b(e.$slots,"after")],64))])]),_:3},16,["id","class"]))}});export{ie as default};