@davincihealthcare/elty-design-system-vue 1.83.1 → 1.84.0

package/dist/ElBubbleChat.vue.d.ts

@@ -14,7 +14,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     automaticMessage?: string;
     headline?: string;
     avatar?: Pick<InstanceType<typeof ElAvatar>["$props"], "picture" | "label">;
-    file?: Pick<InstanceType<typeof ElFile>["$props"], "name" | "format">;
+    file?: Pick<InstanceType<typeof ElFile>["$props"], "name" | "format" | "url">;
     picture?: string;
     loading?: boolean;
     error?: boolean;
@@ -35,7 +35,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     contextMenuItems: undefined;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "row-selection": (value: boolean | "indeterminate") => void;
-    "open-file": () => void;
+    "open-file": (url?: string | undefined) => void;
     "open-picture": () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     appearence: ElBubbleChatAppearences;
@@ -45,7 +45,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     automaticMessage?: string;
     headline?: string;
     avatar?: Pick<InstanceType<typeof ElAvatar>["$props"], "picture" | "label">;
-    file?: Pick<InstanceType<typeof ElFile>["$props"], "name" | "format">;
+    file?: Pick<InstanceType<typeof ElFile>["$props"], "name" | "format" | "url">;
     picture?: string;
     loading?: boolean;
     error?: boolean;
@@ -66,7 +66,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     contextMenuItems: undefined;
 }>>> & {
     "onRow-selection"?: ((value: boolean | "indeterminate") => any) | undefined;
-    "onOpen-file"?: (() => any) | undefined;
+    "onOpen-file"?: ((url?: string | undefined) => any) | undefined;
     "onOpen-picture"?: (() => any) | undefined;
 }, {
     picture: string;
@@ -74,7 +74,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     avatar: Pick<InstanceType<typeof ElAvatar>["$props"], "picture" | "label">;
     color: ElBubbleChatColors;
     maxWidth: number;
-    file: Pick<InstanceType<typeof ElFile>["$props"], "name" | "format">;
+    file: Pick<InstanceType<typeof ElFile>["$props"], "name" | "format" | "url">;
     message: string;
     headline: string;
     automaticMessage: string;

package/dist/ElFile.vue.d.ts

@@ -5,6 +5,7 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     name: string;
     format?: string;
     disabled?: boolean;
+    url?: string;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
@@ -12,6 +13,7 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     name: string;
     format?: string;
     disabled?: boolean;
+    url?: string;
 }>>> & {
     onClose?: (() => any) | undefined;
 }, {}, {}>;

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("./ElAvatar.vue.cjs2.js"),B=require("./ElFile.vue.cjs2.js"),C=require("./ElIcon.vue.cjs2.js"),E=require("./forms/ElInputCheckbox.vue.cjs2.js"),M=require("../node_modules/lodash/lodash.cjs.js"),V=require("./ElItem.vue.cjs2.js"),N={class:"flex flex-col gap-2 w-fit"},S={class:"flex gap-3"},z={key:0,class:"text-neutral-lighter text-xs font-medium"},j=["src"],I={class:"flex w-full flex-col gap-1"},W={key:0},q={key:1},$=["filled","outlined"],A=["brand-blue","brand-green","indigo","purple","pink"],D=e.defineComponent({__name:"ElBubbleChat",props:{appearence:{},color:{default:"brand-blue"},time:{default:void 0},message:{default:void 0},automaticMessage:{default:void 0},headline:{default:void 0},avatar:{default:void 0},file:{default:void 0},picture:{default:void 0},loading:{type:Boolean},error:{type:Boolean},multiSelect:{type:Boolean},selected:{type:Boolean},maxWidth:{default:60},contextMenuItems:{default:void 0}},emits:["row-selection","open-file","open-picture"],setup(v,{emit:h}){const o=v,u=h,d=e.ref(!1),r=e.ref(0),n=e.ref(0),k=l=>{d.value=!0,r.value=l.pageX,n.value=l.pageY},i=e.ref(),s=e.computed(()=>i.value?{width:i.value.clientWidth,height:i.value.clientHeight}:{width:0,height:0}),p=e.computed(()=>({width:window.innerWidth,height:window.innerHeight})),g=e.computed(()=>r.value+s.value.width>p.value.width?r.value-s.value.width:r.value),b=e.computed(()=>n.value+s.value.height>p.value.height?n.value-s.value.height:n.value),y=e.computed(()=>{let l=o.maxWidth;return o.maxWidth<10&&(l=10),o.maxWidth>100&&(l=100),o.appearence==="filled"&&(o.error||o.multiSelect)?`calc(${l}% + 2.75rem)`:o.avatar?`calc(${l}% + 3.25rem)`:`${l}%`});return(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["w-full flex",{"justify-end":l.appearence==="filled","justify-start":l.appearence==="outlined"}])},[e.createElementVNode("div",{class:"flex flex-col gap-2 w-fit",style:e.normalizeStyle({"max-width":y.value})},[l.automaticMessage?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["text-sm font-semibold text-neutral-lighter flex",{"justify-end":l.appearence==="filled","justify-start":l.appearence==="outlined","opacity-0 select-none":l.appearence==="filled"&&l.multiSelect&&!l.error,"mr-11":l.appearence==="filled"&&l.error}])},e.toDisplayString(l.automaticMessage),3)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["flex gap-5 items-center",{"justify-end":l.appearence==="filled","justify-start":l.appearence==="outlined"}])},[e.createElementVNode("div",N,[e.createElementVNode("div",S,[l.avatar&&l.appearence==="outlined"?(e.openBlock(),e.createBlock(w.default,{key:0,size:"sm",picture:l.avatar.picture,label:l.avatar.label,class:"shrink-0"},null,8,["picture","label"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center",{"text-white":l.appearence==="filled","bg-brandBlue-500":l.appearence==="filled"&&l.color==="brand-blue","bg-brandGreen-500":l.appearence==="filled"&&l.color==="brand-green","bg-indigo-500":l.appearence==="filled"&&l.color==="indigo","bg-purple-500":l.appearence==="filled"&&l.color==="purple","bg-pink-500":l.appearence==="filled"&&l.color==="pink","bg-neutral-surface text-gray-900 border border-neutral-surface":l.appearence==="outlined"}]),onContextmenu:a[2]||(a[2]=e.withModifiers(t=>l.contextMenuItems&&l.contextMenuItems.length&&k(t),["prevent"]))},[l.headline&&l.appearence==="outlined"?(e.openBlock(),e.createElementBlock("div",z,e.toDisplayString(l.headline),1)):e.createCommentVNode("",!0),l.picture?(e.openBlock(),e.createElementBlock("div",{key:1,class:"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer",onClick:a[0]||(a[0]=t=>u("open-picture"))},[e.createElementVNode("img",{src:l.picture,class:"w-full h-full object-cover"},null,8,j)])):e.createCommentVNode("",!0),l.file?(e.openBlock(),e.createBlock(B.default,{key:2,variant:l.appearence==="filled"?"alpha":"outlined",name:l.file.name,format:l.file.format,class:"cursor-pointer",onClick:a[1]||(a[1]=t=>u("open-file"))},null,8,["variant","name","format"])):e.createCommentVNode("",!0),l.message?(e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass(["flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap",{"text-neutral-inverse":l.appearence==="filled","text-neutral-darker":l.appearence==="outlined"}])},e.toDisplayString(l.message),3)):e.createCommentVNode("",!0)],34)])]),l.appearence==="filled"&&l.error?(e.openBlock(),e.createBlock(C.default,{key:0,name:"ExclamationCircleIcon",solid:"",class:"w-6 h-6 text-error-active flex justify-start shrink-0"})):e.createCommentVNode("",!0),l.appearence==="filled"&&l.multiSelect&&!l.error?(e.openBlock(),e.createBlock(E.default,{key:1,"model-value":l.selected,color:l.color,class:"shrink-0","onUpdate:modelValue":a[3]||(a[3]=t=>u("row-selection",t))},null,8,["model-value","color"])):e.createCommentVNode("",!0)],2),l.contextMenuItems&&l.contextMenuItems.length&&d.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default",onClick:a[4]||(a[4]=()=>d.value=!1)},[e.createElementVNode("div",{ref_key:"contextMenuElement",ref:i,class:"z-50 absolute bg-white rounded-md shadow p-2 min-w-52",style:e.normalizeStyle({top:b.value+"px",left:g.value+"px"})},[e.createElementVNode("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.contextMenuItems,(t,c)=>{var f;return e.openBlock(),e.createBlock(V.default,e.mergeProps({id:"option-"+c,ref_for:!0,ref:"itemRefs",key:c,class:["self-stretch",{"cursor-pointer":!t.disabled,"cursor-default":t.disabled}],role:"option",tabindex:"-1"},e.unref(M.lodashExports.omit)(t,"onClick"),{disabled:t.disabled,"data-cy":`${(f=t.text)==null?void 0:f.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,onClick:e.withModifiers(H=>{var m;return!t.disabled&&((m=t.onClick)==null?void 0:m.call(t))},["prevent"])}),null,16,["id","class","disabled","data-cy","onClick"])}),128))])],4)])):e.createCommentVNode("",!0),l.time||l.loading?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["text-xs text-neutral-lighter flex justify-end",{"opacity-0 select-none":l.appearence==="filled"&&(l.multiSelect||l.error)}])},[l.loading&&l.appearence==="filled"?(e.openBlock(),e.createElementBlock("div",W,"Invio in corso")):(e.openBlock(),e.createElementBlock("div",q,e.toDisplayString(l.time),1))],2)):e.createCommentVNode("",!0)],4)],2))}});exports.default=D;exports.elBubbleChatAppearences=$;exports.elBubbleChatColors=A;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("./ElAvatar.vue.cjs2.js"),B=require("./ElFile.vue.cjs2.js"),C=require("./ElIcon.vue.cjs2.js"),E=require("./forms/ElInputCheckbox.vue.cjs2.js"),M=require("../node_modules/lodash/lodash.cjs.js"),V=require("./ElItem.vue.cjs2.js"),N={class:"flex flex-col gap-2 w-fit"},S={class:"flex gap-3"},z={key:0,class:"text-neutral-lighter text-xs font-medium"},j=["src"],I={class:"flex w-full flex-col gap-1"},W={key:0},q={key:1},$=["filled","outlined"],A=["brand-blue","brand-green","indigo","purple","pink"],D=e.defineComponent({__name:"ElBubbleChat",props:{appearence:{},color:{default:"brand-blue"},time:{default:void 0},message:{default:void 0},automaticMessage:{default:void 0},headline:{default:void 0},avatar:{default:void 0},file:{default:void 0},picture:{default:void 0},loading:{type:Boolean},error:{type:Boolean},multiSelect:{type:Boolean},selected:{type:Boolean},maxWidth:{default:60},contextMenuItems:{default:void 0}},emits:["row-selection","open-file","open-picture"],setup(v,{emit:h}){const a=v,u=h,d=e.ref(!1),o=e.ref(0),n=e.ref(0),k=l=>{d.value=!0,o.value=l.pageX,n.value=l.pageY},i=e.ref(),s=e.computed(()=>i.value?{width:i.value.clientWidth,height:i.value.clientHeight}:{width:0,height:0}),p=e.computed(()=>({width:window.innerWidth,height:window.innerHeight})),g=e.computed(()=>o.value+s.value.width>p.value.width?o.value-s.value.width:o.value),b=e.computed(()=>n.value+s.value.height>p.value.height?n.value-s.value.height:n.value),y=e.computed(()=>{let l=a.maxWidth;return a.maxWidth<10&&(l=10),a.maxWidth>100&&(l=100),a.appearence==="filled"&&(a.error||a.multiSelect)?`calc(${l}% + 2.75rem)`:a.avatar?`calc(${l}% + 3.25rem)`:`${l}%`});return(l,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["w-full flex",{"justify-end":l.appearence==="filled","justify-start":l.appearence==="outlined"}])},[e.createElementVNode("div",{class:"flex flex-col gap-2 w-fit",style:e.normalizeStyle({"max-width":y.value})},[l.automaticMessage?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["text-sm font-semibold text-neutral-lighter flex",{"justify-end":l.appearence==="filled","justify-start":l.appearence==="outlined","opacity-0 select-none":l.appearence==="filled"&&l.multiSelect&&!l.error,"mr-11":l.appearence==="filled"&&l.error}])},e.toDisplayString(l.automaticMessage),3)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["flex gap-5 items-center",{"justify-end":l.appearence==="filled","justify-start":l.appearence==="outlined"}])},[e.createElementVNode("div",N,[e.createElementVNode("div",S,[l.avatar&&l.appearence==="outlined"?(e.openBlock(),e.createBlock(w.default,{key:0,size:"sm",picture:l.avatar.picture,label:l.avatar.label,class:"shrink-0"},null,8,["picture","label"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center",{"text-white":l.appearence==="filled","bg-brandBlue-500":l.appearence==="filled"&&l.color==="brand-blue","bg-brandGreen-500":l.appearence==="filled"&&l.color==="brand-green","bg-indigo-500":l.appearence==="filled"&&l.color==="indigo","bg-purple-500":l.appearence==="filled"&&l.color==="purple","bg-pink-500":l.appearence==="filled"&&l.color==="pink","bg-neutral-surface text-gray-900 border border-neutral-surface":l.appearence==="outlined"}]),onContextmenu:r[2]||(r[2]=e.withModifiers(t=>l.contextMenuItems&&l.contextMenuItems.length&&k(t),["prevent"]))},[l.headline&&l.appearence==="outlined"?(e.openBlock(),e.createElementBlock("div",z,e.toDisplayString(l.headline),1)):e.createCommentVNode("",!0),l.picture?(e.openBlock(),e.createElementBlock("div",{key:1,class:"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer",onClick:r[0]||(r[0]=t=>u("open-picture"))},[e.createElementVNode("img",{src:l.picture,class:"w-full h-full object-cover"},null,8,j)])):e.createCommentVNode("",!0),l.file?(e.openBlock(),e.createBlock(B.default,{key:2,variant:l.appearence==="filled"?"alpha":"outlined",name:l.file.name,format:l.file.format,class:"cursor-pointer",onClick:r[1]||(r[1]=t=>u("open-file",l.file.url))},null,8,["variant","name","format"])):e.createCommentVNode("",!0),l.message?(e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass(["flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap",{"text-neutral-inverse":l.appearence==="filled","text-neutral-darker":l.appearence==="outlined"}])},e.toDisplayString(l.message),3)):e.createCommentVNode("",!0)],34)])]),l.appearence==="filled"&&l.error?(e.openBlock(),e.createBlock(C.default,{key:0,name:"ExclamationCircleIcon",solid:"",class:"w-6 h-6 text-error-active flex justify-start shrink-0"})):e.createCommentVNode("",!0),l.appearence==="filled"&&l.multiSelect&&!l.error?(e.openBlock(),e.createBlock(E.default,{key:1,"model-value":l.selected,color:l.color,class:"shrink-0","onUpdate:modelValue":r[3]||(r[3]=t=>u("row-selection",t))},null,8,["model-value","color"])):e.createCommentVNode("",!0)],2),l.contextMenuItems&&l.contextMenuItems.length&&d.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default",onClick:r[4]||(r[4]=()=>d.value=!1)},[e.createElementVNode("div",{ref_key:"contextMenuElement",ref:i,class:"z-50 absolute bg-white rounded-md shadow p-2 min-w-52",style:e.normalizeStyle({top:b.value+"px",left:g.value+"px"})},[e.createElementVNode("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.contextMenuItems,(t,c)=>{var f;return e.openBlock(),e.createBlock(V.default,e.mergeProps({id:"option-"+c,ref_for:!0,ref:"itemRefs",key:c,class:["self-stretch",{"cursor-pointer":!t.disabled,"cursor-default":t.disabled}],role:"option",tabindex:"-1"},e.unref(M.lodashExports.omit)(t,"onClick"),{disabled:t.disabled,"data-cy":`${(f=t.text)==null?void 0:f.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,onClick:e.withModifiers(H=>{var m;return!t.disabled&&((m=t.onClick)==null?void 0:m.call(t))},["prevent"])}),null,16,["id","class","disabled","data-cy","onClick"])}),128))])],4)])):e.createCommentVNode("",!0),l.time||l.loading?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["text-xs text-neutral-lighter flex justify-end",{"opacity-0 select-none":l.appearence==="filled"&&(l.multiSelect||l.error)}])},[l.loading&&l.appearence==="filled"?(e.openBlock(),e.createElementBlock("div",W,"Invio in corso")):(e.openBlock(),e.createElementBlock("div",q,e.toDisplayString(l.time),1))],2)):e.createCommentVNode("",!0)],4)],2))}});exports.default=D;exports.elBubbleChatAppearences=$;exports.elBubbleChatColors=A;
 //# sourceMappingURL=ElBubbleChat.vue.cjs2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ElBubbleChat.vue.cjs2.js","sources":["../../src/ElBubbleChat.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elBubbleChatAppearences = ['filled', 'outlined'] as const;\nexport type ElBubbleChatAppearences = (typeof elBubbleChatAppearences)[number];\n\nexport const elBubbleChatColors = ['brand-blue', 'brand-green', 'indigo', 'purple', 'pink'] as const;\nexport type ElBubbleChatColors = (typeof elBubbleChatColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport ElAvatar from './ElAvatar.vue';\nimport { DropdownItem } from './ElDropdown.vue';\nimport ElFile from './ElFile.vue';\nimport ElIcon from './ElIcon.vue';\nimport ElInputCheckbox, { ElInputCheckboxModelValues } from './forms/ElInputCheckbox.vue';\nimport { omit } from 'lodash';\nimport ElItem from './ElItem.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    appearence: ElBubbleChatAppearences;\n    color?: ElBubbleChatColors;\n    time?: string;\n    message?: string;\n    automaticMessage?: string;\n    headline?: string;\n    avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n    file?: Pick<InstanceType<typeof ElFile>['$props'], 'name' | 'format'>;\n    picture?: string;\n    loading?: boolean;\n    error?: boolean;\n    multiSelect?: boolean;\n    selected?: boolean;\n    maxWidth?: number;\n    contextMenuItems?: DropdownItem[];\n  }>(),\n  {\n    color: 'brand-blue',\n    file: undefined,\n    picture: undefined,\n    automaticMessage: undefined,\n    time: undefined,\n    message: undefined,\n    headline: undefined,\n    avatar: undefined,\n    maxWidth: 60,\n    contextMenuItems: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'row-selection', value: ElInputCheckboxModelValues): void;\n  (event: 'open-file'): void;\n  (event: 'open-picture'): void;\n}>();\n\nconst showMenu = ref<boolean>(false);\nconst menuX = ref<number>(0);\nconst menuY = ref<number>(0);\n\nconst handleShowContextMenu = (event: MouseEvent) => {\n  showMenu.value = true;\n  menuX.value = event.pageX;\n  menuY.value = event.pageY;\n};\n\nconst contextMenuElement = ref<HTMLDivElement>();\n\nconst contextMenuSize = computed(() => {\n  if (!contextMenuElement.value)\n    return {\n      width: 0,\n      height: 0,\n    };\n\n  return {\n    width: contextMenuElement.value.clientWidth,\n    height: contextMenuElement.value.clientHeight,\n  };\n});\n\nconst deviceSize = computed(() => {\n  return { width: window.innerWidth, height: window.innerHeight };\n});\n\nconst positionX = computed(() => {\n  const totalWidth = menuX.value + contextMenuSize.value.width;\n\n  if (totalWidth > deviceSize.value.width) return menuX.value - contextMenuSize.value.width;\n\n  return menuX.value;\n});\n\nconst positionY = computed(() => {\n  const totalHeight = menuY.value + contextMenuSize.value.height;\n\n  if (totalHeight > deviceSize.value.height) return menuY.value - contextMenuSize.value.height;\n\n  return menuY.value;\n});\n\nconst bubbleMaxWidth = computed(() => {\n  let maxWidth = props.maxWidth;\n\n  if (props.maxWidth < 10) maxWidth = 10;\n  if (props.maxWidth > 100) maxWidth = 100;\n\n  if (props.appearence === 'filled' && (props.error || props.multiSelect)) return `calc(${maxWidth}% + 2.75rem)`;\n\n  if (props.avatar) return `calc(${maxWidth}% + 3.25rem)`;\n\n  return `${maxWidth}%`;\n});\n</script>\n\n<template>\n  <div\n    class=\"w-full flex\"\n    :class=\"{\n      'justify-end': appearence === 'filled',\n      'justify-start': appearence === 'outlined',\n    }\"\n  >\n    <div\n      class=\"flex flex-col gap-2 w-fit\"\n      :style=\"{\n        /* The message container width should be max 60% (default) of parent width.\n        To ensure that when the checkbox for multiselect/error/avatar are visible,\n        we add extra width (same as multiselect/error/user avatar width),\n        so the maximum width of the message container should not change */\n        'max-width': bubbleMaxWidth,\n      }\"\n    >\n      <div\n        v-if=\"automaticMessage\"\n        class=\"text-sm font-semibold text-neutral-lighter flex\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n          'opacity-0 select-none': appearence === 'filled' && multiSelect && !error,\n          'mr-11': appearence === 'filled' && error,\n        }\"\n      >\n        {{ automaticMessage }}\n      </div>\n\n      <div\n        class=\"flex gap-5 items-center\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n        }\"\n      >\n        <div class=\"flex flex-col gap-2 w-fit\">\n          <div class=\"flex gap-3\">\n            <ElAvatar\n              v-if=\"avatar && appearence === 'outlined'\"\n              size=\"sm\"\n              :picture=\"avatar.picture\"\n              :label=\"avatar.label\"\n              class=\"shrink-0\"\n            />\n\n            <div\n              class=\"rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center\"\n              :class=\"{\n                'text-white': appearence === 'filled',\n                'bg-brandBlue-500': appearence === 'filled' && color === 'brand-blue',\n                'bg-brandGreen-500': appearence === 'filled' && color === 'brand-green',\n                'bg-indigo-500': appearence === 'filled' && color === 'indigo',\n                'bg-purple-500': appearence === 'filled' && color === 'purple',\n                'bg-pink-500': appearence === 'filled' && color === 'pink',\n                'bg-neutral-surface text-gray-900 border border-neutral-surface': appearence === 'outlined',\n              }\"\n              @contextmenu.prevent=\"contextMenuItems && contextMenuItems.length && handleShowContextMenu($event)\"\n            >\n              <div v-if=\"headline && appearence === 'outlined'\" class=\"text-neutral-lighter text-xs font-medium\">{{ headline }}</div>\n\n              <div v-if=\"picture\" class=\"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer\" @click=\"emit('open-picture')\">\n                <img :src=\"picture\" class=\"w-full h-full object-cover\" />\n              </div>\n\n              <ElFile\n                v-if=\"file\"\n                :variant=\"appearence === 'filled' ? 'alpha' : 'outlined'\"\n                :name=\"file.name\"\n                :format=\"file.format\"\n                class=\"cursor-pointer\"\n                @click=\"emit('open-file')\"\n              />\n\n              <div\n                v-if=\"message\"\n                class=\"flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap\"\n                :class=\"{\n                  'text-neutral-inverse': appearence === 'filled',\n                  'text-neutral-darker': appearence === 'outlined',\n                }\"\n              >\n                {{ message }}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <ElIcon\n          v-if=\"appearence === 'filled' && error\"\n          name=\"ExclamationCircleIcon\"\n          solid\n          class=\"w-6 h-6 text-error-active flex justify-start shrink-0\"\n        />\n\n        <ElInputCheckbox\n          v-if=\"appearence === 'filled' && multiSelect && !error\"\n          :model-value=\"selected\"\n          :color=\"color\"\n          class=\"shrink-0\"\n          @update:model-value=\"val => emit('row-selection', val)\"\n        />\n      </div>\n\n      <!-- Context menu -->\n      <div\n        v-if=\"contextMenuItems && contextMenuItems.length && showMenu\"\n        class=\"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default\"\n        @click=\"() => (showMenu = false)\"\n      >\n        <div\n          ref=\"contextMenuElement\"\n          class=\"z-50 absolute bg-white rounded-md shadow p-2 min-w-52\"\n          :style=\"{ top: positionY + 'px', left: positionX + 'px' }\"\n        >\n          <div class=\"flex w-full flex-col gap-1\">\n            <ElItem\n              v-for=\"(item, index) in contextMenuItems\"\n              :id=\"'option-' + index\"\n              ref=\"itemRefs\"\n              :key=\"index\"\n              class=\"self-stretch\"\n              :class=\"{\n                'cursor-pointer': !item.disabled,\n                'cursor-default': item.disabled,\n              }\"\n              role=\"option\"\n              tabindex=\"-1\"\n              v-bind=\"omit(item, 'onClick')\"\n              :disabled=\"item.disabled\"\n              :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n              @click.prevent=\"!item.disabled && item.onClick?.()\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div\n        v-if=\"time || loading\"\n        class=\"text-xs text-neutral-lighter flex justify-end\"\n        :class=\"{\n          'opacity-0 select-none': appearence === 'filled' && (multiSelect || error),\n        }\"\n      >\n        <div v-if=\"loading && appearence === 'filled'\">Invio in corso</div>\n        <div v-else>\n          {{ time }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["elBubbleChatAppearences","elBubbleChatColors","props","__props","emit","__emit","showMenu","ref","menuX","menuY","handleShowContextMenu","event","contextMenuElement","contextMenuSize","computed","deviceSize","positionX","positionY","bubbleMaxWidth","maxWidth"],"mappings":"6iBACaA,EAA0B,CAAC,SAAU,UAAU,EAG/CC,EAAqB,CAAC,aAAc,cAAe,SAAU,SAAU,MAAM,8eAc1F,MAAMC,EAAQC,EAgCRC,EAAOC,EAMPC,EAAWC,MAAa,EAAK,EAC7BC,EAAQD,MAAY,CAAC,EACrBE,EAAQF,MAAY,CAAC,EAErBG,EAAyBC,GAAsB,CACnDL,EAAS,MAAQ,GACjBE,EAAM,MAAQG,EAAM,MACpBF,EAAM,MAAQE,EAAM,KAAA,EAGhBC,EAAqBL,EAAAA,MAErBM,EAAkBC,EAAAA,SAAS,IAC1BF,EAAmB,MAMjB,CACL,MAAOA,EAAmB,MAAM,YAChC,OAAQA,EAAmB,MAAM,YAAA,EAP1B,CACL,MAAO,EACP,OAAQ,CAAA,CAOb,EAEKG,EAAaD,EAAAA,SAAS,KACnB,CAAE,MAAO,OAAO,WAAY,OAAQ,OAAO,aACnD,EAEKE,EAAYF,EAAAA,SAAS,IACNN,EAAM,MAAQK,EAAgB,MAAM,MAEtCE,EAAW,MAAM,MAAcP,EAAM,MAAQK,EAAgB,MAAM,MAE7EL,EAAM,KACd,EAEKS,EAAYH,EAAAA,SAAS,IACLL,EAAM,MAAQI,EAAgB,MAAM,OAEtCE,EAAW,MAAM,OAAeN,EAAM,MAAQI,EAAgB,MAAM,OAE/EJ,EAAM,KACd,EAEKS,EAAiBJ,EAAAA,SAAS,IAAM,CACpC,IAAIK,EAAWjB,EAAM,SAKrB,OAHIA,EAAM,SAAW,KAAeiB,EAAA,IAChCjB,EAAM,SAAW,MAAgBiB,EAAA,KAEjCjB,EAAM,aAAe,WAAaA,EAAM,OAASA,EAAM,aAAqB,QAAQiB,CAAQ,eAE5FjB,EAAM,OAAe,QAAQiB,CAAQ,eAElC,GAAGA,CAAQ,GAAA,CACnB"}
+{"version":3,"file":"ElBubbleChat.vue.cjs2.js","sources":["../../src/ElBubbleChat.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elBubbleChatAppearences = ['filled', 'outlined'] as const;\nexport type ElBubbleChatAppearences = (typeof elBubbleChatAppearences)[number];\n\nexport const elBubbleChatColors = ['brand-blue', 'brand-green', 'indigo', 'purple', 'pink'] as const;\nexport type ElBubbleChatColors = (typeof elBubbleChatColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport ElAvatar from './ElAvatar.vue';\nimport { DropdownItem } from './ElDropdown.vue';\nimport ElFile from './ElFile.vue';\nimport ElIcon from './ElIcon.vue';\nimport ElInputCheckbox, { ElInputCheckboxModelValues } from './forms/ElInputCheckbox.vue';\nimport { omit } from 'lodash';\nimport ElItem from './ElItem.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    appearence: ElBubbleChatAppearences;\n    color?: ElBubbleChatColors;\n    time?: string;\n    message?: string;\n    automaticMessage?: string;\n    headline?: string;\n    avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n    file?: Pick<InstanceType<typeof ElFile>['$props'], 'name' | 'format' | 'url'>;\n    picture?: string;\n    loading?: boolean;\n    error?: boolean;\n    multiSelect?: boolean;\n    selected?: boolean;\n    maxWidth?: number;\n    contextMenuItems?: DropdownItem[];\n  }>(),\n  {\n    color: 'brand-blue',\n    file: undefined,\n    picture: undefined,\n    automaticMessage: undefined,\n    time: undefined,\n    message: undefined,\n    headline: undefined,\n    avatar: undefined,\n    maxWidth: 60,\n    contextMenuItems: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'row-selection', value: ElInputCheckboxModelValues): void;\n  (event: 'open-file', url?: string): void;\n  (event: 'open-picture'): void;\n}>();\n\nconst showMenu = ref<boolean>(false);\nconst menuX = ref<number>(0);\nconst menuY = ref<number>(0);\n\nconst handleShowContextMenu = (event: MouseEvent) => {\n  showMenu.value = true;\n  menuX.value = event.pageX;\n  menuY.value = event.pageY;\n};\n\nconst contextMenuElement = ref<HTMLDivElement>();\n\nconst contextMenuSize = computed(() => {\n  if (!contextMenuElement.value)\n    return {\n      width: 0,\n      height: 0,\n    };\n\n  return {\n    width: contextMenuElement.value.clientWidth,\n    height: contextMenuElement.value.clientHeight,\n  };\n});\n\nconst deviceSize = computed(() => {\n  return { width: window.innerWidth, height: window.innerHeight };\n});\n\nconst positionX = computed(() => {\n  const totalWidth = menuX.value + contextMenuSize.value.width;\n\n  if (totalWidth > deviceSize.value.width) return menuX.value - contextMenuSize.value.width;\n\n  return menuX.value;\n});\n\nconst positionY = computed(() => {\n  const totalHeight = menuY.value + contextMenuSize.value.height;\n\n  if (totalHeight > deviceSize.value.height) return menuY.value - contextMenuSize.value.height;\n\n  return menuY.value;\n});\n\nconst bubbleMaxWidth = computed(() => {\n  let maxWidth = props.maxWidth;\n\n  if (props.maxWidth < 10) maxWidth = 10;\n  if (props.maxWidth > 100) maxWidth = 100;\n\n  if (props.appearence === 'filled' && (props.error || props.multiSelect)) return `calc(${maxWidth}% + 2.75rem)`;\n\n  if (props.avatar) return `calc(${maxWidth}% + 3.25rem)`;\n\n  return `${maxWidth}%`;\n});\n</script>\n\n<template>\n  <div\n    class=\"w-full flex\"\n    :class=\"{\n      'justify-end': appearence === 'filled',\n      'justify-start': appearence === 'outlined',\n    }\"\n  >\n    <div\n      class=\"flex flex-col gap-2 w-fit\"\n      :style=\"{\n        /* The message container width should be max 60% (default) of parent width.\n        To ensure that when the checkbox for multiselect/error/avatar are visible,\n        we add extra width (same as multiselect/error/user avatar width),\n        so the maximum width of the message container should not change */\n        'max-width': bubbleMaxWidth,\n      }\"\n    >\n      <div\n        v-if=\"automaticMessage\"\n        class=\"text-sm font-semibold text-neutral-lighter flex\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n          'opacity-0 select-none': appearence === 'filled' && multiSelect && !error,\n          'mr-11': appearence === 'filled' && error,\n        }\"\n      >\n        {{ automaticMessage }}\n      </div>\n\n      <div\n        class=\"flex gap-5 items-center\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n        }\"\n      >\n        <div class=\"flex flex-col gap-2 w-fit\">\n          <div class=\"flex gap-3\">\n            <ElAvatar\n              v-if=\"avatar && appearence === 'outlined'\"\n              size=\"sm\"\n              :picture=\"avatar.picture\"\n              :label=\"avatar.label\"\n              class=\"shrink-0\"\n            />\n\n            <div\n              class=\"rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center\"\n              :class=\"{\n                'text-white': appearence === 'filled',\n                'bg-brandBlue-500': appearence === 'filled' && color === 'brand-blue',\n                'bg-brandGreen-500': appearence === 'filled' && color === 'brand-green',\n                'bg-indigo-500': appearence === 'filled' && color === 'indigo',\n                'bg-purple-500': appearence === 'filled' && color === 'purple',\n                'bg-pink-500': appearence === 'filled' && color === 'pink',\n                'bg-neutral-surface text-gray-900 border border-neutral-surface': appearence === 'outlined',\n              }\"\n              @contextmenu.prevent=\"contextMenuItems && contextMenuItems.length && handleShowContextMenu($event)\"\n            >\n              <div v-if=\"headline && appearence === 'outlined'\" class=\"text-neutral-lighter text-xs font-medium\">{{ headline }}</div>\n\n              <div v-if=\"picture\" class=\"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer\" @click=\"emit('open-picture')\">\n                <img :src=\"picture\" class=\"w-full h-full object-cover\" />\n              </div>\n\n              <ElFile\n                v-if=\"file\"\n                :variant=\"appearence === 'filled' ? 'alpha' : 'outlined'\"\n                :name=\"file.name\"\n                :format=\"file.format\"\n                class=\"cursor-pointer\"\n                @click=\"emit('open-file', file.url)\"\n              />\n\n              <div\n                v-if=\"message\"\n                class=\"flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap\"\n                :class=\"{\n                  'text-neutral-inverse': appearence === 'filled',\n                  'text-neutral-darker': appearence === 'outlined',\n                }\"\n              >\n                {{ message }}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <ElIcon\n          v-if=\"appearence === 'filled' && error\"\n          name=\"ExclamationCircleIcon\"\n          solid\n          class=\"w-6 h-6 text-error-active flex justify-start shrink-0\"\n        />\n\n        <ElInputCheckbox\n          v-if=\"appearence === 'filled' && multiSelect && !error\"\n          :model-value=\"selected\"\n          :color=\"color\"\n          class=\"shrink-0\"\n          @update:model-value=\"val => emit('row-selection', val)\"\n        />\n      </div>\n\n      <!-- Context menu -->\n      <div\n        v-if=\"contextMenuItems && contextMenuItems.length && showMenu\"\n        class=\"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default\"\n        @click=\"() => (showMenu = false)\"\n      >\n        <div\n          ref=\"contextMenuElement\"\n          class=\"z-50 absolute bg-white rounded-md shadow p-2 min-w-52\"\n          :style=\"{ top: positionY + 'px', left: positionX + 'px' }\"\n        >\n          <div class=\"flex w-full flex-col gap-1\">\n            <ElItem\n              v-for=\"(item, index) in contextMenuItems\"\n              :id=\"'option-' + index\"\n              ref=\"itemRefs\"\n              :key=\"index\"\n              class=\"self-stretch\"\n              :class=\"{\n                'cursor-pointer': !item.disabled,\n                'cursor-default': item.disabled,\n              }\"\n              role=\"option\"\n              tabindex=\"-1\"\n              v-bind=\"omit(item, 'onClick')\"\n              :disabled=\"item.disabled\"\n              :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n              @click.prevent=\"!item.disabled && item.onClick?.()\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div\n        v-if=\"time || loading\"\n        class=\"text-xs text-neutral-lighter flex justify-end\"\n        :class=\"{\n          'opacity-0 select-none': appearence === 'filled' && (multiSelect || error),\n        }\"\n      >\n        <div v-if=\"loading && appearence === 'filled'\">Invio in corso</div>\n        <div v-else>\n          {{ time }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["elBubbleChatAppearences","elBubbleChatColors","props","__props","emit","__emit","showMenu","ref","menuX","menuY","handleShowContextMenu","event","contextMenuElement","contextMenuSize","computed","deviceSize","positionX","positionY","bubbleMaxWidth","maxWidth"],"mappings":"6iBACaA,EAA0B,CAAC,SAAU,UAAU,EAG/CC,EAAqB,CAAC,aAAc,cAAe,SAAU,SAAU,MAAM,8eAc1F,MAAMC,EAAQC,EAgCRC,EAAOC,EAMPC,EAAWC,MAAa,EAAK,EAC7BC,EAAQD,MAAY,CAAC,EACrBE,EAAQF,MAAY,CAAC,EAErBG,EAAyBC,GAAsB,CACnDL,EAAS,MAAQ,GACjBE,EAAM,MAAQG,EAAM,MACpBF,EAAM,MAAQE,EAAM,KAAA,EAGhBC,EAAqBL,EAAAA,MAErBM,EAAkBC,EAAAA,SAAS,IAC1BF,EAAmB,MAMjB,CACL,MAAOA,EAAmB,MAAM,YAChC,OAAQA,EAAmB,MAAM,YAAA,EAP1B,CACL,MAAO,EACP,OAAQ,CAAA,CAOb,EAEKG,EAAaD,EAAAA,SAAS,KACnB,CAAE,MAAO,OAAO,WAAY,OAAQ,OAAO,aACnD,EAEKE,EAAYF,EAAAA,SAAS,IACNN,EAAM,MAAQK,EAAgB,MAAM,MAEtCE,EAAW,MAAM,MAAcP,EAAM,MAAQK,EAAgB,MAAM,MAE7EL,EAAM,KACd,EAEKS,EAAYH,EAAAA,SAAS,IACLL,EAAM,MAAQI,EAAgB,MAAM,OAEtCE,EAAW,MAAM,OAAeN,EAAM,MAAQI,EAAgB,MAAM,OAE/EJ,EAAM,KACd,EAEKS,EAAiBJ,EAAAA,SAAS,IAAM,CACpC,IAAIK,EAAWjB,EAAM,SAKrB,OAHIA,EAAM,SAAW,KAAeiB,EAAA,IAChCjB,EAAM,SAAW,MAAgBiB,EAAA,KAEjCjB,EAAM,aAAe,WAAaA,EAAM,OAASA,EAAM,aAAqB,QAAQiB,CAAQ,eAE5FjB,EAAM,OAAe,QAAQiB,CAAQ,eAElC,GAAGA,CAAQ,GAAA,CACnB"}

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

@@ -1,2 +1,2 @@
-import{defineComponent as E,ref as v,computed as d,openBlock as a,createElementBlock as r,normalizeClass as s,createElementVNode as o,normalizeStyle as M,toDisplayString as h,createCommentVNode as n,createBlock as u,withModifiers as $,Fragment as H,renderList as A,mergeProps as V,unref as X}from"vue";import Y from"./ElAvatar.vue.esm2.js";import N from"./ElFile.vue.esm2.js";import D from"./ElIcon.vue.esm2.js";import F from"./forms/ElInputCheckbox.vue.esm2.js";import{l as G}from"../node_modules/lodash/lodash.esm.js";import L from"./ElItem.vue.esm2.js";const P={class:"flex flex-col gap-2 w-fit"},R={class:"flex gap-3"},U={key:0,class:"text-neutral-lighter text-xs font-medium"},q=["src"],J={class:"flex w-full flex-col gap-1"},K={key:0},O={key:1},te=["filled","outlined"],re=["brand-blue","brand-green","indigo","purple","pink"],ne=E({__name:"ElBubbleChat",props:{appearence:{},color:{default:"brand-blue"},time:{default:void 0},message:{default:void 0},automaticMessage:{default:void 0},headline:{default:void 0},avatar:{default:void 0},file:{default:void 0},picture:{default:void 0},loading:{type:Boolean},error:{type:Boolean},multiSelect:{type:Boolean},selected:{type:Boolean},maxWidth:{default:60},contextMenuItems:{default:void 0}},emits:["row-selection","open-file","open-picture"],setup(B,{emit:j}){const i=B,g=j,b=v(!1),p=v(0),f=v(0),S=e=>{b.value=!0,p.value=e.pageX,f.value=e.pageY},c=v(),m=d(()=>c.value?{width:c.value.clientWidth,height:c.value.clientHeight}:{width:0,height:0}),w=d(()=>({width:window.innerWidth,height:window.innerHeight})),W=d(()=>p.value+m.value.width>w.value.width?p.value-m.value.width:p.value),I=d(()=>f.value+m.value.height>w.value.height?f.value-m.value.height:f.value),z=d(()=>{let e=i.maxWidth;return i.maxWidth<10&&(e=10),i.maxWidth>100&&(e=100),i.appearence==="filled"&&(i.error||i.multiSelect)?`calc(${e}% + 2.75rem)`:i.avatar?`calc(${e}% + 3.25rem)`:`${e}%`});return(e,t)=>(a(),r("div",{class:s(["w-full flex",{"justify-end":e.appearence==="filled","justify-start":e.appearence==="outlined"}])},[o("div",{class:"flex flex-col gap-2 w-fit",style:M({"max-width":z.value})},[e.automaticMessage?(a(),r("div",{key:0,class:s(["text-sm font-semibold text-neutral-lighter flex",{"justify-end":e.appearence==="filled","justify-start":e.appearence==="outlined","opacity-0 select-none":e.appearence==="filled"&&e.multiSelect&&!e.error,"mr-11":e.appearence==="filled"&&e.error}])},h(e.automaticMessage),3)):n("",!0),o("div",{class:s(["flex gap-5 items-center",{"justify-end":e.appearence==="filled","justify-start":e.appearence==="outlined"}])},[o("div",P,[o("div",R,[e.avatar&&e.appearence==="outlined"?(a(),u(Y,{key:0,size:"sm",picture:e.avatar.picture,label:e.avatar.label,class:"shrink-0"},null,8,["picture","label"])):n("",!0),o("div",{class:s(["rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center",{"text-white":e.appearence==="filled","bg-brandBlue-500":e.appearence==="filled"&&e.color==="brand-blue","bg-brandGreen-500":e.appearence==="filled"&&e.color==="brand-green","bg-indigo-500":e.appearence==="filled"&&e.color==="indigo","bg-purple-500":e.appearence==="filled"&&e.color==="purple","bg-pink-500":e.appearence==="filled"&&e.color==="pink","bg-neutral-surface text-gray-900 border border-neutral-surface":e.appearence==="outlined"}]),onContextmenu:t[2]||(t[2]=$(l=>e.contextMenuItems&&e.contextMenuItems.length&&S(l),["prevent"]))},[e.headline&&e.appearence==="outlined"?(a(),r("div",U,h(e.headline),1)):n("",!0),e.picture?(a(),r("div",{key:1,class:"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer",onClick:t[0]||(t[0]=l=>g("open-picture"))},[o("img",{src:e.picture,class:"w-full h-full object-cover"},null,8,q)])):n("",!0),e.file?(a(),u(N,{key:2,variant:e.appearence==="filled"?"alpha":"outlined",name:e.file.name,format:e.file.format,class:"cursor-pointer",onClick:t[1]||(t[1]=l=>g("open-file"))},null,8,["variant","name","format"])):n("",!0),e.message?(a(),r("div",{key:3,class:s(["flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap",{"text-neutral-inverse":e.appearence==="filled","text-neutral-darker":e.appearence==="outlined"}])},h(e.message),3)):n("",!0)],34)])]),e.appearence==="filled"&&e.error?(a(),u(D,{key:0,name:"ExclamationCircleIcon",solid:"",class:"w-6 h-6 text-error-active flex justify-start shrink-0"})):n("",!0),e.appearence==="filled"&&e.multiSelect&&!e.error?(a(),u(F,{key:1,"model-value":e.selected,color:e.color,class:"shrink-0","onUpdate:modelValue":t[3]||(t[3]=l=>g("row-selection",l))},null,8,["model-value","color"])):n("",!0)],2),e.contextMenuItems&&e.contextMenuItems.length&&b.value?(a(),r("div",{key:1,class:"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default",onClick:t[4]||(t[4]=()=>b.value=!1)},[o("div",{ref_key:"contextMenuElement",ref:c,class:"z-50 absolute bg-white rounded-md shadow p-2 min-w-52",style:M({top:I.value+"px",left:W.value+"px"})},[o("div",J,[(a(!0),r(H,null,A(e.contextMenuItems,(l,y)=>{var k;return a(),u(L,V({id:"option-"+y,ref_for:!0,ref:"itemRefs",key:y,class:["self-stretch",{"cursor-pointer":!l.disabled,"cursor-default":l.disabled}],role:"option",tabindex:"-1"},X(G.omit)(l,"onClick"),{disabled:l.disabled,"data-cy":`${(k=l.text)==null?void 0:k.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,onClick:$(Q=>{var C;return!l.disabled&&((C=l.onClick)==null?void 0:C.call(l))},["prevent"])}),null,16,["id","class","disabled","data-cy","onClick"])}),128))])],4)])):n("",!0),e.time||e.loading?(a(),r("div",{key:2,class:s(["text-xs text-neutral-lighter flex justify-end",{"opacity-0 select-none":e.appearence==="filled"&&(e.multiSelect||e.error)}])},[e.loading&&e.appearence==="filled"?(a(),r("div",K,"Invio in corso")):(a(),r("div",O,h(e.time),1))],2)):n("",!0)],4)],2))}});export{ne as default,te as elBubbleChatAppearences,re as elBubbleChatColors};
+import{defineComponent as E,ref as v,computed as d,openBlock as a,createElementBlock as t,normalizeClass as s,createElementVNode as o,normalizeStyle as M,toDisplayString as h,createCommentVNode as n,createBlock as u,withModifiers as $,Fragment as H,renderList as A,mergeProps as V,unref as X}from"vue";import Y from"./ElAvatar.vue.esm2.js";import N from"./ElFile.vue.esm2.js";import D from"./ElIcon.vue.esm2.js";import F from"./forms/ElInputCheckbox.vue.esm2.js";import{l as G}from"../node_modules/lodash/lodash.esm.js";import L from"./ElItem.vue.esm2.js";const P={class:"flex flex-col gap-2 w-fit"},R={class:"flex gap-3"},U={key:0,class:"text-neutral-lighter text-xs font-medium"},q=["src"],J={class:"flex w-full flex-col gap-1"},K={key:0},O={key:1},re=["filled","outlined"],te=["brand-blue","brand-green","indigo","purple","pink"],ne=E({__name:"ElBubbleChat",props:{appearence:{},color:{default:"brand-blue"},time:{default:void 0},message:{default:void 0},automaticMessage:{default:void 0},headline:{default:void 0},avatar:{default:void 0},file:{default:void 0},picture:{default:void 0},loading:{type:Boolean},error:{type:Boolean},multiSelect:{type:Boolean},selected:{type:Boolean},maxWidth:{default:60},contextMenuItems:{default:void 0}},emits:["row-selection","open-file","open-picture"],setup(B,{emit:j}){const i=B,g=j,b=v(!1),p=v(0),f=v(0),S=e=>{b.value=!0,p.value=e.pageX,f.value=e.pageY},c=v(),m=d(()=>c.value?{width:c.value.clientWidth,height:c.value.clientHeight}:{width:0,height:0}),w=d(()=>({width:window.innerWidth,height:window.innerHeight})),W=d(()=>p.value+m.value.width>w.value.width?p.value-m.value.width:p.value),I=d(()=>f.value+m.value.height>w.value.height?f.value-m.value.height:f.value),z=d(()=>{let e=i.maxWidth;return i.maxWidth<10&&(e=10),i.maxWidth>100&&(e=100),i.appearence==="filled"&&(i.error||i.multiSelect)?`calc(${e}% + 2.75rem)`:i.avatar?`calc(${e}% + 3.25rem)`:`${e}%`});return(e,r)=>(a(),t("div",{class:s(["w-full flex",{"justify-end":e.appearence==="filled","justify-start":e.appearence==="outlined"}])},[o("div",{class:"flex flex-col gap-2 w-fit",style:M({"max-width":z.value})},[e.automaticMessage?(a(),t("div",{key:0,class:s(["text-sm font-semibold text-neutral-lighter flex",{"justify-end":e.appearence==="filled","justify-start":e.appearence==="outlined","opacity-0 select-none":e.appearence==="filled"&&e.multiSelect&&!e.error,"mr-11":e.appearence==="filled"&&e.error}])},h(e.automaticMessage),3)):n("",!0),o("div",{class:s(["flex gap-5 items-center",{"justify-end":e.appearence==="filled","justify-start":e.appearence==="outlined"}])},[o("div",P,[o("div",R,[e.avatar&&e.appearence==="outlined"?(a(),u(Y,{key:0,size:"sm",picture:e.avatar.picture,label:e.avatar.label,class:"shrink-0"},null,8,["picture","label"])):n("",!0),o("div",{class:s(["rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center",{"text-white":e.appearence==="filled","bg-brandBlue-500":e.appearence==="filled"&&e.color==="brand-blue","bg-brandGreen-500":e.appearence==="filled"&&e.color==="brand-green","bg-indigo-500":e.appearence==="filled"&&e.color==="indigo","bg-purple-500":e.appearence==="filled"&&e.color==="purple","bg-pink-500":e.appearence==="filled"&&e.color==="pink","bg-neutral-surface text-gray-900 border border-neutral-surface":e.appearence==="outlined"}]),onContextmenu:r[2]||(r[2]=$(l=>e.contextMenuItems&&e.contextMenuItems.length&&S(l),["prevent"]))},[e.headline&&e.appearence==="outlined"?(a(),t("div",U,h(e.headline),1)):n("",!0),e.picture?(a(),t("div",{key:1,class:"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer",onClick:r[0]||(r[0]=l=>g("open-picture"))},[o("img",{src:e.picture,class:"w-full h-full object-cover"},null,8,q)])):n("",!0),e.file?(a(),u(N,{key:2,variant:e.appearence==="filled"?"alpha":"outlined",name:e.file.name,format:e.file.format,class:"cursor-pointer",onClick:r[1]||(r[1]=l=>g("open-file",e.file.url))},null,8,["variant","name","format"])):n("",!0),e.message?(a(),t("div",{key:3,class:s(["flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap",{"text-neutral-inverse":e.appearence==="filled","text-neutral-darker":e.appearence==="outlined"}])},h(e.message),3)):n("",!0)],34)])]),e.appearence==="filled"&&e.error?(a(),u(D,{key:0,name:"ExclamationCircleIcon",solid:"",class:"w-6 h-6 text-error-active flex justify-start shrink-0"})):n("",!0),e.appearence==="filled"&&e.multiSelect&&!e.error?(a(),u(F,{key:1,"model-value":e.selected,color:e.color,class:"shrink-0","onUpdate:modelValue":r[3]||(r[3]=l=>g("row-selection",l))},null,8,["model-value","color"])):n("",!0)],2),e.contextMenuItems&&e.contextMenuItems.length&&b.value?(a(),t("div",{key:1,class:"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default",onClick:r[4]||(r[4]=()=>b.value=!1)},[o("div",{ref_key:"contextMenuElement",ref:c,class:"z-50 absolute bg-white rounded-md shadow p-2 min-w-52",style:M({top:I.value+"px",left:W.value+"px"})},[o("div",J,[(a(!0),t(H,null,A(e.contextMenuItems,(l,y)=>{var k;return a(),u(L,V({id:"option-"+y,ref_for:!0,ref:"itemRefs",key:y,class:["self-stretch",{"cursor-pointer":!l.disabled,"cursor-default":l.disabled}],role:"option",tabindex:"-1"},X(G.omit)(l,"onClick"),{disabled:l.disabled,"data-cy":`${(k=l.text)==null?void 0:k.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,onClick:$(Q=>{var C;return!l.disabled&&((C=l.onClick)==null?void 0:C.call(l))},["prevent"])}),null,16,["id","class","disabled","data-cy","onClick"])}),128))])],4)])):n("",!0),e.time||e.loading?(a(),t("div",{key:2,class:s(["text-xs text-neutral-lighter flex justify-end",{"opacity-0 select-none":e.appearence==="filled"&&(e.multiSelect||e.error)}])},[e.loading&&e.appearence==="filled"?(a(),t("div",K,"Invio in corso")):(a(),t("div",O,h(e.time),1))],2)):n("",!0)],4)],2))}});export{ne as default,re as elBubbleChatAppearences,te as elBubbleChatColors};
 //# sourceMappingURL=ElBubbleChat.vue.esm2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ElBubbleChat.vue.esm2.js","sources":["../../src/ElBubbleChat.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elBubbleChatAppearences = ['filled', 'outlined'] as const;\nexport type ElBubbleChatAppearences = (typeof elBubbleChatAppearences)[number];\n\nexport const elBubbleChatColors = ['brand-blue', 'brand-green', 'indigo', 'purple', 'pink'] as const;\nexport type ElBubbleChatColors = (typeof elBubbleChatColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport ElAvatar from './ElAvatar.vue';\nimport { DropdownItem } from './ElDropdown.vue';\nimport ElFile from './ElFile.vue';\nimport ElIcon from './ElIcon.vue';\nimport ElInputCheckbox, { ElInputCheckboxModelValues } from './forms/ElInputCheckbox.vue';\nimport { omit } from 'lodash';\nimport ElItem from './ElItem.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    appearence: ElBubbleChatAppearences;\n    color?: ElBubbleChatColors;\n    time?: string;\n    message?: string;\n    automaticMessage?: string;\n    headline?: string;\n    avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n    file?: Pick<InstanceType<typeof ElFile>['$props'], 'name' | 'format'>;\n    picture?: string;\n    loading?: boolean;\n    error?: boolean;\n    multiSelect?: boolean;\n    selected?: boolean;\n    maxWidth?: number;\n    contextMenuItems?: DropdownItem[];\n  }>(),\n  {\n    color: 'brand-blue',\n    file: undefined,\n    picture: undefined,\n    automaticMessage: undefined,\n    time: undefined,\n    message: undefined,\n    headline: undefined,\n    avatar: undefined,\n    maxWidth: 60,\n    contextMenuItems: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'row-selection', value: ElInputCheckboxModelValues): void;\n  (event: 'open-file'): void;\n  (event: 'open-picture'): void;\n}>();\n\nconst showMenu = ref<boolean>(false);\nconst menuX = ref<number>(0);\nconst menuY = ref<number>(0);\n\nconst handleShowContextMenu = (event: MouseEvent) => {\n  showMenu.value = true;\n  menuX.value = event.pageX;\n  menuY.value = event.pageY;\n};\n\nconst contextMenuElement = ref<HTMLDivElement>();\n\nconst contextMenuSize = computed(() => {\n  if (!contextMenuElement.value)\n    return {\n      width: 0,\n      height: 0,\n    };\n\n  return {\n    width: contextMenuElement.value.clientWidth,\n    height: contextMenuElement.value.clientHeight,\n  };\n});\n\nconst deviceSize = computed(() => {\n  return { width: window.innerWidth, height: window.innerHeight };\n});\n\nconst positionX = computed(() => {\n  const totalWidth = menuX.value + contextMenuSize.value.width;\n\n  if (totalWidth > deviceSize.value.width) return menuX.value - contextMenuSize.value.width;\n\n  return menuX.value;\n});\n\nconst positionY = computed(() => {\n  const totalHeight = menuY.value + contextMenuSize.value.height;\n\n  if (totalHeight > deviceSize.value.height) return menuY.value - contextMenuSize.value.height;\n\n  return menuY.value;\n});\n\nconst bubbleMaxWidth = computed(() => {\n  let maxWidth = props.maxWidth;\n\n  if (props.maxWidth < 10) maxWidth = 10;\n  if (props.maxWidth > 100) maxWidth = 100;\n\n  if (props.appearence === 'filled' && (props.error || props.multiSelect)) return `calc(${maxWidth}% + 2.75rem)`;\n\n  if (props.avatar) return `calc(${maxWidth}% + 3.25rem)`;\n\n  return `${maxWidth}%`;\n});\n</script>\n\n<template>\n  <div\n    class=\"w-full flex\"\n    :class=\"{\n      'justify-end': appearence === 'filled',\n      'justify-start': appearence === 'outlined',\n    }\"\n  >\n    <div\n      class=\"flex flex-col gap-2 w-fit\"\n      :style=\"{\n        /* The message container width should be max 60% (default) of parent width.\n        To ensure that when the checkbox for multiselect/error/avatar are visible,\n        we add extra width (same as multiselect/error/user avatar width),\n        so the maximum width of the message container should not change */\n        'max-width': bubbleMaxWidth,\n      }\"\n    >\n      <div\n        v-if=\"automaticMessage\"\n        class=\"text-sm font-semibold text-neutral-lighter flex\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n          'opacity-0 select-none': appearence === 'filled' && multiSelect && !error,\n          'mr-11': appearence === 'filled' && error,\n        }\"\n      >\n        {{ automaticMessage }}\n      </div>\n\n      <div\n        class=\"flex gap-5 items-center\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n        }\"\n      >\n        <div class=\"flex flex-col gap-2 w-fit\">\n          <div class=\"flex gap-3\">\n            <ElAvatar\n              v-if=\"avatar && appearence === 'outlined'\"\n              size=\"sm\"\n              :picture=\"avatar.picture\"\n              :label=\"avatar.label\"\n              class=\"shrink-0\"\n            />\n\n            <div\n              class=\"rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center\"\n              :class=\"{\n                'text-white': appearence === 'filled',\n                'bg-brandBlue-500': appearence === 'filled' && color === 'brand-blue',\n                'bg-brandGreen-500': appearence === 'filled' && color === 'brand-green',\n                'bg-indigo-500': appearence === 'filled' && color === 'indigo',\n                'bg-purple-500': appearence === 'filled' && color === 'purple',\n                'bg-pink-500': appearence === 'filled' && color === 'pink',\n                'bg-neutral-surface text-gray-900 border border-neutral-surface': appearence === 'outlined',\n              }\"\n              @contextmenu.prevent=\"contextMenuItems && contextMenuItems.length && handleShowContextMenu($event)\"\n            >\n              <div v-if=\"headline && appearence === 'outlined'\" class=\"text-neutral-lighter text-xs font-medium\">{{ headline }}</div>\n\n              <div v-if=\"picture\" class=\"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer\" @click=\"emit('open-picture')\">\n                <img :src=\"picture\" class=\"w-full h-full object-cover\" />\n              </div>\n\n              <ElFile\n                v-if=\"file\"\n                :variant=\"appearence === 'filled' ? 'alpha' : 'outlined'\"\n                :name=\"file.name\"\n                :format=\"file.format\"\n                class=\"cursor-pointer\"\n                @click=\"emit('open-file')\"\n              />\n\n              <div\n                v-if=\"message\"\n                class=\"flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap\"\n                :class=\"{\n                  'text-neutral-inverse': appearence === 'filled',\n                  'text-neutral-darker': appearence === 'outlined',\n                }\"\n              >\n                {{ message }}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <ElIcon\n          v-if=\"appearence === 'filled' && error\"\n          name=\"ExclamationCircleIcon\"\n          solid\n          class=\"w-6 h-6 text-error-active flex justify-start shrink-0\"\n        />\n\n        <ElInputCheckbox\n          v-if=\"appearence === 'filled' && multiSelect && !error\"\n          :model-value=\"selected\"\n          :color=\"color\"\n          class=\"shrink-0\"\n          @update:model-value=\"val => emit('row-selection', val)\"\n        />\n      </div>\n\n      <!-- Context menu -->\n      <div\n        v-if=\"contextMenuItems && contextMenuItems.length && showMenu\"\n        class=\"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default\"\n        @click=\"() => (showMenu = false)\"\n      >\n        <div\n          ref=\"contextMenuElement\"\n          class=\"z-50 absolute bg-white rounded-md shadow p-2 min-w-52\"\n          :style=\"{ top: positionY + 'px', left: positionX + 'px' }\"\n        >\n          <div class=\"flex w-full flex-col gap-1\">\n            <ElItem\n              v-for=\"(item, index) in contextMenuItems\"\n              :id=\"'option-' + index\"\n              ref=\"itemRefs\"\n              :key=\"index\"\n              class=\"self-stretch\"\n              :class=\"{\n                'cursor-pointer': !item.disabled,\n                'cursor-default': item.disabled,\n              }\"\n              role=\"option\"\n              tabindex=\"-1\"\n              v-bind=\"omit(item, 'onClick')\"\n              :disabled=\"item.disabled\"\n              :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n              @click.prevent=\"!item.disabled && item.onClick?.()\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div\n        v-if=\"time || loading\"\n        class=\"text-xs text-neutral-lighter flex justify-end\"\n        :class=\"{\n          'opacity-0 select-none': appearence === 'filled' && (multiSelect || error),\n        }\"\n      >\n        <div v-if=\"loading && appearence === 'filled'\">Invio in corso</div>\n        <div v-else>\n          {{ time }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["elBubbleChatAppearences","elBubbleChatColors","props","__props","emit","__emit","showMenu","ref","menuX","menuY","handleShowContextMenu","event","contextMenuElement","contextMenuSize","computed","deviceSize","positionX","positionY","bubbleMaxWidth","maxWidth"],"mappings":"+uBACaA,GAA0B,CAAC,SAAU,UAAU,EAG/CC,GAAqB,CAAC,aAAc,cAAe,SAAU,SAAU,MAAM,+dAc1F,MAAMC,EAAQC,EAgCRC,EAAOC,EAMPC,EAAWC,EAAa,EAAK,EAC7BC,EAAQD,EAAY,CAAC,EACrBE,EAAQF,EAAY,CAAC,EAErBG,EAAyBC,GAAsB,CACnDL,EAAS,MAAQ,GACjBE,EAAM,MAAQG,EAAM,MACpBF,EAAM,MAAQE,EAAM,KAAA,EAGhBC,EAAqBL,IAErBM,EAAkBC,EAAS,IAC1BF,EAAmB,MAMjB,CACL,MAAOA,EAAmB,MAAM,YAChC,OAAQA,EAAmB,MAAM,YAAA,EAP1B,CACL,MAAO,EACP,OAAQ,CAAA,CAOb,EAEKG,EAAaD,EAAS,KACnB,CAAE,MAAO,OAAO,WAAY,OAAQ,OAAO,aACnD,EAEKE,EAAYF,EAAS,IACNN,EAAM,MAAQK,EAAgB,MAAM,MAEtCE,EAAW,MAAM,MAAcP,EAAM,MAAQK,EAAgB,MAAM,MAE7EL,EAAM,KACd,EAEKS,EAAYH,EAAS,IACLL,EAAM,MAAQI,EAAgB,MAAM,OAEtCE,EAAW,MAAM,OAAeN,EAAM,MAAQI,EAAgB,MAAM,OAE/EJ,EAAM,KACd,EAEKS,EAAiBJ,EAAS,IAAM,CACpC,IAAIK,EAAWjB,EAAM,SAKrB,OAHIA,EAAM,SAAW,KAAeiB,EAAA,IAChCjB,EAAM,SAAW,MAAgBiB,EAAA,KAEjCjB,EAAM,aAAe,WAAaA,EAAM,OAASA,EAAM,aAAqB,QAAQiB,CAAQ,eAE5FjB,EAAM,OAAe,QAAQiB,CAAQ,eAElC,GAAGA,CAAQ,GAAA,CACnB"}
+{"version":3,"file":"ElBubbleChat.vue.esm2.js","sources":["../../src/ElBubbleChat.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elBubbleChatAppearences = ['filled', 'outlined'] as const;\nexport type ElBubbleChatAppearences = (typeof elBubbleChatAppearences)[number];\n\nexport const elBubbleChatColors = ['brand-blue', 'brand-green', 'indigo', 'purple', 'pink'] as const;\nexport type ElBubbleChatColors = (typeof elBubbleChatColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport ElAvatar from './ElAvatar.vue';\nimport { DropdownItem } from './ElDropdown.vue';\nimport ElFile from './ElFile.vue';\nimport ElIcon from './ElIcon.vue';\nimport ElInputCheckbox, { ElInputCheckboxModelValues } from './forms/ElInputCheckbox.vue';\nimport { omit } from 'lodash';\nimport ElItem from './ElItem.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    appearence: ElBubbleChatAppearences;\n    color?: ElBubbleChatColors;\n    time?: string;\n    message?: string;\n    automaticMessage?: string;\n    headline?: string;\n    avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n    file?: Pick<InstanceType<typeof ElFile>['$props'], 'name' | 'format' | 'url'>;\n    picture?: string;\n    loading?: boolean;\n    error?: boolean;\n    multiSelect?: boolean;\n    selected?: boolean;\n    maxWidth?: number;\n    contextMenuItems?: DropdownItem[];\n  }>(),\n  {\n    color: 'brand-blue',\n    file: undefined,\n    picture: undefined,\n    automaticMessage: undefined,\n    time: undefined,\n    message: undefined,\n    headline: undefined,\n    avatar: undefined,\n    maxWidth: 60,\n    contextMenuItems: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'row-selection', value: ElInputCheckboxModelValues): void;\n  (event: 'open-file', url?: string): void;\n  (event: 'open-picture'): void;\n}>();\n\nconst showMenu = ref<boolean>(false);\nconst menuX = ref<number>(0);\nconst menuY = ref<number>(0);\n\nconst handleShowContextMenu = (event: MouseEvent) => {\n  showMenu.value = true;\n  menuX.value = event.pageX;\n  menuY.value = event.pageY;\n};\n\nconst contextMenuElement = ref<HTMLDivElement>();\n\nconst contextMenuSize = computed(() => {\n  if (!contextMenuElement.value)\n    return {\n      width: 0,\n      height: 0,\n    };\n\n  return {\n    width: contextMenuElement.value.clientWidth,\n    height: contextMenuElement.value.clientHeight,\n  };\n});\n\nconst deviceSize = computed(() => {\n  return { width: window.innerWidth, height: window.innerHeight };\n});\n\nconst positionX = computed(() => {\n  const totalWidth = menuX.value + contextMenuSize.value.width;\n\n  if (totalWidth > deviceSize.value.width) return menuX.value - contextMenuSize.value.width;\n\n  return menuX.value;\n});\n\nconst positionY = computed(() => {\n  const totalHeight = menuY.value + contextMenuSize.value.height;\n\n  if (totalHeight > deviceSize.value.height) return menuY.value - contextMenuSize.value.height;\n\n  return menuY.value;\n});\n\nconst bubbleMaxWidth = computed(() => {\n  let maxWidth = props.maxWidth;\n\n  if (props.maxWidth < 10) maxWidth = 10;\n  if (props.maxWidth > 100) maxWidth = 100;\n\n  if (props.appearence === 'filled' && (props.error || props.multiSelect)) return `calc(${maxWidth}% + 2.75rem)`;\n\n  if (props.avatar) return `calc(${maxWidth}% + 3.25rem)`;\n\n  return `${maxWidth}%`;\n});\n</script>\n\n<template>\n  <div\n    class=\"w-full flex\"\n    :class=\"{\n      'justify-end': appearence === 'filled',\n      'justify-start': appearence === 'outlined',\n    }\"\n  >\n    <div\n      class=\"flex flex-col gap-2 w-fit\"\n      :style=\"{\n        /* The message container width should be max 60% (default) of parent width.\n        To ensure that when the checkbox for multiselect/error/avatar are visible,\n        we add extra width (same as multiselect/error/user avatar width),\n        so the maximum width of the message container should not change */\n        'max-width': bubbleMaxWidth,\n      }\"\n    >\n      <div\n        v-if=\"automaticMessage\"\n        class=\"text-sm font-semibold text-neutral-lighter flex\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n          'opacity-0 select-none': appearence === 'filled' && multiSelect && !error,\n          'mr-11': appearence === 'filled' && error,\n        }\"\n      >\n        {{ automaticMessage }}\n      </div>\n\n      <div\n        class=\"flex gap-5 items-center\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n        }\"\n      >\n        <div class=\"flex flex-col gap-2 w-fit\">\n          <div class=\"flex gap-3\">\n            <ElAvatar\n              v-if=\"avatar && appearence === 'outlined'\"\n              size=\"sm\"\n              :picture=\"avatar.picture\"\n              :label=\"avatar.label\"\n              class=\"shrink-0\"\n            />\n\n            <div\n              class=\"rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center\"\n              :class=\"{\n                'text-white': appearence === 'filled',\n                'bg-brandBlue-500': appearence === 'filled' && color === 'brand-blue',\n                'bg-brandGreen-500': appearence === 'filled' && color === 'brand-green',\n                'bg-indigo-500': appearence === 'filled' && color === 'indigo',\n                'bg-purple-500': appearence === 'filled' && color === 'purple',\n                'bg-pink-500': appearence === 'filled' && color === 'pink',\n                'bg-neutral-surface text-gray-900 border border-neutral-surface': appearence === 'outlined',\n              }\"\n              @contextmenu.prevent=\"contextMenuItems && contextMenuItems.length && handleShowContextMenu($event)\"\n            >\n              <div v-if=\"headline && appearence === 'outlined'\" class=\"text-neutral-lighter text-xs font-medium\">{{ headline }}</div>\n\n              <div v-if=\"picture\" class=\"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer\" @click=\"emit('open-picture')\">\n                <img :src=\"picture\" class=\"w-full h-full object-cover\" />\n              </div>\n\n              <ElFile\n                v-if=\"file\"\n                :variant=\"appearence === 'filled' ? 'alpha' : 'outlined'\"\n                :name=\"file.name\"\n                :format=\"file.format\"\n                class=\"cursor-pointer\"\n                @click=\"emit('open-file', file.url)\"\n              />\n\n              <div\n                v-if=\"message\"\n                class=\"flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap\"\n                :class=\"{\n                  'text-neutral-inverse': appearence === 'filled',\n                  'text-neutral-darker': appearence === 'outlined',\n                }\"\n              >\n                {{ message }}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <ElIcon\n          v-if=\"appearence === 'filled' && error\"\n          name=\"ExclamationCircleIcon\"\n          solid\n          class=\"w-6 h-6 text-error-active flex justify-start shrink-0\"\n        />\n\n        <ElInputCheckbox\n          v-if=\"appearence === 'filled' && multiSelect && !error\"\n          :model-value=\"selected\"\n          :color=\"color\"\n          class=\"shrink-0\"\n          @update:model-value=\"val => emit('row-selection', val)\"\n        />\n      </div>\n\n      <!-- Context menu -->\n      <div\n        v-if=\"contextMenuItems && contextMenuItems.length && showMenu\"\n        class=\"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default\"\n        @click=\"() => (showMenu = false)\"\n      >\n        <div\n          ref=\"contextMenuElement\"\n          class=\"z-50 absolute bg-white rounded-md shadow p-2 min-w-52\"\n          :style=\"{ top: positionY + 'px', left: positionX + 'px' }\"\n        >\n          <div class=\"flex w-full flex-col gap-1\">\n            <ElItem\n              v-for=\"(item, index) in contextMenuItems\"\n              :id=\"'option-' + index\"\n              ref=\"itemRefs\"\n              :key=\"index\"\n              class=\"self-stretch\"\n              :class=\"{\n                'cursor-pointer': !item.disabled,\n                'cursor-default': item.disabled,\n              }\"\n              role=\"option\"\n              tabindex=\"-1\"\n              v-bind=\"omit(item, 'onClick')\"\n              :disabled=\"item.disabled\"\n              :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n              @click.prevent=\"!item.disabled && item.onClick?.()\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div\n        v-if=\"time || loading\"\n        class=\"text-xs text-neutral-lighter flex justify-end\"\n        :class=\"{\n          'opacity-0 select-none': appearence === 'filled' && (multiSelect || error),\n        }\"\n      >\n        <div v-if=\"loading && appearence === 'filled'\">Invio in corso</div>\n        <div v-else>\n          {{ time }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["elBubbleChatAppearences","elBubbleChatColors","props","__props","emit","__emit","showMenu","ref","menuX","menuY","handleShowContextMenu","event","contextMenuElement","contextMenuSize","computed","deviceSize","positionX","positionY","bubbleMaxWidth","maxWidth"],"mappings":"+uBACaA,GAA0B,CAAC,SAAU,UAAU,EAG/CC,GAAqB,CAAC,aAAc,cAAe,SAAU,SAAU,MAAM,+dAc1F,MAAMC,EAAQC,EAgCRC,EAAOC,EAMPC,EAAWC,EAAa,EAAK,EAC7BC,EAAQD,EAAY,CAAC,EACrBE,EAAQF,EAAY,CAAC,EAErBG,EAAyBC,GAAsB,CACnDL,EAAS,MAAQ,GACjBE,EAAM,MAAQG,EAAM,MACpBF,EAAM,MAAQE,EAAM,KAAA,EAGhBC,EAAqBL,IAErBM,EAAkBC,EAAS,IAC1BF,EAAmB,MAMjB,CACL,MAAOA,EAAmB,MAAM,YAChC,OAAQA,EAAmB,MAAM,YAAA,EAP1B,CACL,MAAO,EACP,OAAQ,CAAA,CAOb,EAEKG,EAAaD,EAAS,KACnB,CAAE,MAAO,OAAO,WAAY,OAAQ,OAAO,aACnD,EAEKE,EAAYF,EAAS,IACNN,EAAM,MAAQK,EAAgB,MAAM,MAEtCE,EAAW,MAAM,MAAcP,EAAM,MAAQK,EAAgB,MAAM,MAE7EL,EAAM,KACd,EAEKS,EAAYH,EAAS,IACLL,EAAM,MAAQI,EAAgB,MAAM,OAEtCE,EAAW,MAAM,OAAeN,EAAM,MAAQI,EAAgB,MAAM,OAE/EJ,EAAM,KACd,EAEKS,EAAiBJ,EAAS,IAAM,CACpC,IAAIK,EAAWjB,EAAM,SAKrB,OAHIA,EAAM,SAAW,KAAeiB,EAAA,IAChCjB,EAAM,SAAW,MAAgBiB,EAAA,KAEjCjB,EAAM,aAAe,WAAaA,EAAM,OAASA,EAAM,aAAqB,QAAQiB,CAAQ,eAE5FjB,EAAM,OAAe,QAAQiB,CAAQ,eAElC,GAAGA,CAAQ,GAAA,CACnB"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("./ElIcon.vue.cjs2.js"),o=require("./ElIconButton.vue.cjs2.js"),i={class:"overflow-hidden font-medium text-ellipsis"},s={key:0,class:"font-normal overflow-hidden text-ellipsis"},d=["primary","alpha","outlined"],u=e.defineComponent({__name:"ElFile",props:{variant:{},name:{},format:{},disabled:{type:Boolean}},emits:["close"],setup(m,{emit:n}){const t=n;return(r,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["p-2 inline-flex gap-2 items-center min-w-36 max-w-full",{"bg-neutral-surface text-neutral-darker border-neutral-surface rounded border":r.variant==="primary","bg-alpha-500 text-neutral-inverse rounded-lg":r.variant==="alpha","bg-neutral-surface text-neutral-darker border-neutral-surface rounded-lg border":r.variant==="outlined"}])},[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center justify-center rounded flex-shrink-0",{"bg-alpha-300 h-9 w-9 rounded":r.variant==="alpha","h-9 w-9 border-neutral-surface rounded border":r.variant==="outlined"}])},[e.createVNode(l.default,{name:r.variant==="primary"?"DocumentArrowUpIcon":"DocumentTextIcon",class:"w-5 h-5"},null,8,["name"])],2),e.createElementVNode("div",{class:e.normalizeClass(["text-xs grow flex flex-col gap-1 flex-nowrap overflow-hidden whitespace-nowrap",{"max-w-72":r.variant!=="primary"}])},[e.createElementVNode("span",i,e.toDisplayString(r.name),1),r.format&&r.variant!="primary"?(e.openBlock(),e.createElementBlock("span",s,e.toDisplayString(r.format),1)):e.createCommentVNode("",!0)],2),r.variant==="primary"?(e.openBlock(),e.createBlock(o.default,{key:0,class:"flex-shrink-0",size:"xs",icon:{name:"XMarkIcon"},disabled:r.disabled,onClick:a[0]||(a[0]=c=>t("close"))},null,8,["disabled"])):e.createCommentVNode("",!0)],2))}});exports.default=u;exports.elFileVariants=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("./ElIcon.vue.cjs2.js"),o=require("./ElIconButton.vue.cjs2.js"),i={class:"overflow-hidden font-medium text-ellipsis"},s={key:0,class:"font-normal overflow-hidden text-ellipsis"},u=["primary","alpha","outlined"],d=e.defineComponent({__name:"ElFile",props:{variant:{},name:{},format:{},disabled:{type:Boolean},url:{}},emits:["close"],setup(m,{emit:n}){const t=n;return(r,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["p-2 inline-flex gap-2 items-center min-w-36 max-w-full",{"bg-neutral-surface text-neutral-darker border-neutral-surface rounded border":r.variant==="primary","bg-alpha-500 text-neutral-inverse rounded-lg":r.variant==="alpha","bg-neutral-surface text-neutral-darker border-neutral-surface rounded-lg border":r.variant==="outlined"}])},[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center justify-center rounded flex-shrink-0",{"bg-alpha-300 h-9 w-9 rounded":r.variant==="alpha","h-9 w-9 border-neutral-surface rounded border":r.variant==="outlined"}])},[e.createVNode(l.default,{name:r.variant==="primary"?"DocumentArrowUpIcon":"DocumentTextIcon",class:"w-5 h-5"},null,8,["name"])],2),e.createElementVNode("div",{class:e.normalizeClass(["text-xs grow flex flex-col gap-1 flex-nowrap overflow-hidden whitespace-nowrap",{"max-w-72":r.variant!=="primary"}])},[e.createElementVNode("span",i,e.toDisplayString(r.name),1),r.format&&r.variant!="primary"?(e.openBlock(),e.createElementBlock("span",s,e.toDisplayString(r.format),1)):e.createCommentVNode("",!0)],2),r.variant==="primary"?(e.openBlock(),e.createBlock(o.default,{key:0,class:"flex-shrink-0",size:"xs",icon:{name:"XMarkIcon"},disabled:r.disabled,onClick:a[0]||(a[0]=c=>t("close"))},null,8,["disabled"])):e.createCommentVNode("",!0)],2))}});exports.default=d;exports.elFileVariants=u;
 //# sourceMappingURL=ElFile.vue.cjs2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ElFile.vue.cjs2.js","sources":["../../src/ElFile.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elFileVariants = ['primary', 'alpha', 'outlined'] as const;\nexport type ElFileVariant = (typeof elFileVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\n\ndefineProps<{\n  variant: ElFileVariant;\n  name: string;\n  format?: string;\n  disabled?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (event: 'close'): void;\n}>();\n</script>\n<template>\n  <div\n    class=\"p-2 inline-flex gap-2 items-center min-w-36 max-w-full\"\n    :class=\"{\n      'bg-neutral-surface text-neutral-darker border-neutral-surface rounded border': variant === 'primary',\n      'bg-alpha-500 text-neutral-inverse rounded-lg': variant === 'alpha',\n      'bg-neutral-surface text-neutral-darker border-neutral-surface rounded-lg border': variant === 'outlined',\n    }\"\n  >\n    <!-- Icon -->\n    <div\n      class=\"flex items-center justify-center rounded flex-shrink-0\"\n      :class=\"{\n        'bg-alpha-300 h-9 w-9 rounded': variant === 'alpha',\n        'h-9 w-9 border-neutral-surface rounded border': variant === 'outlined',\n      }\"\n    >\n      <ElIcon :name=\"variant === 'primary' ? 'DocumentArrowUpIcon' : 'DocumentTextIcon'\" class=\"w-5 h-5\" />\n    </div>\n\n    <!-- File -->\n    <div\n      class=\"text-xs grow flex flex-col gap-1 flex-nowrap overflow-hidden whitespace-nowrap\"\n      :class=\"{\n        'max-w-72': variant !== 'primary',\n      }\"\n    >\n      <span class=\"overflow-hidden font-medium text-ellipsis\">{{ name }}</span>\n      <span v-if=\"format && variant != 'primary'\" class=\"font-normal overflow-hidden text-ellipsis\">{{ format }}</span>\n    </div>\n\n    <!-- Action Button -->\n    <ElIconButton\n      v-if=\"variant === 'primary'\"\n      class=\"flex-shrink-0\"\n      size=\"xs\"\n      :icon=\"{\n        name: 'XMarkIcon',\n      }\"\n      :disabled=\"disabled\"\n      @click=\"emit('close')\"\n    />\n  </div>\n</template>\n"],"names":["elFileVariants","emit","__emit"],"mappings":"+TACaA,EAAiB,CAAC,UAAW,QAAS,UAAU,sIAe7D,MAAMC,EAAOC"}
+{"version":3,"file":"ElFile.vue.cjs2.js","sources":["../../src/ElFile.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elFileVariants = ['primary', 'alpha', 'outlined'] as const;\nexport type ElFileVariant = (typeof elFileVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\n\ndefineProps<{\n  variant: ElFileVariant;\n  name: string;\n  format?: string;\n  disabled?: boolean;\n  url?: string;\n}>();\n\nconst emit = defineEmits<{\n  (event: 'close'): void;\n}>();\n</script>\n<template>\n  <div\n    class=\"p-2 inline-flex gap-2 items-center min-w-36 max-w-full\"\n    :class=\"{\n      'bg-neutral-surface text-neutral-darker border-neutral-surface rounded border': variant === 'primary',\n      'bg-alpha-500 text-neutral-inverse rounded-lg': variant === 'alpha',\n      'bg-neutral-surface text-neutral-darker border-neutral-surface rounded-lg border': variant === 'outlined',\n    }\"\n  >\n    <!-- Icon -->\n    <div\n      class=\"flex items-center justify-center rounded flex-shrink-0\"\n      :class=\"{\n        'bg-alpha-300 h-9 w-9 rounded': variant === 'alpha',\n        'h-9 w-9 border-neutral-surface rounded border': variant === 'outlined',\n      }\"\n    >\n      <ElIcon :name=\"variant === 'primary' ? 'DocumentArrowUpIcon' : 'DocumentTextIcon'\" class=\"w-5 h-5\" />\n    </div>\n\n    <!-- File -->\n    <div\n      class=\"text-xs grow flex flex-col gap-1 flex-nowrap overflow-hidden whitespace-nowrap\"\n      :class=\"{\n        'max-w-72': variant !== 'primary',\n      }\"\n    >\n      <span class=\"overflow-hidden font-medium text-ellipsis\">{{ name }}</span>\n      <span v-if=\"format && variant != 'primary'\" class=\"font-normal overflow-hidden text-ellipsis\">{{ format }}</span>\n    </div>\n\n    <!-- Action Button -->\n    <ElIconButton\n      v-if=\"variant === 'primary'\"\n      class=\"flex-shrink-0\"\n      size=\"xs\"\n      :icon=\"{\n        name: 'XMarkIcon',\n      }\"\n      :disabled=\"disabled\"\n      @click=\"emit('close')\"\n    />\n  </div>\n</template>\n"],"names":["elFileVariants","emit","__emit"],"mappings":"+TACaA,EAAiB,CAAC,UAAW,QAAS,UAAU,6IAgB7D,MAAMC,EAAOC"}

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

@@ -1,2 +1,2 @@
-import{defineComponent as m,openBlock as r,createElementBlock as t,normalizeClass as a,createElementVNode as n,createVNode as p,toDisplayString as l,createCommentVNode as i,createBlock as u}from"vue";import f from"./ElIcon.vue.esm2.js";import c from"./ElIconButton.vue.esm2.js";const v={class:"overflow-hidden font-medium text-ellipsis"},h={key:0,class:"font-normal overflow-hidden text-ellipsis"},x=["primary","alpha","outlined"],B=m({__name:"ElFile",props:{variant:{},name:{},format:{},disabled:{type:Boolean}},emits:["close"],setup(b,{emit:s}){const d=s;return(e,o)=>(r(),t("div",{class:a(["p-2 inline-flex gap-2 items-center min-w-36 max-w-full",{"bg-neutral-surface text-neutral-darker border-neutral-surface rounded border":e.variant==="primary","bg-alpha-500 text-neutral-inverse rounded-lg":e.variant==="alpha","bg-neutral-surface text-neutral-darker border-neutral-surface rounded-lg border":e.variant==="outlined"}])},[n("div",{class:a(["flex items-center justify-center rounded flex-shrink-0",{"bg-alpha-300 h-9 w-9 rounded":e.variant==="alpha","h-9 w-9 border-neutral-surface rounded border":e.variant==="outlined"}])},[p(f,{name:e.variant==="primary"?"DocumentArrowUpIcon":"DocumentTextIcon",class:"w-5 h-5"},null,8,["name"])],2),n("div",{class:a(["text-xs grow flex flex-col gap-1 flex-nowrap overflow-hidden whitespace-nowrap",{"max-w-72":e.variant!=="primary"}])},[n("span",v,l(e.name),1),e.format&&e.variant!="primary"?(r(),t("span",h,l(e.format),1)):i("",!0)],2),e.variant==="primary"?(r(),u(c,{key:0,class:"flex-shrink-0",size:"xs",icon:{name:"XMarkIcon"},disabled:e.disabled,onClick:o[0]||(o[0]=w=>d("close"))},null,8,["disabled"])):i("",!0)],2))}});export{B as default,x as elFileVariants};
+import{defineComponent as m,openBlock as r,createElementBlock as l,normalizeClass as a,createElementVNode as n,createVNode as u,toDisplayString as t,createCommentVNode as i,createBlock as p}from"vue";import f from"./ElIcon.vue.esm2.js";import c from"./ElIconButton.vue.esm2.js";const v={class:"overflow-hidden font-medium text-ellipsis"},h={key:0,class:"font-normal overflow-hidden text-ellipsis"},x=["primary","alpha","outlined"],B=m({__name:"ElFile",props:{variant:{},name:{},format:{},disabled:{type:Boolean},url:{}},emits:["close"],setup(b,{emit:s}){const d=s;return(e,o)=>(r(),l("div",{class:a(["p-2 inline-flex gap-2 items-center min-w-36 max-w-full",{"bg-neutral-surface text-neutral-darker border-neutral-surface rounded border":e.variant==="primary","bg-alpha-500 text-neutral-inverse rounded-lg":e.variant==="alpha","bg-neutral-surface text-neutral-darker border-neutral-surface rounded-lg border":e.variant==="outlined"}])},[n("div",{class:a(["flex items-center justify-center rounded flex-shrink-0",{"bg-alpha-300 h-9 w-9 rounded":e.variant==="alpha","h-9 w-9 border-neutral-surface rounded border":e.variant==="outlined"}])},[u(f,{name:e.variant==="primary"?"DocumentArrowUpIcon":"DocumentTextIcon",class:"w-5 h-5"},null,8,["name"])],2),n("div",{class:a(["text-xs grow flex flex-col gap-1 flex-nowrap overflow-hidden whitespace-nowrap",{"max-w-72":e.variant!=="primary"}])},[n("span",v,t(e.name),1),e.format&&e.variant!="primary"?(r(),l("span",h,t(e.format),1)):i("",!0)],2),e.variant==="primary"?(r(),p(c,{key:0,class:"flex-shrink-0",size:"xs",icon:{name:"XMarkIcon"},disabled:e.disabled,onClick:o[0]||(o[0]=w=>d("close"))},null,8,["disabled"])):i("",!0)],2))}});export{B as default,x as elFileVariants};
 //# sourceMappingURL=ElFile.vue.esm2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ElFile.vue.esm2.js","sources":["../../src/ElFile.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elFileVariants = ['primary', 'alpha', 'outlined'] as const;\nexport type ElFileVariant = (typeof elFileVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\n\ndefineProps<{\n  variant: ElFileVariant;\n  name: string;\n  format?: string;\n  disabled?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (event: 'close'): void;\n}>();\n</script>\n<template>\n  <div\n    class=\"p-2 inline-flex gap-2 items-center min-w-36 max-w-full\"\n    :class=\"{\n      'bg-neutral-surface text-neutral-darker border-neutral-surface rounded border': variant === 'primary',\n      'bg-alpha-500 text-neutral-inverse rounded-lg': variant === 'alpha',\n      'bg-neutral-surface text-neutral-darker border-neutral-surface rounded-lg border': variant === 'outlined',\n    }\"\n  >\n    <!-- Icon -->\n    <div\n      class=\"flex items-center justify-center rounded flex-shrink-0\"\n      :class=\"{\n        'bg-alpha-300 h-9 w-9 rounded': variant === 'alpha',\n        'h-9 w-9 border-neutral-surface rounded border': variant === 'outlined',\n      }\"\n    >\n      <ElIcon :name=\"variant === 'primary' ? 'DocumentArrowUpIcon' : 'DocumentTextIcon'\" class=\"w-5 h-5\" />\n    </div>\n\n    <!-- File -->\n    <div\n      class=\"text-xs grow flex flex-col gap-1 flex-nowrap overflow-hidden whitespace-nowrap\"\n      :class=\"{\n        'max-w-72': variant !== 'primary',\n      }\"\n    >\n      <span class=\"overflow-hidden font-medium text-ellipsis\">{{ name }}</span>\n      <span v-if=\"format && variant != 'primary'\" class=\"font-normal overflow-hidden text-ellipsis\">{{ format }}</span>\n    </div>\n\n    <!-- Action Button -->\n    <ElIconButton\n      v-if=\"variant === 'primary'\"\n      class=\"flex-shrink-0\"\n      size=\"xs\"\n      :icon=\"{\n        name: 'XMarkIcon',\n      }\"\n      :disabled=\"disabled\"\n      @click=\"emit('close')\"\n    />\n  </div>\n</template>\n"],"names":["elFileVariants","emit","__emit"],"mappings":"8YACaA,EAAiB,CAAC,UAAW,QAAS,UAAU,sHAe7D,MAAMC,EAAOC"}
+{"version":3,"file":"ElFile.vue.esm2.js","sources":["../../src/ElFile.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elFileVariants = ['primary', 'alpha', 'outlined'] as const;\nexport type ElFileVariant = (typeof elFileVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\n\ndefineProps<{\n  variant: ElFileVariant;\n  name: string;\n  format?: string;\n  disabled?: boolean;\n  url?: string;\n}>();\n\nconst emit = defineEmits<{\n  (event: 'close'): void;\n}>();\n</script>\n<template>\n  <div\n    class=\"p-2 inline-flex gap-2 items-center min-w-36 max-w-full\"\n    :class=\"{\n      'bg-neutral-surface text-neutral-darker border-neutral-surface rounded border': variant === 'primary',\n      'bg-alpha-500 text-neutral-inverse rounded-lg': variant === 'alpha',\n      'bg-neutral-surface text-neutral-darker border-neutral-surface rounded-lg border': variant === 'outlined',\n    }\"\n  >\n    <!-- Icon -->\n    <div\n      class=\"flex items-center justify-center rounded flex-shrink-0\"\n      :class=\"{\n        'bg-alpha-300 h-9 w-9 rounded': variant === 'alpha',\n        'h-9 w-9 border-neutral-surface rounded border': variant === 'outlined',\n      }\"\n    >\n      <ElIcon :name=\"variant === 'primary' ? 'DocumentArrowUpIcon' : 'DocumentTextIcon'\" class=\"w-5 h-5\" />\n    </div>\n\n    <!-- File -->\n    <div\n      class=\"text-xs grow flex flex-col gap-1 flex-nowrap overflow-hidden whitespace-nowrap\"\n      :class=\"{\n        'max-w-72': variant !== 'primary',\n      }\"\n    >\n      <span class=\"overflow-hidden font-medium text-ellipsis\">{{ name }}</span>\n      <span v-if=\"format && variant != 'primary'\" class=\"font-normal overflow-hidden text-ellipsis\">{{ format }}</span>\n    </div>\n\n    <!-- Action Button -->\n    <ElIconButton\n      v-if=\"variant === 'primary'\"\n      class=\"flex-shrink-0\"\n      size=\"xs\"\n      :icon=\"{\n        name: 'XMarkIcon',\n      }\"\n      :disabled=\"disabled\"\n      @click=\"emit('close')\"\n    />\n  </div>\n</template>\n"],"names":["elFileVariants","emit","__emit"],"mappings":"8YACaA,EAAiB,CAAC,UAAW,QAAS,UAAU,6HAgB7D,MAAMC,EAAOC"}

package/package.json

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