@davincihealthcare/elty-design-system-vue 2.7.0 → 2.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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"],
|
|
1
|
+
"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;
|
|
2
2
|
//# sourceMappingURL=ElButton.vue.cjs2.js.map
|
|
@@ -1 +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,\n 'cursor-wait': computedLoading,\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"}
|
|
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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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"],
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=ElButton.vue.esm2.js.map
|
|
@@ -1 +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,\n 'cursor-wait': computedLoading,\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"}
|
|
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"}
|