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

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

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