@davincihealthcare/elty-design-system-vue 2.10.0 → 2.10.2

package/dist/ElIconButton.vue.d.ts

@@ -12,6 +12,7 @@ export interface ElIconButtonProps {
     badgeColor?: ElBadgeColors;
     error?: boolean;
     showTooltipOnMobile?: boolean;
+    hideTooltipOnChange?: boolean;
 }
 export declare const elIconButtonSizes: readonly ["xs", "sm", "base", "l", "xl"];
 export type ElIconButtonSize = (typeof elIconButtonSizes)[number];
@@ -25,6 +26,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     badge: boolean;
     error: boolean;
     showTooltipOnMobile: boolean;
+    hideTooltipOnChange: boolean;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ElIconButtonProps>, {
@@ -37,6 +39,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     badge: boolean;
     error: boolean;
     showTooltipOnMobile: boolean;
+    hideTooltipOnChange: boolean;
 }>>> & {
     onClick?: (() => any) | undefined;
 }, {
@@ -49,6 +52,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     tooltipDelay: string | number;
     badgeColor: ElBadgeColors;
     showTooltipOnMobile: boolean;
+    hideTooltipOnChange: boolean;
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/ElTooltip.vue.d.ts

@@ -6,11 +6,14 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     position?: ElTooltipPosition;
     /** Time in ms before the tooltip appears */
     delayTime?: string | number;
+    /** Hide tooltip when tooltip's title changes */
+    hideOnChange?: boolean;
     hideOnMobile?: boolean;
 }>, {
     content: undefined;
     position: string;
     delayTime: number;
+    hideOnChange: boolean;
     hideOnMobile: boolean;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title: string;
@@ -18,16 +21,20 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     position?: ElTooltipPosition;
     /** Time in ms before the tooltip appears */
     delayTime?: string | number;
+    /** Hide tooltip when tooltip's title changes */
+    hideOnChange?: boolean;
     hideOnMobile?: boolean;
 }>, {
     content: undefined;
     position: string;
     delayTime: number;
+    hideOnChange: boolean;
     hideOnMobile: boolean;
 }>>>, {
     position: ElTooltipPosition;
     content: string;
     delayTime: string | number;
+    hideOnChange: boolean;
     hideOnMobile: boolean;
 }, {}>, {
     default?(_: {}): any;

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

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

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),m=require("./_CustomTransition.vue.cjs2.js"),a=require("./ElClipToAnchor.vue.cjs2.js"),f=require("./composable/mobileComposable.cjs.js"),_={class:"font-semibold"},h={key:0,class:"mt-1"},v=a.elClipToAnchorPositions,y=e.defineComponent({__name:"ElTooltip",props:{title:{},content:{default:void 0},position:{default:"top"},delayTime:{default:200},hideOnMobile:{type:Boolean,default:!1}},setup(r){const t=r,i=e.ref(),n=e.ref(!1);let o;const{isMobile:u}=f.useMobile(),c=e.computed(()=>typeof t.delayTime=="string"&&isNaN(Number(t.delayTime))?200:Number(t.delayTime)),d=()=>{!t.title.length||t.hideOnMobile&&u.value||(o=setTimeout(()=>{o&&clearTimeout(o),n.value=!0},c.value))},p=()=>{n.value=!1,o&&clearTimeout(o)};return e.watch(()=>t.title,()=>{t.title.length||(n.value=!1)}),(l,T)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",{ref_key:"anchor",ref:i,onMouseenter:d,onMouseleave:p},[e.renderSlot(l.$slots,"default")],544),e.createVNode(m.default,{name:"slide-y-fade"},{default:e.withCtx(()=>[i.value&&n.value?(e.openBlock(),e.createBlock(a.default,{key:0,anchor:i.value,position:l.position,"distance-from-anchor":14,class:"max-w-96 rounded-2xl bg-neutral-100 p-3 text-xs drop-shadow text-neutral-darker"},{default:e.withCtx(()=>{var s;return[e.createElementVNode("p",_,e.toDisplayString(l.title),1),(s=l.content)!=null&&s.length?(e.openBlock(),e.createElementBlock("p",h,e.toDisplayString(l.content),1)):e.createCommentVNode("",!0)]}),_:1},8,["anchor","position"])):e.createCommentVNode("",!0)]),_:1})]))}});exports.default=y;exports.elTooltipPositions=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),m=require("./_CustomTransition.vue.cjs2.js"),s=require("./ElClipToAnchor.vue.cjs2.js"),h=require("./composable/mobileComposable.cjs.js"),_={class:"font-semibold"},v={key:0,class:"mt-1"},y=s.elClipToAnchorPositions,T=e.defineComponent({__name:"ElTooltip",props:{title:{},content:{default:void 0},position:{default:"top"},delayTime:{default:200},hideOnChange:{type:Boolean,default:!1},hideOnMobile:{type:Boolean,default:!1}},setup(r){const o=r,i=e.ref(),n=e.ref(!1);let l;const{isMobile:u}=h.useMobile(),c=e.computed(()=>typeof o.delayTime=="string"&&isNaN(Number(o.delayTime))?200:Number(o.delayTime)),d=()=>{!o.title.length||o.hideOnMobile&&u.value||(l=setTimeout(()=>{l&&clearTimeout(l),n.value=!0},c.value))},p=()=>{n.value=!1,l&&clearTimeout(l)};return e.watch(()=>o.title,t=>{t.length||(n.value=!1)}),e.watch([()=>o.hideOnChange,()=>o.title],t=>{t[0]&&(n.value=!1)}),(t,f)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",{ref_key:"anchor",ref:i,onMouseenter:d,onMouseleave:p},[e.renderSlot(t.$slots,"default")],544),e.createVNode(m.default,{name:"slide-y-fade"},{default:e.withCtx(()=>[i.value&&n.value?(e.openBlock(),e.createBlock(s.default,{key:0,anchor:i.value,position:t.position,"distance-from-anchor":14,class:"max-w-96 rounded-2xl bg-neutral-100 p-3 text-xs drop-shadow text-neutral-darker"},{default:e.withCtx(()=>{var a;return[e.createElementVNode("p",_,e.toDisplayString(t.title),1),(a=t.content)!=null&&a.length?(e.openBlock(),e.createElementBlock("p",v,e.toDisplayString(t.content),1)):e.createCommentVNode("",!0)]}),_:1},8,["anchor","position"])):e.createCommentVNode("",!0)]),_:1})]))}});exports.default=T;exports.elTooltipPositions=y;
 //# sourceMappingURL=ElTooltip.vue.cjs2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ElTooltip.vue.cjs2.js","sources":["../../src/ElTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElClipToAnchor, { elClipToAnchorPositions } from '@/ElClipToAnchor.vue';\nimport { useMobile } from '@/composable/mobileComposable';\nexport const elTooltipPositions = elClipToAnchorPositions;\nexport type ElTooltipPosition = (typeof elTooltipPositions)[number];\n</script>\n<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue';\nimport CustomTransition from '@/_CustomTransition.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    title: string;\n    content?: string;\n    position?: ElTooltipPosition;\n    /** Time in ms before the tooltip appears */\n    delayTime?: string | number;\n    hideOnMobile?: boolean;\n  }>(),\n  {\n    content: undefined,\n    position: 'top',\n    delayTime: 200,\n    hideOnMobile: false,\n  },\n);\n\nconst anchor = ref<HTMLElement>();\nconst show = ref(false);\nlet showDebounceTimeout: ReturnType<typeof setTimeout> | undefined;\n\nconst { isMobile } = useMobile();\n\nconst sanitizedDelayTime = computed(() =>\n  typeof props.delayTime === 'string' && isNaN(Number(props.delayTime)) ? 200 : Number(props.delayTime),\n);\n\nconst onMouseEnter = () => {\n  if (!props.title.length || (props.hideOnMobile && isMobile.value)) return;\n\n  showDebounceTimeout = setTimeout(() => {\n    if (showDebounceTimeout) clearTimeout(showDebounceTimeout);\n    show.value = true;\n  }, sanitizedDelayTime.value);\n};\n\nconst onMouseLeave = () => {\n  show.value = false;\n  if (showDebounceTimeout) clearTimeout(showDebounceTimeout);\n};\n\nwatch(\n  () => props.title,\n  () => {\n    if (!props.title.length) show.value = false;\n  },\n);\n</script>\n\n<template>\n  <div>\n    <div ref=\"anchor\" @mouseenter=\"onMouseEnter\" @mouseleave=\"onMouseLeave\">\n      <slot></slot>\n    </div>\n    <CustomTransition name=\"slide-y-fade\">\n      <ElClipToAnchor\n        v-if=\"anchor && show\"\n        :anchor=\"anchor\"\n        :position=\"position\"\n        :distance-from-anchor=\"14\"\n        class=\"max-w-96 rounded-2xl bg-neutral-100 p-3 text-xs drop-shadow text-neutral-darker\"\n      >\n        <p class=\"font-semibold\">\n          {{ title }}\n        </p>\n        <p v-if=\"content?.length\" class=\"mt-1\">{{ content }}</p>\n      </ElClipToAnchor>\n    </CustomTransition>\n  </div>\n</template>\n"],"names":["elTooltipPositions","elClipToAnchorPositions","props","__props","anchor","ref","show","showDebounceTimeout","isMobile","useMobile","sanitizedDelayTime","computed","onMouseEnter","onMouseLeave","watch"],"mappings":"6TAGaA,EAAqBC,EAAA,2MAOlC,MAAMC,EAAQC,EAiBRC,EAASC,EAAAA,MACTC,EAAOD,MAAI,EAAK,EAClB,IAAAE,EAEE,KAAA,CAAE,SAAAC,GAAaC,EAAAA,YAEfC,EAAqBC,EAAA,SAAS,IAClC,OAAOT,EAAM,WAAc,UAAY,MAAM,OAAOA,EAAM,SAAS,CAAC,EAAI,IAAM,OAAOA,EAAM,SAAS,CAAA,EAGhGU,EAAe,IAAM,CACrB,CAACV,EAAM,MAAM,QAAWA,EAAM,cAAgBM,EAAS,QAE3DD,EAAsB,WAAW,IAAM,CACjCA,GAAqB,aAAaA,CAAmB,EACzDD,EAAK,MAAQ,EAAA,EACZI,EAAmB,KAAK,EAAA,EAGvBG,EAAe,IAAM,CACzBP,EAAK,MAAQ,GACTC,GAAqB,aAAaA,CAAmB,CAAA,EAG3DO,OAAAA,EAAA,MACE,IAAMZ,EAAM,MACZ,IAAM,CACCA,EAAM,MAAM,SAAQI,EAAK,MAAQ,GACxC,CAAA"}
+{"version":3,"file":"ElTooltip.vue.cjs2.js","sources":["../../src/ElTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElClipToAnchor, { elClipToAnchorPositions } from '@/ElClipToAnchor.vue';\nimport { useMobile } from '@/composable/mobileComposable';\nexport const elTooltipPositions = elClipToAnchorPositions;\nexport type ElTooltipPosition = (typeof elTooltipPositions)[number];\n</script>\n<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue';\nimport CustomTransition from '@/_CustomTransition.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    title: string;\n    content?: string;\n    position?: ElTooltipPosition;\n    /** Time in ms before the tooltip appears */\n    delayTime?: string | number;\n    /** Hide tooltip when tooltip's title changes */\n    hideOnChange?: boolean;\n    hideOnMobile?: boolean;\n  }>(),\n  {\n    content: undefined,\n    position: 'top',\n    delayTime: 200,\n    hideOnChange: false,\n    hideOnMobile: false,\n  },\n);\n\nconst anchor = ref<HTMLElement>();\nconst show = ref(false);\nlet showDebounceTimeout: ReturnType<typeof setTimeout> | undefined;\n\nconst { isMobile } = useMobile();\n\nconst sanitizedDelayTime = computed(() =>\n  typeof props.delayTime === 'string' && isNaN(Number(props.delayTime)) ? 200 : Number(props.delayTime),\n);\n\nconst onMouseEnter = () => {\n  if (!props.title.length || (props.hideOnMobile && isMobile.value)) return;\n\n  showDebounceTimeout = setTimeout(() => {\n    if (showDebounceTimeout) clearTimeout(showDebounceTimeout);\n    show.value = true;\n  }, sanitizedDelayTime.value);\n};\n\nconst onMouseLeave = () => {\n  show.value = false;\n  if (showDebounceTimeout) clearTimeout(showDebounceTimeout);\n};\n\nwatch(\n  () => props.title,\n  v => {\n    if (!v.length) show.value = false;\n  },\n);\nwatch([() => props.hideOnChange, () => props.title], v => {\n  const hideOnChange = v[0];\n  if (hideOnChange) {\n    show.value = false;\n  }\n});\n</script>\n\n<template>\n  <div>\n    <div ref=\"anchor\" @mouseenter=\"onMouseEnter\" @mouseleave=\"onMouseLeave\">\n      <slot></slot>\n    </div>\n    <CustomTransition name=\"slide-y-fade\">\n      <ElClipToAnchor\n        v-if=\"anchor && show\"\n        :anchor=\"anchor\"\n        :position=\"position\"\n        :distance-from-anchor=\"14\"\n        class=\"max-w-96 rounded-2xl bg-neutral-100 p-3 text-xs drop-shadow text-neutral-darker\"\n      >\n        <p class=\"font-semibold\">\n          {{ title }}\n        </p>\n        <p v-if=\"content?.length\" class=\"mt-1\">{{ content }}</p>\n      </ElClipToAnchor>\n    </CustomTransition>\n  </div>\n</template>\n"],"names":["elTooltipPositions","elClipToAnchorPositions","props","__props","anchor","ref","show","showDebounceTimeout","isMobile","useMobile","sanitizedDelayTime","computed","onMouseEnter","onMouseLeave","watch","v"],"mappings":"6TAGaA,EAAqBC,EAAA,kPAOlC,MAAMC,EAAQC,EAoBRC,EAASC,EAAAA,MACTC,EAAOD,MAAI,EAAK,EAClB,IAAAE,EAEE,KAAA,CAAE,SAAAC,GAAaC,EAAAA,YAEfC,EAAqBC,EAAA,SAAS,IAClC,OAAOT,EAAM,WAAc,UAAY,MAAM,OAAOA,EAAM,SAAS,CAAC,EAAI,IAAM,OAAOA,EAAM,SAAS,CAAA,EAGhGU,EAAe,IAAM,CACrB,CAACV,EAAM,MAAM,QAAWA,EAAM,cAAgBM,EAAS,QAE3DD,EAAsB,WAAW,IAAM,CACjCA,GAAqB,aAAaA,CAAmB,EACzDD,EAAK,MAAQ,EAAA,EACZI,EAAmB,KAAK,EAAA,EAGvBG,EAAe,IAAM,CACzBP,EAAK,MAAQ,GACTC,GAAqB,aAAaA,CAAmB,CAAA,EAG3DO,OAAAA,EAAA,MACE,IAAMZ,EAAM,MACPa,GAAA,CACEA,EAAE,SAAQT,EAAK,MAAQ,GAC9B,CAAA,EAEIQ,QAAA,CAAC,IAAMZ,EAAM,aAAc,IAAMA,EAAM,KAAK,EAAQa,GAAA,CACnCA,EAAE,CAAC,IAEtBT,EAAK,MAAQ,GACf,CACD"}

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

@@ -1,2 +1,2 @@
-import{defineComponent as T,ref as s,computed as _,watch as b,openBlock as i,createElementBlock as r,createElementVNode as u,renderSlot as M,createVNode as k,withCtx as c,createBlock as N,toDisplayString as d,createCommentVNode as m}from"vue";import g from"./_CustomTransition.vue.esm2.js";import w,{elClipToAnchorPositions as B}from"./ElClipToAnchor.vue.esm2.js";import{useMobile as C}from"./composable/mobileComposable.esm.js";const E={class:"font-semibold"},x={key:0,class:"mt-1"},S=B,z=T({__name:"ElTooltip",props:{title:{},content:{default:void 0},position:{default:"top"},delayTime:{default:200},hideOnMobile:{type:Boolean,default:!1}},setup(f){const e=f,l=s(),n=s(!1);let t;const{isMobile:p}=C(),h=_(()=>typeof e.delayTime=="string"&&isNaN(Number(e.delayTime))?200:Number(e.delayTime)),v=()=>{!e.title.length||e.hideOnMobile&&p.value||(t=setTimeout(()=>{t&&clearTimeout(t),n.value=!0},h.value))},y=()=>{n.value=!1,t&&clearTimeout(t)};return b(()=>e.title,()=>{e.title.length||(n.value=!1)}),(o,D)=>(i(),r("div",null,[u("div",{ref_key:"anchor",ref:l,onMouseenter:v,onMouseleave:y},[M(o.$slots,"default")],544),k(g,{name:"slide-y-fade"},{default:c(()=>[l.value&&n.value?(i(),N(w,{key:0,anchor:l.value,position:o.position,"distance-from-anchor":14,class:"max-w-96 rounded-2xl bg-neutral-100 p-3 text-xs drop-shadow text-neutral-darker"},{default:c(()=>{var a;return[u("p",E,d(o.title),1),(a=o.content)!=null&&a.length?(i(),r("p",x,d(o.content),1)):m("",!0)]}),_:1},8,["anchor","position"])):m("",!0)]),_:1})]))}});export{z as default,S as elTooltipPositions};
+import{defineComponent as g,ref as s,computed as b,watch as r,openBlock as a,createElementBlock as u,createElementVNode as d,renderSlot as C,createVNode as M,withCtx as c,createBlock as k,toDisplayString as f,createCommentVNode as m}from"vue";import N from"./_CustomTransition.vue.esm2.js";import w,{elClipToAnchorPositions as O}from"./ElClipToAnchor.vue.esm2.js";import{useMobile as B}from"./composable/mobileComposable.esm.js";const E={class:"font-semibold"},x={key:0,class:"mt-1"},S=O,z=g({__name:"ElTooltip",props:{title:{},content:{default:void 0},position:{default:"top"},delayTime:{default:200},hideOnChange:{type:Boolean,default:!1},hideOnMobile:{type:Boolean,default:!1}},setup(p){const t=p,l=s(),o=s(!1);let n;const{isMobile:h}=B(),v=b(()=>typeof t.delayTime=="string"&&isNaN(Number(t.delayTime))?200:Number(t.delayTime)),y=()=>{!t.title.length||t.hideOnMobile&&h.value||(n=setTimeout(()=>{n&&clearTimeout(n),o.value=!0},v.value))},T=()=>{o.value=!1,n&&clearTimeout(n)};return r(()=>t.title,e=>{e.length||(o.value=!1)}),r([()=>t.hideOnChange,()=>t.title],e=>{e[0]&&(o.value=!1)}),(e,_)=>(a(),u("div",null,[d("div",{ref_key:"anchor",ref:l,onMouseenter:y,onMouseleave:T},[C(e.$slots,"default")],544),M(N,{name:"slide-y-fade"},{default:c(()=>[l.value&&o.value?(a(),k(w,{key:0,anchor:l.value,position:e.position,"distance-from-anchor":14,class:"max-w-96 rounded-2xl bg-neutral-100 p-3 text-xs drop-shadow text-neutral-darker"},{default:c(()=>{var i;return[d("p",E,f(e.title),1),(i=e.content)!=null&&i.length?(a(),u("p",x,f(e.content),1)):m("",!0)]}),_:1},8,["anchor","position"])):m("",!0)]),_:1})]))}});export{z as default,S as elTooltipPositions};
 //# sourceMappingURL=ElTooltip.vue.esm2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ElTooltip.vue.esm2.js","sources":["../../src/ElTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElClipToAnchor, { elClipToAnchorPositions } from '@/ElClipToAnchor.vue';\nimport { useMobile } from '@/composable/mobileComposable';\nexport const elTooltipPositions = elClipToAnchorPositions;\nexport type ElTooltipPosition = (typeof elTooltipPositions)[number];\n</script>\n<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue';\nimport CustomTransition from '@/_CustomTransition.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    title: string;\n    content?: string;\n    position?: ElTooltipPosition;\n    /** Time in ms before the tooltip appears */\n    delayTime?: string | number;\n    hideOnMobile?: boolean;\n  }>(),\n  {\n    content: undefined,\n    position: 'top',\n    delayTime: 200,\n    hideOnMobile: false,\n  },\n);\n\nconst anchor = ref<HTMLElement>();\nconst show = ref(false);\nlet showDebounceTimeout: ReturnType<typeof setTimeout> | undefined;\n\nconst { isMobile } = useMobile();\n\nconst sanitizedDelayTime = computed(() =>\n  typeof props.delayTime === 'string' && isNaN(Number(props.delayTime)) ? 200 : Number(props.delayTime),\n);\n\nconst onMouseEnter = () => {\n  if (!props.title.length || (props.hideOnMobile && isMobile.value)) return;\n\n  showDebounceTimeout = setTimeout(() => {\n    if (showDebounceTimeout) clearTimeout(showDebounceTimeout);\n    show.value = true;\n  }, sanitizedDelayTime.value);\n};\n\nconst onMouseLeave = () => {\n  show.value = false;\n  if (showDebounceTimeout) clearTimeout(showDebounceTimeout);\n};\n\nwatch(\n  () => props.title,\n  () => {\n    if (!props.title.length) show.value = false;\n  },\n);\n</script>\n\n<template>\n  <div>\n    <div ref=\"anchor\" @mouseenter=\"onMouseEnter\" @mouseleave=\"onMouseLeave\">\n      <slot></slot>\n    </div>\n    <CustomTransition name=\"slide-y-fade\">\n      <ElClipToAnchor\n        v-if=\"anchor && show\"\n        :anchor=\"anchor\"\n        :position=\"position\"\n        :distance-from-anchor=\"14\"\n        class=\"max-w-96 rounded-2xl bg-neutral-100 p-3 text-xs drop-shadow text-neutral-darker\"\n      >\n        <p class=\"font-semibold\">\n          {{ title }}\n        </p>\n        <p v-if=\"content?.length\" class=\"mt-1\">{{ content }}</p>\n      </ElClipToAnchor>\n    </CustomTransition>\n  </div>\n</template>\n"],"names":["elTooltipPositions","elClipToAnchorPositions","props","__props","anchor","ref","show","showDebounceTimeout","isMobile","useMobile","sanitizedDelayTime","computed","onMouseEnter","onMouseLeave","watch"],"mappings":"oeAGaA,EAAqBC,qKAOlC,MAAMC,EAAQC,EAiBRC,EAASC,IACTC,EAAOD,EAAI,EAAK,EAClB,IAAAE,EAEE,KAAA,CAAE,SAAAC,GAAaC,IAEfC,EAAqBC,EAAS,IAClC,OAAOT,EAAM,WAAc,UAAY,MAAM,OAAOA,EAAM,SAAS,CAAC,EAAI,IAAM,OAAOA,EAAM,SAAS,CAAA,EAGhGU,EAAe,IAAM,CACrB,CAACV,EAAM,MAAM,QAAWA,EAAM,cAAgBM,EAAS,QAE3DD,EAAsB,WAAW,IAAM,CACjCA,GAAqB,aAAaA,CAAmB,EACzDD,EAAK,MAAQ,EAAA,EACZI,EAAmB,KAAK,EAAA,EAGvBG,EAAe,IAAM,CACzBP,EAAK,MAAQ,GACTC,GAAqB,aAAaA,CAAmB,CAAA,EAG3D,OAAAO,EACE,IAAMZ,EAAM,MACZ,IAAM,CACCA,EAAM,MAAM,SAAQI,EAAK,MAAQ,GACxC,CAAA"}
+{"version":3,"file":"ElTooltip.vue.esm2.js","sources":["../../src/ElTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElClipToAnchor, { elClipToAnchorPositions } from '@/ElClipToAnchor.vue';\nimport { useMobile } from '@/composable/mobileComposable';\nexport const elTooltipPositions = elClipToAnchorPositions;\nexport type ElTooltipPosition = (typeof elTooltipPositions)[number];\n</script>\n<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue';\nimport CustomTransition from '@/_CustomTransition.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    title: string;\n    content?: string;\n    position?: ElTooltipPosition;\n    /** Time in ms before the tooltip appears */\n    delayTime?: string | number;\n    /** Hide tooltip when tooltip's title changes */\n    hideOnChange?: boolean;\n    hideOnMobile?: boolean;\n  }>(),\n  {\n    content: undefined,\n    position: 'top',\n    delayTime: 200,\n    hideOnChange: false,\n    hideOnMobile: false,\n  },\n);\n\nconst anchor = ref<HTMLElement>();\nconst show = ref(false);\nlet showDebounceTimeout: ReturnType<typeof setTimeout> | undefined;\n\nconst { isMobile } = useMobile();\n\nconst sanitizedDelayTime = computed(() =>\n  typeof props.delayTime === 'string' && isNaN(Number(props.delayTime)) ? 200 : Number(props.delayTime),\n);\n\nconst onMouseEnter = () => {\n  if (!props.title.length || (props.hideOnMobile && isMobile.value)) return;\n\n  showDebounceTimeout = setTimeout(() => {\n    if (showDebounceTimeout) clearTimeout(showDebounceTimeout);\n    show.value = true;\n  }, sanitizedDelayTime.value);\n};\n\nconst onMouseLeave = () => {\n  show.value = false;\n  if (showDebounceTimeout) clearTimeout(showDebounceTimeout);\n};\n\nwatch(\n  () => props.title,\n  v => {\n    if (!v.length) show.value = false;\n  },\n);\nwatch([() => props.hideOnChange, () => props.title], v => {\n  const hideOnChange = v[0];\n  if (hideOnChange) {\n    show.value = false;\n  }\n});\n</script>\n\n<template>\n  <div>\n    <div ref=\"anchor\" @mouseenter=\"onMouseEnter\" @mouseleave=\"onMouseLeave\">\n      <slot></slot>\n    </div>\n    <CustomTransition name=\"slide-y-fade\">\n      <ElClipToAnchor\n        v-if=\"anchor && show\"\n        :anchor=\"anchor\"\n        :position=\"position\"\n        :distance-from-anchor=\"14\"\n        class=\"max-w-96 rounded-2xl bg-neutral-100 p-3 text-xs drop-shadow text-neutral-darker\"\n      >\n        <p class=\"font-semibold\">\n          {{ title }}\n        </p>\n        <p v-if=\"content?.length\" class=\"mt-1\">{{ content }}</p>\n      </ElClipToAnchor>\n    </CustomTransition>\n  </div>\n</template>\n"],"names":["elTooltipPositions","elClipToAnchorPositions","props","__props","anchor","ref","show","showDebounceTimeout","isMobile","useMobile","sanitizedDelayTime","computed","onMouseEnter","onMouseLeave","watch","v"],"mappings":"oeAGaA,EAAqBC,4MAOlC,MAAMC,EAAQC,EAoBRC,EAASC,IACTC,EAAOD,EAAI,EAAK,EAClB,IAAAE,EAEE,KAAA,CAAE,SAAAC,GAAaC,IAEfC,EAAqBC,EAAS,IAClC,OAAOT,EAAM,WAAc,UAAY,MAAM,OAAOA,EAAM,SAAS,CAAC,EAAI,IAAM,OAAOA,EAAM,SAAS,CAAA,EAGhGU,EAAe,IAAM,CACrB,CAACV,EAAM,MAAM,QAAWA,EAAM,cAAgBM,EAAS,QAE3DD,EAAsB,WAAW,IAAM,CACjCA,GAAqB,aAAaA,CAAmB,EACzDD,EAAK,MAAQ,EAAA,EACZI,EAAmB,KAAK,EAAA,EAGvBG,EAAe,IAAM,CACzBP,EAAK,MAAQ,GACTC,GAAqB,aAAaA,CAAmB,CAAA,EAG3D,OAAAO,EACE,IAAMZ,EAAM,MACPa,GAAA,CACEA,EAAE,SAAQT,EAAK,MAAQ,GAC9B,CAAA,EAEIQ,EAAA,CAAC,IAAMZ,EAAM,aAAc,IAAMA,EAAM,KAAK,EAAQa,GAAA,CACnCA,EAAE,CAAC,IAEtBT,EAAK,MAAQ,GACf,CACD"}

package/dist/src/forms/ElInputAutocomplete.vue.cjs2.js

@@ -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.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("div",W,l.toDisplayString(e.errorMessage),1)):l.createCommentVNode("",!0)]))}});exports.default=j;
 //# sourceMappingURL=ElInputAutocomplete.vue.cjs2.js.map

package/dist/src/forms/ElInputAutocomplete.vue.cjs2.js.map

@@ -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?.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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"}
+{"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    <div v-if=\"errorMessage\" class=\"text-xs font-normal text-error\">{{ errorMessage }}</div>\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/src/forms/ElInputAutocomplete.vue.esm2.js

@@ -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.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("div",ue,V(e.errorMessage),1)):k("",!0)]))}});export{be as default};
 //# sourceMappingURL=ElInputAutocomplete.vue.esm2.js.map

package/dist/src/forms/ElInputAutocomplete.vue.esm2.js.map

@@ -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?.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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"}
+{"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    <div v-if=\"errorMessage\" class=\"text-xs font-normal text-error\">{{ errorMessage }}</div>\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/src/forms/ElInputContainer.vue.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),o=["for"],l={key:0,class:"ml-0 text-sm font-light"},a={key:0,class:"text-neutral-lighter group-focus-within:text-error group-active-within:text-error mt-1 text-sm"},s=["primary","secondary","error"],i=r.defineComponent({__name:"ElInputContainer",props:{modelValue:{default:""},name:{},label:{default:""},errorMessage:{type:[String,Boolean],default:!1},hiddenErrorMessage:{type:Boolean},setRequiredMark:{type:Boolean},color:{default:"primary"},noBorder:{type:Boolean,default:!1}},setup(n){return(e,t)=>(r.openBlock(),r.createElementBlock("div",r.mergeProps(e.$attrs,{class:["el-input-container group border-0 p-1 flex flex-col gap-1",{error:!!e.errorMessage}]}),[r.createElementVNode("div",{class:r.normalizeClass(["flex align-middle text-base",{"text-neutral-darker":!e.errorMessage,"text-error":!!e.errorMessage}])},[r.createElementVNode("label",{for:e.name,class:"block text-base font-medium"},r.toDisplayString(e.label),9,o),e.label&&e.setRequiredMark?(r.openBlock(),r.createElementBlock("span",l,"*")):r.createCommentVNode("",!0)],2),r.createElementVNode("div",r.mergeProps(e.$attrs,{class:["el-input-container group rounded overflow-hidden text-neutral-darker focus-within:ring focus-within:ring-opacity-50",{error:!!e.errorMessage,"border border-neutral-inactive":!e.noBorder,"focus-within:border-primary-pressed focus-within:ring-outlined-primary":e.color==="primary"&&!e.modelValue,"focus-within:border-primary-active focus-within:ring-outlined-primary ":e.color==="primary"&&e.modelValue,"focus-within:border-secondary-pressed focus-within:ring-outlined-secondary ":e.color==="secondary","focus-within:border-secondary-active focus-within:ring-outlined-secondary ":e.color==="secondary","focus-within:border-error  focus-within:ring-outlined-error":e.color==="error"}]}),[r.createElementVNode("div",{class:r.normalizeClass(["relative",{"gap-1":e.label.length>0}])},[r.createElementVNode("div",{class:r.normalizeClass({"fill-neutral-inactive":!e.modelValue,"focus-within:fill-primary-pressed":e.color==="primary"&&!e.modelValue,"focus-within:fill-primary-active":e.color==="primary"&&e.modelValue,"focus-within:fill-secondary-pressed":e.color==="secondary"&&!e.modelValue,"focus-within:fill-secondary-active":e.color==="secondary"&&e.modelValue,"fill-error":e.color==="error","fill-neutral-darker":e.modelValue})},[r.renderSlot(e.$slots,"leading",r.normalizeProps(r.guardReactiveProps({error:!!e.errorMessage})))],2),r.renderSlot(e.$slots,"default",r.normalizeProps(r.guardReactiveProps({error:!!e.errorMessage}))),r.createElementVNode("div",{class:r.normalizeClass(["pointer-events-auto absolute inset-y-0 right-2 z-20 flex cursor-pointer items-center",{"text-error":!!e.errorMessage}])},[r.renderSlot(e.$slots,"trailing",r.normalizeProps(r.guardReactiveProps({error:!!e.errorMessage})))],2)],2),r.renderSlot(e.$slots,"after"),e.errorMessage&&!e.errorMessage&&!e.hiddenErrorMessage?(r.openBlock(),r.createElementBlock("p",a,r.toDisplayString(e.errorMessage),1)):r.createCommentVNode("",!0)],16)],16))}});exports.default=i;exports.elInputContainerColor=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),o=["for"],l={key:0,class:"ml-0 text-sm font-light"},a={key:0,class:"text-neutral-lighter group-focus-within:text-error group-active-within:text-error mt-1 text-sm"},s=["primary","secondary","error"],i=r.defineComponent({__name:"ElInputContainer",props:{modelValue:{default:""},name:{},label:{default:""},errorMessage:{type:[String,Boolean],default:!1},hiddenErrorMessage:{type:Boolean},setRequiredMark:{type:Boolean},color:{default:"primary"},noBorder:{type:Boolean,default:!1}},setup(n){return(e,t)=>(r.openBlock(),r.createElementBlock("div",r.mergeProps(e.$attrs,{class:["el-input-container group border-0 p-1 flex flex-col gap-1",{error:!!e.errorMessage}]}),[r.createElementVNode("div",{class:r.normalizeClass(["flex align-middle text-base",{"text-neutral-darker":!e.errorMessage,"text-error":!!e.errorMessage}])},[r.createElementVNode("label",{for:e.name,class:"block text-base font-medium"},r.toDisplayString(e.label),9,o),e.label&&e.setRequiredMark?(r.openBlock(),r.createElementBlock("span",l,"*")):r.createCommentVNode("",!0)],2),r.createElementVNode("div",r.mergeProps(e.$attrs,{class:["el-input-container group rounded overflow-hidden text-neutral-darker focus-within:ring focus-within:ring-opacity-50",{error:!!e.errorMessage,"border border-neutral-inactive":!e.noBorder,"focus-within:border-primary-pressed focus-within:ring-outlined-primary":e.color==="primary"&&!e.modelValue,"focus-within:border-primary-active focus-within:ring-outlined-primary ":e.color==="primary"&&e.modelValue,"focus-within:border-secondary-pressed focus-within:ring-outlined-secondary ":e.color==="secondary","focus-within:border-secondary-active focus-within:ring-outlined-secondary ":e.color==="secondary","focus-within:border-error  focus-within:ring-outlined-error":e.color==="error"}]}),[r.createElementVNode("div",{class:r.normalizeClass(["relative",{"gap-1":e.label.length>0}])},[r.createElementVNode("div",{class:r.normalizeClass({"fill-neutral-inactive":!e.modelValue,"focus-within:fill-primary-pressed":e.color==="primary"&&!e.modelValue,"focus-within:fill-primary-active":e.color==="primary"&&e.modelValue,"focus-within:fill-secondary-pressed":e.color==="secondary"&&!e.modelValue,"focus-within:fill-secondary-active":e.color==="secondary"&&e.modelValue,"fill-error":e.color==="error","fill-neutral-darker":e.modelValue})},[r.renderSlot(e.$slots,"leading",r.normalizeProps(r.guardReactiveProps({error:!!e.errorMessage})))],2),r.renderSlot(e.$slots,"default",r.normalizeProps(r.guardReactiveProps({error:!!e.errorMessage}))),r.createElementVNode("div",{class:r.normalizeClass(["pointer-events-auto absolute inset-y-0 right-2 z-20 flex cursor-pointer items-center",{"text-error":!!e.errorMessage}])},[r.renderSlot(e.$slots,"trailing",r.normalizeProps(r.guardReactiveProps({error:!!e.errorMessage})))],2)],2),r.renderSlot(e.$slots,"after")],16),e.errorMessage&&e.errorMessage!==!0&&!e.hiddenErrorMessage?(r.openBlock(),r.createElementBlock("div",a,r.toDisplayString(e.errorMessage),1)):r.createCommentVNode("",!0)],16))}});exports.default=i;exports.elInputContainerColor=s;
 //# sourceMappingURL=ElInputContainer.vue.cjs2.js.map

package/dist/src/forms/ElInputContainer.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElInputContainer.vue.cjs2.js","sources":["../../../src/forms/ElInputContainer.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputContainerColor = ['primary', 'secondary', 'error'] as const;\nexport type ElInputContainerColor = (typeof elInputContainerColor)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { NumberValueType, TextualValueType } from './input';\n\nwithDefaults(\n  defineProps<{\n    modelValue?: TextualValueType | NumberValueType;\n    name: string;\n    label?: string;\n    errorMessage?: string | boolean;\n    hiddenErrorMessage?: boolean;\n    setRequiredMark?: boolean;\n    color?: ElInputContainerColor;\n    noBorder?: boolean;\n  }>(),\n  {\n    modelValue: '',\n    color: 'primary',\n    label: '',\n    errorMessage: false,\n    noBorder: false,\n  },\n);\n</script>\n\n<template>\n  <div\n    v-bind=\"$attrs\"\n    class=\"el-input-container group border-0 p-1 flex flex-col gap-1\"\n    :class=\"{\n      error: !!errorMessage,\n    }\"\n  >\n    <div class=\"flex align-middle text-base\" :class=\"{ 'text-neutral-darker': !errorMessage, 'text-error': !!errorMessage }\">\n      <label :for=\"name\" class=\"block text-base font-medium\">{{ label }}</label>\n      <span v-if=\"label && setRequiredMark\" class=\"ml-0 text-sm font-light\">*</span>\n    </div>\n    <div\n      v-bind=\"$attrs\"\n      class=\"el-input-container group rounded overflow-hidden text-neutral-darker focus-within:ring focus-within:ring-opacity-50\"\n      :class=\"{\n        error: !!errorMessage,\n        'border border-neutral-inactive': !noBorder,\n        'focus-within:border-primary-pressed focus-within:ring-outlined-primary': color === 'primary' && !modelValue,\n        'focus-within:border-primary-active focus-within:ring-outlined-primary ': color === 'primary' && modelValue,\n\n        'focus-within:border-secondary-pressed focus-within:ring-outlined-secondary ': color === 'secondary',\n        'focus-within:border-secondary-active focus-within:ring-outlined-secondary ': color === 'secondary',\n\n        'focus-within:border-error  focus-within:ring-outlined-error': color === 'error',\n      }\"\n    >\n      <div\n        class=\"relative\"\n        :class=\"{\n          'gap-1': label.length > 0,\n        }\"\n      >\n        <div\n          :class=\"{\n            'fill-neutral-inactive': !modelValue,\n\n            'focus-within:fill-primary-pressed': color === 'primary' && !modelValue,\n            'focus-within:fill-primary-active': color === 'primary' && modelValue,\n\n            'focus-within:fill-secondary-pressed': color === 'secondary' && !modelValue,\n            'focus-within:fill-secondary-active': color === 'secondary' && modelValue,\n\n            'fill-error': color === 'error',\n            'fill-neutral-darker': modelValue,\n          }\"\n        >\n          <slot name=\"leading\" v-bind=\"{ error: !!errorMessage }\" />\n        </div>\n        <slot v-bind=\"{ error: !!errorMessage }\" />\n        <div\n          class=\"pointer-events-auto absolute inset-y-0 right-2 z-20 flex cursor-pointer items-center\"\n          :class=\"{ 'text-error': !!errorMessage }\"\n        >\n          <slot name=\"trailing\" v-bind=\"{ error: !!errorMessage }\"> </slot>\n        </div>\n      </div>\n      <slot name=\"after\" />\n      <p\n        v-if=\"!!errorMessage && !errorMessage && !hiddenErrorMessage\"\n        class=\"text-neutral-lighter group-focus-within:text-error group-active-within:text-error mt-1 text-sm\"\n      >\n        {{ errorMessage }}\n      </p>\n    </div>\n  </div>\n</template>\n"],"names":["elInputContainerColor"],"mappings":"wSACaA,EAAwB,CAAC,UAAW,YAAa,OAAO"}
+{"version":3,"file":"ElInputContainer.vue.cjs2.js","sources":["../../../src/forms/ElInputContainer.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputContainerColor = ['primary', 'secondary', 'error'] as const;\nexport type ElInputContainerColor = (typeof elInputContainerColor)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { NumberValueType, TextualValueType } from './input';\n\nwithDefaults(\n  defineProps<{\n    modelValue?: TextualValueType | NumberValueType;\n    name: string;\n    label?: string;\n    errorMessage?: string | boolean;\n    hiddenErrorMessage?: boolean;\n    setRequiredMark?: boolean;\n    color?: ElInputContainerColor;\n    noBorder?: boolean;\n  }>(),\n  {\n    modelValue: '',\n    color: 'primary',\n    label: '',\n    errorMessage: false,\n    noBorder: false,\n  },\n);\n</script>\n\n<template>\n  <div\n    v-bind=\"$attrs\"\n    class=\"el-input-container group border-0 p-1 flex flex-col gap-1\"\n    :class=\"{\n      error: !!errorMessage,\n    }\"\n  >\n    <div class=\"flex align-middle text-base\" :class=\"{ 'text-neutral-darker': !errorMessage, 'text-error': !!errorMessage }\">\n      <label :for=\"name\" class=\"block text-base font-medium\">{{ label }}</label>\n      <span v-if=\"label && setRequiredMark\" class=\"ml-0 text-sm font-light\">*</span>\n    </div>\n    <div\n      v-bind=\"$attrs\"\n      class=\"el-input-container group rounded overflow-hidden text-neutral-darker focus-within:ring focus-within:ring-opacity-50\"\n      :class=\"{\n        error: !!errorMessage,\n        'border border-neutral-inactive': !noBorder,\n        'focus-within:border-primary-pressed focus-within:ring-outlined-primary': color === 'primary' && !modelValue,\n        'focus-within:border-primary-active focus-within:ring-outlined-primary ': color === 'primary' && modelValue,\n\n        'focus-within:border-secondary-pressed focus-within:ring-outlined-secondary ': color === 'secondary',\n        'focus-within:border-secondary-active focus-within:ring-outlined-secondary ': color === 'secondary',\n\n        'focus-within:border-error  focus-within:ring-outlined-error': color === 'error',\n      }\"\n    >\n      <div\n        class=\"relative\"\n        :class=\"{\n          'gap-1': label.length > 0,\n        }\"\n      >\n        <div\n          :class=\"{\n            'fill-neutral-inactive': !modelValue,\n\n            'focus-within:fill-primary-pressed': color === 'primary' && !modelValue,\n            'focus-within:fill-primary-active': color === 'primary' && modelValue,\n\n            'focus-within:fill-secondary-pressed': color === 'secondary' && !modelValue,\n            'focus-within:fill-secondary-active': color === 'secondary' && modelValue,\n\n            'fill-error': color === 'error',\n            'fill-neutral-darker': modelValue,\n          }\"\n        >\n          <slot name=\"leading\" v-bind=\"{ error: !!errorMessage }\" />\n        </div>\n        <slot v-bind=\"{ error: !!errorMessage }\" />\n        <div\n          class=\"pointer-events-auto absolute inset-y-0 right-2 z-20 flex cursor-pointer items-center\"\n          :class=\"{ 'text-error': !!errorMessage }\"\n        >\n          <slot name=\"trailing\" v-bind=\"{ error: !!errorMessage }\"> </slot>\n        </div>\n      </div>\n      <slot name=\"after\" />\n    </div>\n    <div\n      v-if=\"!!errorMessage && errorMessage !== true && !hiddenErrorMessage\"\n      class=\"text-neutral-lighter group-focus-within:text-error group-active-within:text-error mt-1 text-sm\"\n    >\n      {{ errorMessage }}\n    </div>\n  </div>\n</template>\n"],"names":["elInputContainerColor"],"mappings":"wSACaA,EAAwB,CAAC,UAAW,YAAa,OAAO"}

package/dist/src/forms/ElInputContainer.vue.esm2.js

@@ -1,2 +1,2 @@
-import{defineComponent as p,openBlock as s,createElementBlock as l,mergeProps as t,createElementVNode as r,normalizeClass as o,toDisplayString as d,createCommentVNode as u,renderSlot as a,normalizeProps as i,guardReactiveProps as n}from"vue";const f=["for"],m={key:0,class:"ml-0 text-sm font-light"},g={key:0,class:"text-neutral-lighter group-focus-within:text-error group-active-within:text-error mt-1 text-sm"},w=["primary","secondary","error"],b=p({__name:"ElInputContainer",props:{modelValue:{default:""},name:{},label:{default:""},errorMessage:{type:[String,Boolean],default:!1},hiddenErrorMessage:{type:Boolean},setRequiredMark:{type:Boolean},color:{default:"primary"},noBorder:{type:Boolean,default:!1}},setup(c){return(e,y)=>(s(),l("div",t(e.$attrs,{class:["el-input-container group border-0 p-1 flex flex-col gap-1",{error:!!e.errorMessage}]}),[r("div",{class:o(["flex align-middle text-base",{"text-neutral-darker":!e.errorMessage,"text-error":!!e.errorMessage}])},[r("label",{for:e.name,class:"block text-base font-medium"},d(e.label),9,f),e.label&&e.setRequiredMark?(s(),l("span",m,"*")):u("",!0)],2),r("div",t(e.$attrs,{class:["el-input-container group rounded overflow-hidden text-neutral-darker focus-within:ring focus-within:ring-opacity-50",{error:!!e.errorMessage,"border border-neutral-inactive":!e.noBorder,"focus-within:border-primary-pressed focus-within:ring-outlined-primary":e.color==="primary"&&!e.modelValue,"focus-within:border-primary-active focus-within:ring-outlined-primary ":e.color==="primary"&&e.modelValue,"focus-within:border-secondary-pressed focus-within:ring-outlined-secondary ":e.color==="secondary","focus-within:border-secondary-active focus-within:ring-outlined-secondary ":e.color==="secondary","focus-within:border-error  focus-within:ring-outlined-error":e.color==="error"}]}),[r("div",{class:o(["relative",{"gap-1":e.label.length>0}])},[r("div",{class:o({"fill-neutral-inactive":!e.modelValue,"focus-within:fill-primary-pressed":e.color==="primary"&&!e.modelValue,"focus-within:fill-primary-active":e.color==="primary"&&e.modelValue,"focus-within:fill-secondary-pressed":e.color==="secondary"&&!e.modelValue,"focus-within:fill-secondary-active":e.color==="secondary"&&e.modelValue,"fill-error":e.color==="error","fill-neutral-darker":e.modelValue})},[a(e.$slots,"leading",i(n({error:!!e.errorMessage})))],2),a(e.$slots,"default",i(n({error:!!e.errorMessage}))),r("div",{class:o(["pointer-events-auto absolute inset-y-0 right-2 z-20 flex cursor-pointer items-center",{"text-error":!!e.errorMessage}])},[a(e.$slots,"trailing",i(n({error:!!e.errorMessage})))],2)],2),a(e.$slots,"after"),e.errorMessage&&!e.errorMessage&&!e.hiddenErrorMessage?(s(),l("p",g,d(e.errorMessage),1)):u("",!0)],16)],16))}});export{b as default,w as elInputContainerColor};
+import{defineComponent as p,openBlock as s,createElementBlock as i,mergeProps as t,createElementVNode as r,normalizeClass as o,toDisplayString as d,createCommentVNode as u,renderSlot as a,normalizeProps as l,guardReactiveProps as n}from"vue";const f=["for"],m={key:0,class:"ml-0 text-sm font-light"},g={key:0,class:"text-neutral-lighter group-focus-within:text-error group-active-within:text-error mt-1 text-sm"},w=["primary","secondary","error"],v=p({__name:"ElInputContainer",props:{modelValue:{default:""},name:{},label:{default:""},errorMessage:{type:[String,Boolean],default:!1},hiddenErrorMessage:{type:Boolean},setRequiredMark:{type:Boolean},color:{default:"primary"},noBorder:{type:Boolean,default:!1}},setup(c){return(e,y)=>(s(),i("div",t(e.$attrs,{class:["el-input-container group border-0 p-1 flex flex-col gap-1",{error:!!e.errorMessage}]}),[r("div",{class:o(["flex align-middle text-base",{"text-neutral-darker":!e.errorMessage,"text-error":!!e.errorMessage}])},[r("label",{for:e.name,class:"block text-base font-medium"},d(e.label),9,f),e.label&&e.setRequiredMark?(s(),i("span",m,"*")):u("",!0)],2),r("div",t(e.$attrs,{class:["el-input-container group rounded overflow-hidden text-neutral-darker focus-within:ring focus-within:ring-opacity-50",{error:!!e.errorMessage,"border border-neutral-inactive":!e.noBorder,"focus-within:border-primary-pressed focus-within:ring-outlined-primary":e.color==="primary"&&!e.modelValue,"focus-within:border-primary-active focus-within:ring-outlined-primary ":e.color==="primary"&&e.modelValue,"focus-within:border-secondary-pressed focus-within:ring-outlined-secondary ":e.color==="secondary","focus-within:border-secondary-active focus-within:ring-outlined-secondary ":e.color==="secondary","focus-within:border-error  focus-within:ring-outlined-error":e.color==="error"}]}),[r("div",{class:o(["relative",{"gap-1":e.label.length>0}])},[r("div",{class:o({"fill-neutral-inactive":!e.modelValue,"focus-within:fill-primary-pressed":e.color==="primary"&&!e.modelValue,"focus-within:fill-primary-active":e.color==="primary"&&e.modelValue,"focus-within:fill-secondary-pressed":e.color==="secondary"&&!e.modelValue,"focus-within:fill-secondary-active":e.color==="secondary"&&e.modelValue,"fill-error":e.color==="error","fill-neutral-darker":e.modelValue})},[a(e.$slots,"leading",l(n({error:!!e.errorMessage})))],2),a(e.$slots,"default",l(n({error:!!e.errorMessage}))),r("div",{class:o(["pointer-events-auto absolute inset-y-0 right-2 z-20 flex cursor-pointer items-center",{"text-error":!!e.errorMessage}])},[a(e.$slots,"trailing",l(n({error:!!e.errorMessage})))],2)],2),a(e.$slots,"after")],16),e.errorMessage&&e.errorMessage!==!0&&!e.hiddenErrorMessage?(s(),i("div",g,d(e.errorMessage),1)):u("",!0)],16))}});export{v as default,w as elInputContainerColor};
 //# sourceMappingURL=ElInputContainer.vue.esm2.js.map

package/dist/src/forms/ElInputContainer.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElInputContainer.vue.esm2.js","sources":["../../../src/forms/ElInputContainer.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputContainerColor = ['primary', 'secondary', 'error'] as const;\nexport type ElInputContainerColor = (typeof elInputContainerColor)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { NumberValueType, TextualValueType } from './input';\n\nwithDefaults(\n  defineProps<{\n    modelValue?: TextualValueType | NumberValueType;\n    name: string;\n    label?: string;\n    errorMessage?: string | boolean;\n    hiddenErrorMessage?: boolean;\n    setRequiredMark?: boolean;\n    color?: ElInputContainerColor;\n    noBorder?: boolean;\n  }>(),\n  {\n    modelValue: '',\n    color: 'primary',\n    label: '',\n    errorMessage: false,\n    noBorder: false,\n  },\n);\n</script>\n\n<template>\n  <div\n    v-bind=\"$attrs\"\n    class=\"el-input-container group border-0 p-1 flex flex-col gap-1\"\n    :class=\"{\n      error: !!errorMessage,\n    }\"\n  >\n    <div class=\"flex align-middle text-base\" :class=\"{ 'text-neutral-darker': !errorMessage, 'text-error': !!errorMessage }\">\n      <label :for=\"name\" class=\"block text-base font-medium\">{{ label }}</label>\n      <span v-if=\"label && setRequiredMark\" class=\"ml-0 text-sm font-light\">*</span>\n    </div>\n    <div\n      v-bind=\"$attrs\"\n      class=\"el-input-container group rounded overflow-hidden text-neutral-darker focus-within:ring focus-within:ring-opacity-50\"\n      :class=\"{\n        error: !!errorMessage,\n        'border border-neutral-inactive': !noBorder,\n        'focus-within:border-primary-pressed focus-within:ring-outlined-primary': color === 'primary' && !modelValue,\n        'focus-within:border-primary-active focus-within:ring-outlined-primary ': color === 'primary' && modelValue,\n\n        'focus-within:border-secondary-pressed focus-within:ring-outlined-secondary ': color === 'secondary',\n        'focus-within:border-secondary-active focus-within:ring-outlined-secondary ': color === 'secondary',\n\n        'focus-within:border-error  focus-within:ring-outlined-error': color === 'error',\n      }\"\n    >\n      <div\n        class=\"relative\"\n        :class=\"{\n          'gap-1': label.length > 0,\n        }\"\n      >\n        <div\n          :class=\"{\n            'fill-neutral-inactive': !modelValue,\n\n            'focus-within:fill-primary-pressed': color === 'primary' && !modelValue,\n            'focus-within:fill-primary-active': color === 'primary' && modelValue,\n\n            'focus-within:fill-secondary-pressed': color === 'secondary' && !modelValue,\n            'focus-within:fill-secondary-active': color === 'secondary' && modelValue,\n\n            'fill-error': color === 'error',\n            'fill-neutral-darker': modelValue,\n          }\"\n        >\n          <slot name=\"leading\" v-bind=\"{ error: !!errorMessage }\" />\n        </div>\n        <slot v-bind=\"{ error: !!errorMessage }\" />\n        <div\n          class=\"pointer-events-auto absolute inset-y-0 right-2 z-20 flex cursor-pointer items-center\"\n          :class=\"{ 'text-error': !!errorMessage }\"\n        >\n          <slot name=\"trailing\" v-bind=\"{ error: !!errorMessage }\"> </slot>\n        </div>\n      </div>\n      <slot name=\"after\" />\n      <p\n        v-if=\"!!errorMessage && !errorMessage && !hiddenErrorMessage\"\n        class=\"text-neutral-lighter group-focus-within:text-error group-active-within:text-error mt-1 text-sm\"\n      >\n        {{ errorMessage }}\n      </p>\n    </div>\n  </div>\n</template>\n"],"names":["elInputContainerColor"],"mappings":"6ZACaA,EAAwB,CAAC,UAAW,YAAa,OAAO"}
+{"version":3,"file":"ElInputContainer.vue.esm2.js","sources":["../../../src/forms/ElInputContainer.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputContainerColor = ['primary', 'secondary', 'error'] as const;\nexport type ElInputContainerColor = (typeof elInputContainerColor)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { NumberValueType, TextualValueType } from './input';\n\nwithDefaults(\n  defineProps<{\n    modelValue?: TextualValueType | NumberValueType;\n    name: string;\n    label?: string;\n    errorMessage?: string | boolean;\n    hiddenErrorMessage?: boolean;\n    setRequiredMark?: boolean;\n    color?: ElInputContainerColor;\n    noBorder?: boolean;\n  }>(),\n  {\n    modelValue: '',\n    color: 'primary',\n    label: '',\n    errorMessage: false,\n    noBorder: false,\n  },\n);\n</script>\n\n<template>\n  <div\n    v-bind=\"$attrs\"\n    class=\"el-input-container group border-0 p-1 flex flex-col gap-1\"\n    :class=\"{\n      error: !!errorMessage,\n    }\"\n  >\n    <div class=\"flex align-middle text-base\" :class=\"{ 'text-neutral-darker': !errorMessage, 'text-error': !!errorMessage }\">\n      <label :for=\"name\" class=\"block text-base font-medium\">{{ label }}</label>\n      <span v-if=\"label && setRequiredMark\" class=\"ml-0 text-sm font-light\">*</span>\n    </div>\n    <div\n      v-bind=\"$attrs\"\n      class=\"el-input-container group rounded overflow-hidden text-neutral-darker focus-within:ring focus-within:ring-opacity-50\"\n      :class=\"{\n        error: !!errorMessage,\n        'border border-neutral-inactive': !noBorder,\n        'focus-within:border-primary-pressed focus-within:ring-outlined-primary': color === 'primary' && !modelValue,\n        'focus-within:border-primary-active focus-within:ring-outlined-primary ': color === 'primary' && modelValue,\n\n        'focus-within:border-secondary-pressed focus-within:ring-outlined-secondary ': color === 'secondary',\n        'focus-within:border-secondary-active focus-within:ring-outlined-secondary ': color === 'secondary',\n\n        'focus-within:border-error  focus-within:ring-outlined-error': color === 'error',\n      }\"\n    >\n      <div\n        class=\"relative\"\n        :class=\"{\n          'gap-1': label.length > 0,\n        }\"\n      >\n        <div\n          :class=\"{\n            'fill-neutral-inactive': !modelValue,\n\n            'focus-within:fill-primary-pressed': color === 'primary' && !modelValue,\n            'focus-within:fill-primary-active': color === 'primary' && modelValue,\n\n            'focus-within:fill-secondary-pressed': color === 'secondary' && !modelValue,\n            'focus-within:fill-secondary-active': color === 'secondary' && modelValue,\n\n            'fill-error': color === 'error',\n            'fill-neutral-darker': modelValue,\n          }\"\n        >\n          <slot name=\"leading\" v-bind=\"{ error: !!errorMessage }\" />\n        </div>\n        <slot v-bind=\"{ error: !!errorMessage }\" />\n        <div\n          class=\"pointer-events-auto absolute inset-y-0 right-2 z-20 flex cursor-pointer items-center\"\n          :class=\"{ 'text-error': !!errorMessage }\"\n        >\n          <slot name=\"trailing\" v-bind=\"{ error: !!errorMessage }\"> </slot>\n        </div>\n      </div>\n      <slot name=\"after\" />\n    </div>\n    <div\n      v-if=\"!!errorMessage && errorMessage !== true && !hiddenErrorMessage\"\n      class=\"text-neutral-lighter group-focus-within:text-error group-active-within:text-error mt-1 text-sm\"\n    >\n      {{ errorMessage }}\n    </div>\n  </div>\n</template>\n"],"names":["elInputContainerColor"],"mappings":"6ZACaA,EAAwB,CAAC,UAAW,YAAa,OAAO"}

package/dist/src/forms/ElInputText.vue.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("./input.cjs.js"),g=require("../ElIcon.vue.cjs2.js"),M=require("./ElInputContainer.vue.cjs2.js"),B=require("../ElIconButton.vue.cjs2.js"),$={class:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"},q={key:0},V=["id","name","type","placeholder","disabled","autocomplete","data-cy"],N={key:0},P={key:1},T=["text","password"],w=e.defineComponent({__name:"ElInputText",props:{...d.withTextualElInputProps(),type:{type:String,default:"text"},leadingIcon:{type:Object,default:void 0,required:!1},trailingIcon:{type:Object,default:void 0,required:!1},focusOnMount:{type:Boolean,default:!1},autocomplete:{type:String,default:"off"}},emits:["update:modelValue"],setup(l,{emit:y}){const a=l,o=e.ref(a.type),c=e.ref(null);e.onMounted(()=>{var t;a.focusOnMount&&((t=c.value)==null||t.focus())});const I=y,h=e.computed(()=>a.modelValue),k=e.computed(()=>[a.validation]),{value:r,errorMessage:b,uuid:u,fieldContext:E}=d.useInput(h,k,a.name,t=>{I("update:modelValue",t==null?void 0:t.trim())}),i=e.computed(()=>a.label?a.label.trim().replaceAll(" ",""):a.type),C=()=>{o.value=o.value==="text"?"password":"text"};return(t,s)=>(e.openBlock(),e.createBlock(M.default,e.mergeProps(t.$attrs,{"model-value":e.unref(r),name:t.id||`${e.unref(u)}-${i.value}`,label:t.label,"error-message":a.errorMessage===!1?!1:a.errorMessage||e.unref(b),"hidden-error-message":t.hiddenErrorMessage,"set-required-mark":e.unref(d.showRequiredMark)([t.validation]),color:t.color,class:"relative"}),{leading:e.withCtx(({error:n})=>{var m,p,f;return[e.createElementVNode("div",$,[l.leadingIcon?(e.openBlock(),e.createElementBlock("div",q,[e.createVNode(g.default,{name:l.leadingIcon.name,solid:l.leadingIcon.solid,class:e.normalizeClass(["h-5 w-5",{"text-neutral-lighter":!n,"text-error":n}]),"aria-hidden":"true"},null,8,["name","solid","class"])])):e.createCommentVNode("",!0)]),e.renderSlot(t.$slots,"leading",e.normalizeProps(e.guardReactiveProps({error:n}))),e.withDirectives(e.createElementVNode("input",{id:t.id||`${e.unref(u)}-${i.value}`,ref_key:"inputRef",ref:c,"onUpdate:modelValue":s[0]||(s[0]=v=>e.isRef(r)?r.value=v:null),name:a.name||t.id||`${e.unref(u)}-${i.value}`,type:o.value,class:e.normalizeClass(["el-input truncate",{error:n,"!pl-10":(m=l.leadingIcon)==null?void 0:m.name,"!pl-3":!((p=l.leadingIcon)!=null&&p.name),"!pr-10":(f=l.trailingIcon)==null?void 0:f.name}]),placeholder:t.placeholder,disabled:t.disabled,autocomplete:l.autocomplete,"data-cy":`${i.value}-input`,onBlur:s[1]||(s[1]=v=>e.unref(E).validate())},null,42,V),[[e.vModelDynamic,e.unref(r)]])]}),trailing:e.withCtx(({error:n})=>[l.trailingIcon?(e.openBlock(),e.createElementBlock("span",N,[e.createVNode(g.default,{name:l.trailingIcon.name,solid:l.trailingIcon.solid,class:e.normalizeClass(["h-5 w-5",{"text-neutral-lighter":!n,"text-error":n}]),"aria-hidden":"true"},null,8,["name","solid","class"])])):e.createCommentVNode("",!0),l.type==="password"?(e.openBlock(),e.createElementBlock("span",P,[e.createVNode(B.default,{error:n,icon:{name:o.value==="text"?"EyeSlashIcon":"EyeIcon"},type:"button",tooltip:o.value==="text"?"Nascondi":"Mostra",onClick:C},null,8,["error","icon","tooltip"])])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"trailing",e.normalizeProps(e.guardReactiveProps({error:n})))]),_:3},16,["model-value","name","label","error-message","hidden-error-message","set-required-mark","color"]))}});exports.default=w;exports.elInputTextTypes=T;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("./input.cjs.js"),g=require("../ElIcon.vue.cjs2.js"),M=require("./ElInputContainer.vue.cjs2.js"),B=require("../ElIconButton.vue.cjs2.js"),$={class:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"},q={key:0},V=["id","name","type","placeholder","disabled","autocomplete","data-cy"],N={key:0},P={key:1},T=["text","password"],w=e.defineComponent({__name:"ElInputText",props:{...d.withTextualElInputProps(),type:{type:String,default:"text"},leadingIcon:{type:Object,default:void 0,required:!1},trailingIcon:{type:Object,default:void 0,required:!1},focusOnMount:{type:Boolean,default:!1},autocomplete:{type:String,default:"off"}},emits:["update:modelValue"],setup(l,{emit:y}){const a=l,o=e.ref(a.type),c=e.ref(null);e.onMounted(()=>{var t;a.focusOnMount&&((t=c.value)==null||t.focus())});const h=y,I=e.computed(()=>a.modelValue),k=e.computed(()=>[a.validation]),{value:r,errorMessage:b,uuid:s,fieldContext:E}=d.useInput(I,k,a.name,t=>{h("update:modelValue",t==null?void 0:t.trim())}),i=e.computed(()=>a.label?a.label.trim().replaceAll(" ",""):a.type),C=()=>{o.value=o.value==="text"?"password":"text"};return(t,u)=>(e.openBlock(),e.createBlock(M.default,e.mergeProps(t.$attrs,{"model-value":e.unref(r),name:t.id||`${e.unref(s)}-${i.value}`,label:t.label,"error-message":a.errorMessage===!1?!1:a.errorMessage||e.unref(b),"hidden-error-message":t.hiddenErrorMessage,"set-required-mark":e.unref(d.showRequiredMark)([t.validation]),color:t.color,class:"relative"}),{leading:e.withCtx(({error:n})=>{var m,p,f;return[e.createElementVNode("div",$,[l.leadingIcon?(e.openBlock(),e.createElementBlock("div",q,[e.createVNode(g.default,{name:l.leadingIcon.name,solid:l.leadingIcon.solid,class:e.normalizeClass(["h-5 w-5",{"text-neutral-lighter":!n,"text-error":n}]),"aria-hidden":"true"},null,8,["name","solid","class"])])):e.createCommentVNode("",!0)]),e.renderSlot(t.$slots,"leading",e.normalizeProps(e.guardReactiveProps({error:n}))),e.withDirectives(e.createElementVNode("input",{id:t.id||`${e.unref(s)}-${i.value}`,ref_key:"inputRef",ref:c,"onUpdate:modelValue":u[0]||(u[0]=v=>e.isRef(r)?r.value=v:null),name:a.name||t.id||`${e.unref(s)}-${i.value}`,type:o.value,class:e.normalizeClass(["el-input truncate",{error:n,"!pl-10":(m=l.leadingIcon)==null?void 0:m.name,"!pl-3":!((p=l.leadingIcon)!=null&&p.name),"!pr-10":(f=l.trailingIcon)==null?void 0:f.name}]),placeholder:t.placeholder,disabled:t.disabled,autocomplete:l.autocomplete,"data-cy":`${i.value}-input`,onBlur:u[1]||(u[1]=v=>e.unref(E).validate())},null,42,V),[[e.vModelDynamic,e.unref(r)]])]}),trailing:e.withCtx(({error:n})=>[l.trailingIcon?(e.openBlock(),e.createElementBlock("span",N,[e.createVNode(g.default,{name:l.trailingIcon.name,solid:l.trailingIcon.solid,class:e.normalizeClass(["h-5 w-5",{"text-neutral-lighter":!n,"text-error":n}]),"aria-hidden":"true"},null,8,["name","solid","class"])])):e.createCommentVNode("",!0),l.type==="password"?(e.openBlock(),e.createElementBlock("span",P,[e.createVNode(B.default,{error:n,icon:{name:o.value==="text"?"EyeSlashIcon":"EyeIcon"},type:"button","hide-tooltip-on-change":!0,tooltip:o.value==="text"?"Nascondi":"Mostra",onClick:C},null,8,["error","icon","tooltip"])])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"trailing",e.normalizeProps(e.guardReactiveProps({error:n})))]),_:3},16,["model-value","name","label","error-message","hidden-error-message","set-required-mark","color"]))}});exports.default=w;exports.elInputTextTypes=T;
 //# sourceMappingURL=ElInputText.vue.cjs2.js.map

package/dist/src/forms/ElInputText.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElInputText.vue.cjs2.js","sources":["../../../src/forms/ElInputText.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputTextTypes = ['text', 'password'] as const;\nexport type ElInputTextType = (typeof elInputTextTypes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { useInput, showRequiredMark, TextualValueType, withTextualElInputProps } from '@/forms/input';\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport ElIconButton from '@/ElIconButton.vue';\n\nconst props = defineProps({\n  ...withTextualElInputProps(),\n  type: {\n    type: String as PropType<ElInputTextType>,\n    default: 'text',\n  },\n  leadingIcon: {\n    type: Object as PropType<ElIconProps>,\n    default: undefined,\n    required: false,\n  },\n  trailingIcon: {\n    type: Object as PropType<ElIconProps>,\n    default: undefined,\n    required: false,\n  },\n  focusOnMount: {\n    type: Boolean,\n    default: false,\n  },\n  autocomplete: {\n    type: String,\n    default: 'off',\n  },\n});\n\nconst inputType = ref<ElInputTextType>(props.type);\nconst inputRef = ref<HTMLInputElement | null>(null);\n\nonMounted(() => {\n  if (props.focusOnMount) {\n    inputRef.value?.focus();\n  }\n});\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', value: TextualValueType): void;\n}>();\n\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\n\nconst { value, errorMessage, uuid, fieldContext } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n  emit('update:modelValue', newValue?.trim());\n});\n\nconst defaultId = computed(() => (props.label ? props.label.trim().replaceAll(' ', '') : props.type));\n\nconst handleEyesPasswordClick = () => {\n  inputType.value = inputType.value === 'text' ? 'password' : 'text';\n};\n</script>\n\n<template>\n  <ElInputContainer\n    v-bind=\"$attrs\"\n    :model-value=\"value\"\n    :name=\"id || `${uuid}-${defaultId}`\"\n    :label=\"label\"\n    :error-message=\"props.errorMessage === false ? false : props.errorMessage || errorMessage\"\n    :hidden-error-message=\"hiddenErrorMessage\"\n    :set-required-mark=\"showRequiredMark([validation])\"\n    :color=\"color\"\n    class=\"relative\"\n  >\n    <template #leading=\"{ error }\">\n      <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3\">\n        <div v-if=\"leadingIcon\">\n          <ElIcon\n            :name=\"leadingIcon.name\"\n            :solid=\"leadingIcon.solid\"\n            class=\"h-5 w-5\"\n            aria-hidden=\"true\"\n            :class=\"{\n              'text-neutral-lighter': !error,\n              'text-error': error,\n            }\"\n          />\n        </div>\n      </div>\n\n      <slot name=\"leading\" v-bind=\"{ error }\" />\n\n      <input\n        :id=\"id || `${uuid}-${defaultId}`\"\n        ref=\"inputRef\"\n        v-model=\"value\"\n        :name=\"props.name || id || `${uuid}-${defaultId}`\"\n        :type=\"inputType\"\n        class=\"el-input truncate\"\n        :class=\"{\n          error,\n          '!pl-10': leadingIcon?.name,\n          '!pl-3': !leadingIcon?.name,\n          '!pr-10': trailingIcon?.name,\n        }\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :autocomplete=\"autocomplete\"\n        :data-cy=\"`${defaultId}-input`\"\n        @blur=\"fieldContext.validate()\"\n      />\n    </template>\n\n    <template #trailing=\"{ error }\">\n      <span v-if=\"trailingIcon\">\n        <ElIcon\n          :name=\"trailingIcon.name\"\n          :solid=\"trailingIcon.solid\"\n          class=\"h-5 w-5\"\n          aria-hidden=\"true\"\n          :class=\"{\n            'text-neutral-lighter': !error,\n            'text-error': error,\n          }\"\n        />\n      </span>\n\n      <span v-if=\"type === 'password'\">\n        <ElIconButton\n          :error=\"error\"\n          :icon=\"{\n            name: inputType === 'text' ? 'EyeSlashIcon' : 'EyeIcon',\n          }\"\n          type=\"button\"\n          :tooltip=\"inputType === 'text' ? 'Nascondi' : 'Mostra'\"\n          @click=\"handleEyesPasswordClick\"\n        />\n      </span>\n\n      <slot name=\"trailing\" v-bind=\"{ error }\" />\n    </template>\n  </ElInputContainer>\n</template>\n"],"names":["elInputTextTypes","props","__props","inputType","ref","inputRef","onMounted","_a","emit","__emit","computedModelValue","computed","computedValidation","value","errorMessage","uuid","fieldContext","useInput","newValue","defaultId","handleEyesPasswordClick"],"mappings":"+cACaA,EAAmB,CAAC,OAAQ,UAAU,8VAWnD,MAAMC,EAAQC,EA0BRC,EAAYC,EAAAA,IAAqBH,EAAM,IAAI,EAC3CI,EAAWD,MAA6B,IAAI,EAElDE,EAAAA,UAAU,IAAM,OACVL,EAAM,gBACRM,EAAAF,EAAS,QAAT,MAAAE,EAAgB,QAClB,CACD,EAED,MAAMC,EAAOC,EAIPC,EAAqBC,EAAA,SAAS,IAAMV,EAAM,UAAU,EACpDW,EAAqBD,EAAAA,SAAS,IAAM,CAACV,EAAM,UAAU,CAAC,EAEtD,CAAE,MAAAY,EAAO,aAAAC,EAAc,KAAAC,EAAM,aAAAC,CAAiB,EAAAC,WAASP,EAAoBE,EAAoBX,EAAM,KAAkBiB,GAAA,CACtHV,EAAA,oBAAqBU,GAAA,YAAAA,EAAU,MAAM,CAAA,CAC3C,EAEKC,EAAYR,EAAAA,SAAS,IAAOV,EAAM,MAAQA,EAAM,MAAM,KAAK,EAAE,WAAW,IAAK,EAAE,EAAIA,EAAM,IAAK,EAE9FmB,EAA0B,IAAM,CACpCjB,EAAU,MAAQA,EAAU,QAAU,OAAS,WAAa,MAAA"}
+{"version":3,"file":"ElInputText.vue.cjs2.js","sources":["../../../src/forms/ElInputText.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputTextTypes = ['text', 'password'] as const;\nexport type ElInputTextType = (typeof elInputTextTypes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { useInput, showRequiredMark, TextualValueType, withTextualElInputProps } from '@/forms/input';\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport ElIconButton from '@/ElIconButton.vue';\n\nconst props = defineProps({\n  ...withTextualElInputProps(),\n  type: {\n    type: String as PropType<ElInputTextType>,\n    default: 'text',\n  },\n  leadingIcon: {\n    type: Object as PropType<ElIconProps>,\n    default: undefined,\n    required: false,\n  },\n  trailingIcon: {\n    type: Object as PropType<ElIconProps>,\n    default: undefined,\n    required: false,\n  },\n  focusOnMount: {\n    type: Boolean,\n    default: false,\n  },\n  autocomplete: {\n    type: String,\n    default: 'off',\n  },\n});\n\nconst inputType = ref<ElInputTextType>(props.type);\nconst inputRef = ref<HTMLInputElement | null>(null);\n\nonMounted(() => {\n  if (props.focusOnMount) {\n    inputRef.value?.focus();\n  }\n});\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', value: TextualValueType): void;\n}>();\n\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\n\nconst { value, errorMessage, uuid, fieldContext } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n  emit('update:modelValue', newValue?.trim());\n});\n\nconst defaultId = computed(() => (props.label ? props.label.trim().replaceAll(' ', '') : props.type));\n\nconst handleEyesPasswordClick = () => {\n  inputType.value = inputType.value === 'text' ? 'password' : 'text';\n};\n</script>\n\n<template>\n  <ElInputContainer\n    v-bind=\"$attrs\"\n    :model-value=\"value\"\n    :name=\"id || `${uuid}-${defaultId}`\"\n    :label=\"label\"\n    :error-message=\"props.errorMessage === false ? false : props.errorMessage || errorMessage\"\n    :hidden-error-message=\"hiddenErrorMessage\"\n    :set-required-mark=\"showRequiredMark([validation])\"\n    :color=\"color\"\n    class=\"relative\"\n  >\n    <template #leading=\"{ error }\">\n      <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3\">\n        <div v-if=\"leadingIcon\">\n          <ElIcon\n            :name=\"leadingIcon.name\"\n            :solid=\"leadingIcon.solid\"\n            class=\"h-5 w-5\"\n            aria-hidden=\"true\"\n            :class=\"{\n              'text-neutral-lighter': !error,\n              'text-error': error,\n            }\"\n          />\n        </div>\n      </div>\n\n      <slot name=\"leading\" v-bind=\"{ error }\" />\n\n      <input\n        :id=\"id || `${uuid}-${defaultId}`\"\n        ref=\"inputRef\"\n        v-model=\"value\"\n        :name=\"props.name || id || `${uuid}-${defaultId}`\"\n        :type=\"inputType\"\n        class=\"el-input truncate\"\n        :class=\"{\n          error,\n          '!pl-10': leadingIcon?.name,\n          '!pl-3': !leadingIcon?.name,\n          '!pr-10': trailingIcon?.name,\n        }\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :autocomplete=\"autocomplete\"\n        :data-cy=\"`${defaultId}-input`\"\n        @blur=\"fieldContext.validate()\"\n      />\n    </template>\n\n    <template #trailing=\"{ error }\">\n      <span v-if=\"trailingIcon\">\n        <ElIcon\n          :name=\"trailingIcon.name\"\n          :solid=\"trailingIcon.solid\"\n          class=\"h-5 w-5\"\n          aria-hidden=\"true\"\n          :class=\"{\n            'text-neutral-lighter': !error,\n            'text-error': error,\n          }\"\n        />\n      </span>\n\n      <span v-if=\"type === 'password'\">\n        <ElIconButton\n          :error=\"error\"\n          :icon=\"{\n            name: inputType === 'text' ? 'EyeSlashIcon' : 'EyeIcon',\n          }\"\n          type=\"button\"\n          :hide-tooltip-on-change=\"true\"\n          :tooltip=\"inputType === 'text' ? 'Nascondi' : 'Mostra'\"\n          @click=\"handleEyesPasswordClick\"\n        />\n      </span>\n\n      <slot name=\"trailing\" v-bind=\"{ error }\" />\n    </template>\n  </ElInputContainer>\n</template>\n"],"names":["elInputTextTypes","props","__props","inputType","ref","inputRef","onMounted","_a","emit","__emit","computedModelValue","computed","computedValidation","value","errorMessage","uuid","fieldContext","useInput","newValue","defaultId","handleEyesPasswordClick"],"mappings":"+cACaA,EAAmB,CAAC,OAAQ,UAAU,8VAWnD,MAAMC,EAAQC,EA0BRC,EAAYC,EAAAA,IAAqBH,EAAM,IAAI,EAC3CI,EAAWD,MAA6B,IAAI,EAElDE,EAAAA,UAAU,IAAM,OACVL,EAAM,gBACRM,EAAAF,EAAS,QAAT,MAAAE,EAAgB,QAClB,CACD,EAED,MAAMC,EAAOC,EAIPC,EAAqBC,EAAA,SAAS,IAAMV,EAAM,UAAU,EACpDW,EAAqBD,EAAAA,SAAS,IAAM,CAACV,EAAM,UAAU,CAAC,EAEtD,CAAE,MAAAY,EAAO,aAAAC,EAAc,KAAAC,EAAM,aAAAC,CAAiB,EAAAC,WAASP,EAAoBE,EAAoBX,EAAM,KAAkBiB,GAAA,CACtHV,EAAA,oBAAqBU,GAAA,YAAAA,EAAU,MAAM,CAAA,CAC3C,EAEKC,EAAYR,EAAAA,SAAS,IAAOV,EAAM,MAAQA,EAAM,MAAM,KAAK,EAAE,WAAW,IAAK,EAAE,EAAIA,EAAM,IAAK,EAE9FmB,EAA0B,IAAM,CACpCjB,EAAU,MAAQA,EAAU,QAAU,OAAS,WAAa,MAAA"}

package/dist/src/forms/ElInputText.vue.esm2.js

@@ -1,2 +1,2 @@
-import{defineComponent as O,ref as b,onMounted as S,computed as m,openBlock as r,createBlock as j,mergeProps as z,unref as o,withCtx as k,createElementVNode as M,createElementBlock as c,createVNode as p,normalizeClass as f,createCommentVNode as g,renderSlot as E,normalizeProps as C,guardReactiveProps as w,withDirectives as D,isRef as A,vModelDynamic as U}from"vue";import{withTextualElInputProps as F,useInput as G,showRequiredMark as H}from"./input.esm.js";import x from"../ElIcon.vue.esm2.js";import J from"./ElInputContainer.vue.esm2.js";import K from"../ElIconButton.vue.esm2.js";const L={class:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"},Q={key:0},W=["id","name","type","placeholder","disabled","autocomplete","data-cy"],X={key:0},Y={key:1},ae=["text","password"],oe=O({__name:"ElInputText",props:{...F(),type:{type:String,default:"text"},leadingIcon:{type:Object,default:void 0,required:!1},trailingIcon:{type:Object,default:void 0,required:!1},focusOnMount:{type:Boolean,default:!1},autocomplete:{type:String,default:"off"}},emits:["update:modelValue"],setup(t,{emit:q}){const l=t,n=b(l.type),v=b(null);S(()=>{var e;l.focusOnMount&&((e=v.value)==null||e.focus())});const B=q,P=m(()=>l.modelValue),R=m(()=>[l.validation]),{value:i,errorMessage:T,uuid:u,fieldContext:V}=G(P,R,l.name,e=>{B("update:modelValue",e==null?void 0:e.trim())}),s=m(()=>l.label?l.label.trim().replaceAll(" ",""):l.type),N=()=>{n.value=n.value==="text"?"password":"text"};return(e,d)=>(r(),j(J,z(e.$attrs,{"model-value":o(i),name:e.id||`${o(u)}-${s.value}`,label:e.label,"error-message":l.errorMessage===!1?!1:l.errorMessage||o(T),"hidden-error-message":e.hiddenErrorMessage,"set-required-mark":o(H)([e.validation]),color:e.color,class:"relative"}),{leading:k(({error:a})=>{var y,h,I;return[M("div",L,[t.leadingIcon?(r(),c("div",Q,[p(x,{name:t.leadingIcon.name,solid:t.leadingIcon.solid,class:f(["h-5 w-5",{"text-neutral-lighter":!a,"text-error":a}]),"aria-hidden":"true"},null,8,["name","solid","class"])])):g("",!0)]),E(e.$slots,"leading",C(w({error:a}))),D(M("input",{id:e.id||`${o(u)}-${s.value}`,ref_key:"inputRef",ref:v,"onUpdate:modelValue":d[0]||(d[0]=$=>A(i)?i.value=$:null),name:l.name||e.id||`${o(u)}-${s.value}`,type:n.value,class:f(["el-input truncate",{error:a,"!pl-10":(y=t.leadingIcon)==null?void 0:y.name,"!pl-3":!((h=t.leadingIcon)!=null&&h.name),"!pr-10":(I=t.trailingIcon)==null?void 0:I.name}]),placeholder:e.placeholder,disabled:e.disabled,autocomplete:t.autocomplete,"data-cy":`${s.value}-input`,onBlur:d[1]||(d[1]=$=>o(V).validate())},null,42,W),[[U,o(i)]])]}),trailing:k(({error:a})=>[t.trailingIcon?(r(),c("span",X,[p(x,{name:t.trailingIcon.name,solid:t.trailingIcon.solid,class:f(["h-5 w-5",{"text-neutral-lighter":!a,"text-error":a}]),"aria-hidden":"true"},null,8,["name","solid","class"])])):g("",!0),t.type==="password"?(r(),c("span",Y,[p(K,{error:a,icon:{name:n.value==="text"?"EyeSlashIcon":"EyeIcon"},type:"button",tooltip:n.value==="text"?"Nascondi":"Mostra",onClick:N},null,8,["error","icon","tooltip"])])):g("",!0),E(e.$slots,"trailing",C(w({error:a})))]),_:3},16,["model-value","name","label","error-message","hidden-error-message","set-required-mark","color"]))}});export{oe as default,ae as elInputTextTypes};
+import{defineComponent as O,ref as b,onMounted as S,computed as m,openBlock as r,createBlock as j,mergeProps as z,unref as o,withCtx as k,createElementVNode as M,createElementBlock as c,createVNode as p,normalizeClass as f,createCommentVNode as g,renderSlot as E,normalizeProps as C,guardReactiveProps as w,withDirectives as D,isRef as A,vModelDynamic as U}from"vue";import{withTextualElInputProps as F,useInput as G,showRequiredMark as H}from"./input.esm.js";import x from"../ElIcon.vue.esm2.js";import J from"./ElInputContainer.vue.esm2.js";import K from"../ElIconButton.vue.esm2.js";const L={class:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"},Q={key:0},W=["id","name","type","placeholder","disabled","autocomplete","data-cy"],X={key:0},Y={key:1},ae=["text","password"],oe=O({__name:"ElInputText",props:{...F(),type:{type:String,default:"text"},leadingIcon:{type:Object,default:void 0,required:!1},trailingIcon:{type:Object,default:void 0,required:!1},focusOnMount:{type:Boolean,default:!1},autocomplete:{type:String,default:"off"}},emits:["update:modelValue"],setup(t,{emit:q}){const l=t,n=b(l.type),v=b(null);S(()=>{var e;l.focusOnMount&&((e=v.value)==null||e.focus())});const B=q,P=m(()=>l.modelValue),R=m(()=>[l.validation]),{value:i,errorMessage:T,uuid:u,fieldContext:V}=G(P,R,l.name,e=>{B("update:modelValue",e==null?void 0:e.trim())}),s=m(()=>l.label?l.label.trim().replaceAll(" ",""):l.type),N=()=>{n.value=n.value==="text"?"password":"text"};return(e,d)=>(r(),j(J,z(e.$attrs,{"model-value":o(i),name:e.id||`${o(u)}-${s.value}`,label:e.label,"error-message":l.errorMessage===!1?!1:l.errorMessage||o(T),"hidden-error-message":e.hiddenErrorMessage,"set-required-mark":o(H)([e.validation]),color:e.color,class:"relative"}),{leading:k(({error:a})=>{var y,h,I;return[M("div",L,[t.leadingIcon?(r(),c("div",Q,[p(x,{name:t.leadingIcon.name,solid:t.leadingIcon.solid,class:f(["h-5 w-5",{"text-neutral-lighter":!a,"text-error":a}]),"aria-hidden":"true"},null,8,["name","solid","class"])])):g("",!0)]),E(e.$slots,"leading",C(w({error:a}))),D(M("input",{id:e.id||`${o(u)}-${s.value}`,ref_key:"inputRef",ref:v,"onUpdate:modelValue":d[0]||(d[0]=$=>A(i)?i.value=$:null),name:l.name||e.id||`${o(u)}-${s.value}`,type:n.value,class:f(["el-input truncate",{error:a,"!pl-10":(y=t.leadingIcon)==null?void 0:y.name,"!pl-3":!((h=t.leadingIcon)!=null&&h.name),"!pr-10":(I=t.trailingIcon)==null?void 0:I.name}]),placeholder:e.placeholder,disabled:e.disabled,autocomplete:t.autocomplete,"data-cy":`${s.value}-input`,onBlur:d[1]||(d[1]=$=>o(V).validate())},null,42,W),[[U,o(i)]])]}),trailing:k(({error:a})=>[t.trailingIcon?(r(),c("span",X,[p(x,{name:t.trailingIcon.name,solid:t.trailingIcon.solid,class:f(["h-5 w-5",{"text-neutral-lighter":!a,"text-error":a}]),"aria-hidden":"true"},null,8,["name","solid","class"])])):g("",!0),t.type==="password"?(r(),c("span",Y,[p(K,{error:a,icon:{name:n.value==="text"?"EyeSlashIcon":"EyeIcon"},type:"button","hide-tooltip-on-change":!0,tooltip:n.value==="text"?"Nascondi":"Mostra",onClick:N},null,8,["error","icon","tooltip"])])):g("",!0),E(e.$slots,"trailing",C(w({error:a})))]),_:3},16,["model-value","name","label","error-message","hidden-error-message","set-required-mark","color"]))}});export{oe as default,ae as elInputTextTypes};
 //# sourceMappingURL=ElInputText.vue.esm2.js.map

package/dist/src/forms/ElInputText.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElInputText.vue.esm2.js","sources":["../../../src/forms/ElInputText.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputTextTypes = ['text', 'password'] as const;\nexport type ElInputTextType = (typeof elInputTextTypes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { useInput, showRequiredMark, TextualValueType, withTextualElInputProps } from '@/forms/input';\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport ElIconButton from '@/ElIconButton.vue';\n\nconst props = defineProps({\n  ...withTextualElInputProps(),\n  type: {\n    type: String as PropType<ElInputTextType>,\n    default: 'text',\n  },\n  leadingIcon: {\n    type: Object as PropType<ElIconProps>,\n    default: undefined,\n    required: false,\n  },\n  trailingIcon: {\n    type: Object as PropType<ElIconProps>,\n    default: undefined,\n    required: false,\n  },\n  focusOnMount: {\n    type: Boolean,\n    default: false,\n  },\n  autocomplete: {\n    type: String,\n    default: 'off',\n  },\n});\n\nconst inputType = ref<ElInputTextType>(props.type);\nconst inputRef = ref<HTMLInputElement | null>(null);\n\nonMounted(() => {\n  if (props.focusOnMount) {\n    inputRef.value?.focus();\n  }\n});\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', value: TextualValueType): void;\n}>();\n\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\n\nconst { value, errorMessage, uuid, fieldContext } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n  emit('update:modelValue', newValue?.trim());\n});\n\nconst defaultId = computed(() => (props.label ? props.label.trim().replaceAll(' ', '') : props.type));\n\nconst handleEyesPasswordClick = () => {\n  inputType.value = inputType.value === 'text' ? 'password' : 'text';\n};\n</script>\n\n<template>\n  <ElInputContainer\n    v-bind=\"$attrs\"\n    :model-value=\"value\"\n    :name=\"id || `${uuid}-${defaultId}`\"\n    :label=\"label\"\n    :error-message=\"props.errorMessage === false ? false : props.errorMessage || errorMessage\"\n    :hidden-error-message=\"hiddenErrorMessage\"\n    :set-required-mark=\"showRequiredMark([validation])\"\n    :color=\"color\"\n    class=\"relative\"\n  >\n    <template #leading=\"{ error }\">\n      <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3\">\n        <div v-if=\"leadingIcon\">\n          <ElIcon\n            :name=\"leadingIcon.name\"\n            :solid=\"leadingIcon.solid\"\n            class=\"h-5 w-5\"\n            aria-hidden=\"true\"\n            :class=\"{\n              'text-neutral-lighter': !error,\n              'text-error': error,\n            }\"\n          />\n        </div>\n      </div>\n\n      <slot name=\"leading\" v-bind=\"{ error }\" />\n\n      <input\n        :id=\"id || `${uuid}-${defaultId}`\"\n        ref=\"inputRef\"\n        v-model=\"value\"\n        :name=\"props.name || id || `${uuid}-${defaultId}`\"\n        :type=\"inputType\"\n        class=\"el-input truncate\"\n        :class=\"{\n          error,\n          '!pl-10': leadingIcon?.name,\n          '!pl-3': !leadingIcon?.name,\n          '!pr-10': trailingIcon?.name,\n        }\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :autocomplete=\"autocomplete\"\n        :data-cy=\"`${defaultId}-input`\"\n        @blur=\"fieldContext.validate()\"\n      />\n    </template>\n\n    <template #trailing=\"{ error }\">\n      <span v-if=\"trailingIcon\">\n        <ElIcon\n          :name=\"trailingIcon.name\"\n          :solid=\"trailingIcon.solid\"\n          class=\"h-5 w-5\"\n          aria-hidden=\"true\"\n          :class=\"{\n            'text-neutral-lighter': !error,\n            'text-error': error,\n          }\"\n        />\n      </span>\n\n      <span v-if=\"type === 'password'\">\n        <ElIconButton\n          :error=\"error\"\n          :icon=\"{\n            name: inputType === 'text' ? 'EyeSlashIcon' : 'EyeIcon',\n          }\"\n          type=\"button\"\n          :tooltip=\"inputType === 'text' ? 'Nascondi' : 'Mostra'\"\n          @click=\"handleEyesPasswordClick\"\n        />\n      </span>\n\n      <slot name=\"trailing\" v-bind=\"{ error }\" />\n    </template>\n  </ElInputContainer>\n</template>\n"],"names":["elInputTextTypes","props","__props","inputType","ref","inputRef","onMounted","_a","emit","__emit","computedModelValue","computed","computedValidation","value","errorMessage","uuid","fieldContext","useInput","newValue","defaultId","handleEyesPasswordClick"],"mappings":"wwBACaA,GAAmB,CAAC,OAAQ,UAAU,uTAWnD,MAAMC,EAAQC,EA0BRC,EAAYC,EAAqBH,EAAM,IAAI,EAC3CI,EAAWD,EAA6B,IAAI,EAElDE,EAAU,IAAM,OACVL,EAAM,gBACRM,EAAAF,EAAS,QAAT,MAAAE,EAAgB,QAClB,CACD,EAED,MAAMC,EAAOC,EAIPC,EAAqBC,EAAS,IAAMV,EAAM,UAAU,EACpDW,EAAqBD,EAAS,IAAM,CAACV,EAAM,UAAU,CAAC,EAEtD,CAAE,MAAAY,EAAO,aAAAC,EAAc,KAAAC,EAAM,aAAAC,CAAiB,EAAAC,EAASP,EAAoBE,EAAoBX,EAAM,KAAkBiB,GAAA,CACtHV,EAAA,oBAAqBU,GAAA,YAAAA,EAAU,MAAM,CAAA,CAC3C,EAEKC,EAAYR,EAAS,IAAOV,EAAM,MAAQA,EAAM,MAAM,KAAK,EAAE,WAAW,IAAK,EAAE,EAAIA,EAAM,IAAK,EAE9FmB,EAA0B,IAAM,CACpCjB,EAAU,MAAQA,EAAU,QAAU,OAAS,WAAa,MAAA"}
+{"version":3,"file":"ElInputText.vue.esm2.js","sources":["../../../src/forms/ElInputText.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputTextTypes = ['text', 'password'] as const;\nexport type ElInputTextType = (typeof elInputTextTypes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { useInput, showRequiredMark, TextualValueType, withTextualElInputProps } from '@/forms/input';\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport ElIconButton from '@/ElIconButton.vue';\n\nconst props = defineProps({\n  ...withTextualElInputProps(),\n  type: {\n    type: String as PropType<ElInputTextType>,\n    default: 'text',\n  },\n  leadingIcon: {\n    type: Object as PropType<ElIconProps>,\n    default: undefined,\n    required: false,\n  },\n  trailingIcon: {\n    type: Object as PropType<ElIconProps>,\n    default: undefined,\n    required: false,\n  },\n  focusOnMount: {\n    type: Boolean,\n    default: false,\n  },\n  autocomplete: {\n    type: String,\n    default: 'off',\n  },\n});\n\nconst inputType = ref<ElInputTextType>(props.type);\nconst inputRef = ref<HTMLInputElement | null>(null);\n\nonMounted(() => {\n  if (props.focusOnMount) {\n    inputRef.value?.focus();\n  }\n});\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', value: TextualValueType): void;\n}>();\n\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\n\nconst { value, errorMessage, uuid, fieldContext } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n  emit('update:modelValue', newValue?.trim());\n});\n\nconst defaultId = computed(() => (props.label ? props.label.trim().replaceAll(' ', '') : props.type));\n\nconst handleEyesPasswordClick = () => {\n  inputType.value = inputType.value === 'text' ? 'password' : 'text';\n};\n</script>\n\n<template>\n  <ElInputContainer\n    v-bind=\"$attrs\"\n    :model-value=\"value\"\n    :name=\"id || `${uuid}-${defaultId}`\"\n    :label=\"label\"\n    :error-message=\"props.errorMessage === false ? false : props.errorMessage || errorMessage\"\n    :hidden-error-message=\"hiddenErrorMessage\"\n    :set-required-mark=\"showRequiredMark([validation])\"\n    :color=\"color\"\n    class=\"relative\"\n  >\n    <template #leading=\"{ error }\">\n      <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3\">\n        <div v-if=\"leadingIcon\">\n          <ElIcon\n            :name=\"leadingIcon.name\"\n            :solid=\"leadingIcon.solid\"\n            class=\"h-5 w-5\"\n            aria-hidden=\"true\"\n            :class=\"{\n              'text-neutral-lighter': !error,\n              'text-error': error,\n            }\"\n          />\n        </div>\n      </div>\n\n      <slot name=\"leading\" v-bind=\"{ error }\" />\n\n      <input\n        :id=\"id || `${uuid}-${defaultId}`\"\n        ref=\"inputRef\"\n        v-model=\"value\"\n        :name=\"props.name || id || `${uuid}-${defaultId}`\"\n        :type=\"inputType\"\n        class=\"el-input truncate\"\n        :class=\"{\n          error,\n          '!pl-10': leadingIcon?.name,\n          '!pl-3': !leadingIcon?.name,\n          '!pr-10': trailingIcon?.name,\n        }\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :autocomplete=\"autocomplete\"\n        :data-cy=\"`${defaultId}-input`\"\n        @blur=\"fieldContext.validate()\"\n      />\n    </template>\n\n    <template #trailing=\"{ error }\">\n      <span v-if=\"trailingIcon\">\n        <ElIcon\n          :name=\"trailingIcon.name\"\n          :solid=\"trailingIcon.solid\"\n          class=\"h-5 w-5\"\n          aria-hidden=\"true\"\n          :class=\"{\n            'text-neutral-lighter': !error,\n            'text-error': error,\n          }\"\n        />\n      </span>\n\n      <span v-if=\"type === 'password'\">\n        <ElIconButton\n          :error=\"error\"\n          :icon=\"{\n            name: inputType === 'text' ? 'EyeSlashIcon' : 'EyeIcon',\n          }\"\n          type=\"button\"\n          :hide-tooltip-on-change=\"true\"\n          :tooltip=\"inputType === 'text' ? 'Nascondi' : 'Mostra'\"\n          @click=\"handleEyesPasswordClick\"\n        />\n      </span>\n\n      <slot name=\"trailing\" v-bind=\"{ error }\" />\n    </template>\n  </ElInputContainer>\n</template>\n"],"names":["elInputTextTypes","props","__props","inputType","ref","inputRef","onMounted","_a","emit","__emit","computedModelValue","computed","computedValidation","value","errorMessage","uuid","fieldContext","useInput","newValue","defaultId","handleEyesPasswordClick"],"mappings":"wwBACaA,GAAmB,CAAC,OAAQ,UAAU,uTAWnD,MAAMC,EAAQC,EA0BRC,EAAYC,EAAqBH,EAAM,IAAI,EAC3CI,EAAWD,EAA6B,IAAI,EAElDE,EAAU,IAAM,OACVL,EAAM,gBACRM,EAAAF,EAAS,QAAT,MAAAE,EAAgB,QAClB,CACD,EAED,MAAMC,EAAOC,EAIPC,EAAqBC,EAAS,IAAMV,EAAM,UAAU,EACpDW,EAAqBD,EAAS,IAAM,CAACV,EAAM,UAAU,CAAC,EAEtD,CAAE,MAAAY,EAAO,aAAAC,EAAc,KAAAC,EAAM,aAAAC,CAAiB,EAAAC,EAASP,EAAoBE,EAAoBX,EAAM,KAAkBiB,GAAA,CACtHV,EAAA,oBAAqBU,GAAA,YAAAA,EAAU,MAAM,CAAA,CAC3C,EAEKC,EAAYR,EAAS,IAAOV,EAAM,MAAQA,EAAM,MAAM,KAAK,EAAE,WAAW,IAAK,EAAE,EAAIA,EAAM,IAAK,EAE9FmB,EAA0B,IAAM,CACpCjB,EAAU,MAAQA,EAAU,QAAU,OAAS,WAAa,MAAA"}

package/dist/table/ElServerSideResponsiveTable.vue.d.ts

@@ -157,6 +157,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
                 tooltipDelay?: (string | number) | undefined;
                 badgeColor?: import('..').ElBadgeColors | undefined;
                 showTooltipOnMobile?: boolean | undefined;
+                hideTooltipOnChange?: boolean | undefined;
                 key?: (string | number | symbol) | undefined;
                 ref?: any;
                 ref_for?: boolean | undefined;
@@ -225,6 +226,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
                     tooltipDelay?: (string | number) | undefined;
                     badgeColor?: import('..').ElBadgeColors | undefined;
                     showTooltipOnMobile?: boolean | undefined;
+                    hideTooltipOnChange?: boolean | undefined;
                     key?: (string | number | symbol) | undefined;
                     ref?: any;
                     ref_for?: boolean | undefined;

package/package.json

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