@todovue/tv-button
Version:
A customizable button component for TODOvue, supporting multiple variants, sizes, and icon modes.
2 lines (1 loc) • 10.2 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),S=(s,c)=>{const n=t.ref(!1),l=()=>{c("clickButton"),c("click")},d=o=>{n.value=o},i=o=>!o||o[0]!=="#"?o:`#${o.match(/\w\w/g).map(a=>parseInt(a,16)*.9).map(a=>Math.floor(a).toString(16).padStart(2,"0")).join("")}`,v=t.computed(()=>({"tv-btn-rounded":s.rounded,"tv-btn-full":s.full,"tv-btn-outlined":s.outlined,"tv-btn-text":s.text,"tv-btn-disabled":s.disabled||s.loading,"tv-btn-icon":s.type==="icon","tv-btn-icon-only":s.type==="icon"&&s.iconOnly,[`tv-btn-${s.size}`]:s.size&&s.size!=="md",[`tv-btn-${s.variant}`]:s.variant&&s.variant!=="default"})),h=t.computed(()=>{if(!s.customStyle)return{};const o={backgroundColor:s.customStyle.backgroundColor||"transparent",color:s.customStyle.color||"inherit",boxShadow:`0 0 5px ${s.customStyle.backgroundColor||"transparent"}`};return s.outlined?{backgroundColor:"transparent",border:`1px solid ${s.customStyle.backgroundColor}`,color:s.customStyle.backgroundColor,boxShadow:o.boxShadow}:o}),m=t.computed(()=>s.customStyle?s.outlined?{backgroundColor:s.customStyle.backgroundColor,color:s.customStyle.color}:{backgroundColor:i(s.customStyle.backgroundColor),boxShadow:"none"}:{});return{isHover:n,handleClick:l,manageHover:d,buttonClasses:v,buttonStyleCustom:h,buttonStyleHover:m}},C={class:"tv-btn-content"},B={key:1,class:"tv-btn-text"},w={__name:"TvButton",props:{buttonText:String,customStyle:Object,icon:String,iconColor:{type:String,default:"white"},iconPosition:{type:String,default:"right"},variant:{type:String,default:"primary",validator:s=>["primary","secondary","success","error","warning","info"].includes(s)},size:{type:String,default:"md",validator:s=>["sm","md","lg"].includes(s)},rounded:Boolean,disabled:Boolean,outlined:Boolean,loading:Boolean,iconOnly:Boolean,full:Boolean,text:Boolean,type:{type:String,default:"button"},ariaLabel:String,to:[String,Object],href:String,target:String,rel:String},emits:["clickButton","click"],setup(s,{emit:c}){const n=s,l=Object.assign({"../assets/icons/account.svg":()=>Promise.resolve().then(()=>require("./account-BlaNUSTz.cjs")).then(e=>e.default),"../assets/icons/add-user.svg":()=>Promise.resolve().then(()=>require("./add-user-jJHkLB-G.cjs")).then(e=>e.default),"../assets/icons/alert.svg":()=>Promise.resolve().then(()=>require("./alert-ymw8O2l4.cjs")).then(e=>e.default),"../assets/icons/arrow-down.svg":()=>Promise.resolve().then(()=>require("./arrow-down-DzmNfDG3.cjs")).then(e=>e.default),"../assets/icons/arrow-left.svg":()=>Promise.resolve().then(()=>require("./arrow-left-CFiTPcAT.cjs")).then(e=>e.default),"../assets/icons/arrow-right.svg":()=>Promise.resolve().then(()=>require("./arrow-right-BcEoSUmf.cjs")).then(e=>e.default),"../assets/icons/arrow-up.svg":()=>Promise.resolve().then(()=>require("./arrow-up-3FRVhwwN.cjs")).then(e=>e.default),"../assets/icons/block.svg":()=>Promise.resolve().then(()=>require("./block-C-lGEcge.cjs")).then(e=>e.default),"../assets/icons/calendar.svg":()=>Promise.resolve().then(()=>require("./calendar-CfJ2ycPn.cjs")).then(e=>e.default),"../assets/icons/cancel.svg":()=>Promise.resolve().then(()=>require("./cancel-CiWHv_-j.cjs")).then(e=>e.default),"../assets/icons/check.svg":()=>Promise.resolve().then(()=>require("./check-DMW_q8f_.cjs")).then(e=>e.default),"../assets/icons/clone.svg":()=>Promise.resolve().then(()=>require("./clone-D8LHKsvb.cjs")).then(e=>e.default),"../assets/icons/dark.svg":()=>Promise.resolve().then(()=>require("./dark-BxtooKob.cjs")).then(e=>e.default),"../assets/icons/dashboard.svg":()=>Promise.resolve().then(()=>require("./dashboard-CdCZShep.cjs")).then(e=>e.default),"../assets/icons/dots-vertical.svg":()=>Promise.resolve().then(()=>require("./dots-vertical-CC2UV9BW.cjs")).then(e=>e.default),"../assets/icons/double-arrow-left.svg":()=>Promise.resolve().then(()=>require("./double-arrow-left-DzCOg1fn.cjs")).then(e=>e.default),"../assets/icons/double-arrow-right.svg":()=>Promise.resolve().then(()=>require("./double-arrow-right-CiKatiKV.cjs")).then(e=>e.default),"../assets/icons/download.svg":()=>Promise.resolve().then(()=>require("./download-CLLgilLO.cjs")).then(e=>e.default),"../assets/icons/edit.svg":()=>Promise.resolve().then(()=>require("./edit-D4ugF4if.cjs")).then(e=>e.default),"../assets/icons/external-link.svg":()=>Promise.resolve().then(()=>require("./external-link-B7f1MvO_.cjs")).then(e=>e.default),"../assets/icons/eye-off.svg":()=>Promise.resolve().then(()=>require("./eye-off-DQYBkY7g.cjs")).then(e=>e.default),"../assets/icons/favorite.svg":()=>Promise.resolve().then(()=>require("./favorite-CpB43Koz.cjs")).then(e=>e.default),"../assets/icons/filter.svg":()=>Promise.resolve().then(()=>require("./filter-dgW0Coa1.cjs")).then(e=>e.default),"../assets/icons/folder.svg":()=>Promise.resolve().then(()=>require("./folder-_45ehXmK.cjs")).then(e=>e.default),"../assets/icons/help.svg":()=>Promise.resolve().then(()=>require("./help-B1WhwhKf.cjs")).then(e=>e.default),"../assets/icons/home.svg":()=>Promise.resolve().then(()=>require("./home-BBPjZpjn.cjs")).then(e=>e.default),"../assets/icons/image.svg":()=>Promise.resolve().then(()=>require("./image-CNidmHag.cjs")).then(e=>e.default),"../assets/icons/info.svg":()=>Promise.resolve().then(()=>require("./info-xtdyYEKX.cjs")).then(e=>e.default),"../assets/icons/light.svg":()=>Promise.resolve().then(()=>require("./light-CtOaVKEG.cjs")).then(e=>e.default),"../assets/icons/link.svg":()=>Promise.resolve().then(()=>require("./link-C6XTcgp5.cjs")).then(e=>e.default),"../assets/icons/loading.svg":()=>Promise.resolve().then(()=>require("./loading-JFVYW2uy.cjs")).then(e=>e.default),"../assets/icons/lock.svg":()=>Promise.resolve().then(()=>require("./lock-B26ihVso.cjs")).then(e=>e.default),"../assets/icons/login.svg":()=>Promise.resolve().then(()=>require("./login-CyHSufj3.cjs")).then(e=>e.default),"../assets/icons/logout.svg":()=>Promise.resolve().then(()=>require("./logout-DIuyXhNC.cjs")).then(e=>e.default),"../assets/icons/mail.svg":()=>Promise.resolve().then(()=>require("./mail-r8cjLrEo.cjs")).then(e=>e.default),"../assets/icons/menu.svg":()=>Promise.resolve().then(()=>require("./menu-JMAC-vMH.cjs")).then(e=>e.default),"../assets/icons/minus.svg":()=>Promise.resolve().then(()=>require("./minus-CXeKeW36.cjs")).then(e=>e.default),"../assets/icons/notification.svg":()=>Promise.resolve().then(()=>require("./notification-1Qyk3eej.cjs")).then(e=>e.default),"../assets/icons/plus.svg":()=>Promise.resolve().then(()=>require("./plus-BP-c2V6R.cjs")).then(e=>e.default),"../assets/icons/remove.svg":()=>Promise.resolve().then(()=>require("./remove-CoF_3Nmv.cjs")).then(e=>e.default),"../assets/icons/save.svg":()=>Promise.resolve().then(()=>require("./save-CLjUgwao.cjs")).then(e=>e.default),"../assets/icons/search.svg":()=>Promise.resolve().then(()=>require("./search-BjCaSbYh.cjs")).then(e=>e.default),"../assets/icons/settings.svg":()=>Promise.resolve().then(()=>require("./settings-CLjuTh1u.cjs")).then(e=>e.default),"../assets/icons/share.svg":()=>Promise.resolve().then(()=>require("./share-oqrgkV4n.cjs")).then(e=>e.default),"../assets/icons/star.svg":()=>Promise.resolve().then(()=>require("./star-CGryu42N.cjs")).then(e=>e.default),"../assets/icons/todovue.svg":()=>Promise.resolve().then(()=>require("./todovue-BkduMg7a.cjs")).then(e=>e.default),"../assets/icons/trash.svg":()=>Promise.resolve().then(()=>require("./trash-BfmSr3qJ.cjs")).then(e=>e.default),"../assets/icons/unlock.svg":()=>Promise.resolve().then(()=>require("./unlock-CH-dwDl8.cjs")).then(e=>e.default),"../assets/icons/update.svg":()=>Promise.resolve().then(()=>require("./update-CmH-RX_8.cjs")).then(e=>e.default),"../assets/icons/upload.svg":()=>Promise.resolve().then(()=>require("./upload-D-RdluJT.cjs")).then(e=>e.default),"../assets/icons/view.svg":()=>Promise.resolve().then(()=>require("./view-euJbAvMC.cjs")).then(e=>e.default)}),d=c,i=t.computed(()=>n.icon?n.icon:n.target==="_blank"?"external-link":null),v=t.computed(()=>{if(!i.value)return null;const e=`../assets/icons/${i.value}.svg`;return l[e]?t.defineAsyncComponent(async()=>{const r=await l[e]();return{template:'<span class="tv-icon-svg" v-html="content"></span>',setup(){return{content:r}}}}):null}),h=t.defineAsyncComponent(async()=>{const r=await l["../assets/icons/loading.svg"]();return{template:'<span class="tv-spinner" v-html="content"></span>',setup(){return{content:r}}}}),{buttonClasses:m,buttonStyleCustom:o,buttonStyleHover:g,isHover:a,handleClick:b,manageHover:f}=S(n,d),P=t.computed(()=>({...o.value,...a.value?g.value:{}})),y=t.computed(()=>!!(n.href||n.to)),q=t.computed(()=>n.to?"RouterLink":n.href?"a":"button");return(e,r)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(q.value),{href:s.href,to:s.to,target:s.target,rel:s.rel,"aria-label":s.ariaLabel,class:t.normalizeClass([t.unref(m),"tv-btn"]),disabled:s.disabled||s.loading,style:t.normalizeStyle(P.value),type:y.value?void 0:s.type,onClick:t.unref(b),onMouseleave:r[0]||(r[0]=k=>t.unref(f)(!1)),onMouseover:r[1]||(r[1]=k=>t.unref(f)(!0))},{default:t.withCtx(()=>[t.createElementVNode("span",C,[s.loading?(t.openBlock(),t.createBlock(t.Suspense,{key:0},{default:t.withCtx(()=>[t.createVNode(t.unref(h))]),_:1})):(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[i.value&&s.iconPosition==="left"?(t.openBlock(),t.createBlock(t.Suspense,{key:0},{default:t.withCtx(()=>[t.createVNode(t.unref(v),{class:"tv-icon icon-left"})]),_:1})):t.createCommentVNode("",!0),s.iconOnly?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",B,[s.buttonText?(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createTextVNode(t.toDisplayString(s.buttonText),1)],64)):t.renderSlot(e.$slots,"default",{key:1})])),i.value&&s.iconPosition==="right"?(t.openBlock(),t.createBlock(t.Suspense,{key:2},{default:t.withCtx(()=>[t.createVNode(t.unref(v),{class:"tv-icon icon-right"})]),_:1})):t.createCommentVNode("",!0)],64))])]),_:3},40,["href","to","target","rel","aria-label","class","disabled","style","type","onClick"]))}},u=w;u.install=s=>{s.component("TvButton",u)};const x={install:u.install};exports.TvButton=u;exports.TvButtonPlugin=x;exports.default=u;