@gits-id/button - npm Package Compare versions

Comparing version 0.12.0-alpha.0 to 0.12.0-alpha.1

dist/button.iife.js

@@ -1,1 +0,1 @@
-var VBtn=function(o,r,c){"use strict";const l=(a=>a&&typeof a=="object"&&"default"in a?a:{default:a})(c),b={key:0,class:"ml-2"},s=r.defineComponent({__name:"VBtn",props:{size:{type:String,default:"md",validator:a=>["xs","sm","md","lg","xl"].includes(a)},color:{type:String,default:"default"},to:{type:[String,Object],default:""},href:{type:String,default:""},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ring:{type:Boolean,default:!0},tile:{type:Boolean,default:!1},icon:{type:Boolean,default:!1},block:{type:Boolean,default:!1},type:{type:String,default:"button"},solid:{type:Boolean,default:!1},noRing:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingText:{type:String,default:""},newTab:{type:Boolean,default:!1},shadow:{type:Boolean,default:!1}},setup(a){const e=a,{disabled:g,loading:i,loadingText:d}=r.toRefs(e),y=r.computed(()=>e.to?"router-link":e.href?"a":"button"),p=r.computed(()=>{const t={};return e.to?t.to=e.to:e.href?t.href=e.href:t.type=e.type,t}),f=r.computed(()=>{switch(e.color){case"primary":case"info":case"warning":case"error":case"success":return"white";case"white":return"black";default:return e.color}}),u={default:"border-gray-400 text-gray-700 bg-white hover:border-gray-500 active:bg-gray-50 active:border-gray-600 active:text-gray-600",primary:"border-primary-500 bg-primary-500 text-white hover:bg-primary-600 hover:border-primary-600 active:bg-primary-400 active:border-primary-400",secondary:"border-secondary-500 bg-secondary-500 text-white hover:bg-secondary-600 hover:border-secondary-600 active:bg-secondary-400 active:border-secondary-400",info:"border-info-500 bg-info-500 text-white hover:bg-info-600 hover:border-info-600 active:bg-info-400 active:border-info-400",warning:"border-warning-500 bg-warning-500 text-white hover:bg-warning-600 hover:border-warning-600 active:bg-warning-400 active:border-warning-400",success:"border-success-500 bg-success-500 text-white hover:bg-success-600 hover:border-success-600 active:bg-success-400 active:border-success-400",error:"border-error-500 bg-error-500 text-white hover:bg-error-600 hover:border-error-600 active:bg-error-400 active:border-error-400",dark:"border-gray-800 bg-gray-800 text-white hover:bg-gray-900 hover:border-gray-900 active:bg-gray-700 active:border-gray-700"},h={default:"border-gray-400 text-gray-700 hover:bg-gray-700 hover:border-gray-700 hover:text-white active:bg-gray-50 active:border-gray-600 active:text-gray-600",primary:"border-primary-500 bg-transparent text-primary-500 hover:bg-primary-600 hover:border-primary-600 hover:text-white active:bg-primary-400 active:border-primary-400",secondary:"border-secondary-500 bg-transparent text-secondary-500 hover:bg-secondary-600 hover:border-secondary-600 hover:text-white active:bg-secondary-400 active:border-secondary-400",info:"border-info-500 bg-transparent text-info-500 hover:bg-info-600 hover:border-info-600 hover:text-white active:bg-info-400 active:border-info-400",warning:"border-warning-500 bg-transparent text-warning-500 hover:bg-warning-600 hover:border-warning-600 hover:text-white active:bg-warning-400 active:border-warning-400",success:"border-success-500 bg-transparent text-success-500 hover:bg-success-600 hover:border-success-600 hover:text-white active:bg-success-400 active:border-success-400",error:"border-error-500 bg-transparent text-error-500 hover:bg-error-600 hover:border-error-600 hover:text-white active:bg-error-400 active:border-error-400",dark:"border-gray-800 bg-transparent text-gray-800 hover:bg-gray-900 hover:border-gray-900 hover:text-white active:bg-gray-700 active:border-gray-700"},v={default:"border-transparent bg-transparent text-gray-700 hover:text-gray-900 active:text-gray-600",primary:"border-transparent bg-transparent text-primary-500 hover:text-primary-600 active:text-primary-400",secondary:"border-transparent bg-transparent text-secondary-500 hover:text-secondary-600 active:text-secondary-400",info:"border-transparent bg-transparent text-info-500 hover:text-info-600 active:text-info-400",warning:"border-transparent bg-transparent text-warning-500 hover:text-warning-600 active:text-warning-400",success:"border-transparent bg-transparent text-success-500 hover:text-success-600 active:text-success-400",error:"border-transparent bg-transparent text-error-500 hover:text-error-600 active:text-error-400",dark:"border-transparent bg-transparent text-gray-800 hover:text-gray-900 active:text-gray-600"},x={xs:"px-2 py-1 text-xs",sm:"px-3 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-5 py-3 text-lg",xl:"px-6 py-4 text-xl"},w={default:"",primary:"focus:ring-primary-300",secondary:"focus:ring-secondary-300",info:"focus:ring-info-300",warning:"focus:ring-warning-300",success:"focus:ring-success-300",error:"focus:ring-error-300",dark:"focus:ring-gray-300"},m=r.computed(()=>{let t=u[e.color];return e.outlined?t=h[e.color]:e.text&&(t=v[e.color]),t}),B=r.computed(()=>{let t="disabled:cursor-not-allowed disabled:shadow-none disabled:text-gray-400";e.outlined?t+=" disabled:border-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-400":t+=" disabled:bg-gray-300 disabled:border-gray-300";const n={default:"disabled:hover:bg-transparent disabled:active:bg-transparent",primary:"disabled:hover:bg-primary-500 disabled:hover:border-primary-500 disabled:active:bg-primary-500",secondary:"disabled:hover:bg-secondary-500 disabled:hover:border-secondary-500 disabled:active:bg-secondary-500",info:"disabled:hover:bg-info-500 disabled:hover:border-info-500 disabled:active:bg-info-500",warning:"disabled:hover:bg-warning-500 disabled:hover:border-warning-500 disabled:active:bg-warning-500",error:"disabled:hover:bg-error-500 disabled:hover:border-error-500 disabled:active:bg-error-500",success:"disabled:hover:bg-success-500 disabled:hover:border-success-500 disabled:active:bg-success-500",dark:"disabled:hover:bg-gray-800 disabled:hover:border-gray-800 disabled:active:bg-gray-800"};return e.loading?["disabled:cursor-not-allowed disabled:shadow-none",n[e.color]]:t}),k=r.computed(()=>{const t={xs:"w-[26px] h-[26px]",sm:"w-[34px] h-[34px]",md:"w-[42px] h-[42px]",lg:"w-[54px] h-[54px]",xl:"w-[62px] h-[62px]"},n={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"};return[t[e.size],e.text?"p-0":n[e.size]].join(" ")}),S=r.computed(()=>["inline-flex justify-center items-center border rounded-md font-medium transition duration-300",B.value,m.value,{"focus:ring focus:ring-offset-2 focus:outline-none":!e.noRing,[w[e.color]]:!e.noRing,"rounded-full":e.rounded,"rounded-none":e.tile,shadow:e.shadow,"w-full":e.block,"btn-loading":e.loading,[x[e.size]]:!e.icon,[k.value]:e.icon}]);return(t,n)=>(r.openBlock(),r.createBlock(r.resolveDynamicComponent(r.unref(y)),r.mergeProps({class:r.unref(S),rel:a.newTab?"noopener":"",target:a.newTab?"_blank":"",disabled:r.unref(g)||r.unref(i)},{...r.unref(p),...t.$attrs}),{default:r.withCtx(()=>[r.unref(i)?r.renderSlot(t.$slots,"loading",{key:0},()=>[r.createVNode(r.unref(l.default),{color:r.unref(f)},null,8,["color"]),r.unref(d)?(r.openBlock(),r.createElementBlock("span",b,r.toDisplayString(r.unref(d)),1)):r.createCommentVNode("",!0)]):r.renderSlot(t.$slots,"default",{key:1})]),_:3},16,["class","rel","target","disabled"]))}});return o.VBtn=s,o.default=s,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),o}({},Vue,VSpinner);
+var VBtn=function(l,e,r){"use strict";const d=(o=>o&&typeof o=="object"&&"default"in o?o:{default:o})(r),i={key:0,class:"ml-2"},a=e.defineComponent({__name:"VBtn",props:{color:{default:"default"},size:{default:"md"},to:null,href:null,text:{type:Boolean},outlined:{type:Boolean},rounded:{type:Boolean},disabled:{type:Boolean},noRing:{type:Boolean},tile:{type:Boolean},block:{type:Boolean},shadow:{type:Boolean},icon:{type:Boolean},loading:{type:Boolean},loadingText:{default:"Loading..."},newTab:{type:Boolean},type:{default:"button"},ring:{type:Boolean},solid:{type:Boolean},fab:{type:Boolean}},setup(o){const t=o,c=e.computed(()=>t.to?e.resolveComponent("router-link"):t.href?"a":"button"),s=e.computed(()=>{const n={};return t.to?n.to=t.to:t.href?n.href=t.href:n.type=t.type,n}),f=e.computed(()=>["btn",`btn-${t.color}`,`btn--${t.size}`,{"btn--ring":!t.noRing,"btn--rounded":t.rounded,"btn--fab":t.fab,"btn--tile":t.tile,"btn--block":t.block,"btn--loading":t.loading,shadow:t.shadow}]);return(n,b)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),e.mergeProps({class:e.unref(f),rel:o.newTab?"noopener":"",target:o.newTab?"_blank":"",disabled:o.disabled||o.loading},{...e.unref(s),...n.$attrs}),{default:e.withCtx(()=>[o.loading?e.renderSlot(n.$slots,"loading",{key:0},()=>[e.createVNode(e.unref(d.default),{color:o.color},null,8,["color"]),o.loadingText?(e.openBlock(),e.createElementBlock("span",i,e.toDisplayString(o.loadingText),1)):e.createCommentVNode("",!0)]):e.renderSlot(n.$slots,"default",{key:1})]),_:3},16,["class","rel","target","disabled"]))}});return l.VBtn=a,l.default=a,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),l}({},Vue,VSpinner);

dist/button.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),m=require("@gits-id/spinner"),B=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},k=B(m),S={key:0,class:"ml-2"},i=r.defineComponent({__name:"VBtn",props:{size:{type:String,default:"md",validator:a=>["xs","sm","md","lg","xl"].includes(a)},color:{type:String,default:"default"},to:{type:[String,Object],default:""},href:{type:String,default:""},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ring:{type:Boolean,default:!0},tile:{type:Boolean,default:!1},icon:{type:Boolean,default:!1},block:{type:Boolean,default:!1},type:{type:String,default:"button"},solid:{type:Boolean,default:!1},noRing:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingText:{type:String,default:""},newTab:{type:Boolean,default:!1},shadow:{type:Boolean,default:!1}},setup(a){const e=a,{disabled:d,loading:n,loadingText:s}=r.toRefs(e),c=r.computed(()=>e.to?"router-link":e.href?"a":"button"),l=r.computed(()=>{const t={};return e.to?t.to=e.to:e.href?t.href=e.href:t.type=e.type,t}),b=r.computed(()=>{switch(e.color){case"primary":case"info":case"warning":case"error":case"success":return"white";case"white":return"black";default:return e.color}}),g={default:"border-gray-400 text-gray-700 bg-white hover:border-gray-500 active:bg-gray-50 active:border-gray-600 active:text-gray-600",primary:"border-primary-500 bg-primary-500 text-white hover:bg-primary-600 hover:border-primary-600 active:bg-primary-400 active:border-primary-400",secondary:"border-secondary-500 bg-secondary-500 text-white hover:bg-secondary-600 hover:border-secondary-600 active:bg-secondary-400 active:border-secondary-400",info:"border-info-500 bg-info-500 text-white hover:bg-info-600 hover:border-info-600 active:bg-info-400 active:border-info-400",warning:"border-warning-500 bg-warning-500 text-white hover:bg-warning-600 hover:border-warning-600 active:bg-warning-400 active:border-warning-400",success:"border-success-500 bg-success-500 text-white hover:bg-success-600 hover:border-success-600 active:bg-success-400 active:border-success-400",error:"border-error-500 bg-error-500 text-white hover:bg-error-600 hover:border-error-600 active:bg-error-400 active:border-error-400",dark:"border-gray-800 bg-gray-800 text-white hover:bg-gray-900 hover:border-gray-900 active:bg-gray-700 active:border-gray-700"},u={default:"border-gray-400 text-gray-700 hover:bg-gray-700 hover:border-gray-700 hover:text-white active:bg-gray-50 active:border-gray-600 active:text-gray-600",primary:"border-primary-500 bg-transparent text-primary-500 hover:bg-primary-600 hover:border-primary-600 hover:text-white active:bg-primary-400 active:border-primary-400",secondary:"border-secondary-500 bg-transparent text-secondary-500 hover:bg-secondary-600 hover:border-secondary-600 hover:text-white active:bg-secondary-400 active:border-secondary-400",info:"border-info-500 bg-transparent text-info-500 hover:bg-info-600 hover:border-info-600 hover:text-white active:bg-info-400 active:border-info-400",warning:"border-warning-500 bg-transparent text-warning-500 hover:bg-warning-600 hover:border-warning-600 hover:text-white active:bg-warning-400 active:border-warning-400",success:"border-success-500 bg-transparent text-success-500 hover:bg-success-600 hover:border-success-600 hover:text-white active:bg-success-400 active:border-success-400",error:"border-error-500 bg-transparent text-error-500 hover:bg-error-600 hover:border-error-600 hover:text-white active:bg-error-400 active:border-error-400",dark:"border-gray-800 bg-transparent text-gray-800 hover:bg-gray-900 hover:border-gray-900 hover:text-white active:bg-gray-700 active:border-gray-700"},y={default:"border-transparent bg-transparent text-gray-700 hover:text-gray-900 active:text-gray-600",primary:"border-transparent bg-transparent text-primary-500 hover:text-primary-600 active:text-primary-400",secondary:"border-transparent bg-transparent text-secondary-500 hover:text-secondary-600 active:text-secondary-400",info:"border-transparent bg-transparent text-info-500 hover:text-info-600 active:text-info-400",warning:"border-transparent bg-transparent text-warning-500 hover:text-warning-600 active:text-warning-400",success:"border-transparent bg-transparent text-success-500 hover:text-success-600 active:text-success-400",error:"border-transparent bg-transparent text-error-500 hover:text-error-600 active:text-error-400",dark:"border-transparent bg-transparent text-gray-800 hover:text-gray-900 active:text-gray-600"},p={xs:"px-2 py-1 text-xs",sm:"px-3 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-5 py-3 text-lg",xl:"px-6 py-4 text-xl"},v={default:"",primary:"focus:ring-primary-300",secondary:"focus:ring-secondary-300",info:"focus:ring-info-300",warning:"focus:ring-warning-300",success:"focus:ring-success-300",error:"focus:ring-error-300",dark:"focus:ring-gray-300"},f=r.computed(()=>{let t=g[e.color];return e.outlined?t=u[e.color]:e.text&&(t=y[e.color]),t}),h=r.computed(()=>{let t="disabled:cursor-not-allowed disabled:shadow-none disabled:text-gray-400";e.outlined?t+=" disabled:border-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-400":t+=" disabled:bg-gray-300 disabled:border-gray-300";const o={default:"disabled:hover:bg-transparent disabled:active:bg-transparent",primary:"disabled:hover:bg-primary-500 disabled:hover:border-primary-500 disabled:active:bg-primary-500",secondary:"disabled:hover:bg-secondary-500 disabled:hover:border-secondary-500 disabled:active:bg-secondary-500",info:"disabled:hover:bg-info-500 disabled:hover:border-info-500 disabled:active:bg-info-500",warning:"disabled:hover:bg-warning-500 disabled:hover:border-warning-500 disabled:active:bg-warning-500",error:"disabled:hover:bg-error-500 disabled:hover:border-error-500 disabled:active:bg-error-500",success:"disabled:hover:bg-success-500 disabled:hover:border-success-500 disabled:active:bg-success-500",dark:"disabled:hover:bg-gray-800 disabled:hover:border-gray-800 disabled:active:bg-gray-800"};return e.loading?["disabled:cursor-not-allowed disabled:shadow-none",o[e.color]]:t}),x=r.computed(()=>{const t={xs:"w-[26px] h-[26px]",sm:"w-[34px] h-[34px]",md:"w-[42px] h-[42px]",lg:"w-[54px] h-[54px]",xl:"w-[62px] h-[62px]"},o={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"};return[t[e.size],e.text?"p-0":o[e.size]].join(" ")}),w=r.computed(()=>["inline-flex justify-center items-center border rounded-md font-medium transition duration-300",h.value,f.value,{"focus:ring focus:ring-offset-2 focus:outline-none":!e.noRing,[v[e.color]]:!e.noRing,"rounded-full":e.rounded,"rounded-none":e.tile,shadow:e.shadow,"w-full":e.block,"btn-loading":e.loading,[p[e.size]]:!e.icon,[x.value]:e.icon}]);return(t,o)=>(r.openBlock(),r.createBlock(r.resolveDynamicComponent(r.unref(c)),r.mergeProps({class:r.unref(w),rel:a.newTab?"noopener":"",target:a.newTab?"_blank":"",disabled:r.unref(d)||r.unref(n)},{...r.unref(l),...t.$attrs}),{default:r.withCtx(()=>[r.unref(n)?r.renderSlot(t.$slots,"loading",{key:0},()=>[r.createVNode(r.unref(k.default),{color:r.unref(b)},null,8,["color"]),r.unref(s)?(r.openBlock(),r.createElementBlock("span",S,r.toDisplayString(r.unref(s)),1)):r.createCommentVNode("",!0)]):r.renderSlot(t.$slots,"default",{key:1})]),_:3},16,["class","rel","target","disabled"]))}});exports.VBtn=i;exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),i=require("@gits-id/spinner"),u=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},s=u(i),c={key:0,class:"ml-2"},l=e.defineComponent({__name:"VBtn",props:{color:{default:"default"},size:{default:"md"},to:null,href:null,text:{type:Boolean},outlined:{type:Boolean},rounded:{type:Boolean},disabled:{type:Boolean},noRing:{type:Boolean},tile:{type:Boolean},block:{type:Boolean},shadow:{type:Boolean},icon:{type:Boolean},loading:{type:Boolean},loadingText:{default:"Loading..."},newTab:{type:Boolean},type:{default:"button"},ring:{type:Boolean},solid:{type:Boolean},fab:{type:Boolean}},setup(o){const t=o,a=e.computed(()=>t.to?e.resolveComponent("router-link"):t.href?"a":"button"),r=e.computed(()=>{const n={};return t.to?n.to=t.to:t.href?n.href=t.href:n.type=t.type,n}),d=e.computed(()=>["btn",`btn-${t.color}`,`btn--${t.size}`,{"btn--ring":!t.noRing,"btn--rounded":t.rounded,"btn--fab":t.fab,"btn--tile":t.tile,"btn--block":t.block,"btn--loading":t.loading,shadow:t.shadow}]);return(n,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),e.mergeProps({class:e.unref(d),rel:o.newTab?"noopener":"",target:o.newTab?"_blank":"",disabled:o.disabled||o.loading},{...e.unref(r),...n.$attrs}),{default:e.withCtx(()=>[o.loading?e.renderSlot(n.$slots,"loading",{key:0},()=>[e.createVNode(e.unref(s.default),{color:o.color},null,8,["color"]),o.loadingText?(e.openBlock(),e.createElementBlock("span",c,e.toDisplayString(o.loadingText),1)):e.createCommentVNode("",!0)]):e.renderSlot(n.$slots,"default",{key:1})]),_:3},16,["class","rel","target","disabled"]))}});exports.VBtn=l;exports.default=l;

dist/button.umd.js

@@ -1,1 +0,1 @@
-(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@gits-id/spinner")):typeof define=="function"&&define.amd?define(["exports","vue","@gits-id/spinner"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.VBtn={},a.Vue,a.VSpinner))})(this,function(a,e,c){"use strict";const l=(o=>o&&typeof o=="object"&&"default"in o?o:{default:o})(c),b={key:0,class:"ml-2"},s=e.defineComponent({__name:"VBtn",props:{size:{type:String,default:"md",validator:o=>["xs","sm","md","lg","xl"].includes(o)},color:{type:String,default:"default"},to:{type:[String,Object],default:""},href:{type:String,default:""},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ring:{type:Boolean,default:!0},tile:{type:Boolean,default:!1},icon:{type:Boolean,default:!1},block:{type:Boolean,default:!1},type:{type:String,default:"button"},solid:{type:Boolean,default:!1},noRing:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingText:{type:String,default:""},newTab:{type:Boolean,default:!1},shadow:{type:Boolean,default:!1}},setup(o){const r=o,{disabled:g,loading:i,loadingText:d}=e.toRefs(r),p=e.computed(()=>r.to?"router-link":r.href?"a":"button"),f=e.computed(()=>{const t={};return r.to?t.to=r.to:r.href?t.href=r.href:t.type=r.type,t}),y=e.computed(()=>{switch(r.color){case"primary":case"info":case"warning":case"error":case"success":return"white";case"white":return"black";default:return r.color}}),u={default:"border-gray-400 text-gray-700 bg-white hover:border-gray-500 active:bg-gray-50 active:border-gray-600 active:text-gray-600",primary:"border-primary-500 bg-primary-500 text-white hover:bg-primary-600 hover:border-primary-600 active:bg-primary-400 active:border-primary-400",secondary:"border-secondary-500 bg-secondary-500 text-white hover:bg-secondary-600 hover:border-secondary-600 active:bg-secondary-400 active:border-secondary-400",info:"border-info-500 bg-info-500 text-white hover:bg-info-600 hover:border-info-600 active:bg-info-400 active:border-info-400",warning:"border-warning-500 bg-warning-500 text-white hover:bg-warning-600 hover:border-warning-600 active:bg-warning-400 active:border-warning-400",success:"border-success-500 bg-success-500 text-white hover:bg-success-600 hover:border-success-600 active:bg-success-400 active:border-success-400",error:"border-error-500 bg-error-500 text-white hover:bg-error-600 hover:border-error-600 active:bg-error-400 active:border-error-400",dark:"border-gray-800 bg-gray-800 text-white hover:bg-gray-900 hover:border-gray-900 active:bg-gray-700 active:border-gray-700"},h={default:"border-gray-400 text-gray-700 hover:bg-gray-700 hover:border-gray-700 hover:text-white active:bg-gray-50 active:border-gray-600 active:text-gray-600",primary:"border-primary-500 bg-transparent text-primary-500 hover:bg-primary-600 hover:border-primary-600 hover:text-white active:bg-primary-400 active:border-primary-400",secondary:"border-secondary-500 bg-transparent text-secondary-500 hover:bg-secondary-600 hover:border-secondary-600 hover:text-white active:bg-secondary-400 active:border-secondary-400",info:"border-info-500 bg-transparent text-info-500 hover:bg-info-600 hover:border-info-600 hover:text-white active:bg-info-400 active:border-info-400",warning:"border-warning-500 bg-transparent text-warning-500 hover:bg-warning-600 hover:border-warning-600 hover:text-white active:bg-warning-400 active:border-warning-400",success:"border-success-500 bg-transparent text-success-500 hover:bg-success-600 hover:border-success-600 hover:text-white active:bg-success-400 active:border-success-400",error:"border-error-500 bg-transparent text-error-500 hover:bg-error-600 hover:border-error-600 hover:text-white active:bg-error-400 active:border-error-400",dark:"border-gray-800 bg-transparent text-gray-800 hover:bg-gray-900 hover:border-gray-900 hover:text-white active:bg-gray-700 active:border-gray-700"},v={default:"border-transparent bg-transparent text-gray-700 hover:text-gray-900 active:text-gray-600",primary:"border-transparent bg-transparent text-primary-500 hover:text-primary-600 active:text-primary-400",secondary:"border-transparent bg-transparent text-secondary-500 hover:text-secondary-600 active:text-secondary-400",info:"border-transparent bg-transparent text-info-500 hover:text-info-600 active:text-info-400",warning:"border-transparent bg-transparent text-warning-500 hover:text-warning-600 active:text-warning-400",success:"border-transparent bg-transparent text-success-500 hover:text-success-600 active:text-success-400",error:"border-transparent bg-transparent text-error-500 hover:text-error-600 active:text-error-400",dark:"border-transparent bg-transparent text-gray-800 hover:text-gray-900 active:text-gray-600"},x={xs:"px-2 py-1 text-xs",sm:"px-3 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-5 py-3 text-lg",xl:"px-6 py-4 text-xl"},m={default:"",primary:"focus:ring-primary-300",secondary:"focus:ring-secondary-300",info:"focus:ring-info-300",warning:"focus:ring-warning-300",success:"focus:ring-success-300",error:"focus:ring-error-300",dark:"focus:ring-gray-300"},w=e.computed(()=>{let t=u[r.color];return r.outlined?t=h[r.color]:r.text&&(t=v[r.color]),t}),B=e.computed(()=>{let t="disabled:cursor-not-allowed disabled:shadow-none disabled:text-gray-400";r.outlined?t+=" disabled:border-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-400":t+=" disabled:bg-gray-300 disabled:border-gray-300";const n={default:"disabled:hover:bg-transparent disabled:active:bg-transparent",primary:"disabled:hover:bg-primary-500 disabled:hover:border-primary-500 disabled:active:bg-primary-500",secondary:"disabled:hover:bg-secondary-500 disabled:hover:border-secondary-500 disabled:active:bg-secondary-500",info:"disabled:hover:bg-info-500 disabled:hover:border-info-500 disabled:active:bg-info-500",warning:"disabled:hover:bg-warning-500 disabled:hover:border-warning-500 disabled:active:bg-warning-500",error:"disabled:hover:bg-error-500 disabled:hover:border-error-500 disabled:active:bg-error-500",success:"disabled:hover:bg-success-500 disabled:hover:border-success-500 disabled:active:bg-success-500",dark:"disabled:hover:bg-gray-800 disabled:hover:border-gray-800 disabled:active:bg-gray-800"};return r.loading?["disabled:cursor-not-allowed disabled:shadow-none",n[r.color]]:t}),k=e.computed(()=>{const t={xs:"w-[26px] h-[26px]",sm:"w-[34px] h-[34px]",md:"w-[42px] h-[42px]",lg:"w-[54px] h-[54px]",xl:"w-[62px] h-[62px]"},n={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"};return[t[r.size],r.text?"p-0":n[r.size]].join(" ")}),S=e.computed(()=>["inline-flex justify-center items-center border rounded-md font-medium transition duration-300",B.value,w.value,{"focus:ring focus:ring-offset-2 focus:outline-none":!r.noRing,[m[r.color]]:!r.noRing,"rounded-full":r.rounded,"rounded-none":r.tile,shadow:r.shadow,"w-full":r.block,"btn-loading":r.loading,[x[r.size]]:!r.icon,[k.value]:r.icon}]);return(t,n)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),e.mergeProps({class:e.unref(S),rel:o.newTab?"noopener":"",target:o.newTab?"_blank":"",disabled:e.unref(g)||e.unref(i)},{...e.unref(f),...t.$attrs}),{default:e.withCtx(()=>[e.unref(i)?e.renderSlot(t.$slots,"loading",{key:0},()=>[e.createVNode(e.unref(l.default),{color:e.unref(y)},null,8,["color"]),e.unref(d)?(e.openBlock(),e.createElementBlock("span",b,e.toDisplayString(e.unref(d)),1)):e.createCommentVNode("",!0)]):e.renderSlot(t.$slots,"default",{key:1})]),_:3},16,["class","rel","target","disabled"]))}});a.VBtn=s,a.default=s,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@gits-id/spinner")):typeof define=="function"&&define.amd?define(["exports","vue","@gits-id/spinner"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.VBtn={},o.Vue,o.VSpinner))})(this,function(o,e,i){"use strict";const d=(n=>n&&typeof n=="object"&&"default"in n?n:{default:n})(i),r={key:0,class:"ml-2"},a=e.defineComponent({__name:"VBtn",props:{color:{default:"default"},size:{default:"md"},to:null,href:null,text:{type:Boolean},outlined:{type:Boolean},rounded:{type:Boolean},disabled:{type:Boolean},noRing:{type:Boolean},tile:{type:Boolean},block:{type:Boolean},shadow:{type:Boolean},icon:{type:Boolean},loading:{type:Boolean},loadingText:{default:"Loading..."},newTab:{type:Boolean},type:{default:"button"},ring:{type:Boolean},solid:{type:Boolean},fab:{type:Boolean}},setup(n){const t=n,s=e.computed(()=>t.to?e.resolveComponent("router-link"):t.href?"a":"button"),f=e.computed(()=>{const l={};return t.to?l.to=t.to:t.href?l.href=t.href:l.type=t.type,l}),c=e.computed(()=>["btn",`btn-${t.color}`,`btn--${t.size}`,{"btn--ring":!t.noRing,"btn--rounded":t.rounded,"btn--fab":t.fab,"btn--tile":t.tile,"btn--block":t.block,"btn--loading":t.loading,shadow:t.shadow}]);return(l,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),e.mergeProps({class:e.unref(c),rel:n.newTab?"noopener":"",target:n.newTab?"_blank":"",disabled:n.disabled||n.loading},{...e.unref(f),...l.$attrs}),{default:e.withCtx(()=>[n.loading?e.renderSlot(l.$slots,"loading",{key:0},()=>[e.createVNode(e.unref(d.default),{color:n.color},null,8,["color"]),n.loadingText?(e.openBlock(),e.createElementBlock("span",r,e.toDisplayString(n.loadingText),1)):e.createCommentVNode("",!0)]):e.renderSlot(l.$slots,"default",{key:1})]),_:3},16,["class","rel","target","disabled"]))}});o.VBtn=a,o.default=a,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

dist/types/VBtn.vue.d.ts

@@ -0,1 +1,32 @@
+import type { DefaultColors, DefaultSizes } from '@gits-id/theme/defaultTheme';
+import type { RouteLocationRaw } from 'vue-router';
+export declare type ButtonColors = DefaultColors | 'default' | string;
+export interface Props {
+    color?: ButtonColors;
+    size?: DefaultSizes;
+    to?: RouteLocationRaw;
+    href?: string;
+    text?: boolean;
+    outlined?: boolean;
+    rounded?: boolean;
+    disabled?: boolean;
+    noRing?: boolean;
+    tile?: boolean;
+    block?: boolean;
+    shadow?: boolean;
+    icon?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    newTab?: boolean;
+    type?: 'submit' | 'reset' | 'button';
+    /**
+     * @deprecated
+     */
+    ring?: boolean;
+    /**
+     * @deprecated
+     */
+    solid?: boolean;
+    fab?: boolean;
+}
 declare const _default: {
@@ -6,100 +37,12 @@ new (...args: any[]): {
         $props: Partial<{
-            text: boolean;
+            color: string;
             size: string;
+            loadingText: string;
+            type: "button" | "submit" | "reset";
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+            size: string;
             color: string;
-            to: string | Record<string, any>;
-            href: string;
-            outlined: boolean;
-            rounded: boolean;
-            disabled: boolean;
-            ring: boolean;
-            tile: boolean;
-            icon: boolean;
-            block: boolean;
             type: string;
-            solid: boolean;
-            noRing: boolean;
-            loading: boolean;
             loadingText: string;
-            newTab: boolean;
-            shadow: boolean;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            size: {
-                type: StringConstructor;
-                default: string;
-                validator: (v: string) => boolean;
-            };
-            color: {
-                type: StringConstructor;
-                default: string;
-            };
-            to: {
-                type: (StringConstructor | ObjectConstructor)[];
-                default: string;
-            };
-            href: {
-                type: StringConstructor;
-                default: string;
-            };
-            text: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            outlined: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            rounded: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            disabled: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            ring: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            tile: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            icon: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            block: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            type: {
-                type: StringConstructor;
-                default: string;
-            };
-            solid: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            noRing: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            loading: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            loadingText: {
-                type: StringConstructor;
-                default: string;
-            };
-            newTab: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            shadow: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "text" | "size" | "color" | "to" | "href" | "outlined" | "rounded" | "disabled" | "ring" | "tile" | "icon" | "block" | "type" | "solid" | "noRing" | "loading" | "loadingText" | "newTab" | "shadow">;
+        }>>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "color" | "size" | "loadingText" | "type">;
         $attrs: {
@@ -118,100 +61,12 @@ [x: string]: unknown;
         $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            size: {
-                type: StringConstructor;
-                default: string;
-                validator: (v: string) => boolean;
-            };
-            color: {
-                type: StringConstructor;
-                default: string;
-            };
-            to: {
-                type: (StringConstructor | ObjectConstructor)[];
-                default: string;
-            };
-            href: {
-                type: StringConstructor;
-                default: string;
-            };
-            text: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            outlined: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            rounded: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            disabled: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            ring: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            tile: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            icon: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            block: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            type: {
-                type: StringConstructor;
-                default: string;
-            };
-            solid: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            noRing: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            loading: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            loadingText: {
-                type: StringConstructor;
-                default: string;
-            };
-            newTab: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            shadow: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
-            text: boolean;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
             size: string;
             color: string;
-            to: string | Record<string, any>;
-            href: string;
-            outlined: boolean;
-            rounded: boolean;
-            disabled: boolean;
-            ring: boolean;
-            tile: boolean;
-            icon: boolean;
-            block: boolean;
             type: string;
-            solid: boolean;
-            noRing: boolean;
-            loading: boolean;
             loadingText: string;
-            newTab: boolean;
-            shadow: boolean;
+        }>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            color: string;
+            size: string;
+            loadingText: string;
+            type: "button" | "submit" | "reset";
         }> & {
@@ -237,185 +92,41 @@ beforeCreate?: ((() => void) | (() => void)[]) | undefined;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<{
-        size: {
-            type: StringConstructor;
-            default: string;
-            validator: (v: string) => boolean;
-        };
-        color: {
-            type: StringConstructor;
-            default: string;
-        };
-        to: {
-            type: (StringConstructor | ObjectConstructor)[];
-            default: string;
-        };
-        href: {
-            type: StringConstructor;
-            default: string;
-        };
-        text: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        outlined: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        rounded: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        ring: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        tile: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        icon: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        block: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        type: {
-            type: StringConstructor;
-            default: string;
-        };
-        solid: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        noRing: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        loading: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        loadingText: {
-            type: StringConstructor;
-            default: string;
-        };
-        newTab: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        shadow: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
+    } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+        size: string;
+        color: string;
+        type: string;
+        loadingText: string;
+    }>>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: StringConstructor;
-        default: string;
-        validator: (v: string) => boolean;
-    };
-    color: {
-        type: StringConstructor;
-        default: string;
-    };
-    to: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: string;
-    };
-    href: {
-        type: StringConstructor;
-        default: string;
-    };
-    text: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    outlined: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    rounded: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    ring: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    tile: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    icon: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    block: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    solid: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    noRing: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loadingText: {
-        type: StringConstructor;
-        default: string;
-    };
-    newTab: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    shadow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
-    text: boolean;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     size: string;
     color: string;
-    to: string | Record<string, any>;
-    href: string;
-    outlined: boolean;
-    rounded: boolean;
-    disabled: boolean;
-    ring: boolean;
-    tile: boolean;
-    icon: boolean;
-    block: boolean;
     type: string;
-    solid: boolean;
-    noRing: boolean;
-    loading: boolean;
     loadingText: string;
-    newTab: boolean;
-    shadow: boolean;
+}>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    color: string;
+    size: string;
+    loadingText: string;
+    type: "button" | "submit" | "reset";
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: typeof import('./VBtn.vue.__VLS_template').default;
+    $slots: {
+        loading: (_: {}) => any;
+        default: (_: {}) => any;
+    };
 });
 export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package.json

 {
   "name": "@gits-id/button",
-  "version": "0.12.0-alpha.0",
+  "version": "0.12.0-alpha.1",
   "description": "GITS Button Component",
+  "scripts": {
+    "build": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
+    "prepublishOnly": "npm run build",
+    "test": "vitest"
+  },
   "keywords": [
@@ -11,13 +16,13 @@ "button",
   ],
-  "author": "",
-  "license": "ISC",
+  "author": "Warsono <[e-mail]>",
+  "license": "MIT",
   "dependencies": {
-    "@gits-id/spinner": "^0.12.0-alpha.0",
-    "@gits-id/theme": "^0.12.0-alpha.0",
-    "@gits-id/utils": "^0.11.10",
-    "vue": "^3.2.33"
+    "@gits-id/spinner": "^0.12.0-alpha.1",
+    "@gits-id/theme": "^0.12.0-alpha.1",
+    "@gits-id/utils": "^0.12.0-alpha.1",
+    "vue": "^3.2.33",
+    "vue-router": "^4.1.5"
   },
   "devDependencies": {
-    "@gits-id/tailwind-components": "^0.12.0-alpha.0",
-    "@gits-id/tailwind-config": "^0.12.0-alpha.0",
+    "@gits-id/tailwind-config": "^0.12.0-alpha.1",
     "@vitejs/plugin-vue": "^2.2.4",
@@ -32,3 +37,3 @@ "@vue/test-utils": "^2.0.0-rc.17",
     "vitest": "^0.12.4",
-    "vue-tsc": "^0.37.3"
+    "vue-tsc": "^1.0.8"
   },
@@ -40,7 +45,14 @@ "main": "dist/button.umd.js",
   "types": "./dist/types/index.d.ts",
-  "gitHead": "80bc1037da208367d00723d488dff0ca00e2ebee",
-  "scripts": {
-    "build": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
-    "test": "vitest"
-  }
-}
+  "exports": {
+    ".": {
+      "import": "./dist/button.mjs",
+      "require": "./dist/button.js"
+    },
+    "./plugin": "./src/plugin.js",
+    "./plugin.js": "./src/plugin.js",
+    "./package.json": "./package.json",
+    "./src/*": "./src/*",
+    "./*": "./*"
+  },
+  "gitHead": "c1a71e0b5936d8d181c740d9836fddd46351215f"
+}

src/VBtn.spec.ts

@@ -19,3 +19,4 @@ import {mount} from '@vue/test-utils';
     expect(wrapper.text()).toContain(BUTTON_TEXT);
+    expect(wrapper.html()).toMatchSnapshot();
   });
 });

src/VBtn.stories.ts

 import {Meta, Story} from '@storybook/vue3';
 import Button from './VBtn.vue';
-import {VBtnProps} from './types';
-import {HomeIcon} from '@heroicons/vue/outline';
+import type {Props as VBtnProps} from './VBtn.vue';
+import VIcon from '@gits-id/icon';
+import {defaultColors, defaultSizes} from '@gits-id/theme/defaultTheme';
 
-const themeColors = [
-  'default',
-  'primary',
-  'secondary',
-  'info',
-  'success',
-  'warning',
-  'error',
-  'dark',
-];
-
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
-
 export default {
@@ -25,22 +13,9 @@ component: Button,
       control: 'select',
-      options: themeColors,
+      options: defaultColors,
     },
     size: {
       control: 'select',
-      options: sizes,
+      options: defaultSizes,
     },
   },
-  args: {
-    color: '',
-    outlined: false,
-    rounded: false,
-    ring: false,
-    disabled: false,
-    text: false,
-    size: 'md',
-    tile: false,
-    icon: false,
-    loading: false,
-    block: false,
-  },
   parameters: {
@@ -55,7 +30,6 @@ docs: {
 
-//👇 We create a “template” of how args map to rendering
 const Template: Story<VBtnProps> = (args) => ({
   components: {Button},
   setup() {
-    return {args, colors: themeColors};
+    return {args, colors: defaultColors};
   },
@@ -128,42 +102,2 @@ template: `<div class="space-x-2 space-y-2">
 
-export const ExtraSmall = Template.bind({});
-ExtraSmall.args = {color: 'primary', size: 'xs'};
-ExtraSmall.parameters = {
-  docs: {
-    source: {
-      code: '<v-btn color="primary" size="xs">Button</v-btn>',
-    },
-  },
-};
-
-export const Small = Template.bind({});
-Small.args = {color: 'primary', size: 'sm'};
-Small.parameters = {
-  docs: {
-    source: {
-      code: '<v-btn color="primary" size="sm">Button</v-btn>',
-    },
-  },
-};
-
-export const Large = Template.bind({});
-Large.args = {color: 'primary', size: 'lg'};
-Large.parameters = {
-  docs: {
-    source: {
-      code: '<v-btn color="primary" size="lg">Button</v-btn>',
-    },
-  },
-};
-
-export const ExtraLarge = Template.bind({});
-ExtraLarge.args = {color: 'primary', size: 'xl'};
-ExtraLarge.parameters = {
-  docs: {
-    source: {
-      code: '<v-btn color="primary" size="xl">Button</v-btn>',
-    },
-  },
-};
-
 export const Disabled = Template.bind({});
@@ -230,15 +164,8 @@ Disabled.args = {color: 'primary', disabled: true};
 export const Icon: Story<VBtnProps> = (args) => ({
-  components: {Button, HomeIcon},
+  components: {Button, VIcon},
   setup() {
     return {
       args,
-      sizes,
-      themeColors,
-      sizeClass: {
-        xs: 'w-4 h-4',
-        sm: 'w-5 h-5',
-        md: 'w-6 h-6',
-        lg: 'w-10 h-10',
-        xl: 'w-12 h-12',
-      },
+      sizes: defaultSizes,
+      defaultColors,
     };
@@ -248,4 +175,11 @@ },
 <div class="flex items-end gap-2">
-  <Button v-for="size in sizes" :key="size" v-bind="args" color="primary" :size="size" icon>
-    <HomeIcon class="w-full"/>
+  <Button
+    v-for="size in sizes"
+    :key="size"
+    color="primary"
+    :size="size"
+    icon
+    v-bind="args"
+  >
+    <VIcon name="ri:home-line" class="w-full"/>
   </Button>
@@ -259,3 +193,3 @@ </div>`,
 <v-btn color="primary" icon>
-  <HomeIcon class="w-full"/>
+  <VIcon name="ri:home-line" class="w-full"/>
 </v-btn>
@@ -306,5 +240,5 @@ `,
   setup() {
-    return {args, sizes, themeColors};
+    return {args, sizes: defaultSizes, defaultColors};
   },
-  template: `<div v-for="color in themeColors" :key="color" class="mb-6">
+  template: `<div v-for="color in defaultColors" :key="color" class="mb-6">
   <div>
@@ -333,1 +267,53 @@ <div class="font-semibold text-lg mb-2">{{color}}</div>
 };
+
+export const Plugin: Story<VBtnProps> = () => ({
+  components: {VIcon},
+  setup() {
+    return {
+      colors: ['default', 'dark', ...defaultColors],
+      sizes: defaultSizes,
+    };
+  },
+  template: `
+<h3 class="font-semibold text-lg mb-2">Colors</h3>
+<div class="space-x-2 space-y-2 mb-5">
+  <button v-for="color in colors" :key="color" :class="\`btn btn-\${color}\`"> {{ color }} </button>
+</div>
+<h3 class="font-semibold text-lg mb-2">Shadow</h3>
+<div class="space-x-2 space-y-2 mb-5">
+  <button v-for="color in colors" :key="color" :class="\`btn shadow-md btn-\${color}\`"> {{ color }} </button>
+</div>
+<h3 class="font-semibold text-lg mb-2">Outlined</h3>
+<div class="space-x-2 space-y-2 mb-5">
+  <button v-for="color in colors" :key="color" :class="\`btn btn--outlined btn-\${color}\`"> {{ color }} </button>
+</div>
+<h3 class="font-semibold text-lg mb-2">Text</h3>
+<div class="space-x-2 space-y-2 mb-5">
+  <button v-for="color in colors" :key="color" :class="\`btn btn--text btn-\${color}\`"> {{ color }} </button>
+</div>
+<h3 class="font-semibold text-lg mb-2">Rounded</h3>
+<div class="space-x-2 space-y-2 mb-5">
+  <button v-for="color in colors" :key="color" :class="\`btn btn--rounded btn-\${color}\`"> {{ color }} </button>
+</div>
+<h3 class="font-semibold text-lg mb-2">Tile</h3>
+<div class="space-x-2 space-y-2 mb-5">
+  <button v-for="color in colors" :key="color" :class="\`btn btn--tile btn-\${color}\`"> {{ color }} </button>
+</div>
+<h3 class="font-semibold text-lg mb-2">Sizes</h3>
+<div class="flex items-end gap-2 mb-5">
+  <button v-for="size in sizes" :key="size" :class="\`btn btn-primary btn--\${size}\`"> Button </button>
+</div>
+<h3 class="font-semibold text-lg mb-2">Icon</h3>
+<div class="flex items-end gap-2 mb-5">
+  <button v-for="size in sizes" :key="size" :class="\`btn btn-secondary btn--\${size}\`"> 
+    <v-icon name="ic:round-search" class="btn-icon" />
+  </button>
+</div>
+<h3 class="font-semibold text-lg mb-2">Icon FAB</h3>
+<div class="flex items-end gap-2 mb-5">
+  <button v-for="size in sizes" :key="size" :class="\`btn btn-success btn--fab btn--\${size}\`"> 
+    <v-icon name="ic:round-search" class="btn-icon" />
+  </button>
+</div>
+  `,
+});

tsconfig.json

@@ -17,7 +17,5 @@ {
     "emitDeclarationOnly": true,
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve"
+    "allowSyntheticDefaultImports": true
   },
-  "include": ["src/vue.d.ts", "*.vue", "src"],
-  "exclude": ["**/*.stories.ts", "**/*.spec.ts", "**/*.test.ts"]
+  "include": ["src"]
 }

vite.config.js

@@ -7,5 +7,3 @@ import {defineConfig} from 'vite';
 export default defineConfig({
-  plugins: [
-    vue(),
-  ],
+  plugins: [vue()],
   esbuild: {
@@ -24,3 +22,9 @@ exclude: ['./src/**/**.stories.ts'],
       // into your library
-      external: ['vue', '@gits-id/spinner', '@gits-id/utils'],
+      external: [
+        'vue',
+        '@gits-id/spinner',
+        '@gits-id/utils',
+        '@gits-id/theme',
+        'vue-router',
+      ],
       output: {
@@ -30,23 +34,8 @@ // Provide global variables to use in the UMD build
         globals: {
-          vue: 'Vue'
-        }
+          vue: 'Vue',
+        },
       },
       resolve: {
-        dedupe: "vue"
+        dedupe: 'vue',
       },
-      plugins: [
-        {
-          name: 'remove-collection-handlers',
-          transform(code, id) {
-            if (
-              id.endsWith('reactivity.esm-bundler.js') ||
-              id.endsWith('runtime-core.esm-bundler.js')
-            ) {
-              return code
-                .replace(`mutableCollectionHandlers,`, `null,`)
-                .replace(`readonlyCollectionHandlers,`, `null,`);
-            }
-          },
-        },
-      ],
     },
@@ -53,0 +42,0 @@ },

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

11

-8.33%

Number of package files

27

22.73%

Number of low maintenance alerts

1

-50%

Worsened metrics

Total package byte prevSize

49955

-28.36%

Dependency count

5

25%

Lines of code

964

-18.03%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  vue-router@^4.1.5

• + Added

  @gits-id/utils@0.12.0
  (transitive)

• + Added

  @vue/devtools-api@6.6.4
  (transitive)

• + Added

  vue-router@4.5.0
  (transitive)

• - Removed

  @gits-id/utils@0.11.10
  (transitive)

• Updated

  @gits-id/spinner@^0.12.0-alpha.1

• Updated

  @gits-id/theme@^0.12.0-alpha.1

• Updated

  @gits-id/utils@^0.12.0-alpha.1