@davincihealthcare/elty-design-system-vue 2.7.0 → 2.7.2
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.
- package/dist/ElButton.vue.cjs2.js +1 -1
- package/dist/ElButton.vue.cjs2.js.map +1 -1
- package/dist/ElButton.vue.esm2.js +1 -1
- package/dist/ElButton.vue.esm2.js.map +1 -1
- package/dist/ElCarousel.vue.cjs2.js +1 -1
- package/dist/ElCarousel.vue.cjs2.js.map +1 -1
- package/dist/ElCarousel.vue.esm2.js +1 -1
- package/dist/ElCarousel.vue.esm2.js.map +1 -1
- package/package.json +1 -1
|
@@ -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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),m=require("./node_modules/swiper/modules/keyboard.cjs.js"),f=require("./node_modules/swiper/modules/navigation.cjs.js"),p=require("./node_modules/swiper/modules/pagination.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),m=require("./node_modules/swiper/modules/keyboard.cjs.js"),f=require("./node_modules/swiper/modules/navigation.cjs.js"),p=require("./node_modules/swiper/modules/pagination.cjs.js"),n=require("./node_modules/swiper/swiper-vue.cjs.js");;/* 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 g=require("./ElButton.vue.cjs2.js");require("./forms/ElInputText.vue.cjs2.js");const o=require("./utils.cjs.js"),u=require("./ElIconButton.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");;/* empty css */;/* empty css */require("./forms/ElInputSearch.vue.cjs2.js");require("./forms/ElInputAutocomplete.vue.cjs2.js");const v={key:0,class:"bg-black opacity-30 left-0 absolute w-full h-full top-0 rounded-2xl"},w={class:"font-semibold text-neutral-inverse text-xl md:text-2xl lg:text-4xl"},q={class:"py-2 md:py-3 lg:py-4"},b={key:0,class:"px-6 w-full mb-20 hidden md:absolute md:mt-0 lg:top-60 md:bottom-0 lg:flex justify-between"},x={class:"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden"},y={class:"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden"},z=["sm","md","lg"],h=e.defineComponent({__name:"ElCarousel",props:{size:{},slides:{},opacity:{type:Boolean}},setup(k){const a=o.useMatchDevice(),d=e.computed(()=>{switch(a.value){case o.Device.Desktop:return"xl";case o.Device.Tablet:return"l";default:return"sm"}}),s=e.ref(),c=e.ref([f.default,p.default,m.default]);return(t,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["w-full relative",{"max-w-2xl":t.size==="md","max-w-7xl":t.size==="lg"}])},[e.createVNode(e.unref(n.Swiper),{"space-between":30,"slides-per-view":1,keyboard:{enabled:!0},pagination:{clickable:!0},loop:!0,navigation:!0,modules:c.value,class:"",onSwiper:i[0]||(i[0]=r=>s.value=r)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.slides,(r,l)=>(e.openBlock(),e.createBlock(e.unref(n.SwiperSlide),{key:l},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center isolate overflow-hidden w-full bg-left bg-cover bg-no-repeat bg-black rounded-2xl p-6 md:p-7 lg:p-24",{"justify-end items-end h-auto":t.size==="sm","h-96":t.size==="md","h-auto":t.size==="lg"}]),style:e.normalizeStyle({backgroundImage:"url("+r.picture+")"})},[t.opacity?(e.openBlock(),e.createElementBlock("div",v)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["z-10 flex flex-col justify-end md:justify-center gap-3 lg:gap-4 items-start flex-1 self-stretch md:my-8 text-white text-sm md:text-base lg:text-xl",{"w-full":t.size==="sm","max-w-80":t.size==="md","max-w-96":t.size==="lg"}])},[e.createElementVNode("h1",w,e.toDisplayString(r.title),1),e.createElementVNode("p",{class:e.normalizeClass(["text-neutral-inverse font-medium text-sm md:text-base md:max-w-80 lg:text-xl lg:max-w-96",{"w-full":t.size==="sm","w-80 max-w-80":t.size==="md","w-96 max-w-96":t.size==="lg"}])},e.toDisplayString(r.description),3),e.createElementVNode("div",q,[e.createVNode(e.unref(g.default),e.mergeProps({ref_for:!0},r.button,{size:d.value}),null,16,["size"])])],2)],6)]),_:2},1024))),128))]),_:1},8,["modules"]),t.slides.length>1?(e.openBlock(),e.createElementBlock("div",b,[e.createElementVNode("div",x,[e.createVNode(e.unref(u.default),{icon:{name:"ArrowSmallLeftIcon"},onClick:i[1]||(i[1]=r=>{var l;return(l=s.value)==null?void 0:l.slidePrev()})})]),e.createElementVNode("div",y,[e.createVNode(e.unref(u.default),{icon:{name:"ArrowSmallRightIcon"},onClick:i[2]||(i[2]=r=>{var l;return(l=s.value)==null?void 0:l.slideNext()})})])])):e.createCommentVNode("",!0)],2))}});exports.default=h;exports.elCarouselSizes=z;
|
|
2
2
|
//# sourceMappingURL=ElCarousel.vue.cjs2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElCarousel.vue.cjs2.js","sources":["../src/ElCarousel.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elCarouselSizes = ['sm', 'md', 'lg'] as const;\nexport type ElCarouselSizes = (typeof elCarouselSizes)[number];\n\nexport interface CarouselProps {\n size?: ElCarouselSizes;\n slides: CarouselSlide[];\n opacity?: boolean;\n}\n\nexport interface CarouselSlide {\n title: string;\n description: string;\n picture: string;\n button: InstanceType<typeof ElButton>['$props'];\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { Keyboard, Navigation, Pagination } from 'swiper/modules';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { ElButton, ElIconButton } from '.';\n\nimport 'swiper/css';\nimport 'swiper/css/pagination';\nimport { computed, ref } from 'vue';\nimport { Device, useMatchDevice } from './utils';\n\ndefineProps<CarouselProps>();\n\nconst device = useMatchDevice();\n\nconst buttonSize = computed(() => {\n switch (device.value) {\n case Device.Desktop:\n return 'xl';\n case Device.Tablet:\n return 'l';\n default:\n return 'sm';\n }\n});\n\nconst swiperInstance = ref();\nconst modules = ref([Navigation, Pagination, Keyboard]);\n</script>\n\n<template>\n <div\n class=\"w-full relative\"\n :class=\"{\n 'max-w-2xl': size === 'md',\n 'max-w-7xl': size === 'lg',\n }\"\n >\n <swiper\n :space-between=\"30\"\n :slides-per-view=\"1\"\n :keyboard=\"{\n enabled: true,\n }\"\n :pagination=\"{\n clickable: true,\n }\"\n :loop=\"true\"\n :navigation=\"true\"\n :modules=\"modules\"\n class=\"\"\n @swiper=\"swiperInstance = $event\"\n >\n <swiper-slide v-for=\"(slide, index) in slides\" :key=\"index\">\n <div\n class=\"flex items-center isolate overflow-hidden w-full bg-left bg-cover bg-no-repeat bg-black rounded-2xl p-6 md:p-7 lg:p-24\"\n :style=\"{\n backgroundImage: 'url(' + slide.picture + ')',\n }\"\n :class=\"{\n 'justify-end items-end h-auto': size === 'sm',\n 'h-96': size === 'md',\n 'h-auto': size === 'lg',\n }\"\n >\n <div v-if=\"opacity\" class=\"bg-black opacity-30 left-0 absolute w-full h-full top-0 rounded-2xl\"></div>\n\n <div\n class=\"z-10 flex flex-col justify-end md:justify-center gap-3 lg:gap-4 items-start flex-1 self-stretch md:my-8 text-white text-sm md:text-base lg:text-xl\"\n :class=\"{\n 'w-full': size === 'sm',\n 'max-w-80': size === 'md',\n 'max-w-96': size === 'lg',\n }\"\n >\n <h1 class=\"font-semibold text-neutral-inverse text-xl md:text-2xl lg:text-4xl\">\n {{ slide.title }}\n </h1>\n <p\n class=\"text-neutral-inverse font-medium text-sm md:text-base md:max-w-80 lg:text-xl lg:max-w-96\"\n :class=\"{\n 'w-full': size === 'sm',\n 'w-80 max-w-80': size === 'md',\n 'w-96 max-w-96': size === 'lg',\n }\"\n >\n {{ slide.description }}\n </p>\n <div class=\"py-2 md:py-3 lg:py-4\">\n <ElButton v-bind=\"slide.button\" :size=\"buttonSize\" />\n </div>\n </div>\n </div>\n </swiper-slide>\n </swiper>\n <div class=\"px-6 w-full mb-20 hidden md:absolute md:mt-0 lg:top-60 md:bottom-0 lg:flex justify-between\">\n <div class=\"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden\">\n <ElIconButton :icon=\"{ name: 'ArrowSmallLeftIcon' }\" @click=\"swiperInstance?.slidePrev()\" />\n </div>\n <div class=\"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden\">\n <ElIconButton :icon=\"{ name: 'ArrowSmallRightIcon' }\" @click=\"swiperInstance?.slideNext()\" />\n </div>\n </div>\n </div>\n</template>\n"],"names":["elCarouselSizes","device","useMatchDevice","buttonSize","computed","Device","swiperInstance","ref","modules","Navigation","Pagination","Keyboard"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ElCarousel.vue.cjs2.js","sources":["../src/ElCarousel.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elCarouselSizes = ['sm', 'md', 'lg'] as const;\nexport type ElCarouselSizes = (typeof elCarouselSizes)[number];\n\nexport interface CarouselProps {\n size?: ElCarouselSizes;\n slides: CarouselSlide[];\n opacity?: boolean;\n}\n\nexport interface CarouselSlide {\n title: string;\n description: string;\n picture: string;\n button: InstanceType<typeof ElButton>['$props'];\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { Keyboard, Navigation, Pagination } from 'swiper/modules';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { ElButton, ElIconButton } from '.';\n\nimport 'swiper/css';\nimport 'swiper/css/pagination';\nimport { computed, ref } from 'vue';\nimport { Device, useMatchDevice } from './utils';\n\ndefineProps<CarouselProps>();\n\nconst device = useMatchDevice();\n\nconst buttonSize = computed(() => {\n switch (device.value) {\n case Device.Desktop:\n return 'xl';\n case Device.Tablet:\n return 'l';\n default:\n return 'sm';\n }\n});\n\nconst swiperInstance = ref();\nconst modules = ref([Navigation, Pagination, Keyboard]);\n</script>\n\n<template>\n <div\n class=\"w-full relative\"\n :class=\"{\n 'max-w-2xl': size === 'md',\n 'max-w-7xl': size === 'lg',\n }\"\n >\n <swiper\n :space-between=\"30\"\n :slides-per-view=\"1\"\n :keyboard=\"{\n enabled: true,\n }\"\n :pagination=\"{\n clickable: true,\n }\"\n :loop=\"true\"\n :navigation=\"true\"\n :modules=\"modules\"\n class=\"\"\n @swiper=\"swiperInstance = $event\"\n >\n <swiper-slide v-for=\"(slide, index) in slides\" :key=\"index\">\n <div\n class=\"flex items-center isolate overflow-hidden w-full bg-left bg-cover bg-no-repeat bg-black rounded-2xl p-6 md:p-7 lg:p-24\"\n :style=\"{\n backgroundImage: 'url(' + slide.picture + ')',\n }\"\n :class=\"{\n 'justify-end items-end h-auto': size === 'sm',\n 'h-96': size === 'md',\n 'h-auto': size === 'lg',\n }\"\n >\n <div v-if=\"opacity\" class=\"bg-black opacity-30 left-0 absolute w-full h-full top-0 rounded-2xl\"></div>\n\n <div\n class=\"z-10 flex flex-col justify-end md:justify-center gap-3 lg:gap-4 items-start flex-1 self-stretch md:my-8 text-white text-sm md:text-base lg:text-xl\"\n :class=\"{\n 'w-full': size === 'sm',\n 'max-w-80': size === 'md',\n 'max-w-96': size === 'lg',\n }\"\n >\n <h1 class=\"font-semibold text-neutral-inverse text-xl md:text-2xl lg:text-4xl\">\n {{ slide.title }}\n </h1>\n <p\n class=\"text-neutral-inverse font-medium text-sm md:text-base md:max-w-80 lg:text-xl lg:max-w-96\"\n :class=\"{\n 'w-full': size === 'sm',\n 'w-80 max-w-80': size === 'md',\n 'w-96 max-w-96': size === 'lg',\n }\"\n >\n {{ slide.description }}\n </p>\n <div class=\"py-2 md:py-3 lg:py-4\">\n <ElButton v-bind=\"slide.button\" :size=\"buttonSize\" />\n </div>\n </div>\n </div>\n </swiper-slide>\n </swiper>\n <div v-if=\"slides.length > 1\" class=\"px-6 w-full mb-20 hidden md:absolute md:mt-0 lg:top-60 md:bottom-0 lg:flex justify-between\">\n <div class=\"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden\">\n <ElIconButton :icon=\"{ name: 'ArrowSmallLeftIcon' }\" @click=\"swiperInstance?.slidePrev()\" />\n </div>\n <div class=\"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden\">\n <ElIconButton :icon=\"{ name: 'ArrowSmallRightIcon' }\" @click=\"swiperInstance?.slideNext()\" />\n </div>\n </div>\n </div>\n</template>\n"],"names":["elCarouselSizes","device","useMatchDevice","buttonSize","computed","Device","swiperInstance","ref","modules","Navigation","Pagination","Keyboard"],"mappings":"4+DACaA,EAAkB,CAAC,KAAM,KAAM,IAAI,qGA6BhD,MAAMC,EAASC,EAAAA,iBAETC,EAAaC,EAAAA,SAAS,IAAM,CAChC,OAAQH,EAAO,MAAO,CACpB,KAAKI,EAAO,OAAA,QACH,MAAA,KACT,KAAKA,EAAO,OAAA,OACH,MAAA,IACT,QACS,MAAA,IACX,CAAA,CACD,EAEKC,EAAiBC,EAAAA,MACjBC,EAAUD,EAAAA,IAAI,CAACE,EAAY,QAAAC,EAAA,QAAYC,EAAQ,OAAA,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as
|
|
1
|
+
import{defineComponent as y,computed as h,ref as p,openBlock as r,createElementBlock as m,normalizeClass as n,createVNode as a,unref as s,withCtx as u,Fragment as z,renderList as k,createBlock as S,createElementVNode as i,normalizeStyle as C,createCommentVNode as f,toDisplayString as c,mergeProps as _}from"vue";import j from"./node_modules/swiper/modules/keyboard.esm.js";import N from"./node_modules/swiper/modules/navigation.esm.js";import B from"./node_modules/swiper/modules/pagination.esm.js";import{Swiper as D,SwiperSlide as I}from"./node_modules/swiper/swiper-vue.esm.js";/* 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 $ from"./ElButton.vue.esm2.js";import"./forms/ElInputText.vue.esm2.js";import{useMatchDevice as E,Device as w}from"./utils.esm.js";import g from"./ElIconButton.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";/* empty css *//* empty css */import"./forms/ElInputSearch.vue.esm2.js";import"./forms/ElInputAutocomplete.vue.esm2.js";const P={key:0,class:"bg-black opacity-30 left-0 absolute w-full h-full top-0 rounded-2xl"},V={class:"font-semibold text-neutral-inverse text-xl md:text-2xl lg:text-4xl"},A={class:"py-2 md:py-3 lg:py-4"},L={key:0,class:"px-6 w-full mb-20 hidden md:absolute md:mt-0 lg:top-60 md:bottom-0 lg:flex justify-between"},F={class:"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden"},K={class:"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden"},ve=["sm","md","lg"],xe=y({__name:"ElCarousel",props:{size:{},slides:{},opacity:{type:Boolean}},setup(M){const v=E(),x=h(()=>{switch(v.value){case w.Desktop:return"xl";case w.Tablet:return"l";default:return"sm"}}),d=p(),b=p([N,B,j]);return(e,l)=>(r(),m("div",{class:n(["w-full relative",{"max-w-2xl":e.size==="md","max-w-7xl":e.size==="lg"}])},[a(s(D),{"space-between":30,"slides-per-view":1,keyboard:{enabled:!0},pagination:{clickable:!0},loop:!0,navigation:!0,modules:b.value,class:"",onSwiper:l[0]||(l[0]=t=>d.value=t)},{default:u(()=>[(r(!0),m(z,null,k(e.slides,(t,o)=>(r(),S(s(I),{key:o},{default:u(()=>[i("div",{class:n(["flex items-center isolate overflow-hidden w-full bg-left bg-cover bg-no-repeat bg-black rounded-2xl p-6 md:p-7 lg:p-24",{"justify-end items-end h-auto":e.size==="sm","h-96":e.size==="md","h-auto":e.size==="lg"}]),style:C({backgroundImage:"url("+t.picture+")"})},[e.opacity?(r(),m("div",P)):f("",!0),i("div",{class:n(["z-10 flex flex-col justify-end md:justify-center gap-3 lg:gap-4 items-start flex-1 self-stretch md:my-8 text-white text-sm md:text-base lg:text-xl",{"w-full":e.size==="sm","max-w-80":e.size==="md","max-w-96":e.size==="lg"}])},[i("h1",V,c(t.title),1),i("p",{class:n(["text-neutral-inverse font-medium text-sm md:text-base md:max-w-80 lg:text-xl lg:max-w-96",{"w-full":e.size==="sm","w-80 max-w-80":e.size==="md","w-96 max-w-96":e.size==="lg"}])},c(t.description),3),i("div",A,[a(s($),_({ref_for:!0},t.button,{size:x.value}),null,16,["size"])])],2)],6)]),_:2},1024))),128))]),_:1},8,["modules"]),e.slides.length>1?(r(),m("div",L,[i("div",F,[a(s(g),{icon:{name:"ArrowSmallLeftIcon"},onClick:l[1]||(l[1]=t=>{var o;return(o=d.value)==null?void 0:o.slidePrev()})})]),i("div",K,[a(s(g),{icon:{name:"ArrowSmallRightIcon"},onClick:l[2]||(l[2]=t=>{var o;return(o=d.value)==null?void 0:o.slideNext()})})])])):f("",!0)],2))}});export{xe as default,ve as elCarouselSizes};
|
|
2
2
|
//# sourceMappingURL=ElCarousel.vue.esm2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElCarousel.vue.esm2.js","sources":["../src/ElCarousel.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elCarouselSizes = ['sm', 'md', 'lg'] as const;\nexport type ElCarouselSizes = (typeof elCarouselSizes)[number];\n\nexport interface CarouselProps {\n size?: ElCarouselSizes;\n slides: CarouselSlide[];\n opacity?: boolean;\n}\n\nexport interface CarouselSlide {\n title: string;\n description: string;\n picture: string;\n button: InstanceType<typeof ElButton>['$props'];\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { Keyboard, Navigation, Pagination } from 'swiper/modules';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { ElButton, ElIconButton } from '.';\n\nimport 'swiper/css';\nimport 'swiper/css/pagination';\nimport { computed, ref } from 'vue';\nimport { Device, useMatchDevice } from './utils';\n\ndefineProps<CarouselProps>();\n\nconst device = useMatchDevice();\n\nconst buttonSize = computed(() => {\n switch (device.value) {\n case Device.Desktop:\n return 'xl';\n case Device.Tablet:\n return 'l';\n default:\n return 'sm';\n }\n});\n\nconst swiperInstance = ref();\nconst modules = ref([Navigation, Pagination, Keyboard]);\n</script>\n\n<template>\n <div\n class=\"w-full relative\"\n :class=\"{\n 'max-w-2xl': size === 'md',\n 'max-w-7xl': size === 'lg',\n }\"\n >\n <swiper\n :space-between=\"30\"\n :slides-per-view=\"1\"\n :keyboard=\"{\n enabled: true,\n }\"\n :pagination=\"{\n clickable: true,\n }\"\n :loop=\"true\"\n :navigation=\"true\"\n :modules=\"modules\"\n class=\"\"\n @swiper=\"swiperInstance = $event\"\n >\n <swiper-slide v-for=\"(slide, index) in slides\" :key=\"index\">\n <div\n class=\"flex items-center isolate overflow-hidden w-full bg-left bg-cover bg-no-repeat bg-black rounded-2xl p-6 md:p-7 lg:p-24\"\n :style=\"{\n backgroundImage: 'url(' + slide.picture + ')',\n }\"\n :class=\"{\n 'justify-end items-end h-auto': size === 'sm',\n 'h-96': size === 'md',\n 'h-auto': size === 'lg',\n }\"\n >\n <div v-if=\"opacity\" class=\"bg-black opacity-30 left-0 absolute w-full h-full top-0 rounded-2xl\"></div>\n\n <div\n class=\"z-10 flex flex-col justify-end md:justify-center gap-3 lg:gap-4 items-start flex-1 self-stretch md:my-8 text-white text-sm md:text-base lg:text-xl\"\n :class=\"{\n 'w-full': size === 'sm',\n 'max-w-80': size === 'md',\n 'max-w-96': size === 'lg',\n }\"\n >\n <h1 class=\"font-semibold text-neutral-inverse text-xl md:text-2xl lg:text-4xl\">\n {{ slide.title }}\n </h1>\n <p\n class=\"text-neutral-inverse font-medium text-sm md:text-base md:max-w-80 lg:text-xl lg:max-w-96\"\n :class=\"{\n 'w-full': size === 'sm',\n 'w-80 max-w-80': size === 'md',\n 'w-96 max-w-96': size === 'lg',\n }\"\n >\n {{ slide.description }}\n </p>\n <div class=\"py-2 md:py-3 lg:py-4\">\n <ElButton v-bind=\"slide.button\" :size=\"buttonSize\" />\n </div>\n </div>\n </div>\n </swiper-slide>\n </swiper>\n <div class=\"px-6 w-full mb-20 hidden md:absolute md:mt-0 lg:top-60 md:bottom-0 lg:flex justify-between\">\n <div class=\"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden\">\n <ElIconButton :icon=\"{ name: 'ArrowSmallLeftIcon' }\" @click=\"swiperInstance?.slidePrev()\" />\n </div>\n <div class=\"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden\">\n <ElIconButton :icon=\"{ name: 'ArrowSmallRightIcon' }\" @click=\"swiperInstance?.slideNext()\" />\n </div>\n </div>\n </div>\n</template>\n"],"names":["elCarouselSizes","device","useMatchDevice","buttonSize","computed","Device","swiperInstance","ref","modules","Navigation","Pagination","Keyboard"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ElCarousel.vue.esm2.js","sources":["../src/ElCarousel.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elCarouselSizes = ['sm', 'md', 'lg'] as const;\nexport type ElCarouselSizes = (typeof elCarouselSizes)[number];\n\nexport interface CarouselProps {\n size?: ElCarouselSizes;\n slides: CarouselSlide[];\n opacity?: boolean;\n}\n\nexport interface CarouselSlide {\n title: string;\n description: string;\n picture: string;\n button: InstanceType<typeof ElButton>['$props'];\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { Keyboard, Navigation, Pagination } from 'swiper/modules';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { ElButton, ElIconButton } from '.';\n\nimport 'swiper/css';\nimport 'swiper/css/pagination';\nimport { computed, ref } from 'vue';\nimport { Device, useMatchDevice } from './utils';\n\ndefineProps<CarouselProps>();\n\nconst device = useMatchDevice();\n\nconst buttonSize = computed(() => {\n switch (device.value) {\n case Device.Desktop:\n return 'xl';\n case Device.Tablet:\n return 'l';\n default:\n return 'sm';\n }\n});\n\nconst swiperInstance = ref();\nconst modules = ref([Navigation, Pagination, Keyboard]);\n</script>\n\n<template>\n <div\n class=\"w-full relative\"\n :class=\"{\n 'max-w-2xl': size === 'md',\n 'max-w-7xl': size === 'lg',\n }\"\n >\n <swiper\n :space-between=\"30\"\n :slides-per-view=\"1\"\n :keyboard=\"{\n enabled: true,\n }\"\n :pagination=\"{\n clickable: true,\n }\"\n :loop=\"true\"\n :navigation=\"true\"\n :modules=\"modules\"\n class=\"\"\n @swiper=\"swiperInstance = $event\"\n >\n <swiper-slide v-for=\"(slide, index) in slides\" :key=\"index\">\n <div\n class=\"flex items-center isolate overflow-hidden w-full bg-left bg-cover bg-no-repeat bg-black rounded-2xl p-6 md:p-7 lg:p-24\"\n :style=\"{\n backgroundImage: 'url(' + slide.picture + ')',\n }\"\n :class=\"{\n 'justify-end items-end h-auto': size === 'sm',\n 'h-96': size === 'md',\n 'h-auto': size === 'lg',\n }\"\n >\n <div v-if=\"opacity\" class=\"bg-black opacity-30 left-0 absolute w-full h-full top-0 rounded-2xl\"></div>\n\n <div\n class=\"z-10 flex flex-col justify-end md:justify-center gap-3 lg:gap-4 items-start flex-1 self-stretch md:my-8 text-white text-sm md:text-base lg:text-xl\"\n :class=\"{\n 'w-full': size === 'sm',\n 'max-w-80': size === 'md',\n 'max-w-96': size === 'lg',\n }\"\n >\n <h1 class=\"font-semibold text-neutral-inverse text-xl md:text-2xl lg:text-4xl\">\n {{ slide.title }}\n </h1>\n <p\n class=\"text-neutral-inverse font-medium text-sm md:text-base md:max-w-80 lg:text-xl lg:max-w-96\"\n :class=\"{\n 'w-full': size === 'sm',\n 'w-80 max-w-80': size === 'md',\n 'w-96 max-w-96': size === 'lg',\n }\"\n >\n {{ slide.description }}\n </p>\n <div class=\"py-2 md:py-3 lg:py-4\">\n <ElButton v-bind=\"slide.button\" :size=\"buttonSize\" />\n </div>\n </div>\n </div>\n </swiper-slide>\n </swiper>\n <div v-if=\"slides.length > 1\" class=\"px-6 w-full mb-20 hidden md:absolute md:mt-0 lg:top-60 md:bottom-0 lg:flex justify-between\">\n <div class=\"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden\">\n <ElIconButton :icon=\"{ name: 'ArrowSmallLeftIcon' }\" @click=\"swiperInstance?.slidePrev()\" />\n </div>\n <div class=\"w-9 h-9 flex justify-center items-center bg-white rounded-full z-10 overflow-hidden\">\n <ElIconButton :icon=\"{ name: 'ArrowSmallRightIcon' }\" @click=\"swiperInstance?.slideNext()\" />\n </div>\n </div>\n </div>\n</template>\n"],"names":["elCarouselSizes","device","useMatchDevice","buttonSize","computed","Device","swiperInstance","ref","modules","Navigation","Pagination","Keyboard"],"mappings":"2pEACaA,GAAkB,CAAC,KAAM,KAAM,IAAI,sFA6BhD,MAAMC,EAASC,IAETC,EAAaC,EAAS,IAAM,CAChC,OAAQH,EAAO,MAAO,CACpB,KAAKI,EAAO,QACH,MAAA,KACT,KAAKA,EAAO,OACH,MAAA,IACT,QACS,MAAA,IACX,CAAA,CACD,EAEKC,EAAiBC,IACjBC,EAAUD,EAAI,CAACE,EAAYC,EAAYC,CAAQ,CAAC"}
|