@davincihealthcare/elty-design-system-vue 2.10.4 → 2.12.0

package/dist/ElInlineBanner.vue.d.ts

@@ -7,6 +7,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     status?: ElInlineBannerStatuses;
     title?: string;
     description: string;
+    html?: boolean;
     loading?: boolean;
     action?: Pick<InstanceType<typeof ElButton>["$props"], "label" | "variant" | "onClick" | "icon" | "iconRight" | "loading" | "loadOnClick">;
     icon?: InstanceType<typeof ElIcon>["$props"];
@@ -19,6 +20,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     status?: ElInlineBannerStatuses;
     title?: string;
     description: string;
+    html?: boolean;
     loading?: boolean;
     action?: Pick<InstanceType<typeof ElButton>["$props"], "label" | "variant" | "onClick" | "icon" | "iconRight" | "loading" | "loadOnClick">;
     icon?: InstanceType<typeof ElIcon>["$props"];

package/dist/forms/ElInputAutocomplete.vue.d.ts

@@ -38,6 +38,10 @@ declare const _default: import('vue').DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    disableSelectAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     focusOnMount: {
         type: BooleanConstructor;
         default: boolean;
@@ -134,6 +138,10 @@ declare const _default: import('vue').DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    disableSelectAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     focusOnMount: {
         type: BooleanConstructor;
         default: boolean;
@@ -219,6 +227,7 @@ declare const _default: import('vue').DefineComponent<{
     selectedItems: ElInputAutocompleteItems;
     labelSelectAll: string;
     labelDeselectAll: string;
+    disableSelectAll: boolean;
     debounceTime: number;
 }, {}>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),i=require("./ElIcon.vue.cjs2.js"),s=require("./ElButton.vue.cjs2.js"),c=require("./ElSpinner.vue.cjs2.js"),u={class:"flex flex-row items-start gap-x-2 flex-grow basis-64"},d={class:"text-sm flex flex-col flex-grow mt-0.5"},p={key:0,class:"font-semibold min-h-6"},m={key:1},v=["error","warning","info"],f=t.defineComponent({__name:"ElInlineBanner",props:{status:{default:"info"},title:{default:void 0},description:{},loading:{type:Boolean},action:{default:void 0},icon:{default:void 0}},setup(a){const n=a,l=t.computed(()=>{var e;if((e=n.icon)!=null&&e.name)return n.icon.name;switch(n.status){case"info":return"InformationCircleIcon";case"warning":return"ExclamationTriangleIcon";case"error":return"InformationCircleIcon";default:return"InformationCircleIcon"}});return(e,w)=>{var r,o;return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md",{"bg-brandBlue-50 text-brandBlue-800":e.status==="info","bg-yellow-50 text-yellow-700":e.status==="warning","bg-red-50 text-red-700":e.status==="error"}])},[t.createElementVNode("div",u,[e.loading?(t.openBlock(),t.createBlock(c.default,{key:0,class:"flex-shrink-0 px-1 pt-1"})):(t.openBlock(),t.createBlock(i.default,t.mergeProps({key:1},e.icon,{name:l.value,class:["w-6 h-6 flex-shrink-0",{"text-brandBlue-500":e.status==="info","text-yellow-500":e.status==="warning","text-red-500":e.status==="error"}]}),null,16,["name","class"])),t.createElementVNode("div",d,[e.title?(t.openBlock(),t.createElementBlock("span",p,t.toDisplayString(e.title),1)):t.createCommentVNode("",!0),e.description?(t.openBlock(),t.createElementBlock("span",m,t.toDisplayString(e.description),1)):t.createCommentVNode("",!0)])]),e.action?(t.openBlock(),t.createBlock(s.default,t.mergeProps({key:0},e.action,{variant:e.action.variant??"tertiary",class:["flex-shrink-0",{underline:!e.action.variant||e.action.variant==="tertiary","hover:text-yellow-500 active:bg-yellow-100 active:text-yellow-500 border-yellow-700 hover:border-yellow-500":e.status==="warning","text-yellow-700":e.action.variant==="tertiary"&&e.status==="warning","hover:bg-yellow-100 active:bg-yellow-200 active:border-yellow-500":e.action.variant==="secondary"&&e.status==="warning","bg-yellow-500 text-white hover:text-white active:text-white hover:bg-yellow-600 active:bg-yellow-700 active:border-yellow-500":e.action.variant==="primary"&&e.status==="warning"}],error:e.status==="error",label:(r=e.action)==null?void 0:r.label,onClick:(o=e.action)==null?void 0:o.onClick}),null,16,["variant","class","error","label","onClick"])):t.createCommentVNode("",!0)],2)}}});exports.default=f;exports.elInlineBannerStatuses=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),i=require("./ElIcon.vue.cjs2.js"),s=require("./ElButton.vue.cjs2.js"),c=require("./ElSpinner.vue.cjs2.js"),u={class:"flex flex-row items-start gap-x-2 flex-grow basis-64"},d={class:"text-sm flex flex-col flex-grow mt-0.5"},m=["innerHTML"],p=["innerHTML"],y={key:0,class:"font-semibold min-h-6"},f={key:1},g=["error","warning","info"],v=e.defineComponent({__name:"ElInlineBanner",props:{status:{default:"info"},title:{default:void 0},description:{},html:{type:Boolean},loading:{type:Boolean},action:{default:void 0},icon:{default:void 0}},setup(l){const n=l,a=e.computed(()=>{var t;if((t=n.icon)!=null&&t.name)return n.icon.name;switch(n.status){case"info":return"InformationCircleIcon";case"warning":return"ExclamationTriangleIcon";case"error":return"InformationCircleIcon";default:return"InformationCircleIcon"}});return(t,k)=>{var o,r;return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md",{"bg-brandBlue-50 text-brandBlue-800":t.status==="info","bg-yellow-50 text-yellow-700":t.status==="warning","bg-red-50 text-red-700":t.status==="error"}])},[e.createElementVNode("div",u,[t.loading?(e.openBlock(),e.createBlock(c.default,{key:0,class:"flex-shrink-0 px-1 pt-1"})):(e.openBlock(),e.createBlock(i.default,e.mergeProps({key:1},t.icon,{name:a.value,class:["w-6 h-6 flex-shrink-0",{"text-brandBlue-500":t.status==="info","text-yellow-500":t.status==="warning","text-red-500":t.status==="error"}]}),null,16,["name","class"])),e.createElementVNode("div",d,[t.html?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.title?(e.openBlock(),e.createElementBlock("span",{key:0,class:"font-semibold min-h-6",innerHTML:t.title},null,8,m)):e.createCommentVNode("",!0),t.description?(e.openBlock(),e.createElementBlock("span",{key:1,innerHTML:t.description},null,8,p)):e.createCommentVNode("",!0)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[t.title?(e.openBlock(),e.createElementBlock("span",y,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),t.description?(e.openBlock(),e.createElementBlock("span",f,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0)],64))])]),t.action?(e.openBlock(),e.createBlock(s.default,e.mergeProps({key:0},t.action,{variant:t.action.variant??"tertiary",class:["flex-shrink-0",{underline:!t.action.variant||t.action.variant==="tertiary","hover:text-yellow-500 active:bg-yellow-100 active:text-yellow-500 border-yellow-700 hover:border-yellow-500":t.status==="warning","text-yellow-700":t.action.variant==="tertiary"&&t.status==="warning","hover:bg-yellow-100 active:bg-yellow-200 active:border-yellow-500":t.action.variant==="secondary"&&t.status==="warning","bg-yellow-500 text-white hover:text-white active:text-white hover:bg-yellow-600 active:bg-yellow-700 active:border-yellow-500":t.action.variant==="primary"&&t.status==="warning"}],error:t.status==="error",label:(o=t.action)==null?void 0:o.label,onClick:(r=t.action)==null?void 0:r.onClick}),null,16,["variant","class","error","label","onClick"])):e.createCommentVNode("",!0)],2)}}});exports.default=v;exports.elInlineBannerStatuses=g;
 //# sourceMappingURL=ElInlineBanner.vue.cjs2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ElInlineBanner.vue.cjs2.js","sources":["../../src/ElInlineBanner.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInlineBannerStatuses = ['error', 'warning', 'info'] as const;\nexport type ElInlineBannerStatuses = (typeof elInlineBannerStatuses)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElSpinner from '@/ElSpinner.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    status?: ElInlineBannerStatuses;\n    title?: string;\n    description: string;\n    loading?: boolean;\n    action?: Pick<\n      InstanceType<typeof ElButton>['$props'],\n      'label' | 'variant' | 'onClick' | 'icon' | 'iconRight' | 'loading' | 'loadOnClick'\n    >;\n    icon?: InstanceType<typeof ElIcon>['$props'];\n  }>(),\n  {\n    status: 'info',\n    title: undefined,\n    action: undefined,\n    icon: undefined,\n  },\n);\n\nconst iconName = computed(() => {\n  if (props.icon?.name) return props.icon.name;\n\n  switch (props.status) {\n    case 'info':\n      return 'InformationCircleIcon';\n    case 'warning':\n      return 'ExclamationTriangleIcon';\n    case 'error':\n      return 'InformationCircleIcon';\n    default:\n      return 'InformationCircleIcon';\n  }\n});\n</script>\n\n<template>\n  <div\n    class=\"inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md\"\n    :class=\"{\n      'bg-brandBlue-50 text-brandBlue-800': status === 'info',\n      'bg-yellow-50 text-yellow-700': status === 'warning',\n      'bg-red-50 text-red-700': status === 'error',\n    }\"\n  >\n    <div class=\"flex flex-row items-start gap-x-2 flex-grow basis-64\">\n      <ElSpinner v-if=\"loading\" class=\"flex-shrink-0 px-1 pt-1\" />\n      <ElIcon\n        v-else\n        v-bind=\"icon\"\n        :name=\"iconName\"\n        class=\"w-6 h-6 flex-shrink-0\"\n        :class=\"{\n          'text-brandBlue-500': status === 'info',\n          'text-yellow-500': status === 'warning',\n          'text-red-500': status === 'error',\n        }\"\n      />\n      <div class=\"text-sm flex flex-col flex-grow mt-0.5\">\n        <span v-if=\"title\" class=\"font-semibold min-h-6\">{{ title }}</span>\n        <span v-if=\"description\">{{ description }}</span>\n      </div>\n    </div>\n    <ElButton\n      v-if=\"action\"\n      v-bind=\"action\"\n      :variant=\"action.variant ?? 'tertiary'\"\n      class=\"flex-shrink-0\"\n      :class=\"{\n        underline: !action.variant || action.variant === 'tertiary',\n        'hover:text-yellow-500 active:bg-yellow-100 active:text-yellow-500 border-yellow-700 hover:border-yellow-500': status === 'warning',\n        'text-yellow-700': action.variant === 'tertiary' && status === 'warning',\n        'hover:bg-yellow-100 active:bg-yellow-200 active:border-yellow-500': action.variant === 'secondary' && status === 'warning',\n        'bg-yellow-500 text-white hover:text-white active:text-white hover:bg-yellow-600 active:bg-yellow-700 active:border-yellow-500':\n          action.variant === 'primary' && status === 'warning',\n      }\"\n      :error=\"status === 'error'\"\n      :label=\"action?.label\"\n      @click=\"action?.onClick\"\n    />\n  </div>\n</template>\n"],"names":["elInlineBannerStatuses","props","__props","iconName","computed","_a"],"mappings":"oZACaA,EAAyB,CAAC,QAAS,UAAW,MAAM,mMAUjE,MAAMC,EAAQC,EAoBRC,EAAWC,EAAAA,SAAS,IAAM,OAC9B,IAAIC,EAAAJ,EAAM,OAAN,MAAAI,EAAY,KAAM,OAAOJ,EAAM,KAAK,KAExC,OAAQA,EAAM,OAAQ,CACpB,IAAK,OACI,MAAA,wBACT,IAAK,UACI,MAAA,0BACT,IAAK,QACI,MAAA,wBACT,QACS,MAAA,uBACX,CAAA,CACD"}
+{"version":3,"file":"ElInlineBanner.vue.cjs2.js","sources":["../../src/ElInlineBanner.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInlineBannerStatuses = ['error', 'warning', 'info'] as const;\nexport type ElInlineBannerStatuses = (typeof elInlineBannerStatuses)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElSpinner from '@/ElSpinner.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    status?: ElInlineBannerStatuses;\n    title?: string;\n    description: string;\n    html?: boolean;\n    loading?: boolean;\n    action?: Pick<\n      InstanceType<typeof ElButton>['$props'],\n      'label' | 'variant' | 'onClick' | 'icon' | 'iconRight' | 'loading' | 'loadOnClick'\n    >;\n    icon?: InstanceType<typeof ElIcon>['$props'];\n  }>(),\n  {\n    status: 'info',\n    title: undefined,\n    action: undefined,\n    icon: undefined,\n  },\n);\n\nconst iconName = computed(() => {\n  if (props.icon?.name) return props.icon.name;\n\n  switch (props.status) {\n    case 'info':\n      return 'InformationCircleIcon';\n    case 'warning':\n      return 'ExclamationTriangleIcon';\n    case 'error':\n      return 'InformationCircleIcon';\n    default:\n      return 'InformationCircleIcon';\n  }\n});\n</script>\n\n<template>\n  <div\n    class=\"inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md\"\n    :class=\"{\n      'bg-brandBlue-50 text-brandBlue-800': status === 'info',\n      'bg-yellow-50 text-yellow-700': status === 'warning',\n      'bg-red-50 text-red-700': status === 'error',\n    }\"\n  >\n    <div class=\"flex flex-row items-start gap-x-2 flex-grow basis-64\">\n      <ElSpinner v-if=\"loading\" class=\"flex-shrink-0 px-1 pt-1\" />\n      <ElIcon\n        v-else\n        v-bind=\"icon\"\n        :name=\"iconName\"\n        class=\"w-6 h-6 flex-shrink-0\"\n        :class=\"{\n          'text-brandBlue-500': status === 'info',\n          'text-yellow-500': status === 'warning',\n          'text-red-500': status === 'error',\n        }\"\n      />\n      <div class=\"text-sm flex flex-col flex-grow mt-0.5\">\n        <template v-if=\"!!html\">\n          <span v-if=\"title\" class=\"font-semibold min-h-6\" v-html=\"title\"></span>\n          <span v-if=\"description\" v-html=\"description\"></span>\n        </template>\n        <template v-else>\n          <span v-if=\"title\" class=\"font-semibold min-h-6\">{{ title }}</span>\n          <span v-if=\"description\">{{ description }}</span>\n        </template>\n      </div>\n    </div>\n    <ElButton\n      v-if=\"action\"\n      v-bind=\"action\"\n      :variant=\"action.variant ?? 'tertiary'\"\n      class=\"flex-shrink-0\"\n      :class=\"{\n        underline: !action.variant || action.variant === 'tertiary',\n        'hover:text-yellow-500 active:bg-yellow-100 active:text-yellow-500 border-yellow-700 hover:border-yellow-500': status === 'warning',\n        'text-yellow-700': action.variant === 'tertiary' && status === 'warning',\n        'hover:bg-yellow-100 active:bg-yellow-200 active:border-yellow-500': action.variant === 'secondary' && status === 'warning',\n        'bg-yellow-500 text-white hover:text-white active:text-white hover:bg-yellow-600 active:bg-yellow-700 active:border-yellow-500':\n          action.variant === 'primary' && status === 'warning',\n      }\"\n      :error=\"status === 'error'\"\n      :label=\"action?.label\"\n      @click=\"action?.onClick\"\n    />\n  </div>\n</template>\n"],"names":["elInlineBannerStatuses","props","__props","iconName","computed","_a"],"mappings":"obACaA,EAAyB,CAAC,QAAS,UAAW,MAAM,uNAUjE,MAAMC,EAAQC,EAqBRC,EAAWC,EAAAA,SAAS,IAAM,OAC9B,IAAIC,EAAAJ,EAAM,OAAN,MAAAI,EAAY,KAAM,OAAOJ,EAAM,KAAK,KAExC,OAAQA,EAAM,OAAQ,CACpB,IAAK,OACI,MAAA,wBACT,IAAK,UACI,MAAA,0BACT,IAAK,QACI,MAAA,wBACT,QACS,MAAA,uBACX,CAAA,CACD"}

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

@@ -1,2 +1,2 @@
-import{defineComponent as f,computed as w,openBlock as t,createElementBlock as r,normalizeClass as y,createElementVNode as s,createBlock as a,mergeProps as c,toDisplayString as u,createCommentVNode as o}from"vue";import p from"./ElIcon.vue.esm2.js";import g from"./ElButton.vue.esm2.js";import v from"./ElSpinner.vue.esm2.js";const b={class:"flex flex-row items-start gap-x-2 flex-grow basis-64"},h={class:"text-sm flex flex-col flex-grow mt-0.5"},k={key:0,class:"font-semibold min-h-6"},B={key:1},$=["error","warning","info"],S=f({__name:"ElInlineBanner",props:{status:{default:"info"},title:{default:void 0},description:{},loading:{type:Boolean},action:{default:void 0},icon:{default:void 0}},setup(d){const n=d,m=w(()=>{var e;if((e=n.icon)!=null&&e.name)return n.icon.name;switch(n.status){case"info":return"InformationCircleIcon";case"warning":return"ExclamationTriangleIcon";case"error":return"InformationCircleIcon";default:return"InformationCircleIcon"}});return(e,C)=>{var i,l;return t(),r("div",{class:y(["inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md",{"bg-brandBlue-50 text-brandBlue-800":e.status==="info","bg-yellow-50 text-yellow-700":e.status==="warning","bg-red-50 text-red-700":e.status==="error"}])},[s("div",b,[e.loading?(t(),a(v,{key:0,class:"flex-shrink-0 px-1 pt-1"})):(t(),a(p,c({key:1},e.icon,{name:m.value,class:["w-6 h-6 flex-shrink-0",{"text-brandBlue-500":e.status==="info","text-yellow-500":e.status==="warning","text-red-500":e.status==="error"}]}),null,16,["name","class"])),s("div",h,[e.title?(t(),r("span",k,u(e.title),1)):o("",!0),e.description?(t(),r("span",B,u(e.description),1)):o("",!0)])]),e.action?(t(),a(g,c({key:0},e.action,{variant:e.action.variant??"tertiary",class:["flex-shrink-0",{underline:!e.action.variant||e.action.variant==="tertiary","hover:text-yellow-500 active:bg-yellow-100 active:text-yellow-500 border-yellow-700 hover:border-yellow-500":e.status==="warning","text-yellow-700":e.action.variant==="tertiary"&&e.status==="warning","hover:bg-yellow-100 active:bg-yellow-200 active:border-yellow-500":e.action.variant==="secondary"&&e.status==="warning","bg-yellow-500 text-white hover:text-white active:text-white hover:bg-yellow-600 active:bg-yellow-700 active:border-yellow-500":e.action.variant==="primary"&&e.status==="warning"}],error:e.status==="error",label:(i=e.action)==null?void 0:i.label,onClick:(l=e.action)==null?void 0:l.onClick}),null,16,["variant","class","error","label","onClick"])):o("",!0)],2)}}});export{S as default,$ as elInlineBannerStatuses};
+import{defineComponent as w,computed as y,openBlock as n,createElementBlock as t,normalizeClass as p,createElementVNode as s,createBlock as a,mergeProps as c,Fragment as d,createCommentVNode as r,toDisplayString as u}from"vue";import g from"./ElIcon.vue.esm2.js";import v from"./ElButton.vue.esm2.js";import h from"./ElSpinner.vue.esm2.js";const b={class:"flex flex-row items-start gap-x-2 flex-grow basis-64"},k={class:"text-sm flex flex-col flex-grow mt-0.5"},B=["innerHTML"],C=["innerHTML"],I={key:0,class:"font-semibold min-h-6"},T={key:1},$=["error","warning","info"],S=w({__name:"ElInlineBanner",props:{status:{default:"info"},title:{default:void 0},description:{},html:{type:Boolean},loading:{type:Boolean},action:{default:void 0},icon:{default:void 0}},setup(m){const o=m,f=y(()=>{var e;if((e=o.icon)!=null&&e.name)return o.icon.name;switch(o.status){case"info":return"InformationCircleIcon";case"warning":return"ExclamationTriangleIcon";case"error":return"InformationCircleIcon";default:return"InformationCircleIcon"}});return(e,E)=>{var i,l;return n(),t("div",{class:p(["inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md",{"bg-brandBlue-50 text-brandBlue-800":e.status==="info","bg-yellow-50 text-yellow-700":e.status==="warning","bg-red-50 text-red-700":e.status==="error"}])},[s("div",b,[e.loading?(n(),a(h,{key:0,class:"flex-shrink-0 px-1 pt-1"})):(n(),a(g,c({key:1},e.icon,{name:f.value,class:["w-6 h-6 flex-shrink-0",{"text-brandBlue-500":e.status==="info","text-yellow-500":e.status==="warning","text-red-500":e.status==="error"}]}),null,16,["name","class"])),s("div",k,[e.html?(n(),t(d,{key:0},[e.title?(n(),t("span",{key:0,class:"font-semibold min-h-6",innerHTML:e.title},null,8,B)):r("",!0),e.description?(n(),t("span",{key:1,innerHTML:e.description},null,8,C)):r("",!0)],64)):(n(),t(d,{key:1},[e.title?(n(),t("span",I,u(e.title),1)):r("",!0),e.description?(n(),t("span",T,u(e.description),1)):r("",!0)],64))])]),e.action?(n(),a(v,c({key:0},e.action,{variant:e.action.variant??"tertiary",class:["flex-shrink-0",{underline:!e.action.variant||e.action.variant==="tertiary","hover:text-yellow-500 active:bg-yellow-100 active:text-yellow-500 border-yellow-700 hover:border-yellow-500":e.status==="warning","text-yellow-700":e.action.variant==="tertiary"&&e.status==="warning","hover:bg-yellow-100 active:bg-yellow-200 active:border-yellow-500":e.action.variant==="secondary"&&e.status==="warning","bg-yellow-500 text-white hover:text-white active:text-white hover:bg-yellow-600 active:bg-yellow-700 active:border-yellow-500":e.action.variant==="primary"&&e.status==="warning"}],error:e.status==="error",label:(i=e.action)==null?void 0:i.label,onClick:(l=e.action)==null?void 0:l.onClick}),null,16,["variant","class","error","label","onClick"])):r("",!0)],2)}}});export{S as default,$ as elInlineBannerStatuses};
 //# sourceMappingURL=ElInlineBanner.vue.esm2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ElInlineBanner.vue.esm2.js","sources":["../../src/ElInlineBanner.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInlineBannerStatuses = ['error', 'warning', 'info'] as const;\nexport type ElInlineBannerStatuses = (typeof elInlineBannerStatuses)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElSpinner from '@/ElSpinner.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    status?: ElInlineBannerStatuses;\n    title?: string;\n    description: string;\n    loading?: boolean;\n    action?: Pick<\n      InstanceType<typeof ElButton>['$props'],\n      'label' | 'variant' | 'onClick' | 'icon' | 'iconRight' | 'loading' | 'loadOnClick'\n    >;\n    icon?: InstanceType<typeof ElIcon>['$props'];\n  }>(),\n  {\n    status: 'info',\n    title: undefined,\n    action: undefined,\n    icon: undefined,\n  },\n);\n\nconst iconName = computed(() => {\n  if (props.icon?.name) return props.icon.name;\n\n  switch (props.status) {\n    case 'info':\n      return 'InformationCircleIcon';\n    case 'warning':\n      return 'ExclamationTriangleIcon';\n    case 'error':\n      return 'InformationCircleIcon';\n    default:\n      return 'InformationCircleIcon';\n  }\n});\n</script>\n\n<template>\n  <div\n    class=\"inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md\"\n    :class=\"{\n      'bg-brandBlue-50 text-brandBlue-800': status === 'info',\n      'bg-yellow-50 text-yellow-700': status === 'warning',\n      'bg-red-50 text-red-700': status === 'error',\n    }\"\n  >\n    <div class=\"flex flex-row items-start gap-x-2 flex-grow basis-64\">\n      <ElSpinner v-if=\"loading\" class=\"flex-shrink-0 px-1 pt-1\" />\n      <ElIcon\n        v-else\n        v-bind=\"icon\"\n        :name=\"iconName\"\n        class=\"w-6 h-6 flex-shrink-0\"\n        :class=\"{\n          'text-brandBlue-500': status === 'info',\n          'text-yellow-500': status === 'warning',\n          'text-red-500': status === 'error',\n        }\"\n      />\n      <div class=\"text-sm flex flex-col flex-grow mt-0.5\">\n        <span v-if=\"title\" class=\"font-semibold min-h-6\">{{ title }}</span>\n        <span v-if=\"description\">{{ description }}</span>\n      </div>\n    </div>\n    <ElButton\n      v-if=\"action\"\n      v-bind=\"action\"\n      :variant=\"action.variant ?? 'tertiary'\"\n      class=\"flex-shrink-0\"\n      :class=\"{\n        underline: !action.variant || action.variant === 'tertiary',\n        'hover:text-yellow-500 active:bg-yellow-100 active:text-yellow-500 border-yellow-700 hover:border-yellow-500': status === 'warning',\n        'text-yellow-700': action.variant === 'tertiary' && status === 'warning',\n        'hover:bg-yellow-100 active:bg-yellow-200 active:border-yellow-500': action.variant === 'secondary' && status === 'warning',\n        'bg-yellow-500 text-white hover:text-white active:text-white hover:bg-yellow-600 active:bg-yellow-700 active:border-yellow-500':\n          action.variant === 'primary' && status === 'warning',\n      }\"\n      :error=\"status === 'error'\"\n      :label=\"action?.label\"\n      @click=\"action?.onClick\"\n    />\n  </div>\n</template>\n"],"names":["elInlineBannerStatuses","props","__props","iconName","computed","_a"],"mappings":"kfACaA,EAAyB,CAAC,QAAS,UAAW,MAAM,mLAUjE,MAAMC,EAAQC,EAoBRC,EAAWC,EAAS,IAAM,OAC9B,IAAIC,EAAAJ,EAAM,OAAN,MAAAI,EAAY,KAAM,OAAOJ,EAAM,KAAK,KAExC,OAAQA,EAAM,OAAQ,CACpB,IAAK,OACI,MAAA,wBACT,IAAK,UACI,MAAA,0BACT,IAAK,QACI,MAAA,wBACT,QACS,MAAA,uBACX,CAAA,CACD"}
+{"version":3,"file":"ElInlineBanner.vue.esm2.js","sources":["../../src/ElInlineBanner.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInlineBannerStatuses = ['error', 'warning', 'info'] as const;\nexport type ElInlineBannerStatuses = (typeof elInlineBannerStatuses)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElSpinner from '@/ElSpinner.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    status?: ElInlineBannerStatuses;\n    title?: string;\n    description: string;\n    html?: boolean;\n    loading?: boolean;\n    action?: Pick<\n      InstanceType<typeof ElButton>['$props'],\n      'label' | 'variant' | 'onClick' | 'icon' | 'iconRight' | 'loading' | 'loadOnClick'\n    >;\n    icon?: InstanceType<typeof ElIcon>['$props'];\n  }>(),\n  {\n    status: 'info',\n    title: undefined,\n    action: undefined,\n    icon: undefined,\n  },\n);\n\nconst iconName = computed(() => {\n  if (props.icon?.name) return props.icon.name;\n\n  switch (props.status) {\n    case 'info':\n      return 'InformationCircleIcon';\n    case 'warning':\n      return 'ExclamationTriangleIcon';\n    case 'error':\n      return 'InformationCircleIcon';\n    default:\n      return 'InformationCircleIcon';\n  }\n});\n</script>\n\n<template>\n  <div\n    class=\"inline-flex flex-wrap items-center justify-center gap-x-2 gap-y-4 w-full min-w-72 p-4 rounded-md\"\n    :class=\"{\n      'bg-brandBlue-50 text-brandBlue-800': status === 'info',\n      'bg-yellow-50 text-yellow-700': status === 'warning',\n      'bg-red-50 text-red-700': status === 'error',\n    }\"\n  >\n    <div class=\"flex flex-row items-start gap-x-2 flex-grow basis-64\">\n      <ElSpinner v-if=\"loading\" class=\"flex-shrink-0 px-1 pt-1\" />\n      <ElIcon\n        v-else\n        v-bind=\"icon\"\n        :name=\"iconName\"\n        class=\"w-6 h-6 flex-shrink-0\"\n        :class=\"{\n          'text-brandBlue-500': status === 'info',\n          'text-yellow-500': status === 'warning',\n          'text-red-500': status === 'error',\n        }\"\n      />\n      <div class=\"text-sm flex flex-col flex-grow mt-0.5\">\n        <template v-if=\"!!html\">\n          <span v-if=\"title\" class=\"font-semibold min-h-6\" v-html=\"title\"></span>\n          <span v-if=\"description\" v-html=\"description\"></span>\n        </template>\n        <template v-else>\n          <span v-if=\"title\" class=\"font-semibold min-h-6\">{{ title }}</span>\n          <span v-if=\"description\">{{ description }}</span>\n        </template>\n      </div>\n    </div>\n    <ElButton\n      v-if=\"action\"\n      v-bind=\"action\"\n      :variant=\"action.variant ?? 'tertiary'\"\n      class=\"flex-shrink-0\"\n      :class=\"{\n        underline: !action.variant || action.variant === 'tertiary',\n        'hover:text-yellow-500 active:bg-yellow-100 active:text-yellow-500 border-yellow-700 hover:border-yellow-500': status === 'warning',\n        'text-yellow-700': action.variant === 'tertiary' && status === 'warning',\n        'hover:bg-yellow-100 active:bg-yellow-200 active:border-yellow-500': action.variant === 'secondary' && status === 'warning',\n        'bg-yellow-500 text-white hover:text-white active:text-white hover:bg-yellow-600 active:bg-yellow-700 active:border-yellow-500':\n          action.variant === 'primary' && status === 'warning',\n      }\"\n      :error=\"status === 'error'\"\n      :label=\"action?.label\"\n      @click=\"action?.onClick\"\n    />\n  </div>\n</template>\n"],"names":["elInlineBannerStatuses","props","__props","iconName","computed","_a"],"mappings":"giBACaA,EAAyB,CAAC,QAAS,UAAW,MAAM,uMAUjE,MAAMC,EAAQC,EAqBRC,EAAWC,EAAS,IAAM,OAC9B,IAAIC,EAAAJ,EAAM,OAAN,MAAAI,EAAY,KAAM,OAAOJ,EAAM,KAAK,KAExC,OAAQA,EAAM,OAAQ,CACpB,IAAK,OACI,MAAA,wBACT,IAAK,UACI,MAAA,0BACT,IAAK,QACI,MAAA,wBACT,QACS,MAAA,uBACX,CAAA,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 a=require("vue"),L=require("./input.cjs.js"),N=require("../ElDropdown.vue.cjs2.js"),O=require("../ElInputChip.vue.cjs2.js"),F=require("../../node_modules/@vueuse/core/index.cjs.js"),T=require("../ElSpinner.vue.cjs2.js"),z=require("./ElInputContainer.vue.cjs2.js"),K=require("../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.cjs.js"),P={class:"flex flex-col gap-1"},U={class:"flex items-center gap-1 px-2"},W=["disabled","validation","placeholder"],$={key:0,class:"text-xs font-normal text-error"},j=a.defineComponent({__name:"ElInputAutocomplete",props:{...L.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","endOfList"],setup(p,{expose:w,emit:E}){const o=p,c=E,v=a.ref(!1),i=a.ref(!1),r=a.ref(o.modelValue),u=a.ref([]),n=a.ref(o.selectedItems),m=a.ref(),f=a.ref();a.onMounted(async()=>{if(o.dataController){const l=await g(r.value);u.value=(l==null?void 0:l.data)||[]}else u.value=o.items});const B=a.computed(()=>{var e;const l=(e=u.value)==null?void 0:e.map((t,d)=>({...t,text:t.label||t.text,check:n.value.some(s=>s.text?s.text===t.text:s.label===t.label),onClick:()=>{var s;if(o.multiple){const I=n.value.findIndex(b=>b.text?b.text===t.text:b.label===t.label);I!==-1?n.value=n.value.filter((b,D)=>D!==I):n.value.push({...t,check:!0}),r.value="",f.value=void 0,(s=m.value)==null||s.focus(),c("update:selectedItems",n.value)}else r.value=t.text||t.label||t.value||"";c("update:modelValue",t.text||t.label||t.value||""),c("item:click",d)}}));return o.multiple&&l.unshift({text:n.value.length===u.value.length?o.labelDeselectAll:o.labelSelectAll,check:!1,onClick:()=>{var t;n.value.length===u.value.length?n.value=[]:n.value=u.value,(t=m.value)==null||t.focus(),c("update:selectedItems",n.value)}}),l}),y=F.useMemoize(async(l,e)=>{var t;return await((t=o.dataController)==null?void 0:t.call(o,l,e))}),g=K.useDebounceFn(y,o.debounceTime),S=()=>y.cache.clear(),q=async()=>{var e;r.value=void 0,u.value=o.items,n.value=o.selectedItems;const l=await((e=o.dataController)==null?void 0:e.call(o,r.value));u.value=(l==null?void 0:l.data)||[]},x=l=>{var e;((e=l.relatedTarget)==null?void 0:e.role)!=="option"&&(i.value?i.value=!1:i.value=!0)},M=({target:l})=>{l instanceof HTMLInputElement&&l.value.charAt(l.value.length-1)!==" "&&V(l.value)},k=(l,e)=>{n.value=n.value.filter(t=>t.text!==e.text),c("update:selectedItems",n.value)},V=async l=>{if(o.dataController){v.value=!0;const e=await g(l);i.value=!!e,v.value=!e,u.value=(e==null?void 0:e.data)||[]}else l?u.value=o.items.filter(e=>{var t;return(t=e.text)==null?void 0:t.toLowerCase().includes(l.toLowerCase())}):u.value=o.items;c("update:modelValue",l)},_=async l=>{if(o.dataController){v.value=!0;const e=await o.dataController(r.value,l);v.value=!e,u.value=(e==null?void 0:e.data)||[]}else u.value=o.items},C=l=>{var e,t;if(!r.value)if(n.value.length>0&&!f.value){const d=n.value.length-1;f.value=n.value[d],(e=document.getElementById(d.toString()))==null||e.focus()}else k(l,f.value),f.value=void 0,(t=m.value)==null||t.focus()},h=l=>{const e=l.currentTarget;e.scrollLeft+=l.deltaY,l.preventDefault()},A=l=>{o.multiple?i.value=!0:i.value=l};return w({resetAllAndFetch:q,clearCache:S}),(l,e)=>(a.openBlock(),a.createElementBlock("div",P,[a.createElementVNode("label",{class:a.normalizeClass(["text-sm font-semibold",{"text-error":l.errorMessage,"text-neutral-darker":!l.errorMessage}])},a.toDisplayString(l.label),3),a.createVNode(N.default,{items:B.value,multiple:p.multiple,"is-open":i.value,disabled:l.disabled,"onUpdate:isOpen":e[7]||(e[7]=t=>A(t)),onEndOfList:e[8]||(e[8]=t=>_({isEndOfList:!0}))},{anchor:a.withCtx(()=>[a.createVNode(z.default,{color:l.color,name:l.name},{default:a.withCtx(()=>[a.createElementVNode("div",U,[p.multiple?(a.openBlock(),a.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},[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(n.value,(t,d)=>(a.openBlock(),a.createBlock(O.default,{id:d,key:d,text:t.text||t.label||"",class:"border flex-shrink-0 rounded-md px-3 py-2",onClick:s=>k(s,t),onKeydown:e[0]||(e[0]=a.withKeys(s=>C(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):a.createCommentVNode("",!0),a.withDirectives(a.createElementVNode("input",{ref_key:"inputField",ref:m,"onUpdate:modelValue":e[1]||(e[1]=t=>r.value=t),disabled:l.disabled,type:"text",class:a.normalizeClass(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":l.disabled}]),validation:l.validation,placeholder:p.placeholder,onInput:e[2]||(e[2]=t=>M(t)),onKeydown:e[3]||(e[3]=a.withKeys(t=>C(t),["backspace"])),onClick:e[4]||(e[4]=a.withModifiers(t=>x(t),["prevent"])),onBlur:e[5]||(e[5]=a.withModifiers(t=>x(t),["prevent"])),onWheel:e[6]||(e[6]=t=>h(t))},null,42,W),[[a.vModelText,r.value]]),v.value?(a.openBlock(),a.createBlock(T.default,{key:1,class:"mx-2",size:"normal"})):a.createCommentVNode("",!0)])]),_:1},8,["color","name"])]),_:1},8,["items","multiple","is-open","disabled"]),l.errorMessage?(a.openBlock(),a.createElementBlock("div",$,a.toDisplayString(l.errorMessage),1)):a.createCommentVNode("",!0)]))}});exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),L=require("./input.cjs.js"),N=require("../ElDropdown.vue.cjs2.js"),O=require("../ElInputChip.vue.cjs2.js"),F=require("../../node_modules/@vueuse/core/index.cjs.js"),T=require("../ElSpinner.vue.cjs2.js"),z=require("./ElInputContainer.vue.cjs2.js"),K=require("../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.cjs.js"),P={class:"flex flex-col gap-1"},U={class:"flex items-center gap-1 px-2"},W=["disabled","validation","placeholder"],$={key:0,class:"text-xs font-normal text-error"},j=a.defineComponent({__name:"ElInputAutocomplete",props:{...L.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"},disableSelectAll:{type:Boolean,default:!1},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","endOfList"],setup(p,{expose:w,emit:E}){const o=p,c=E,v=a.ref(!1),i=a.ref(!1),r=a.ref(o.modelValue),u=a.ref([]),n=a.ref(o.selectedItems),m=a.ref(),f=a.ref();a.onMounted(async()=>{if(o.dataController){const l=await y(r.value);u.value=(l==null?void 0:l.data)||[]}else u.value=o.items});const B=a.computed(()=>{var e;const l=(e=u.value)==null?void 0:e.map((t,d)=>({...t,text:t.label||t.text,check:n.value.some(s=>s.text?s.text===t.text:s.label===t.label),onClick:()=>{var s;if(o.multiple){const I=n.value.findIndex(b=>b.text?b.text===t.text:b.label===t.label);I!==-1?n.value=n.value.filter((b,D)=>D!==I):n.value.push({...t,check:!0}),r.value="",f.value=void 0,(s=m.value)==null||s.focus(),c("update:selectedItems",n.value)}else r.value=t.text||t.label||t.value||"";c("update:modelValue",t.text||t.label||t.value||""),c("item:click",d)}}));return o.multiple&&!o.disableSelectAll&&l.unshift({text:n.value.length===u.value.length?o.labelDeselectAll:o.labelSelectAll,check:!1,onClick:()=>{var t;n.value.length===u.value.length?n.value=[]:n.value=u.value,(t=m.value)==null||t.focus(),c("update:selectedItems",n.value)}}),l}),g=F.useMemoize(async(l,e)=>{var t;return await((t=o.dataController)==null?void 0:t.call(o,l,e))}),y=K.useDebounceFn(g,o.debounceTime),S=()=>g.cache.clear(),q=async()=>{var e;r.value=void 0,u.value=o.items,n.value=o.selectedItems;const l=await((e=o.dataController)==null?void 0:e.call(o,r.value));u.value=(l==null?void 0:l.data)||[]},x=l=>{var e;((e=l.relatedTarget)==null?void 0:e.role)!=="option"&&(i.value?i.value=!1:i.value=!0)},M=({target:l})=>{l instanceof HTMLInputElement&&l.value.charAt(l.value.length-1)!==" "&&V(l.value)},k=(l,e)=>{n.value=n.value.filter(t=>t.text!==e.text),c("update:selectedItems",n.value)},V=async l=>{if(o.dataController){v.value=!0;const e=await y(l);i.value=!!e,v.value=!e,u.value=(e==null?void 0:e.data)||[]}else l?u.value=o.items.filter(e=>{var t;return(t=e.text)==null?void 0:t.toLowerCase().includes(l.toLowerCase())}):u.value=o.items;c("update:modelValue",l)},_=async l=>{if(o.dataController){v.value=!0;const e=await y(r.value,l);v.value=!e,u.value=(e==null?void 0:e.data)||[]}else u.value=o.items},C=l=>{var e,t;if(!r.value)if(n.value.length>0&&!f.value){const d=n.value.length-1;f.value=n.value[d],(e=document.getElementById(d.toString()))==null||e.focus()}else k(l,f.value),f.value=void 0,(t=m.value)==null||t.focus()},h=l=>{const e=l.currentTarget;e.scrollLeft+=l.deltaY,l.preventDefault()},A=l=>{o.multiple?i.value=!0:i.value=l};return w({resetAllAndFetch:q,clearCache:S}),(l,e)=>(a.openBlock(),a.createElementBlock("div",P,[a.createElementVNode("label",{class:a.normalizeClass(["text-sm font-semibold",{"text-error":l.errorMessage,"text-neutral-darker":!l.errorMessage}])},a.toDisplayString(l.label),3),a.createVNode(N.default,{items:B.value,multiple:p.multiple,"is-open":i.value,disabled:l.disabled,"onUpdate:isOpen":e[7]||(e[7]=t=>A(t)),onEndOfList:e[8]||(e[8]=t=>_({isEndOfList:!0}))},{anchor:a.withCtx(()=>[a.createVNode(z.default,{color:l.color,name:l.name},{default:a.withCtx(()=>[a.createElementVNode("div",U,[p.multiple?(a.openBlock(),a.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},[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(n.value,(t,d)=>(a.openBlock(),a.createBlock(O.default,{id:d,key:d,text:t.text||t.label||"",class:"border flex-shrink-0 rounded-md px-3 py-2",onClick:s=>k(s,t),onKeydown:e[0]||(e[0]=a.withKeys(s=>C(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):a.createCommentVNode("",!0),a.withDirectives(a.createElementVNode("input",{ref_key:"inputField",ref:m,"onUpdate:modelValue":e[1]||(e[1]=t=>r.value=t),disabled:l.disabled,type:"text",class:a.normalizeClass(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":l.disabled}]),validation:l.validation,placeholder:p.placeholder,onInput:e[2]||(e[2]=t=>M(t)),onKeydown:e[3]||(e[3]=a.withKeys(t=>C(t),["backspace"])),onClick:e[4]||(e[4]=a.withModifiers(t=>x(t),["prevent"])),onBlur:e[5]||(e[5]=a.withModifiers(t=>x(t),["prevent"])),onWheel:e[6]||(e[6]=t=>h(t))},null,42,W),[[a.vModelText,r.value]]),v.value?(a.openBlock(),a.createBlock(T.default,{key:1,class:"mx-2",size:"normal"})):a.createCommentVNode("",!0)])]),_:1},8,["color","name"])]),_:1},8,["items","multiple","is-open","disabled"]),l.errorMessage?(a.openBlock(),a.createElementBlock("div",$,a.toDisplayString(l.errorMessage),1)):a.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 }>;\nexport type EventOptions = { isEndOfList: boolean };\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, eventOptions?: EventOptions) => 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  (event: 'endOfList'): 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, eventOptions?: EventOptions) => {\n  return await props.dataController?.(value, eventOptions);\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// Trigger event end of list to data controller\nconst triggerEventOption = async (eventOptions: EventOptions) => {\n  if (props.dataController) {\n    isLoading.value = true;\n    const response = await props.dataController(query.value, eventOptions);\n    isLoading.value = !response;\n\n    filteredItems.value = response?.data || [];\n  } else {\n    filteredItems.value = props.items;\n  }\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\n      :items=\"items\"\n      :multiple=\"multiple\"\n      :is-open=\"isOpen\"\n      :disabled=\"disabled\"\n      @update:is-open=\"onUpdateIsOpen($event)\"\n      @end-of-list=\"triggerEventOption({ isEndOfList: true })\"\n    >\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","eventOptions","useDebounceFn","clearCache","resetAllAndFetch","onInputClick","e","onChangeEvent","target","updateModel","onRemoveItem","_event","result","triggerEventOption","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 }>;\nexport type EventOptions = { isEndOfList: boolean };\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  disableSelectAll: {\n    type: Boolean,\n    default: false,\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, eventOptions?: EventOptions) => 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  (event: 'endOfList'): 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 && !props.disableSelectAll) {\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, eventOptions?: EventOptions) => {\n  return await props.dataController?.(value, eventOptions);\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 * 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 fr m 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};\nconst triggerEventOption = async (eventOptions: EventOptions) => {\n  if (props.dataController) {\n    isLoading.value = true;\n    const response = await debounceDataController(query.value, eventOptions);\n    isLoading.value = !response;\n\n    filteredItems.value = response?.data || [];\n  } else {\n    filteredItems.value = props.items;\n  }\n};\n\n/**\n    Handle backspace key press to re     last selected item wh   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 sc     event to scroll the li   ox 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     he page\n  event.preventDefault();\n};\n\n/**\n    Handle update isOpen eve    o open the dropdown    n 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\n      :items=\"items\"\n      :multiple=\"multiple\"\n      :is-open=\"isOpen\"\n      :disabled=\"disabled\"\n      @update:is-open=\"onUpdateIsOpen($event)\"\n      @end-of-list=\"triggerEventOption({ isEndOfList: true })\"\n    >\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","eventOptions","useDebounceFn","clearCache","resetAllAndFetch","onInputClick","e","onChangeEvent","target","updateModel","onRemoveItem","_event","result","triggerEventOption","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 R,ref as d,onMounted as Y,computed as j,openBlock as f,createElementBlock as y,createElementVNode as g,normalizeClass as E,toDisplayString as D,createVNode as L,withCtx as V,Fragment as G,renderList as J,createBlock as O,withKeys as B,createCommentVNode as k,withDirectives as Q,withModifiers as F,vModelText as X}from"vue";import{withCommonElInputProps as Z}from"./input.esm.js";import _ from"../ElDropdown.vue.esm2.js";import ee from"../ElInputChip.vue.esm2.js";import{useMemoize as le}from"../../node_modules/@vueuse/core/index.esm.js";import te from"../ElSpinner.vue.esm2.js";import ae from"./ElInputContainer.vue.esm2.js";import{useDebounceFn as oe}from"../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.esm.js";const ne={class:"flex flex-col gap-1"},se={class:"flex items-center gap-1 px-2"},ue=["disabled","validation","placeholder"],re={key:0,class:"text-xs font-normal text-error"},xe=R({__name:"ElInputAutocomplete",props:{...Z(),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","endOfList"],setup(p,{expose:q,emit:T}){const a=p,c=T,v=d(!1),r=d(!1),u=d(a.modelValue),n=d([]),o=d(a.selectedItems),b=d(),m=d();Y(async()=>{if(a.dataController){const l=await I(u.value);n.value=(l==null?void 0:l.data)||[]}else n.value=a.items});const z=j(()=>{var e;const l=(e=n.value)==null?void 0:e.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(x=>x.text?x.text===t.text:x.label===t.label);S!==-1?o.value=o.value.filter((x,H)=>H!==S):o.value.push({...t,check:!0}),u.value="",m.value=void 0,(s=b.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&&l.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=b.value)==null||t.focus(),c("update:selectedItems",o.value)}}),l}),C=le(async(l,e)=>{var t;return await((t=a.dataController)==null?void 0:t.call(a,l,e))}),I=oe(C,a.debounceTime),$=()=>C.cache.clear(),K=async()=>{var e;u.value=void 0,n.value=a.items,o.value=a.selectedItems;const l=await((e=a.dataController)==null?void 0:e.call(a,u.value));n.value=(l==null?void 0:l.data)||[]},h=l=>{var e;((e=l.relatedTarget)==null?void 0:e.role)!=="option"&&(r.value?r.value=!1:r.value=!0)},N=({target:l})=>{l instanceof HTMLInputElement&&l.value.charAt(l.value.length-1)!==" "&&U(l.value)},w=(l,e)=>{o.value=o.value.filter(t=>t.text!==e.text),c("update:selectedItems",o.value)},U=async l=>{if(a.dataController){v.value=!0;const e=await I(l);r.value=!!e,v.value=!e,n.value=(e==null?void 0:e.data)||[]}else l?n.value=a.items.filter(e=>{var t;return(t=e.text)==null?void 0:t.toLowerCase().includes(l.toLowerCase())}):n.value=a.items;c("update:modelValue",l)},W=async l=>{if(a.dataController){v.value=!0;const e=await a.dataController(u.value,l);v.value=!e,n.value=(e==null?void 0:e.data)||[]}else n.value=a.items},A=l=>{var e,t;if(!u.value)if(o.value.length>0&&!m.value){const i=o.value.length-1;m.value=o.value[i],(e=document.getElementById(i.toString()))==null||e.focus()}else w(l,m.value),m.value=void 0,(t=b.value)==null||t.focus()},M=l=>{const e=l.currentTarget;e.scrollLeft+=l.deltaY,l.preventDefault()},P=l=>{a.multiple?r.value=!0:r.value=l};return q({resetAllAndFetch:K,clearCache:$}),(l,e)=>(f(),y("div",ne,[g("label",{class:E(["text-sm font-semibold",{"text-error":l.errorMessage,"text-neutral-darker":!l.errorMessage}])},D(l.label),3),L(_,{items:z.value,multiple:p.multiple,"is-open":r.value,disabled:l.disabled,"onUpdate:isOpen":e[7]||(e[7]=t=>P(t)),onEndOfList:e[8]||(e[8]=t=>W({isEndOfList:!0}))},{anchor:V(()=>[L(ae,{color:l.color,name:l.name},{default:V(()=>[g("div",se,[p.multiple?(f(),y("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),y(G,null,J(o.value,(t,i)=>(f(),O(ee,{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:e[0]||(e[0]=B(s=>A(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):k("",!0),Q(g("input",{ref_key:"inputField",ref:b,"onUpdate:modelValue":e[1]||(e[1]=t=>u.value=t),disabled:l.disabled,type:"text",class:E(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":l.disabled}]),validation:l.validation,placeholder:p.placeholder,onInput:e[2]||(e[2]=t=>N(t)),onKeydown:e[3]||(e[3]=B(t=>A(t),["backspace"])),onClick:e[4]||(e[4]=F(t=>h(t),["prevent"])),onBlur:e[5]||(e[5]=F(t=>h(t),["prevent"])),onWheel:e[6]||(e[6]=t=>M(t))},null,42,ue),[[X,u.value]]),v.value?(f(),O(te,{key:1,class:"mx-2",size:"normal"})):k("",!0)])]),_:1},8,["color","name"])]),_:1},8,["items","multiple","is-open","disabled"]),l.errorMessage?(f(),y("div",re,D(l.errorMessage),1)):k("",!0)]))}});export{xe as default};
+import{defineComponent as R,ref as d,onMounted as Y,computed as j,openBlock as f,createElementBlock as x,createElementVNode as k,normalizeClass as E,toDisplayString as D,createVNode as L,withCtx as V,Fragment as G,renderList as J,createBlock as B,withKeys as O,createCommentVNode as C,withDirectives as Q,withModifiers as F,vModelText as X}from"vue";import{withCommonElInputProps as Z}from"./input.esm.js";import _ from"../ElDropdown.vue.esm2.js";import ee from"../ElInputChip.vue.esm2.js";import{useMemoize as le}from"../../node_modules/@vueuse/core/index.esm.js";import te from"../ElSpinner.vue.esm2.js";import ae from"./ElInputContainer.vue.esm2.js";import{useDebounceFn as oe}from"../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.esm.js";const ne={class:"flex flex-col gap-1"},se={class:"flex items-center gap-1 px-2"},ue=["disabled","validation","placeholder"],re={key:0,class:"text-xs font-normal text-error"},ye=R({__name:"ElInputAutocomplete",props:{...Z(),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"},disableSelectAll:{type:Boolean,default:!1},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","endOfList"],setup(p,{expose:q,emit:T}){const a=p,c=T,v=d(!1),r=d(!1),u=d(a.modelValue),n=d([]),o=d(a.selectedItems),b=d(),m=d();Y(async()=>{if(a.dataController){const l=await g(u.value);n.value=(l==null?void 0:l.data)||[]}else n.value=a.items});const z=j(()=>{var e;const l=(e=n.value)==null?void 0:e.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 M=o.value.findIndex(y=>y.text?y.text===t.text:y.label===t.label);M!==-1?o.value=o.value.filter((y,H)=>H!==M):o.value.push({...t,check:!0}),u.value="",m.value=void 0,(s=b.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&&!a.disableSelectAll&&l.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=b.value)==null||t.focus(),c("update:selectedItems",o.value)}}),l}),I=le(async(l,e)=>{var t;return await((t=a.dataController)==null?void 0:t.call(a,l,e))}),g=oe(I,a.debounceTime),$=()=>I.cache.clear(),K=async()=>{var e;u.value=void 0,n.value=a.items,o.value=a.selectedItems;const l=await((e=a.dataController)==null?void 0:e.call(a,u.value));n.value=(l==null?void 0:l.data)||[]},h=l=>{var e;((e=l.relatedTarget)==null?void 0:e.role)!=="option"&&(r.value?r.value=!1:r.value=!0)},N=({target:l})=>{l instanceof HTMLInputElement&&l.value.charAt(l.value.length-1)!==" "&&U(l.value)},w=(l,e)=>{o.value=o.value.filter(t=>t.text!==e.text),c("update:selectedItems",o.value)},U=async l=>{if(a.dataController){v.value=!0;const e=await g(l);r.value=!!e,v.value=!e,n.value=(e==null?void 0:e.data)||[]}else l?n.value=a.items.filter(e=>{var t;return(t=e.text)==null?void 0:t.toLowerCase().includes(l.toLowerCase())}):n.value=a.items;c("update:modelValue",l)},W=async l=>{if(a.dataController){v.value=!0;const e=await g(u.value,l);v.value=!e,n.value=(e==null?void 0:e.data)||[]}else n.value=a.items},A=l=>{var e,t;if(!u.value)if(o.value.length>0&&!m.value){const i=o.value.length-1;m.value=o.value[i],(e=document.getElementById(i.toString()))==null||e.focus()}else w(l,m.value),m.value=void 0,(t=b.value)==null||t.focus()},S=l=>{const e=l.currentTarget;e.scrollLeft+=l.deltaY,l.preventDefault()},P=l=>{a.multiple?r.value=!0:r.value=l};return q({resetAllAndFetch:K,clearCache:$}),(l,e)=>(f(),x("div",ne,[k("label",{class:E(["text-sm font-semibold",{"text-error":l.errorMessage,"text-neutral-darker":!l.errorMessage}])},D(l.label),3),L(_,{items:z.value,multiple:p.multiple,"is-open":r.value,disabled:l.disabled,"onUpdate:isOpen":e[7]||(e[7]=t=>P(t)),onEndOfList:e[8]||(e[8]=t=>W({isEndOfList:!0}))},{anchor:V(()=>[L(ae,{color:l.color,name:l.name},{default:V(()=>[k("div",se,[p.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:S},[(f(!0),x(G,null,J(o.value,(t,i)=>(f(),B(ee,{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:e[0]||(e[0]=O(s=>A(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):C("",!0),Q(k("input",{ref_key:"inputField",ref:b,"onUpdate:modelValue":e[1]||(e[1]=t=>u.value=t),disabled:l.disabled,type:"text",class:E(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":l.disabled}]),validation:l.validation,placeholder:p.placeholder,onInput:e[2]||(e[2]=t=>N(t)),onKeydown:e[3]||(e[3]=O(t=>A(t),["backspace"])),onClick:e[4]||(e[4]=F(t=>h(t),["prevent"])),onBlur:e[5]||(e[5]=F(t=>h(t),["prevent"])),onWheel:e[6]||(e[6]=t=>S(t))},null,42,ue),[[X,u.value]]),v.value?(f(),B(te,{key:1,class:"mx-2",size:"normal"})):C("",!0)])]),_:1},8,["color","name"])]),_:1},8,["items","multiple","is-open","disabled"]),l.errorMessage?(f(),x("div",re,D(l.errorMessage),1)):C("",!0)]))}});export{ye 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 }>;\nexport type EventOptions = { isEndOfList: boolean };\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, eventOptions?: EventOptions) => 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  (event: 'endOfList'): 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, eventOptions?: EventOptions) => {\n  return await props.dataController?.(value, eventOptions);\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// Trigger event end of list to data controller\nconst triggerEventOption = async (eventOptions: EventOptions) => {\n  if (props.dataController) {\n    isLoading.value = true;\n    const response = await props.dataController(query.value, eventOptions);\n    isLoading.value = !response;\n\n    filteredItems.value = response?.data || [];\n  } else {\n    filteredItems.value = props.items;\n  }\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\n      :items=\"items\"\n      :multiple=\"multiple\"\n      :is-open=\"isOpen\"\n      :disabled=\"disabled\"\n      @update:is-open=\"onUpdateIsOpen($event)\"\n      @end-of-list=\"triggerEventOption({ isEndOfList: true })\"\n    >\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","eventOptions","useDebounceFn","clearCache","resetAllAndFetch","onInputClick","e","onChangeEvent","target","updateModel","onRemoveItem","_event","result","triggerEventOption","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 }>;\nexport type EventOptions = { isEndOfList: boolean };\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  disableSelectAll: {\n    type: Boolean,\n    default: false,\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, eventOptions?: EventOptions) => 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  (event: 'endOfList'): 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 && !props.disableSelectAll) {\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, eventOptions?: EventOptions) => {\n  return await props.dataController?.(value, eventOptions);\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 * 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 fr m 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};\nconst triggerEventOption = async (eventOptions: EventOptions) => {\n  if (props.dataController) {\n    isLoading.value = true;\n    const response = await debounceDataController(query.value, eventOptions);\n    isLoading.value = !response;\n\n    filteredItems.value = response?.data || [];\n  } else {\n    filteredItems.value = props.items;\n  }\n};\n\n/**\n    Handle backspace key press to re     last selected item wh   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 sc     event to scroll the li   ox 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     he page\n  event.preventDefault();\n};\n\n/**\n    Handle update isOpen eve    o open the dropdown    n 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\n      :items=\"items\"\n      :multiple=\"multiple\"\n      :is-open=\"isOpen\"\n      :disabled=\"disabled\"\n      @update:is-open=\"onUpdateIsOpen($event)\"\n      @end-of-list=\"triggerEventOption({ isEndOfList: true })\"\n    >\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","eventOptions","useDebounceFn","clearCache","resetAllAndFetch","onInputClick","e","onChangeEvent","target","updateModel","onRemoveItem","_event","result","triggerEventOption","onDeleteKeyPress","lastItemIndex","_b","onWheelScroll","event","container","onUpdateIsOpen","__expose"],"mappings":"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"}

package/package.json

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