@davincihealthcare/elty-design-system-vue 1.72.0 → 1.72.2

package/dist/ElDropdown.vue.esm2.js

@@ -1,2 +1,2 @@
-import{defineComponent as P,ref as n,computed as F,watch as N,openBlock as a,createElementBlock as f,createElementVNode as d,renderSlot as S,normalizeProps as z,guardReactiveProps as H,createBlock as m,mergeProps as b,createCommentVNode as v,createVNode as $,withCtx as A,toDisplayString as R,normalizeClass as T,Fragment as U,renderList as M,unref as W,withModifiers as K}from"vue";import L from"./_CustomTransition.vue.esm2.js";import j from"./ElClipToAnchor.vue.esm2.js";import B from"./ElItem.vue.esm2.js";import q from"./ElButton.vue.esm2.js";import{onKeyStroke as G,onClickOutside as J}from"../node_modules/@vueuse/core/index.esm.js";import{l as Q}from"../node_modules/lodash/lodash.esm.js";import X from"./ElIconButton.vue.esm2.js";const Y={class:"relative"},Z={class:"border-neutral-surface text-neutral-darker inline-flex w-full flex-col items-start gap-1 rounded-md border bg-white p-2 text-sm shadow-md max-h-[inherit]"},ee={key:0,class:"border-neutral-surface flex h-9 items-center self-stretch border-b px-2"},te={class:"font-semibold"},oe=["aria-activedescendant"],le={class:"flex w-full flex-col gap-1"},se={key:1,class:"border-neutral-surface self-stretch border-t py-2 px-5"},me=[0,260,1e3],ve=P({__name:"ElDropdown",props:{items:{},title:{default:void 0},action:{default:void 0},left:{type:Boolean},right:{type:Boolean},minWidth:{default:void 0},isOpen:{type:Boolean,default:void 0},maxHeight:{default:260},iconButton:{default:void 0},multiple:{type:Boolean,default:!1}},emits:["click:action","update:is-open"],setup(I,{expose:D,emit:E}){const i=I,k=E,w=n(!1),c=n(),y=n(),l=n(0),u=n(),s=F({set(e){i.isOpen!==void 0&&k("update:is-open",e),w.value=e},get(){return i.isOpen!==void 0?i.isOpen:w.value}}),h=()=>s.value=!s.value,_=()=>s.value=!0,p=()=>s.value=!1;N(()=>[i.items,s.value],()=>{var e;if(s.value){const o=(e=i.items)==null?void 0:e.findIndex(t=>t.check);l.value=o||0}});const g=e=>{var o,t,r;(r=(t=(o=u.value)==null?void 0:o.at(e))==null?void 0:t.$el)==null||r.scrollIntoView({block:"nearest"})},O=()=>{var e;l.value+=(((e=u.value)==null?void 0:e.slice(l.value+1).findIndex(o=>!o.$props.disabled))??-1)+1,g(l.value)},V=()=>{var e;l.value-=(((e=u.value)==null?void 0:e.slice(0,l.value).reverse().findIndex(o=>!o.$props.disabled))??-1)+1,g(l.value)};return G(["ArrowDown","ArrowUp","Enter"],e=>{var o;if(s.value===!0){switch(e.key){case"ArrowDown":{O();break}case"ArrowUp":{V();break}case"Enter":{const t=i.items[l.value];t.disabled||((o=t.onClick)==null||o.call(t),p());break}}e.preventDefault(),e.stopPropagation()}}),D({show:_,hide:p,toggle:h}),J(i.multiple?y:c,e=>{e.target.closest('[data-disabled="true"]')||p()}),(e,o)=>(a(),f("div",Y,[d("div",{ref_key:"listAnchor",ref:c},[S(e.$slots,"anchor",z(H({isOpen:s.value,toggle:h,show:_,hide:p})),()=>[e.iconButton?(a(),m(X,b({key:0,class:"cursor-pointer","aria-expanded":s.value},e.iconButton,{onClick:h}),null,16,["aria-expanded"])):v("",!0)])],512),$(L,{name:"expand"},{default:A(()=>[s.value&&c.value?(a(),m(j,{key:0,ref_key:"elClipToAnchor",ref:y,class:"pt-1","match-anchor-width":"",anchor:c.value,position:e.left?"bottom-left":e.right?"bottom-right":"bottom","min-width":e.minWidth??208},{default:A(()=>[d("div",Z,[e.title?(a(),f("div",ee,[d("span",te,R(e.title),1)])):v("",!0),d("div",{class:T(["no-scrollbar relative w-full overflow-y-scroll",{"max-h-[260px]":e.maxHeight===260}]),role:"listbox","aria-activedescendant":"option-"+l.value},[d("div",le,[e.items.length>0?(a(!0),f(U,{key:0},M(e.items,(t,r)=>{var x;return a(),m(B,b({id:"option-"+r,ref_for:!0,ref_key:"itemRefs",ref:u,key:r,class:["self-stretch",{"cursor-pointer":!t.disabled,"cursor-default":t.disabled}],role:"option",tabindex:"-1"},W(Q.omit)(t,"onClick"),{disabled:t.disabled,"data-disabled":t.disabled?"true":void 0,"data-cy":`${(x=t.text)==null?void 0:x.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,focused:l.value===r,onClick:K(ae=>{var C;return!t.disabled&&((C=t.onClick)==null?void 0:C.call(t))},["prevent"])}),null,16,["id","class","disabled","data-disabled","data-cy","focused","onClick"])}),128)):(a(),m(B,{key:1,class:"cursor-pointer self-stretch","data-cy":"no-items-dropdown-item",text:"Nessuna opzione disponibile"}))])],10,oe),e.action?(a(),f("div",se,[$(q,b({variant:"tertiary"},e.action,{class:"w-full",onClick:o[0]||(o[0]=t=>k("click:action"))}),null,16)])):v("",!0)])]),_:1},8,["anchor","position","min-width"])):v("",!0)]),_:1})]))}});export{ve as default,me as elDropdownMaxHeight};
+import{defineComponent as P,ref as n,computed as F,watch as N,openBlock as a,createElementBlock as f,createElementVNode as d,renderSlot as S,normalizeProps as z,guardReactiveProps as H,createBlock as m,mergeProps as b,createCommentVNode as v,createVNode as $,withCtx as A,toDisplayString as R,normalizeClass as T,Fragment as U,renderList as M,unref as W,withModifiers as K}from"vue";import L from"./_CustomTransition.vue.esm2.js";import j from"./ElClipToAnchor.vue.esm2.js";import B from"./ElItem.vue.esm2.js";import q from"./ElButton.vue.esm2.js";import{onKeyStroke as G,onClickOutside as J}from"./node_modules/@vueuse/core/index.esm.js";import{l as Q}from"./node_modules/lodash/lodash.esm.js";import X from"./ElIconButton.vue.esm2.js";const Y={class:"relative"},Z={class:"border-neutral-surface text-neutral-darker inline-flex w-full flex-col items-start gap-1 rounded-md border bg-white p-2 text-sm shadow-md max-h-[inherit]"},ee={key:0,class:"border-neutral-surface flex h-9 items-center self-stretch border-b px-2"},te={class:"font-semibold"},oe=["aria-activedescendant"],le={class:"flex w-full flex-col gap-1"},se={key:1,class:"border-neutral-surface self-stretch border-t py-2 px-5"},me=[0,260,1e3],ve=P({__name:"ElDropdown",props:{items:{},title:{default:void 0},action:{default:void 0},left:{type:Boolean},right:{type:Boolean},minWidth:{default:void 0},isOpen:{type:Boolean,default:void 0},maxHeight:{default:260},iconButton:{default:void 0},multiple:{type:Boolean,default:!1}},emits:["click:action","update:is-open"],setup(I,{expose:D,emit:E}){const i=I,k=E,w=n(!1),c=n(),y=n(),l=n(0),u=n(),s=F({set(e){i.isOpen!==void 0&&k("update:is-open",e),w.value=e},get(){return i.isOpen!==void 0?i.isOpen:w.value}}),h=()=>s.value=!s.value,_=()=>s.value=!0,p=()=>s.value=!1;N(()=>[i.items,s.value],()=>{var e;if(s.value){const o=(e=i.items)==null?void 0:e.findIndex(t=>t.check);l.value=o||0}});const g=e=>{var o,t,r;(r=(t=(o=u.value)==null?void 0:o.at(e))==null?void 0:t.$el)==null||r.scrollIntoView({block:"nearest"})},O=()=>{var e;l.value+=(((e=u.value)==null?void 0:e.slice(l.value+1).findIndex(o=>!o.$props.disabled))??-1)+1,g(l.value)},V=()=>{var e;l.value-=(((e=u.value)==null?void 0:e.slice(0,l.value).reverse().findIndex(o=>!o.$props.disabled))??-1)+1,g(l.value)};return G(["ArrowDown","ArrowUp","Enter"],e=>{var o;if(s.value===!0){switch(e.key){case"ArrowDown":{O();break}case"ArrowUp":{V();break}case"Enter":{const t=i.items[l.value];t.disabled||((o=t.onClick)==null||o.call(t),p());break}}e.preventDefault(),e.stopPropagation()}}),D({show:_,hide:p,toggle:h}),J(i.multiple?y:c,e=>{e.target.closest('[data-disabled="true"]')||p()}),(e,o)=>(a(),f("div",Y,[d("div",{ref_key:"listAnchor",ref:c},[S(e.$slots,"anchor",z(H({isOpen:s.value,toggle:h,show:_,hide:p})),()=>[e.iconButton?(a(),m(X,b({key:0,class:"cursor-pointer","aria-expanded":s.value},e.iconButton,{onClick:h}),null,16,["aria-expanded"])):v("",!0)])],512),$(L,{name:"expand"},{default:A(()=>[s.value&&c.value?(a(),m(j,{key:0,ref_key:"elClipToAnchor",ref:y,class:"pt-1","match-anchor-width":"",anchor:c.value,position:e.left?"bottom-left":e.right?"bottom-right":"bottom","min-width":e.minWidth??208},{default:A(()=>[d("div",Z,[e.title?(a(),f("div",ee,[d("span",te,R(e.title),1)])):v("",!0),d("div",{class:T(["no-scrollbar relative w-full overflow-y-scroll",{"max-h-[260px]":e.maxHeight===260}]),role:"listbox","aria-activedescendant":"option-"+l.value},[d("div",le,[e.items.length>0?(a(!0),f(U,{key:0},M(e.items,(t,r)=>{var x;return a(),m(B,b({id:"option-"+r,ref_for:!0,ref_key:"itemRefs",ref:u,key:r,class:["self-stretch",{"cursor-pointer":!t.disabled,"cursor-default":t.disabled}],role:"option",tabindex:"-1"},W(Q.omit)(t,"onClick"),{disabled:t.disabled,"data-disabled":t.disabled?"true":void 0,"data-cy":`${(x=t.text)==null?void 0:x.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,focused:l.value===r,onClick:K(ae=>{var C;return!t.disabled&&((C=t.onClick)==null?void 0:C.call(t))},["prevent"])}),null,16,["id","class","disabled","data-disabled","data-cy","focused","onClick"])}),128)):(a(),m(B,{key:1,class:"cursor-pointer self-stretch","data-cy":"no-items-dropdown-item",text:"Nessuna opzione disponibile"}))])],10,oe),e.action?(a(),f("div",se,[$(q,b({variant:"tertiary"},e.action,{class:"w-full",onClick:o[0]||(o[0]=t=>k("click:action"))}),null,16)])):v("",!0)])]),_:1},8,["anchor","position","min-width"])):v("",!0)]),_:1})]))}});export{ve as default,me as elDropdownMaxHeight};
 //# sourceMappingURL=ElDropdown.vue.esm2.js.map

package/dist/ElDropdown.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElDropdown.vue.esm2.js","sources":["../../src/ElDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elDropdownMaxHeight = [0, 260, 1000] as const;\nexport type ElDropdownMaxHeight = (typeof elDropdownMaxHeight)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElClipToAnchor from '@/ElClipToAnchor.vue';\nimport ElItem from '@/ElItem.vue';\nimport ElButton from '@/ElButton.vue';\nimport { ref, computed, watch } from 'vue';\nimport { onKeyStroke, onClickOutside } from '@vueuse/core';\nimport { omit } from 'lodash';\nimport ElIconButton from './ElIconButton.vue';\n\nexport type DropdownItem = { onClick?: () => void } & InstanceType<typeof ElItem>['$props'];\n\nconst props = withDefaults(\n  defineProps<{\n    items: DropdownItem[];\n    title?: string;\n    action?: Omit<InstanceType<typeof ElButton>['$props'], 'variant' | 'size'>;\n    left?: boolean;\n    right?: boolean;\n    minWidth?: number;\n    isOpen?: boolean;\n    maxHeight?: ElDropdownMaxHeight;\n    iconButton?: InstanceType<typeof ElIconButton>['$props'];\n    multiple?: boolean;\n  }>(),\n  {\n    title: undefined,\n    action: undefined,\n    isOpen: undefined,\n    minWidth: undefined,\n    maxHeight: 260,\n    iconButton: undefined,\n    multiple: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'click:action'): void;\n  (event: 'update:is-open', isOpen: boolean): void;\n}>();\n\nconst internalIsOpenState = ref<boolean>(false);\nconst listAnchor = ref<HTMLElement>();\nconst elClipToAnchor = ref<HTMLElement>();\nconst focusedIndex = ref<number>(0);\nconst itemRefs = ref<InstanceType<typeof ElItem>[]>();\n\nconst isOpenProxy = computed({\n  set(isOpen: boolean) {\n    if (props.isOpen !== undefined) {\n      emit('update:is-open', isOpen);\n    }\n    internalIsOpenState.value = isOpen;\n  },\n  get(): boolean {\n    if (props.isOpen !== undefined) return props.isOpen;\n    return internalIsOpenState.value;\n  },\n});\n\nconst toggle = () => (isOpenProxy.value = !isOpenProxy.value);\nconst show = () => (isOpenProxy.value = true);\nconst hide = () => (isOpenProxy.value = false);\n\n// Used to focus the first item when the dropdown is opened, so we can continue keyboard navigation from there\nwatch(\n  () => [props.items, isOpenProxy.value],\n  () => {\n    if (isOpenProxy.value) {\n      const selectedValueIdx = props.items?.findIndex(item => item.check);\n      focusedIndex.value = selectedValueIdx || 0;\n    }\n  },\n);\n\n// Once focused item changes, we try to scroll the focused item into view if it's not already visible\nconst scrollToFocusedIndex = (focusedIndex: number) => {\n  itemRefs.value?.at(focusedIndex)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst moveVisibleFocusDown = () => {\n  focusedIndex.value += (itemRefs.value?.slice(focusedIndex.value + 1).findIndex(item => !item.$props.disabled) ?? -1) + 1;\n  scrollToFocusedIndex(focusedIndex.value);\n};\n\nconst moveVisibleFocusUp = () => {\n  focusedIndex.value -=\n    (itemRefs.value\n      ?.slice(0, focusedIndex.value)\n      .reverse()\n      .findIndex(item => !item.$props.disabled) ?? -1) + 1;\n\n  scrollToFocusedIndex(focusedIndex.value);\n};\n\n// Keyboard navigation handlers\nonKeyStroke(['ArrowDown', 'ArrowUp', 'Enter'], e => {\n  if (isOpenProxy.value === true) {\n    switch (e.key) {\n      case 'ArrowDown': {\n        moveVisibleFocusDown();\n        break;\n      }\n      case 'ArrowUp': {\n        moveVisibleFocusUp();\n        break;\n      }\n      case 'Enter': {\n        const item = props.items[focusedIndex.value];\n\n        if (!item.disabled) {\n          item.onClick?.();\n          hide();\n        }\n\n        break;\n      }\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n  }\n});\n\ndefineExpose({\n  show,\n  hide,\n  toggle,\n});\n\nonClickOutside(props.multiple ? elClipToAnchor : listAnchor, event => {\n  // Check if the clicked element is a disabled item\n  const clickedElement = event.target as HTMLElement;\n  const isDisabledItem = clickedElement.closest('[data-disabled=\"true\"]');\n\n  if (!isDisabledItem) {\n    hide();\n  }\n});\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div ref=\"listAnchor\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"{\n          isOpen: isOpenProxy,\n          toggle,\n          show,\n          hide,\n        }\"\n      >\n        <ElIconButton v-if=\"iconButton\" class=\"cursor-pointer\" :aria-expanded=\"isOpenProxy\" v-bind=\"iconButton\" @click=\"toggle\" />\n      </slot>\n    </div>\n\n    <CustomTransition name=\"expand\">\n      <ElClipToAnchor\n        v-if=\"isOpenProxy && listAnchor\"\n        ref=\"elClipToAnchor\"\n        class=\"pt-1\"\n        match-anchor-width\n        :anchor=\"listAnchor\"\n        :position=\"left ? 'bottom-left' : right ? 'bottom-right' : 'bottom'\"\n        :min-width=\"minWidth ?? 208\"\n      >\n        <div\n          class=\"border-neutral-surface text-neutral-darker inline-flex w-full flex-col items-start gap-1 rounded-md border bg-white p-2 text-sm shadow-md max-h-[inherit]\"\n        >\n          <div v-if=\"title\" class=\"border-neutral-surface flex h-9 items-center self-stretch border-b px-2\">\n            <span class=\"font-semibold\">{{ title }}</span>\n          </div>\n          <div\n            class=\"no-scrollbar relative w-full overflow-y-scroll\"\n            :class=\"{\n              'max-h-[260px]': maxHeight === 260,\n            }\"\n            role=\"listbox\"\n            :aria-activedescendant=\"'option-' + focusedIndex\"\n          >\n            <div class=\"flex w-full flex-col gap-1\">\n              <template v-if=\"items.length > 0\">\n                <ElItem\n                  v-for=\"(item, index) in items\"\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-disabled=\"item.disabled ? 'true' : undefined\"\n                  :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n                  :focused=\"focusedIndex === index\"\n                  @click.prevent=\"!item.disabled && item.onClick?.()\"\n                />\n              </template>\n              <ElItem v-else class=\"cursor-pointer self-stretch\" :data-cy=\"`no-items-dropdown-item`\" text=\"Nessuna opzione disponibile\" />\n            </div>\n          </div>\n          <div v-if=\"action\" class=\"border-neutral-surface self-stretch border-t py-2 px-5\">\n            <ElButton variant=\"tertiary\" v-bind=\"action\" class=\"w-full\" @click=\"emit('click:action')\" />\n          </div>\n        </div>\n      </ElClipToAnchor>\n    </CustomTransition>\n  </div>\n</template>\n"],"names":["elDropdownMaxHeight","props","__props","emit","__emit","internalIsOpenState","ref","listAnchor","elClipToAnchor","focusedIndex","itemRefs","isOpenProxy","computed","isOpen","toggle","show","hide","watch","selectedValueIdx","_a","item","scrollToFocusedIndex","_c","_b","moveVisibleFocusDown","moveVisibleFocusUp","onKeyStroke","__expose","onClickOutside","event"],"mappings":"yqCACaA,GAAsB,CAAC,EAAG,IAAK,GAAI,8VAgBhD,MAAMC,EAAQC,EAwBRC,EAAOC,EAKPC,EAAsBC,EAAa,EAAK,EACxCC,EAAaD,IACbE,EAAiBF,IACjBG,EAAeH,EAAY,CAAC,EAC5BI,EAAWJ,IAEXK,EAAcC,EAAS,CAC3B,IAAIC,EAAiB,CACfZ,EAAM,SAAW,QACnBE,EAAK,iBAAkBU,CAAM,EAE/BR,EAAoB,MAAQQ,CAC9B,EACA,KAAe,CACb,OAAIZ,EAAM,SAAW,OAAkBA,EAAM,OACtCI,EAAoB,KAC7B,CAAA,CACD,EAEKS,EAAS,IAAOH,EAAY,MAAQ,CAACA,EAAY,MACjDI,EAAO,IAAOJ,EAAY,MAAQ,GAClCK,EAAO,IAAOL,EAAY,MAAQ,GAGxCM,EACE,IAAM,CAAChB,EAAM,MAAOU,EAAY,KAAK,EACrC,IAAM,OACJ,GAAIA,EAAY,MAAO,CACrB,MAAMO,GAAmBC,EAAAlB,EAAM,QAAN,YAAAkB,EAAa,UAAUC,GAAQA,EAAK,OAC7DX,EAAa,MAAQS,GAAoB,CAC3C,CACF,CAAA,EAII,MAAAG,EAAwBZ,GAAyB,YAC5Ca,GAAAC,GAAAJ,EAAAT,EAAA,QAAA,YAAAS,EAAO,GAAGV,KAAV,YAAAc,EAAyB,MAAzB,MAAAD,EAA8B,eAAe,CAAE,MAAO,SAAA,EAAW,EAGtEE,EAAuB,IAAM,OACjCf,EAAa,UAAUU,EAAAT,EAAS,QAAT,YAAAS,EAAgB,MAAMV,EAAa,MAAQ,GAAG,aAAkB,CAACW,EAAK,OAAO,YAAa,IAAM,EACvHC,EAAqBZ,EAAa,KAAK,CAAA,EAGnCgB,EAAqB,IAAM,OAC/BhB,EAAa,UACVU,EAAAT,EAAS,QAAT,YAAAS,EACG,MAAM,EAAGV,EAAa,OACvB,UACA,UAAkBW,GAAA,CAACA,EAAK,OAAO,YAAa,IAAM,EAEvDC,EAAqBZ,EAAa,KAAK,CAAA,EAIzC,OAAAiB,EAAY,CAAC,YAAa,UAAW,OAAO,EAAQ,GAAA,OAC9C,GAAAf,EAAY,QAAU,GAAM,CAC9B,OAAQ,EAAE,IAAK,CACb,IAAK,YAAa,CACKa,IACrB,KACF,CACA,IAAK,UAAW,CACKC,IACnB,KACF,CACA,IAAK,QAAS,CACZ,MAAML,EAAOnB,EAAM,MAAMQ,EAAa,KAAK,EAEtCW,EAAK,YACRD,EAAAC,EAAK,UAAL,MAAAD,EAAA,KAAAC,GACKJ,KAGP,KACF,CACF,CAEA,EAAE,eAAe,EACjB,EAAE,gBAAgB,CACpB,CAAA,CACD,EAEYW,EAAA,CACX,KAAAZ,EACA,KAAAC,EACA,OAAAF,CAAA,CACD,EAEDc,EAAe3B,EAAM,SAAWO,EAAiBD,EAAqBsB,GAAA,CAE7CA,EAAM,OACS,QAAQ,wBAAwB,GAG/Db,GACP,CACD"}
+{"version":3,"file":"ElDropdown.vue.esm2.js","sources":["../src/ElDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elDropdownMaxHeight = [0, 260, 1000] as const;\nexport type ElDropdownMaxHeight = (typeof elDropdownMaxHeight)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElClipToAnchor from '@/ElClipToAnchor.vue';\nimport ElItem from '@/ElItem.vue';\nimport ElButton from '@/ElButton.vue';\nimport { ref, computed, watch } from 'vue';\nimport { onKeyStroke, onClickOutside } from '@vueuse/core';\nimport { omit } from 'lodash';\nimport ElIconButton from './ElIconButton.vue';\n\nexport type DropdownItem = { onClick?: () => void } & InstanceType<typeof ElItem>['$props'];\n\nconst props = withDefaults(\n  defineProps<{\n    items: DropdownItem[];\n    title?: string;\n    action?: Omit<InstanceType<typeof ElButton>['$props'], 'variant' | 'size'>;\n    left?: boolean;\n    right?: boolean;\n    minWidth?: number;\n    isOpen?: boolean;\n    maxHeight?: ElDropdownMaxHeight;\n    iconButton?: InstanceType<typeof ElIconButton>['$props'];\n    multiple?: boolean;\n  }>(),\n  {\n    title: undefined,\n    action: undefined,\n    isOpen: undefined,\n    minWidth: undefined,\n    maxHeight: 260,\n    iconButton: undefined,\n    multiple: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'click:action'): void;\n  (event: 'update:is-open', isOpen: boolean): void;\n}>();\n\nconst internalIsOpenState = ref<boolean>(false);\nconst listAnchor = ref<HTMLElement>();\nconst elClipToAnchor = ref<HTMLElement>();\nconst focusedIndex = ref<number>(0);\nconst itemRefs = ref<InstanceType<typeof ElItem>[]>();\n\nconst isOpenProxy = computed({\n  set(isOpen: boolean) {\n    if (props.isOpen !== undefined) {\n      emit('update:is-open', isOpen);\n    }\n    internalIsOpenState.value = isOpen;\n  },\n  get(): boolean {\n    if (props.isOpen !== undefined) return props.isOpen;\n    return internalIsOpenState.value;\n  },\n});\n\nconst toggle = () => (isOpenProxy.value = !isOpenProxy.value);\nconst show = () => (isOpenProxy.value = true);\nconst hide = () => (isOpenProxy.value = false);\n\n// Used to focus the first item when the dropdown is opened, so we can continue keyboard navigation from there\nwatch(\n  () => [props.items, isOpenProxy.value],\n  () => {\n    if (isOpenProxy.value) {\n      const selectedValueIdx = props.items?.findIndex(item => item.check);\n      focusedIndex.value = selectedValueIdx || 0;\n    }\n  },\n);\n\n// Once focused item changes, we try to scroll the focused item into view if it's not already visible\nconst scrollToFocusedIndex = (focusedIndex: number) => {\n  itemRefs.value?.at(focusedIndex)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst moveVisibleFocusDown = () => {\n  focusedIndex.value += (itemRefs.value?.slice(focusedIndex.value + 1).findIndex(item => !item.$props.disabled) ?? -1) + 1;\n  scrollToFocusedIndex(focusedIndex.value);\n};\n\nconst moveVisibleFocusUp = () => {\n  focusedIndex.value -=\n    (itemRefs.value\n      ?.slice(0, focusedIndex.value)\n      .reverse()\n      .findIndex(item => !item.$props.disabled) ?? -1) + 1;\n\n  scrollToFocusedIndex(focusedIndex.value);\n};\n\n// Keyboard navigation handlers\nonKeyStroke(['ArrowDown', 'ArrowUp', 'Enter'], e => {\n  if (isOpenProxy.value === true) {\n    switch (e.key) {\n      case 'ArrowDown': {\n        moveVisibleFocusDown();\n        break;\n      }\n      case 'ArrowUp': {\n        moveVisibleFocusUp();\n        break;\n      }\n      case 'Enter': {\n        const item = props.items[focusedIndex.value];\n\n        if (!item.disabled) {\n          item.onClick?.();\n          hide();\n        }\n\n        break;\n      }\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n  }\n});\n\ndefineExpose({\n  show,\n  hide,\n  toggle,\n});\n\nonClickOutside(props.multiple ? elClipToAnchor : listAnchor, event => {\n  // Check if the clicked element is a disabled item\n  const clickedElement = event.target as HTMLElement;\n  const isDisabledItem = clickedElement.closest('[data-disabled=\"true\"]');\n\n  if (!isDisabledItem) {\n    hide();\n  }\n});\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div ref=\"listAnchor\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"{\n          isOpen: isOpenProxy,\n          toggle,\n          show,\n          hide,\n        }\"\n      >\n        <ElIconButton v-if=\"iconButton\" class=\"cursor-pointer\" :aria-expanded=\"isOpenProxy\" v-bind=\"iconButton\" @click=\"toggle\" />\n      </slot>\n    </div>\n\n    <CustomTransition name=\"expand\">\n      <ElClipToAnchor\n        v-if=\"isOpenProxy && listAnchor\"\n        ref=\"elClipToAnchor\"\n        class=\"pt-1\"\n        match-anchor-width\n        :anchor=\"listAnchor\"\n        :position=\"left ? 'bottom-left' : right ? 'bottom-right' : 'bottom'\"\n        :min-width=\"minWidth ?? 208\"\n      >\n        <div\n          class=\"border-neutral-surface text-neutral-darker inline-flex w-full flex-col items-start gap-1 rounded-md border bg-white p-2 text-sm shadow-md max-h-[inherit]\"\n        >\n          <div v-if=\"title\" class=\"border-neutral-surface flex h-9 items-center self-stretch border-b px-2\">\n            <span class=\"font-semibold\">{{ title }}</span>\n          </div>\n          <div\n            class=\"no-scrollbar relative w-full overflow-y-scroll\"\n            :class=\"{\n              'max-h-[260px]': maxHeight === 260,\n            }\"\n            role=\"listbox\"\n            :aria-activedescendant=\"'option-' + focusedIndex\"\n          >\n            <div class=\"flex w-full flex-col gap-1\">\n              <template v-if=\"items.length > 0\">\n                <ElItem\n                  v-for=\"(item, index) in items\"\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-disabled=\"item.disabled ? 'true' : undefined\"\n                  :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n                  :focused=\"focusedIndex === index\"\n                  @click.prevent=\"!item.disabled && item.onClick?.()\"\n                />\n              </template>\n              <ElItem v-else class=\"cursor-pointer self-stretch\" :data-cy=\"`no-items-dropdown-item`\" text=\"Nessuna opzione disponibile\" />\n            </div>\n          </div>\n          <div v-if=\"action\" class=\"border-neutral-surface self-stretch border-t py-2 px-5\">\n            <ElButton variant=\"tertiary\" v-bind=\"action\" class=\"w-full\" @click=\"emit('click:action')\" />\n          </div>\n        </div>\n      </ElClipToAnchor>\n    </CustomTransition>\n  </div>\n</template>\n"],"names":["elDropdownMaxHeight","props","__props","emit","__emit","internalIsOpenState","ref","listAnchor","elClipToAnchor","focusedIndex","itemRefs","isOpenProxy","computed","isOpen","toggle","show","hide","watch","selectedValueIdx","_a","item","scrollToFocusedIndex","_c","_b","moveVisibleFocusDown","moveVisibleFocusUp","onKeyStroke","__expose","onClickOutside","event"],"mappings":"uqCACaA,GAAsB,CAAC,EAAG,IAAK,GAAI,8VAgBhD,MAAMC,EAAQC,EAwBRC,EAAOC,EAKPC,EAAsBC,EAAa,EAAK,EACxCC,EAAaD,IACbE,EAAiBF,IACjBG,EAAeH,EAAY,CAAC,EAC5BI,EAAWJ,IAEXK,EAAcC,EAAS,CAC3B,IAAIC,EAAiB,CACfZ,EAAM,SAAW,QACnBE,EAAK,iBAAkBU,CAAM,EAE/BR,EAAoB,MAAQQ,CAC9B,EACA,KAAe,CACb,OAAIZ,EAAM,SAAW,OAAkBA,EAAM,OACtCI,EAAoB,KAC7B,CAAA,CACD,EAEKS,EAAS,IAAOH,EAAY,MAAQ,CAACA,EAAY,MACjDI,EAAO,IAAOJ,EAAY,MAAQ,GAClCK,EAAO,IAAOL,EAAY,MAAQ,GAGxCM,EACE,IAAM,CAAChB,EAAM,MAAOU,EAAY,KAAK,EACrC,IAAM,OACJ,GAAIA,EAAY,MAAO,CACrB,MAAMO,GAAmBC,EAAAlB,EAAM,QAAN,YAAAkB,EAAa,UAAUC,GAAQA,EAAK,OAC7DX,EAAa,MAAQS,GAAoB,CAC3C,CACF,CAAA,EAII,MAAAG,EAAwBZ,GAAyB,YAC5Ca,GAAAC,GAAAJ,EAAAT,EAAA,QAAA,YAAAS,EAAO,GAAGV,KAAV,YAAAc,EAAyB,MAAzB,MAAAD,EAA8B,eAAe,CAAE,MAAO,SAAA,EAAW,EAGtEE,EAAuB,IAAM,OACjCf,EAAa,UAAUU,EAAAT,EAAS,QAAT,YAAAS,EAAgB,MAAMV,EAAa,MAAQ,GAAG,aAAkB,CAACW,EAAK,OAAO,YAAa,IAAM,EACvHC,EAAqBZ,EAAa,KAAK,CAAA,EAGnCgB,EAAqB,IAAM,OAC/BhB,EAAa,UACVU,EAAAT,EAAS,QAAT,YAAAS,EACG,MAAM,EAAGV,EAAa,OACvB,UACA,UAAkBW,GAAA,CAACA,EAAK,OAAO,YAAa,IAAM,EAEvDC,EAAqBZ,EAAa,KAAK,CAAA,EAIzC,OAAAiB,EAAY,CAAC,YAAa,UAAW,OAAO,EAAQ,GAAA,OAC9C,GAAAf,EAAY,QAAU,GAAM,CAC9B,OAAQ,EAAE,IAAK,CACb,IAAK,YAAa,CACKa,IACrB,KACF,CACA,IAAK,UAAW,CACKC,IACnB,KACF,CACA,IAAK,QAAS,CACZ,MAAML,EAAOnB,EAAM,MAAMQ,EAAa,KAAK,EAEtCW,EAAK,YACRD,EAAAC,EAAK,UAAL,MAAAD,EAAA,KAAAC,GACKJ,KAGP,KACF,CACF,CAEA,EAAE,eAAe,EACjB,EAAE,gBAAgB,CACpB,CAAA,CACD,EAEYW,EAAA,CACX,KAAAZ,EACA,KAAAC,EACA,OAAAF,CAAA,CACD,EAEDc,EAAe3B,EAAM,SAAWO,EAAiBD,EAAqBsB,GAAA,CAE7CA,EAAM,OACS,QAAQ,wBAAwB,GAG/Db,GACP,CACD"}

package/dist/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}>();\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"}

package/dist/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}>();\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"}

package/dist/ElIcon.vue.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),i=require("../node_modules/@heroicons/vue/24/outline/esm/index.cjs.js"),d=require("../node_modules/@heroicons/vue/24/solid/esm/index.cjs.js"),l=["pink","yellow","orange","cyan","rose","green","brand-blue","brand-green","red","purple","indigo"],m=n.defineComponent({__name:"ElIcon",props:{name:{},solid:{type:Boolean},disabled:{type:Boolean}},setup(a){const o=a;function r(e){return l.includes(e)}const s=n.computed(()=>r(o.name)),u=n.computed(()=>{if(!r(o.name))return o.solid?d[o.name]:i[o.name]});return(e,t)=>s.value?(n.openBlock(),n.createElementBlock("div",{key:0,class:n.normalizeClass(["h-4 w-4 rounded-full",{"bg-yellow-500":e.name==="yellow","bg-orange-500":e.name==="orange","bg-cyan-500":e.name==="cyan","bg-rose-500":e.name==="rose","bg-green-500":e.name==="green","bg-brandBlue-500":e.name==="brand-blue","bg-brandGreen-500":e.name==="brand-green","bg-red-500":e.name==="red","bg-purple-500":e.name==="purple","bg-indigo-500":e.name==="indigo"}])},null,2)):(n.openBlock(),n.createBlock(n.resolveDynamicComponent(u.value),{key:1}))}});exports.default=m;exports.elIconColors=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),i=require("./node_modules/@heroicons/vue/24/outline/esm/index.cjs.js"),d=require("./node_modules/@heroicons/vue/24/solid/esm/index.cjs.js"),l=["pink","yellow","orange","cyan","rose","green","brand-blue","brand-green","red","purple","indigo"],m=n.defineComponent({__name:"ElIcon",props:{name:{},solid:{type:Boolean},disabled:{type:Boolean}},setup(a){const o=a;function r(e){return l.includes(e)}const s=n.computed(()=>r(o.name)),u=n.computed(()=>{if(!r(o.name))return o.solid?d[o.name]:i[o.name]});return(e,t)=>s.value?(n.openBlock(),n.createElementBlock("div",{key:0,class:n.normalizeClass(["h-4 w-4 rounded-full",{"bg-yellow-500":e.name==="yellow","bg-orange-500":e.name==="orange","bg-cyan-500":e.name==="cyan","bg-rose-500":e.name==="rose","bg-green-500":e.name==="green","bg-brandBlue-500":e.name==="brand-blue","bg-brandGreen-500":e.name==="brand-green","bg-red-500":e.name==="red","bg-purple-500":e.name==="purple","bg-indigo-500":e.name==="indigo"}])},null,2)):(n.openBlock(),n.createBlock(n.resolveDynamicComponent(u.value),{key:1}))}});exports.default=m;exports.elIconColors=l;
 //# sourceMappingURL=ElIcon.vue.cjs2.js.map

package/dist/ElIcon.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElIcon.vue.cjs2.js","sources":["../../src/ElIcon.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elIconColors = [\n  'pink',\n  'yellow',\n  'orange',\n  'cyan',\n  'rose',\n  'green',\n  'brand-blue',\n  'brand-green',\n  'red',\n  'purple',\n  'indigo',\n] as const;\ntype ElIconColors = (typeof elIconColors)[number];\nexport type IconNames = keyof typeof outlineIcons | ElIconColors;\nexport type ElIconProps = {\n  name: IconNames;\n  solid?: boolean;\n  cursorPointer?: boolean;\n  disabled?: boolean;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport * as outlineIcons from '@heroicons/vue/24/outline';\nimport * as solidIcons from '@heroicons/vue/24/solid';\nimport { computed } from 'vue';\n\nconst props = defineProps<{\n  name: IconNames;\n  solid?: boolean;\n  disabled?: boolean;\n}>();\n\nfunction isElIconColor(color: string): color is ElIconColors {\n  return elIconColors.includes(color as ElIconColors);\n}\n\nconst isColorDot = computed(() => isElIconColor(props.name));\nconst iconComponent = computed(() => {\n  if (isElIconColor(props.name)) return;\n  return props.solid ? solidIcons[props.name] : outlineIcons[props.name];\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isColorDot\"\n    class=\"h-4 w-4 rounded-full\"\n    :class=\"{\n      'bg-yellow-500': name === 'yellow',\n      'bg-orange-500': name === 'orange',\n      'bg-cyan-500': name === 'cyan',\n      'bg-rose-500': name === 'rose',\n      'bg-green-500': name === 'green',\n      'bg-brandBlue-500': name === 'brand-blue',\n      'bg-brandGreen-500': name === 'brand-green',\n      'bg-red-500': name === 'red',\n      'bg-purple-500': name === 'purple',\n      'bg-indigo-500': name === 'indigo',\n    }\"\n  ></div>\n  <component :is=\"iconComponent\" v-else />\n</template>\n"],"names":["elIconColors","props","__props","isElIconColor","color","isColorDot","computed","iconComponent","solidIcons","outlineIcons"],"mappings":"iRACaA,EAAe,CAC1B,OACA,SACA,SACA,OACA,OACA,QACA,aACA,cACA,MACA,SACA,QACF,6GAgBA,MAAMC,EAAQC,EAMd,SAASC,EAAcC,EAAsC,CACpD,OAAAJ,EAAa,SAASI,CAAqB,CACpD,CAEA,MAAMC,EAAaC,EAAAA,SAAS,IAAMH,EAAcF,EAAM,IAAI,CAAC,EACrDM,EAAgBD,EAAAA,SAAS,IAAM,CAC/B,GAAA,CAAAH,EAAcF,EAAM,IAAI,EACrB,OAAAA,EAAM,MAAQO,EAAWP,EAAM,IAAI,EAAIQ,EAAaR,EAAM,IAAI,CAAA,CACtE"}
+{"version":3,"file":"ElIcon.vue.cjs2.js","sources":["../src/ElIcon.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elIconColors = [\n  'pink',\n  'yellow',\n  'orange',\n  'cyan',\n  'rose',\n  'green',\n  'brand-blue',\n  'brand-green',\n  'red',\n  'purple',\n  'indigo',\n] as const;\ntype ElIconColors = (typeof elIconColors)[number];\nexport type IconNames = keyof typeof outlineIcons | ElIconColors;\nexport type ElIconProps = {\n  name: IconNames;\n  solid?: boolean;\n  cursorPointer?: boolean;\n  disabled?: boolean;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport * as outlineIcons from '@heroicons/vue/24/outline';\nimport * as solidIcons from '@heroicons/vue/24/solid';\nimport { computed } from 'vue';\n\nconst props = defineProps<{\n  name: IconNames;\n  solid?: boolean;\n  disabled?: boolean;\n}>();\n\nfunction isElIconColor(color: string): color is ElIconColors {\n  return elIconColors.includes(color as ElIconColors);\n}\n\nconst isColorDot = computed(() => isElIconColor(props.name));\nconst iconComponent = computed(() => {\n  if (isElIconColor(props.name)) return;\n  return props.solid ? solidIcons[props.name] : outlineIcons[props.name];\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isColorDot\"\n    class=\"h-4 w-4 rounded-full\"\n    :class=\"{\n      'bg-yellow-500': name === 'yellow',\n      'bg-orange-500': name === 'orange',\n      'bg-cyan-500': name === 'cyan',\n      'bg-rose-500': name === 'rose',\n      'bg-green-500': name === 'green',\n      'bg-brandBlue-500': name === 'brand-blue',\n      'bg-brandGreen-500': name === 'brand-green',\n      'bg-red-500': name === 'red',\n      'bg-purple-500': name === 'purple',\n      'bg-indigo-500': name === 'indigo',\n    }\"\n  ></div>\n  <component :is=\"iconComponent\" v-else />\n</template>\n"],"names":["elIconColors","props","__props","isElIconColor","color","isColorDot","computed","iconComponent","solidIcons","outlineIcons"],"mappings":"+QACaA,EAAe,CAC1B,OACA,SACA,SACA,OACA,OACA,QACA,aACA,cACA,MACA,SACA,QACF,6GAgBA,MAAMC,EAAQC,EAMd,SAASC,EAAcC,EAAsC,CACpD,OAAAJ,EAAa,SAASI,CAAqB,CACpD,CAEA,MAAMC,EAAaC,EAAAA,SAAS,IAAMH,EAAcF,EAAM,IAAI,CAAC,EACrDM,EAAgBD,EAAAA,SAAS,IAAM,CAC/B,GAAA,CAAAH,EAAcF,EAAM,IAAI,EACrB,OAAAA,EAAM,MAAQO,EAAWP,EAAM,IAAI,EAAIQ,EAAaR,EAAM,IAAI,CAAA,CACtE"}

package/dist/ElIcon.vue.esm2.js

@@ -1,2 +1,2 @@
-import{defineComponent as i,computed as r,openBlock as a,createElementBlock as d,normalizeClass as p,createBlock as g,resolveDynamicComponent as u}from"vue";import*as b from"../node_modules/@heroicons/vue/24/outline/esm/index.esm.js";import*as t from"../node_modules/@heroicons/vue/24/solid/esm/index.esm.js";const c=["pink","yellow","orange","cyan","rose","green","brand-blue","brand-green","red","purple","indigo"],C=i({__name:"ElIcon",props:{name:{},solid:{type:Boolean},disabled:{type:Boolean}},setup(l){const n=l;function o(e){return c.includes(e)}const m=r(()=>o(n.name)),s=r(()=>{if(!o(n.name))return n.solid?t[n.name]:b[n.name]});return(e,y)=>m.value?(a(),d("div",{key:0,class:p(["h-4 w-4 rounded-full",{"bg-yellow-500":e.name==="yellow","bg-orange-500":e.name==="orange","bg-cyan-500":e.name==="cyan","bg-rose-500":e.name==="rose","bg-green-500":e.name==="green","bg-brandBlue-500":e.name==="brand-blue","bg-brandGreen-500":e.name==="brand-green","bg-red-500":e.name==="red","bg-purple-500":e.name==="purple","bg-indigo-500":e.name==="indigo"}])},null,2)):(a(),g(u(s.value),{key:1}))}});export{C as default,c as elIconColors};
+import{defineComponent as i,computed as r,openBlock as a,createElementBlock as d,normalizeClass as p,createBlock as g,resolveDynamicComponent as u}from"vue";import*as b from"./node_modules/@heroicons/vue/24/outline/esm/index.esm.js";import*as t from"./node_modules/@heroicons/vue/24/solid/esm/index.esm.js";const c=["pink","yellow","orange","cyan","rose","green","brand-blue","brand-green","red","purple","indigo"],C=i({__name:"ElIcon",props:{name:{},solid:{type:Boolean},disabled:{type:Boolean}},setup(l){const n=l;function o(e){return c.includes(e)}const m=r(()=>o(n.name)),s=r(()=>{if(!o(n.name))return n.solid?t[n.name]:b[n.name]});return(e,y)=>m.value?(a(),d("div",{key:0,class:p(["h-4 w-4 rounded-full",{"bg-yellow-500":e.name==="yellow","bg-orange-500":e.name==="orange","bg-cyan-500":e.name==="cyan","bg-rose-500":e.name==="rose","bg-green-500":e.name==="green","bg-brandBlue-500":e.name==="brand-blue","bg-brandGreen-500":e.name==="brand-green","bg-red-500":e.name==="red","bg-purple-500":e.name==="purple","bg-indigo-500":e.name==="indigo"}])},null,2)):(a(),g(u(s.value),{key:1}))}});export{C as default,c as elIconColors};
 //# sourceMappingURL=ElIcon.vue.esm2.js.map

package/dist/ElIcon.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElIcon.vue.esm2.js","sources":["../../src/ElIcon.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elIconColors = [\n  'pink',\n  'yellow',\n  'orange',\n  'cyan',\n  'rose',\n  'green',\n  'brand-blue',\n  'brand-green',\n  'red',\n  'purple',\n  'indigo',\n] as const;\ntype ElIconColors = (typeof elIconColors)[number];\nexport type IconNames = keyof typeof outlineIcons | ElIconColors;\nexport type ElIconProps = {\n  name: IconNames;\n  solid?: boolean;\n  cursorPointer?: boolean;\n  disabled?: boolean;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport * as outlineIcons from '@heroicons/vue/24/outline';\nimport * as solidIcons from '@heroicons/vue/24/solid';\nimport { computed } from 'vue';\n\nconst props = defineProps<{\n  name: IconNames;\n  solid?: boolean;\n  disabled?: boolean;\n}>();\n\nfunction isElIconColor(color: string): color is ElIconColors {\n  return elIconColors.includes(color as ElIconColors);\n}\n\nconst isColorDot = computed(() => isElIconColor(props.name));\nconst iconComponent = computed(() => {\n  if (isElIconColor(props.name)) return;\n  return props.solid ? solidIcons[props.name] : outlineIcons[props.name];\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isColorDot\"\n    class=\"h-4 w-4 rounded-full\"\n    :class=\"{\n      'bg-yellow-500': name === 'yellow',\n      'bg-orange-500': name === 'orange',\n      'bg-cyan-500': name === 'cyan',\n      'bg-rose-500': name === 'rose',\n      'bg-green-500': name === 'green',\n      'bg-brandBlue-500': name === 'brand-blue',\n      'bg-brandGreen-500': name === 'brand-green',\n      'bg-red-500': name === 'red',\n      'bg-purple-500': name === 'purple',\n      'bg-indigo-500': name === 'indigo',\n    }\"\n  ></div>\n  <component :is=\"iconComponent\" v-else />\n</template>\n"],"names":["elIconColors","props","__props","isElIconColor","color","isColorDot","computed","iconComponent","solidIcons","outlineIcons"],"mappings":"qTACO,MAAMA,EAAe,CAC1B,OACA,SACA,SACA,OACA,OACA,QACA,aACA,cACA,MACA,SACA,QACF,6FAgBA,MAAMC,EAAQC,EAMd,SAASC,EAAcC,EAAsC,CACpD,OAAAJ,EAAa,SAASI,CAAqB,CACpD,CAEA,MAAMC,EAAaC,EAAS,IAAMH,EAAcF,EAAM,IAAI,CAAC,EACrDM,EAAgBD,EAAS,IAAM,CAC/B,GAAA,CAAAH,EAAcF,EAAM,IAAI,EACrB,OAAAA,EAAM,MAAQO,EAAWP,EAAM,IAAI,EAAIQ,EAAaR,EAAM,IAAI,CAAA,CACtE"}
+{"version":3,"file":"ElIcon.vue.esm2.js","sources":["../src/ElIcon.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elIconColors = [\n  'pink',\n  'yellow',\n  'orange',\n  'cyan',\n  'rose',\n  'green',\n  'brand-blue',\n  'brand-green',\n  'red',\n  'purple',\n  'indigo',\n] as const;\ntype ElIconColors = (typeof elIconColors)[number];\nexport type IconNames = keyof typeof outlineIcons | ElIconColors;\nexport type ElIconProps = {\n  name: IconNames;\n  solid?: boolean;\n  cursorPointer?: boolean;\n  disabled?: boolean;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport * as outlineIcons from '@heroicons/vue/24/outline';\nimport * as solidIcons from '@heroicons/vue/24/solid';\nimport { computed } from 'vue';\n\nconst props = defineProps<{\n  name: IconNames;\n  solid?: boolean;\n  disabled?: boolean;\n}>();\n\nfunction isElIconColor(color: string): color is ElIconColors {\n  return elIconColors.includes(color as ElIconColors);\n}\n\nconst isColorDot = computed(() => isElIconColor(props.name));\nconst iconComponent = computed(() => {\n  if (isElIconColor(props.name)) return;\n  return props.solid ? solidIcons[props.name] : outlineIcons[props.name];\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isColorDot\"\n    class=\"h-4 w-4 rounded-full\"\n    :class=\"{\n      'bg-yellow-500': name === 'yellow',\n      'bg-orange-500': name === 'orange',\n      'bg-cyan-500': name === 'cyan',\n      'bg-rose-500': name === 'rose',\n      'bg-green-500': name === 'green',\n      'bg-brandBlue-500': name === 'brand-blue',\n      'bg-brandGreen-500': name === 'brand-green',\n      'bg-red-500': name === 'red',\n      'bg-purple-500': name === 'purple',\n      'bg-indigo-500': name === 'indigo',\n    }\"\n  ></div>\n  <component :is=\"iconComponent\" v-else />\n</template>\n"],"names":["elIconColors","props","__props","isElIconColor","color","isColorDot","computed","iconComponent","solidIcons","outlineIcons"],"mappings":"mTACO,MAAMA,EAAe,CAC1B,OACA,SACA,SACA,OACA,OACA,QACA,aACA,cACA,MACA,SACA,QACF,6FAgBA,MAAMC,EAAQC,EAMd,SAASC,EAAcC,EAAsC,CACpD,OAAAJ,EAAa,SAASI,CAAqB,CACpD,CAEA,MAAMC,EAAaC,EAAS,IAAMH,EAAcF,EAAM,IAAI,CAAC,EACrDM,EAAgBD,EAAS,IAAM,CAC/B,GAAA,CAAAH,EAAcF,EAAM,IAAI,EACrB,OAAAA,EAAM,MAAQO,EAAWP,EAAM,IAAI,EAAIQ,EAAaR,EAAM,IAAI,CAAA,CACtE"}

package/dist/ElIconButton.vue.cjs2.js

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

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

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

package/dist/ElIconButton.vue.d.ts

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

package/dist/ElIconButton.vue.esm2.js

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

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

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

package/dist/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 && status === 'info'\"\n      v-bind=\"action\"\n      :variant=\"action.variant ?? 'tertiary'\"\n      class=\"flex-shrink-0\"\n      :class=\"{ underline: !action.variant || action.variant === 'tertiary' }\"\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    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 && status === 'info'\"\n      v-bind=\"action\"\n      :variant=\"action.variant ?? 'tertiary'\"\n      class=\"flex-shrink-0\"\n      :class=\"{ underline: !action.variant || action.variant === 'tertiary' }\"\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"}

package/dist/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 && status === 'info'\"\n      v-bind=\"action\"\n      :variant=\"action.variant ?? 'tertiary'\"\n      class=\"flex-shrink-0\"\n      :class=\"{ underline: !action.variant || action.variant === 'tertiary' }\"\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    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 && status === 'info'\"\n      v-bind=\"action\"\n      :variant=\"action.variant ?? 'tertiary'\"\n      class=\"flex-shrink-0\"\n      :class=\"{ underline: !action.variant || action.variant === 'tertiary' }\"\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"}

package/dist/ElInputChat.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElInputChat.vue.cjs2.js","sources":["../../src/ElInputChat.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputChatColors = ['primary', 'secondary'] as const;\nexport type ElInputChatColors = (typeof elInputChatColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from 'vue';\nimport ElIconButton from './ElIconButton.vue';\nimport ElFile from './ElFile.vue';\nimport ElInputTextarea from './forms/ElInputTextarea.vue';\nimport { TextualValueType } from './forms/input';\n\nwithDefaults(defineProps<{ color?: ElInputChatColors; error?: string }>(), {\n  color: 'primary',\n  error: undefined,\n});\n\nconst emit = defineEmits<{\n  onSend: [message?: string, files?: File[]];\n}>();\n\nconst container = ref<HTMLDivElement>();\nconst inputField = ref<HTMLFormElement>();\nconst message = ref<string>();\nconst files = ref<File[]>([]);\n\nconst isEmptyMessage = computed(() => !message.value && !files.value.length);\n\nconst textareaMaxHeight = computed(() => {\n  if (files.value.length) return 'max-h-[9.5rem]';\n\n  return 'max-h-[12.5rem]';\n});\n\nconst onChangeFile = async (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  if (!target || !target.files || !target.files.length) return;\n\n  files.value = [...files.value, ...target.files];\n\n  if (inputField.value) inputField.value.value = null;\n\n  const textarea = container.value?.getElementsByTagName('textarea')?.[0];\n  if (!textarea) return;\n\n  // Await next vue render and scroll to end of textarea\n  await nextTick();\n  textarea.scrollTop = textarea.scrollHeight;\n};\n\n// Resize textarea height based on it's content while typing\nconst onChangeText = (value: TextualValueType) => {\n  const textarea = container.value?.getElementsByTagName('textarea')?.[0];\n  if (!textarea) return;\n\n  // Set height to default min height which is 2.5rem when text is empty\n  textarea.style.setProperty('height', '2.5rem');\n\n  if (!value) return;\n\n  // Calculate text rows based on line height and scroll height\n  let rows = undefined;\n  if (document && document.defaultView) {\n    const lineHeight = Number(document.defaultView.getComputedStyle(textarea, null).getPropertyValue('line-height').replace('px', ''));\n    // Calculate rows removing 16px of padding\n    rows = Math.floor((textarea.scrollHeight - 16) / lineHeight);\n  }\n\n  // Set empty height to shrink as well as stretch\n  textarea.style.setProperty('height', '');\n  // Set height and add 3 px if there's more than 1 rows to hide scrollbar\n  textarea.style.setProperty('height', `${textarea.scrollHeight + ((rows ?? 0) > 1 ? 3 : 0)}px`);\n};\n\nconst handleSubmit = () => {\n  emit('onSend', message.value, files.value);\n\n  // After submit the message, clear textarea and files\n  message.value = undefined;\n  files.value = [];\n};\n</script>\n\n<template>\n  <div ref=\"container\" class=\"flex flex-col gap-2 px-4 py-5 w-full h-auto bg-neutral-surface border-t border-neutral-surface\">\n    <div v-if=\"files.length\" class=\"flex w-full gap-2 max-sm:overflow-scroll sm:overflow-x-auto max-sm:hide-scrollbar\">\n      <div v-for=\"(file, index) in files\" :key=\"`file-${index}`\" class=\"max-w-44\">\n        <ElFile variant=\"primary\" :name=\"file.name\" @close=\"files.splice(index, 1)\" />\n      </div>\n    </div>\n\n    <div class=\"flex gap-4\">\n      <div class=\"shrink-0 w-8\">\n        <input\n          ref=\"inputField\"\n          type=\"file\"\n          class=\"hidden\"\n          :accept=\"'*'\"\n          :disabled=\"!!error\"\n          :multiple=\"true\"\n          @change.prevent=\"onChangeFile\"\n        />\n\n        <ElIconButton\n          v-if=\"inputField\"\n          :icon=\"{ name: 'PaperClipIcon' }\"\n          :disabled=\"!!error\"\n          class=\"h-full flex items-end pb-1\"\n          @click=\"inputField.click()\"\n        />\n      </div>\n\n      <ElInputTextarea\n        v-model=\"message\"\n        :placeholder=\"error\"\n        :disabled=\"!!error\"\n        class=\"w-full\"\n        :error-message=\"!!error ? 'Errore' : undefined\"\n        :hidden-error-message=\"true\"\n        :textarea-class=\"`min-h-10 ${textareaMaxHeight} ${!!error && 'placeholder:!text-error'}`\"\n        @update:model-value=\"onChangeText\"\n      />\n\n      <ElIconButton\n        :icon=\"{ name: 'PaperAirplaneIcon' }\"\n        class=\"shrink-0 w-8 flex items-end pb-1\"\n        :disabled=\"!!error || isEmptyMessage\"\n        @click=\"handleSubmit\"\n      />\n    </div>\n  </div>\n</template>\n"],"names":["elInputChatColors","emit","__emit","container","ref","inputField","message","files","isEmptyMessage","computed","textareaMaxHeight","onChangeFile","event","target","textarea","_b","_a","nextTick","onChangeText","value","rows","lineHeight","handleSubmit"],"mappings":"iaACaA,EAAoB,CAAC,UAAW,WAAW,wIAgBxD,MAAMC,EAAOC,EAIPC,EAAYC,EAAAA,MACZC,EAAaD,EAAAA,MACbE,EAAUF,EAAAA,MACVG,EAAQH,MAAY,CAAA,CAAE,EAEtBI,EAAiBC,WAAS,IAAM,CAACH,EAAQ,OAAS,CAACC,EAAM,MAAM,MAAM,EAErEG,EAAoBD,EAAAA,SAAS,IAC7BF,EAAM,MAAM,OAAe,iBAExB,iBACR,EAEKI,EAAe,MAAOC,GAAiB,SAC3C,MAAMC,EAASD,EAAM,OACrB,GAAI,CAACC,GAAU,CAACA,EAAO,OAAS,CAACA,EAAO,MAAM,OAAQ,OAEtDN,EAAM,MAAQ,CAAC,GAAGA,EAAM,MAAO,GAAGM,EAAO,KAAK,EAE1CR,EAAW,QAAOA,EAAW,MAAM,MAAQ,MAE/C,MAAMS,GAAWC,GAAAC,EAAAb,EAAU,QAAV,YAAAa,EAAiB,qBAAqB,cAAtC,YAAAD,EAAoD,GAChED,IAGL,MAAMG,EAAS,SAAA,EACfH,EAAS,UAAYA,EAAS,aAAA,EAI1BI,EAAgBC,GAA4B,SAChD,MAAML,GAAWC,GAAAC,EAAAb,EAAU,QAAV,YAAAa,EAAiB,qBAAqB,cAAtC,YAAAD,EAAoD,GAMrE,GALI,CAACD,IAGIA,EAAA,MAAM,YAAY,SAAU,QAAQ,EAEzC,CAACK,GAAO,OAGZ,IAAIC,EACA,GAAA,UAAY,SAAS,YAAa,CACpC,MAAMC,EAAa,OAAO,SAAS,YAAY,iBAAiBP,EAAU,IAAI,EAAE,iBAAiB,aAAa,EAAE,QAAQ,KAAM,EAAE,CAAC,EAEjIM,EAAO,KAAK,OAAON,EAAS,aAAe,IAAMO,CAAU,CAC7D,CAGSP,EAAA,MAAM,YAAY,SAAU,EAAE,EAE9BA,EAAA,MAAM,YAAY,SAAU,GAAGA,EAAS,eAAiBM,GAAQ,GAAK,EAAI,EAAI,EAAE,IAAI,CAAA,EAGzFE,EAAe,IAAM,CACzBrB,EAAK,SAAUK,EAAQ,MAAOC,EAAM,KAAK,EAGzCD,EAAQ,MAAQ,OAChBC,EAAM,MAAQ,EAAC"}
+{"version":3,"file":"ElInputChat.vue.cjs2.js","sources":["../src/ElInputChat.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputChatColors = ['primary', 'secondary'] as const;\nexport type ElInputChatColors = (typeof elInputChatColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from 'vue';\nimport ElIconButton from './ElIconButton.vue';\nimport ElFile from './ElFile.vue';\nimport ElInputTextarea from './forms/ElInputTextarea.vue';\nimport { TextualValueType } from './forms/input';\n\nwithDefaults(defineProps<{ color?: ElInputChatColors; error?: string }>(), {\n  color: 'primary',\n  error: undefined,\n});\n\nconst emit = defineEmits<{\n  onSend: [message?: string, files?: File[]];\n}>();\n\nconst container = ref<HTMLDivElement>();\nconst inputField = ref<HTMLFormElement>();\nconst message = ref<string>();\nconst files = ref<File[]>([]);\n\nconst isEmptyMessage = computed(() => !message.value && !files.value.length);\n\nconst textareaMaxHeight = computed(() => {\n  if (files.value.length) return 'max-h-[9.5rem]';\n\n  return 'max-h-[12.5rem]';\n});\n\nconst onChangeFile = async (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  if (!target || !target.files || !target.files.length) return;\n\n  files.value = [...files.value, ...target.files];\n\n  if (inputField.value) inputField.value.value = null;\n\n  const textarea = container.value?.getElementsByTagName('textarea')?.[0];\n  if (!textarea) return;\n\n  // Await next vue render and scroll to end of textarea\n  await nextTick();\n  textarea.scrollTop = textarea.scrollHeight;\n};\n\n// Resize textarea height based on it's content while typing\nconst onChangeText = (value: TextualValueType) => {\n  const textarea = container.value?.getElementsByTagName('textarea')?.[0];\n  if (!textarea) return;\n\n  // Set height to default min height which is 2.5rem when text is empty\n  textarea.style.setProperty('height', '2.5rem');\n\n  if (!value) return;\n\n  // Calculate text rows based on line height and scroll height\n  let rows = undefined;\n  if (document && document.defaultView) {\n    const lineHeight = Number(document.defaultView.getComputedStyle(textarea, null).getPropertyValue('line-height').replace('px', ''));\n    // Calculate rows removing 16px of padding\n    rows = Math.floor((textarea.scrollHeight - 16) / lineHeight);\n  }\n\n  // Set empty height to shrink as well as stretch\n  textarea.style.setProperty('height', '');\n  // Set height and add 3 px if there's more than 1 rows to hide scrollbar\n  textarea.style.setProperty('height', `${textarea.scrollHeight + ((rows ?? 0) > 1 ? 3 : 0)}px`);\n};\n\nconst handleSubmit = () => {\n  emit('onSend', message.value, files.value);\n\n  // After submit the message, clear textarea and files\n  message.value = undefined;\n  files.value = [];\n};\n</script>\n\n<template>\n  <div ref=\"container\" class=\"flex flex-col gap-2 px-4 py-5 w-full h-auto bg-neutral-surface border-t border-neutral-surface\">\n    <div v-if=\"files.length\" class=\"flex w-full gap-2 max-sm:overflow-scroll sm:overflow-x-auto max-sm:hide-scrollbar\">\n      <div v-for=\"(file, index) in files\" :key=\"`file-${index}`\" class=\"max-w-44\">\n        <ElFile variant=\"primary\" :name=\"file.name\" @close=\"files.splice(index, 1)\" />\n      </div>\n    </div>\n\n    <div class=\"flex gap-4\">\n      <div class=\"shrink-0 w-8\">\n        <input\n          ref=\"inputField\"\n          type=\"file\"\n          class=\"hidden\"\n          :accept=\"'*'\"\n          :disabled=\"!!error\"\n          :multiple=\"true\"\n          @change.prevent=\"onChangeFile\"\n        />\n\n        <ElIconButton\n          v-if=\"inputField\"\n          :icon=\"{ name: 'PaperClipIcon' }\"\n          :disabled=\"!!error\"\n          class=\"h-full flex items-end pb-1\"\n          @click=\"inputField.click()\"\n        />\n      </div>\n\n      <ElInputTextarea\n        v-model=\"message\"\n        :placeholder=\"error\"\n        :disabled=\"!!error\"\n        class=\"w-full\"\n        :error-message=\"!!error ? 'Errore' : undefined\"\n        :hidden-error-message=\"true\"\n        :textarea-class=\"`min-h-10 ${textareaMaxHeight} ${!!error && 'placeholder:!text-error'}`\"\n        @update:model-value=\"onChangeText\"\n      />\n\n      <ElIconButton\n        :icon=\"{ name: 'PaperAirplaneIcon' }\"\n        class=\"shrink-0 w-8 flex items-end pb-1\"\n        :disabled=\"!!error || isEmptyMessage\"\n        @click=\"handleSubmit\"\n      />\n    </div>\n  </div>\n</template>\n"],"names":["elInputChatColors","emit","__emit","container","ref","inputField","message","files","isEmptyMessage","computed","textareaMaxHeight","onChangeFile","event","target","textarea","_b","_a","nextTick","onChangeText","value","rows","lineHeight","handleSubmit"],"mappings":"iaACaA,EAAoB,CAAC,UAAW,WAAW,wIAgBxD,MAAMC,EAAOC,EAIPC,EAAYC,EAAAA,MACZC,EAAaD,EAAAA,MACbE,EAAUF,EAAAA,MACVG,EAAQH,MAAY,CAAA,CAAE,EAEtBI,EAAiBC,WAAS,IAAM,CAACH,EAAQ,OAAS,CAACC,EAAM,MAAM,MAAM,EAErEG,EAAoBD,EAAAA,SAAS,IAC7BF,EAAM,MAAM,OAAe,iBAExB,iBACR,EAEKI,EAAe,MAAOC,GAAiB,SAC3C,MAAMC,EAASD,EAAM,OACrB,GAAI,CAACC,GAAU,CAACA,EAAO,OAAS,CAACA,EAAO,MAAM,OAAQ,OAEtDN,EAAM,MAAQ,CAAC,GAAGA,EAAM,MAAO,GAAGM,EAAO,KAAK,EAE1CR,EAAW,QAAOA,EAAW,MAAM,MAAQ,MAE/C,MAAMS,GAAWC,GAAAC,EAAAb,EAAU,QAAV,YAAAa,EAAiB,qBAAqB,cAAtC,YAAAD,EAAoD,GAChED,IAGL,MAAMG,EAAS,SAAA,EACfH,EAAS,UAAYA,EAAS,aAAA,EAI1BI,EAAgBC,GAA4B,SAChD,MAAML,GAAWC,GAAAC,EAAAb,EAAU,QAAV,YAAAa,EAAiB,qBAAqB,cAAtC,YAAAD,EAAoD,GAMrE,GALI,CAACD,IAGIA,EAAA,MAAM,YAAY,SAAU,QAAQ,EAEzC,CAACK,GAAO,OAGZ,IAAIC,EACA,GAAA,UAAY,SAAS,YAAa,CACpC,MAAMC,EAAa,OAAO,SAAS,YAAY,iBAAiBP,EAAU,IAAI,EAAE,iBAAiB,aAAa,EAAE,QAAQ,KAAM,EAAE,CAAC,EAEjIM,EAAO,KAAK,OAAON,EAAS,aAAe,IAAMO,CAAU,CAC7D,CAGSP,EAAA,MAAM,YAAY,SAAU,EAAE,EAE9BA,EAAA,MAAM,YAAY,SAAU,GAAGA,EAAS,eAAiBM,GAAQ,GAAK,EAAI,EAAI,EAAE,IAAI,CAAA,EAGzFE,EAAe,IAAM,CACzBrB,EAAK,SAAUK,EAAQ,MAAOC,EAAM,KAAK,EAGzCD,EAAQ,MAAQ,OAChBC,EAAM,MAAQ,EAAC"}

package/dist/ElInputChat.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElInputChat.vue.esm2.js","sources":["../../src/ElInputChat.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputChatColors = ['primary', 'secondary'] as const;\nexport type ElInputChatColors = (typeof elInputChatColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from 'vue';\nimport ElIconButton from './ElIconButton.vue';\nimport ElFile from './ElFile.vue';\nimport ElInputTextarea from './forms/ElInputTextarea.vue';\nimport { TextualValueType } from './forms/input';\n\nwithDefaults(defineProps<{ color?: ElInputChatColors; error?: string }>(), {\n  color: 'primary',\n  error: undefined,\n});\n\nconst emit = defineEmits<{\n  onSend: [message?: string, files?: File[]];\n}>();\n\nconst container = ref<HTMLDivElement>();\nconst inputField = ref<HTMLFormElement>();\nconst message = ref<string>();\nconst files = ref<File[]>([]);\n\nconst isEmptyMessage = computed(() => !message.value && !files.value.length);\n\nconst textareaMaxHeight = computed(() => {\n  if (files.value.length) return 'max-h-[9.5rem]';\n\n  return 'max-h-[12.5rem]';\n});\n\nconst onChangeFile = async (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  if (!target || !target.files || !target.files.length) return;\n\n  files.value = [...files.value, ...target.files];\n\n  if (inputField.value) inputField.value.value = null;\n\n  const textarea = container.value?.getElementsByTagName('textarea')?.[0];\n  if (!textarea) return;\n\n  // Await next vue render and scroll to end of textarea\n  await nextTick();\n  textarea.scrollTop = textarea.scrollHeight;\n};\n\n// Resize textarea height based on it's content while typing\nconst onChangeText = (value: TextualValueType) => {\n  const textarea = container.value?.getElementsByTagName('textarea')?.[0];\n  if (!textarea) return;\n\n  // Set height to default min height which is 2.5rem when text is empty\n  textarea.style.setProperty('height', '2.5rem');\n\n  if (!value) return;\n\n  // Calculate text rows based on line height and scroll height\n  let rows = undefined;\n  if (document && document.defaultView) {\n    const lineHeight = Number(document.defaultView.getComputedStyle(textarea, null).getPropertyValue('line-height').replace('px', ''));\n    // Calculate rows removing 16px of padding\n    rows = Math.floor((textarea.scrollHeight - 16) / lineHeight);\n  }\n\n  // Set empty height to shrink as well as stretch\n  textarea.style.setProperty('height', '');\n  // Set height and add 3 px if there's more than 1 rows to hide scrollbar\n  textarea.style.setProperty('height', `${textarea.scrollHeight + ((rows ?? 0) > 1 ? 3 : 0)}px`);\n};\n\nconst handleSubmit = () => {\n  emit('onSend', message.value, files.value);\n\n  // After submit the message, clear textarea and files\n  message.value = undefined;\n  files.value = [];\n};\n</script>\n\n<template>\n  <div ref=\"container\" class=\"flex flex-col gap-2 px-4 py-5 w-full h-auto bg-neutral-surface border-t border-neutral-surface\">\n    <div v-if=\"files.length\" class=\"flex w-full gap-2 max-sm:overflow-scroll sm:overflow-x-auto max-sm:hide-scrollbar\">\n      <div v-for=\"(file, index) in files\" :key=\"`file-${index}`\" class=\"max-w-44\">\n        <ElFile variant=\"primary\" :name=\"file.name\" @close=\"files.splice(index, 1)\" />\n      </div>\n    </div>\n\n    <div class=\"flex gap-4\">\n      <div class=\"shrink-0 w-8\">\n        <input\n          ref=\"inputField\"\n          type=\"file\"\n          class=\"hidden\"\n          :accept=\"'*'\"\n          :disabled=\"!!error\"\n          :multiple=\"true\"\n          @change.prevent=\"onChangeFile\"\n        />\n\n        <ElIconButton\n          v-if=\"inputField\"\n          :icon=\"{ name: 'PaperClipIcon' }\"\n          :disabled=\"!!error\"\n          class=\"h-full flex items-end pb-1\"\n          @click=\"inputField.click()\"\n        />\n      </div>\n\n      <ElInputTextarea\n        v-model=\"message\"\n        :placeholder=\"error\"\n        :disabled=\"!!error\"\n        class=\"w-full\"\n        :error-message=\"!!error ? 'Errore' : undefined\"\n        :hidden-error-message=\"true\"\n        :textarea-class=\"`min-h-10 ${textareaMaxHeight} ${!!error && 'placeholder:!text-error'}`\"\n        @update:model-value=\"onChangeText\"\n      />\n\n      <ElIconButton\n        :icon=\"{ name: 'PaperAirplaneIcon' }\"\n        class=\"shrink-0 w-8 flex items-end pb-1\"\n        :disabled=\"!!error || isEmptyMessage\"\n        @click=\"handleSubmit\"\n      />\n    </div>\n  </div>\n</template>\n"],"names":["elInputChatColors","emit","__emit","container","ref","inputField","message","files","isEmptyMessage","computed","textareaMaxHeight","onChangeFile","event","target","textarea","_b","_a","nextTick","onChangeText","value","rows","lineHeight","handleSubmit"],"mappings":"+hBACaA,EAAoB,CAAC,UAAW,WAAW,wHAgBxD,MAAMC,EAAOC,EAIPC,EAAYC,IACZC,EAAaD,IACbE,EAAUF,IACVG,EAAQH,EAAY,CAAA,CAAE,EAEtBI,EAAiBC,EAAS,IAAM,CAACH,EAAQ,OAAS,CAACC,EAAM,MAAM,MAAM,EAErEG,EAAoBD,EAAS,IAC7BF,EAAM,MAAM,OAAe,iBAExB,iBACR,EAEKI,EAAe,MAAOC,GAAiB,SAC3C,MAAMC,EAASD,EAAM,OACrB,GAAI,CAACC,GAAU,CAACA,EAAO,OAAS,CAACA,EAAO,MAAM,OAAQ,OAEtDN,EAAM,MAAQ,CAAC,GAAGA,EAAM,MAAO,GAAGM,EAAO,KAAK,EAE1CR,EAAW,QAAOA,EAAW,MAAM,MAAQ,MAE/C,MAAMS,GAAWC,GAAAC,EAAAb,EAAU,QAAV,YAAAa,EAAiB,qBAAqB,cAAtC,YAAAD,EAAoD,GAChED,IAGL,MAAMG,EAAS,EACfH,EAAS,UAAYA,EAAS,aAAA,EAI1BI,EAAgBC,GAA4B,SAChD,MAAML,GAAWC,GAAAC,EAAAb,EAAU,QAAV,YAAAa,EAAiB,qBAAqB,cAAtC,YAAAD,EAAoD,GAMrE,GALI,CAACD,IAGIA,EAAA,MAAM,YAAY,SAAU,QAAQ,EAEzC,CAACK,GAAO,OAGZ,IAAIC,EACA,GAAA,UAAY,SAAS,YAAa,CACpC,MAAMC,EAAa,OAAO,SAAS,YAAY,iBAAiBP,EAAU,IAAI,EAAE,iBAAiB,aAAa,EAAE,QAAQ,KAAM,EAAE,CAAC,EAEjIM,EAAO,KAAK,OAAON,EAAS,aAAe,IAAMO,CAAU,CAC7D,CAGSP,EAAA,MAAM,YAAY,SAAU,EAAE,EAE9BA,EAAA,MAAM,YAAY,SAAU,GAAGA,EAAS,eAAiBM,GAAQ,GAAK,EAAI,EAAI,EAAE,IAAI,CAAA,EAGzFE,EAAe,IAAM,CACzBrB,EAAK,SAAUK,EAAQ,MAAOC,EAAM,KAAK,EAGzCD,EAAQ,MAAQ,OAChBC,EAAM,MAAQ,EAAC"}
+{"version":3,"file":"ElInputChat.vue.esm2.js","sources":["../src/ElInputChat.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputChatColors = ['primary', 'secondary'] as const;\nexport type ElInputChatColors = (typeof elInputChatColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from 'vue';\nimport ElIconButton from './ElIconButton.vue';\nimport ElFile from './ElFile.vue';\nimport ElInputTextarea from './forms/ElInputTextarea.vue';\nimport { TextualValueType } from './forms/input';\n\nwithDefaults(defineProps<{ color?: ElInputChatColors; error?: string }>(), {\n  color: 'primary',\n  error: undefined,\n});\n\nconst emit = defineEmits<{\n  onSend: [message?: string, files?: File[]];\n}>();\n\nconst container = ref<HTMLDivElement>();\nconst inputField = ref<HTMLFormElement>();\nconst message = ref<string>();\nconst files = ref<File[]>([]);\n\nconst isEmptyMessage = computed(() => !message.value && !files.value.length);\n\nconst textareaMaxHeight = computed(() => {\n  if (files.value.length) return 'max-h-[9.5rem]';\n\n  return 'max-h-[12.5rem]';\n});\n\nconst onChangeFile = async (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  if (!target || !target.files || !target.files.length) return;\n\n  files.value = [...files.value, ...target.files];\n\n  if (inputField.value) inputField.value.value = null;\n\n  const textarea = container.value?.getElementsByTagName('textarea')?.[0];\n  if (!textarea) return;\n\n  // Await next vue render and scroll to end of textarea\n  await nextTick();\n  textarea.scrollTop = textarea.scrollHeight;\n};\n\n// Resize textarea height based on it's content while typing\nconst onChangeText = (value: TextualValueType) => {\n  const textarea = container.value?.getElementsByTagName('textarea')?.[0];\n  if (!textarea) return;\n\n  // Set height to default min height which is 2.5rem when text is empty\n  textarea.style.setProperty('height', '2.5rem');\n\n  if (!value) return;\n\n  // Calculate text rows based on line height and scroll height\n  let rows = undefined;\n  if (document && document.defaultView) {\n    const lineHeight = Number(document.defaultView.getComputedStyle(textarea, null).getPropertyValue('line-height').replace('px', ''));\n    // Calculate rows removing 16px of padding\n    rows = Math.floor((textarea.scrollHeight - 16) / lineHeight);\n  }\n\n  // Set empty height to shrink as well as stretch\n  textarea.style.setProperty('height', '');\n  // Set height and add 3 px if there's more than 1 rows to hide scrollbar\n  textarea.style.setProperty('height', `${textarea.scrollHeight + ((rows ?? 0) > 1 ? 3 : 0)}px`);\n};\n\nconst handleSubmit = () => {\n  emit('onSend', message.value, files.value);\n\n  // After submit the message, clear textarea and files\n  message.value = undefined;\n  files.value = [];\n};\n</script>\n\n<template>\n  <div ref=\"container\" class=\"flex flex-col gap-2 px-4 py-5 w-full h-auto bg-neutral-surface border-t border-neutral-surface\">\n    <div v-if=\"files.length\" class=\"flex w-full gap-2 max-sm:overflow-scroll sm:overflow-x-auto max-sm:hide-scrollbar\">\n      <div v-for=\"(file, index) in files\" :key=\"`file-${index}`\" class=\"max-w-44\">\n        <ElFile variant=\"primary\" :name=\"file.name\" @close=\"files.splice(index, 1)\" />\n      </div>\n    </div>\n\n    <div class=\"flex gap-4\">\n      <div class=\"shrink-0 w-8\">\n        <input\n          ref=\"inputField\"\n          type=\"file\"\n          class=\"hidden\"\n          :accept=\"'*'\"\n          :disabled=\"!!error\"\n          :multiple=\"true\"\n          @change.prevent=\"onChangeFile\"\n        />\n\n        <ElIconButton\n          v-if=\"inputField\"\n          :icon=\"{ name: 'PaperClipIcon' }\"\n          :disabled=\"!!error\"\n          class=\"h-full flex items-end pb-1\"\n          @click=\"inputField.click()\"\n        />\n      </div>\n\n      <ElInputTextarea\n        v-model=\"message\"\n        :placeholder=\"error\"\n        :disabled=\"!!error\"\n        class=\"w-full\"\n        :error-message=\"!!error ? 'Errore' : undefined\"\n        :hidden-error-message=\"true\"\n        :textarea-class=\"`min-h-10 ${textareaMaxHeight} ${!!error && 'placeholder:!text-error'}`\"\n        @update:model-value=\"onChangeText\"\n      />\n\n      <ElIconButton\n        :icon=\"{ name: 'PaperAirplaneIcon' }\"\n        class=\"shrink-0 w-8 flex items-end pb-1\"\n        :disabled=\"!!error || isEmptyMessage\"\n        @click=\"handleSubmit\"\n      />\n    </div>\n  </div>\n</template>\n"],"names":["elInputChatColors","emit","__emit","container","ref","inputField","message","files","isEmptyMessage","computed","textareaMaxHeight","onChangeFile","event","target","textarea","_b","_a","nextTick","onChangeText","value","rows","lineHeight","handleSubmit"],"mappings":"+hBACaA,EAAoB,CAAC,UAAW,WAAW,wHAgBxD,MAAMC,EAAOC,EAIPC,EAAYC,IACZC,EAAaD,IACbE,EAAUF,IACVG,EAAQH,EAAY,CAAA,CAAE,EAEtBI,EAAiBC,EAAS,IAAM,CAACH,EAAQ,OAAS,CAACC,EAAM,MAAM,MAAM,EAErEG,EAAoBD,EAAS,IAC7BF,EAAM,MAAM,OAAe,iBAExB,iBACR,EAEKI,EAAe,MAAOC,GAAiB,SAC3C,MAAMC,EAASD,EAAM,OACrB,GAAI,CAACC,GAAU,CAACA,EAAO,OAAS,CAACA,EAAO,MAAM,OAAQ,OAEtDN,EAAM,MAAQ,CAAC,GAAGA,EAAM,MAAO,GAAGM,EAAO,KAAK,EAE1CR,EAAW,QAAOA,EAAW,MAAM,MAAQ,MAE/C,MAAMS,GAAWC,GAAAC,EAAAb,EAAU,QAAV,YAAAa,EAAiB,qBAAqB,cAAtC,YAAAD,EAAoD,GAChED,IAGL,MAAMG,EAAS,EACfH,EAAS,UAAYA,EAAS,aAAA,EAI1BI,EAAgBC,GAA4B,SAChD,MAAML,GAAWC,GAAAC,EAAAb,EAAU,QAAV,YAAAa,EAAiB,qBAAqB,cAAtC,YAAAD,EAAoD,GAMrE,GALI,CAACD,IAGIA,EAAA,MAAM,YAAY,SAAU,QAAQ,EAEzC,CAACK,GAAO,OAGZ,IAAIC,EACA,GAAA,UAAY,SAAS,YAAa,CACpC,MAAMC,EAAa,OAAO,SAAS,YAAY,iBAAiBP,EAAU,IAAI,EAAE,iBAAiB,aAAa,EAAE,QAAQ,KAAM,EAAE,CAAC,EAEjIM,EAAO,KAAK,OAAON,EAAS,aAAe,IAAMO,CAAU,CAC7D,CAGSP,EAAA,MAAM,YAAY,SAAU,EAAE,EAE9BA,EAAA,MAAM,YAAY,SAAU,GAAGA,EAAS,eAAiBM,GAAQ,GAAK,EAAI,EAAI,EAAE,IAAI,CAAA,EAGzFE,EAAe,IAAM,CACzBrB,EAAK,SAAUK,EAAQ,MAAOC,EAAM,KAAK,EAGzCD,EAAQ,MAAQ,OAChBC,EAAM,MAAQ,EAAC"}

package/dist/ElListItem.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElListItem.vue.cjs2.js","sources":["../../src/ElListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ElTag, { ElTagColor } from './ElTag.vue';\nimport ElIcon, { ElIconProps } from './ElIcon.vue';\nimport ElInputCheckbox from './forms/ElInputCheckbox.vue';\nimport ElTextCell, { ElTextCellColor } from '@/ElTextCell.vue';\nimport ElAvatar from './ElAvatar.vue';\nimport { ElTextCellStyle } from './ElTextCell.vue';\n\nexport interface ElListItemProps {\n  avatar?: { picture: string; label?: string } | { picture?: string; label: string };\n  time?: string;\n  mainText: {\n    label: string;\n    style?: ElTextCellStyle;\n    color?: ElTextCellColor;\n  };\n  secondaryRow?: string;\n  tertiaryRow?: string;\n  trailingIcon?: ElIconProps;\n  amount?: string;\n  tags?: {\n    key?: string;\n    text: string;\n    color?: ElTagColor;\n  }[];\n  modelValue?: boolean;\n  color: 'primary' | 'secondary';\n}\n\nconst props = defineProps<ElListItemProps>();\n\nconst $emits = defineEmits<{\n  (e: 'update:modelValue', checked: boolean | undefined): void;\n  (e: 'click', payload: MouseEvent): void;\n}>();\n</script>\n<template>\n  <li\n    class=\"px-4 pt-4 flex flex-row w-full active:bg-neutral-pressed transition-colors min-w-80\"\n    :class=\"{\n      'bg-primary-light-active': props.color === 'primary' && props.modelValue,\n      'bg-secondary-light-active': props.color === 'secondary' && props.modelValue,\n      'bg-neutral-surface': !props.modelValue,\n    }\"\n    @click=\"\n      e => {\n        $emit('click', e);\n        props.modelValue !== undefined && $emit('update:modelValue', !props.modelValue);\n      }\n    \"\n  >\n    <div v-if=\"props.modelValue !== undefined\" class=\"mr-5 pb-4 flex flex-col items-center justify-center\">\n      <ElInputCheckbox :color=\"props.color\" :model-value=\"props.modelValue\" />\n    </div>\n    <div class=\"flex flex-col flex-grow overflow-x-hidden\">\n      <div class=\"flex flex-row overflow-x-hidden\">\n        <div v-if=\"props.avatar !== undefined\" class=\"mr-3 flex flex-col justify-center\">\n          <ElAvatar :picture=\"props.avatar.picture\" :label=\"props.avatar.label\" size=\"sm\" />\n        </div>\n        <div class=\"flex flex-row justify-between flex-grow overflow-x-hidden gap-4\">\n          <div class=\"flex flex-col gap-1 text-sm flex-grow overflow-x-hidden\">\n            <span v-if=\"props.mainText\" class=\"whitespace-nowrap text-ellipsis overflow-x-hidden w-full\">\n              <ElTextCell v-bind=\"props.mainText\" />\n            </span>\n            <span v-if=\"props.secondaryRow\" class=\"text-neutral-darker whitespace-nowrap text-ellipsis overflow-hidden w-full\">{{\n              props.secondaryRow\n            }}</span>\n            <span v-if=\"props.tertiaryRow\" class=\"text-neutral-lighter whitespace-nowrap text-ellipsis overflow-hidden w-full\">{{\n              props.tertiaryRow\n            }}</span>\n          </div>\n          <div class=\"text-right gap-1.5 flex flex-col flex-shrink-0\">\n            <span v-if=\"props.time\" class=\"text-neutral-darker text-xs\">{{ props.time }}</span>\n            <div class=\"flex flex-row gap-2 justify-end\">\n              <span v-if=\"props.amount\" class=\"text-sm font-semibold\">{{ props.amount }}</span>\n              <div v-if=\"props.trailingIcon\" class=\"size-4\">\n                <ElIcon v-bind=\"props.trailingIcon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div v-if=\"props.tags && props.tags.length > 0\" class=\"flex flex-row flex-wrap justify-end gap-2 mt-3\">\n        <ElTag v-for=\"tag in props.tags\" :key=\"tag.key ?? tag.text\" :color=\"tag.color\" :text=\"tag.text\" />\n      </div>\n      <div class=\"h-4\" />\n      <div v-if=\"props.modelValue === undefined\" class=\"border-b border-b-neutral-surface\" />\n    </div>\n  </li>\n</template>\n"],"names":["props","__props"],"mappings":"2hDA6BA,MAAMA,EAAQC"}
+{"version":3,"file":"ElListItem.vue.cjs2.js","sources":["../src/ElListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ElTag, { ElTagColor } from './ElTag.vue';\nimport ElIcon, { ElIconProps } from './ElIcon.vue';\nimport ElInputCheckbox from './forms/ElInputCheckbox.vue';\nimport ElTextCell, { ElTextCellColor } from '@/ElTextCell.vue';\nimport ElAvatar from './ElAvatar.vue';\nimport { ElTextCellStyle } from './ElTextCell.vue';\n\nexport interface ElListItemProps {\n  avatar?: { picture: string; label?: string } | { picture?: string; label: string };\n  time?: string;\n  mainText: {\n    label: string;\n    style?: ElTextCellStyle;\n    color?: ElTextCellColor;\n  };\n  secondaryRow?: string;\n  tertiaryRow?: string;\n  trailingIcon?: ElIconProps;\n  amount?: string;\n  tags?: {\n    key?: string;\n    text: string;\n    color?: ElTagColor;\n  }[];\n  modelValue?: boolean;\n  color: 'primary' | 'secondary';\n}\n\nconst props = defineProps<ElListItemProps>();\n\nconst $emits = defineEmits<{\n  (e: 'update:modelValue', checked: boolean | undefined): void;\n  (e: 'click', payload: MouseEvent): void;\n}>();\n</script>\n<template>\n  <li\n    class=\"px-4 pt-4 flex flex-row w-full active:bg-neutral-pressed transition-colors min-w-80\"\n    :class=\"{\n      'bg-primary-light-active': props.color === 'primary' && props.modelValue,\n      'bg-secondary-light-active': props.color === 'secondary' && props.modelValue,\n      'bg-neutral-surface': !props.modelValue,\n    }\"\n    @click=\"\n      e => {\n        $emit('click', e);\n        props.modelValue !== undefined && $emit('update:modelValue', !props.modelValue);\n      }\n    \"\n  >\n    <div v-if=\"props.modelValue !== undefined\" class=\"mr-5 pb-4 flex flex-col items-center justify-center\">\n      <ElInputCheckbox :color=\"props.color\" :model-value=\"props.modelValue\" />\n    </div>\n    <div class=\"flex flex-col flex-grow overflow-x-hidden\">\n      <div class=\"flex flex-row overflow-x-hidden\">\n        <div v-if=\"props.avatar !== undefined\" class=\"mr-3 flex flex-col justify-center\">\n          <ElAvatar :picture=\"props.avatar.picture\" :label=\"props.avatar.label\" size=\"sm\" />\n        </div>\n        <div class=\"flex flex-row justify-between flex-grow overflow-x-hidden gap-4\">\n          <div class=\"flex flex-col gap-1 text-sm flex-grow overflow-x-hidden\">\n            <span v-if=\"props.mainText\" class=\"whitespace-nowrap text-ellipsis overflow-x-hidden w-full\">\n              <ElTextCell v-bind=\"props.mainText\" />\n            </span>\n            <span v-if=\"props.secondaryRow\" class=\"text-neutral-darker whitespace-nowrap text-ellipsis overflow-hidden w-full\">{{\n              props.secondaryRow\n            }}</span>\n            <span v-if=\"props.tertiaryRow\" class=\"text-neutral-lighter whitespace-nowrap text-ellipsis overflow-hidden w-full\">{{\n              props.tertiaryRow\n            }}</span>\n          </div>\n          <div class=\"text-right gap-1.5 flex flex-col flex-shrink-0\">\n            <span v-if=\"props.time\" class=\"text-neutral-darker text-xs\">{{ props.time }}</span>\n            <div class=\"flex flex-row gap-2 justify-end\">\n              <span v-if=\"props.amount\" class=\"text-sm font-semibold\">{{ props.amount }}</span>\n              <div v-if=\"props.trailingIcon\" class=\"size-4\">\n                <ElIcon v-bind=\"props.trailingIcon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div v-if=\"props.tags && props.tags.length > 0\" class=\"flex flex-row flex-wrap justify-end gap-2 mt-3\">\n        <ElTag v-for=\"tag in props.tags\" :key=\"tag.key ?? tag.text\" :color=\"tag.color\" :text=\"tag.text\" />\n      </div>\n      <div class=\"h-4\" />\n      <div v-if=\"props.modelValue === undefined\" class=\"border-b border-b-neutral-surface\" />\n    </div>\n  </li>\n</template>\n"],"names":["props","__props"],"mappings":"2hDA6BA,MAAMA,EAAQC"}

package/dist/ElListItem.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElListItem.vue.esm2.js","sources":["../../src/ElListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ElTag, { ElTagColor } from './ElTag.vue';\nimport ElIcon, { ElIconProps } from './ElIcon.vue';\nimport ElInputCheckbox from './forms/ElInputCheckbox.vue';\nimport ElTextCell, { ElTextCellColor } from '@/ElTextCell.vue';\nimport ElAvatar from './ElAvatar.vue';\nimport { ElTextCellStyle } from './ElTextCell.vue';\n\nexport interface ElListItemProps {\n  avatar?: { picture: string; label?: string } | { picture?: string; label: string };\n  time?: string;\n  mainText: {\n    label: string;\n    style?: ElTextCellStyle;\n    color?: ElTextCellColor;\n  };\n  secondaryRow?: string;\n  tertiaryRow?: string;\n  trailingIcon?: ElIconProps;\n  amount?: string;\n  tags?: {\n    key?: string;\n    text: string;\n    color?: ElTagColor;\n  }[];\n  modelValue?: boolean;\n  color: 'primary' | 'secondary';\n}\n\nconst props = defineProps<ElListItemProps>();\n\nconst $emits = defineEmits<{\n  (e: 'update:modelValue', checked: boolean | undefined): void;\n  (e: 'click', payload: MouseEvent): void;\n}>();\n</script>\n<template>\n  <li\n    class=\"px-4 pt-4 flex flex-row w-full active:bg-neutral-pressed transition-colors min-w-80\"\n    :class=\"{\n      'bg-primary-light-active': props.color === 'primary' && props.modelValue,\n      'bg-secondary-light-active': props.color === 'secondary' && props.modelValue,\n      'bg-neutral-surface': !props.modelValue,\n    }\"\n    @click=\"\n      e => {\n        $emit('click', e);\n        props.modelValue !== undefined && $emit('update:modelValue', !props.modelValue);\n      }\n    \"\n  >\n    <div v-if=\"props.modelValue !== undefined\" class=\"mr-5 pb-4 flex flex-col items-center justify-center\">\n      <ElInputCheckbox :color=\"props.color\" :model-value=\"props.modelValue\" />\n    </div>\n    <div class=\"flex flex-col flex-grow overflow-x-hidden\">\n      <div class=\"flex flex-row overflow-x-hidden\">\n        <div v-if=\"props.avatar !== undefined\" class=\"mr-3 flex flex-col justify-center\">\n          <ElAvatar :picture=\"props.avatar.picture\" :label=\"props.avatar.label\" size=\"sm\" />\n        </div>\n        <div class=\"flex flex-row justify-between flex-grow overflow-x-hidden gap-4\">\n          <div class=\"flex flex-col gap-1 text-sm flex-grow overflow-x-hidden\">\n            <span v-if=\"props.mainText\" class=\"whitespace-nowrap text-ellipsis overflow-x-hidden w-full\">\n              <ElTextCell v-bind=\"props.mainText\" />\n            </span>\n            <span v-if=\"props.secondaryRow\" class=\"text-neutral-darker whitespace-nowrap text-ellipsis overflow-hidden w-full\">{{\n              props.secondaryRow\n            }}</span>\n            <span v-if=\"props.tertiaryRow\" class=\"text-neutral-lighter whitespace-nowrap text-ellipsis overflow-hidden w-full\">{{\n              props.tertiaryRow\n            }}</span>\n          </div>\n          <div class=\"text-right gap-1.5 flex flex-col flex-shrink-0\">\n            <span v-if=\"props.time\" class=\"text-neutral-darker text-xs\">{{ props.time }}</span>\n            <div class=\"flex flex-row gap-2 justify-end\">\n              <span v-if=\"props.amount\" class=\"text-sm font-semibold\">{{ props.amount }}</span>\n              <div v-if=\"props.trailingIcon\" class=\"size-4\">\n                <ElIcon v-bind=\"props.trailingIcon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div v-if=\"props.tags && props.tags.length > 0\" class=\"flex flex-row flex-wrap justify-end gap-2 mt-3\">\n        <ElTag v-for=\"tag in props.tags\" :key=\"tag.key ?? tag.text\" :color=\"tag.color\" :text=\"tag.text\" />\n      </div>\n      <div class=\"h-4\" />\n      <div v-if=\"props.modelValue === undefined\" class=\"border-b border-b-neutral-surface\" />\n    </div>\n  </li>\n</template>\n"],"names":["props","__props"],"mappings":"upDA6BA,MAAMA,EAAQC"}
+{"version":3,"file":"ElListItem.vue.esm2.js","sources":["../src/ElListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ElTag, { ElTagColor } from './ElTag.vue';\nimport ElIcon, { ElIconProps } from './ElIcon.vue';\nimport ElInputCheckbox from './forms/ElInputCheckbox.vue';\nimport ElTextCell, { ElTextCellColor } from '@/ElTextCell.vue';\nimport ElAvatar from './ElAvatar.vue';\nimport { ElTextCellStyle } from './ElTextCell.vue';\n\nexport interface ElListItemProps {\n  avatar?: { picture: string; label?: string } | { picture?: string; label: string };\n  time?: string;\n  mainText: {\n    label: string;\n    style?: ElTextCellStyle;\n    color?: ElTextCellColor;\n  };\n  secondaryRow?: string;\n  tertiaryRow?: string;\n  trailingIcon?: ElIconProps;\n  amount?: string;\n  tags?: {\n    key?: string;\n    text: string;\n    color?: ElTagColor;\n  }[];\n  modelValue?: boolean;\n  color: 'primary' | 'secondary';\n}\n\nconst props = defineProps<ElListItemProps>();\n\nconst $emits = defineEmits<{\n  (e: 'update:modelValue', checked: boolean | undefined): void;\n  (e: 'click', payload: MouseEvent): void;\n}>();\n</script>\n<template>\n  <li\n    class=\"px-4 pt-4 flex flex-row w-full active:bg-neutral-pressed transition-colors min-w-80\"\n    :class=\"{\n      'bg-primary-light-active': props.color === 'primary' && props.modelValue,\n      'bg-secondary-light-active': props.color === 'secondary' && props.modelValue,\n      'bg-neutral-surface': !props.modelValue,\n    }\"\n    @click=\"\n      e => {\n        $emit('click', e);\n        props.modelValue !== undefined && $emit('update:modelValue', !props.modelValue);\n      }\n    \"\n  >\n    <div v-if=\"props.modelValue !== undefined\" class=\"mr-5 pb-4 flex flex-col items-center justify-center\">\n      <ElInputCheckbox :color=\"props.color\" :model-value=\"props.modelValue\" />\n    </div>\n    <div class=\"flex flex-col flex-grow overflow-x-hidden\">\n      <div class=\"flex flex-row overflow-x-hidden\">\n        <div v-if=\"props.avatar !== undefined\" class=\"mr-3 flex flex-col justify-center\">\n          <ElAvatar :picture=\"props.avatar.picture\" :label=\"props.avatar.label\" size=\"sm\" />\n        </div>\n        <div class=\"flex flex-row justify-between flex-grow overflow-x-hidden gap-4\">\n          <div class=\"flex flex-col gap-1 text-sm flex-grow overflow-x-hidden\">\n            <span v-if=\"props.mainText\" class=\"whitespace-nowrap text-ellipsis overflow-x-hidden w-full\">\n              <ElTextCell v-bind=\"props.mainText\" />\n            </span>\n            <span v-if=\"props.secondaryRow\" class=\"text-neutral-darker whitespace-nowrap text-ellipsis overflow-hidden w-full\">{{\n              props.secondaryRow\n            }}</span>\n            <span v-if=\"props.tertiaryRow\" class=\"text-neutral-lighter whitespace-nowrap text-ellipsis overflow-hidden w-full\">{{\n              props.tertiaryRow\n            }}</span>\n          </div>\n          <div class=\"text-right gap-1.5 flex flex-col flex-shrink-0\">\n            <span v-if=\"props.time\" class=\"text-neutral-darker text-xs\">{{ props.time }}</span>\n            <div class=\"flex flex-row gap-2 justify-end\">\n              <span v-if=\"props.amount\" class=\"text-sm font-semibold\">{{ props.amount }}</span>\n              <div v-if=\"props.trailingIcon\" class=\"size-4\">\n                <ElIcon v-bind=\"props.trailingIcon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div v-if=\"props.tags && props.tags.length > 0\" class=\"flex flex-row flex-wrap justify-end gap-2 mt-3\">\n        <ElTag v-for=\"tag in props.tags\" :key=\"tag.key ?? tag.text\" :color=\"tag.color\" :text=\"tag.text\" />\n      </div>\n      <div class=\"h-4\" />\n      <div v-if=\"props.modelValue === undefined\" class=\"border-b border-b-neutral-surface\" />\n    </div>\n  </li>\n</template>\n"],"names":["props","__props"],"mappings":"upDA6BA,MAAMA,EAAQC"}

package/dist/ElLogo.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElLogo.vue.cjs2.js","sources":["../../src/ElLogo.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elLogoColors = ['two-tone', 'white', 'dark'] as const;\nexport type ElLogoColors = (typeof elLogoColors)[number];\nexport const elLogoVariants = ['full', 'compact', 'basic'] as const;\nexport type ElLogoVariants = (typeof elLogoVariants)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport heartTwoTone from '@/assets/logo/heart-two-tone.svg';\nimport heartWhite from '@/assets/logo/heart-white.svg';\nimport heartDark from '@/assets/logo/heart-dark.svg';\nimport eltyTwoTone from '@/assets/logo/elty-two-tone.svg';\nimport eltyWhite from '@/assets/logo/elty-white.svg';\nimport eltyDark from '@/assets/logo/elty-dark.svg';\nimport davinciWhite from '@/assets/logo/davinci-white.svg';\nimport davinciDark from '@/assets/logo/davinci-dark.svg';\n\nwithDefaults(\n  defineProps<{\n    color?: ElLogoColors;\n    variant?: ElLogoVariants;\n  }>(),\n  {\n    color: 'two-tone',\n    variant: 'full',\n  },\n);\n</script>\n\n<template>\n  <div class=\"flex items-start justify-center gap-[2px]\">\n    <img\n      :src=\"\n        {\n          'two-tone': heartTwoTone,\n          white: heartWhite,\n          dark: heartDark,\n        }[color]\n      \"\n      :class=\"\n        {\n          full: 'w-[37px] h-[20px]',\n          compact: 'w-[37px] h-[20px]',\n          basic: 'w-[50px] h-[28px]',\n        }[variant]\n      \"\n      alt=\"Heart\"\n    />\n    <img\n      :src=\"\n        {\n          'two-tone': eltyTwoTone,\n          white: eltyWhite,\n          dark: eltyDark,\n        }[color]\n      \"\n      :class=\"\n        {\n          full: 'w-[55px] h-[28px]',\n          compact: 'w-[55px] h-[28px]',\n          basic: 'hidden',\n        }[variant]\n      \"\n      alt=\"Elty\"\n    />\n    <img\n      :src=\"\n        {\n          'two-tone': davinciDark,\n          white: davinciWhite,\n          dark: davinciDark,\n        }[color]\n      \"\n      :class=\"\n        {\n          full: 'w-[100px] h-[20px]',\n          compact: 'hidden',\n          basic: 'hidden',\n        }[variant]\n      \"\n      alt=\"Davinci\"\n    />\n  </div>\n</template>\n"],"names":["elLogoColors","elLogoVariants"],"mappings":"2mBACaA,EAAe,CAAC,WAAY,QAAS,MAAM,EAE3CC,EAAiB,CAAC,OAAQ,UAAW,OAAO"}
+{"version":3,"file":"ElLogo.vue.cjs2.js","sources":["../src/ElLogo.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elLogoColors = ['two-tone', 'white', 'dark'] as const;\nexport type ElLogoColors = (typeof elLogoColors)[number];\nexport const elLogoVariants = ['full', 'compact', 'basic'] as const;\nexport type ElLogoVariants = (typeof elLogoVariants)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport heartTwoTone from '@/assets/logo/heart-two-tone.svg';\nimport heartWhite from '@/assets/logo/heart-white.svg';\nimport heartDark from '@/assets/logo/heart-dark.svg';\nimport eltyTwoTone from '@/assets/logo/elty-two-tone.svg';\nimport eltyWhite from '@/assets/logo/elty-white.svg';\nimport eltyDark from '@/assets/logo/elty-dark.svg';\nimport davinciWhite from '@/assets/logo/davinci-white.svg';\nimport davinciDark from '@/assets/logo/davinci-dark.svg';\n\nwithDefaults(\n  defineProps<{\n    color?: ElLogoColors;\n    variant?: ElLogoVariants;\n  }>(),\n  {\n    color: 'two-tone',\n    variant: 'full',\n  },\n);\n</script>\n\n<template>\n  <div class=\"flex items-start justify-center gap-[2px]\">\n    <img\n      :src=\"\n        {\n          'two-tone': heartTwoTone,\n          white: heartWhite,\n          dark: heartDark,\n        }[color]\n      \"\n      :class=\"\n        {\n          full: 'w-[37px] h-[20px]',\n          compact: 'w-[37px] h-[20px]',\n          basic: 'w-[50px] h-[28px]',\n        }[variant]\n      \"\n      alt=\"Heart\"\n    />\n    <img\n      :src=\"\n        {\n          'two-tone': eltyTwoTone,\n          white: eltyWhite,\n          dark: eltyDark,\n        }[color]\n      \"\n      :class=\"\n        {\n          full: 'w-[55px] h-[28px]',\n          compact: 'w-[55px] h-[28px]',\n          basic: 'hidden',\n        }[variant]\n      \"\n      alt=\"Elty\"\n    />\n    <img\n      :src=\"\n        {\n          'two-tone': davinciDark,\n          white: davinciWhite,\n          dark: davinciDark,\n        }[color]\n      \"\n      :class=\"\n        {\n          full: 'w-[100px] h-[20px]',\n          compact: 'hidden',\n          basic: 'hidden',\n        }[variant]\n      \"\n      alt=\"Davinci\"\n    />\n  </div>\n</template>\n"],"names":["elLogoColors","elLogoVariants"],"mappings":"2mBACaA,EAAe,CAAC,WAAY,QAAS,MAAM,EAE3CC,EAAiB,CAAC,OAAQ,UAAW,OAAO"}

package/dist/ElLogo.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElLogo.vue.esm2.js","sources":["../../src/ElLogo.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elLogoColors = ['two-tone', 'white', 'dark'] as const;\nexport type ElLogoColors = (typeof elLogoColors)[number];\nexport const elLogoVariants = ['full', 'compact', 'basic'] as const;\nexport type ElLogoVariants = (typeof elLogoVariants)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport heartTwoTone from '@/assets/logo/heart-two-tone.svg';\nimport heartWhite from '@/assets/logo/heart-white.svg';\nimport heartDark from '@/assets/logo/heart-dark.svg';\nimport eltyTwoTone from '@/assets/logo/elty-two-tone.svg';\nimport eltyWhite from '@/assets/logo/elty-white.svg';\nimport eltyDark from '@/assets/logo/elty-dark.svg';\nimport davinciWhite from '@/assets/logo/davinci-white.svg';\nimport davinciDark from '@/assets/logo/davinci-dark.svg';\n\nwithDefaults(\n  defineProps<{\n    color?: ElLogoColors;\n    variant?: ElLogoVariants;\n  }>(),\n  {\n    color: 'two-tone',\n    variant: 'full',\n  },\n);\n</script>\n\n<template>\n  <div class=\"flex items-start justify-center gap-[2px]\">\n    <img\n      :src=\"\n        {\n          'two-tone': heartTwoTone,\n          white: heartWhite,\n          dark: heartDark,\n        }[color]\n      \"\n      :class=\"\n        {\n          full: 'w-[37px] h-[20px]',\n          compact: 'w-[37px] h-[20px]',\n          basic: 'w-[50px] h-[28px]',\n        }[variant]\n      \"\n      alt=\"Heart\"\n    />\n    <img\n      :src=\"\n        {\n          'two-tone': eltyTwoTone,\n          white: eltyWhite,\n          dark: eltyDark,\n        }[color]\n      \"\n      :class=\"\n        {\n          full: 'w-[55px] h-[28px]',\n          compact: 'w-[55px] h-[28px]',\n          basic: 'hidden',\n        }[variant]\n      \"\n      alt=\"Elty\"\n    />\n    <img\n      :src=\"\n        {\n          'two-tone': davinciDark,\n          white: davinciWhite,\n          dark: davinciDark,\n        }[color]\n      \"\n      :class=\"\n        {\n          full: 'w-[100px] h-[20px]',\n          compact: 'hidden',\n          basic: 'hidden',\n        }[variant]\n      \"\n      alt=\"Davinci\"\n    />\n  </div>\n</template>\n"],"names":["elLogoColors","elLogoVariants"],"mappings":"koBACaA,EAAe,CAAC,WAAY,QAAS,MAAM,EAE3CC,EAAiB,CAAC,OAAQ,UAAW,OAAO"}
+{"version":3,"file":"ElLogo.vue.esm2.js","sources":["../src/ElLogo.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elLogoColors = ['two-tone', 'white', 'dark'] as const;\nexport type ElLogoColors = (typeof elLogoColors)[number];\nexport const elLogoVariants = ['full', 'compact', 'basic'] as const;\nexport type ElLogoVariants = (typeof elLogoVariants)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport heartTwoTone from '@/assets/logo/heart-two-tone.svg';\nimport heartWhite from '@/assets/logo/heart-white.svg';\nimport heartDark from '@/assets/logo/heart-dark.svg';\nimport eltyTwoTone from '@/assets/logo/elty-two-tone.svg';\nimport eltyWhite from '@/assets/logo/elty-white.svg';\nimport eltyDark from '@/assets/logo/elty-dark.svg';\nimport davinciWhite from '@/assets/logo/davinci-white.svg';\nimport davinciDark from '@/assets/logo/davinci-dark.svg';\n\nwithDefaults(\n  defineProps<{\n    color?: ElLogoColors;\n    variant?: ElLogoVariants;\n  }>(),\n  {\n    color: 'two-tone',\n    variant: 'full',\n  },\n);\n</script>\n\n<template>\n  <div class=\"flex items-start justify-center gap-[2px]\">\n    <img\n      :src=\"\n        {\n          'two-tone': heartTwoTone,\n          white: heartWhite,\n          dark: heartDark,\n        }[color]\n      \"\n      :class=\"\n        {\n          full: 'w-[37px] h-[20px]',\n          compact: 'w-[37px] h-[20px]',\n          basic: 'w-[50px] h-[28px]',\n        }[variant]\n      \"\n      alt=\"Heart\"\n    />\n    <img\n      :src=\"\n        {\n          'two-tone': eltyTwoTone,\n          white: eltyWhite,\n          dark: eltyDark,\n        }[color]\n      \"\n      :class=\"\n        {\n          full: 'w-[55px] h-[28px]',\n          compact: 'w-[55px] h-[28px]',\n          basic: 'hidden',\n        }[variant]\n      \"\n      alt=\"Elty\"\n    />\n    <img\n      :src=\"\n        {\n          'two-tone': davinciDark,\n          white: davinciWhite,\n          dark: davinciDark,\n        }[color]\n      \"\n      :class=\"\n        {\n          full: 'w-[100px] h-[20px]',\n          compact: 'hidden',\n          basic: 'hidden',\n        }[variant]\n      \"\n      alt=\"Davinci\"\n    />\n  </div>\n</template>\n"],"names":["elLogoColors","elLogoVariants"],"mappings":"koBACaA,EAAe,CAAC,WAAY,QAAS,MAAM,EAE3CC,EAAiB,CAAC,OAAQ,UAAW,OAAO"}

package/dist/ElModal.vue.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("../node_modules/@vueuse/core/index.cjs.js"),w=require("../node_modules/@vueuse/components/index.cjs.js"),u=require("./ElButton.vue.cjs2.js"),z=require("./ElIcon.vue.cjs2.js"),C=require("./ElIconButton.vue.cjs2.js"),h=require("./_CustomTransition.vue.cjs2.js"),E={key:0,class:"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0"},S={class:"fixed inset-0 transition-opacity"},V={class:"flex items-center justify-between gap-2 flex-1 overflow-hidden"},N={class:"text-xl font-semibold truncate flex-1"},M={key:0,class:"text-base font-normal text-wrap break-words"},s=["xs","m","l","xl"],v={xs:360,m:576,l:768,xl:1280},A=["primary","secondary","error"],O=e.defineComponent({__name:"ElModal",props:e.mergeModels({size:{default:"m"},color:{default:"primary"},headerIcon:{},title:{default:void 0},description:{default:void 0},primaryAction:{},secondaryAction:{default:void 0},tertiaryAction:{default:void 0}},{isOpen:{default:!1,required:!0,type:Boolean},isOpenModifiers:{}}),emits:e.mergeModels(["closed"],["update:isOpen"]),setup(d,{emit:y}){const n=e.useModel(d,"isOpen"),x=y,i=d,c=()=>n.value=!1,p=e.ref(null),l=e.ref(null),t=e.computed(()=>i.color==="error"),{arrivedState:m}=a.useScroll(l),{height:k}=a.useElementSize(l),{width:_}=a.useWindowSize(),f=e.computed(()=>l.value&&l.value.scrollHeight>k.value),b=a.useScrollLock(document.body),o=e.computed(()=>{for(let r=s.indexOf(i.size);r>=0;r--)if(_.value>=v[s[r]])return s[r];return i.size}),g=r=>{r.target===p.value&&c()};return e.watch(()=>n.value,r=>{b.value=r,r||x("closed")}),a.onKeyStroke("Escape",r=>{r.preventDefault(),c()}),(r,B)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(h.default,{name:"fade"},{default:e.withCtx(()=>[n.value?(e.openBlock(),e.createElementBlock("div",E,[e.createElementVNode("div",S,[e.createElementVNode("div",{ref_key:"backdrop",ref:p,class:"absolute inset-0 bg-gray-500 opacity-75"},null,512)]),e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker",{"w-[360px]":o.value==="xs","w-[576px]":o.value==="m","w-[768px]":o.value==="l","w-[1280px]":o.value==="xl"}])},[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center justify-between gap-2",{"px-4":o.value==="xs","px-8":o.value!=="xs"}])},[e.createElementVNode("div",V,[e.createElementVNode("div",{class:e.normalizeClass([{"text-error bg-error-light-active":t.value,"text-primary bg-neutral-surface-raised":r.color==="primary","text-secondary bg-neutral-surface-raised":r.color==="secondary"},"!h-8 !w-8 rounded-full"])},[e.createVNode(z.default,e.mergeProps(t.value?{name:"ExclamationCircleIcon"}:r.headerIcon,{class:"p-1"}),null,16)],2),e.createElementVNode("div",N,e.toDisplayString(r.title),1)]),e.createVNode(C.default,{icon:{name:"XMarkIcon"},error:t.value,onClick:c},null,8,["error"])],2),e.createElementVNode("div",{ref_key:"modalBody",ref:l,class:e.normalizeClass(["flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden",{"px-4":o.value==="xs","px-8":o.value!=="xs","border-t":f.value&&!e.unref(m).top,"border-b":f.value&&!e.unref(m).bottom}])},[r.description?(e.openBlock(),e.createElementBlock("p",M,e.toDisplayString(r.description),1)):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"default")],2),r.primaryAction||r.secondaryAction||r.tertiaryAction?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items-center gap-4",{"flex-col-reverse px-4":o.value==="xs","flex-row px-8":o.value!=="xs"}])},[r.tertiaryAction?(e.openBlock(),e.createBlock(u.default,e.mergeProps({key:0},r.tertiaryAction,{variant:"tertiary",class:{"w-full":o.value==="xs"},size:o.value==="xs"?"l":"base",error:t.value}),null,16,["class","size","error"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["flex gap-4",{"flex-col-reverse w-full":o.value==="xs","flex-row ml-auto":o.value!=="xs"}])},[r.secondaryAction?(e.openBlock(),e.createBlock(u.default,e.mergeProps({key:0},r.secondaryAction,{variant:"secondary",size:o.value==="xs"?"l":"base",error:t.value}),null,16,["size","error"])):e.createCommentVNode("",!0),r.primaryAction?(e.openBlock(),e.createBlock(u.default,e.mergeProps({key:1},r.primaryAction,{variant:"primary",size:o.value==="xs"?"l":"base",error:t.value}),null,16,["size","error"])):e.createCommentVNode("",!0)],2)],2)):e.createCommentVNode("",!0)],2)),[[e.unref(w.VOnClickOutside),g]])])):e.createCommentVNode("",!0)]),_:3})]))}});exports.default=O;exports.elModalColors=A;exports.elModalSizes=s;exports.elModalSizesBreakpoints=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("./node_modules/@vueuse/core/index.cjs.js"),w=require("./node_modules/@vueuse/components/index.cjs.js"),u=require("./ElButton.vue.cjs2.js"),z=require("./ElIcon.vue.cjs2.js"),C=require("./ElIconButton.vue.cjs2.js"),h=require("./_CustomTransition.vue.cjs2.js"),E={key:0,class:"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0"},S={class:"fixed inset-0 transition-opacity"},V={class:"flex items-center justify-between gap-2 flex-1 overflow-hidden"},N={class:"text-xl font-semibold truncate flex-1"},M={key:0,class:"text-base font-normal text-wrap break-words"},s=["xs","m","l","xl"],v={xs:360,m:576,l:768,xl:1280},A=["primary","secondary","error"],O=e.defineComponent({__name:"ElModal",props:e.mergeModels({size:{default:"m"},color:{default:"primary"},headerIcon:{},title:{default:void 0},description:{default:void 0},primaryAction:{},secondaryAction:{default:void 0},tertiaryAction:{default:void 0}},{isOpen:{default:!1,required:!0,type:Boolean},isOpenModifiers:{}}),emits:e.mergeModels(["closed"],["update:isOpen"]),setup(d,{emit:y}){const n=e.useModel(d,"isOpen"),x=y,i=d,c=()=>n.value=!1,p=e.ref(null),l=e.ref(null),t=e.computed(()=>i.color==="error"),{arrivedState:m}=a.useScroll(l),{height:k}=a.useElementSize(l),{width:_}=a.useWindowSize(),f=e.computed(()=>l.value&&l.value.scrollHeight>k.value),b=a.useScrollLock(document.body),o=e.computed(()=>{for(let r=s.indexOf(i.size);r>=0;r--)if(_.value>=v[s[r]])return s[r];return i.size}),g=r=>{r.target===p.value&&c()};return e.watch(()=>n.value,r=>{b.value=r,r||x("closed")}),a.onKeyStroke("Escape",r=>{r.preventDefault(),c()}),(r,B)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(h.default,{name:"fade"},{default:e.withCtx(()=>[n.value?(e.openBlock(),e.createElementBlock("div",E,[e.createElementVNode("div",S,[e.createElementVNode("div",{ref_key:"backdrop",ref:p,class:"absolute inset-0 bg-gray-500 opacity-75"},null,512)]),e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-7 py-8 z-50 bg-neutral-surface shadow-md rounded-md border border-neutral-surface max-h-[80%] text-neutral-darker",{"w-[360px]":o.value==="xs","w-[576px]":o.value==="m","w-[768px]":o.value==="l","w-[1280px]":o.value==="xl"}])},[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center justify-between gap-2",{"px-4":o.value==="xs","px-8":o.value!=="xs"}])},[e.createElementVNode("div",V,[e.createElementVNode("div",{class:e.normalizeClass([{"text-error bg-error-light-active":t.value,"text-primary bg-neutral-surface-raised":r.color==="primary","text-secondary bg-neutral-surface-raised":r.color==="secondary"},"!h-8 !w-8 rounded-full"])},[e.createVNode(z.default,e.mergeProps(t.value?{name:"ExclamationCircleIcon"}:r.headerIcon,{class:"p-1"}),null,16)],2),e.createElementVNode("div",N,e.toDisplayString(r.title),1)]),e.createVNode(C.default,{icon:{name:"XMarkIcon"},error:t.value,onClick:c},null,8,["error"])],2),e.createElementVNode("div",{ref_key:"modalBody",ref:l,class:e.normalizeClass(["flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden",{"px-4":o.value==="xs","px-8":o.value!=="xs","border-t":f.value&&!e.unref(m).top,"border-b":f.value&&!e.unref(m).bottom}])},[r.description?(e.openBlock(),e.createElementBlock("p",M,e.toDisplayString(r.description),1)):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"default")],2),r.primaryAction||r.secondaryAction||r.tertiaryAction?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex items-center gap-4",{"flex-col-reverse px-4":o.value==="xs","flex-row px-8":o.value!=="xs"}])},[r.tertiaryAction?(e.openBlock(),e.createBlock(u.default,e.mergeProps({key:0},r.tertiaryAction,{variant:"tertiary",class:{"w-full":o.value==="xs"},size:o.value==="xs"?"l":"base",error:t.value}),null,16,["class","size","error"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["flex gap-4",{"flex-col-reverse w-full":o.value==="xs","flex-row ml-auto":o.value!=="xs"}])},[r.secondaryAction?(e.openBlock(),e.createBlock(u.default,e.mergeProps({key:0},r.secondaryAction,{variant:"secondary",size:o.value==="xs"?"l":"base",error:t.value}),null,16,["size","error"])):e.createCommentVNode("",!0),r.primaryAction?(e.openBlock(),e.createBlock(u.default,e.mergeProps({key:1},r.primaryAction,{variant:"primary",size:o.value==="xs"?"l":"base",error:t.value}),null,16,["size","error"])):e.createCommentVNode("",!0)],2)],2)):e.createCommentVNode("",!0)],2)),[[e.unref(w.VOnClickOutside),g]])])):e.createCommentVNode("",!0)]),_:3})]))}});exports.default=O;exports.elModalColors=A;exports.elModalSizes=s;exports.elModalSizesBreakpoints=v;
 //# sourceMappingURL=ElModal.vue.cjs2.js.map