@davincihealthcare/elty-design-system-vue 1.75.1 → 1.76.0

package/dist/ElActionButton.vue.d.ts

@@ -7,8 +7,10 @@ export interface ActionButtonProps {
     color: ElActionButtonColors;
     status: ElActionButtonStatus;
     leadingIcon?: InstanceType<typeof ElIcon>['$props'];
-    trailingIcon?: InstanceType<typeof ElIcon>['$props'];
-    badge?: InstanceType<typeof ElBadge>['$props'];
+    trailingIcon?: InstanceType<typeof ElIcon>['$props'] & {
+        name: 'ChevronDownIcon';
+    };
+    badge?: Omit<InstanceType<typeof ElBadge>['$props'], 'badge'>;
     onClick?: (() => unknown) | (() => Promise<unknown>);
 }
 export declare const elActionButtonSizes: readonly ["base", "l"];

package/dist/src/ElActionButton.vue.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");;/* empty css               */require("./polyfills.cjs.js");require("vee-validate");require("../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("../node_modules/lodash/lodash.cjs.js");require("./tailwind.plugin.cjs.js");require("../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const o=require("./ElIcon.vue.cjs2.js"),c=require("./ElBadge.vue.cjs2.js");require("./forms/ElInputText.vue.cjs2.js");require("./forms/ElInputCheckbox.vue.cjs2.js");require("./forms/ElInputDate.vue.cjs2.js");require("./forms/ElInputFile.vue.cjs2.js");require("./forms/ElInputMeasureUnit.vue.cjs2.js");require("./forms/ElInputNumber.vue.cjs2.js");require("./forms/ElInputPhone.vue.cjs2.js");require("./forms/ElInputSelect.vue.cjs2.js");require("./forms/ElInputTextarea.vue.cjs2.js");require("./ElToast.vue.cjs2.js");require("./forms/ElInputRadioButton.vue.cjs2.js");require("../node_modules/swiper/shared/swiper-core.cjs.js");;/* empty css                                     */;/* empty css                                                 */require("./forms/ElInputSearch.vue.cjs2.js");const d=["data-cy"],p={key:2,class:"h-4 ml-1 relative flex justify-center items-start"},m=["base","l"],g=["primary","secondary"],v=["default","hover","pressed","active"],b=e.defineComponent({__name:"ElActionButton",props:{id:{},label:{},size:{default:"base"},color:{default:"primary"},status:{default:"default"},leadingIcon:{},trailingIcon:{},badge:{},onClick:{}},emits:["click"],setup(l,{emit:n}){const r=l,u=()=>{a.value=!0,i("click",r.onClick)},a=e.ref(r.status==="pressed"),i=n;return(t,s)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker focus:bg-neutral-pressed focus:ring-neutral-pressed",{"text-sm h-8":r.size==="base","text-base h-10":r.size==="l","border-transparent text-neutral-darker":r.status==="default","border-transparent text-neutral-darker bg-neutral-hover":r.status==="hover","border-transparent bg-neutral-pressed ":(a.value||r.status==="pressed")&&r.status!=="active"&&r.status!=="default"&&r.status!=="hover","text-primary-active bg-primary-light-active border-primary-active":r.status==="active"&&r.color==="primary","text-secondary-active bg-secondary-light-active border-secondary-active":r.status==="active"&&r.color==="secondary"}]),"data-cy":r.label?r.label.trim().replace(/\s+/g,""):"default-action-button",onMouseDown:s[0]||(s[0]=f=>a.value=!0),onClick:u},[t.leadingIcon?(e.openBlock(),e.createBlock(e.unref(o.default),e.mergeProps({key:0},t.leadingIcon,{class:{"h-5 w-5":t.size==="base","h-6 w-6":t.size==="l"}}),null,16,["class"])):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(r.label),1),t.trailingIcon?(e.openBlock(),e.createBlock(e.unref(o.default),e.mergeProps({key:1},t.trailingIcon,{class:{"h-5 w-5":t.size==="base","h-6 w-6":t.size==="l"}}),null,16,["class"])):e.createCommentVNode("",!0),t.badge?(e.openBlock(),e.createElementBlock("div",p,[e.createVNode(e.unref(c.default),e.normalizeProps(e.guardReactiveProps(t.badge)),null,16)])):e.createCommentVNode("",!0)],42,d))}});exports.default=b;exports.elActionButtonColors=g;exports.elActionButtonSizes=m;exports.elActionButtonStatus=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");;/* empty css               */require("./polyfills.cjs.js");require("vee-validate");require("../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("../node_modules/lodash/lodash.cjs.js");require("./tailwind.plugin.cjs.js");require("../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const o=require("./ElIcon.vue.cjs2.js"),c=require("./ElBadge.vue.cjs2.js");require("./forms/ElInputText.vue.cjs2.js");require("./forms/ElInputCheckbox.vue.cjs2.js");require("./forms/ElInputDate.vue.cjs2.js");require("./forms/ElInputFile.vue.cjs2.js");require("./forms/ElInputMeasureUnit.vue.cjs2.js");require("./forms/ElInputNumber.vue.cjs2.js");require("./forms/ElInputPhone.vue.cjs2.js");require("./forms/ElInputSelect.vue.cjs2.js");require("./forms/ElInputTextarea.vue.cjs2.js");require("./ElToast.vue.cjs2.js");require("./forms/ElInputRadioButton.vue.cjs2.js");require("../node_modules/swiper/shared/swiper-core.cjs.js");;/* empty css                                     */;/* empty css                                                 */require("./forms/ElInputSearch.vue.cjs2.js");const d=["data-cy"],p={key:2,class:"h-4 ml-1 relative flex justify-center items-start"},m=["base","l"],v=["primary","secondary"],b=["default","hover","pressed","active"],g=e.defineComponent({__name:"ElActionButton",props:{id:{},label:{},size:{default:"base"},color:{default:"primary"},status:{default:"default"},leadingIcon:{},trailingIcon:{},badge:{},onClick:{}},emits:["click"],setup(l,{emit:n}){const t=l,i=()=>{a.value=!0,u("click",t.onClick)},a=e.ref(t.status==="pressed"),u=n;return(r,s)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["transition-colors w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker active:bg-neutral-pressed",{"text-sm h-8":t.size==="base","text-base h-10":t.size==="l","border-transparent text-neutral-darker":t.status==="default","border-transparent text-neutral-darker bg-neutral-hover":t.status==="hover","border-transparent bg-neutral-pressed ":(a.value||t.status==="pressed")&&t.status!=="active"&&t.status!=="default"&&t.status!=="hover","text-primary-active bg-primary-light-active border-primary-active":t.status==="active"&&t.color==="primary","text-secondary-active bg-secondary-light-active border-secondary-active":t.status==="active"&&t.color==="secondary"}]),"data-cy":t.label?t.label.trim().replace(/\s+/g,""):"default-action-button",onMouseDown:s[0]||(s[0]=f=>a.value=!0),onClick:i},[r.leadingIcon?(e.openBlock(),e.createBlock(e.unref(o.default),e.mergeProps({key:0},r.leadingIcon,{class:{"h-4 w-4":r.size==="base","h-5 w-5":r.size==="l"}}),null,16,["class"])):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(t.label),1),r.trailingIcon?(e.openBlock(),e.createBlock(e.unref(o.default),e.mergeProps({key:1},r.trailingIcon,{class:{"h-4 w-4":r.size==="base","h-5 w-5":r.size==="l"}}),null,16,["class"])):e.createCommentVNode("",!0),r.badge?(e.openBlock(),e.createElementBlock("div",p,[e.createVNode(e.unref(c.default),e.mergeProps(r.badge,{color:"red"}),null,16)])):e.createCommentVNode("",!0)],42,d))}});exports.default=g;exports.elActionButtonColors=v;exports.elActionButtonSizes=m;exports.elActionButtonStatus=b;
 //# sourceMappingURL=ElActionButton.vue.cjs2.js.map

package/dist/src/ElActionButton.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElActionButton.vue.cjs2.js","sources":["../../src/ElActionButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elActionButtonSizes = ['base', 'l'] as const;\nexport type ElActionButtonSizes = (typeof elActionButtonSizes)[number];\n\nexport const elActionButtonColors = ['primary', 'secondary'] as const;\nexport type ElActionButtonColors = (typeof elActionButtonColors)[number];\n\nexport const elActionButtonStatus = ['default', 'hover', 'pressed', 'active'] as const;\nexport type ElActionButtonStatus = (typeof elActionButtonStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ElBadge, ElIcon } from '.';\nimport { ref } from 'vue';\n\nexport interface ActionButtonProps {\n  id?: string;\n  label: string;\n  size: ElActionButtonSizes;\n  color: ElActionButtonColors;\n  status: ElActionButtonStatus;\n  leadingIcon?: InstanceType<typeof ElIcon>['$props'];\n  trailingIcon?: InstanceType<typeof ElIcon>['$props'];\n  badge?: InstanceType<typeof ElBadge>['$props'];\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'base',\n  color: 'primary',\n  status: 'default',\n});\n\nconst onClick = () => {\n  isPressed.value = true;\n  $emits('click', props.onClick);\n};\n\nconst isPressed = ref<boolean>(props.status === 'pressed');\nconst $emits = defineEmits(['click']);\n</script>\n\n<template>\n  <button\n    class=\"w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker focus:bg-neutral-pressed focus:ring-neutral-pressed\"\n    :class=\"{\n      'text-sm h-8': props.size === 'base',\n      'text-base h-10': props.size === 'l',\n      'border-transparent text-neutral-darker': props.status === 'default',\n      'border-transparent text-neutral-darker bg-neutral-hover': props.status === 'hover',\n      'border-transparent bg-neutral-pressed ':\n        (isPressed || props.status === 'pressed') && props.status !== 'active' && props.status !== 'default' && props.status !== 'hover',\n      'text-primary-active bg-primary-light-active border-primary-active': props.status === 'active' && props.color === 'primary',\n      'text-secondary-active bg-secondary-light-active border-secondary-active': props.status === 'active' && props.color === 'secondary',\n    }\"\n    :data-cy=\"props.label ? props.label.trim().replace(/\\s+/g, '') : 'default-action' + '-button'\"\n    @mouse-down=\"isPressed = true\"\n    @click=\"onClick\"\n  >\n    <ElIcon\n      v-if=\"leadingIcon\"\n      v-bind=\"leadingIcon\"\n      :class=\"{\n        'h-5 w-5': size === 'base',\n        'h-6 w-6': size === 'l',\n      }\"\n    />\n    <span> {{ props.label }}</span>\n    <ElIcon\n      v-if=\"trailingIcon\"\n      v-bind=\"trailingIcon\"\n      :class=\"{\n        'h-5 w-5': size === 'base',\n        'h-6 w-6': size === 'l',\n      }\"\n    />\n    <div v-if=\"badge\" class=\"h-4 ml-1 relative flex justify-center items-start\">\n      <ElBadge v-bind=\"badge\" />\n    </div>\n  </button>\n</template>\n"],"names":["elActionButtonSizes","elActionButtonColors","elActionButtonStatus","props","__props","onClick","isPressed","$emits","ref","__emit"],"mappings":"s0CACaA,EAAsB,CAAC,OAAQ,GAAG,EAGlCC,EAAuB,CAAC,UAAW,WAAW,EAG9CC,EAAuB,CAAC,UAAW,QAAS,UAAW,QAAQ,sOAoB5E,MAAMC,EAAQC,EAMRC,EAAU,IAAM,CACpBC,EAAU,MAAQ,GACXC,EAAA,QAASJ,EAAM,OAAO,CAAA,EAGzBG,EAAYE,EAAA,IAAaL,EAAM,SAAW,SAAS,EACnDI,EAASE"}
+{"version":3,"file":"ElActionButton.vue.cjs2.js","sources":["../../src/ElActionButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elActionButtonSizes = ['base', 'l'] as const;\nexport type ElActionButtonSizes = (typeof elActionButtonSizes)[number];\n\nexport const elActionButtonColors = ['primary', 'secondary'] as const;\nexport type ElActionButtonColors = (typeof elActionButtonColors)[number];\n\nexport const elActionButtonStatus = ['default', 'hover', 'pressed', 'active'] as const;\nexport type ElActionButtonStatus = (typeof elActionButtonStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ElBadge, ElIcon } from '.';\nimport { ref } from 'vue';\n\nexport interface ActionButtonProps {\n  id?: string;\n  label: string;\n  size: ElActionButtonSizes;\n  color: ElActionButtonColors;\n  status: ElActionButtonStatus;\n  leadingIcon?: InstanceType<typeof ElIcon>['$props'];\n  trailingIcon?: InstanceType<typeof ElIcon>['$props'] & { name: 'ChevronDownIcon' };\n  badge?: Omit<InstanceType<typeof ElBadge>['$props'], 'badge'>;\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'base',\n  color: 'primary',\n  status: 'default',\n});\n\nconst onClick = () => {\n  isPressed.value = true;\n  $emits('click', props.onClick);\n};\n\nconst isPressed = ref<boolean>(props.status === 'pressed');\nconst $emits = defineEmits(['click']);\n</script>\n\n<template>\n  <button\n    class=\"transition-colors w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker active:bg-neutral-pressed\"\n    :class=\"{\n      'text-sm h-8': props.size === 'base',\n      'text-base h-10': props.size === 'l',\n      'border-transparent text-neutral-darker': props.status === 'default',\n      'border-transparent text-neutral-darker bg-neutral-hover': props.status === 'hover',\n      'border-transparent bg-neutral-pressed ':\n        (isPressed || props.status === 'pressed') && props.status !== 'active' && props.status !== 'default' && props.status !== 'hover',\n      'text-primary-active bg-primary-light-active border-primary-active': props.status === 'active' && props.color === 'primary',\n      'text-secondary-active bg-secondary-light-active border-secondary-active': props.status === 'active' && props.color === 'secondary',\n    }\"\n    :data-cy=\"props.label ? props.label.trim().replace(/\\s+/g, '') : 'default-action' + '-button'\"\n    @mouse-down=\"isPressed = true\"\n    @click=\"onClick\"\n  >\n    <ElIcon\n      v-if=\"leadingIcon\"\n      v-bind=\"leadingIcon\"\n      :class=\"{\n        'h-4 w-4': size === 'base',\n        'h-5 w-5': size === 'l',\n      }\"\n    />\n    <span> {{ props.label }}</span>\n    <ElIcon\n      v-if=\"trailingIcon\"\n      v-bind=\"trailingIcon\"\n      :class=\"{\n        'h-4 w-4': size === 'base',\n        'h-5 w-5': size === 'l',\n      }\"\n    />\n    <div v-if=\"badge\" class=\"h-4 ml-1 relative flex justify-center items-start\">\n      <ElBadge v-bind=\"badge\" color=\"red\" />\n    </div>\n  </button>\n</template>\n"],"names":["elActionButtonSizes","elActionButtonColors","elActionButtonStatus","props","__props","onClick","isPressed","$emits","ref","__emit"],"mappings":"s0CACaA,EAAsB,CAAC,OAAQ,GAAG,EAGlCC,EAAuB,CAAC,UAAW,WAAW,EAG9CC,EAAuB,CAAC,UAAW,QAAS,UAAW,QAAQ,sOAoB5E,MAAMC,EAAQC,EAMRC,EAAU,IAAM,CACpBC,EAAU,MAAQ,GACXC,EAAA,QAASJ,EAAM,OAAO,CAAA,EAGzBG,EAAYE,EAAA,IAAaL,EAAM,SAAW,SAAS,EACnDI,EAASE"}

package/dist/src/ElActionButton.vue.esm2.js

@@ -1,2 +1,2 @@
-import{defineComponent as f,ref as g,openBlock as r,createElementBlock as n,normalizeClass as v,createBlock as l,unref as a,mergeProps as c,createCommentVNode as s,createElementVNode as y,toDisplayString as h,createVNode as k,normalizeProps as z,guardReactiveProps as B}from"vue";/* empty css             */import"./polyfills.esm.js";import"vee-validate";import"../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.esm.js";import"../node_modules/lodash/lodash.esm.js";import"./tailwind.plugin.esm.js";import"../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import u from"./ElIcon.vue.esm2.js";import C from"./ElBadge.vue.esm2.js";import"./forms/ElInputText.vue.esm2.js";import"./forms/ElInputCheckbox.vue.esm2.js";import"./forms/ElInputDate.vue.esm2.js";import"./forms/ElInputFile.vue.esm2.js";import"./forms/ElInputMeasureUnit.vue.esm2.js";import"./forms/ElInputNumber.vue.esm2.js";import"./forms/ElInputPhone.vue.esm2.js";import"./forms/ElInputSelect.vue.esm2.js";import"./forms/ElInputTextarea.vue.esm2.js";import"./ElToast.vue.esm2.js";import"./forms/ElInputRadioButton.vue.esm2.js";import"../node_modules/swiper/shared/swiper-core.esm.js";/* empty css                                   *//* empty css                                               */import"./forms/ElInputSearch.vue.esm2.js";const w=["data-cy"],I={key:2,class:"h-4 ml-1 relative flex justify-center items-start"},Y=["base","l"],Z=["primary","secondary"],ee=["default","hover","pressed","active"],te=f({__name:"ElActionButton",props:{id:{},label:{},size:{default:"base"},color:{default:"primary"},status:{default:"default"},leadingIcon:{},trailingIcon:{},badge:{},onClick:{}},emits:["click"],setup(p,{emit:m}){const e=p,d=()=>{o.value=!0,b("click",e.onClick)},o=g(e.status==="pressed"),b=m;return(t,i)=>(r(),n("button",{class:v(["w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker focus:bg-neutral-pressed focus:ring-neutral-pressed",{"text-sm h-8":e.size==="base","text-base h-10":e.size==="l","border-transparent text-neutral-darker":e.status==="default","border-transparent text-neutral-darker bg-neutral-hover":e.status==="hover","border-transparent bg-neutral-pressed ":(o.value||e.status==="pressed")&&e.status!=="active"&&e.status!=="default"&&e.status!=="hover","text-primary-active bg-primary-light-active border-primary-active":e.status==="active"&&e.color==="primary","text-secondary-active bg-secondary-light-active border-secondary-active":e.status==="active"&&e.color==="secondary"}]),"data-cy":e.label?e.label.trim().replace(/\s+/g,""):"default-action-button",onMouseDown:i[0]||(i[0]=A=>o.value=!0),onClick:d},[t.leadingIcon?(r(),l(a(u),c({key:0},t.leadingIcon,{class:{"h-5 w-5":t.size==="base","h-6 w-6":t.size==="l"}}),null,16,["class"])):s("",!0),y("span",null,h(e.label),1),t.trailingIcon?(r(),l(a(u),c({key:1},t.trailingIcon,{class:{"h-5 w-5":t.size==="base","h-6 w-6":t.size==="l"}}),null,16,["class"])):s("",!0),t.badge?(r(),n("div",I,[k(a(C),z(B(t.badge)),null,16)])):s("",!0)],42,w))}});export{te as default,Z as elActionButtonColors,Y as elActionButtonSizes,ee as elActionButtonStatus};
+import{defineComponent as f,ref as v,openBlock as r,createElementBlock as l,normalizeClass as g,createBlock as c,unref as a,mergeProps as s,createCommentVNode as i,createElementVNode as y,toDisplayString as h,createVNode as k}from"vue";/* empty css             */import"./polyfills.esm.js";import"vee-validate";import"../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.esm.js";import"../node_modules/lodash/lodash.esm.js";import"./tailwind.plugin.esm.js";import"../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import m from"./ElIcon.vue.esm2.js";import z from"./ElBadge.vue.esm2.js";import"./forms/ElInputText.vue.esm2.js";import"./forms/ElInputCheckbox.vue.esm2.js";import"./forms/ElInputDate.vue.esm2.js";import"./forms/ElInputFile.vue.esm2.js";import"./forms/ElInputMeasureUnit.vue.esm2.js";import"./forms/ElInputNumber.vue.esm2.js";import"./forms/ElInputPhone.vue.esm2.js";import"./forms/ElInputSelect.vue.esm2.js";import"./forms/ElInputTextarea.vue.esm2.js";import"./ElToast.vue.esm2.js";import"./forms/ElInputRadioButton.vue.esm2.js";import"../node_modules/swiper/shared/swiper-core.esm.js";/* empty css                                   *//* empty css                                               */import"./forms/ElInputSearch.vue.esm2.js";const B=["data-cy"],C={key:2,class:"h-4 ml-1 relative flex justify-center items-start"},W=["base","l"],X=["primary","secondary"],Y=["default","hover","pressed","active"],Z=f({__name:"ElActionButton",props:{id:{},label:{},size:{default:"base"},color:{default:"primary"},status:{default:"default"},leadingIcon:{},trailingIcon:{},badge:{},onClick:{}},emits:["click"],setup(p,{emit:u}){const e=p,d=()=>{o.value=!0,b("click",e.onClick)},o=v(e.status==="pressed"),b=u;return(t,n)=>(r(),l("button",{class:g(["transition-colors w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker active:bg-neutral-pressed",{"text-sm h-8":e.size==="base","text-base h-10":e.size==="l","border-transparent text-neutral-darker":e.status==="default","border-transparent text-neutral-darker bg-neutral-hover":e.status==="hover","border-transparent bg-neutral-pressed ":(o.value||e.status==="pressed")&&e.status!=="active"&&e.status!=="default"&&e.status!=="hover","text-primary-active bg-primary-light-active border-primary-active":e.status==="active"&&e.color==="primary","text-secondary-active bg-secondary-light-active border-secondary-active":e.status==="active"&&e.color==="secondary"}]),"data-cy":e.label?e.label.trim().replace(/\s+/g,""):"default-action-button",onMouseDown:n[0]||(n[0]=w=>o.value=!0),onClick:d},[t.leadingIcon?(r(),c(a(m),s({key:0},t.leadingIcon,{class:{"h-4 w-4":t.size==="base","h-5 w-5":t.size==="l"}}),null,16,["class"])):i("",!0),y("span",null,h(e.label),1),t.trailingIcon?(r(),c(a(m),s({key:1},t.trailingIcon,{class:{"h-4 w-4":t.size==="base","h-5 w-5":t.size==="l"}}),null,16,["class"])):i("",!0),t.badge?(r(),l("div",C,[k(a(z),s(t.badge,{color:"red"}),null,16)])):i("",!0)],42,B))}});export{Z as default,X as elActionButtonColors,W as elActionButtonSizes,Y as elActionButtonStatus};
 //# sourceMappingURL=ElActionButton.vue.esm2.js.map

package/dist/src/ElActionButton.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElActionButton.vue.esm2.js","sources":["../../src/ElActionButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elActionButtonSizes = ['base', 'l'] as const;\nexport type ElActionButtonSizes = (typeof elActionButtonSizes)[number];\n\nexport const elActionButtonColors = ['primary', 'secondary'] as const;\nexport type ElActionButtonColors = (typeof elActionButtonColors)[number];\n\nexport const elActionButtonStatus = ['default', 'hover', 'pressed', 'active'] as const;\nexport type ElActionButtonStatus = (typeof elActionButtonStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ElBadge, ElIcon } from '.';\nimport { ref } from 'vue';\n\nexport interface ActionButtonProps {\n  id?: string;\n  label: string;\n  size: ElActionButtonSizes;\n  color: ElActionButtonColors;\n  status: ElActionButtonStatus;\n  leadingIcon?: InstanceType<typeof ElIcon>['$props'];\n  trailingIcon?: InstanceType<typeof ElIcon>['$props'];\n  badge?: InstanceType<typeof ElBadge>['$props'];\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'base',\n  color: 'primary',\n  status: 'default',\n});\n\nconst onClick = () => {\n  isPressed.value = true;\n  $emits('click', props.onClick);\n};\n\nconst isPressed = ref<boolean>(props.status === 'pressed');\nconst $emits = defineEmits(['click']);\n</script>\n\n<template>\n  <button\n    class=\"w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker focus:bg-neutral-pressed focus:ring-neutral-pressed\"\n    :class=\"{\n      'text-sm h-8': props.size === 'base',\n      'text-base h-10': props.size === 'l',\n      'border-transparent text-neutral-darker': props.status === 'default',\n      'border-transparent text-neutral-darker bg-neutral-hover': props.status === 'hover',\n      'border-transparent bg-neutral-pressed ':\n        (isPressed || props.status === 'pressed') && props.status !== 'active' && props.status !== 'default' && props.status !== 'hover',\n      'text-primary-active bg-primary-light-active border-primary-active': props.status === 'active' && props.color === 'primary',\n      'text-secondary-active bg-secondary-light-active border-secondary-active': props.status === 'active' && props.color === 'secondary',\n    }\"\n    :data-cy=\"props.label ? props.label.trim().replace(/\\s+/g, '') : 'default-action' + '-button'\"\n    @mouse-down=\"isPressed = true\"\n    @click=\"onClick\"\n  >\n    <ElIcon\n      v-if=\"leadingIcon\"\n      v-bind=\"leadingIcon\"\n      :class=\"{\n        'h-5 w-5': size === 'base',\n        'h-6 w-6': size === 'l',\n      }\"\n    />\n    <span> {{ props.label }}</span>\n    <ElIcon\n      v-if=\"trailingIcon\"\n      v-bind=\"trailingIcon\"\n      :class=\"{\n        'h-5 w-5': size === 'base',\n        'h-6 w-6': size === 'l',\n      }\"\n    />\n    <div v-if=\"badge\" class=\"h-4 ml-1 relative flex justify-center items-start\">\n      <ElBadge v-bind=\"badge\" />\n    </div>\n  </button>\n</template>\n"],"names":["elActionButtonSizes","elActionButtonColors","elActionButtonStatus","props","__props","onClick","isPressed","$emits","ref","__emit"],"mappings":"u5CACaA,EAAsB,CAAC,OAAQ,GAAG,EAGlCC,EAAuB,CAAC,UAAW,WAAW,EAG9CC,GAAuB,CAAC,UAAW,QAAS,UAAW,QAAQ,uNAoB5E,MAAMC,EAAQC,EAMRC,EAAU,IAAM,CACpBC,EAAU,MAAQ,GACXC,EAAA,QAASJ,EAAM,OAAO,CAAA,EAGzBG,EAAYE,EAAaL,EAAM,SAAW,SAAS,EACnDI,EAASE"}
+{"version":3,"file":"ElActionButton.vue.esm2.js","sources":["../../src/ElActionButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elActionButtonSizes = ['base', 'l'] as const;\nexport type ElActionButtonSizes = (typeof elActionButtonSizes)[number];\n\nexport const elActionButtonColors = ['primary', 'secondary'] as const;\nexport type ElActionButtonColors = (typeof elActionButtonColors)[number];\n\nexport const elActionButtonStatus = ['default', 'hover', 'pressed', 'active'] as const;\nexport type ElActionButtonStatus = (typeof elActionButtonStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ElBadge, ElIcon } from '.';\nimport { ref } from 'vue';\n\nexport interface ActionButtonProps {\n  id?: string;\n  label: string;\n  size: ElActionButtonSizes;\n  color: ElActionButtonColors;\n  status: ElActionButtonStatus;\n  leadingIcon?: InstanceType<typeof ElIcon>['$props'];\n  trailingIcon?: InstanceType<typeof ElIcon>['$props'] & { name: 'ChevronDownIcon' };\n  badge?: Omit<InstanceType<typeof ElBadge>['$props'], 'badge'>;\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'base',\n  color: 'primary',\n  status: 'default',\n});\n\nconst onClick = () => {\n  isPressed.value = true;\n  $emits('click', props.onClick);\n};\n\nconst isPressed = ref<boolean>(props.status === 'pressed');\nconst $emits = defineEmits(['click']);\n</script>\n\n<template>\n  <button\n    class=\"transition-colors w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker active:bg-neutral-pressed\"\n    :class=\"{\n      'text-sm h-8': props.size === 'base',\n      'text-base h-10': props.size === 'l',\n      'border-transparent text-neutral-darker': props.status === 'default',\n      'border-transparent text-neutral-darker bg-neutral-hover': props.status === 'hover',\n      'border-transparent bg-neutral-pressed ':\n        (isPressed || props.status === 'pressed') && props.status !== 'active' && props.status !== 'default' && props.status !== 'hover',\n      'text-primary-active bg-primary-light-active border-primary-active': props.status === 'active' && props.color === 'primary',\n      'text-secondary-active bg-secondary-light-active border-secondary-active': props.status === 'active' && props.color === 'secondary',\n    }\"\n    :data-cy=\"props.label ? props.label.trim().replace(/\\s+/g, '') : 'default-action' + '-button'\"\n    @mouse-down=\"isPressed = true\"\n    @click=\"onClick\"\n  >\n    <ElIcon\n      v-if=\"leadingIcon\"\n      v-bind=\"leadingIcon\"\n      :class=\"{\n        'h-4 w-4': size === 'base',\n        'h-5 w-5': size === 'l',\n      }\"\n    />\n    <span> {{ props.label }}</span>\n    <ElIcon\n      v-if=\"trailingIcon\"\n      v-bind=\"trailingIcon\"\n      :class=\"{\n        'h-4 w-4': size === 'base',\n        'h-5 w-5': size === 'l',\n      }\"\n    />\n    <div v-if=\"badge\" class=\"h-4 ml-1 relative flex justify-center items-start\">\n      <ElBadge v-bind=\"badge\" color=\"red\" />\n    </div>\n  </button>\n</template>\n"],"names":["elActionButtonSizes","elActionButtonColors","elActionButtonStatus","props","__props","onClick","isPressed","$emits","ref","__emit"],"mappings":"22CACaA,EAAsB,CAAC,OAAQ,GAAG,EAGlCC,EAAuB,CAAC,UAAW,WAAW,EAG9CC,EAAuB,CAAC,UAAW,QAAS,UAAW,QAAQ,sNAoB5E,MAAMC,EAAQC,EAMRC,EAAU,IAAM,CACpBC,EAAU,MAAQ,GACXC,EAAA,QAASJ,EAAM,OAAO,CAAA,EAGzBG,EAAYE,EAAaL,EAAM,SAAW,SAAS,EACnDI,EAASE"}

package/dist/src/ElButton.vue.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),d=require("./ElIcon.vue.cjs2.js"),u=["disabled","type","data-cy"],p={class:"font-semibold"},b={key:1,class:"inline-flex items-center"},m=r.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),h=r.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1),v=[m,h],y=r.createElementVNode("span",{class:"font-semibold"},"Un attimo...",-1),f=["xs","sm","base","l","xl"],g=["primary","secondary","tertiary"],c=r.defineComponent({__name:"ElButton",props:{disabled:{type:Boolean,default:!1},dark:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},icon:{default:void 0},iconRight:{type:Boolean},error:{type:Boolean,default:!1},label:{default:""},size:{default:"base"},variant:{default:"primary"},type:{default:"button"},loadOnClick:{type:Boolean,default:!1},onClick:{type:Function,default:void 0}},setup(n){const a=n,o=r.ref(!1),l=r.ref(!1),s=r.computed(()=>o.value||l.value||a.loading),t=async()=>{var e;o.value||s.value||(l.value=o.value=a.loadOnClick,setTimeout(()=>{l.value=!1},3e3),await((e=a.onClick)==null?void 0:e.call(a)),o.value=!1)};return(e,z)=>{var i;return r.openBlock(),r.createElementBlock("button",{disabled:e.disabled||e.loading,type:e.type,class:r.normalizeClass(["inline-flex items-center justify-center py-0 font-semibold leading-4 transition duration-150 ease-in-out",{"h-6 rounded text-xs":e.size==="xs","h-7 rounded text-xs":e.size==="sm","h-8 rounded-md text-sm":e.size==="base","text-base h-10 rounded-md ":e.size==="l","text-base h-12 rounded-md ":e.size==="xl","cursor-pointer":!s.value&&!e.disabled,"cursor-wait":s.value&&!e.disabled,"px-4":e.variant!=="tertiary"&&(e.size==="base"||e.size==="l"||e.size==="xl"),"px-3":e.variant!=="tertiary"&&(e.size==="sm"||e.size==="xs")||e.variant==="tertiary"&&(e.size==="l"||e.size==="xl"),"px-2":e.variant==="tertiary"&&(e.size==="xs"||e.size==="sm"||e.size==="base"),...e.dark?{"bg-alpha-200 text-white hover:bg-alpha-300 focus:bg-alpha-300 focus:border focus:border-alpha-400 focus:outline-none":e.variant==="primary"&&!e.disabled,"bg-alpha-100 text-alpha-400 cursor-not-allowed":e.variant==="primary"&&e.disabled,"bg-black border border-alpha-500 hover:bg-alpha-100 focus:bg-alpha-100 text-white focus:outline-none":e.variant==="secondary"&&!e.error&&!e.disabled,"text-alpha-400 bg-alpha-100 cursor-not-allowed focus:outline-none":e.variant==="secondary"&&e.disabled,"bg-transparent hover:bg-alpha-100 focus:bg-alpha-100 border-none text-white focus:outline-none":e.variant==="tertiary"&&!e.error&&!e.disabled,"text-alpha-400 cursor-not-allowed border-none bg-transparent focus:outline-none":e.variant==="tertiary"&&e.disabled}:{"bg-primary hover:bg-primary-hover focus:bg-primary-pressed focus:outlined-primary text-white":e.variant==="primary"&&!e.error&&!e.disabled,"bg-error hover:bg-error-hover focus:bg-error-pressed focus:outlined-error text-white":e.variant==="primary"&&e.error&&!e.disabled,"bg-neutral-inactive text-neutral-inactive cursor-not-allowed":e.variant==="primary"&&e.disabled,"bg-white border border-primary hover:border-primary-hover hover:bg-primary-light-hover hover:text-primary-hover focus:text-primary-pressed focus:bg-primary-light focus:border-primary-pressed text-primary focus:outlined-primary":e.variant==="secondary"&&!e.error&&!e.disabled,"border-error text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border bg-white":e.variant==="secondary"&&e.error&&!e.disabled,"text-neutral-inactive border-neutral-inactive cursor-not-allowed border":e.variant==="secondary"&&e.disabled,"text-primary hover:text-primary-hover hover:bg-primary-light-hover focus:text-primary-pressed focus:bg-primary-light-pressed focus:outlined-primary border-none bg-transparent":e.variant==="tertiary"&&!e.error&&!e.disabled,"text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border-none":e.variant==="tertiary"&&e.error&&!e.disabled,"text-neutral-inactive cursor-not-allowed border-none bg-transparent":e.variant==="tertiary"&&e.disabled}}]),"data-cy":`${(i=e.label.trim())==null?void 0:i.replaceAll(" ","").replaceAll(",","")}-button`,onClick:t},[s.value?(r.openBlock(),r.createElementBlock("span",b,[(r.openBlock(),r.createElementBlock("svg",{class:r.normalizeClass(["animate-spin",{"mr-1 h-[14px] w-[14px]":e.size==="xs","mr-2 h-4 w-4":e.size==="sm","mr-2 h-5 w-5":e.size==="base","mr-3 h-6 w-6":e.size==="l"||e.size==="xl"}]),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},v,2)),y])):(r.openBlock(),r.createElementBlock("span",{key:0,class:r.normalizeClass(["inline-flex items-center",e.iconRight?"flex-row-reverse":"flex-row"])},[e.icon?(r.openBlock(),r.createBlock(d.default,{key:0,name:e.icon.name,solid:e.icon.solid,class:r.normalizeClass({"h-[14px] w-[14px]":e.size==="xs","h-4 w-4":e.size==="sm","h-5 w-5":e.size==="base","h-6 w-6":e.size==="l"||e.size==="xl"})},null,8,["name","solid","class"])):r.createCommentVNode("",!0),e.icon&&e.label!==""?(r.openBlock(),r.createElementBlock("span",{key:1,class:r.normalizeClass({"w-1":e.size==="xs","w-2":e.size==="sm"||e.size==="base","w-3":e.size==="l"||e.size==="xl"})},null,2)):r.createCommentVNode("",!0),r.createElementVNode("span",p,r.toDisplayString(e.label),1)],2))],10,u)}}});exports.default=c;exports.elButtonSizes=f;exports.elButtonVariants=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),d=require("./ElIcon.vue.cjs2.js"),u=["disabled","type","data-cy"],p={class:"font-semibold"},b={key:1,class:"inline-flex items-center"},v=r.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),m=r.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1),h=[v,m],y=r.createElementVNode("span",{class:"font-semibold"},"Un attimo...",-1),g=["xs","sm","base","l","xl"],c=["primary","secondary","tertiary"],f=r.defineComponent({__name:"ElButton",props:{disabled:{type:Boolean,default:!1},dark:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},icon:{default:void 0},iconRight:{type:Boolean},error:{type:Boolean,default:!1},label:{default:""},size:{default:"base"},variant:{default:"primary"},type:{default:"button"},loadOnClick:{type:Boolean,default:!1},onClick:{type:Function,default:void 0}},setup(t){const a=t,o=r.ref(!1),l=r.ref(!1),i=r.computed(()=>o.value||l.value||a.loading),n=async()=>{var e;o.value||i.value||(l.value=o.value=a.loadOnClick,setTimeout(()=>{l.value=!1},3e3),await((e=a.onClick)==null?void 0:e.call(a)),o.value=!1)};return(e,z)=>{var s;return r.openBlock(),r.createElementBlock("button",{disabled:e.disabled||e.loading,type:e.type,class:r.normalizeClass(["inline-flex items-center justify-center py-0 font-semibold leading-4 transition duration-150 ease-in-out",{"h-6 rounded text-xs":e.size==="xs","h-7 rounded text-xs":e.size==="sm","h-8 rounded-md text-sm":e.size==="base","text-base h-10 rounded-md ":e.size==="l","text-base h-12 rounded-md ":e.size==="xl","cursor-pointer":!i.value&&!e.disabled,"cursor-wait":i.value&&!e.disabled,"px-4":e.variant!=="tertiary"&&(e.size==="base"||e.size==="l"||e.size==="xl"),"px-3":e.variant!=="tertiary"&&(e.size==="sm"||e.size==="xs")||e.variant==="tertiary"&&(e.size==="l"||e.size==="xl"),"px-2":e.variant==="tertiary"&&(e.size==="xs"||e.size==="sm"||e.size==="base"),...e.dark?{"bg-alpha-200 text-white hover:bg-alpha-300 focus:bg-alpha-300 focus:border focus:border-alpha-400 focus:outline-none":e.variant==="primary"&&!e.disabled,"bg-alpha-100 text-alpha-400 cursor-not-allowed":e.variant==="primary"&&e.disabled,"bg-black border border-alpha-500 hover:bg-alpha-100 focus:bg-alpha-100 text-white focus:outline-none":e.variant==="secondary"&&!e.error&&!e.disabled,"text-alpha-400 bg-alpha-100 cursor-not-allowed focus:outline-none":e.variant==="secondary"&&e.disabled,"bg-transparent hover:bg-alpha-100 focus:bg-alpha-100 border-none text-white focus:outline-none":e.variant==="tertiary"&&!e.error&&!e.disabled,"text-alpha-400 cursor-not-allowed border-none bg-transparent focus:outline-none":e.variant==="tertiary"&&e.disabled}:{"bg-primary hover:bg-primary-hover active:bg-primary-pressed active:outlined-primary text-white":e.variant==="primary"&&!e.error&&!e.disabled,"bg-error hover:bg-error-hover active:bg-error-pressed active:outlined-error text-white":e.variant==="primary"&&e.error&&!e.disabled,"bg-neutral-inactive text-neutral-inactive cursor-not-allowed":e.variant==="primary"&&e.disabled,"bg-white border border-primary hover:border-primary-hover hover:bg-primary-light-hover hover:text-primary-hover active:text-primary-pressed active:bg-primary-light active:border-primary-pressed text-primary active:outlined-primary":e.variant==="secondary"&&!e.error&&!e.disabled,"border-error text-error hover:bg-error-light-hover active:bg-error-light-pressed active:outlined-error border bg-white":e.variant==="secondary"&&e.error&&!e.disabled,"text-neutral-inactive border-neutral-inactive cursor-not-allowed border":e.variant==="secondary"&&e.disabled,"text-primary hover:text-primary-hover hover:bg-primary-light-hover active:text-primary-pressed active:bg-primary-light-pressed active:outlined-primary border-none bg-transparent":e.variant==="tertiary"&&!e.error&&!e.disabled,"text-error hover:bg-error-light-hover active:bg-error-light-pressed active:outlined-error border-none":e.variant==="tertiary"&&e.error&&!e.disabled,"text-neutral-inactive cursor-not-allowed border-none bg-transparent":e.variant==="tertiary"&&e.disabled}}]),"data-cy":`${(s=e.label.trim())==null?void 0:s.replaceAll(" ","").replaceAll(",","")}-button`,onClick:n},[i.value?(r.openBlock(),r.createElementBlock("span",b,[(r.openBlock(),r.createElementBlock("svg",{class:r.normalizeClass(["animate-spin",{"mr-1 h-[14px] w-[14px]":e.size==="xs","mr-2 h-4 w-4":e.size==="sm","mr-2 h-5 w-5":e.size==="base","mr-3 h-6 w-6":e.size==="l"||e.size==="xl"}]),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},h,2)),y])):(r.openBlock(),r.createElementBlock("span",{key:0,class:r.normalizeClass(["inline-flex items-center",e.iconRight?"flex-row-reverse":"flex-row"])},[e.icon?(r.openBlock(),r.createBlock(d.default,{key:0,name:e.icon.name,solid:e.icon.solid,class:r.normalizeClass({"h-[14px] w-[14px]":e.size==="xs","h-4 w-4":e.size==="sm","h-5 w-5":e.size==="base","h-6 w-6":e.size==="l"||e.size==="xl"})},null,8,["name","solid","class"])):r.createCommentVNode("",!0),e.icon&&e.label!==""?(r.openBlock(),r.createElementBlock("span",{key:1,class:r.normalizeClass({"w-1":e.size==="xs","w-2":e.size==="sm"||e.size==="base","w-3":e.size==="l"||e.size==="xl"})},null,2)):r.createCommentVNode("",!0),r.createElementVNode("span",p,r.toDisplayString(e.label),1)],2))],10,u)}}});exports.default=f;exports.elButtonSizes=g;exports.elButtonVariants=c;
 //# sourceMappingURL=ElButton.vue.cjs2.js.map

package/dist/src/ElButton.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElButton.vue.cjs2.js","sources":["../../src/ElButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elButtonSizes = ['xs', 'sm', 'base', 'l', 'xl'] as const;\nexport type ElButtonSize = (typeof elButtonSizes)[number];\n\nexport const elButtonVariants = ['primary', 'secondary', 'tertiary'] as const;\nexport type ElButtonVariant = (typeof elButtonVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport { ref, computed, ButtonHTMLAttributes } from 'vue';\n\nexport interface ElButtonProps {\n  disabled?: boolean;\n  dark?: boolean;\n  loading?: boolean;\n  icon?: ElIconProps;\n  iconRight?: boolean;\n  error?: boolean;\n  label: string;\n  size?: ElButtonSize;\n  variant?: ElButtonVariant;\n  type?: ButtonHTMLAttributes['type'];\n  loadOnClick?: boolean;\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ElButtonProps>(), {\n  disabled: false,\n  dark: false,\n  loading: false,\n  error: false,\n  label: '',\n  icon: undefined,\n  size: 'base',\n  variant: 'primary',\n  type: 'button',\n  loadOnClick: false,\n  onClick: undefined,\n});\n\nconst callbackLoading = ref<boolean>(false);\nconst defaultLoading = ref<boolean>(false);\nconst computedLoading = computed(() => callbackLoading.value || defaultLoading.value || props.loading);\n\nconst onClick = async () => {\n  if (callbackLoading.value || computedLoading.value) return;\n  defaultLoading.value = callbackLoading.value = props.loadOnClick;\n  setTimeout(() => {\n    defaultLoading.value = false;\n  }, 3000);\n  await props.onClick?.();\n  callbackLoading.value = false;\n};\n</script>\n\n<template>\n  <button\n    :disabled=\"disabled || loading\"\n    :type=\"type\"\n    class=\"inline-flex items-center justify-center py-0 font-semibold leading-4 transition duration-150 ease-in-out\"\n    :class=\"{\n      'h-6 rounded text-xs': size === 'xs',\n      'h-7 rounded text-xs': size === 'sm',\n      'h-8 rounded-md text-sm': size === 'base',\n      'text-base h-10 rounded-md ': size === 'l',\n      'text-base h-12 rounded-md ': size === 'xl',\n      'cursor-pointer': !computedLoading && !disabled,\n      'cursor-wait': computedLoading && !disabled,\n      'px-4': variant !== 'tertiary' && (size === 'base' || size === 'l' || size === 'xl'),\n      'px-3': (variant !== 'tertiary' && (size === 'sm' || size === 'xs')) || (variant === 'tertiary' && (size === 'l' || size === 'xl')),\n      'px-2': variant === 'tertiary' && (size === 'xs' || size === 'sm' || size === 'base'),\n      ...(dark\n        ? {\n            'bg-alpha-200 text-white hover:bg-alpha-300 focus:bg-alpha-300 focus:border focus:border-alpha-400 focus:outline-none':\n              variant === 'primary' && !disabled,\n            'bg-alpha-100 text-alpha-400 cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-black border border-alpha-500 hover:bg-alpha-100 focus:bg-alpha-100 text-white focus:outline-none':\n              variant === 'secondary' && !error && !disabled,\n            'text-alpha-400 bg-alpha-100 cursor-not-allowed focus:outline-none': variant === 'secondary' && disabled,\n            'bg-transparent hover:bg-alpha-100 focus:bg-alpha-100 border-none text-white focus:outline-none':\n              variant === 'tertiary' && !error && !disabled,\n            'text-alpha-400 cursor-not-allowed border-none bg-transparent focus:outline-none': variant === 'tertiary' && disabled,\n          }\n        : {\n            'bg-primary hover:bg-primary-hover focus:bg-primary-pressed focus:outlined-primary text-white':\n              variant === 'primary' && !error && !disabled,\n            'bg-error hover:bg-error-hover focus:bg-error-pressed focus:outlined-error text-white':\n              variant === 'primary' && error && !disabled,\n            'bg-neutral-inactive text-neutral-inactive cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-white border border-primary hover:border-primary-hover hover:bg-primary-light-hover hover:text-primary-hover focus:text-primary-pressed focus:bg-primary-light focus:border-primary-pressed text-primary focus:outlined-primary':\n              variant === 'secondary' && !error && !disabled,\n            'border-error text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border bg-white':\n              variant === 'secondary' && error && !disabled,\n            'text-neutral-inactive border-neutral-inactive cursor-not-allowed border': variant === 'secondary' && disabled,\n            'text-primary hover:text-primary-hover hover:bg-primary-light-hover focus:text-primary-pressed focus:bg-primary-light-pressed focus:outlined-primary border-none bg-transparent':\n              variant === 'tertiary' && !error && !disabled,\n            'text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border-none':\n              variant === 'tertiary' && error && !disabled,\n            'text-neutral-inactive cursor-not-allowed border-none bg-transparent': variant === 'tertiary' && disabled,\n          }),\n    }\"\n    :data-cy=\"`${label.trim()?.replaceAll(' ', '').replaceAll(',', '')}-button`\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"!computedLoading\" class=\"inline-flex items-center\" :class=\"iconRight ? 'flex-row-reverse' : 'flex-row'\">\n      <ElIcon\n        v-if=\"icon\"\n        :name=\"icon.name\"\n        :solid=\"icon.solid\"\n        :class=\"{\n          'h-[14px] w-[14px]': size === 'xs',\n          'h-4 w-4': size === 'sm',\n          'h-5 w-5': size === 'base',\n          'h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n      />\n      <span\n        v-if=\"icon && label !== ''\"\n        :class=\"{\n          'w-1': size === 'xs',\n          'w-2': size === 'sm' || size === 'base',\n          'w-3': size === 'l' || size === 'xl',\n        }\"\n      ></span>\n      <span class=\"font-semibold\">{{ label }}</span>\n    </span>\n    <span v-else class=\"inline-flex items-center\">\n      <svg\n        class=\"animate-spin\"\n        :class=\"{\n          'mr-1 h-[14px] w-[14px]': size === 'xs',\n          'mr-2 h-4 w-4': size === 'sm',\n          'mr-2 h-5 w-5': size === 'base',\n          'mr-3 h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n      </svg>\n      <span class=\"font-semibold\">Un attimo...</span>\n    </span>\n  </button>\n</template>\n"],"names":["elButtonSizes","elButtonVariants","props","__props","callbackLoading","ref","defaultLoading","computedLoading","computed","onClick","_a"],"mappings":"6pBACaA,EAAgB,CAAC,KAAM,KAAM,OAAQ,IAAK,IAAI,EAG9CC,EAAmB,CAAC,UAAW,YAAa,UAAU,uZAuBnE,MAAMC,EAAQC,EAcRC,EAAkBC,MAAa,EAAK,EACpCC,EAAiBD,MAAa,EAAK,EACnCE,EAAkBC,WAAS,IAAMJ,EAAgB,OAASE,EAAe,OAASJ,EAAM,OAAO,EAE/FO,EAAU,SAAY,OACtBL,EAAgB,OAASG,EAAgB,QAC9BD,EAAA,MAAQF,EAAgB,MAAQF,EAAM,YACrD,WAAW,IAAM,CACfI,EAAe,MAAQ,IACtB,GAAI,EACP,OAAMI,EAAAR,EAAM,UAAN,YAAAQ,EAAA,KAAAR,IACNE,EAAgB,MAAQ,GAAA"}
+{"version":3,"file":"ElButton.vue.cjs2.js","sources":["../../src/ElButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elButtonSizes = ['xs', 'sm', 'base', 'l', 'xl'] as const;\nexport type ElButtonSize = (typeof elButtonSizes)[number];\n\nexport const elButtonVariants = ['primary', 'secondary', 'tertiary'] as const;\nexport type ElButtonVariant = (typeof elButtonVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport { ref, computed, ButtonHTMLAttributes } from 'vue';\n\nexport interface ElButtonProps {\n  disabled?: boolean;\n  dark?: boolean;\n  loading?: boolean;\n  icon?: ElIconProps;\n  iconRight?: boolean;\n  error?: boolean;\n  label: string;\n  size?: ElButtonSize;\n  variant?: ElButtonVariant;\n  type?: ButtonHTMLAttributes['type'];\n  loadOnClick?: boolean;\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ElButtonProps>(), {\n  disabled: false,\n  dark: false,\n  loading: false,\n  error: false,\n  label: '',\n  icon: undefined,\n  size: 'base',\n  variant: 'primary',\n  type: 'button',\n  loadOnClick: false,\n  onClick: undefined,\n});\n\nconst callbackLoading = ref<boolean>(false);\nconst defaultLoading = ref<boolean>(false);\nconst computedLoading = computed(() => callbackLoading.value || defaultLoading.value || props.loading);\n\nconst onClick = async () => {\n  if (callbackLoading.value || computedLoading.value) return;\n  defaultLoading.value = callbackLoading.value = props.loadOnClick;\n  setTimeout(() => {\n    defaultLoading.value = false;\n  }, 3000);\n  await props.onClick?.();\n  callbackLoading.value = false;\n};\n</script>\n\n<template>\n  <button\n    :disabled=\"disabled || loading\"\n    :type=\"type\"\n    class=\"inline-flex items-center justify-center py-0 font-semibold leading-4 transition duration-150 ease-in-out\"\n    :class=\"{\n      'h-6 rounded text-xs': size === 'xs',\n      'h-7 rounded text-xs': size === 'sm',\n      'h-8 rounded-md text-sm': size === 'base',\n      'text-base h-10 rounded-md ': size === 'l',\n      'text-base h-12 rounded-md ': size === 'xl',\n      'cursor-pointer': !computedLoading && !disabled,\n      'cursor-wait': computedLoading && !disabled,\n      'px-4': variant !== 'tertiary' && (size === 'base' || size === 'l' || size === 'xl'),\n      'px-3': (variant !== 'tertiary' && (size === 'sm' || size === 'xs')) || (variant === 'tertiary' && (size === 'l' || size === 'xl')),\n      'px-2': variant === 'tertiary' && (size === 'xs' || size === 'sm' || size === 'base'),\n      ...(dark\n        ? {\n            'bg-alpha-200 text-white hover:bg-alpha-300 focus:bg-alpha-300 focus:border focus:border-alpha-400 focus:outline-none':\n              variant === 'primary' && !disabled,\n            'bg-alpha-100 text-alpha-400 cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-black border border-alpha-500 hover:bg-alpha-100 focus:bg-alpha-100 text-white focus:outline-none':\n              variant === 'secondary' && !error && !disabled,\n            'text-alpha-400 bg-alpha-100 cursor-not-allowed focus:outline-none': variant === 'secondary' && disabled,\n            'bg-transparent hover:bg-alpha-100 focus:bg-alpha-100 border-none text-white focus:outline-none':\n              variant === 'tertiary' && !error && !disabled,\n            'text-alpha-400 cursor-not-allowed border-none bg-transparent focus:outline-none': variant === 'tertiary' && disabled,\n          }\n        : {\n            'bg-primary hover:bg-primary-hover active:bg-primary-pressed active:outlined-primary text-white':\n              variant === 'primary' && !error && !disabled,\n            'bg-error hover:bg-error-hover active:bg-error-pressed active:outlined-error text-white':\n              variant === 'primary' && error && !disabled,\n            'bg-neutral-inactive text-neutral-inactive cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-white border border-primary hover:border-primary-hover hover:bg-primary-light-hover hover:text-primary-hover active:text-primary-pressed active:bg-primary-light active:border-primary-pressed text-primary active:outlined-primary':\n              variant === 'secondary' && !error && !disabled,\n            'border-error text-error hover:bg-error-light-hover active:bg-error-light-pressed active:outlined-error border bg-white':\n              variant === 'secondary' && error && !disabled,\n            'text-neutral-inactive border-neutral-inactive cursor-not-allowed border': variant === 'secondary' && disabled,\n            'text-primary hover:text-primary-hover hover:bg-primary-light-hover active:text-primary-pressed active:bg-primary-light-pressed active:outlined-primary border-none bg-transparent':\n              variant === 'tertiary' && !error && !disabled,\n            'text-error hover:bg-error-light-hover active:bg-error-light-pressed active:outlined-error border-none':\n              variant === 'tertiary' && error && !disabled,\n            'text-neutral-inactive cursor-not-allowed border-none bg-transparent': variant === 'tertiary' && disabled,\n          }),\n    }\"\n    :data-cy=\"`${label.trim()?.replaceAll(' ', '').replaceAll(',', '')}-button`\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"!computedLoading\" class=\"inline-flex items-center\" :class=\"iconRight ? 'flex-row-reverse' : 'flex-row'\">\n      <ElIcon\n        v-if=\"icon\"\n        :name=\"icon.name\"\n        :solid=\"icon.solid\"\n        :class=\"{\n          'h-[14px] w-[14px]': size === 'xs',\n          'h-4 w-4': size === 'sm',\n          'h-5 w-5': size === 'base',\n          'h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n      />\n      <span\n        v-if=\"icon && label !== ''\"\n        :class=\"{\n          'w-1': size === 'xs',\n          'w-2': size === 'sm' || size === 'base',\n          'w-3': size === 'l' || size === 'xl',\n        }\"\n      ></span>\n      <span class=\"font-semibold\">{{ label }}</span>\n    </span>\n    <span v-else class=\"inline-flex items-center\">\n      <svg\n        class=\"animate-spin\"\n        :class=\"{\n          'mr-1 h-[14px] w-[14px]': size === 'xs',\n          'mr-2 h-4 w-4': size === 'sm',\n          'mr-2 h-5 w-5': size === 'base',\n          'mr-3 h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n      </svg>\n      <span class=\"font-semibold\">Un attimo...</span>\n    </span>\n  </button>\n</template>\n"],"names":["elButtonSizes","elButtonVariants","props","__props","callbackLoading","ref","defaultLoading","computedLoading","computed","onClick","_a"],"mappings":"6pBACaA,EAAgB,CAAC,KAAM,KAAM,OAAQ,IAAK,IAAI,EAG9CC,EAAmB,CAAC,UAAW,YAAa,UAAU,uZAuBnE,MAAMC,EAAQC,EAcRC,EAAkBC,MAAa,EAAK,EACpCC,EAAiBD,MAAa,EAAK,EACnCE,EAAkBC,WAAS,IAAMJ,EAAgB,OAASE,EAAe,OAASJ,EAAM,OAAO,EAE/FO,EAAU,SAAY,OACtBL,EAAgB,OAASG,EAAgB,QAC9BD,EAAA,MAAQF,EAAgB,MAAQF,EAAM,YACrD,WAAW,IAAM,CACfI,EAAe,MAAQ,IACtB,GAAI,EACP,OAAMI,EAAAR,EAAM,UAAN,YAAAQ,EAAA,KAAAR,IACNE,EAAgB,MAAQ,GAAA"}

package/dist/src/ElButton.vue.esm2.js

@@ -1,2 +1,2 @@
-import{defineComponent as m,ref as u,computed as y,openBlock as r,createElementBlock as o,normalizeClass as s,createBlock as f,createCommentVNode as p,createElementVNode as n,toDisplayString as v}from"vue";import g from"./ElIcon.vue.esm2.js";const z=["disabled","type","data-cy"],w={class:"font-semibold"},c={key:1,class:"inline-flex items-center"},k=n("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),B=n("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1),C=[k,B],V=n("span",{class:"font-semibold"},"Un attimo...",-1),N=["xs","sm","base","l","xl"],O=["primary","secondary","tertiary"],R=m({__name:"ElButton",props:{disabled:{type:Boolean,default:!1},dark:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},icon:{default:void 0},iconRight:{type:Boolean},error:{type:Boolean,default:!1},label:{default:""},size:{default:"base"},variant:{default:"primary"},type:{default:"button"},loadOnClick:{type:Boolean,default:!1},onClick:{type:Function,default:void 0}},setup(b){const a=b,i=u(!1),t=u(!1),l=y(()=>i.value||t.value||a.loading),h=async()=>{var e;i.value||l.value||(t.value=i.value=a.loadOnClick,setTimeout(()=>{t.value=!1},3e3),await((e=a.onClick)==null?void 0:e.call(a)),i.value=!1)};return(e,A)=>{var d;return r(),o("button",{disabled:e.disabled||e.loading,type:e.type,class:s(["inline-flex items-center justify-center py-0 font-semibold leading-4 transition duration-150 ease-in-out",{"h-6 rounded text-xs":e.size==="xs","h-7 rounded text-xs":e.size==="sm","h-8 rounded-md text-sm":e.size==="base","text-base h-10 rounded-md ":e.size==="l","text-base h-12 rounded-md ":e.size==="xl","cursor-pointer":!l.value&&!e.disabled,"cursor-wait":l.value&&!e.disabled,"px-4":e.variant!=="tertiary"&&(e.size==="base"||e.size==="l"||e.size==="xl"),"px-3":e.variant!=="tertiary"&&(e.size==="sm"||e.size==="xs")||e.variant==="tertiary"&&(e.size==="l"||e.size==="xl"),"px-2":e.variant==="tertiary"&&(e.size==="xs"||e.size==="sm"||e.size==="base"),...e.dark?{"bg-alpha-200 text-white hover:bg-alpha-300 focus:bg-alpha-300 focus:border focus:border-alpha-400 focus:outline-none":e.variant==="primary"&&!e.disabled,"bg-alpha-100 text-alpha-400 cursor-not-allowed":e.variant==="primary"&&e.disabled,"bg-black border border-alpha-500 hover:bg-alpha-100 focus:bg-alpha-100 text-white focus:outline-none":e.variant==="secondary"&&!e.error&&!e.disabled,"text-alpha-400 bg-alpha-100 cursor-not-allowed focus:outline-none":e.variant==="secondary"&&e.disabled,"bg-transparent hover:bg-alpha-100 focus:bg-alpha-100 border-none text-white focus:outline-none":e.variant==="tertiary"&&!e.error&&!e.disabled,"text-alpha-400 cursor-not-allowed border-none bg-transparent focus:outline-none":e.variant==="tertiary"&&e.disabled}:{"bg-primary hover:bg-primary-hover focus:bg-primary-pressed focus:outlined-primary text-white":e.variant==="primary"&&!e.error&&!e.disabled,"bg-error hover:bg-error-hover focus:bg-error-pressed focus:outlined-error text-white":e.variant==="primary"&&e.error&&!e.disabled,"bg-neutral-inactive text-neutral-inactive cursor-not-allowed":e.variant==="primary"&&e.disabled,"bg-white border border-primary hover:border-primary-hover hover:bg-primary-light-hover hover:text-primary-hover focus:text-primary-pressed focus:bg-primary-light focus:border-primary-pressed text-primary focus:outlined-primary":e.variant==="secondary"&&!e.error&&!e.disabled,"border-error text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border bg-white":e.variant==="secondary"&&e.error&&!e.disabled,"text-neutral-inactive border-neutral-inactive cursor-not-allowed border":e.variant==="secondary"&&e.disabled,"text-primary hover:text-primary-hover hover:bg-primary-light-hover focus:text-primary-pressed focus:bg-primary-light-pressed focus:outlined-primary border-none bg-transparent":e.variant==="tertiary"&&!e.error&&!e.disabled,"text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border-none":e.variant==="tertiary"&&e.error&&!e.disabled,"text-neutral-inactive cursor-not-allowed border-none bg-transparent":e.variant==="tertiary"&&e.disabled}}]),"data-cy":`${(d=e.label.trim())==null?void 0:d.replaceAll(" ","").replaceAll(",","")}-button`,onClick:h},[l.value?(r(),o("span",c,[(r(),o("svg",{class:s(["animate-spin",{"mr-1 h-[14px] w-[14px]":e.size==="xs","mr-2 h-4 w-4":e.size==="sm","mr-2 h-5 w-5":e.size==="base","mr-3 h-6 w-6":e.size==="l"||e.size==="xl"}]),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},C,2)),V])):(r(),o("span",{key:0,class:s(["inline-flex items-center",e.iconRight?"flex-row-reverse":"flex-row"])},[e.icon?(r(),f(g,{key:0,name:e.icon.name,solid:e.icon.solid,class:s({"h-[14px] w-[14px]":e.size==="xs","h-4 w-4":e.size==="sm","h-5 w-5":e.size==="base","h-6 w-6":e.size==="l"||e.size==="xl"})},null,8,["name","solid","class"])):p("",!0),e.icon&&e.label!==""?(r(),o("span",{key:1,class:s({"w-1":e.size==="xs","w-2":e.size==="sm"||e.size==="base","w-3":e.size==="l"||e.size==="xl"})},null,2)):p("",!0),n("span",w,v(e.label),1)],2))],10,z)}}});export{R as default,N as elButtonSizes,O as elButtonVariants};
+import{defineComponent as h,ref as p,computed as m,openBlock as r,createElementBlock as i,normalizeClass as o,createBlock as y,createCommentVNode as b,createElementVNode as n,toDisplayString as g}from"vue";import f from"./ElIcon.vue.esm2.js";const z=["disabled","type","data-cy"],w={class:"font-semibold"},c={key:1,class:"inline-flex items-center"},k=n("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),B=n("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1),C=[k,B],V=n("span",{class:"font-semibold"},"Un attimo...",-1),N=["xs","sm","base","l","xl"],O=["primary","secondary","tertiary"],R=h({__name:"ElButton",props:{disabled:{type:Boolean,default:!1},dark:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},icon:{default:void 0},iconRight:{type:Boolean},error:{type:Boolean,default:!1},label:{default:""},size:{default:"base"},variant:{default:"primary"},type:{default:"button"},loadOnClick:{type:Boolean,default:!1},onClick:{type:Function,default:void 0}},setup(u){const a=u,s=p(!1),t=p(!1),l=m(()=>s.value||t.value||a.loading),v=async()=>{var e;s.value||l.value||(t.value=s.value=a.loadOnClick,setTimeout(()=>{t.value=!1},3e3),await((e=a.onClick)==null?void 0:e.call(a)),s.value=!1)};return(e,A)=>{var d;return r(),i("button",{disabled:e.disabled||e.loading,type:e.type,class:o(["inline-flex items-center justify-center py-0 font-semibold leading-4 transition duration-150 ease-in-out",{"h-6 rounded text-xs":e.size==="xs","h-7 rounded text-xs":e.size==="sm","h-8 rounded-md text-sm":e.size==="base","text-base h-10 rounded-md ":e.size==="l","text-base h-12 rounded-md ":e.size==="xl","cursor-pointer":!l.value&&!e.disabled,"cursor-wait":l.value&&!e.disabled,"px-4":e.variant!=="tertiary"&&(e.size==="base"||e.size==="l"||e.size==="xl"),"px-3":e.variant!=="tertiary"&&(e.size==="sm"||e.size==="xs")||e.variant==="tertiary"&&(e.size==="l"||e.size==="xl"),"px-2":e.variant==="tertiary"&&(e.size==="xs"||e.size==="sm"||e.size==="base"),...e.dark?{"bg-alpha-200 text-white hover:bg-alpha-300 focus:bg-alpha-300 focus:border focus:border-alpha-400 focus:outline-none":e.variant==="primary"&&!e.disabled,"bg-alpha-100 text-alpha-400 cursor-not-allowed":e.variant==="primary"&&e.disabled,"bg-black border border-alpha-500 hover:bg-alpha-100 focus:bg-alpha-100 text-white focus:outline-none":e.variant==="secondary"&&!e.error&&!e.disabled,"text-alpha-400 bg-alpha-100 cursor-not-allowed focus:outline-none":e.variant==="secondary"&&e.disabled,"bg-transparent hover:bg-alpha-100 focus:bg-alpha-100 border-none text-white focus:outline-none":e.variant==="tertiary"&&!e.error&&!e.disabled,"text-alpha-400 cursor-not-allowed border-none bg-transparent focus:outline-none":e.variant==="tertiary"&&e.disabled}:{"bg-primary hover:bg-primary-hover active:bg-primary-pressed active:outlined-primary text-white":e.variant==="primary"&&!e.error&&!e.disabled,"bg-error hover:bg-error-hover active:bg-error-pressed active:outlined-error text-white":e.variant==="primary"&&e.error&&!e.disabled,"bg-neutral-inactive text-neutral-inactive cursor-not-allowed":e.variant==="primary"&&e.disabled,"bg-white border border-primary hover:border-primary-hover hover:bg-primary-light-hover hover:text-primary-hover active:text-primary-pressed active:bg-primary-light active:border-primary-pressed text-primary active:outlined-primary":e.variant==="secondary"&&!e.error&&!e.disabled,"border-error text-error hover:bg-error-light-hover active:bg-error-light-pressed active:outlined-error border bg-white":e.variant==="secondary"&&e.error&&!e.disabled,"text-neutral-inactive border-neutral-inactive cursor-not-allowed border":e.variant==="secondary"&&e.disabled,"text-primary hover:text-primary-hover hover:bg-primary-light-hover active:text-primary-pressed active:bg-primary-light-pressed active:outlined-primary border-none bg-transparent":e.variant==="tertiary"&&!e.error&&!e.disabled,"text-error hover:bg-error-light-hover active:bg-error-light-pressed active:outlined-error border-none":e.variant==="tertiary"&&e.error&&!e.disabled,"text-neutral-inactive cursor-not-allowed border-none bg-transparent":e.variant==="tertiary"&&e.disabled}}]),"data-cy":`${(d=e.label.trim())==null?void 0:d.replaceAll(" ","").replaceAll(",","")}-button`,onClick:v},[l.value?(r(),i("span",c,[(r(),i("svg",{class:o(["animate-spin",{"mr-1 h-[14px] w-[14px]":e.size==="xs","mr-2 h-4 w-4":e.size==="sm","mr-2 h-5 w-5":e.size==="base","mr-3 h-6 w-6":e.size==="l"||e.size==="xl"}]),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},C,2)),V])):(r(),i("span",{key:0,class:o(["inline-flex items-center",e.iconRight?"flex-row-reverse":"flex-row"])},[e.icon?(r(),y(f,{key:0,name:e.icon.name,solid:e.icon.solid,class:o({"h-[14px] w-[14px]":e.size==="xs","h-4 w-4":e.size==="sm","h-5 w-5":e.size==="base","h-6 w-6":e.size==="l"||e.size==="xl"})},null,8,["name","solid","class"])):b("",!0),e.icon&&e.label!==""?(r(),i("span",{key:1,class:o({"w-1":e.size==="xs","w-2":e.size==="sm"||e.size==="base","w-3":e.size==="l"||e.size==="xl"})},null,2)):b("",!0),n("span",w,g(e.label),1)],2))],10,z)}}});export{R as default,N as elButtonSizes,O as elButtonVariants};
 //# sourceMappingURL=ElButton.vue.esm2.js.map

package/dist/src/ElButton.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElButton.vue.esm2.js","sources":["../../src/ElButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elButtonSizes = ['xs', 'sm', 'base', 'l', 'xl'] as const;\nexport type ElButtonSize = (typeof elButtonSizes)[number];\n\nexport const elButtonVariants = ['primary', 'secondary', 'tertiary'] as const;\nexport type ElButtonVariant = (typeof elButtonVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport { ref, computed, ButtonHTMLAttributes } from 'vue';\n\nexport interface ElButtonProps {\n  disabled?: boolean;\n  dark?: boolean;\n  loading?: boolean;\n  icon?: ElIconProps;\n  iconRight?: boolean;\n  error?: boolean;\n  label: string;\n  size?: ElButtonSize;\n  variant?: ElButtonVariant;\n  type?: ButtonHTMLAttributes['type'];\n  loadOnClick?: boolean;\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ElButtonProps>(), {\n  disabled: false,\n  dark: false,\n  loading: false,\n  error: false,\n  label: '',\n  icon: undefined,\n  size: 'base',\n  variant: 'primary',\n  type: 'button',\n  loadOnClick: false,\n  onClick: undefined,\n});\n\nconst callbackLoading = ref<boolean>(false);\nconst defaultLoading = ref<boolean>(false);\nconst computedLoading = computed(() => callbackLoading.value || defaultLoading.value || props.loading);\n\nconst onClick = async () => {\n  if (callbackLoading.value || computedLoading.value) return;\n  defaultLoading.value = callbackLoading.value = props.loadOnClick;\n  setTimeout(() => {\n    defaultLoading.value = false;\n  }, 3000);\n  await props.onClick?.();\n  callbackLoading.value = false;\n};\n</script>\n\n<template>\n  <button\n    :disabled=\"disabled || loading\"\n    :type=\"type\"\n    class=\"inline-flex items-center justify-center py-0 font-semibold leading-4 transition duration-150 ease-in-out\"\n    :class=\"{\n      'h-6 rounded text-xs': size === 'xs',\n      'h-7 rounded text-xs': size === 'sm',\n      'h-8 rounded-md text-sm': size === 'base',\n      'text-base h-10 rounded-md ': size === 'l',\n      'text-base h-12 rounded-md ': size === 'xl',\n      'cursor-pointer': !computedLoading && !disabled,\n      'cursor-wait': computedLoading && !disabled,\n      'px-4': variant !== 'tertiary' && (size === 'base' || size === 'l' || size === 'xl'),\n      'px-3': (variant !== 'tertiary' && (size === 'sm' || size === 'xs')) || (variant === 'tertiary' && (size === 'l' || size === 'xl')),\n      'px-2': variant === 'tertiary' && (size === 'xs' || size === 'sm' || size === 'base'),\n      ...(dark\n        ? {\n            'bg-alpha-200 text-white hover:bg-alpha-300 focus:bg-alpha-300 focus:border focus:border-alpha-400 focus:outline-none':\n              variant === 'primary' && !disabled,\n            'bg-alpha-100 text-alpha-400 cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-black border border-alpha-500 hover:bg-alpha-100 focus:bg-alpha-100 text-white focus:outline-none':\n              variant === 'secondary' && !error && !disabled,\n            'text-alpha-400 bg-alpha-100 cursor-not-allowed focus:outline-none': variant === 'secondary' && disabled,\n            'bg-transparent hover:bg-alpha-100 focus:bg-alpha-100 border-none text-white focus:outline-none':\n              variant === 'tertiary' && !error && !disabled,\n            'text-alpha-400 cursor-not-allowed border-none bg-transparent focus:outline-none': variant === 'tertiary' && disabled,\n          }\n        : {\n            'bg-primary hover:bg-primary-hover focus:bg-primary-pressed focus:outlined-primary text-white':\n              variant === 'primary' && !error && !disabled,\n            'bg-error hover:bg-error-hover focus:bg-error-pressed focus:outlined-error text-white':\n              variant === 'primary' && error && !disabled,\n            'bg-neutral-inactive text-neutral-inactive cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-white border border-primary hover:border-primary-hover hover:bg-primary-light-hover hover:text-primary-hover focus:text-primary-pressed focus:bg-primary-light focus:border-primary-pressed text-primary focus:outlined-primary':\n              variant === 'secondary' && !error && !disabled,\n            'border-error text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border bg-white':\n              variant === 'secondary' && error && !disabled,\n            'text-neutral-inactive border-neutral-inactive cursor-not-allowed border': variant === 'secondary' && disabled,\n            'text-primary hover:text-primary-hover hover:bg-primary-light-hover focus:text-primary-pressed focus:bg-primary-light-pressed focus:outlined-primary border-none bg-transparent':\n              variant === 'tertiary' && !error && !disabled,\n            'text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border-none':\n              variant === 'tertiary' && error && !disabled,\n            'text-neutral-inactive cursor-not-allowed border-none bg-transparent': variant === 'tertiary' && disabled,\n          }),\n    }\"\n    :data-cy=\"`${label.trim()?.replaceAll(' ', '').replaceAll(',', '')}-button`\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"!computedLoading\" class=\"inline-flex items-center\" :class=\"iconRight ? 'flex-row-reverse' : 'flex-row'\">\n      <ElIcon\n        v-if=\"icon\"\n        :name=\"icon.name\"\n        :solid=\"icon.solid\"\n        :class=\"{\n          'h-[14px] w-[14px]': size === 'xs',\n          'h-4 w-4': size === 'sm',\n          'h-5 w-5': size === 'base',\n          'h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n      />\n      <span\n        v-if=\"icon && label !== ''\"\n        :class=\"{\n          'w-1': size === 'xs',\n          'w-2': size === 'sm' || size === 'base',\n          'w-3': size === 'l' || size === 'xl',\n        }\"\n      ></span>\n      <span class=\"font-semibold\">{{ label }}</span>\n    </span>\n    <span v-else class=\"inline-flex items-center\">\n      <svg\n        class=\"animate-spin\"\n        :class=\"{\n          'mr-1 h-[14px] w-[14px]': size === 'xs',\n          'mr-2 h-4 w-4': size === 'sm',\n          'mr-2 h-5 w-5': size === 'base',\n          'mr-3 h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n      </svg>\n      <span class=\"font-semibold\">Un attimo...</span>\n    </span>\n  </button>\n</template>\n"],"names":["elButtonSizes","elButtonVariants","props","__props","callbackLoading","ref","defaultLoading","computedLoading","computed","onClick","_a"],"mappings":"urBACaA,EAAgB,CAAC,KAAM,KAAM,OAAQ,IAAK,IAAI,EAG9CC,EAAmB,CAAC,UAAW,YAAa,UAAU,uYAuBnE,MAAMC,EAAQC,EAcRC,EAAkBC,EAAa,EAAK,EACpCC,EAAiBD,EAAa,EAAK,EACnCE,EAAkBC,EAAS,IAAMJ,EAAgB,OAASE,EAAe,OAASJ,EAAM,OAAO,EAE/FO,EAAU,SAAY,OACtBL,EAAgB,OAASG,EAAgB,QAC9BD,EAAA,MAAQF,EAAgB,MAAQF,EAAM,YACrD,WAAW,IAAM,CACfI,EAAe,MAAQ,IACtB,GAAI,EACP,OAAMI,EAAAR,EAAM,UAAN,YAAAQ,EAAA,KAAAR,IACNE,EAAgB,MAAQ,GAAA"}
+{"version":3,"file":"ElButton.vue.esm2.js","sources":["../../src/ElButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elButtonSizes = ['xs', 'sm', 'base', 'l', 'xl'] as const;\nexport type ElButtonSize = (typeof elButtonSizes)[number];\n\nexport const elButtonVariants = ['primary', 'secondary', 'tertiary'] as const;\nexport type ElButtonVariant = (typeof elButtonVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport { ref, computed, ButtonHTMLAttributes } from 'vue';\n\nexport interface ElButtonProps {\n  disabled?: boolean;\n  dark?: boolean;\n  loading?: boolean;\n  icon?: ElIconProps;\n  iconRight?: boolean;\n  error?: boolean;\n  label: string;\n  size?: ElButtonSize;\n  variant?: ElButtonVariant;\n  type?: ButtonHTMLAttributes['type'];\n  loadOnClick?: boolean;\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ElButtonProps>(), {\n  disabled: false,\n  dark: false,\n  loading: false,\n  error: false,\n  label: '',\n  icon: undefined,\n  size: 'base',\n  variant: 'primary',\n  type: 'button',\n  loadOnClick: false,\n  onClick: undefined,\n});\n\nconst callbackLoading = ref<boolean>(false);\nconst defaultLoading = ref<boolean>(false);\nconst computedLoading = computed(() => callbackLoading.value || defaultLoading.value || props.loading);\n\nconst onClick = async () => {\n  if (callbackLoading.value || computedLoading.value) return;\n  defaultLoading.value = callbackLoading.value = props.loadOnClick;\n  setTimeout(() => {\n    defaultLoading.value = false;\n  }, 3000);\n  await props.onClick?.();\n  callbackLoading.value = false;\n};\n</script>\n\n<template>\n  <button\n    :disabled=\"disabled || loading\"\n    :type=\"type\"\n    class=\"inline-flex items-center justify-center py-0 font-semibold leading-4 transition duration-150 ease-in-out\"\n    :class=\"{\n      'h-6 rounded text-xs': size === 'xs',\n      'h-7 rounded text-xs': size === 'sm',\n      'h-8 rounded-md text-sm': size === 'base',\n      'text-base h-10 rounded-md ': size === 'l',\n      'text-base h-12 rounded-md ': size === 'xl',\n      'cursor-pointer': !computedLoading && !disabled,\n      'cursor-wait': computedLoading && !disabled,\n      'px-4': variant !== 'tertiary' && (size === 'base' || size === 'l' || size === 'xl'),\n      'px-3': (variant !== 'tertiary' && (size === 'sm' || size === 'xs')) || (variant === 'tertiary' && (size === 'l' || size === 'xl')),\n      'px-2': variant === 'tertiary' && (size === 'xs' || size === 'sm' || size === 'base'),\n      ...(dark\n        ? {\n            'bg-alpha-200 text-white hover:bg-alpha-300 focus:bg-alpha-300 focus:border focus:border-alpha-400 focus:outline-none':\n              variant === 'primary' && !disabled,\n            'bg-alpha-100 text-alpha-400 cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-black border border-alpha-500 hover:bg-alpha-100 focus:bg-alpha-100 text-white focus:outline-none':\n              variant === 'secondary' && !error && !disabled,\n            'text-alpha-400 bg-alpha-100 cursor-not-allowed focus:outline-none': variant === 'secondary' && disabled,\n            'bg-transparent hover:bg-alpha-100 focus:bg-alpha-100 border-none text-white focus:outline-none':\n              variant === 'tertiary' && !error && !disabled,\n            'text-alpha-400 cursor-not-allowed border-none bg-transparent focus:outline-none': variant === 'tertiary' && disabled,\n          }\n        : {\n            'bg-primary hover:bg-primary-hover active:bg-primary-pressed active:outlined-primary text-white':\n              variant === 'primary' && !error && !disabled,\n            'bg-error hover:bg-error-hover active:bg-error-pressed active:outlined-error text-white':\n              variant === 'primary' && error && !disabled,\n            'bg-neutral-inactive text-neutral-inactive cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-white border border-primary hover:border-primary-hover hover:bg-primary-light-hover hover:text-primary-hover active:text-primary-pressed active:bg-primary-light active:border-primary-pressed text-primary active:outlined-primary':\n              variant === 'secondary' && !error && !disabled,\n            'border-error text-error hover:bg-error-light-hover active:bg-error-light-pressed active:outlined-error border bg-white':\n              variant === 'secondary' && error && !disabled,\n            'text-neutral-inactive border-neutral-inactive cursor-not-allowed border': variant === 'secondary' && disabled,\n            'text-primary hover:text-primary-hover hover:bg-primary-light-hover active:text-primary-pressed active:bg-primary-light-pressed active:outlined-primary border-none bg-transparent':\n              variant === 'tertiary' && !error && !disabled,\n            'text-error hover:bg-error-light-hover active:bg-error-light-pressed active:outlined-error border-none':\n              variant === 'tertiary' && error && !disabled,\n            'text-neutral-inactive cursor-not-allowed border-none bg-transparent': variant === 'tertiary' && disabled,\n          }),\n    }\"\n    :data-cy=\"`${label.trim()?.replaceAll(' ', '').replaceAll(',', '')}-button`\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"!computedLoading\" class=\"inline-flex items-center\" :class=\"iconRight ? 'flex-row-reverse' : 'flex-row'\">\n      <ElIcon\n        v-if=\"icon\"\n        :name=\"icon.name\"\n        :solid=\"icon.solid\"\n        :class=\"{\n          'h-[14px] w-[14px]': size === 'xs',\n          'h-4 w-4': size === 'sm',\n          'h-5 w-5': size === 'base',\n          'h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n      />\n      <span\n        v-if=\"icon && label !== ''\"\n        :class=\"{\n          'w-1': size === 'xs',\n          'w-2': size === 'sm' || size === 'base',\n          'w-3': size === 'l' || size === 'xl',\n        }\"\n      ></span>\n      <span class=\"font-semibold\">{{ label }}</span>\n    </span>\n    <span v-else class=\"inline-flex items-center\">\n      <svg\n        class=\"animate-spin\"\n        :class=\"{\n          'mr-1 h-[14px] w-[14px]': size === 'xs',\n          'mr-2 h-4 w-4': size === 'sm',\n          'mr-2 h-5 w-5': size === 'base',\n          'mr-3 h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n      </svg>\n      <span class=\"font-semibold\">Un attimo...</span>\n    </span>\n  </button>\n</template>\n"],"names":["elButtonSizes","elButtonVariants","props","__props","callbackLoading","ref","defaultLoading","computedLoading","computed","onClick","_a"],"mappings":"urBACaA,EAAgB,CAAC,KAAM,KAAM,OAAQ,IAAK,IAAI,EAG9CC,EAAmB,CAAC,UAAW,YAAa,UAAU,uYAuBnE,MAAMC,EAAQC,EAcRC,EAAkBC,EAAa,EAAK,EACpCC,EAAiBD,EAAa,EAAK,EACnCE,EAAkBC,EAAS,IAAMJ,EAAgB,OAASE,EAAe,OAASJ,EAAM,OAAO,EAE/FO,EAAU,SAAY,OACtBL,EAAgB,OAASG,EAAgB,QAC9BD,EAAA,MAAQF,EAAgB,MAAQF,EAAM,YACrD,WAAW,IAAM,CACfI,EAAe,MAAQ,IACtB,GAAI,EACP,OAAMI,EAAAR,EAAM,UAAN,YAAAQ,EAAA,KAAAR,IACNE,EAAgB,MAAQ,GAAA"}

package/dist/src/ElIconButton.vue.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue"),d=require("./ElIcon.vue.cjs2.js"),u=require("./ElBadge.vue.cjs2.js"),p=require("./ElTooltip.vue.cjs2.js"),c=["data-cy"],m={key:0,class:"inline-flex items-center justify-center"},h=o.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),g=o.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1),v=[h,g],b=["xs","sm","base","l","xl"],f=o.defineComponent({__name:"ElIconButton",props:{icon:{},tooltip:{default:void 0},tooltipDelay:{default:600},disabled:{type:Boolean,default:!1},size:{default:"base"},loading:{type:Boolean,default:!1},badge:{type:[String,Boolean],default:!1},badgeColor:{default:"primary"},error:{type:Boolean,default:!1},showTooltipOnMobile:{type:Boolean,default:!1}},emits:["click"],setup(i,{emit:a}){const l=i,r=a,n=o.computed(()=>l.badge!==!1&&!l.error&&!l.disabled&&!l.loading),t=o.computed(()=>l.disabled||l.loading||!1);return(e,s)=>(o.openBlock(),o.createBlock(p.default,{title:e.tooltip??"",position:"top-right","delay-time":l.tooltipDelay,"hide-on-mobile":!e.showTooltipOnMobile},{default:o.withCtx(()=>[o.createElementVNode("button",{class:o.normalizeClass(["relative flex items-center justify-center outline-none",{"h-6 w-6 rounded":e.size==="xs","h-7 w-7 rounded":e.size==="sm","h-8 w-8 rounded-md":e.size==="base","h-10 w-10 rounded-md":e.size==="l","h-12 w-12 rounded-md":e.size==="xl","cursor-not-allowed":t.value,"text-neutral-inactive":t.value,"hover:bg-error-light-hover focus:bg-error-light-pressed text-error bg-transparent":!t.value&&e.error,"text-primary hover:text-primary-hover focus:text-primary-pressed active:text-primary-pressed hover:bg-primary-light-hover focus:bg-primary-light-pressed active:bg-primary-light-pressed":!t.value&&!e.error}]),type:"button","data-cy":e.tooltip?`${e.tooltip.trim().replaceAll(" ","")}-icon-button`:"icon-button",onClick:s[0]||(s[0]=y=>t.value?void 0:r("click"))},[e.loading?(o.openBlock(),o.createElementBlock("span",m,[(o.openBlock(),o.createElementBlock("svg",{class:o.normalizeClass(["animate-spin",{"h-4 w-4":e.size==="xs","h-5 w-5":e.size==="sm","h-6 w-6":e.size==="base","h-8 w-8":e.size==="l","h-10 w-10":e.size==="xl"}]),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},v,2))])):(o.openBlock(),o.createBlock(d.default,{key:1,disabled:t.value,name:e.icon.name,solid:e.icon.solid,class:o.normalizeClass(["transition duration-150 ease-in-out",{"h-4 w-4":e.size==="xs","h-5 w-5":e.size==="sm","h-6 w-6":e.size==="base","h-8 w-8":e.size==="l","h-10 w-10":e.size==="xl"}])},null,8,["disabled","name","solid","class"])),n.value?(o.openBlock(),o.createBlock(u.default,{key:2,color:l.badgeColor,value:typeof e.badge=="string"?e.badge:void 0,class:o.normalizeClass({"top-[2px] right-[1px]":e.size==="xs","top-[2px] right-[2px]":e.size==="sm","top-[4px] right-[4px]":e.size==="base","top-[5px] right-[5px]":e.size==="l","top-[6px] right-[6px]":e.size==="xl"})},null,8,["color","value","class"])):o.createCommentVNode("",!0)],10,c)]),_:1},8,["title","delay-time","hide-on-mobile"]))}});exports.default=f;exports.elIconButtonSizes=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue"),d=require("./ElIcon.vue.cjs2.js"),u=require("./ElBadge.vue.cjs2.js"),p=require("./ElTooltip.vue.cjs2.js"),c=["data-cy"],m={key:0,class:"inline-flex items-center justify-center"},h=o.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),g=o.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1),v=[h,g],b=["xs","sm","base","l","xl"],f=o.defineComponent({__name:"ElIconButton",props:{icon:{},tooltip:{default:void 0},tooltipDelay:{default:600},disabled:{type:Boolean,default:!1},size:{default:"base"},loading:{type:Boolean,default:!1},badge:{type:[String,Boolean],default:!1},badgeColor:{default:"primary"},error:{type:Boolean,default:!1},showTooltipOnMobile:{type:Boolean,default:!1}},emits:["click"],setup(i,{emit:a}){const l=i,r=a,n=o.computed(()=>l.badge!==!1&&!l.error&&!l.disabled&&!l.loading),t=o.computed(()=>l.disabled||l.loading||!1);return(e,s)=>(o.openBlock(),o.createBlock(p.default,{title:e.tooltip??"",position:"top-right","delay-time":l.tooltipDelay,"hide-on-mobile":!e.showTooltipOnMobile},{default:o.withCtx(()=>[o.createElementVNode("button",{class:o.normalizeClass(["relative flex items-center justify-center outline-none",{"h-6 w-6 rounded":e.size==="xs","h-7 w-7 rounded":e.size==="sm","h-8 w-8 rounded-md":e.size==="base","h-10 w-10 rounded-md":e.size==="l","h-12 w-12 rounded-md":e.size==="xl","cursor-not-allowed":t.value,"text-neutral-inactive":t.value,"hover:bg-error-light-hover focus:bg-error-light-pressed text-error bg-transparent":!t.value&&e.error,"text-primary hover:text-primary-hover active:text-primary-pressed hover:bg-primary-light-hover active:bg-primary-light-pressed":!t.value&&!e.error}]),type:"button","data-cy":e.tooltip?`${e.tooltip.trim().replaceAll(" ","")}-icon-button`:"icon-button",onClick:s[0]||(s[0]=y=>t.value?void 0:r("click"))},[e.loading?(o.openBlock(),o.createElementBlock("span",m,[(o.openBlock(),o.createElementBlock("svg",{class:o.normalizeClass(["animate-spin",{"h-4 w-4":e.size==="xs","h-5 w-5":e.size==="sm","h-6 w-6":e.size==="base","h-8 w-8":e.size==="l","h-10 w-10":e.size==="xl"}]),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},v,2))])):(o.openBlock(),o.createBlock(d.default,{key:1,disabled:t.value,name:e.icon.name,solid:e.icon.solid,class:o.normalizeClass(["transition duration-150 ease-in-out",{"h-4 w-4":e.size==="xs","h-5 w-5":e.size==="sm","h-6 w-6":e.size==="base","h-8 w-8":e.size==="l","h-10 w-10":e.size==="xl"}])},null,8,["disabled","name","solid","class"])),n.value?(o.openBlock(),o.createBlock(u.default,{key:2,color:l.badgeColor,value:typeof e.badge=="string"?e.badge:void 0,class:o.normalizeClass({"top-[2px] right-[1px]":e.size==="xs","top-[2px] right-[2px]":e.size==="sm","top-[4px] right-[4px]":e.size==="base","top-[5px] right-[5px]":e.size==="l","top-[6px] right-[6px]":e.size==="xl"})},null,8,["color","value","class"])):o.createCommentVNode("",!0)],10,c)]),_:1},8,["title","delay-time","hide-on-mobile"]))}});exports.default=f;exports.elIconButtonSizes=b;
 //# sourceMappingURL=ElIconButton.vue.cjs2.js.map

package/dist/src/ElIconButton.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElIconButton.vue.cjs2.js","sources":["../../src/ElIconButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elIconButtonSizes = ['xs', 'sm', 'base', 'l', 'xl'] as const;\nexport type ElIconButtonSize = (typeof elIconButtonSizes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport { computed } from 'vue';\nimport ElBadge, { ElBadgeColors } from '@/ElBadge.vue';\nimport ElTooltip from '@/ElTooltip.vue';\n\nexport interface ElIconButtonProps {\n  icon: ElIconProps;\n  tooltip?: string;\n  tooltipDelay?: string | number;\n  disabled?: boolean;\n  size?: ElIconButtonSize;\n  loading?: boolean;\n  badge?: string | boolean;\n  badgeColor?: ElBadgeColors;\n  error?: boolean;\n  showTooltipOnMobile?: boolean;\n}\n\nconst props = withDefaults(defineProps<ElIconButtonProps>(), {\n  tooltip: undefined,\n  tooltipDelay: 600,\n  size: 'base',\n  badgeColor: 'primary',\n  disabled: false,\n  loading: false,\n  badge: false,\n  error: false,\n  showTooltipOnMobile: false,\n});\n\nconst emit = defineEmits<{\n  (event: 'click'): void;\n}>();\n\nconst showBadge = computed(() => props.badge !== false && !props.error && !props.disabled && !props.loading);\nconst disabled = computed(() => props.disabled || props.loading || false);\n</script>\n\n<template>\n  <ElTooltip :title=\"tooltip ?? ''\" position=\"top-right\" :delay-time=\"props.tooltipDelay\" :hide-on-mobile=\"!showTooltipOnMobile\">\n    <button\n      class=\"relative flex items-center justify-center outline-none\"\n      :class=\"{\n        'h-6 w-6 rounded': size === 'xs',\n        'h-7 w-7 rounded': size === 'sm',\n        'h-8 w-8 rounded-md': size === 'base',\n        'h-10 w-10 rounded-md': size === 'l',\n        'h-12 w-12 rounded-md': size === 'xl',\n        'cursor-not-allowed': disabled,\n        'text-neutral-inactive': disabled,\n        'hover:bg-error-light-hover focus:bg-error-light-pressed text-error bg-transparent': !disabled && error,\n        'text-primary hover:text-primary-hover focus:text-primary-pressed active:text-primary-pressed hover:bg-primary-light-hover focus:bg-primary-light-pressed active:bg-primary-light-pressed':\n          !disabled && !error,\n      }\"\n      type=\"button\"\n      :data-cy=\"tooltip ? `${tooltip.trim().replaceAll(' ', '')}-icon-button` : 'icon-button'\"\n      @click=\"disabled ? undefined : emit('click')\"\n    >\n      <span v-if=\"loading\" class=\"inline-flex items-center justify-center\">\n        <svg\n          class=\"animate-spin\"\n          :class=\"{\n            'h-4 w-4': size === 'xs',\n            'h-5 w-5': size === 'sm',\n            'h-6 w-6': size === 'base',\n            'h-8 w-8': size === 'l',\n            'h-10 w-10': size === 'xl',\n          }\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          />\n        </svg>\n      </span>\n\n      <ElIcon\n        v-else\n        :disabled=\"disabled\"\n        :name=\"icon.name\"\n        :solid=\"icon.solid\"\n        class=\"transition duration-150 ease-in-out\"\n        :class=\"{\n          'h-4 w-4': size === 'xs',\n          'h-5 w-5': size === 'sm',\n          'h-6 w-6': size === 'base',\n          'h-8 w-8': size === 'l',\n          'h-10 w-10': size === 'xl',\n        }\"\n      />\n      <ElBadge\n        v-if=\"showBadge\"\n        :color=\"props.badgeColor\"\n        :value=\"typeof badge === 'string' ? badge : undefined\"\n        :class=\"{\n          'top-[2px] right-[1px]': size === 'xs',\n          'top-[2px] right-[2px]': size === 'sm',\n          'top-[4px] right-[4px]': size === 'base',\n          'top-[5px] right-[5px]': size === 'l',\n          'top-[6px] right-[6px]': size === 'xl',\n        }\"\n      />\n    </button>\n  </ElTooltip>\n</template>\n"],"names":["elIconButtonSizes","props","__props","emit","__emit","showBadge","computed","disabled"],"mappings":"+nBACaA,EAAoB,CAAC,KAAM,KAAM,OAAQ,IAAK,IAAI,oYAuB/D,MAAMC,EAAQC,EAYRC,EAAOC,EAIPC,EAAYC,EAAA,SAAS,IAAML,EAAM,QAAU,IAAS,CAACA,EAAM,OAAS,CAACA,EAAM,UAAY,CAACA,EAAM,OAAO,EACrGM,EAAWD,EAAS,SAAA,IAAML,EAAM,UAAYA,EAAM,SAAW,EAAK"}
+{"version":3,"file":"ElIconButton.vue.cjs2.js","sources":["../../src/ElIconButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elIconButtonSizes = ['xs', 'sm', 'base', 'l', 'xl'] as const;\nexport type ElIconButtonSize = (typeof elIconButtonSizes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport { computed } from 'vue';\nimport ElBadge, { ElBadgeColors } from '@/ElBadge.vue';\nimport ElTooltip from '@/ElTooltip.vue';\n\nexport interface ElIconButtonProps {\n  icon: ElIconProps;\n  tooltip?: string;\n  tooltipDelay?: string | number;\n  disabled?: boolean;\n  size?: ElIconButtonSize;\n  loading?: boolean;\n  badge?: string | boolean;\n  badgeColor?: ElBadgeColors;\n  error?: boolean;\n  showTooltipOnMobile?: boolean;\n}\n\nconst props = withDefaults(defineProps<ElIconButtonProps>(), {\n  tooltip: undefined,\n  tooltipDelay: 600,\n  size: 'base',\n  badgeColor: 'primary',\n  disabled: false,\n  loading: false,\n  badge: false,\n  error: false,\n  showTooltipOnMobile: false,\n});\n\nconst emit = defineEmits<{\n  (event: 'click'): void;\n}>();\n\nconst showBadge = computed(() => props.badge !== false && !props.error && !props.disabled && !props.loading);\nconst disabled = computed(() => props.disabled || props.loading || false);\n</script>\n\n<template>\n  <ElTooltip :title=\"tooltip ?? ''\" position=\"top-right\" :delay-time=\"props.tooltipDelay\" :hide-on-mobile=\"!showTooltipOnMobile\">\n    <button\n      class=\"relative flex items-center justify-center outline-none\"\n      :class=\"{\n        'h-6 w-6 rounded': size === 'xs',\n        'h-7 w-7 rounded': size === 'sm',\n        'h-8 w-8 rounded-md': size === 'base',\n        'h-10 w-10 rounded-md': size === 'l',\n        'h-12 w-12 rounded-md': size === 'xl',\n        'cursor-not-allowed': disabled,\n        'text-neutral-inactive': disabled,\n        'hover:bg-error-light-hover focus:bg-error-light-pressed text-error bg-transparent': !disabled && error,\n        'text-primary hover:text-primary-hover active:text-primary-pressed hover:bg-primary-light-hover active:bg-primary-light-pressed':\n          !disabled && !error,\n      }\"\n      type=\"button\"\n      :data-cy=\"tooltip ? `${tooltip.trim().replaceAll(' ', '')}-icon-button` : 'icon-button'\"\n      @click=\"disabled ? undefined : emit('click')\"\n    >\n      <span v-if=\"loading\" class=\"inline-flex items-center justify-center\">\n        <svg\n          class=\"animate-spin\"\n          :class=\"{\n            'h-4 w-4': size === 'xs',\n            'h-5 w-5': size === 'sm',\n            'h-6 w-6': size === 'base',\n            'h-8 w-8': size === 'l',\n            'h-10 w-10': size === 'xl',\n          }\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          />\n        </svg>\n      </span>\n\n      <ElIcon\n        v-else\n        :disabled=\"disabled\"\n        :name=\"icon.name\"\n        :solid=\"icon.solid\"\n        class=\"transition duration-150 ease-in-out\"\n        :class=\"{\n          'h-4 w-4': size === 'xs',\n          'h-5 w-5': size === 'sm',\n          'h-6 w-6': size === 'base',\n          'h-8 w-8': size === 'l',\n          'h-10 w-10': size === 'xl',\n        }\"\n      />\n      <ElBadge\n        v-if=\"showBadge\"\n        :color=\"props.badgeColor\"\n        :value=\"typeof badge === 'string' ? badge : undefined\"\n        :class=\"{\n          'top-[2px] right-[1px]': size === 'xs',\n          'top-[2px] right-[2px]': size === 'sm',\n          'top-[4px] right-[4px]': size === 'base',\n          'top-[5px] right-[5px]': size === 'l',\n          'top-[6px] right-[6px]': size === 'xl',\n        }\"\n      />\n    </button>\n  </ElTooltip>\n</template>\n"],"names":["elIconButtonSizes","props","__props","emit","__emit","showBadge","computed","disabled"],"mappings":"+nBACaA,EAAoB,CAAC,KAAM,KAAM,OAAQ,IAAK,IAAI,oYAuB/D,MAAMC,EAAQC,EAYRC,EAAOC,EAIPC,EAAYC,EAAA,SAAS,IAAML,EAAM,QAAU,IAAS,CAACA,EAAM,OAAS,CAACA,EAAM,UAAY,CAACA,EAAM,OAAO,EACrGM,EAAWD,EAAS,SAAA,IAAML,EAAM,UAAYA,EAAM,SAAW,EAAK"}

package/dist/src/ElIconButton.vue.esm2.js

@@ -1,2 +1,2 @@
-import{defineComponent as c,computed as n,openBlock as s,createBlock as t,withCtx as f,createElementVNode as a,normalizeClass as l,createElementBlock as d,createCommentVNode as g}from"vue";import b from"./ElIcon.vue.esm2.js";import y from"./ElBadge.vue.esm2.js";import v from"./ElTooltip.vue.esm2.js";const w=["data-cy"],z={key:0,class:"inline-flex items-center justify-center"},B=a("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),k=a("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1),C=[B,k],j=["xs","sm","base","l","xl"],A=c({__name:"ElIconButton",props:{icon:{},tooltip:{default:void 0},tooltipDelay:{default:600},disabled:{type:Boolean,default:!1},size:{default:"base"},loading:{type:Boolean,default:!1},badge:{type:[String,Boolean],default:!1},badgeColor:{default:"primary"},error:{type:Boolean,default:!1},showTooltipOnMobile:{type:Boolean,default:!1}},emits:["click"],setup(p,{emit:m}){const o=p,u=m,h=n(()=>o.badge!==!1&&!o.error&&!o.disabled&&!o.loading),i=n(()=>o.disabled||o.loading||!1);return(e,r)=>(s(),t(v,{title:e.tooltip??"",position:"top-right","delay-time":o.tooltipDelay,"hide-on-mobile":!e.showTooltipOnMobile},{default:f(()=>[a("button",{class:l(["relative flex items-center justify-center outline-none",{"h-6 w-6 rounded":e.size==="xs","h-7 w-7 rounded":e.size==="sm","h-8 w-8 rounded-md":e.size==="base","h-10 w-10 rounded-md":e.size==="l","h-12 w-12 rounded-md":e.size==="xl","cursor-not-allowed":i.value,"text-neutral-inactive":i.value,"hover:bg-error-light-hover focus:bg-error-light-pressed text-error bg-transparent":!i.value&&e.error,"text-primary hover:text-primary-hover focus:text-primary-pressed active:text-primary-pressed hover:bg-primary-light-hover focus:bg-primary-light-pressed active:bg-primary-light-pressed":!i.value&&!e.error}]),type:"button","data-cy":e.tooltip?`${e.tooltip.trim().replaceAll(" ","")}-icon-button`:"icon-button",onClick:r[0]||(r[0]=$=>i.value?void 0:u("click"))},[e.loading?(s(),d("span",z,[(s(),d("svg",{class:l(["animate-spin",{"h-4 w-4":e.size==="xs","h-5 w-5":e.size==="sm","h-6 w-6":e.size==="base","h-8 w-8":e.size==="l","h-10 w-10":e.size==="xl"}]),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},C,2))])):(s(),t(b,{key:1,disabled:i.value,name:e.icon.name,solid:e.icon.solid,class:l(["transition duration-150 ease-in-out",{"h-4 w-4":e.size==="xs","h-5 w-5":e.size==="sm","h-6 w-6":e.size==="base","h-8 w-8":e.size==="l","h-10 w-10":e.size==="xl"}])},null,8,["disabled","name","solid","class"])),h.value?(s(),t(y,{key:2,color:o.badgeColor,value:typeof e.badge=="string"?e.badge:void 0,class:l({"top-[2px] right-[1px]":e.size==="xs","top-[2px] right-[2px]":e.size==="sm","top-[4px] right-[4px]":e.size==="base","top-[5px] right-[5px]":e.size==="l","top-[6px] right-[6px]":e.size==="xl"})},null,8,["color","value","class"])):g("",!0)],10,w)]),_:1},8,["title","delay-time","hide-on-mobile"]))}});export{A as default,j as elIconButtonSizes};
+import{defineComponent as c,computed as n,openBlock as i,createBlock as t,withCtx as f,createElementVNode as a,normalizeClass as s,createElementBlock as d,createCommentVNode as b}from"vue";import g from"./ElIcon.vue.esm2.js";import y from"./ElBadge.vue.esm2.js";import v from"./ElTooltip.vue.esm2.js";const w=["data-cy"],z={key:0,class:"inline-flex items-center justify-center"},B=a("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),k=a("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1),C=[B,k],x=["xs","sm","base","l","xl"],A=c({__name:"ElIconButton",props:{icon:{},tooltip:{default:void 0},tooltipDelay:{default:600},disabled:{type:Boolean,default:!1},size:{default:"base"},loading:{type:Boolean,default:!1},badge:{type:[String,Boolean],default:!1},badgeColor:{default:"primary"},error:{type:Boolean,default:!1},showTooltipOnMobile:{type:Boolean,default:!1}},emits:["click"],setup(p,{emit:m}){const o=p,u=m,h=n(()=>o.badge!==!1&&!o.error&&!o.disabled&&!o.loading),l=n(()=>o.disabled||o.loading||!1);return(e,r)=>(i(),t(v,{title:e.tooltip??"",position:"top-right","delay-time":o.tooltipDelay,"hide-on-mobile":!e.showTooltipOnMobile},{default:f(()=>[a("button",{class:s(["relative flex items-center justify-center outline-none",{"h-6 w-6 rounded":e.size==="xs","h-7 w-7 rounded":e.size==="sm","h-8 w-8 rounded-md":e.size==="base","h-10 w-10 rounded-md":e.size==="l","h-12 w-12 rounded-md":e.size==="xl","cursor-not-allowed":l.value,"text-neutral-inactive":l.value,"hover:bg-error-light-hover focus:bg-error-light-pressed text-error bg-transparent":!l.value&&e.error,"text-primary hover:text-primary-hover active:text-primary-pressed hover:bg-primary-light-hover active:bg-primary-light-pressed":!l.value&&!e.error}]),type:"button","data-cy":e.tooltip?`${e.tooltip.trim().replaceAll(" ","")}-icon-button`:"icon-button",onClick:r[0]||(r[0]=$=>l.value?void 0:u("click"))},[e.loading?(i(),d("span",z,[(i(),d("svg",{class:s(["animate-spin",{"h-4 w-4":e.size==="xs","h-5 w-5":e.size==="sm","h-6 w-6":e.size==="base","h-8 w-8":e.size==="l","h-10 w-10":e.size==="xl"}]),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},C,2))])):(i(),t(g,{key:1,disabled:l.value,name:e.icon.name,solid:e.icon.solid,class:s(["transition duration-150 ease-in-out",{"h-4 w-4":e.size==="xs","h-5 w-5":e.size==="sm","h-6 w-6":e.size==="base","h-8 w-8":e.size==="l","h-10 w-10":e.size==="xl"}])},null,8,["disabled","name","solid","class"])),h.value?(i(),t(y,{key:2,color:o.badgeColor,value:typeof e.badge=="string"?e.badge:void 0,class:s({"top-[2px] right-[1px]":e.size==="xs","top-[2px] right-[2px]":e.size==="sm","top-[4px] right-[4px]":e.size==="base","top-[5px] right-[5px]":e.size==="l","top-[6px] right-[6px]":e.size==="xl"})},null,8,["color","value","class"])):b("",!0)],10,w)]),_:1},8,["title","delay-time","hide-on-mobile"]))}});export{A as default,x as elIconButtonSizes};
 //# sourceMappingURL=ElIconButton.vue.esm2.js.map

package/dist/src/ElIconButton.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElIconButton.vue.esm2.js","sources":["../../src/ElIconButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elIconButtonSizes = ['xs', 'sm', 'base', 'l', 'xl'] as const;\nexport type ElIconButtonSize = (typeof elIconButtonSizes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport { computed } from 'vue';\nimport ElBadge, { ElBadgeColors } from '@/ElBadge.vue';\nimport ElTooltip from '@/ElTooltip.vue';\n\nexport interface ElIconButtonProps {\n  icon: ElIconProps;\n  tooltip?: string;\n  tooltipDelay?: string | number;\n  disabled?: boolean;\n  size?: ElIconButtonSize;\n  loading?: boolean;\n  badge?: string | boolean;\n  badgeColor?: ElBadgeColors;\n  error?: boolean;\n  showTooltipOnMobile?: boolean;\n}\n\nconst props = withDefaults(defineProps<ElIconButtonProps>(), {\n  tooltip: undefined,\n  tooltipDelay: 600,\n  size: 'base',\n  badgeColor: 'primary',\n  disabled: false,\n  loading: false,\n  badge: false,\n  error: false,\n  showTooltipOnMobile: false,\n});\n\nconst emit = defineEmits<{\n  (event: 'click'): void;\n}>();\n\nconst showBadge = computed(() => props.badge !== false && !props.error && !props.disabled && !props.loading);\nconst disabled = computed(() => props.disabled || props.loading || false);\n</script>\n\n<template>\n  <ElTooltip :title=\"tooltip ?? ''\" position=\"top-right\" :delay-time=\"props.tooltipDelay\" :hide-on-mobile=\"!showTooltipOnMobile\">\n    <button\n      class=\"relative flex items-center justify-center outline-none\"\n      :class=\"{\n        'h-6 w-6 rounded': size === 'xs',\n        'h-7 w-7 rounded': size === 'sm',\n        'h-8 w-8 rounded-md': size === 'base',\n        'h-10 w-10 rounded-md': size === 'l',\n        'h-12 w-12 rounded-md': size === 'xl',\n        'cursor-not-allowed': disabled,\n        'text-neutral-inactive': disabled,\n        'hover:bg-error-light-hover focus:bg-error-light-pressed text-error bg-transparent': !disabled && error,\n        'text-primary hover:text-primary-hover focus:text-primary-pressed active:text-primary-pressed hover:bg-primary-light-hover focus:bg-primary-light-pressed active:bg-primary-light-pressed':\n          !disabled && !error,\n      }\"\n      type=\"button\"\n      :data-cy=\"tooltip ? `${tooltip.trim().replaceAll(' ', '')}-icon-button` : 'icon-button'\"\n      @click=\"disabled ? undefined : emit('click')\"\n    >\n      <span v-if=\"loading\" class=\"inline-flex items-center justify-center\">\n        <svg\n          class=\"animate-spin\"\n          :class=\"{\n            'h-4 w-4': size === 'xs',\n            'h-5 w-5': size === 'sm',\n            'h-6 w-6': size === 'base',\n            'h-8 w-8': size === 'l',\n            'h-10 w-10': size === 'xl',\n          }\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          />\n        </svg>\n      </span>\n\n      <ElIcon\n        v-else\n        :disabled=\"disabled\"\n        :name=\"icon.name\"\n        :solid=\"icon.solid\"\n        class=\"transition duration-150 ease-in-out\"\n        :class=\"{\n          'h-4 w-4': size === 'xs',\n          'h-5 w-5': size === 'sm',\n          'h-6 w-6': size === 'base',\n          'h-8 w-8': size === 'l',\n          'h-10 w-10': size === 'xl',\n        }\"\n      />\n      <ElBadge\n        v-if=\"showBadge\"\n        :color=\"props.badgeColor\"\n        :value=\"typeof badge === 'string' ? badge : undefined\"\n        :class=\"{\n          'top-[2px] right-[1px]': size === 'xs',\n          'top-[2px] right-[2px]': size === 'sm',\n          'top-[4px] right-[4px]': size === 'base',\n          'top-[5px] right-[5px]': size === 'l',\n          'top-[6px] right-[6px]': size === 'xl',\n        }\"\n      />\n    </button>\n  </ElTooltip>\n</template>\n"],"names":["elIconButtonSizes","props","__props","emit","__emit","showBadge","computed","disabled"],"mappings":"+pBACaA,EAAoB,CAAC,KAAM,KAAM,OAAQ,IAAK,IAAI,oXAuB/D,MAAMC,EAAQC,EAYRC,EAAOC,EAIPC,EAAYC,EAAS,IAAML,EAAM,QAAU,IAAS,CAACA,EAAM,OAAS,CAACA,EAAM,UAAY,CAACA,EAAM,OAAO,EACrGM,EAAWD,EAAS,IAAML,EAAM,UAAYA,EAAM,SAAW,EAAK"}
+{"version":3,"file":"ElIconButton.vue.esm2.js","sources":["../../src/ElIconButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elIconButtonSizes = ['xs', 'sm', 'base', 'l', 'xl'] as const;\nexport type ElIconButtonSize = (typeof elIconButtonSizes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport { computed } from 'vue';\nimport ElBadge, { ElBadgeColors } from '@/ElBadge.vue';\nimport ElTooltip from '@/ElTooltip.vue';\n\nexport interface ElIconButtonProps {\n  icon: ElIconProps;\n  tooltip?: string;\n  tooltipDelay?: string | number;\n  disabled?: boolean;\n  size?: ElIconButtonSize;\n  loading?: boolean;\n  badge?: string | boolean;\n  badgeColor?: ElBadgeColors;\n  error?: boolean;\n  showTooltipOnMobile?: boolean;\n}\n\nconst props = withDefaults(defineProps<ElIconButtonProps>(), {\n  tooltip: undefined,\n  tooltipDelay: 600,\n  size: 'base',\n  badgeColor: 'primary',\n  disabled: false,\n  loading: false,\n  badge: false,\n  error: false,\n  showTooltipOnMobile: false,\n});\n\nconst emit = defineEmits<{\n  (event: 'click'): void;\n}>();\n\nconst showBadge = computed(() => props.badge !== false && !props.error && !props.disabled && !props.loading);\nconst disabled = computed(() => props.disabled || props.loading || false);\n</script>\n\n<template>\n  <ElTooltip :title=\"tooltip ?? ''\" position=\"top-right\" :delay-time=\"props.tooltipDelay\" :hide-on-mobile=\"!showTooltipOnMobile\">\n    <button\n      class=\"relative flex items-center justify-center outline-none\"\n      :class=\"{\n        'h-6 w-6 rounded': size === 'xs',\n        'h-7 w-7 rounded': size === 'sm',\n        'h-8 w-8 rounded-md': size === 'base',\n        'h-10 w-10 rounded-md': size === 'l',\n        'h-12 w-12 rounded-md': size === 'xl',\n        'cursor-not-allowed': disabled,\n        'text-neutral-inactive': disabled,\n        'hover:bg-error-light-hover focus:bg-error-light-pressed text-error bg-transparent': !disabled && error,\n        'text-primary hover:text-primary-hover active:text-primary-pressed hover:bg-primary-light-hover active:bg-primary-light-pressed':\n          !disabled && !error,\n      }\"\n      type=\"button\"\n      :data-cy=\"tooltip ? `${tooltip.trim().replaceAll(' ', '')}-icon-button` : 'icon-button'\"\n      @click=\"disabled ? undefined : emit('click')\"\n    >\n      <span v-if=\"loading\" class=\"inline-flex items-center justify-center\">\n        <svg\n          class=\"animate-spin\"\n          :class=\"{\n            'h-4 w-4': size === 'xs',\n            'h-5 w-5': size === 'sm',\n            'h-6 w-6': size === 'base',\n            'h-8 w-8': size === 'l',\n            'h-10 w-10': size === 'xl',\n          }\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n        >\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          />\n        </svg>\n      </span>\n\n      <ElIcon\n        v-else\n        :disabled=\"disabled\"\n        :name=\"icon.name\"\n        :solid=\"icon.solid\"\n        class=\"transition duration-150 ease-in-out\"\n        :class=\"{\n          'h-4 w-4': size === 'xs',\n          'h-5 w-5': size === 'sm',\n          'h-6 w-6': size === 'base',\n          'h-8 w-8': size === 'l',\n          'h-10 w-10': size === 'xl',\n        }\"\n      />\n      <ElBadge\n        v-if=\"showBadge\"\n        :color=\"props.badgeColor\"\n        :value=\"typeof badge === 'string' ? badge : undefined\"\n        :class=\"{\n          'top-[2px] right-[1px]': size === 'xs',\n          'top-[2px] right-[2px]': size === 'sm',\n          'top-[4px] right-[4px]': size === 'base',\n          'top-[5px] right-[5px]': size === 'l',\n          'top-[6px] right-[6px]': size === 'xl',\n        }\"\n      />\n    </button>\n  </ElTooltip>\n</template>\n"],"names":["elIconButtonSizes","props","__props","emit","__emit","showBadge","computed","disabled"],"mappings":"+pBACaA,EAAoB,CAAC,KAAM,KAAM,OAAQ,IAAK,IAAI,oXAuB/D,MAAMC,EAAQC,EAYRC,EAAOC,EAIPC,EAAYC,EAAS,IAAML,EAAM,QAAU,IAAS,CAACA,EAAM,OAAS,CAACA,EAAM,UAAY,CAACA,EAAM,OAAO,EACrGM,EAAWD,EAAS,IAAML,EAAM,UAAYA,EAAM,SAAW,EAAK"}

package/dist/src/ElSuggestionChip.vue.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=e.defineComponent({__name:"ElSuggestionChip",props:{label:{},focused:{type:Boolean}},setup(o){return(r,i)=>(e.openBlock(),e.createElementBlock("button",{type:"button",class:e.normalizeClass(["h-8 items-center justify-center px-4 min-w-20 rounded-md text-sm font-semibold leading-4 border text-primary bg-white border-primary hover:text-primary-hover hover:bg-primary-light-hover hover:border-primary-hover",{"text-primary-pressed bg-primary-light-pressed border-primary-pressed outlined-primary":r.focused}])},e.toDisplayString(r.label),3))}});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=e.defineComponent({__name:"ElSuggestionChip",props:{label:{},focused:{type:Boolean}},setup(o){return(r,i)=>(e.openBlock(),e.createElementBlock("button",{type:"button",class:e.normalizeClass(["transition-colors h-8 items-center justify-center px-4 min-w-20 rounded-md text-sm font-semibold leading-4 border text-primary bg-white border-primary hover:text-primary-hover hover:bg-primary-light-hover hover:border-primary-hover active:text-primary-pressed active:bg-primary-light-pressed active:border-primary-pressed",{"text-primary-pressed bg-primary-light-pressed border-primary-pressed outlined-primary":r.focused}])},e.toDisplayString(r.label),3))}});exports.default=t;
 //# sourceMappingURL=ElSuggestionChip.vue.cjs2.js.map

package/dist/src/ElSuggestionChip.vue.esm2.js

@@ -1,2 +1,2 @@
-import{defineComponent as r,openBlock as t,createElementBlock as o,normalizeClass as i,toDisplayString as p}from"vue";const m=r({__name:"ElSuggestionChip",props:{label:{},focused:{type:Boolean}},setup(s){return(e,a)=>(t(),o("button",{type:"button",class:i(["h-8 items-center justify-center px-4 min-w-20 rounded-md text-sm font-semibold leading-4 border text-primary bg-white border-primary hover:text-primary-hover hover:bg-primary-light-hover hover:border-primary-hover",{"text-primary-pressed bg-primary-light-pressed border-primary-pressed outlined-primary":e.focused}])},p(e.label),3))}});export{m as default};
+import{defineComponent as r,openBlock as t,createElementBlock as o,normalizeClass as i,toDisplayString as p}from"vue";const m=r({__name:"ElSuggestionChip",props:{label:{},focused:{type:Boolean}},setup(s){return(e,a)=>(t(),o("button",{type:"button",class:i(["transition-colors h-8 items-center justify-center px-4 min-w-20 rounded-md text-sm font-semibold leading-4 border text-primary bg-white border-primary hover:text-primary-hover hover:bg-primary-light-hover hover:border-primary-hover active:text-primary-pressed active:bg-primary-light-pressed active:border-primary-pressed",{"text-primary-pressed bg-primary-light-pressed border-primary-pressed outlined-primary":e.focused}])},p(e.label),3))}});export{m as default};
 //# sourceMappingURL=ElSuggestionChip.vue.esm2.js.map

package/dist/src/ElVerticalTab.vue.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),s=require("./ElAvatar.vue.cjs2.js"),r=require("./ElIcon.vue.cjs2.js"),o=require("./ElBadge.vue.cjs2.js"),l={class:"text-sm font-semibold line-clamp-1"},i={key:0,class:"text-neutral-lighter text-sm font-normal line-clamp-1"},n={class:"flex flex-col space-y-1 justify-center items-center self-stretch"},c=["datetime"],u={class:"flex justify-center items-center flex-grow"},d={key:1,class:"h-4 relative flex justify-center items-end"},m=["primary","secondary"],p=["default","hover","active"],y=t.defineComponent({__name:"ElVerticalTab",props:{icon:{},avatar:{},primaryRow:{},secondaryRow:{},tertiaryRow:{},lineClamp:{},time:{},badge:{},color:{},status:{}},setup(v){return(e,a)=>(t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(["p-3 w-full max-h-28 flex justify-start items-center gap-3 bg-disabled rounded-lg hover:bg-neutral-hover focus:bg-neutral-pressed",{"border border-primary-active bg-primary-light-active":e.color==="primary"&&e.status==="active","border border-secondary-active bg-secondary-light-active":e.color==="secondary"&&e.status==="active","border border-white bg-white":e.status==="default","border border-transparent bg-neutral-hover":e.status==="hover"}])},[e.icon?(t.openBlock(),t.createBlock(r.default,t.mergeProps({key:0},e.icon,{class:["w-6 h-6 flex-shrink-0",{"text-primary-active":e.color==="primary"&&e.status==="active","text-secondary-active":e.color==="secondary"&&e.status==="active","text-neutral-darker":!e.status||e.status==="default"}]}),null,16,["class"])):t.createCommentVNode("",!0),e.avatar?(t.openBlock(),t.createBlock(s.default,t.normalizeProps(t.mergeProps({key:1},e.avatar)),null,16)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:t.normalizeClass(["flex-1 flex flex-col items-start text-left",{[`text-${e.color}-active`]:e.status==="active","gap-1":e.secondaryRow||e.tertiaryRow,"text-neutral-darker":!e.status||e.status==="default"}])},[t.createElementVNode("p",l,t.toDisplayString(e.primaryRow),1),t.createElementVNode("p",{class:t.normalizeClass(["text-sm font-normal",{"line-clamp-1":e.lineClamp===1,"line-clamp-2":e.lineClamp===2}])},t.toDisplayString(e.secondaryRow),3),e.tertiaryRow?(t.openBlock(),t.createElementBlock("span",i,t.toDisplayString(e.tertiaryRow),1)):t.createCommentVNode("",!0)],2),t.createElementVNode("div",n,[e.time?(t.openBlock(),t.createElementBlock("time",{key:0,datetime:e.time,class:t.normalizeClass(["text-primary text-xs font-normal leading-5",{"text-primary-active":e.color==="primary"&&e.status==="active","text-secondary-active":e.color==="secondary"&&e.status==="active","text-neutral-darker":!e.status||e.status==="default"}])},t.toDisplayString(e.time),11,c)):t.createCommentVNode("",!0),t.createElementVNode("div",u,[t.createElementVNode("span",{class:t.normalizeClass({"text-primary-active":e.color==="primary"&&e.status==="active","text-secondary-active":e.color==="secondary"&&e.status==="active","text-neutral-darker":!e.status||e.status==="default"}),onClick:a[0]||(a[0]=t.withModifiers(()=>{},["stop"]))},[t.renderSlot(e.$slots,"traling-slot",{},()=>[t.createVNode(r.default,{class:"w-5 h-5 flex-shrink-0",name:"ChevronRightIcon"})])],2)]),e.badge?(t.openBlock(),t.createElementBlock("div",d,[t.createVNode(o.default,t.normalizeProps(t.guardReactiveProps(e.badge)),null,16)])):t.createCommentVNode("",!0)])],2))}});exports.default=y;exports.elVerticalTabColors=m;exports.elVerticalTabStatus=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),s=require("./ElAvatar.vue.cjs2.js"),r=require("./ElIcon.vue.cjs2.js"),o=require("./ElBadge.vue.cjs2.js"),l={class:"text-sm font-semibold line-clamp-1"},i={key:0,class:"text-neutral-lighter text-sm font-normal line-clamp-1"},n={class:"flex flex-col space-y-1 justify-center items-center self-stretch"},c=["datetime"],u={class:"flex justify-center items-center flex-grow"},d={key:1,class:"h-4 relative flex justify-center items-end"},m=["primary","secondary"],p=["default","hover","active"],y=t.defineComponent({__name:"ElVerticalTab",props:{icon:{},avatar:{},primaryRow:{},secondaryRow:{},tertiaryRow:{},lineClamp:{},time:{},badge:{},color:{},status:{}},setup(v){return(e,a)=>(t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(["p-3 w-full max-h-28 flex justify-start items-center gap-3 bg-disabled rounded-lg hover:bg-neutral-hover active:bg-neutral-pressed",{"border border-primary-active bg-primary-light-active":e.color==="primary"&&e.status==="active","border border-secondary-active bg-secondary-light-active":e.color==="secondary"&&e.status==="active","border border-white bg-white":e.status==="default","border border-transparent bg-neutral-hover":e.status==="hover"}])},[e.icon?(t.openBlock(),t.createBlock(r.default,t.mergeProps({key:0},e.icon,{class:["w-6 h-6 flex-shrink-0",{"text-primary-active":e.color==="primary"&&e.status==="active","text-secondary-active":e.color==="secondary"&&e.status==="active","text-neutral-darker":!e.status||e.status==="default"}]}),null,16,["class"])):t.createCommentVNode("",!0),e.avatar?(t.openBlock(),t.createBlock(s.default,t.normalizeProps(t.mergeProps({key:1},e.avatar)),null,16)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:t.normalizeClass(["flex-1 flex flex-col items-start text-left",{[`text-${e.color}-active`]:e.status==="active","gap-1":e.secondaryRow||e.tertiaryRow,"text-neutral-darker":!e.status||e.status==="default"}])},[t.createElementVNode("p",l,t.toDisplayString(e.primaryRow),1),t.createElementVNode("p",{class:t.normalizeClass(["text-sm font-normal",{"line-clamp-1":e.lineClamp===1,"line-clamp-2":e.lineClamp===2}])},t.toDisplayString(e.secondaryRow),3),e.tertiaryRow?(t.openBlock(),t.createElementBlock("span",i,t.toDisplayString(e.tertiaryRow),1)):t.createCommentVNode("",!0)],2),t.createElementVNode("div",n,[e.time?(t.openBlock(),t.createElementBlock("time",{key:0,datetime:e.time,class:t.normalizeClass(["text-primary text-xs font-normal leading-5",{"text-primary-active":e.color==="primary"&&e.status==="active","text-secondary-active":e.color==="secondary"&&e.status==="active","text-neutral-darker":!e.status||e.status==="default"}])},t.toDisplayString(e.time),11,c)):t.createCommentVNode("",!0),t.createElementVNode("div",u,[t.createElementVNode("span",{class:t.normalizeClass({"text-primary-active":e.color==="primary"&&e.status==="active","text-secondary-active":e.color==="secondary"&&e.status==="active","text-neutral-darker":!e.status||e.status==="default"}),onClick:a[0]||(a[0]=t.withModifiers(()=>{},["stop"]))},[t.renderSlot(e.$slots,"traling-slot",{},()=>[t.createVNode(r.default,{class:"w-5 h-5 flex-shrink-0",name:"ChevronRightIcon"})])],2)]),e.badge?(t.openBlock(),t.createElementBlock("div",d,[t.createVNode(o.default,t.normalizeProps(t.guardReactiveProps(e.badge)),null,16)])):t.createCommentVNode("",!0)])],2))}});exports.default=y;exports.elVerticalTabColors=m;exports.elVerticalTabStatus=p;
 //# sourceMappingURL=ElVerticalTab.vue.cjs2.js.map

package/dist/src/ElVerticalTab.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElVerticalTab.vue.cjs2.js","sources":["../../src/ElVerticalTab.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elVerticalTabColors = ['primary', 'secondary'] as const;\nexport type ElVerticalTabColors = (typeof elVerticalTabColors)[number];\n\nexport const elVerticalTabStatus = ['default', 'hover', 'active'] as const;\nexport type ElVerticalTabStatus = (typeof elVerticalTabStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElAvatar from '@/ElAvatar.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElBadge from '@/ElBadge.vue';\n\ndefineProps<{\n  icon?: InstanceType<typeof ElIcon>['$props']; // prop drilling\n  avatar?: InstanceType<typeof ElAvatar>['$props'];\n  primaryRow: string;\n  secondaryRow?: string;\n  tertiaryRow?: string;\n  lineClamp?: 1 | 2;\n  time?: string;\n  badge?: InstanceType<typeof ElBadge>['$props'];\n  color?: ElVerticalTabColors;\n  status?: ElVerticalTabStatus;\n}>();\n</script>\n\n<template>\n  <button\n    class=\"p-3 w-full max-h-28 flex justify-start items-center gap-3 bg-disabled rounded-lg hover:bg-neutral-hover focus:bg-neutral-pressed\"\n    :class=\"{\n      [`border border-primary-active bg-primary-light-active`]: color === 'primary' && status === 'active',\n      [`border border-secondary-active bg-secondary-light-active`]: color === 'secondary' && status === 'active',\n      [`border border-white bg-white`]: status === 'default',\n      [`border border-transparent bg-neutral-hover`]: status === 'hover',\n    }\"\n  >\n    <ElIcon\n      v-if=\"icon\"\n      v-bind=\"icon\"\n      class=\"w-6 h-6 flex-shrink-0\"\n      :class=\"{\n        [`text-primary-active`]: color === 'primary' && status === 'active',\n        [`text-secondary-active`]: color === 'secondary' && status === 'active',\n        'text-neutral-darker': !status || status === 'default',\n      }\"\n    />\n    <ElAvatar v-if=\"avatar\" v-bind=\"avatar\" />\n    <div\n      class=\"flex-1 flex flex-col items-start text-left\"\n      :class=\"{\n        [`text-${color}-active`]: status === 'active',\n        'gap-1': secondaryRow || tertiaryRow,\n        'text-neutral-darker': !status || status === 'default',\n      }\"\n    >\n      <p class=\"text-sm font-semibold line-clamp-1\">\n        {{ primaryRow }}\n      </p>\n      <p\n        class=\"text-sm font-normal\"\n        :class=\"{\n          [`line-clamp-1`]: lineClamp === 1,\n          [`line-clamp-2`]: lineClamp === 2,\n        }\"\n      >\n        {{ secondaryRow }}\n      </p>\n      <span v-if=\"tertiaryRow\" class=\"text-neutral-lighter text-sm font-normal line-clamp-1\">{{ tertiaryRow }}</span>\n    </div>\n    <div class=\"flex flex-col space-y-1 justify-center items-center self-stretch\">\n      <time\n        v-if=\"time\"\n        :datetime=\"time\"\n        class=\"text-primary text-xs font-normal leading-5\"\n        :class=\"{\n          [`text-primary-active`]: color === 'primary' && status === 'active',\n          [`text-secondary-active`]: color === 'secondary' && status === 'active',\n          'text-neutral-darker': !status || status === 'default',\n        }\"\n        >{{ time }}</time\n      >\n      <div class=\"flex justify-center items-center flex-grow\">\n        <span\n          :class=\"{\n            [`text-primary-active`]: color === 'primary' && status === 'active',\n            [`text-secondary-active`]: color === 'secondary' && status === 'active',\n            'text-neutral-darker': !status || status === 'default',\n          }\"\n          @click.stop\n        >\n          <slot name=\"traling-slot\">\n            <ElIcon class=\"w-5 h-5 flex-shrink-0\" name=\"ChevronRightIcon\" />\n          </slot>\n        </span>\n      </div>\n      <div v-if=\"badge\" class=\"h-4 relative flex justify-center items-end\">\n        <ElBadge v-bind=\"badge\" />\n      </div>\n    </div>\n  </button>\n</template>\n"],"names":["elVerticalTabColors","elVerticalTabStatus"],"mappings":"mjBACaA,EAAsB,CAAC,UAAW,WAAW,EAG7CC,EAAsB,CAAC,UAAW,QAAS,QAAQ"}
+{"version":3,"file":"ElVerticalTab.vue.cjs2.js","sources":["../../src/ElVerticalTab.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elVerticalTabColors = ['primary', 'secondary'] as const;\nexport type ElVerticalTabColors = (typeof elVerticalTabColors)[number];\n\nexport const elVerticalTabStatus = ['default', 'hover', 'active'] as const;\nexport type ElVerticalTabStatus = (typeof elVerticalTabStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElAvatar from '@/ElAvatar.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElBadge from '@/ElBadge.vue';\n\ndefineProps<{\n  icon?: InstanceType<typeof ElIcon>['$props']; // prop drilling\n  avatar?: InstanceType<typeof ElAvatar>['$props'];\n  primaryRow: string;\n  secondaryRow?: string;\n  tertiaryRow?: string;\n  lineClamp?: 1 | 2;\n  time?: string;\n  badge?: InstanceType<typeof ElBadge>['$props'];\n  color?: ElVerticalTabColors;\n  status?: ElVerticalTabStatus;\n}>();\n</script>\n\n<template>\n  <button\n    class=\"p-3 w-full max-h-28 flex justify-start items-center gap-3 bg-disabled rounded-lg hover:bg-neutral-hover active:bg-neutral-pressed\"\n    :class=\"{\n      [`border border-primary-active bg-primary-light-active`]: color === 'primary' && status === 'active',\n      [`border border-secondary-active bg-secondary-light-active`]: color === 'secondary' && status === 'active',\n      [`border border-white bg-white`]: status === 'default',\n      [`border border-transparent bg-neutral-hover`]: status === 'hover',\n    }\"\n  >\n    <ElIcon\n      v-if=\"icon\"\n      v-bind=\"icon\"\n      class=\"w-6 h-6 flex-shrink-0\"\n      :class=\"{\n        [`text-primary-active`]: color === 'primary' && status === 'active',\n        [`text-secondary-active`]: color === 'secondary' && status === 'active',\n        'text-neutral-darker': !status || status === 'default',\n      }\"\n    />\n    <ElAvatar v-if=\"avatar\" v-bind=\"avatar\" />\n    <div\n      class=\"flex-1 flex flex-col items-start text-left\"\n      :class=\"{\n        [`text-${color}-active`]: status === 'active',\n        'gap-1': secondaryRow || tertiaryRow,\n        'text-neutral-darker': !status || status === 'default',\n      }\"\n    >\n      <p class=\"text-sm font-semibold line-clamp-1\">\n        {{ primaryRow }}\n      </p>\n      <p\n        class=\"text-sm font-normal\"\n        :class=\"{\n          [`line-clamp-1`]: lineClamp === 1,\n          [`line-clamp-2`]: lineClamp === 2,\n        }\"\n      >\n        {{ secondaryRow }}\n      </p>\n      <span v-if=\"tertiaryRow\" class=\"text-neutral-lighter text-sm font-normal line-clamp-1\">{{ tertiaryRow }}</span>\n    </div>\n    <div class=\"flex flex-col space-y-1 justify-center items-center self-stretch\">\n      <time\n        v-if=\"time\"\n        :datetime=\"time\"\n        class=\"text-primary text-xs font-normal leading-5\"\n        :class=\"{\n          [`text-primary-active`]: color === 'primary' && status === 'active',\n          [`text-secondary-active`]: color === 'secondary' && status === 'active',\n          'text-neutral-darker': !status || status === 'default',\n        }\"\n        >{{ time }}</time\n      >\n      <div class=\"flex justify-center items-center flex-grow\">\n        <span\n          :class=\"{\n            [`text-primary-active`]: color === 'primary' && status === 'active',\n            [`text-secondary-active`]: color === 'secondary' && status === 'active',\n            'text-neutral-darker': !status || status === 'default',\n          }\"\n          @click.stop\n        >\n          <slot name=\"traling-slot\">\n            <ElIcon class=\"w-5 h-5 flex-shrink-0\" name=\"ChevronRightIcon\" />\n          </slot>\n        </span>\n      </div>\n      <div v-if=\"badge\" class=\"h-4 relative flex justify-center items-end\">\n        <ElBadge v-bind=\"badge\" />\n      </div>\n    </div>\n  </button>\n</template>\n"],"names":["elVerticalTabColors","elVerticalTabStatus"],"mappings":"mjBACaA,EAAsB,CAAC,UAAW,WAAW,EAG7CC,EAAsB,CAAC,UAAW,QAAS,QAAQ"}

package/dist/src/ElVerticalTab.vue.esm2.js

@@ -1,2 +1,2 @@
-import{defineComponent as p,openBlock as t,createElementBlock as o,normalizeClass as r,createBlock as n,mergeProps as d,createCommentVNode as s,normalizeProps as m,createElementVNode as a,toDisplayString as i,withModifiers as y,renderSlot as f,createVNode as u,guardReactiveProps as v}from"vue";import h from"./ElAvatar.vue.esm2.js";import c from"./ElIcon.vue.esm2.js";import b from"./ElBadge.vue.esm2.js";const g={class:"text-sm font-semibold line-clamp-1"},w={key:0,class:"text-neutral-lighter text-sm font-normal line-clamp-1"},k={class:"flex flex-col space-y-1 justify-center items-center self-stretch"},R=["datetime"],C={class:"flex justify-center items-center flex-grow"},V={key:1,class:"h-4 relative flex justify-center items-end"},P=["primary","secondary"],S=["default","hover","active"],T=p({__name:"ElVerticalTab",props:{icon:{},avatar:{},primaryRow:{},secondaryRow:{},tertiaryRow:{},lineClamp:{},time:{},badge:{},color:{},status:{}},setup($){return(e,l)=>(t(),o("button",{class:r(["p-3 w-full max-h-28 flex justify-start items-center gap-3 bg-disabled rounded-lg hover:bg-neutral-hover focus:bg-neutral-pressed",{"border border-primary-active bg-primary-light-active":e.color==="primary"&&e.status==="active","border border-secondary-active bg-secondary-light-active":e.color==="secondary"&&e.status==="active","border border-white bg-white":e.status==="default","border border-transparent bg-neutral-hover":e.status==="hover"}])},[e.icon?(t(),n(c,d({key:0},e.icon,{class:["w-6 h-6 flex-shrink-0",{"text-primary-active":e.color==="primary"&&e.status==="active","text-secondary-active":e.color==="secondary"&&e.status==="active","text-neutral-darker":!e.status||e.status==="default"}]}),null,16,["class"])):s("",!0),e.avatar?(t(),n(h,m(d({key:1},e.avatar)),null,16)):s("",!0),a("div",{class:r(["flex-1 flex flex-col items-start text-left",{[`text-${e.color}-active`]:e.status==="active","gap-1":e.secondaryRow||e.tertiaryRow,"text-neutral-darker":!e.status||e.status==="default"}])},[a("p",g,i(e.primaryRow),1),a("p",{class:r(["text-sm font-normal",{"line-clamp-1":e.lineClamp===1,"line-clamp-2":e.lineClamp===2}])},i(e.secondaryRow),3),e.tertiaryRow?(t(),o("span",w,i(e.tertiaryRow),1)):s("",!0)],2),a("div",k,[e.time?(t(),o("time",{key:0,datetime:e.time,class:r(["text-primary text-xs font-normal leading-5",{"text-primary-active":e.color==="primary"&&e.status==="active","text-secondary-active":e.color==="secondary"&&e.status==="active","text-neutral-darker":!e.status||e.status==="default"}])},i(e.time),11,R)):s("",!0),a("div",C,[a("span",{class:r({"text-primary-active":e.color==="primary"&&e.status==="active","text-secondary-active":e.color==="secondary"&&e.status==="active","text-neutral-darker":!e.status||e.status==="default"}),onClick:l[0]||(l[0]=y(()=>{},["stop"]))},[f(e.$slots,"traling-slot",{},()=>[u(c,{class:"w-5 h-5 flex-shrink-0",name:"ChevronRightIcon"})])],2)]),e.badge?(t(),o("div",V,[u(b,m(v(e.badge)),null,16)])):s("",!0)])],2))}});export{T as default,P as elVerticalTabColors,S as elVerticalTabStatus};
+import{defineComponent as p,openBlock as t,createElementBlock as o,normalizeClass as r,createBlock as n,mergeProps as d,createCommentVNode as s,normalizeProps as m,createElementVNode as a,toDisplayString as i,withModifiers as y,renderSlot as f,createVNode as c,guardReactiveProps as v}from"vue";import h from"./ElAvatar.vue.esm2.js";import u from"./ElIcon.vue.esm2.js";import b from"./ElBadge.vue.esm2.js";const g={class:"text-sm font-semibold line-clamp-1"},w={key:0,class:"text-neutral-lighter text-sm font-normal line-clamp-1"},k={class:"flex flex-col space-y-1 justify-center items-center self-stretch"},R=["datetime"],C={class:"flex justify-center items-center flex-grow"},V={key:1,class:"h-4 relative flex justify-center items-end"},P=["primary","secondary"],S=["default","hover","active"],T=p({__name:"ElVerticalTab",props:{icon:{},avatar:{},primaryRow:{},secondaryRow:{},tertiaryRow:{},lineClamp:{},time:{},badge:{},color:{},status:{}},setup($){return(e,l)=>(t(),o("button",{class:r(["p-3 w-full max-h-28 flex justify-start items-center gap-3 bg-disabled rounded-lg hover:bg-neutral-hover active:bg-neutral-pressed",{"border border-primary-active bg-primary-light-active":e.color==="primary"&&e.status==="active","border border-secondary-active bg-secondary-light-active":e.color==="secondary"&&e.status==="active","border border-white bg-white":e.status==="default","border border-transparent bg-neutral-hover":e.status==="hover"}])},[e.icon?(t(),n(u,d({key:0},e.icon,{class:["w-6 h-6 flex-shrink-0",{"text-primary-active":e.color==="primary"&&e.status==="active","text-secondary-active":e.color==="secondary"&&e.status==="active","text-neutral-darker":!e.status||e.status==="default"}]}),null,16,["class"])):s("",!0),e.avatar?(t(),n(h,m(d({key:1},e.avatar)),null,16)):s("",!0),a("div",{class:r(["flex-1 flex flex-col items-start text-left",{[`text-${e.color}-active`]:e.status==="active","gap-1":e.secondaryRow||e.tertiaryRow,"text-neutral-darker":!e.status||e.status==="default"}])},[a("p",g,i(e.primaryRow),1),a("p",{class:r(["text-sm font-normal",{"line-clamp-1":e.lineClamp===1,"line-clamp-2":e.lineClamp===2}])},i(e.secondaryRow),3),e.tertiaryRow?(t(),o("span",w,i(e.tertiaryRow),1)):s("",!0)],2),a("div",k,[e.time?(t(),o("time",{key:0,datetime:e.time,class:r(["text-primary text-xs font-normal leading-5",{"text-primary-active":e.color==="primary"&&e.status==="active","text-secondary-active":e.color==="secondary"&&e.status==="active","text-neutral-darker":!e.status||e.status==="default"}])},i(e.time),11,R)):s("",!0),a("div",C,[a("span",{class:r({"text-primary-active":e.color==="primary"&&e.status==="active","text-secondary-active":e.color==="secondary"&&e.status==="active","text-neutral-darker":!e.status||e.status==="default"}),onClick:l[0]||(l[0]=y(()=>{},["stop"]))},[f(e.$slots,"traling-slot",{},()=>[c(u,{class:"w-5 h-5 flex-shrink-0",name:"ChevronRightIcon"})])],2)]),e.badge?(t(),o("div",V,[c(b,m(v(e.badge)),null,16)])):s("",!0)])],2))}});export{T as default,P as elVerticalTabColors,S as elVerticalTabStatus};
 //# sourceMappingURL=ElVerticalTab.vue.esm2.js.map

package/dist/src/ElVerticalTab.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElVerticalTab.vue.esm2.js","sources":["../../src/ElVerticalTab.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elVerticalTabColors = ['primary', 'secondary'] as const;\nexport type ElVerticalTabColors = (typeof elVerticalTabColors)[number];\n\nexport const elVerticalTabStatus = ['default', 'hover', 'active'] as const;\nexport type ElVerticalTabStatus = (typeof elVerticalTabStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElAvatar from '@/ElAvatar.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElBadge from '@/ElBadge.vue';\n\ndefineProps<{\n  icon?: InstanceType<typeof ElIcon>['$props']; // prop drilling\n  avatar?: InstanceType<typeof ElAvatar>['$props'];\n  primaryRow: string;\n  secondaryRow?: string;\n  tertiaryRow?: string;\n  lineClamp?: 1 | 2;\n  time?: string;\n  badge?: InstanceType<typeof ElBadge>['$props'];\n  color?: ElVerticalTabColors;\n  status?: ElVerticalTabStatus;\n}>();\n</script>\n\n<template>\n  <button\n    class=\"p-3 w-full max-h-28 flex justify-start items-center gap-3 bg-disabled rounded-lg hover:bg-neutral-hover focus:bg-neutral-pressed\"\n    :class=\"{\n      [`border border-primary-active bg-primary-light-active`]: color === 'primary' && status === 'active',\n      [`border border-secondary-active bg-secondary-light-active`]: color === 'secondary' && status === 'active',\n      [`border border-white bg-white`]: status === 'default',\n      [`border border-transparent bg-neutral-hover`]: status === 'hover',\n    }\"\n  >\n    <ElIcon\n      v-if=\"icon\"\n      v-bind=\"icon\"\n      class=\"w-6 h-6 flex-shrink-0\"\n      :class=\"{\n        [`text-primary-active`]: color === 'primary' && status === 'active',\n        [`text-secondary-active`]: color === 'secondary' && status === 'active',\n        'text-neutral-darker': !status || status === 'default',\n      }\"\n    />\n    <ElAvatar v-if=\"avatar\" v-bind=\"avatar\" />\n    <div\n      class=\"flex-1 flex flex-col items-start text-left\"\n      :class=\"{\n        [`text-${color}-active`]: status === 'active',\n        'gap-1': secondaryRow || tertiaryRow,\n        'text-neutral-darker': !status || status === 'default',\n      }\"\n    >\n      <p class=\"text-sm font-semibold line-clamp-1\">\n        {{ primaryRow }}\n      </p>\n      <p\n        class=\"text-sm font-normal\"\n        :class=\"{\n          [`line-clamp-1`]: lineClamp === 1,\n          [`line-clamp-2`]: lineClamp === 2,\n        }\"\n      >\n        {{ secondaryRow }}\n      </p>\n      <span v-if=\"tertiaryRow\" class=\"text-neutral-lighter text-sm font-normal line-clamp-1\">{{ tertiaryRow }}</span>\n    </div>\n    <div class=\"flex flex-col space-y-1 justify-center items-center self-stretch\">\n      <time\n        v-if=\"time\"\n        :datetime=\"time\"\n        class=\"text-primary text-xs font-normal leading-5\"\n        :class=\"{\n          [`text-primary-active`]: color === 'primary' && status === 'active',\n          [`text-secondary-active`]: color === 'secondary' && status === 'active',\n          'text-neutral-darker': !status || status === 'default',\n        }\"\n        >{{ time }}</time\n      >\n      <div class=\"flex justify-center items-center flex-grow\">\n        <span\n          :class=\"{\n            [`text-primary-active`]: color === 'primary' && status === 'active',\n            [`text-secondary-active`]: color === 'secondary' && status === 'active',\n            'text-neutral-darker': !status || status === 'default',\n          }\"\n          @click.stop\n        >\n          <slot name=\"traling-slot\">\n            <ElIcon class=\"w-5 h-5 flex-shrink-0\" name=\"ChevronRightIcon\" />\n          </slot>\n        </span>\n      </div>\n      <div v-if=\"badge\" class=\"h-4 relative flex justify-center items-end\">\n        <ElBadge v-bind=\"badge\" />\n      </div>\n    </div>\n  </button>\n</template>\n"],"names":["elVerticalTabColors","elVerticalTabStatus"],"mappings":"muBACaA,EAAsB,CAAC,UAAW,WAAW,EAG7CC,EAAsB,CAAC,UAAW,QAAS,QAAQ"}
+{"version":3,"file":"ElVerticalTab.vue.esm2.js","sources":["../../src/ElVerticalTab.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elVerticalTabColors = ['primary', 'secondary'] as const;\nexport type ElVerticalTabColors = (typeof elVerticalTabColors)[number];\n\nexport const elVerticalTabStatus = ['default', 'hover', 'active'] as const;\nexport type ElVerticalTabStatus = (typeof elVerticalTabStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElAvatar from '@/ElAvatar.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElBadge from '@/ElBadge.vue';\n\ndefineProps<{\n  icon?: InstanceType<typeof ElIcon>['$props']; // prop drilling\n  avatar?: InstanceType<typeof ElAvatar>['$props'];\n  primaryRow: string;\n  secondaryRow?: string;\n  tertiaryRow?: string;\n  lineClamp?: 1 | 2;\n  time?: string;\n  badge?: InstanceType<typeof ElBadge>['$props'];\n  color?: ElVerticalTabColors;\n  status?: ElVerticalTabStatus;\n}>();\n</script>\n\n<template>\n  <button\n    class=\"p-3 w-full max-h-28 flex justify-start items-center gap-3 bg-disabled rounded-lg hover:bg-neutral-hover active:bg-neutral-pressed\"\n    :class=\"{\n      [`border border-primary-active bg-primary-light-active`]: color === 'primary' && status === 'active',\n      [`border border-secondary-active bg-secondary-light-active`]: color === 'secondary' && status === 'active',\n      [`border border-white bg-white`]: status === 'default',\n      [`border border-transparent bg-neutral-hover`]: status === 'hover',\n    }\"\n  >\n    <ElIcon\n      v-if=\"icon\"\n      v-bind=\"icon\"\n      class=\"w-6 h-6 flex-shrink-0\"\n      :class=\"{\n        [`text-primary-active`]: color === 'primary' && status === 'active',\n        [`text-secondary-active`]: color === 'secondary' && status === 'active',\n        'text-neutral-darker': !status || status === 'default',\n      }\"\n    />\n    <ElAvatar v-if=\"avatar\" v-bind=\"avatar\" />\n    <div\n      class=\"flex-1 flex flex-col items-start text-left\"\n      :class=\"{\n        [`text-${color}-active`]: status === 'active',\n        'gap-1': secondaryRow || tertiaryRow,\n        'text-neutral-darker': !status || status === 'default',\n      }\"\n    >\n      <p class=\"text-sm font-semibold line-clamp-1\">\n        {{ primaryRow }}\n      </p>\n      <p\n        class=\"text-sm font-normal\"\n        :class=\"{\n          [`line-clamp-1`]: lineClamp === 1,\n          [`line-clamp-2`]: lineClamp === 2,\n        }\"\n      >\n        {{ secondaryRow }}\n      </p>\n      <span v-if=\"tertiaryRow\" class=\"text-neutral-lighter text-sm font-normal line-clamp-1\">{{ tertiaryRow }}</span>\n    </div>\n    <div class=\"flex flex-col space-y-1 justify-center items-center self-stretch\">\n      <time\n        v-if=\"time\"\n        :datetime=\"time\"\n        class=\"text-primary text-xs font-normal leading-5\"\n        :class=\"{\n          [`text-primary-active`]: color === 'primary' && status === 'active',\n          [`text-secondary-active`]: color === 'secondary' && status === 'active',\n          'text-neutral-darker': !status || status === 'default',\n        }\"\n        >{{ time }}</time\n      >\n      <div class=\"flex justify-center items-center flex-grow\">\n        <span\n          :class=\"{\n            [`text-primary-active`]: color === 'primary' && status === 'active',\n            [`text-secondary-active`]: color === 'secondary' && status === 'active',\n            'text-neutral-darker': !status || status === 'default',\n          }\"\n          @click.stop\n        >\n          <slot name=\"traling-slot\">\n            <ElIcon class=\"w-5 h-5 flex-shrink-0\" name=\"ChevronRightIcon\" />\n          </slot>\n        </span>\n      </div>\n      <div v-if=\"badge\" class=\"h-4 relative flex justify-center items-end\">\n        <ElBadge v-bind=\"badge\" />\n      </div>\n    </div>\n  </button>\n</template>\n"],"names":["elVerticalTabColors","elVerticalTabStatus"],"mappings":"muBACaA,EAAsB,CAAC,UAAW,WAAW,EAG7CC,EAAsB,CAAC,UAAW,QAAS,QAAQ"}