npm - @davincihealthcare/elty-design-system-vue - Versions diffs - 2.6.1 → 2.7.1 - Mend

@davincihealthcare/elty-design-system-vue 2.6.1 → 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.

Files changed (9) hide show

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/forms/ElInputAutocomplete.vue.cjs2.js +1 -1
package/dist/forms/ElInputAutocomplete.vue.cjs2.js.map +1 -1
package/dist/forms/ElInputAutocomplete.vue.esm2.js +1 -1
package/dist/forms/ElInputAutocomplete.vue.esm2.js.map +1 -1
package/package.json +1 -1

package/dist/ElButton.vue.cjs2.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),d=require("./ElIcon.vue.cjs2.js"),u=["disabled","type","data-cy"],p={class:"font-semibold"},b={key:1,class:"inline-flex items-center"},m=r.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),h=r.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1),v=[m,h],y=r.createElementVNode("span",{class:"font-semibold"},"Un attimo...",-1),f=["xs","sm","base","l","xl"],c=["primary","secondary","tertiary"],g=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,"cursor-wait":s.value,"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=g;exports.elButtonSizes=f;exports.elButtonVariants=c;
+"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;
 //# sourceMappingURL=ElButton.vue.cjs2.js.map

package/dist/ElButton.vue.cjs2.js.map CHANGED Viewed

	@@ -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"}

package/dist/ElButton.vue.esm2.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineComponent as m,ref as u,computed as y,openBlock as r,createElementBlock as o,normalizeClass as s,createBlock as f,createCommentVNode as p,createElementVNode as n,toDisplayString as v}from"vue";import g from"./ElIcon.vue.esm2.js";const z=["disabled","type","data-cy"],c={class:"font-semibold"},w={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,"cursor-wait":l.value,"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",w,[(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",c,v(e.label),1)],2))],10,z)}}});export{R as default,N as elButtonSizes,O as elButtonVariants};
+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};
 //# sourceMappingURL=ElButton.vue.esm2.js.map

package/dist/ElButton.vue.esm2.js.map CHANGED Viewed

	@@ -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"}

package/dist/forms/ElInputAutocomplete.vue.cjs2.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),D=require("./input.cjs.js"),N=require("../ElDropdown.vue.cjs2.js"),F=require("../ElInputChip.vue.cjs2.js"),T=require("../node_modules/@vueuse/core/index.cjs.js"),z=require("../ElSpinner.vue.cjs2.js"),L=require("./ElInputContainer.vue.cjs2.js"),K=require("../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.cjs.js"),O={class:"flex flex-col gap-1"},P={class:"flex items-center gap-1 px-2"},U=["disabled","validation","placeholder"],W={key:0,class:"text-xs font-normal text-error"},j=l.defineComponent({__name:"ElInputAutocomplete",props:{...D.withCommonElInputProps(),modelValue:{type:[Array,String],required:!1,default:void 0},placeholder:{type:String,default:"",required:!1},items:{type:Array,required:!1,default:()=>[]},selectedItems:{type:Array,default:()=>[]},labelSelectAll:{type:String,default:"Seleziona tutto"},labelDeselectAll:{type:String,default:"Deseleziona tutto"},focusOnMount:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},debounceTime:{type:Number,default:300,requied:!1},dataController:{type:Function,required:!1,default:void 0}},emits:["update:modelValue","item:click","update:selectedItems"],setup(p,{expose:w,emit:B}){const o=p,c=B,b=l.ref(!1),i=l.ref(!1),r=l.ref(o.modelValue),u=l.ref([]),n=l.ref(o.selectedItems),f=l.ref(),v=l.ref();l.onMounted(async()=>{if(o.dataController){const e=await g(r.value);u.value=(e==null?void 0:e.data)||[]}else u.value=o.items});const E=l.computed(()=>{var t;const e=(t=u.value)==null?void 0:t.slice(0,100).map((a,d)=>({...a,text:a.label||a.text,check:n.value.some(s=>s.text?s.text===a.text:s.label===a.label),onClick:()=>{var s;if(o.multiple){const I=n.value.findIndex(m=>m.text?m.text===a.text:m.label===a.label);I!==-1?n.value=n.value.filter((m,A)=>A!==I):n.value.push({...a,check:!0}),r.value="",v.value=void 0,(s=f.value)==null||s.focus(),c("update:selectedItems",n.value)}else r.value=a.text||a.label||a.value||"";c("update:modelValue",a.text||a.label||a.value||""),c("item:click",d)}}));return o.multiple&&e.unshift({text:n.value.length===u.value.length?o.labelDeselectAll:o.labelSelectAll,check:!1,onClick:()=>{var a;n.value.length===u.value.length?n.value=[]:n.value=u.value,(a=f.value)==null||a.focus(),c("update:selectedItems",n.value)}}),e}),y=T.useMemoize(async e=>{var t;return await((t=o.dataController)==null?void 0:t.call(o,e))}),g=K.useDebounceFn(y,o.debounceTime),_=()=>y.cache.clear(),S=async()=>{var t;r.value=void 0,u.value=o.items,n.value=o.selectedItems;const e=await((t=o.dataController)==null?void 0:t.call(o,r.value));u.value=(e==null?void 0:e.data)||[]},x=e=>{var t;((t=e.relatedTarget)==null?void 0:t.role)!=="option"&&(i.value?i.value=!1:i.value=!0)},q=({target:e})=>{e instanceof HTMLInputElement&&e.value.charAt(e.value.length-1)!==" "&&M(e.value)},k=(e,t)=>{n.value=n.value.filter(a=>a.text!==t.text),c("update:selectedItems",n.value)},M=async e=>{if(o.dataController){b.value=!0;const t=await g(e);i.value=!!t,b.value=!t,u.value=(t==null?void 0:t.data)||[]}else e?u.value=o.items.filter(t=>{var a;return(a=t.text)==null?void 0:a.toLowerCase().includes(e.toLowerCase())}):u.value=o.items;c("update:modelValue",e)},C=e=>{var t,a;if(!r.value)if(n.value.length>0&&!v.value){const d=n.value.length-1;v.value=n.value[d],(t=document.getElementById(d.toString()))==null||t.focus()}else k(e,v.value),v.value=void 0,(a=f.value)==null||a.focus()},h=e=>{const t=e.currentTarget;t.scrollLeft+=e.deltaY,e.preventDefault()},V=e=>{o.multiple?i.value=!0:i.value=e};return w({resetAllAndFetch:S,clearCache:_}),(e,t)=>(l.openBlock(),l.createElementBlock("div",O,[l.createElementVNode("label",{class:l.normalizeClass(["text-sm font-semibold",{"text-error":e.errorMessage,"text-neutral-darker":!e.errorMessage}])},l.toDisplayString(e.label),3),l.createVNode(N.default,{items:E.value,multiple:p.multiple,"is-open":i.value,disabled:e.disabled,"onUpdate:isOpen":t[7]||(t[7]=a=>V(a))},{anchor:l.withCtx(()=>[l.createVNode(L.default,{color:e.color,name:e.name},{default:l.withCtx(()=>[l.createElementVNode("div",P,[p.multiple?(l.openBlock(),l.createElementBlock("div",{key:0,name:"scrollable-container",class:"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing",onWheel:h},[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(n.value,(a,d)=>(l.openBlock(),l.createBlock(F.default,{id:d,key:d,text:a.text||a.label||"",class:"border flex-shrink-0 rounded-md px-3 py-2",onClick:s=>k(s,a),onKeydown:t[0]||(t[0]=l.withKeys(s=>C(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):l.createCommentVNode("",!0),l.withDirectives(l.createElementVNode("input",{ref_key:"inputField",ref:f,"onUpdate:modelValue":t[1]||(t[1]=a=>r.value=a),disabled:e.disabled,type:"text",class:l.normalizeClass(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":e.disabled}]),validation:e.validation,placeholder:p.placeholder,onInput:t[2]||(t[2]=a=>q(a)),onKeydown:t[3]||(t[3]=l.withKeys(a=>C(a),["backspace"])),onClick:t[4]||(t[4]=l.withModifiers(a=>x(a),["prevent"])),onBlur:t[5]||(t[5]=l.withModifiers(a=>x(a),["prevent"])),onWheel:t[6]||(t[6]=a=>h(a))},null,42,U),[[l.vModelText,r.value]]),b.value?(l.openBlock(),l.createBlock(z.default,{key:1,class:"mx-2",size:"normal"})):l.createCommentVNode("",!0)])]),_:1},8,["color","name"])]),_:1},8,["items","multiple","is-open","disabled"]),e.errorMessage?(l.openBlock(),l.createElementBlock("label",W,l.toDisplayString(e.errorMessage),1)):l.createCommentVNode("",!0)]))}});exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),D=require("./input.cjs.js"),N=require("../ElDropdown.vue.cjs2.js"),F=require("../ElInputChip.vue.cjs2.js"),T=require("../node_modules/@vueuse/core/index.cjs.js"),z=require("../ElSpinner.vue.cjs2.js"),L=require("./ElInputContainer.vue.cjs2.js"),K=require("../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.cjs.js"),O={class:"flex flex-col gap-1"},P={class:"flex items-center gap-1 px-2"},U=["disabled","validation","placeholder"],W={key:0,class:"text-xs font-normal text-error"},j=l.defineComponent({__name:"ElInputAutocomplete",props:{...D.withCommonElInputProps(),modelValue:{type:[Array,String],required:!1,default:void 0},placeholder:{type:String,default:"",required:!1},items:{type:Array,required:!1,default:()=>[]},selectedItems:{type:Array,default:()=>[]},labelSelectAll:{type:String,default:"Seleziona tutto"},labelDeselectAll:{type:String,default:"Deseleziona tutto"},focusOnMount:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},debounceTime:{type:Number,default:300,requied:!1},dataController:{type:Function,required:!1,default:void 0}},emits:["update:modelValue","item:click","update:selectedItems"],setup(p,{expose:w,emit:B}){const o=p,c=B,b=l.ref(!1),i=l.ref(!1),r=l.ref(o.modelValue),u=l.ref([]),n=l.ref(o.selectedItems),f=l.ref(),v=l.ref();l.onMounted(async()=>{if(o.dataController){const e=await g(r.value);u.value=(e==null?void 0:e.data)||[]}else u.value=o.items});const E=l.computed(()=>{var t;const e=(t=u.value)==null?void 0:t.map((a,d)=>({...a,text:a.label||a.text,check:n.value.some(s=>s.text?s.text===a.text:s.label===a.label),onClick:()=>{var s;if(o.multiple){const I=n.value.findIndex(m=>m.text?m.text===a.text:m.label===a.label);I!==-1?n.value=n.value.filter((m,A)=>A!==I):n.value.push({...a,check:!0}),r.value="",v.value=void 0,(s=f.value)==null||s.focus(),c("update:selectedItems",n.value)}else r.value=a.text||a.label||a.value||"";c("update:modelValue",a.text||a.label||a.value||""),c("item:click",d)}}));return o.multiple&&e.unshift({text:n.value.length===u.value.length?o.labelDeselectAll:o.labelSelectAll,check:!1,onClick:()=>{var a;n.value.length===u.value.length?n.value=[]:n.value=u.value,(a=f.value)==null||a.focus(),c("update:selectedItems",n.value)}}),e}),y=T.useMemoize(async e=>{var t;return await((t=o.dataController)==null?void 0:t.call(o,e))}),g=K.useDebounceFn(y,o.debounceTime),_=()=>y.cache.clear(),S=async()=>{var t;r.value=void 0,u.value=o.items,n.value=o.selectedItems;const e=await((t=o.dataController)==null?void 0:t.call(o,r.value));u.value=(e==null?void 0:e.data)||[]},x=e=>{var t;((t=e.relatedTarget)==null?void 0:t.role)!=="option"&&(i.value?i.value=!1:i.value=!0)},q=({target:e})=>{e instanceof HTMLInputElement&&e.value.charAt(e.value.length-1)!==" "&&M(e.value)},k=(e,t)=>{n.value=n.value.filter(a=>a.text!==t.text),c("update:selectedItems",n.value)},M=async e=>{if(o.dataController){b.value=!0;const t=await g(e);i.value=!!t,b.value=!t,u.value=(t==null?void 0:t.data)||[]}else e?u.value=o.items.filter(t=>{var a;return(a=t.text)==null?void 0:a.toLowerCase().includes(e.toLowerCase())}):u.value=o.items;c("update:modelValue",e)},C=e=>{var t,a;if(!r.value)if(n.value.length>0&&!v.value){const d=n.value.length-1;v.value=n.value[d],(t=document.getElementById(d.toString()))==null||t.focus()}else k(e,v.value),v.value=void 0,(a=f.value)==null||a.focus()},h=e=>{const t=e.currentTarget;t.scrollLeft+=e.deltaY,e.preventDefault()},V=e=>{o.multiple?i.value=!0:i.value=e};return w({resetAllAndFetch:S,clearCache:_}),(e,t)=>(l.openBlock(),l.createElementBlock("div",O,[l.createElementVNode("label",{class:l.normalizeClass(["text-sm font-semibold",{"text-error":e.errorMessage,"text-neutral-darker":!e.errorMessage}])},l.toDisplayString(e.label),3),l.createVNode(N.default,{items:E.value,multiple:p.multiple,"is-open":i.value,disabled:e.disabled,"onUpdate:isOpen":t[7]||(t[7]=a=>V(a))},{anchor:l.withCtx(()=>[l.createVNode(L.default,{color:e.color,name:e.name},{default:l.withCtx(()=>[l.createElementVNode("div",P,[p.multiple?(l.openBlock(),l.createElementBlock("div",{key:0,name:"scrollable-container",class:"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing",onWheel:h},[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(n.value,(a,d)=>(l.openBlock(),l.createBlock(F.default,{id:d,key:d,text:a.text||a.label||"",class:"border flex-shrink-0 rounded-md px-3 py-2",onClick:s=>k(s,a),onKeydown:t[0]||(t[0]=l.withKeys(s=>C(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):l.createCommentVNode("",!0),l.withDirectives(l.createElementVNode("input",{ref_key:"inputField",ref:f,"onUpdate:modelValue":t[1]||(t[1]=a=>r.value=a),disabled:e.disabled,type:"text",class:l.normalizeClass(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":e.disabled}]),validation:e.validation,placeholder:p.placeholder,onInput:t[2]||(t[2]=a=>q(a)),onKeydown:t[3]||(t[3]=l.withKeys(a=>C(a),["backspace"])),onClick:t[4]||(t[4]=l.withModifiers(a=>x(a),["prevent"])),onBlur:t[5]||(t[5]=l.withModifiers(a=>x(a),["prevent"])),onWheel:t[6]||(t[6]=a=>h(a))},null,42,U),[[l.vModelText,r.value]]),b.value?(l.openBlock(),l.createBlock(z.default,{key:1,class:"mx-2",size:"normal"})):l.createCommentVNode("",!0)])]),_:1},8,["color","name"])]),_:1},8,["items","multiple","is-open","disabled"]),e.errorMessage?(l.openBlock(),l.createElementBlock("label",W,l.toDisplayString(e.errorMessage),1)):l.createCommentVNode("",!0)]))}});exports.default=j;
 //# sourceMappingURL=ElInputAutocomplete.vue.cjs2.js.map

package/dist/forms/ElInputAutocomplete.vue.cjs2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ElInputAutocomplete.vue.cjs2.js","sources":["../../src/forms/ElInputAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type InputAutocompleteItemsDataControl = string;\nexport type ElInputAutocompleteItems = Array<DropdownItem & { label?: string; value?: string }>;\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport { TextualValueType, withCommonElInputProps } from './input';\nimport ElDropdown, { DropdownItem } from '@/ElDropdown.vue';\nimport ElInputChip from '@/ElInputChip.vue';\nimport { useDebounceFn, useMemoize } from '@vueuse/core';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElInputContainer from './ElInputContainer.vue';\n\nconst props = defineProps({\n ...withCommonElInputProps(),\n modelValue: {\n type: [Array, String] as PropType<TextualValueType>,\n required: false,\n default: undefined,\n },\n placeholder: {\n type: String,\n default: '',\n required: false,\n },\n items: {\n type: Array as PropType<ElInputAutocompleteItems>,\n required: false,\n default: () => [],\n },\n selectedItems: {\n type: Array as PropType<ElInputAutocompleteItems>,\n default: () => [],\n },\n labelSelectAll: {\n type: String,\n default: 'Seleziona tutto',\n },\n labelDeselectAll: {\n type: String,\n default: 'Deseleziona tutto',\n },\n focusOnMount: {\n type: Boolean,\n default: false,\n },\n multiple: {\n type: Boolean as PropType<InstanceType<typeof ElDropdown>['multiple']>,\n default: false,\n },\n debounceTime: {\n type: Number,\n default: 300,\n requied: false,\n },\n dataController: {\n type: Function as PropType<(args: TextualValueType) => Promise<{ data: ElInputAutocompleteItems }>>,\n required: false,\n default: undefined,\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: TextualValueType): void;\n (event: 'item:click', itemIndex: number): void;\n (event: 'update:selectedItems', value: ElInputAutocompleteItems): void;\n}>();\n\nconst isLoading = ref(false);\nconst isOpen = ref(false);\nconst query = ref<TextualValueType>(props.modelValue);\nconst filteredItems = ref<ElInputAutocompleteItems>([]);\nconst selectedItems = ref<ElInputAutocompleteItems>(props.selectedItems);\nconst inputField = ref<HTMLInputElement>();\nconst lastSelectedItem = ref();\n\nonMounted(async () => {\n if (props.dataController) {\n const response = await debounceDataController(query.value);\n filteredItems.value = response?.data \|\| [];\n } else {\n filteredItems.value = props.items;\n }\n});\n\nconst items = computed(() => {\n const mappedItems = filteredItems.value?.slice(0, 100).map((item, index) => ({\n ...item,\n text: item.label \|\| item.text,\n check: selectedItems.value.some(selectedItem =>\n selectedItem.text ? selectedItem.text === item.text : selectedItem.label === item.label,\n ),\n onClick: () => {\n if (props.multiple) {\n // If the item is already selected, remove it from the selectedItems array\n const clickedItemIndex = selectedItems.value.findIndex(currentItem =>\n currentItem.text ? currentItem.text === item.text : currentItem.label === item.label,\n );\n\n if (clickedItemIndex !== -1) {\n selectedItems.value = selectedItems.value.filter((_, index) => index !== clickedItemIndex);\n } else {\n selectedItems.value.push({ ...item, check: true });\n }\n\n // Reset query to empty string to clear the input\n query.value = '';\n // Reset last selected item because the selectedItems array is updated\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n\n emit('update:selectedItems', selectedItems.value);\n } else {\n query.value = item.text \|\| item.label \|\| item.value \|\| '';\n }\n\n emit('update:modelValue', item.text \|\| item.label \|\| item.value \|\| '');\n emit('item:click', index);\n },\n }));\n\n if (props.multiple) {\n mappedItems.unshift({\n text: selectedItems.value.length === filteredItems.value.length ? props.labelDeselectAll : props.labelSelectAll,\n check: false,\n onClick: () => {\n if (selectedItems.value.length === filteredItems.value.length) {\n selectedItems.value = [];\n } else {\n selectedItems.value = filteredItems.value;\n }\n\n inputField.value?.focus();\n emit('update:selectedItems', selectedItems.value);\n },\n });\n }\n\n return mappedItems;\n});\n\nconst debounceFunction = useMemoize(async (value: TextualValueType) => {\n return await props.dataController?.(value);\n});\n\nconst debounceDataController = useDebounceFn(debounceFunction, props.debounceTime);\nconst clearCache = () => debounceFunction.cache.clear();\n\nconst resetAllAndFetch = async () => {\n query.value = undefined;\n filteredItems.value = props.items;\n selectedItems.value = props.selectedItems;\n const response = await props.dataController?.(query.value);\n filteredItems.value = response?.data \|\| [];\n};\n\n/*\n Handle input click event necessary to open or close dropdown\n * @param e FocusEvent\n /\nconst onInputClick = (e: FocusEvent) => {\n if ((e.relatedTarget as HTMLElement)?.role !== 'option') {\n if (!isOpen.value) {\n isOpen.value = true;\n } else {\n isOpen.value = false;\n }\n }\n};\n\n/\n Handle input change event to update model value\n * @param event Event\n /\nconst onChangeEvent = ({ target }: Event) => {\n if (target instanceof HTMLInputElement) {\n if (target.value.charAt(target.value.length - 1) !== ' ') {\n updateModel(target.value);\n }\n }\n};\n\n/\n Handle remove item from selected items by clicking on the item\n * @param _event Event\n * @param item DropdownItem\n /\nconst onRemoveItem = (_event: Event, item: DropdownItem) => {\n selectedItems.value = selectedItems.value.filter(currentItem => currentItem.text !== item.text);\n emit('update:selectedItems', selectedItems.value);\n};\n\nconst updateModel = async (value: TextualValueType) => {\n if (props.dataController) {\n isLoading.value = true;\n const response = await debounceDataController(value);\n isOpen.value = !!response;\n isLoading.value = !response;\n filteredItems.value = response?.data \|\| [];\n } else {\n if (value) {\n filteredItems.value = props.items.filter(result => result.text?.toLowerCase().includes(value.toLowerCase()));\n } else {\n filteredItems.value = props.items;\n }\n }\n\n emit('update:modelValue', value);\n};\n\n/\n Handle backspace key press to remove last selected item when multiple is true\n param e KeyboardEvent\n /\nconst onDeleteKeyPress = (e: KeyboardEvent) => {\n if (!query.value) {\n if (selectedItems.value.length > 0 && !lastSelectedItem.value) {\n const lastItemIndex = selectedItems.value.length - 1;\n lastSelectedItem.value = selectedItems.value[lastItemIndex];\n document.getElementById(lastItemIndex.toString())?.focus();\n } else {\n onRemoveItem(e, lastSelectedItem.value);\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n }\n }\n};\n\n/*\n Handle wheel scroll event to scroll the listbox horizontally\n param event WheelEvent\n /\nconst onWheelScroll = (event: WheelEvent) => {\n const container = event.currentTarget as HTMLElement;\n container.scrollLeft += event.deltaY;\n // Prevent vertical scrolling of the page\n event.preventDefault();\n};\n\n/*\n Handle update isOpen event to open the dropdown when multiple is true\n param event boolean\n /\nconst onUpdateIsOpen = (event: boolean) => {\n if (props.multiple) {\n isOpen.value = true;\n } else {\n isOpen.value = event;\n }\n};\n\ndefineExpose({\n resetAllAndFetch,\n clearCache,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col gap-1\">\n <label class=\"text-sm font-semibold\" :class=\"{ 'text-error': errorMessage, 'text-neutral-darker': !errorMessage }\">\n {{ label }}\n </label>\n <ElDropdown :items=\"items\" :multiple=\"multiple\" :is-open=\"isOpen\" :disabled=\"disabled\" @update:is-open=\"onUpdateIsOpen($event)\">\n <template #anchor>\n <ElInputContainer :color=\"color\" :name=\"name\">\n <template #default>\n <div class=\"flex items-center gap-1 px-2\">\n <div\n v-if=\"multiple\"\n name=\"scrollable-container\"\n class=\"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing\"\n @wheel=\"onWheelScroll\"\n >\n <ElInputChip\n v-for=\"(item, index) in selectedItems\"\n :id=\"index\"\n :key=\"index\"\n :text=\"item.text \|\| item.label \|\| ''\"\n class=\"border flex-shrink-0 rounded-md px-3 py-2\"\n @click=\"onRemoveItem($event, item)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n />\n </div>\n\n <input\n ref=\"inputField\"\n v-model=\"query\"\n :disabled=\"disabled\"\n type=\"text\"\n class=\"border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0\"\n :class=\"{ 'cursor-not-allowed': disabled }\"\n :validation=\"validation\"\n :placeholder=\"placeholder\"\n @input=\"onChangeEvent($event)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n @click.prevent=\"onInputClick($event)\"\n @blur.prevent=\"onInputClick($event)\"\n @wheel=\"onWheelScroll($event)\"\n />\n\n <ElSpinner v-if=\"isLoading\" class=\"mx-2\" size=\"normal\" />\n </div>\n </template>\n </ElInputContainer>\n </template>\n </ElDropdown>\n <label v-if=\"errorMessage\" class=\"text-xs font-normal text-error\">{{ errorMessage }}</label>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","isLoading","ref","isOpen","query","filteredItems","selectedItems","inputField","lastSelectedItem","onMounted","response","debounceDataController","items","computed","mappedItems","_a","item","index","selectedItem","clickedItemIndex","currentItem","_","debounceFunction","useMemoize","value","useDebounceFn","clearCache","resetAllAndFetch","onInputClick","onChangeEvent","target","updateModel","onRemoveItem","_event","result","onDeleteKeyPress","lastItemIndex","_b","onWheelScroll","event","container","onUpdateIsOpen","__expose"],"mappings":"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"}
1	+ {"version":3,"file":"ElInputAutocomplete.vue.cjs2.js","sources":["../../src/forms/ElInputAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type InputAutocompleteItemsDataControl = string;\nexport type ElInputAutocompleteItems = Array<DropdownItem & { label?: string; value?: string }>;\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport { TextualValueType, withCommonElInputProps } from './input';\nimport ElDropdown, { DropdownItem } from '@/ElDropdown.vue';\nimport ElInputChip from '@/ElInputChip.vue';\nimport { useDebounceFn, useMemoize } from '@vueuse/core';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElInputContainer from './ElInputContainer.vue';\n\nconst props = defineProps({\n ...withCommonElInputProps(),\n modelValue: {\n type: [Array, String] as PropType<TextualValueType>,\n required: false,\n default: undefined,\n },\n placeholder: {\n type: String,\n default: '',\n required: false,\n },\n items: {\n type: Array as PropType<ElInputAutocompleteItems>,\n required: false,\n default: () => [],\n },\n selectedItems: {\n type: Array as PropType<ElInputAutocompleteItems>,\n default: () => [],\n },\n labelSelectAll: {\n type: String,\n default: 'Seleziona tutto',\n },\n labelDeselectAll: {\n type: String,\n default: 'Deseleziona tutto',\n },\n focusOnMount: {\n type: Boolean,\n default: false,\n },\n multiple: {\n type: Boolean as PropType<InstanceType<typeof ElDropdown>['multiple']>,\n default: false,\n },\n debounceTime: {\n type: Number,\n default: 300,\n requied: false,\n },\n dataController: {\n type: Function as PropType<(args: TextualValueType) => Promise<{ data: ElInputAutocompleteItems }>>,\n required: false,\n default: undefined,\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: TextualValueType): void;\n (event: 'item:click', itemIndex: number): void;\n (event: 'update:selectedItems', value: ElInputAutocompleteItems): void;\n}>();\n\nconst isLoading = ref(false);\nconst isOpen = ref(false);\nconst query = ref<TextualValueType>(props.modelValue);\nconst filteredItems = ref<ElInputAutocompleteItems>([]);\nconst selectedItems = ref<ElInputAutocompleteItems>(props.selectedItems);\nconst inputField = ref<HTMLInputElement>();\nconst lastSelectedItem = ref();\n\nonMounted(async () => {\n if (props.dataController) {\n const response = await debounceDataController(query.value);\n filteredItems.value = response?.data \|\| [];\n } else {\n filteredItems.value = props.items;\n }\n});\n\nconst items = computed(() => {\n const mappedItems = filteredItems.value?.map((item, index) => ({\n ...item,\n text: item.label \|\| item.text,\n check: selectedItems.value.some(selectedItem =>\n selectedItem.text ? selectedItem.text === item.text : selectedItem.label === item.label,\n ),\n onClick: () => {\n if (props.multiple) {\n // If the item is already selected, remove it from the selectedItems array\n const clickedItemIndex = selectedItems.value.findIndex(currentItem =>\n currentItem.text ? currentItem.text === item.text : currentItem.label === item.label,\n );\n\n if (clickedItemIndex !== -1) {\n selectedItems.value = selectedItems.value.filter((_, index) => index !== clickedItemIndex);\n } else {\n selectedItems.value.push({ ...item, check: true });\n }\n\n // Reset query to empty string to clear the input\n query.value = '';\n // Reset last selected item because the selectedItems array is updated\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n\n emit('update:selectedItems', selectedItems.value);\n } else {\n query.value = item.text \|\| item.label \|\| item.value \|\| '';\n }\n\n emit('update:modelValue', item.text \|\| item.label \|\| item.value \|\| '');\n emit('item:click', index);\n },\n }));\n\n if (props.multiple) {\n mappedItems.unshift({\n text: selectedItems.value.length === filteredItems.value.length ? props.labelDeselectAll : props.labelSelectAll,\n check: false,\n onClick: () => {\n if (selectedItems.value.length === filteredItems.value.length) {\n selectedItems.value = [];\n } else {\n selectedItems.value = filteredItems.value;\n }\n\n inputField.value?.focus();\n emit('update:selectedItems', selectedItems.value);\n },\n });\n }\n\n return mappedItems;\n});\n\nconst debounceFunction = useMemoize(async (value: TextualValueType) => {\n return await props.dataController?.(value);\n});\n\nconst debounceDataController = useDebounceFn(debounceFunction, props.debounceTime);\nconst clearCache = () => debounceFunction.cache.clear();\n\nconst resetAllAndFetch = async () => {\n query.value = undefined;\n filteredItems.value = props.items;\n selectedItems.value = props.selectedItems;\n const response = await props.dataController?.(query.value);\n filteredItems.value = response?.data \|\| [];\n};\n\n/*\n Handle input click event necessary to open or close dropdown\n * @param e FocusEvent\n /\nconst onInputClick = (e: FocusEvent) => {\n if ((e.relatedTarget as HTMLElement)?.role !== 'option') {\n if (!isOpen.value) {\n isOpen.value = true;\n } else {\n isOpen.value = false;\n }\n }\n};\n\n/\n Handle input change event to update model value\n * @param event Event\n /\nconst onChangeEvent = ({ target }: Event) => {\n if (target instanceof HTMLInputElement) {\n if (target.value.charAt(target.value.length - 1) !== ' ') {\n updateModel(target.value);\n }\n }\n};\n\n/\n Handle remove item from selected items by clicking on the item\n * @param _event Event\n * @param item DropdownItem\n /\nconst onRemoveItem = (_event: Event, item: DropdownItem) => {\n selectedItems.value = selectedItems.value.filter(currentItem => currentItem.text !== item.text);\n emit('update:selectedItems', selectedItems.value);\n};\n\nconst updateModel = async (value: TextualValueType) => {\n if (props.dataController) {\n isLoading.value = true;\n const response = await debounceDataController(value);\n isOpen.value = !!response;\n isLoading.value = !response;\n filteredItems.value = response?.data \|\| [];\n } else {\n if (value) {\n filteredItems.value = props.items.filter(result => result.text?.toLowerCase().includes(value.toLowerCase()));\n } else {\n filteredItems.value = props.items;\n }\n }\n\n emit('update:modelValue', value);\n};\n\n/\n Handle backspace key press to remove last selected item when multiple is true\n param e KeyboardEvent\n /\nconst onDeleteKeyPress = (e: KeyboardEvent) => {\n if (!query.value) {\n if (selectedItems.value.length > 0 && !lastSelectedItem.value) {\n const lastItemIndex = selectedItems.value.length - 1;\n lastSelectedItem.value = selectedItems.value[lastItemIndex];\n document.getElementById(lastItemIndex.toString())?.focus();\n } else {\n onRemoveItem(e, lastSelectedItem.value);\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n }\n }\n};\n\n/*\n Handle wheel scroll event to scroll the listbox horizontally\n param event WheelEvent\n /\nconst onWheelScroll = (event: WheelEvent) => {\n const container = event.currentTarget as HTMLElement;\n container.scrollLeft += event.deltaY;\n // Prevent vertical scrolling of the page\n event.preventDefault();\n};\n\n/*\n Handle update isOpen event to open the dropdown when multiple is true\n param event boolean\n /\nconst onUpdateIsOpen = (event: boolean) => {\n if (props.multiple) {\n isOpen.value = true;\n } else {\n isOpen.value = event;\n }\n};\n\ndefineExpose({\n resetAllAndFetch,\n clearCache,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col gap-1\">\n <label class=\"text-sm font-semibold\" :class=\"{ 'text-error': errorMessage, 'text-neutral-darker': !errorMessage }\">\n {{ label }}\n </label>\n <ElDropdown :items=\"items\" :multiple=\"multiple\" :is-open=\"isOpen\" :disabled=\"disabled\" @update:is-open=\"onUpdateIsOpen($event)\">\n <template #anchor>\n <ElInputContainer :color=\"color\" :name=\"name\">\n <template #default>\n <div class=\"flex items-center gap-1 px-2\">\n <div\n v-if=\"multiple\"\n name=\"scrollable-container\"\n class=\"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing\"\n @wheel=\"onWheelScroll\"\n >\n <ElInputChip\n v-for=\"(item, index) in selectedItems\"\n :id=\"index\"\n :key=\"index\"\n :text=\"item.text \|\| item.label \|\| ''\"\n class=\"border flex-shrink-0 rounded-md px-3 py-2\"\n @click=\"onRemoveItem($event, item)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n />\n </div>\n\n <input\n ref=\"inputField\"\n v-model=\"query\"\n :disabled=\"disabled\"\n type=\"text\"\n class=\"border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0\"\n :class=\"{ 'cursor-not-allowed': disabled }\"\n :validation=\"validation\"\n :placeholder=\"placeholder\"\n @input=\"onChangeEvent($event)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n @click.prevent=\"onInputClick($event)\"\n @blur.prevent=\"onInputClick($event)\"\n @wheel=\"onWheelScroll($event)\"\n />\n\n <ElSpinner v-if=\"isLoading\" class=\"mx-2\" size=\"normal\" />\n </div>\n </template>\n </ElInputContainer>\n </template>\n </ElDropdown>\n <label v-if=\"errorMessage\" class=\"text-xs font-normal text-error\">{{ errorMessage }}</label>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","isLoading","ref","isOpen","query","filteredItems","selectedItems","inputField","lastSelectedItem","onMounted","response","debounceDataController","items","computed","mappedItems","_a","item","index","selectedItem","clickedItemIndex","currentItem","_","debounceFunction","useMemoize","value","useDebounceFn","clearCache","resetAllAndFetch","onInputClick","onChangeEvent","target","updateModel","onRemoveItem","_event","result","onDeleteKeyPress","lastItemIndex","_b","onWheelScroll","event","container","onUpdateIsOpen","__expose"],"mappings":"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"}

package/dist/forms/ElInputAutocomplete.vue.esm2.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineComponent as H,ref as d,onMounted as R,computed as Y,openBlock as f,createElementBlock as x,createElementVNode as g,normalizeClass as D,toDisplayString as V,createVNode as B,withCtx as E,Fragment as j,renderList as G,createBlock as F,withKeys as q,createCommentVNode as k,withDirectives as J,withModifiers as L,vModelText as Q}from"vue";import{withCommonElInputProps as X}from"./input.esm.js";import Z from"../ElDropdown.vue.esm2.js";import _ from"../ElInputChip.vue.esm2.js";import{useMemoize as ee}from"../node_modules/@vueuse/core/index.esm.js";import le from"../ElSpinner.vue.esm2.js";import te from"./ElInputContainer.vue.esm2.js";import{useDebounceFn as ae}from"../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.esm.js";const oe={class:"flex flex-col gap-1"},ne={class:"flex items-center gap-1 px-2"},se=["disabled","validation","placeholder"],ue={key:0,class:"text-xs font-normal text-error"},be=H({__name:"ElInputAutocomplete",props:{...X(),modelValue:{type:[Array,String],required:!1,default:void 0},placeholder:{type:String,default:"",required:!1},items:{type:Array,required:!1,default:()=>[]},selectedItems:{type:Array,default:()=>[]},labelSelectAll:{type:String,default:"Seleziona tutto"},labelDeselectAll:{type:String,default:"Deseleziona tutto"},focusOnMount:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},debounceTime:{type:Number,default:300,requied:!1},dataController:{type:Function,required:!1,default:void 0}},emits:["update:modelValue","item:click","update:selectedItems"],setup(v,{expose:T,emit:z}){const a=v,c=z,y=d(!1),r=d(!1),u=d(a.modelValue),n=d([]),o=d(a.selectedItems),p=d(),m=d();R(async()=>{if(a.dataController){const e=await h(u.value);n.value=(e==null?void 0:e.data)||[]}else n.value=a.items});const K=Y(()=>{var l;const e=(l=n.value)==null?void 0:l.slice(0,100).map((t,i)=>({...t,text:t.label||t.text,check:o.value.some(s=>s.text?s.text===t.text:s.label===t.label),onClick:()=>{var s;if(a.multiple){const S=o.value.findIndex(b=>b.text?b.text===t.text:b.label===t.label);S!==-1?o.value=o.value.filter((b,P)=>P!==S):o.value.push({...t,check:!0}),u.value="",m.value=void 0,(s=p.value)==null||s.focus(),c("update:selectedItems",o.value)}else u.value=t.text||t.label||t.value||"";c("update:modelValue",t.text||t.label||t.value||""),c("item:click",i)}}));return a.multiple&&e.unshift({text:o.value.length===n.value.length?a.labelDeselectAll:a.labelSelectAll,check:!1,onClick:()=>{var t;o.value.length===n.value.length?o.value=[]:o.value=n.value,(t=p.value)==null||t.focus(),c("update:selectedItems",o.value)}}),e}),C=ee(async e=>{var l;return await((l=a.dataController)==null?void 0:l.call(a,e))}),h=ae(C,a.debounceTime),N=()=>C.cache.clear(),O=async()=>{var l;u.value=void 0,n.value=a.items,o.value=a.selectedItems;const e=await((l=a.dataController)==null?void 0:l.call(a,u.value));n.value=(e==null?void 0:e.data)||[]},I=e=>{var l;((l=e.relatedTarget)==null?void 0:l.role)!=="option"&&(r.value?r.value=!1:r.value=!0)},$=({target:e})=>{e instanceof HTMLInputElement&&e.value.charAt(e.value.length-1)!==" "&&U(e.value)},w=(e,l)=>{o.value=o.value.filter(t=>t.text!==l.text),c("update:selectedItems",o.value)},U=async e=>{if(a.dataController){y.value=!0;const l=await h(e);r.value=!!l,y.value=!l,n.value=(l==null?void 0:l.data)||[]}else e?n.value=a.items.filter(l=>{var t;return(t=l.text)==null?void 0:t.toLowerCase().includes(e.toLowerCase())}):n.value=a.items;c("update:modelValue",e)},A=e=>{var l,t;if(!u.value)if(o.value.length>0&&!m.value){const i=o.value.length-1;m.value=o.value[i],(l=document.getElementById(i.toString()))==null||l.focus()}else w(e,m.value),m.value=void 0,(t=p.value)==null||t.focus()},M=e=>{const l=e.currentTarget;l.scrollLeft+=e.deltaY,e.preventDefault()},W=e=>{a.multiple?r.value=!0:r.value=e};return T({resetAllAndFetch:O,clearCache:N}),(e,l)=>(f(),x("div",oe,[g("label",{class:D(["text-sm font-semibold",{"text-error":e.errorMessage,"text-neutral-darker":!e.errorMessage}])},V(e.label),3),B(Z,{items:K.value,multiple:v.multiple,"is-open":r.value,disabled:e.disabled,"onUpdate:isOpen":l[7]||(l[7]=t=>W(t))},{anchor:E(()=>[B(te,{color:e.color,name:e.name},{default:E(()=>[g("div",ne,[v.multiple?(f(),x("div",{key:0,name:"scrollable-container",class:"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing",onWheel:M},[(f(!0),x(j,null,G(o.value,(t,i)=>(f(),F(_,{id:i,key:i,text:t.text||t.label||"",class:"border flex-shrink-0 rounded-md px-3 py-2",onClick:s=>w(s,t),onKeydown:l[0]||(l[0]=q(s=>A(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):k("",!0),J(g("input",{ref_key:"inputField",ref:p,"onUpdate:modelValue":l[1]||(l[1]=t=>u.value=t),disabled:e.disabled,type:"text",class:D(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":e.disabled}]),validation:e.validation,placeholder:v.placeholder,onInput:l[2]||(l[2]=t=>$(t)),onKeydown:l[3]||(l[3]=q(t=>A(t),["backspace"])),onClick:l[4]||(l[4]=L(t=>I(t),["prevent"])),onBlur:l[5]||(l[5]=L(t=>I(t),["prevent"])),onWheel:l[6]||(l[6]=t=>M(t))},null,42,se),[[Q,u.value]]),y.value?(f(),F(le,{key:1,class:"mx-2",size:"normal"})):k("",!0)])]),_:1},8,["color","name"])]),_:1},8,["items","multiple","is-open","disabled"]),e.errorMessage?(f(),x("label",ue,V(e.errorMessage),1)):k("",!0)]))}});export{be as default};
+import{defineComponent as H,ref as d,onMounted as R,computed as Y,openBlock as f,createElementBlock as x,createElementVNode as g,normalizeClass as D,toDisplayString as V,createVNode as B,withCtx as E,Fragment as j,renderList as G,createBlock as F,withKeys as q,createCommentVNode as k,withDirectives as J,withModifiers as L,vModelText as Q}from"vue";import{withCommonElInputProps as X}from"./input.esm.js";import Z from"../ElDropdown.vue.esm2.js";import _ from"../ElInputChip.vue.esm2.js";import{useMemoize as ee}from"../node_modules/@vueuse/core/index.esm.js";import le from"../ElSpinner.vue.esm2.js";import te from"./ElInputContainer.vue.esm2.js";import{useDebounceFn as ae}from"../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.esm.js";const oe={class:"flex flex-col gap-1"},ne={class:"flex items-center gap-1 px-2"},se=["disabled","validation","placeholder"],ue={key:0,class:"text-xs font-normal text-error"},be=H({__name:"ElInputAutocomplete",props:{...X(),modelValue:{type:[Array,String],required:!1,default:void 0},placeholder:{type:String,default:"",required:!1},items:{type:Array,required:!1,default:()=>[]},selectedItems:{type:Array,default:()=>[]},labelSelectAll:{type:String,default:"Seleziona tutto"},labelDeselectAll:{type:String,default:"Deseleziona tutto"},focusOnMount:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},debounceTime:{type:Number,default:300,requied:!1},dataController:{type:Function,required:!1,default:void 0}},emits:["update:modelValue","item:click","update:selectedItems"],setup(v,{expose:T,emit:z}){const a=v,c=z,y=d(!1),r=d(!1),u=d(a.modelValue),n=d([]),o=d(a.selectedItems),p=d(),m=d();R(async()=>{if(a.dataController){const e=await h(u.value);n.value=(e==null?void 0:e.data)||[]}else n.value=a.items});const K=Y(()=>{var l;const e=(l=n.value)==null?void 0:l.map((t,i)=>({...t,text:t.label||t.text,check:o.value.some(s=>s.text?s.text===t.text:s.label===t.label),onClick:()=>{var s;if(a.multiple){const S=o.value.findIndex(b=>b.text?b.text===t.text:b.label===t.label);S!==-1?o.value=o.value.filter((b,P)=>P!==S):o.value.push({...t,check:!0}),u.value="",m.value=void 0,(s=p.value)==null||s.focus(),c("update:selectedItems",o.value)}else u.value=t.text||t.label||t.value||"";c("update:modelValue",t.text||t.label||t.value||""),c("item:click",i)}}));return a.multiple&&e.unshift({text:o.value.length===n.value.length?a.labelDeselectAll:a.labelSelectAll,check:!1,onClick:()=>{var t;o.value.length===n.value.length?o.value=[]:o.value=n.value,(t=p.value)==null||t.focus(),c("update:selectedItems",o.value)}}),e}),C=ee(async e=>{var l;return await((l=a.dataController)==null?void 0:l.call(a,e))}),h=ae(C,a.debounceTime),N=()=>C.cache.clear(),O=async()=>{var l;u.value=void 0,n.value=a.items,o.value=a.selectedItems;const e=await((l=a.dataController)==null?void 0:l.call(a,u.value));n.value=(e==null?void 0:e.data)||[]},I=e=>{var l;((l=e.relatedTarget)==null?void 0:l.role)!=="option"&&(r.value?r.value=!1:r.value=!0)},$=({target:e})=>{e instanceof HTMLInputElement&&e.value.charAt(e.value.length-1)!==" "&&U(e.value)},w=(e,l)=>{o.value=o.value.filter(t=>t.text!==l.text),c("update:selectedItems",o.value)},U=async e=>{if(a.dataController){y.value=!0;const l=await h(e);r.value=!!l,y.value=!l,n.value=(l==null?void 0:l.data)||[]}else e?n.value=a.items.filter(l=>{var t;return(t=l.text)==null?void 0:t.toLowerCase().includes(e.toLowerCase())}):n.value=a.items;c("update:modelValue",e)},A=e=>{var l,t;if(!u.value)if(o.value.length>0&&!m.value){const i=o.value.length-1;m.value=o.value[i],(l=document.getElementById(i.toString()))==null||l.focus()}else w(e,m.value),m.value=void 0,(t=p.value)==null||t.focus()},M=e=>{const l=e.currentTarget;l.scrollLeft+=e.deltaY,e.preventDefault()},W=e=>{a.multiple?r.value=!0:r.value=e};return T({resetAllAndFetch:O,clearCache:N}),(e,l)=>(f(),x("div",oe,[g("label",{class:D(["text-sm font-semibold",{"text-error":e.errorMessage,"text-neutral-darker":!e.errorMessage}])},V(e.label),3),B(Z,{items:K.value,multiple:v.multiple,"is-open":r.value,disabled:e.disabled,"onUpdate:isOpen":l[7]||(l[7]=t=>W(t))},{anchor:E(()=>[B(te,{color:e.color,name:e.name},{default:E(()=>[g("div",ne,[v.multiple?(f(),x("div",{key:0,name:"scrollable-container",class:"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing",onWheel:M},[(f(!0),x(j,null,G(o.value,(t,i)=>(f(),F(_,{id:i,key:i,text:t.text||t.label||"",class:"border flex-shrink-0 rounded-md px-3 py-2",onClick:s=>w(s,t),onKeydown:l[0]||(l[0]=q(s=>A(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):k("",!0),J(g("input",{ref_key:"inputField",ref:p,"onUpdate:modelValue":l[1]||(l[1]=t=>u.value=t),disabled:e.disabled,type:"text",class:D(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":e.disabled}]),validation:e.validation,placeholder:v.placeholder,onInput:l[2]||(l[2]=t=>$(t)),onKeydown:l[3]||(l[3]=q(t=>A(t),["backspace"])),onClick:l[4]||(l[4]=L(t=>I(t),["prevent"])),onBlur:l[5]||(l[5]=L(t=>I(t),["prevent"])),onWheel:l[6]||(l[6]=t=>M(t))},null,42,se),[[Q,u.value]]),y.value?(f(),F(le,{key:1,class:"mx-2",size:"normal"})):k("",!0)])]),_:1},8,["color","name"])]),_:1},8,["items","multiple","is-open","disabled"]),e.errorMessage?(f(),x("label",ue,V(e.errorMessage),1)):k("",!0)]))}});export{be as default};
 //# sourceMappingURL=ElInputAutocomplete.vue.esm2.js.map

package/dist/forms/ElInputAutocomplete.vue.esm2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ElInputAutocomplete.vue.esm2.js","sources":["../../src/forms/ElInputAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type InputAutocompleteItemsDataControl = string;\nexport type ElInputAutocompleteItems = Array<DropdownItem & { label?: string; value?: string }>;\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport { TextualValueType, withCommonElInputProps } from './input';\nimport ElDropdown, { DropdownItem } from '@/ElDropdown.vue';\nimport ElInputChip from '@/ElInputChip.vue';\nimport { useDebounceFn, useMemoize } from '@vueuse/core';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElInputContainer from './ElInputContainer.vue';\n\nconst props = defineProps({\n ...withCommonElInputProps(),\n modelValue: {\n type: [Array, String] as PropType<TextualValueType>,\n required: false,\n default: undefined,\n },\n placeholder: {\n type: String,\n default: '',\n required: false,\n },\n items: {\n type: Array as PropType<ElInputAutocompleteItems>,\n required: false,\n default: () => [],\n },\n selectedItems: {\n type: Array as PropType<ElInputAutocompleteItems>,\n default: () => [],\n },\n labelSelectAll: {\n type: String,\n default: 'Seleziona tutto',\n },\n labelDeselectAll: {\n type: String,\n default: 'Deseleziona tutto',\n },\n focusOnMount: {\n type: Boolean,\n default: false,\n },\n multiple: {\n type: Boolean as PropType<InstanceType<typeof ElDropdown>['multiple']>,\n default: false,\n },\n debounceTime: {\n type: Number,\n default: 300,\n requied: false,\n },\n dataController: {\n type: Function as PropType<(args: TextualValueType) => Promise<{ data: ElInputAutocompleteItems }>>,\n required: false,\n default: undefined,\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: TextualValueType): void;\n (event: 'item:click', itemIndex: number): void;\n (event: 'update:selectedItems', value: ElInputAutocompleteItems): void;\n}>();\n\nconst isLoading = ref(false);\nconst isOpen = ref(false);\nconst query = ref<TextualValueType>(props.modelValue);\nconst filteredItems = ref<ElInputAutocompleteItems>([]);\nconst selectedItems = ref<ElInputAutocompleteItems>(props.selectedItems);\nconst inputField = ref<HTMLInputElement>();\nconst lastSelectedItem = ref();\n\nonMounted(async () => {\n if (props.dataController) {\n const response = await debounceDataController(query.value);\n filteredItems.value = response?.data \|\| [];\n } else {\n filteredItems.value = props.items;\n }\n});\n\nconst items = computed(() => {\n const mappedItems = filteredItems.value?.slice(0, 100).map((item, index) => ({\n ...item,\n text: item.label \|\| item.text,\n check: selectedItems.value.some(selectedItem =>\n selectedItem.text ? selectedItem.text === item.text : selectedItem.label === item.label,\n ),\n onClick: () => {\n if (props.multiple) {\n // If the item is already selected, remove it from the selectedItems array\n const clickedItemIndex = selectedItems.value.findIndex(currentItem =>\n currentItem.text ? currentItem.text === item.text : currentItem.label === item.label,\n );\n\n if (clickedItemIndex !== -1) {\n selectedItems.value = selectedItems.value.filter((_, index) => index !== clickedItemIndex);\n } else {\n selectedItems.value.push({ ...item, check: true });\n }\n\n // Reset query to empty string to clear the input\n query.value = '';\n // Reset last selected item because the selectedItems array is updated\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n\n emit('update:selectedItems', selectedItems.value);\n } else {\n query.value = item.text \|\| item.label \|\| item.value \|\| '';\n }\n\n emit('update:modelValue', item.text \|\| item.label \|\| item.value \|\| '');\n emit('item:click', index);\n },\n }));\n\n if (props.multiple) {\n mappedItems.unshift({\n text: selectedItems.value.length === filteredItems.value.length ? props.labelDeselectAll : props.labelSelectAll,\n check: false,\n onClick: () => {\n if (selectedItems.value.length === filteredItems.value.length) {\n selectedItems.value = [];\n } else {\n selectedItems.value = filteredItems.value;\n }\n\n inputField.value?.focus();\n emit('update:selectedItems', selectedItems.value);\n },\n });\n }\n\n return mappedItems;\n});\n\nconst debounceFunction = useMemoize(async (value: TextualValueType) => {\n return await props.dataController?.(value);\n});\n\nconst debounceDataController = useDebounceFn(debounceFunction, props.debounceTime);\nconst clearCache = () => debounceFunction.cache.clear();\n\nconst resetAllAndFetch = async () => {\n query.value = undefined;\n filteredItems.value = props.items;\n selectedItems.value = props.selectedItems;\n const response = await props.dataController?.(query.value);\n filteredItems.value = response?.data \|\| [];\n};\n\n/*\n Handle input click event necessary to open or close dropdown\n * @param e FocusEvent\n /\nconst onInputClick = (e: FocusEvent) => {\n if ((e.relatedTarget as HTMLElement)?.role !== 'option') {\n if (!isOpen.value) {\n isOpen.value = true;\n } else {\n isOpen.value = false;\n }\n }\n};\n\n/\n Handle input change event to update model value\n * @param event Event\n /\nconst onChangeEvent = ({ target }: Event) => {\n if (target instanceof HTMLInputElement) {\n if (target.value.charAt(target.value.length - 1) !== ' ') {\n updateModel(target.value);\n }\n }\n};\n\n/\n Handle remove item from selected items by clicking on the item\n * @param _event Event\n * @param item DropdownItem\n /\nconst onRemoveItem = (_event: Event, item: DropdownItem) => {\n selectedItems.value = selectedItems.value.filter(currentItem => currentItem.text !== item.text);\n emit('update:selectedItems', selectedItems.value);\n};\n\nconst updateModel = async (value: TextualValueType) => {\n if (props.dataController) {\n isLoading.value = true;\n const response = await debounceDataController(value);\n isOpen.value = !!response;\n isLoading.value = !response;\n filteredItems.value = response?.data \|\| [];\n } else {\n if (value) {\n filteredItems.value = props.items.filter(result => result.text?.toLowerCase().includes(value.toLowerCase()));\n } else {\n filteredItems.value = props.items;\n }\n }\n\n emit('update:modelValue', value);\n};\n\n/\n Handle backspace key press to remove last selected item when multiple is true\n param e KeyboardEvent\n /\nconst onDeleteKeyPress = (e: KeyboardEvent) => {\n if (!query.value) {\n if (selectedItems.value.length > 0 && !lastSelectedItem.value) {\n const lastItemIndex = selectedItems.value.length - 1;\n lastSelectedItem.value = selectedItems.value[lastItemIndex];\n document.getElementById(lastItemIndex.toString())?.focus();\n } else {\n onRemoveItem(e, lastSelectedItem.value);\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n }\n }\n};\n\n/*\n Handle wheel scroll event to scroll the listbox horizontally\n param event WheelEvent\n /\nconst onWheelScroll = (event: WheelEvent) => {\n const container = event.currentTarget as HTMLElement;\n container.scrollLeft += event.deltaY;\n // Prevent vertical scrolling of the page\n event.preventDefault();\n};\n\n/*\n Handle update isOpen event to open the dropdown when multiple is true\n param event boolean\n /\nconst onUpdateIsOpen = (event: boolean) => {\n if (props.multiple) {\n isOpen.value = true;\n } else {\n isOpen.value = event;\n }\n};\n\ndefineExpose({\n resetAllAndFetch,\n clearCache,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col gap-1\">\n <label class=\"text-sm font-semibold\" :class=\"{ 'text-error': errorMessage, 'text-neutral-darker': !errorMessage }\">\n {{ label }}\n </label>\n <ElDropdown :items=\"items\" :multiple=\"multiple\" :is-open=\"isOpen\" :disabled=\"disabled\" @update:is-open=\"onUpdateIsOpen($event)\">\n <template #anchor>\n <ElInputContainer :color=\"color\" :name=\"name\">\n <template #default>\n <div class=\"flex items-center gap-1 px-2\">\n <div\n v-if=\"multiple\"\n name=\"scrollable-container\"\n class=\"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing\"\n @wheel=\"onWheelScroll\"\n >\n <ElInputChip\n v-for=\"(item, index) in selectedItems\"\n :id=\"index\"\n :key=\"index\"\n :text=\"item.text \|\| item.label \|\| ''\"\n class=\"border flex-shrink-0 rounded-md px-3 py-2\"\n @click=\"onRemoveItem($event, item)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n />\n </div>\n\n <input\n ref=\"inputField\"\n v-model=\"query\"\n :disabled=\"disabled\"\n type=\"text\"\n class=\"border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0\"\n :class=\"{ 'cursor-not-allowed': disabled }\"\n :validation=\"validation\"\n :placeholder=\"placeholder\"\n @input=\"onChangeEvent($event)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n @click.prevent=\"onInputClick($event)\"\n @blur.prevent=\"onInputClick($event)\"\n @wheel=\"onWheelScroll($event)\"\n />\n\n <ElSpinner v-if=\"isLoading\" class=\"mx-2\" size=\"normal\" />\n </div>\n </template>\n </ElInputContainer>\n </template>\n </ElDropdown>\n <label v-if=\"errorMessage\" class=\"text-xs font-normal text-error\">{{ errorMessage }}</label>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","isLoading","ref","isOpen","query","filteredItems","selectedItems","inputField","lastSelectedItem","onMounted","response","debounceDataController","items","computed","mappedItems","_a","item","index","selectedItem","clickedItemIndex","currentItem","_","debounceFunction","useMemoize","value","useDebounceFn","clearCache","resetAllAndFetch","onInputClick","onChangeEvent","target","updateModel","onRemoveItem","_event","result","onDeleteKeyPress","lastItemIndex","_b","onWheelScroll","event","container","onUpdateIsOpen","__expose"],"mappings":"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"}
1	+ {"version":3,"file":"ElInputAutocomplete.vue.esm2.js","sources":["../../src/forms/ElInputAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type InputAutocompleteItemsDataControl = string;\nexport type ElInputAutocompleteItems = Array<DropdownItem & { label?: string; value?: string }>;\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport { TextualValueType, withCommonElInputProps } from './input';\nimport ElDropdown, { DropdownItem } from '@/ElDropdown.vue';\nimport ElInputChip from '@/ElInputChip.vue';\nimport { useDebounceFn, useMemoize } from '@vueuse/core';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElInputContainer from './ElInputContainer.vue';\n\nconst props = defineProps({\n ...withCommonElInputProps(),\n modelValue: {\n type: [Array, String] as PropType<TextualValueType>,\n required: false,\n default: undefined,\n },\n placeholder: {\n type: String,\n default: '',\n required: false,\n },\n items: {\n type: Array as PropType<ElInputAutocompleteItems>,\n required: false,\n default: () => [],\n },\n selectedItems: {\n type: Array as PropType<ElInputAutocompleteItems>,\n default: () => [],\n },\n labelSelectAll: {\n type: String,\n default: 'Seleziona tutto',\n },\n labelDeselectAll: {\n type: String,\n default: 'Deseleziona tutto',\n },\n focusOnMount: {\n type: Boolean,\n default: false,\n },\n multiple: {\n type: Boolean as PropType<InstanceType<typeof ElDropdown>['multiple']>,\n default: false,\n },\n debounceTime: {\n type: Number,\n default: 300,\n requied: false,\n },\n dataController: {\n type: Function as PropType<(args: TextualValueType) => Promise<{ data: ElInputAutocompleteItems }>>,\n required: false,\n default: undefined,\n },\n});\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: TextualValueType): void;\n (event: 'item:click', itemIndex: number): void;\n (event: 'update:selectedItems', value: ElInputAutocompleteItems): void;\n}>();\n\nconst isLoading = ref(false);\nconst isOpen = ref(false);\nconst query = ref<TextualValueType>(props.modelValue);\nconst filteredItems = ref<ElInputAutocompleteItems>([]);\nconst selectedItems = ref<ElInputAutocompleteItems>(props.selectedItems);\nconst inputField = ref<HTMLInputElement>();\nconst lastSelectedItem = ref();\n\nonMounted(async () => {\n if (props.dataController) {\n const response = await debounceDataController(query.value);\n filteredItems.value = response?.data \|\| [];\n } else {\n filteredItems.value = props.items;\n }\n});\n\nconst items = computed(() => {\n const mappedItems = filteredItems.value?.map((item, index) => ({\n ...item,\n text: item.label \|\| item.text,\n check: selectedItems.value.some(selectedItem =>\n selectedItem.text ? selectedItem.text === item.text : selectedItem.label === item.label,\n ),\n onClick: () => {\n if (props.multiple) {\n // If the item is already selected, remove it from the selectedItems array\n const clickedItemIndex = selectedItems.value.findIndex(currentItem =>\n currentItem.text ? currentItem.text === item.text : currentItem.label === item.label,\n );\n\n if (clickedItemIndex !== -1) {\n selectedItems.value = selectedItems.value.filter((_, index) => index !== clickedItemIndex);\n } else {\n selectedItems.value.push({ ...item, check: true });\n }\n\n // Reset query to empty string to clear the input\n query.value = '';\n // Reset last selected item because the selectedItems array is updated\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n\n emit('update:selectedItems', selectedItems.value);\n } else {\n query.value = item.text \|\| item.label \|\| item.value \|\| '';\n }\n\n emit('update:modelValue', item.text \|\| item.label \|\| item.value \|\| '');\n emit('item:click', index);\n },\n }));\n\n if (props.multiple) {\n mappedItems.unshift({\n text: selectedItems.value.length === filteredItems.value.length ? props.labelDeselectAll : props.labelSelectAll,\n check: false,\n onClick: () => {\n if (selectedItems.value.length === filteredItems.value.length) {\n selectedItems.value = [];\n } else {\n selectedItems.value = filteredItems.value;\n }\n\n inputField.value?.focus();\n emit('update:selectedItems', selectedItems.value);\n },\n });\n }\n\n return mappedItems;\n});\n\nconst debounceFunction = useMemoize(async (value: TextualValueType) => {\n return await props.dataController?.(value);\n});\n\nconst debounceDataController = useDebounceFn(debounceFunction, props.debounceTime);\nconst clearCache = () => debounceFunction.cache.clear();\n\nconst resetAllAndFetch = async () => {\n query.value = undefined;\n filteredItems.value = props.items;\n selectedItems.value = props.selectedItems;\n const response = await props.dataController?.(query.value);\n filteredItems.value = response?.data \|\| [];\n};\n\n/*\n Handle input click event necessary to open or close dropdown\n * @param e FocusEvent\n /\nconst onInputClick = (e: FocusEvent) => {\n if ((e.relatedTarget as HTMLElement)?.role !== 'option') {\n if (!isOpen.value) {\n isOpen.value = true;\n } else {\n isOpen.value = false;\n }\n }\n};\n\n/\n Handle input change event to update model value\n * @param event Event\n /\nconst onChangeEvent = ({ target }: Event) => {\n if (target instanceof HTMLInputElement) {\n if (target.value.charAt(target.value.length - 1) !== ' ') {\n updateModel(target.value);\n }\n }\n};\n\n/\n Handle remove item from selected items by clicking on the item\n * @param _event Event\n * @param item DropdownItem\n /\nconst onRemoveItem = (_event: Event, item: DropdownItem) => {\n selectedItems.value = selectedItems.value.filter(currentItem => currentItem.text !== item.text);\n emit('update:selectedItems', selectedItems.value);\n};\n\nconst updateModel = async (value: TextualValueType) => {\n if (props.dataController) {\n isLoading.value = true;\n const response = await debounceDataController(value);\n isOpen.value = !!response;\n isLoading.value = !response;\n filteredItems.value = response?.data \|\| [];\n } else {\n if (value) {\n filteredItems.value = props.items.filter(result => result.text?.toLowerCase().includes(value.toLowerCase()));\n } else {\n filteredItems.value = props.items;\n }\n }\n\n emit('update:modelValue', value);\n};\n\n/\n Handle backspace key press to remove last selected item when multiple is true\n param e KeyboardEvent\n /\nconst onDeleteKeyPress = (e: KeyboardEvent) => {\n if (!query.value) {\n if (selectedItems.value.length > 0 && !lastSelectedItem.value) {\n const lastItemIndex = selectedItems.value.length - 1;\n lastSelectedItem.value = selectedItems.value[lastItemIndex];\n document.getElementById(lastItemIndex.toString())?.focus();\n } else {\n onRemoveItem(e, lastSelectedItem.value);\n lastSelectedItem.value = undefined;\n inputField.value?.focus();\n }\n }\n};\n\n/*\n Handle wheel scroll event to scroll the listbox horizontally\n param event WheelEvent\n /\nconst onWheelScroll = (event: WheelEvent) => {\n const container = event.currentTarget as HTMLElement;\n container.scrollLeft += event.deltaY;\n // Prevent vertical scrolling of the page\n event.preventDefault();\n};\n\n/*\n Handle update isOpen event to open the dropdown when multiple is true\n param event boolean\n /\nconst onUpdateIsOpen = (event: boolean) => {\n if (props.multiple) {\n isOpen.value = true;\n } else {\n isOpen.value = event;\n }\n};\n\ndefineExpose({\n resetAllAndFetch,\n clearCache,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col gap-1\">\n <label class=\"text-sm font-semibold\" :class=\"{ 'text-error': errorMessage, 'text-neutral-darker': !errorMessage }\">\n {{ label }}\n </label>\n <ElDropdown :items=\"items\" :multiple=\"multiple\" :is-open=\"isOpen\" :disabled=\"disabled\" @update:is-open=\"onUpdateIsOpen($event)\">\n <template #anchor>\n <ElInputContainer :color=\"color\" :name=\"name\">\n <template #default>\n <div class=\"flex items-center gap-1 px-2\">\n <div\n v-if=\"multiple\"\n name=\"scrollable-container\"\n class=\"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing\"\n @wheel=\"onWheelScroll\"\n >\n <ElInputChip\n v-for=\"(item, index) in selectedItems\"\n :id=\"index\"\n :key=\"index\"\n :text=\"item.text \|\| item.label \|\| ''\"\n class=\"border flex-shrink-0 rounded-md px-3 py-2\"\n @click=\"onRemoveItem($event, item)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n />\n </div>\n\n <input\n ref=\"inputField\"\n v-model=\"query\"\n :disabled=\"disabled\"\n type=\"text\"\n class=\"border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0\"\n :class=\"{ 'cursor-not-allowed': disabled }\"\n :validation=\"validation\"\n :placeholder=\"placeholder\"\n @input=\"onChangeEvent($event)\"\n @keydown.backspace=\"onDeleteKeyPress($event)\"\n @click.prevent=\"onInputClick($event)\"\n @blur.prevent=\"onInputClick($event)\"\n @wheel=\"onWheelScroll($event)\"\n />\n\n <ElSpinner v-if=\"isLoading\" class=\"mx-2\" size=\"normal\" />\n </div>\n </template>\n </ElInputContainer>\n </template>\n </ElDropdown>\n <label v-if=\"errorMessage\" class=\"text-xs font-normal text-error\">{{ errorMessage }}</label>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","isLoading","ref","isOpen","query","filteredItems","selectedItems","inputField","lastSelectedItem","onMounted","response","debounceDataController","items","computed","mappedItems","_a","item","index","selectedItem","clickedItemIndex","currentItem","_","debounceFunction","useMemoize","value","useDebounceFn","clearCache","resetAllAndFetch","onInputClick","onChangeEvent","target","updateModel","onRemoveItem","_event","result","onDeleteKeyPress","lastItemIndex","_b","onWheelScroll","event","container","onUpdateIsOpen","__expose"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@davincihealthcare/elty-design-system-vue",
-  "version": "2.6.1",
+  "version": "2.7.1",
   "license": "UNLICENSED",
   "main": "dist/index.umd.cjs",
   "types": "dist/index.d.ts",