@davincihealthcare/elty-design-system-vue 1.88.0 → 1.89.0

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

@@ -1 +1 @@
-{"version":3,"file":"ElModal.vue.esm2.js","sources":["../../src/ElModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elModalSizes = ['xs', 'm', 'l', 'xl'] as const;\nexport type ElModalSize = (typeof elModalSizes)[number];\n\nexport const elModalSizesBreakpoints = { xs: 360, m: 576, l: 768, xl: 1280 };\n\nexport const elModalColors = ['primary', 'secondary', 'error'] as const;\nexport type ElModalColor = (typeof elModalColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke, useElementSize, useScroll, useScrollLock, useWindowSize } from '@vueuse/core';\nimport { vOnClickOutside } from '@vueuse/components';\nimport { computed, ref, watch } from 'vue';\n\nimport ElButton from '@/ElButton.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\n\nexport interface ElModalProps {\n  size?: ElModalSize;\n  color?: ElModalColor;\n  headerIcon: InstanceType<typeof ElIcon>['$props'];\n  title: string;\n  description?: string;\n  primaryAction: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n  secondaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n  tertiaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n  isNestedModal?: boolean;\n}\n\nconst isOpen = defineModel('isOpen', {\n  default: false,\n  required: true,\n  type: Boolean,\n});\n\nconst emit = defineEmits<{ (event: 'closed'): void }>();\n\nconst props = withDefaults(defineProps<ElModalProps>(), {\n  size: 'm',\n  color: 'primary',\n  title: undefined,\n  description: undefined,\n  secondaryAction: undefined,\n  tertiaryAction: undefined,\n});\n\nconst closeModal = () => (isOpen.value = false);\n\nconst backdrop = ref<HTMLElement | null>(null);\nconst modalBody = ref<HTMLElement | null>(null);\n\nconst isInErrorState = computed(() => props.color === 'error');\n\nconst { arrivedState } = useScroll(modalBody);\nconst { height } = useElementSize(modalBody);\nconst { width: windowWidth } = useWindowSize();\n\nconst isModalScrollable = computed(() => modalBody.value && modalBody.value.scrollHeight > height.value);\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst responsiveSize = computed(() => {\n  for (let i = elModalSizes.indexOf(props.size); i >= 0; i--) {\n    if (windowWidth.value >= elModalSizesBreakpoints[elModalSizes[i]]) return elModalSizes[i];\n  }\n\n  return props.size;\n});\n\nconst onClickOutside = (e: TouchEvent | MouseEvent) => {\n  // This prevents the modal from closing when clicking on elements that use ElClipToAnchor (eg. ElInputSelect)\n  const isClickOnBackdrop = e.target === backdrop.value;\n\n  if (isClickOnBackdrop) closeModal();\n};\n\nwatch(\n  () => isOpen.value,\n  value => {\n    if (!props.isNestedModal || value) isBodyScrollLocked.value = value;\n    if (!value) emit('closed');\n  },\n);\n\nonKeyStroke('Escape', e => {\n  e.preventDefault();\n  closeModal();\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <CustomTransition name=\"fade\">\n      <div v-if=\"isOpen\" class=\"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0\">\n        <!-- Backdrop -->\n        <div class=\"fixed inset-0 transition-opacity\">\n          <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n        </div>\n\n        <!-- Modal -->\n        <div\n          v-on-click-outside=\"onClickOutside\"\n          class=\"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\"\n          :class=\"{\n            'w-[360px]': responsiveSize === 'xs',\n            'w-[576px]': responsiveSize === 'm',\n            'w-[768px]': responsiveSize === 'l',\n            'w-[1280px]': responsiveSize === 'xl',\n          }\"\n          :data-cy=\"`el-modal-${title?.replaceAll(' ', '')}`\"\n        >\n          <!-- Header -->\n          <div\n            class=\"flex items-center justify-between gap-2\"\n            :class=\"{ 'px-4': responsiveSize === 'xs', 'px-8': responsiveSize !== 'xs' }\"\n          >\n            <div class=\"flex items-center justify-between gap-2 flex-1 overflow-hidden\">\n              <div\n                :class=\"{\n                  'text-error bg-error-light-active': isInErrorState,\n                  'text-primary bg-neutral-surface-raised': color === 'primary',\n                  'text-secondary bg-neutral-surface-raised': color === 'secondary',\n                }\"\n                class=\"!h-8 !w-8 rounded-full\"\n              >\n                <ElIcon v-bind=\"isInErrorState ? { name: 'ExclamationCircleIcon' } : headerIcon\" class=\"p-1\" />\n              </div>\n\n              <div class=\"text-xl font-semibold truncate flex-1\">{{ title }}</div>\n            </div>\n\n            <ElIconButton :icon=\"{ name: 'XMarkIcon' }\" :error=\"isInErrorState\" @click=\"closeModal\" />\n          </div>\n\n          <!-- Body -->\n          <div\n            ref=\"modalBody\"\n            class=\"flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden\"\n            :class=\"{\n              'px-4': responsiveSize === 'xs',\n              'px-8': responsiveSize !== 'xs',\n              'border-t': isModalScrollable && !arrivedState.top,\n              'border-b': isModalScrollable && !arrivedState.bottom,\n            }\"\n          >\n            <p v-if=\"description\" class=\"text-base font-normal text-wrap break-words\">{{ description }}</p>\n\n            <slot name=\"default\"></slot>\n          </div>\n\n          <!-- Footer -->\n          <div\n            v-if=\"primaryAction || secondaryAction || tertiaryAction\"\n            class=\"flex items-center gap-4\"\n            :class=\"{ 'flex-col-reverse px-4': responsiveSize === 'xs', 'flex-row px-8': responsiveSize !== 'xs' }\"\n          >\n            <ElButton\n              v-if=\"tertiaryAction\"\n              v-bind=\"tertiaryAction\"\n              variant=\"tertiary\"\n              :class=\"{ 'w-full': responsiveSize === 'xs' }\"\n              :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n              :error=\"isInErrorState || tertiaryAction.error\"\n            />\n\n            <div\n              class=\"flex gap-4\"\n              :class=\"{ 'flex-col-reverse w-full': responsiveSize === 'xs', 'flex-row ml-auto': responsiveSize !== 'xs' }\"\n            >\n              <ElButton\n                v-if=\"secondaryAction\"\n                v-bind=\"secondaryAction\"\n                variant=\"secondary\"\n                :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n                :error=\"isInErrorState || secondaryAction.error\"\n              />\n\n              <ElButton\n                v-if=\"primaryAction\"\n                v-bind=\"primaryAction\"\n                variant=\"primary\"\n                :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n                :error=\"isInErrorState || primaryAction.error\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </CustomTransition>\n  </Teleport>\n</template>\n"],"names":["elModalSizes","elModalSizesBreakpoints","elModalColors","isOpen","_useModel","__props","emit","__emit","props","closeModal","backdrop","ref","modalBody","isInErrorState","computed","arrivedState","useScroll","height","useElementSize","windowWidth","useWindowSize","isModalScrollable","isBodyScrollLocked","useScrollLock","responsiveSize","i","onClickOutside","watch","value","onKeyStroke"],"mappings":"ilCACaA,EAAe,CAAC,KAAM,IAAK,IAAK,IAAI,EAGpCC,GAA0B,CAAE,GAAI,IAAK,EAAG,IAAK,EAAG,IAAK,GAAI,IAAK,EAE9DC,GAAgB,CAAC,UAAW,YAAa,OAAO,4XA0BvD,MAAAC,EAASC,EAAYC,EAAA,QAI1B,EAEKC,EAAOC,EAEPC,EAAQH,EASRI,EAAa,IAAON,EAAO,MAAQ,GAEnCO,EAAWC,EAAwB,IAAI,EACvCC,EAAYD,EAAwB,IAAI,EAExCE,EAAiBC,EAAS,IAAMN,EAAM,QAAU,OAAO,EAEvD,CAAE,aAAAO,CAAA,EAAiBC,EAAUJ,CAAS,EACtC,CAAE,OAAAK,CAAA,EAAWC,EAAeN,CAAS,EACrC,CAAE,MAAOO,CAAY,EAAIC,EAAc,EAEvCC,EAAoBP,EAAS,IAAMF,EAAU,OAASA,EAAU,MAAM,aAAeK,EAAO,KAAK,EACjGK,EAAqBC,EAAc,SAAS,IAAI,EAEhDC,EAAiBV,EAAS,IAAM,CAC3B,QAAAW,EAAIzB,EAAa,QAAQQ,EAAM,IAAI,EAAGiB,GAAK,EAAGA,IACrD,GAAIN,EAAY,OAASlB,GAAwBD,EAAayB,CAAC,CAAC,EAAG,OAAOzB,EAAayB,CAAC,EAG1F,OAAOjB,EAAM,IAAA,CACd,EAEKkB,EAAkB,GAA+B,CAE3B,EAAE,SAAWhB,EAAS,OAEdD,GAAA,EAGpC,OAAAkB,EACE,IAAMxB,EAAO,MACJyB,GAAA,EACH,CAACpB,EAAM,eAAiBoB,KAAON,EAAmB,MAAQM,GACzDA,GAAOtB,EAAK,QAAQ,CAC3B,CAAA,EAGFuB,EAAY,SAAe,GAAA,CACzB,EAAE,eAAe,EACNpB,GAAA,CACZ"}
+{"version":3,"file":"ElModal.vue.esm2.js","sources":["../../src/ElModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elModalSizes = ['xs', 'm', 'l', 'xl'] as const;\nexport type ElModalSize = (typeof elModalSizes)[number];\n\nexport const elModalSizesBreakpoints = { xs: 360, m: 576, l: 768, xl: 1280 };\n\nexport const elModalColors = ['primary', 'secondary', 'error'] as const;\nexport type ElModalColor = (typeof elModalColors)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke, useElementSize, useScroll, useWindowSize } from '@vueuse/core';\nimport { vOnClickOutside } from '@vueuse/components';\nimport { computed, ref, watch, onUnmounted } from 'vue';\n\nimport ElButton from '@/ElButton.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport { useModalStack } from '@/composable/useModalStack';\n\nexport interface ElModalProps {\n  size?: ElModalSize;\n  color?: ElModalColor;\n  headerIcon: InstanceType<typeof ElIcon>['$props'];\n  title: string;\n  description?: string;\n  primaryAction: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n  secondaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n  tertiaryAction?: Omit<InstanceType<typeof ElButton>['$props'], 'size' | 'variant'>;\n}\n\nconst isOpen = defineModel('isOpen', {\n  default: false,\n  required: true,\n  type: Boolean,\n});\n\nconst emit = defineEmits<{ (event: 'closed'): void }>();\n\nconst props = withDefaults(defineProps<ElModalProps>(), {\n  size: 'm',\n  color: 'primary',\n  title: undefined,\n  description: undefined,\n  secondaryAction: undefined,\n  tertiaryAction: undefined,\n});\n\nconst closeModal = () => (isOpen.value = false);\n\nconst backdrop = ref<HTMLElement | null>(null);\nconst modalBody = ref<HTMLElement | null>(null);\n\nconst isInErrorState = computed(() => props.color === 'error');\n\nconst { arrivedState } = useScroll(modalBody);\nconst { height } = useElementSize(modalBody);\nconst { width: windowWidth } = useWindowSize();\n\nconst isModalScrollable = computed(() => modalBody.value && modalBody.value.scrollHeight > height.value);\n\nconst { registerModal, unregisterModal } = useModalStack();\n\nconst responsiveSize = computed(() => {\n  for (let i = elModalSizes.indexOf(props.size); i >= 0; i--) {\n    if (windowWidth.value >= elModalSizesBreakpoints[elModalSizes[i]]) return elModalSizes[i];\n  }\n\n  return props.size;\n});\n\nconst onClickOutside = (e: TouchEvent | MouseEvent) => {\n  // This prevents the modal from closing when clicking on elements that use ElClipToAnchor (eg. ElInputSelect)\n  const isClickOnBackdrop = e.target === backdrop.value;\n\n  if (isClickOnBackdrop) closeModal();\n};\n\nwatch(\n  () => isOpen.value,\n  value => {\n    if (value) {\n      registerModal();\n    } else {\n      unregisterModal();\n      emit('closed');\n    }\n  },\n);\n\nonUnmounted(() => {\n  if (isOpen.value) {\n    unregisterModal();\n  }\n});\n\nonKeyStroke('Escape', e => {\n  e.preventDefault();\n  closeModal();\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <CustomTransition name=\"fade\">\n      <div v-if=\"isOpen\" class=\"fixed inset-1 inset-x-0 bottom-0 z-40 flex items-center justify-center px-4 pb-6 sm:p-0\">\n        <!-- Backdrop -->\n        <div class=\"fixed inset-0 transition-opacity\">\n          <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n        </div>\n\n        <!-- Modal -->\n        <div\n          v-on-click-outside=\"onClickOutside\"\n          class=\"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\"\n          :class=\"{\n            'w-[360px]': responsiveSize === 'xs',\n            'w-[576px]': responsiveSize === 'm',\n            'w-[768px]': responsiveSize === 'l',\n            'w-[1280px]': responsiveSize === 'xl',\n          }\"\n          :data-cy=\"`el-modal-${title?.replaceAll(' ', '')}`\"\n        >\n          <!-- Header -->\n          <div\n            class=\"flex items-center justify-between gap-2\"\n            :class=\"{ 'px-4': responsiveSize === 'xs', 'px-8': responsiveSize !== 'xs' }\"\n          >\n            <div class=\"flex items-center justify-between gap-2 flex-1 overflow-hidden\">\n              <div\n                :class=\"{\n                  'text-error bg-error-light-active': isInErrorState,\n                  'text-primary bg-neutral-surface-raised': color === 'primary',\n                  'text-secondary bg-neutral-surface-raised': color === 'secondary',\n                }\"\n                class=\"!h-8 !w-8 rounded-full\"\n              >\n                <ElIcon v-bind=\"isInErrorState ? { name: 'ExclamationCircleIcon' } : headerIcon\" class=\"p-1\" />\n              </div>\n\n              <div class=\"text-xl font-semibold truncate flex-1\">{{ title }}</div>\n            </div>\n\n            <ElIconButton :icon=\"{ name: 'XMarkIcon' }\" :error=\"isInErrorState\" @click=\"closeModal\" />\n          </div>\n\n          <!-- Body -->\n          <div\n            ref=\"modalBody\"\n            class=\"flex flex-col gap-7 border-neutral-surface overflow-y-auto overflow-x-hidden\"\n            :class=\"{\n              'px-4': responsiveSize === 'xs',\n              'px-8': responsiveSize !== 'xs',\n              'border-t': isModalScrollable && !arrivedState.top,\n              'border-b': isModalScrollable && !arrivedState.bottom,\n            }\"\n          >\n            <p v-if=\"description\" class=\"text-base font-normal text-wrap break-words\">{{ description }}</p>\n\n            <slot name=\"default\"></slot>\n          </div>\n\n          <!-- Footer -->\n          <div\n            v-if=\"primaryAction || secondaryAction || tertiaryAction\"\n            class=\"flex items-center gap-4\"\n            :class=\"{ 'flex-col-reverse px-4': responsiveSize === 'xs', 'flex-row px-8': responsiveSize !== 'xs' }\"\n          >\n            <ElButton\n              v-if=\"tertiaryAction\"\n              v-bind=\"tertiaryAction\"\n              variant=\"tertiary\"\n              :class=\"{ 'w-full': responsiveSize === 'xs' }\"\n              :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n              :error=\"isInErrorState || tertiaryAction.error\"\n            />\n\n            <div\n              class=\"flex gap-4\"\n              :class=\"{ 'flex-col-reverse w-full': responsiveSize === 'xs', 'flex-row ml-auto': responsiveSize !== 'xs' }\"\n            >\n              <ElButton\n                v-if=\"secondaryAction\"\n                v-bind=\"secondaryAction\"\n                variant=\"secondary\"\n                :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n                :error=\"isInErrorState || secondaryAction.error\"\n              />\n\n              <ElButton\n                v-if=\"primaryAction\"\n                v-bind=\"primaryAction\"\n                variant=\"primary\"\n                :size=\"responsiveSize === 'xs' ? 'l' : 'base'\"\n                :error=\"isInErrorState || primaryAction.error\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </CustomTransition>\n  </Teleport>\n</template>\n"],"names":["elModalSizes","elModalSizesBreakpoints","elModalColors","isOpen","_useModel","__props","emit","__emit","props","closeModal","backdrop","ref","modalBody","isInErrorState","computed","arrivedState","useScroll","height","useElementSize","windowWidth","useWindowSize","isModalScrollable","registerModal","unregisterModal","useModalStack","responsiveSize","i","onClickOutside","watch","value","onUnmounted","onKeyStroke"],"mappings":"mpCACaA,EAAe,CAAC,KAAM,IAAK,IAAK,IAAI,EAGpCC,GAA0B,CAAE,GAAI,IAAK,EAAG,IAAK,EAAG,IAAK,GAAI,IAAK,EAE9DC,GAAgB,CAAC,UAAW,YAAa,OAAO,+VA0BvD,MAAAC,EAASC,EAAYC,EAAA,QAI1B,EAEKC,EAAOC,EAEPC,EAAQH,EASRI,EAAa,IAAON,EAAO,MAAQ,GAEnCO,EAAWC,EAAwB,IAAI,EACvCC,EAAYD,EAAwB,IAAI,EAExCE,EAAiBC,EAAS,IAAMN,EAAM,QAAU,OAAO,EAEvD,CAAE,aAAAO,CAAA,EAAiBC,EAAUJ,CAAS,EACtC,CAAE,OAAAK,CAAA,EAAWC,EAAeN,CAAS,EACrC,CAAE,MAAOO,CAAY,EAAIC,EAAc,EAEvCC,EAAoBP,EAAS,IAAMF,EAAU,OAASA,EAAU,MAAM,aAAeK,EAAO,KAAK,EAEjG,CAAE,cAAAK,EAAe,gBAAAC,CAAgB,EAAIC,EAAc,EAEnDC,EAAiBX,EAAS,IAAM,CAC3B,QAAAY,EAAI1B,EAAa,QAAQQ,EAAM,IAAI,EAAGkB,GAAK,EAAGA,IACrD,GAAIP,EAAY,OAASlB,GAAwBD,EAAa0B,CAAC,CAAC,EAAG,OAAO1B,EAAa0B,CAAC,EAG1F,OAAOlB,EAAM,IAAA,CACd,EAEKmB,EAAkB,GAA+B,CAE3B,EAAE,SAAWjB,EAAS,OAEdD,GAAA,EAGpC,OAAAmB,EACE,IAAMzB,EAAO,MACJ0B,GAAA,CACHA,EACYP,KAEEC,IAChBjB,EAAK,QAAQ,EAEjB,CAAA,EAGFwB,EAAY,IAAM,CACZ3B,EAAO,OACOoB,GAClB,CACD,EAEDQ,EAAY,SAAe,GAAA,CACzB,EAAE,eAAe,EACNtB,GAAA,CACZ"}

package/dist/src/assets/laiana/laiana.png.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="/laiana.png";exports.default=e;
+//# sourceMappingURL=laiana.png.cjs.js.map

package/dist/src/assets/laiana/laiana.png.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"laiana.png.cjs.js","sources":["../../../../src/assets/laiana/laiana.png"],"sourcesContent":["export default \"__VITE_ASSET__DhCe$ao4__\""],"names":["laianaIcon"],"mappings":"4GAAA,MAAeA,EAAA"}

package/dist/src/assets/laiana/laiana.png.esm.js

@@ -0,0 +1,2 @@
+const a="/laiana.png";export{a as default};
+//# sourceMappingURL=laiana.png.esm.js.map

package/dist/src/assets/laiana/laiana.png.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"laiana.png.esm.js","sources":["../../../../src/assets/laiana/laiana.png"],"sourcesContent":["export default \"__VITE_ASSET__DhCe$ao4__\""],"names":["laianaIcon"],"mappings":"AAAA,MAAeA,EAAA"}

package/dist/src/composable/useModalStack.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/@vueuse/core/index.cjs.js");let e=0;const o=t.useScrollLock(document.body);function r(){return{registerModal:()=>{e++,o.value=!0},unregisterModal:()=>{e=Math.max(0,e-1),o.value=e>0}}}exports.useModalStack=r;
+//# sourceMappingURL=useModalStack.cjs.js.map

package/dist/src/composable/useModalStack.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalStack.cjs.js","sources":["../../../src/composable/useModalStack.ts"],"sourcesContent":["import { useScrollLock } from '@vueuse/core';\n\nlet modalStackCount = 0;\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nexport function useModalStack() {\n  const registerModal = () => {\n    modalStackCount++;\n    isBodyScrollLocked.value = true;\n  };\n\n  const unregisterModal = () => {\n    modalStackCount = Math.max(0, modalStackCount - 1);\n    isBodyScrollLocked.value = modalStackCount > 0;\n  };\n\n  return {\n    registerModal,\n    unregisterModal,\n  };\n}\n"],"names":["modalStackCount","isBodyScrollLocked","useScrollLock","useModalStack"],"mappings":"gJAEA,IAAIA,EAAkB,EACtB,MAAMC,EAAqBC,EAAc,cAAA,SAAS,IAAI,EAE/C,SAASC,GAAgB,CAWvB,MAAA,CACL,cAXoB,IAAM,CAC1BH,IACAC,EAAmB,MAAQ,EAAA,EAU3B,gBAPsB,IAAM,CAC5BD,EAAkB,KAAK,IAAI,EAAGA,EAAkB,CAAC,EACjDC,EAAmB,MAAQD,EAAkB,CAAA,CAK7C,CAEJ"}

package/dist/src/composable/useModalStack.esm.js

@@ -0,0 +1,2 @@
+import{useScrollLock as t}from"../../node_modules/@vueuse/core/index.esm.js";let o=0;const e=t(document.body);function c(){return{registerModal:()=>{o++,e.value=!0},unregisterModal:()=>{o=Math.max(0,o-1),e.value=o>0}}}export{c as useModalStack};
+//# sourceMappingURL=useModalStack.esm.js.map

package/dist/src/composable/useModalStack.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalStack.esm.js","sources":["../../../src/composable/useModalStack.ts"],"sourcesContent":["import { useScrollLock } from '@vueuse/core';\n\nlet modalStackCount = 0;\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nexport function useModalStack() {\n  const registerModal = () => {\n    modalStackCount++;\n    isBodyScrollLocked.value = true;\n  };\n\n  const unregisterModal = () => {\n    modalStackCount = Math.max(0, modalStackCount - 1);\n    isBodyScrollLocked.value = modalStackCount > 0;\n  };\n\n  return {\n    registerModal,\n    unregisterModal,\n  };\n}\n"],"names":["modalStackCount","isBodyScrollLocked","useScrollLock","useModalStack"],"mappings":"6EAEA,IAAIA,EAAkB,EACtB,MAAMC,EAAqBC,EAAc,SAAS,IAAI,EAE/C,SAASC,GAAgB,CAWvB,MAAA,CACL,cAXoB,IAAM,CAC1BH,IACAC,EAAmB,MAAQ,EAAA,EAU3B,gBAPsB,IAAM,CAC5BD,EAAkB,KAAK,IAAI,EAAGA,EAAkB,CAAC,EACjDC,EAAmB,MAAQD,EAAkB,CAAA,CAK7C,CAEJ"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g=require("../ElDivider.vue.cjs2.js"),_=require("../ElIcon.vue.cjs2.js"),F=require("../ElVerticalTab.vue.cjs2.js");;/* empty css                */require("../polyfills.cjs.js");require("vee-validate");require("../../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("../../node_modules/lodash/lodash.cjs.js");require("../tailwind.plugin.cjs.js");require("../../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const T=require("../ElButton.vue.cjs2.js"),A=require("../_CustomTransition.vue.cjs2.js"),b=require("../../node_modules/@vueuse/core/index.cjs.js");require("./ElInputSelect.vue.cjs2.js");require("./ElInputText.vue.cjs2.js");require("./ElInputCheckbox.vue.cjs2.js");require("./ElInputDate.vue.cjs2.js");require("./ElInputFile.vue.cjs2.js");require("./ElInputMeasureUnit.vue.cjs2.js");require("./ElInputNumber.vue.cjs2.js");require("./ElInputPhone.vue.cjs2.js");require("./ElInputTextarea.vue.cjs2.js");require("../ElToast.vue.cjs2.js");require("./ElInputRadioButton.vue.cjs2.js");const P=require("../../node_modules/@vueuse/components/index.cjs.js"),B=require("./input.cjs.js");require("../../node_modules/swiper/shared/swiper-core.cjs.js");const j=require("../../node_modules/@vueuse/integrations/useFocusTrap.cjs.js"),z={class:"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl"},H=["name","placeholder"],$={class:"flex flex-col gap-y-6 overflow-y-hidden"},L={key:1,class:"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter"},U={class:"text-sm font-semibold text-neutral-darker"},G={class:"text-sm font-normal"},K={key:2,class:"flex py-2 overflow-y-hidden"},J={key:0,class:"text-sm font-medium text-neutral-darker"},Q={class:"flex flex-col gap-1 w-full"},W={key:0},X={key:1,class:"flex-1 pl-6 overflow-y-auto"},Y={key:3,class:"flex items-center gap-1 self-stretch"},Z={class:"text-sm font-normal text-neutral-darker"},ee={class:"fixed inset-0 transition-opacity"},te={ref:"backdrop",class:"absolute inset-0 bg-gray-500 opacity-75"},oe=["primary","secondary"],le=["default","filled","blank"],re=e.defineComponent({__name:"ElInputSearch",props:e.mergeModels({...B.withTextualElInputProps(),status:{type:String,default:"default"},text:{type:String,default:void 0},results:{type:Array,default:void 0},footer:{type:Object,default:void 0},blankResults:{type:Object,default:void 0},shouldHoverFirstResultOnOpen:{type:Boolean,default:!1},color:{type:String,default:"primary"}},{isOpen:{default:!0,required:!0,type:Boolean},isOpenModifiers:{}}),emits:e.mergeModels(["update:modelValue","onResultClick","onResultHover"],["update:isOpen"]),setup(o,{emit:q}){const r=o,d=q,f=e.useSlots(),E=b.useScrollLock(document.body),m=e.ref(null),V=e.computed(()=>r.modelValue),w=e.computed(()=>[r.validation]),v=e.computed(()=>({default:!r.results,filled:r.results&&r.results.length>0,blank:r.results&&r.results.length===0})),S=e.ref(!1),k=e.ref(!1),y=e.ref([]),s=e.ref(),{value:u,uuid:C,setValue:N}=B.useInput(V,w,r.name,t=>{d("update:modelValue",t==null?void 0:t.trim())}),p=e.ref(),{hasFocus:R,activate:O,deactivate:I}=j.useFocusTrap(p),c=e.useModel(o,"isOpen"),h=()=>{c.value=!1,s.value=void 0,u.value=""},M=t=>{var l,a,n;(n=(a=(l=y.value)==null?void 0:l.at(t))==null?void 0:a.$el)==null||n.scrollIntoView({block:"nearest"})},x=t=>{d("onResultClick",t),N(""),s.value=void 0},i=t=>{s.value=t,M(t),d("onResultHover",t)},D=()=>h();return b.onKeyStroke(["ArrowUp","ArrowDown","Enter","Escape"],t=>{var l;if(t.preventDefault(),t.stopPropagation(),R&&((l=r.results)!=null&&l.length))switch(t.key){case"ArrowUp":const a=Math.max((s.value??0)-1,0);i(a);break;case"ArrowDown":const n=s.value!==void 0?Math.min(s.value+1,r.results.length-1):0;i(n);break;case"Enter":s.value!==void 0&&x(s.value);break}t.key==="Escape"&&h()},{target:p}),e.watch([c,m],async()=>{var t,l;E.value=c.value,c.value?((t=m.value)==null||t.focus(),r.shouldHoverFirstResultOnOpen&&((l=r.results)!=null&&l.length)&&i(0),await e.nextTick(),O()):(I(),u.value="")}),(t,l)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(A.default,{name:"fade"},{default:e.withCtx(()=>[c.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"searchBarRef",ref:p,class:"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0"},[e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md",{"gap-6":r.results}])},[e.createElementVNode("div",z,[e.createVNode(_.default,{name:"MagnifyingGlassIcon",class:"text-neutral-lighter w-6 h-6"}),e.withDirectives(e.createElementVNode("input",{ref_key:"searchInput",ref:m,"onUpdate:modelValue":l[0]||(l[0]=a=>e.isRef(u)?u.value=a:null),name:t.id||`${e.unref(C)}`,type:"text",class:"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0",placeholder:t.placeholder,onFocusin:l[1]||(l[1]=()=>{k.value=!0,S.value=!1}),onFocusout:l[2]||(l[2]=()=>{k.value=!1})},null,40,H),[[e.vModelText,e.unref(u)]])]),e.createElementVNode("span",$,[o.results?(e.openBlock(),e.createBlock(g.default,{key:0,direction:"horizontal"})):e.createCommentVNode("",!0),o.blankResults&&v.value.blank?(e.openBlock(),e.createElementBlock("div",L,[e.createVNode(_.default,e.mergeProps(o.blankResults.icon,{class:"w-7 h-7"}),null,16),e.createElementVNode("p",U,e.toDisplayString(o.blankResults.primaryRow),1),e.createElementVNode("p",G,e.toDisplayString(o.blankResults.secondaryRow),1)])):e.createCommentVNode("",!0),o.results&&v.value.filled?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",{class:e.normalizeClass(["flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen",{"pr-6":e.unref(f).info&&o.results.length>0}])},[o.text?(e.openBlock(),e.createElementBlock("span",J,e.toDisplayString(o.text),1)):e.createCommentVNode("",!0),e.createElementVNode("div",Q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.results,(a,n)=>(e.openBlock(),e.createBlock(F.default,e.mergeProps({key:n,ref_for:!0,ref_key:"itemRefs",ref:y,color:o.color},a,{status:s.value===n?"hover":"default",tabindex:"-1",onClick:()=>x(n),onMouseover:()=>i(n)}),null,16,["color","status","onClick","onMouseover"]))),128))])],2),e.unref(f).info?(e.openBlock(),e.createElementBlock("div",W,[e.createVNode(g.default,{direction:"vertical"})])):e.createCommentVNode("",!0),e.unref(f).info?(e.openBlock(),e.createElementBlock("div",X,[e.renderSlot(t.$slots,"info")])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),o.results&&o.footer?(e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("span",Z,e.toDisplayString(o.footer.text),1),e.createVNode(e.unref(T.default),e.mergeProps(o.footer.button,{variant:"tertiary"}),null,16)])):e.createCommentVNode("",!0)])],2)),[[e.unref(P.VOnClickOutside),D]]),e.createElementVNode("div",ee,[e.createElementVNode("div",te,null,512)])],512)):e.createCommentVNode("",!0)]),_:3})]))}});exports.default=re;exports.elInputSearchColors=oe;exports.elInputSearchStatus=le;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g=require("../ElDivider.vue.cjs2.js"),_=require("../ElIcon.vue.cjs2.js"),F=require("../ElVerticalTab.vue.cjs2.js");;/* empty css                */require("../polyfills.cjs.js");require("vee-validate");require("../../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("../../node_modules/lodash/lodash.cjs.js");require("../tailwind.plugin.cjs.js");require("../../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const T=require("../ElButton.vue.cjs2.js"),A=require("../_CustomTransition.vue.cjs2.js"),b=require("../../node_modules/@vueuse/core/index.cjs.js");require("./ElInputSelect.vue.cjs2.js");require("./ElInputText.vue.cjs2.js");require("./ElInputCheckbox.vue.cjs2.js");require("./ElInputDate.vue.cjs2.js");require("./ElInputFile.vue.cjs2.js");require("./ElInputMeasureUnit.vue.cjs2.js");require("./ElInputNumber.vue.cjs2.js");require("./ElInputPhone.vue.cjs2.js");require("./ElInputTextarea.vue.cjs2.js");require("../ElToast.vue.cjs2.js");require("./ElInputRadioButton.vue.cjs2.js");const P=require("../../node_modules/@vueuse/components/index.cjs.js");require("../composable/useModalStack.cjs.js");const q=require("./input.cjs.js");require("../../node_modules/swiper/shared/swiper-core.cjs.js");const j=require("../../node_modules/@vueuse/integrations/useFocusTrap.cjs.js"),z={class:"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl"},H=["name","placeholder"],$={class:"flex flex-col gap-y-6 overflow-y-hidden"},L={key:1,class:"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter"},U={class:"text-sm font-semibold text-neutral-darker"},G={class:"text-sm font-normal"},K={key:2,class:"flex py-2 overflow-y-hidden"},J={key:0,class:"text-sm font-medium text-neutral-darker"},Q={class:"flex flex-col gap-1 w-full"},W={key:0},X={key:1,class:"flex-1 pl-6 overflow-y-auto"},Y={key:3,class:"flex items-center gap-1 self-stretch"},Z={class:"text-sm font-normal text-neutral-darker"},ee={class:"fixed inset-0 transition-opacity"},te={ref:"backdrop",class:"absolute inset-0 bg-gray-500 opacity-75"},oe=["primary","secondary"],le=["default","filled","blank"],re=e.defineComponent({__name:"ElInputSearch",props:e.mergeModels({...q.withTextualElInputProps(),status:{type:String,default:"default"},text:{type:String,default:void 0},results:{type:Array,default:void 0},footer:{type:Object,default:void 0},blankResults:{type:Object,default:void 0},shouldHoverFirstResultOnOpen:{type:Boolean,default:!1},color:{type:String,default:"primary"}},{isOpen:{default:!0,required:!0,type:Boolean},isOpenModifiers:{}}),emits:e.mergeModels(["update:modelValue","onResultClick","onResultHover"],["update:isOpen"]),setup(o,{emit:B}){const r=o,d=B,f=e.useSlots(),E=b.useScrollLock(document.body),m=e.ref(null),V=e.computed(()=>r.modelValue),w=e.computed(()=>[r.validation]),v=e.computed(()=>({default:!r.results,filled:r.results&&r.results.length>0,blank:r.results&&r.results.length===0})),S=e.ref(!1),k=e.ref(!1),y=e.ref([]),s=e.ref(),{value:u,uuid:C,setValue:N}=q.useInput(V,w,r.name,t=>{d("update:modelValue",t==null?void 0:t.trim())}),p=e.ref(),{hasFocus:R,activate:O,deactivate:I}=j.useFocusTrap(p),c=e.useModel(o,"isOpen"),h=()=>{c.value=!1,s.value=void 0,u.value=""},M=t=>{var l,a,n;(n=(a=(l=y.value)==null?void 0:l.at(t))==null?void 0:a.$el)==null||n.scrollIntoView({block:"nearest"})},x=t=>{d("onResultClick",t),N(""),s.value=void 0},i=t=>{s.value=t,M(t),d("onResultHover",t)},D=()=>h();return b.onKeyStroke(["ArrowUp","ArrowDown","Enter","Escape"],t=>{var l;if(t.preventDefault(),t.stopPropagation(),R&&((l=r.results)!=null&&l.length))switch(t.key){case"ArrowUp":const a=Math.max((s.value??0)-1,0);i(a);break;case"ArrowDown":const n=s.value!==void 0?Math.min(s.value+1,r.results.length-1):0;i(n);break;case"Enter":s.value!==void 0&&x(s.value);break}t.key==="Escape"&&h()},{target:p}),e.watch([c,m],async()=>{var t,l;E.value=c.value,c.value?((t=m.value)==null||t.focus(),r.shouldHoverFirstResultOnOpen&&((l=r.results)!=null&&l.length)&&i(0),await e.nextTick(),O()):(I(),u.value="")}),(t,l)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(A.default,{name:"fade"},{default:e.withCtx(()=>[c.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"searchBarRef",ref:p,class:"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0"},[e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md",{"gap-6":r.results}])},[e.createElementVNode("div",z,[e.createVNode(_.default,{name:"MagnifyingGlassIcon",class:"text-neutral-lighter w-6 h-6"}),e.withDirectives(e.createElementVNode("input",{ref_key:"searchInput",ref:m,"onUpdate:modelValue":l[0]||(l[0]=a=>e.isRef(u)?u.value=a:null),name:t.id||`${e.unref(C)}`,type:"text",class:"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0",placeholder:t.placeholder,onFocusin:l[1]||(l[1]=()=>{k.value=!0,S.value=!1}),onFocusout:l[2]||(l[2]=()=>{k.value=!1})},null,40,H),[[e.vModelText,e.unref(u)]])]),e.createElementVNode("span",$,[o.results?(e.openBlock(),e.createBlock(g.default,{key:0,direction:"horizontal"})):e.createCommentVNode("",!0),o.blankResults&&v.value.blank?(e.openBlock(),e.createElementBlock("div",L,[e.createVNode(_.default,e.mergeProps(o.blankResults.icon,{class:"w-7 h-7"}),null,16),e.createElementVNode("p",U,e.toDisplayString(o.blankResults.primaryRow),1),e.createElementVNode("p",G,e.toDisplayString(o.blankResults.secondaryRow),1)])):e.createCommentVNode("",!0),o.results&&v.value.filled?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",{class:e.normalizeClass(["flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen",{"pr-6":e.unref(f).info&&o.results.length>0}])},[o.text?(e.openBlock(),e.createElementBlock("span",J,e.toDisplayString(o.text),1)):e.createCommentVNode("",!0),e.createElementVNode("div",Q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.results,(a,n)=>(e.openBlock(),e.createBlock(F.default,e.mergeProps({key:n,ref_for:!0,ref_key:"itemRefs",ref:y,color:o.color},a,{status:s.value===n?"hover":"default",tabindex:"-1",onClick:()=>x(n),onMouseover:()=>i(n)}),null,16,["color","status","onClick","onMouseover"]))),128))])],2),e.unref(f).info?(e.openBlock(),e.createElementBlock("div",W,[e.createVNode(g.default,{direction:"vertical"})])):e.createCommentVNode("",!0),e.unref(f).info?(e.openBlock(),e.createElementBlock("div",X,[e.renderSlot(t.$slots,"info")])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),o.results&&o.footer?(e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("span",Z,e.toDisplayString(o.footer.text),1),e.createVNode(e.unref(T.default),e.mergeProps(o.footer.button,{variant:"tertiary"}),null,16)])):e.createCommentVNode("",!0)])],2)),[[e.unref(P.VOnClickOutside),D]]),e.createElementVNode("div",ee,[e.createElementVNode("div",te,null,512)])],512)):e.createCommentVNode("",!0)]),_:3})]))}});exports.default=re;exports.elInputSearchColors=oe;exports.elInputSearchStatus=le;
 //# sourceMappingURL=ElInputSearch.vue.cjs2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ElInputSearch.vue.cjs2.js","sources":["../../../src/forms/ElInputSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputSearchColors = ['primary', 'secondary'] as const;\nexport type ElInputSearchColors = (typeof elInputSearchColors)[number];\n\nexport const elInputSearchStatus = ['default', 'filled', 'blank'] as const;\nexport type ElInputSearchStatus = (typeof elInputSearchStatus)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport ElDivider from '@/ElDivider.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElVerticalTab from '@/ElVerticalTab.vue';\nimport { ElButton } from '..';\nimport { computed, PropType, ref, useSlots, watch, nextTick } from 'vue';\nimport { useInput, withTextualElInputProps } from './input';\nimport { vOnClickOutside } from '@vueuse/components';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport { onKeyStroke, useScrollLock } from '@vueuse/core';\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap';\n\nconst props = defineProps({\n  ...withTextualElInputProps(),\n  status: {\n    type: String as PropType<ElInputSearchStatus>,\n    default: 'default',\n  },\n  text: {\n    type: String,\n    default: undefined,\n  },\n  results: {\n    type: Array as PropType<InstanceType<typeof ElVerticalTab>['$props'][]>,\n    default: undefined,\n  },\n  footer: {\n    type: Object as PropType<{\n      text: string;\n      button: InstanceType<typeof ElButton>['$props'];\n    }>,\n    default: undefined,\n  },\n  blankResults: {\n    type: Object as PropType<{\n      icon: InstanceType<typeof ElIcon>['$props'];\n      primaryRow: string;\n      secondaryRow?: string;\n    }>,\n    default: undefined,\n  },\n  shouldHoverFirstResultOnOpen: {\n    type: Boolean,\n    default: false,\n  },\n  color: {\n    type: String as PropType<ElInputSearchColors>,\n    default: 'primary',\n  },\n});\n\nconst emit = defineEmits(['update:modelValue', 'onResultClick', 'onResultHover']);\nconst slots = useSlots();\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst searchInput = ref<HTMLInputElement | null>(null);\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\nconst computedStatus = computed(() => ({\n  default: !props.results,\n  filled: props.results && props.results.length > 0,\n  blank: props.results && props.results.length === 0,\n}));\nconst isClickOutside = ref(false);\nconst isSearchFocused = ref(false);\n\nconst itemRefs = ref<InstanceType<typeof ElVerticalTab>[]>([]);\nconst activeResult = ref<number | undefined>();\n\nconst { value, uuid, setValue } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n  emit('update:modelValue', newValue?.trim());\n});\n\nconst searchBarRef = ref<HTMLInputElement>();\nconst { hasFocus, activate, deactivate } = useFocusTrap(searchBarRef as any);\n\nconst isOpen = defineModel('isOpen', {\n  default: true,\n  required: true,\n  type: Boolean,\n});\n\nconst closeSearchBar = () => {\n  isOpen.value = false;\n  activeResult.value = undefined;\n  value.value = '';\n};\n\nconst scrollToFocusedIndex = (index: number) => {\n  itemRefs.value?.at(index)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst onResultClick = (index: number) => {\n  emit('onResultClick', index);\n  setValue('');\n  activeResult.value = undefined;\n};\n\nconst onResultHover = (index: number) => {\n  activeResult.value = index;\n  scrollToFocusedIndex(index);\n  emit('onResultHover', index);\n};\n\nconst onClickOutside = () => closeSearchBar();\n\nonKeyStroke(\n  ['ArrowUp', 'ArrowDown', 'Enter', 'Escape'],\n  e => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (hasFocus && props.results?.length) {\n      switch (e.key) {\n        case 'ArrowUp':\n          const previousActiveIndex = Math.max((activeResult.value ?? 0) - 1, 0);\n          onResultHover(previousActiveIndex);\n          break;\n        case 'ArrowDown':\n          const nextActiveIndex = activeResult.value !== undefined ? Math.min(activeResult.value + 1, props.results.length - 1) : 0;\n          onResultHover(nextActiveIndex);\n          break;\n        case 'Enter':\n          if (activeResult.value !== undefined) {\n            onResultClick(activeResult.value);\n          }\n          break;\n      }\n    }\n\n    if (e.key === 'Escape') {\n      closeSearchBar();\n    }\n  },\n  { target: searchBarRef },\n);\n\nwatch([isOpen, searchInput], async () => {\n  isBodyScrollLocked.value = isOpen.value;\n\n  if (isOpen.value) {\n    searchInput.value?.focus();\n\n    if (props.shouldHoverFirstResultOnOpen && props.results?.length) {\n      onResultHover(0);\n    }\n\n    await nextTick();\n    activate();\n  } else {\n    deactivate();\n    value.value = '';\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <CustomTransition name=\"fade\">\n      <div\n        v-if=\"isOpen\"\n        ref=\"searchBarRef\"\n        class=\"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0\"\n      >\n        <div\n          v-on-click-outside=\"onClickOutside\"\n          class=\"m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md\"\n          :class=\"{\n            'gap-6': props.results,\n          }\"\n        >\n          <!-- Search bar -->\n          <div class=\"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl\">\n            <ElIcon name=\"MagnifyingGlassIcon\" class=\"text-neutral-lighter w-6 h-6\" />\n            <input\n              ref=\"searchInput\"\n              v-model=\"value\"\n              :name=\"id || `${uuid}`\"\n              type=\"text\"\n              class=\"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0\"\n              :placeholder=\"placeholder\"\n              @focusin=\"\n                () => {\n                  isSearchFocused = true; // Set search focused\n                  isClickOutside = false; // Set click outside to false\n                }\n              \"\n              @focusout=\"\n                () => {\n                  isSearchFocused = false;\n                }\n              \"\n            />\n          </div>\n\n          <span class=\"flex flex-col gap-y-6 overflow-y-hidden\">\n            <ElDivider v-if=\"results\" direction=\"horizontal\" />\n            <div\n              v-if=\"blankResults && computedStatus.blank\"\n              class=\"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter\"\n            >\n              <ElIcon v-bind=\"blankResults.icon\" class=\"w-7 h-7\" />\n              <p class=\"text-sm font-semibold text-neutral-darker\">{{ blankResults.primaryRow }}</p>\n              <p class=\"text-sm font-normal\">{{ blankResults.secondaryRow }}</p>\n            </div>\n            <div v-if=\"results && computedStatus.filled\" class=\"flex py-2 overflow-y-hidden\">\n              <!-- Results Left column  -->\n              <div\n                class=\"flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen\"\n                :class=\"{ 'pr-6': slots.info && results.length > 0 }\"\n              >\n                <span v-if=\"text\" class=\"text-sm font-medium text-neutral-darker\">{{ text }}</span>\n                <div class=\"flex flex-col gap-1 w-full\">\n                  <ElVerticalTab\n                    v-for=\"(result, index) in results\"\n                    :key=\"index\"\n                    ref=\"itemRefs\"\n                    :color=\"color\"\n                    v-bind=\"result\"\n                    :status=\"activeResult === index ? 'hover' : 'default'\"\n                    tabindex=\"-1\"\n                    @click=\"() => onResultClick(index)\"\n                    @mouseover=\"() => onResultHover(index)\"\n                  />\n                </div>\n              </div>\n              <!-- Blank Results -->\n\n              <div v-if=\"slots.info\">\n                <ElDivider direction=\"vertical\" />\n              </div>\n              <div v-if=\"slots.info\" class=\"flex-1 pl-6 overflow-y-auto\">\n                <slot name=\"info\"></slot>\n              </div>\n            </div>\n            <div v-if=\"results && footer\" class=\"flex items-center gap-1 self-stretch\">\n              <span class=\"text-sm font-normal text-neutral-darker\">{{ footer.text }}</span>\n              <ElButton v-bind=\"footer.button\" variant=\"tertiary\" />\n            </div>\n          </span>\n        </div>\n\n        <!-- Backdrop -->\n        <div class=\"fixed inset-0 transition-opacity\">\n          <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n        </div>\n      </div>\n    </CustomTransition>\n  </Teleport>\n</template>\n"],"names":["elInputSearchColors","elInputSearchStatus","props","__props","emit","__emit","slots","useSlots","isBodyScrollLocked","useScrollLock","searchInput","ref","computedModelValue","computed","computedValidation","computedStatus","isClickOutside","isSearchFocused","itemRefs","activeResult","value","uuid","setValue","useInput","newValue","searchBarRef","hasFocus","activate","deactivate","useFocusTrap","isOpen","_useModel","closeSearchBar","scrollToFocusedIndex","index","_c","_b","_a","onResultClick","onResultHover","onClickOutside","onKeyStroke","e","previousActiveIndex","nextActiveIndex","watch","nextTick"],"mappings":"moEACaA,GAAsB,CAAC,UAAW,WAAW,EAG7CC,GAAsB,CAAC,UAAW,SAAU,OAAO,8iBAgBhE,MAAMC,EAAQC,EAuCRC,EAAOC,EACPC,EAAQC,EAAAA,WACRC,EAAqBC,EAAAA,cAAc,SAAS,IAAI,EAEhDC,EAAcC,MAA6B,IAAI,EAC/CC,EAAqBC,EAAA,SAAS,IAAMX,EAAM,UAAU,EACpDY,EAAqBD,EAAAA,SAAS,IAAM,CAACX,EAAM,UAAU,CAAC,EACtDa,EAAiBF,EAAAA,SAAS,KAAO,CACrC,QAAS,CAACX,EAAM,QAChB,OAAQA,EAAM,SAAWA,EAAM,QAAQ,OAAS,EAChD,MAAOA,EAAM,SAAWA,EAAM,QAAQ,SAAW,CACjD,EAAA,EACIc,EAAiBL,MAAI,EAAK,EAC1BM,EAAkBN,MAAI,EAAK,EAE3BO,EAAWP,MAA0C,CAAA,CAAE,EACvDQ,EAAeR,EAAAA,MAEf,CAAE,MAAAS,EAAO,KAAAC,EAAM,SAAAC,GAAaC,EAAAA,SAASX,EAAoBE,EAAoBZ,EAAM,KAAkBsB,GAAA,CACpGpB,EAAA,oBAAqBoB,GAAA,YAAAA,EAAU,MAAM,CAAA,CAC3C,EAEKC,EAAed,EAAAA,MACf,CAAE,SAAAe,EAAU,SAAAC,EAAU,WAAAC,CAAW,EAAIC,EAAAA,aAAaJ,CAAmB,EAErEK,EAASC,EAAAA,SAAY5B,EAAA,QAI1B,EAEK6B,EAAiB,IAAM,CAC3BF,EAAO,MAAQ,GACfX,EAAa,MAAQ,OACrBC,EAAM,MAAQ,EAAA,EAGVa,EAAwBC,GAAkB,YACrCC,GAAAC,GAAAC,EAAAnB,EAAA,QAAA,YAAAmB,EAAO,GAAGH,KAAV,YAAAE,EAAkB,MAAlB,MAAAD,EAAuB,eAAe,CAAE,MAAO,SAAA,EAAW,EAG/DG,EAAiBJ,GAAkB,CACvC9B,EAAK,gBAAiB8B,CAAK,EAC3BZ,EAAS,EAAE,EACXH,EAAa,MAAQ,MAAA,EAGjBoB,EAAiBL,GAAkB,CACvCf,EAAa,MAAQe,EACrBD,EAAqBC,CAAK,EAC1B9B,EAAK,gBAAiB8B,CAAK,CAAA,EAGvBM,EAAiB,IAAMR,IAE7BS,OAAAA,EAAA,YACE,CAAC,UAAW,YAAa,QAAS,QAAQ,EACrCC,GAAA,OAIC,GAHJA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAEdhB,KAAYW,EAAAnC,EAAM,UAAN,MAAAmC,EAAe,QAC7B,OAAQK,EAAE,IAAK,CACb,IAAK,UACH,MAAMC,EAAsB,KAAK,KAAKxB,EAAa,OAAS,GAAK,EAAG,CAAC,EACrEoB,EAAcI,CAAmB,EACjC,MACF,IAAK,YACH,MAAMC,EAAkBzB,EAAa,QAAU,OAAY,KAAK,IAAIA,EAAa,MAAQ,EAAGjB,EAAM,QAAQ,OAAS,CAAC,EAAI,EACxHqC,EAAcK,CAAe,EAC7B,MACF,IAAK,QACCzB,EAAa,QAAU,QACzBmB,EAAcnB,EAAa,KAAK,EAElC,KACJ,CAGEuB,EAAE,MAAQ,UACGV,GAEnB,EACA,CAAE,OAAQP,CAAa,CAAA,EAGzBoB,EAAAA,MAAM,CAACf,EAAQpB,CAAW,EAAG,SAAY,SACvCF,EAAmB,MAAQsB,EAAO,MAE9BA,EAAO,QACTO,EAAA3B,EAAY,QAAZ,MAAA2B,EAAmB,QAEfnC,EAAM,gCAAgCkC,EAAAlC,EAAM,UAAN,MAAAkC,EAAe,SACvDG,EAAc,CAAC,EAGjB,MAAMO,EAAS,SAAA,EACNnB,MAEEC,IACXR,EAAM,MAAQ,GAChB,CACD"}
+{"version":3,"file":"ElInputSearch.vue.cjs2.js","sources":["../../../src/forms/ElInputSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputSearchColors = ['primary', 'secondary'] as const;\nexport type ElInputSearchColors = (typeof elInputSearchColors)[number];\n\nexport const elInputSearchStatus = ['default', 'filled', 'blank'] as const;\nexport type ElInputSearchStatus = (typeof elInputSearchStatus)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport ElDivider from '@/ElDivider.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElVerticalTab from '@/ElVerticalTab.vue';\nimport { ElButton } from '..';\nimport { computed, PropType, ref, useSlots, watch, nextTick } from 'vue';\nimport { useInput, withTextualElInputProps } from './input';\nimport { vOnClickOutside } from '@vueuse/components';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport { onKeyStroke, useScrollLock } from '@vueuse/core';\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap';\n\nconst props = defineProps({\n  ...withTextualElInputProps(),\n  status: {\n    type: String as PropType<ElInputSearchStatus>,\n    default: 'default',\n  },\n  text: {\n    type: String,\n    default: undefined,\n  },\n  results: {\n    type: Array as PropType<InstanceType<typeof ElVerticalTab>['$props'][]>,\n    default: undefined,\n  },\n  footer: {\n    type: Object as PropType<{\n      text: string;\n      button: InstanceType<typeof ElButton>['$props'];\n    }>,\n    default: undefined,\n  },\n  blankResults: {\n    type: Object as PropType<{\n      icon: InstanceType<typeof ElIcon>['$props'];\n      primaryRow: string;\n      secondaryRow?: string;\n    }>,\n    default: undefined,\n  },\n  shouldHoverFirstResultOnOpen: {\n    type: Boolean,\n    default: false,\n  },\n  color: {\n    type: String as PropType<ElInputSearchColors>,\n    default: 'primary',\n  },\n});\n\nconst emit = defineEmits(['update:modelValue', 'onResultClick', 'onResultHover']);\nconst slots = useSlots();\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst searchInput = ref<HTMLInputElement | null>(null);\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\nconst computedStatus = computed(() => ({\n  default: !props.results,\n  filled: props.results && props.results.length > 0,\n  blank: props.results && props.results.length === 0,\n}));\nconst isClickOutside = ref(false);\nconst isSearchFocused = ref(false);\n\nconst itemRefs = ref<InstanceType<typeof ElVerticalTab>[]>([]);\nconst activeResult = ref<number | undefined>();\n\nconst { value, uuid, setValue } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n  emit('update:modelValue', newValue?.trim());\n});\n\nconst searchBarRef = ref<HTMLInputElement>();\nconst { hasFocus, activate, deactivate } = useFocusTrap(searchBarRef as any);\n\nconst isOpen = defineModel('isOpen', {\n  default: true,\n  required: true,\n  type: Boolean,\n});\n\nconst closeSearchBar = () => {\n  isOpen.value = false;\n  activeResult.value = undefined;\n  value.value = '';\n};\n\nconst scrollToFocusedIndex = (index: number) => {\n  itemRefs.value?.at(index)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst onResultClick = (index: number) => {\n  emit('onResultClick', index);\n  setValue('');\n  activeResult.value = undefined;\n};\n\nconst onResultHover = (index: number) => {\n  activeResult.value = index;\n  scrollToFocusedIndex(index);\n  emit('onResultHover', index);\n};\n\nconst onClickOutside = () => closeSearchBar();\n\nonKeyStroke(\n  ['ArrowUp', 'ArrowDown', 'Enter', 'Escape'],\n  e => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (hasFocus && props.results?.length) {\n      switch (e.key) {\n        case 'ArrowUp':\n          const previousActiveIndex = Math.max((activeResult.value ?? 0) - 1, 0);\n          onResultHover(previousActiveIndex);\n          break;\n        case 'ArrowDown':\n          const nextActiveIndex = activeResult.value !== undefined ? Math.min(activeResult.value + 1, props.results.length - 1) : 0;\n          onResultHover(nextActiveIndex);\n          break;\n        case 'Enter':\n          if (activeResult.value !== undefined) {\n            onResultClick(activeResult.value);\n          }\n          break;\n      }\n    }\n\n    if (e.key === 'Escape') {\n      closeSearchBar();\n    }\n  },\n  { target: searchBarRef },\n);\n\nwatch([isOpen, searchInput], async () => {\n  isBodyScrollLocked.value = isOpen.value;\n\n  if (isOpen.value) {\n    searchInput.value?.focus();\n\n    if (props.shouldHoverFirstResultOnOpen && props.results?.length) {\n      onResultHover(0);\n    }\n\n    await nextTick();\n    activate();\n  } else {\n    deactivate();\n    value.value = '';\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <CustomTransition name=\"fade\">\n      <div\n        v-if=\"isOpen\"\n        ref=\"searchBarRef\"\n        class=\"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0\"\n      >\n        <div\n          v-on-click-outside=\"onClickOutside\"\n          class=\"m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md\"\n          :class=\"{\n            'gap-6': props.results,\n          }\"\n        >\n          <!-- Search bar -->\n          <div class=\"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl\">\n            <ElIcon name=\"MagnifyingGlassIcon\" class=\"text-neutral-lighter w-6 h-6\" />\n            <input\n              ref=\"searchInput\"\n              v-model=\"value\"\n              :name=\"id || `${uuid}`\"\n              type=\"text\"\n              class=\"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0\"\n              :placeholder=\"placeholder\"\n              @focusin=\"\n                () => {\n                  isSearchFocused = true; // Set search focused\n                  isClickOutside = false; // Set click outside to false\n                }\n              \"\n              @focusout=\"\n                () => {\n                  isSearchFocused = false;\n                }\n              \"\n            />\n          </div>\n\n          <span class=\"flex flex-col gap-y-6 overflow-y-hidden\">\n            <ElDivider v-if=\"results\" direction=\"horizontal\" />\n            <div\n              v-if=\"blankResults && computedStatus.blank\"\n              class=\"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter\"\n            >\n              <ElIcon v-bind=\"blankResults.icon\" class=\"w-7 h-7\" />\n              <p class=\"text-sm font-semibold text-neutral-darker\">{{ blankResults.primaryRow }}</p>\n              <p class=\"text-sm font-normal\">{{ blankResults.secondaryRow }}</p>\n            </div>\n            <div v-if=\"results && computedStatus.filled\" class=\"flex py-2 overflow-y-hidden\">\n              <!-- Results Left column  -->\n              <div\n                class=\"flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen\"\n                :class=\"{ 'pr-6': slots.info && results.length > 0 }\"\n              >\n                <span v-if=\"text\" class=\"text-sm font-medium text-neutral-darker\">{{ text }}</span>\n                <div class=\"flex flex-col gap-1 w-full\">\n                  <ElVerticalTab\n                    v-for=\"(result, index) in results\"\n                    :key=\"index\"\n                    ref=\"itemRefs\"\n                    :color=\"color\"\n                    v-bind=\"result\"\n                    :status=\"activeResult === index ? 'hover' : 'default'\"\n                    tabindex=\"-1\"\n                    @click=\"() => onResultClick(index)\"\n                    @mouseover=\"() => onResultHover(index)\"\n                  />\n                </div>\n              </div>\n              <!-- Blank Results -->\n\n              <div v-if=\"slots.info\">\n                <ElDivider direction=\"vertical\" />\n              </div>\n              <div v-if=\"slots.info\" class=\"flex-1 pl-6 overflow-y-auto\">\n                <slot name=\"info\"></slot>\n              </div>\n            </div>\n            <div v-if=\"results && footer\" class=\"flex items-center gap-1 self-stretch\">\n              <span class=\"text-sm font-normal text-neutral-darker\">{{ footer.text }}</span>\n              <ElButton v-bind=\"footer.button\" variant=\"tertiary\" />\n            </div>\n          </span>\n        </div>\n\n        <!-- Backdrop -->\n        <div class=\"fixed inset-0 transition-opacity\">\n          <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n        </div>\n      </div>\n    </CustomTransition>\n  </Teleport>\n</template>\n"],"names":["elInputSearchColors","elInputSearchStatus","props","__props","emit","__emit","slots","useSlots","isBodyScrollLocked","useScrollLock","searchInput","ref","computedModelValue","computed","computedValidation","computedStatus","isClickOutside","isSearchFocused","itemRefs","activeResult","value","uuid","setValue","useInput","newValue","searchBarRef","hasFocus","activate","deactivate","useFocusTrap","isOpen","_useModel","closeSearchBar","scrollToFocusedIndex","index","_c","_b","_a","onResultClick","onResultHover","onClickOutside","onKeyStroke","e","previousActiveIndex","nextActiveIndex","watch","nextTick"],"mappings":"urEACaA,GAAsB,CAAC,UAAW,WAAW,EAG7CC,GAAsB,CAAC,UAAW,SAAU,OAAO,8iBAgBhE,MAAMC,EAAQC,EAuCRC,EAAOC,EACPC,EAAQC,EAAAA,WACRC,EAAqBC,EAAAA,cAAc,SAAS,IAAI,EAEhDC,EAAcC,MAA6B,IAAI,EAC/CC,EAAqBC,EAAA,SAAS,IAAMX,EAAM,UAAU,EACpDY,EAAqBD,EAAAA,SAAS,IAAM,CAACX,EAAM,UAAU,CAAC,EACtDa,EAAiBF,EAAAA,SAAS,KAAO,CACrC,QAAS,CAACX,EAAM,QAChB,OAAQA,EAAM,SAAWA,EAAM,QAAQ,OAAS,EAChD,MAAOA,EAAM,SAAWA,EAAM,QAAQ,SAAW,CACjD,EAAA,EACIc,EAAiBL,MAAI,EAAK,EAC1BM,EAAkBN,MAAI,EAAK,EAE3BO,EAAWP,MAA0C,CAAA,CAAE,EACvDQ,EAAeR,EAAAA,MAEf,CAAE,MAAAS,EAAO,KAAAC,EAAM,SAAAC,GAAaC,EAAAA,SAASX,EAAoBE,EAAoBZ,EAAM,KAAkBsB,GAAA,CACpGpB,EAAA,oBAAqBoB,GAAA,YAAAA,EAAU,MAAM,CAAA,CAC3C,EAEKC,EAAed,EAAAA,MACf,CAAE,SAAAe,EAAU,SAAAC,EAAU,WAAAC,CAAW,EAAIC,EAAAA,aAAaJ,CAAmB,EAErEK,EAASC,EAAAA,SAAY5B,EAAA,QAI1B,EAEK6B,EAAiB,IAAM,CAC3BF,EAAO,MAAQ,GACfX,EAAa,MAAQ,OACrBC,EAAM,MAAQ,EAAA,EAGVa,EAAwBC,GAAkB,YACrCC,GAAAC,GAAAC,EAAAnB,EAAA,QAAA,YAAAmB,EAAO,GAAGH,KAAV,YAAAE,EAAkB,MAAlB,MAAAD,EAAuB,eAAe,CAAE,MAAO,SAAA,EAAW,EAG/DG,EAAiBJ,GAAkB,CACvC9B,EAAK,gBAAiB8B,CAAK,EAC3BZ,EAAS,EAAE,EACXH,EAAa,MAAQ,MAAA,EAGjBoB,EAAiBL,GAAkB,CACvCf,EAAa,MAAQe,EACrBD,EAAqBC,CAAK,EAC1B9B,EAAK,gBAAiB8B,CAAK,CAAA,EAGvBM,EAAiB,IAAMR,IAE7BS,OAAAA,EAAA,YACE,CAAC,UAAW,YAAa,QAAS,QAAQ,EACrCC,GAAA,OAIC,GAHJA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAEdhB,KAAYW,EAAAnC,EAAM,UAAN,MAAAmC,EAAe,QAC7B,OAAQK,EAAE,IAAK,CACb,IAAK,UACH,MAAMC,EAAsB,KAAK,KAAKxB,EAAa,OAAS,GAAK,EAAG,CAAC,EACrEoB,EAAcI,CAAmB,EACjC,MACF,IAAK,YACH,MAAMC,EAAkBzB,EAAa,QAAU,OAAY,KAAK,IAAIA,EAAa,MAAQ,EAAGjB,EAAM,QAAQ,OAAS,CAAC,EAAI,EACxHqC,EAAcK,CAAe,EAC7B,MACF,IAAK,QACCzB,EAAa,QAAU,QACzBmB,EAAcnB,EAAa,KAAK,EAElC,KACJ,CAGEuB,EAAE,MAAQ,UACGV,GAEnB,EACA,CAAE,OAAQP,CAAa,CAAA,EAGzBoB,EAAAA,MAAM,CAACf,EAAQpB,CAAW,EAAG,SAAY,SACvCF,EAAmB,MAAQsB,EAAO,MAE9BA,EAAO,QACTO,EAAA3B,EAAY,QAAZ,MAAA2B,EAAmB,QAEfnC,EAAM,gCAAgCkC,EAAAlC,EAAM,UAAN,MAAAkC,EAAe,SACvDG,EAAc,CAAC,EAGjB,MAAMO,EAAS,SAAA,EACNnB,MAEEC,IACXR,EAAM,MAAQ,GAChB,CACD"}

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

@@ -1,2 +1,2 @@
-import{defineComponent as K,mergeModels as B,useSlots as J,ref as f,computed as w,useModel as Q,watch as W,nextTick as X,openBlock as l,createBlock as R,Teleport as Y,createVNode as v,withCtx as Z,createElementBlock as i,withDirectives as F,normalizeClass as E,createElementVNode as r,isRef as ee,unref as d,vModelText as te,createCommentVNode as c,mergeProps as O,toDisplayString as y,Fragment as oe,renderList as se,renderSlot as le}from"vue";import V from"../ElDivider.vue.esm2.js";import $ from"../ElIcon.vue.esm2.js";import re from"../ElVerticalTab.vue.esm2.js";/* empty css              */import"../polyfills.esm.js";import"vee-validate";import"../../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.esm.js";import"../../node_modules/lodash/lodash.esm.js";import"../tailwind.plugin.esm.js";import"../../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import ae from"../ElButton.vue.esm2.js";import ne from"../_CustomTransition.vue.esm2.js";import{useScrollLock as ie,onKeyStroke as ue}from"../../node_modules/@vueuse/core/index.esm.js";import"./ElInputSelect.vue.esm2.js";import"./ElInputText.vue.esm2.js";import"./ElInputCheckbox.vue.esm2.js";import"./ElInputDate.vue.esm2.js";import"./ElInputFile.vue.esm2.js";import"./ElInputMeasureUnit.vue.esm2.js";import"./ElInputNumber.vue.esm2.js";import"./ElInputPhone.vue.esm2.js";import"./ElInputTextarea.vue.esm2.js";import"../ElToast.vue.esm2.js";import"./ElInputRadioButton.vue.esm2.js";import{VOnClickOutside as ce}from"../../node_modules/@vueuse/components/index.esm.js";import{withTextualElInputProps as de,useInput as fe}from"./input.esm.js";import"../../node_modules/swiper/shared/swiper-core.esm.js";import{useFocusTrap as me}from"../../node_modules/@vueuse/integrations/useFocusTrap.esm.js";const pe={class:"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl"},ve=["name","placeholder"],he={class:"flex flex-col gap-y-6 overflow-y-hidden"},ye={key:1,class:"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter"},xe={class:"text-sm font-semibold text-neutral-darker"},ke={class:"text-sm font-normal"},ge={key:2,class:"flex py-2 overflow-y-hidden"},be={key:0,class:"text-sm font-medium text-neutral-darker"},we={class:"flex flex-col gap-1 w-full"},Re={key:0},Oe={key:1,class:"flex-1 pl-6 overflow-y-auto"},Se={key:3,class:"flex items-center gap-1 self-stretch"},Ce={class:"text-sm font-normal text-neutral-darker"},Ie={class:"fixed inset-0 transition-opacity"},Me={ref:"backdrop",class:"absolute inset-0 bg-gray-500 opacity-75"},lt=["primary","secondary"],rt=["default","filled","blank"],at=K({__name:"ElInputSearch",props:B({...de(),status:{type:String,default:"default"},text:{type:String,default:void 0},results:{type:Array,default:void 0},footer:{type:Object,default:void 0},blankResults:{type:Object,default:void 0},shouldHoverFirstResultOnOpen:{type:Boolean,default:!1},color:{type:String,default:"primary"}},{isOpen:{default:!0,required:!0,type:Boolean},isOpenModifiers:{}}),emits:B(["update:modelValue","onResultClick","onResultHover"],["update:isOpen"]),setup(t,{emit:A}){const s=t,x=A,k=J(),T=ie(document.body),g=f(null),D=w(()=>s.modelValue),H=w(()=>[s.validation]),S=w(()=>({default:!s.results,filled:s.results&&s.results.length>0,blank:s.results&&s.results.length===0})),j=f(!1),C=f(!1),I=f([]),a=f(),{value:m,uuid:z,setValue:L}=fe(D,H,s.name,e=>{x("update:modelValue",e==null?void 0:e.trim())}),b=f(),{hasFocus:N,activate:P,deactivate:U}=me(b),p=Q(t,"isOpen"),M=()=>{p.value=!1,a.value=void 0,m.value=""},q=e=>{var o,u,n;(n=(u=(o=I.value)==null?void 0:o.at(e))==null?void 0:u.$el)==null||n.scrollIntoView({block:"nearest"})},_=e=>{x("onResultClick",e),L(""),a.value=void 0},h=e=>{a.value=e,q(e),x("onResultHover",e)},G=()=>M();return ue(["ArrowUp","ArrowDown","Enter","Escape"],e=>{var o;if(e.preventDefault(),e.stopPropagation(),N&&((o=s.results)!=null&&o.length))switch(e.key){case"ArrowUp":const u=Math.max((a.value??0)-1,0);h(u);break;case"ArrowDown":const n=a.value!==void 0?Math.min(a.value+1,s.results.length-1):0;h(n);break;case"Enter":a.value!==void 0&&_(a.value);break}e.key==="Escape"&&M()},{target:b}),W([p,g],async()=>{var e,o;T.value=p.value,p.value?((e=g.value)==null||e.focus(),s.shouldHoverFirstResultOnOpen&&((o=s.results)!=null&&o.length)&&h(0),await X(),P()):(U(),m.value="")}),(e,o)=>(l(),R(Y,{to:"body"},[v(ne,{name:"fade"},{default:Z(()=>[p.value?(l(),i("div",{key:0,ref_key:"searchBarRef",ref:b,class:"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0"},[F((l(),i("div",{class:E(["m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md",{"gap-6":s.results}])},[r("div",pe,[v($,{name:"MagnifyingGlassIcon",class:"text-neutral-lighter w-6 h-6"}),F(r("input",{ref_key:"searchInput",ref:g,"onUpdate:modelValue":o[0]||(o[0]=u=>ee(m)?m.value=u:null),name:e.id||`${d(z)}`,type:"text",class:"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0",placeholder:e.placeholder,onFocusin:o[1]||(o[1]=()=>{C.value=!0,j.value=!1}),onFocusout:o[2]||(o[2]=()=>{C.value=!1})},null,40,ve),[[te,d(m)]])]),r("span",he,[t.results?(l(),R(V,{key:0,direction:"horizontal"})):c("",!0),t.blankResults&&S.value.blank?(l(),i("div",ye,[v($,O(t.blankResults.icon,{class:"w-7 h-7"}),null,16),r("p",xe,y(t.blankResults.primaryRow),1),r("p",ke,y(t.blankResults.secondaryRow),1)])):c("",!0),t.results&&S.value.filled?(l(),i("div",ge,[r("div",{class:E(["flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen",{"pr-6":d(k).info&&t.results.length>0}])},[t.text?(l(),i("span",be,y(t.text),1)):c("",!0),r("div",we,[(l(!0),i(oe,null,se(t.results,(u,n)=>(l(),R(re,O({key:n,ref_for:!0,ref_key:"itemRefs",ref:I,color:t.color},u,{status:a.value===n?"hover":"default",tabindex:"-1",onClick:()=>_(n),onMouseover:()=>h(n)}),null,16,["color","status","onClick","onMouseover"]))),128))])],2),d(k).info?(l(),i("div",Re,[v(V,{direction:"vertical"})])):c("",!0),d(k).info?(l(),i("div",Oe,[le(e.$slots,"info")])):c("",!0)])):c("",!0),t.results&&t.footer?(l(),i("div",Se,[r("span",Ce,y(t.footer.text),1),v(d(ae),O(t.footer.button,{variant:"tertiary"}),null,16)])):c("",!0)])],2)),[[d(ce),G]]),r("div",Ie,[r("div",Me,null,512)])],512)):c("",!0)]),_:3})]))}});export{at as default,lt as elInputSearchColors,rt as elInputSearchStatus};
+import{defineComponent as K,mergeModels as B,useSlots as J,ref as f,computed as w,useModel as Q,watch as W,nextTick as X,openBlock as l,createBlock as R,Teleport as Y,createVNode as v,withCtx as Z,createElementBlock as i,withDirectives as F,normalizeClass as E,createElementVNode as r,isRef as ee,unref as d,vModelText as te,createCommentVNode as c,mergeProps as O,toDisplayString as y,Fragment as oe,renderList as se,renderSlot as le}from"vue";import V from"../ElDivider.vue.esm2.js";import $ from"../ElIcon.vue.esm2.js";import re from"../ElVerticalTab.vue.esm2.js";/* empty css              */import"../polyfills.esm.js";import"vee-validate";import"../../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.esm.js";import"../../node_modules/lodash/lodash.esm.js";import"../tailwind.plugin.esm.js";import"../../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import ae from"../ElButton.vue.esm2.js";import ne from"../_CustomTransition.vue.esm2.js";import{useScrollLock as ie,onKeyStroke as ue}from"../../node_modules/@vueuse/core/index.esm.js";import"./ElInputSelect.vue.esm2.js";import"./ElInputText.vue.esm2.js";import"./ElInputCheckbox.vue.esm2.js";import"./ElInputDate.vue.esm2.js";import"./ElInputFile.vue.esm2.js";import"./ElInputMeasureUnit.vue.esm2.js";import"./ElInputNumber.vue.esm2.js";import"./ElInputPhone.vue.esm2.js";import"./ElInputTextarea.vue.esm2.js";import"../ElToast.vue.esm2.js";import"./ElInputRadioButton.vue.esm2.js";import{VOnClickOutside as ce}from"../../node_modules/@vueuse/components/index.esm.js";import"../composable/useModalStack.esm.js";import{withTextualElInputProps as de,useInput as fe}from"./input.esm.js";import"../../node_modules/swiper/shared/swiper-core.esm.js";import{useFocusTrap as me}from"../../node_modules/@vueuse/integrations/useFocusTrap.esm.js";const pe={class:"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl"},ve=["name","placeholder"],he={class:"flex flex-col gap-y-6 overflow-y-hidden"},ye={key:1,class:"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter"},xe={class:"text-sm font-semibold text-neutral-darker"},ke={class:"text-sm font-normal"},ge={key:2,class:"flex py-2 overflow-y-hidden"},be={key:0,class:"text-sm font-medium text-neutral-darker"},we={class:"flex flex-col gap-1 w-full"},Re={key:0},Oe={key:1,class:"flex-1 pl-6 overflow-y-auto"},Se={key:3,class:"flex items-center gap-1 self-stretch"},Ce={class:"text-sm font-normal text-neutral-darker"},Ie={class:"fixed inset-0 transition-opacity"},Me={ref:"backdrop",class:"absolute inset-0 bg-gray-500 opacity-75"},rt=["primary","secondary"],at=["default","filled","blank"],nt=K({__name:"ElInputSearch",props:B({...de(),status:{type:String,default:"default"},text:{type:String,default:void 0},results:{type:Array,default:void 0},footer:{type:Object,default:void 0},blankResults:{type:Object,default:void 0},shouldHoverFirstResultOnOpen:{type:Boolean,default:!1},color:{type:String,default:"primary"}},{isOpen:{default:!0,required:!0,type:Boolean},isOpenModifiers:{}}),emits:B(["update:modelValue","onResultClick","onResultHover"],["update:isOpen"]),setup(t,{emit:A}){const s=t,x=A,k=J(),T=ie(document.body),g=f(null),D=w(()=>s.modelValue),H=w(()=>[s.validation]),S=w(()=>({default:!s.results,filled:s.results&&s.results.length>0,blank:s.results&&s.results.length===0})),j=f(!1),C=f(!1),I=f([]),a=f(),{value:m,uuid:z,setValue:L}=fe(D,H,s.name,e=>{x("update:modelValue",e==null?void 0:e.trim())}),b=f(),{hasFocus:N,activate:P,deactivate:U}=me(b),p=Q(t,"isOpen"),M=()=>{p.value=!1,a.value=void 0,m.value=""},q=e=>{var o,u,n;(n=(u=(o=I.value)==null?void 0:o.at(e))==null?void 0:u.$el)==null||n.scrollIntoView({block:"nearest"})},_=e=>{x("onResultClick",e),L(""),a.value=void 0},h=e=>{a.value=e,q(e),x("onResultHover",e)},G=()=>M();return ue(["ArrowUp","ArrowDown","Enter","Escape"],e=>{var o;if(e.preventDefault(),e.stopPropagation(),N&&((o=s.results)!=null&&o.length))switch(e.key){case"ArrowUp":const u=Math.max((a.value??0)-1,0);h(u);break;case"ArrowDown":const n=a.value!==void 0?Math.min(a.value+1,s.results.length-1):0;h(n);break;case"Enter":a.value!==void 0&&_(a.value);break}e.key==="Escape"&&M()},{target:b}),W([p,g],async()=>{var e,o;T.value=p.value,p.value?((e=g.value)==null||e.focus(),s.shouldHoverFirstResultOnOpen&&((o=s.results)!=null&&o.length)&&h(0),await X(),P()):(U(),m.value="")}),(e,o)=>(l(),R(Y,{to:"body"},[v(ne,{name:"fade"},{default:Z(()=>[p.value?(l(),i("div",{key:0,ref_key:"searchBarRef",ref:b,class:"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0"},[F((l(),i("div",{class:E(["m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md",{"gap-6":s.results}])},[r("div",pe,[v($,{name:"MagnifyingGlassIcon",class:"text-neutral-lighter w-6 h-6"}),F(r("input",{ref_key:"searchInput",ref:g,"onUpdate:modelValue":o[0]||(o[0]=u=>ee(m)?m.value=u:null),name:e.id||`${d(z)}`,type:"text",class:"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0",placeholder:e.placeholder,onFocusin:o[1]||(o[1]=()=>{C.value=!0,j.value=!1}),onFocusout:o[2]||(o[2]=()=>{C.value=!1})},null,40,ve),[[te,d(m)]])]),r("span",he,[t.results?(l(),R(V,{key:0,direction:"horizontal"})):c("",!0),t.blankResults&&S.value.blank?(l(),i("div",ye,[v($,O(t.blankResults.icon,{class:"w-7 h-7"}),null,16),r("p",xe,y(t.blankResults.primaryRow),1),r("p",ke,y(t.blankResults.secondaryRow),1)])):c("",!0),t.results&&S.value.filled?(l(),i("div",ge,[r("div",{class:E(["flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen",{"pr-6":d(k).info&&t.results.length>0}])},[t.text?(l(),i("span",be,y(t.text),1)):c("",!0),r("div",we,[(l(!0),i(oe,null,se(t.results,(u,n)=>(l(),R(re,O({key:n,ref_for:!0,ref_key:"itemRefs",ref:I,color:t.color},u,{status:a.value===n?"hover":"default",tabindex:"-1",onClick:()=>_(n),onMouseover:()=>h(n)}),null,16,["color","status","onClick","onMouseover"]))),128))])],2),d(k).info?(l(),i("div",Re,[v(V,{direction:"vertical"})])):c("",!0),d(k).info?(l(),i("div",Oe,[le(e.$slots,"info")])):c("",!0)])):c("",!0),t.results&&t.footer?(l(),i("div",Se,[r("span",Ce,y(t.footer.text),1),v(d(ae),O(t.footer.button,{variant:"tertiary"}),null,16)])):c("",!0)])],2)),[[d(ce),G]]),r("div",Ie,[r("div",Me,null,512)])],512)):c("",!0)]),_:3})]))}});export{nt as default,rt as elInputSearchColors,at as elInputSearchStatus};
 //# sourceMappingURL=ElInputSearch.vue.esm2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ElInputSearch.vue.esm2.js","sources":["../../../src/forms/ElInputSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputSearchColors = ['primary', 'secondary'] as const;\nexport type ElInputSearchColors = (typeof elInputSearchColors)[number];\n\nexport const elInputSearchStatus = ['default', 'filled', 'blank'] as const;\nexport type ElInputSearchStatus = (typeof elInputSearchStatus)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport ElDivider from '@/ElDivider.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElVerticalTab from '@/ElVerticalTab.vue';\nimport { ElButton } from '..';\nimport { computed, PropType, ref, useSlots, watch, nextTick } from 'vue';\nimport { useInput, withTextualElInputProps } from './input';\nimport { vOnClickOutside } from '@vueuse/components';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport { onKeyStroke, useScrollLock } from '@vueuse/core';\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap';\n\nconst props = defineProps({\n  ...withTextualElInputProps(),\n  status: {\n    type: String as PropType<ElInputSearchStatus>,\n    default: 'default',\n  },\n  text: {\n    type: String,\n    default: undefined,\n  },\n  results: {\n    type: Array as PropType<InstanceType<typeof ElVerticalTab>['$props'][]>,\n    default: undefined,\n  },\n  footer: {\n    type: Object as PropType<{\n      text: string;\n      button: InstanceType<typeof ElButton>['$props'];\n    }>,\n    default: undefined,\n  },\n  blankResults: {\n    type: Object as PropType<{\n      icon: InstanceType<typeof ElIcon>['$props'];\n      primaryRow: string;\n      secondaryRow?: string;\n    }>,\n    default: undefined,\n  },\n  shouldHoverFirstResultOnOpen: {\n    type: Boolean,\n    default: false,\n  },\n  color: {\n    type: String as PropType<ElInputSearchColors>,\n    default: 'primary',\n  },\n});\n\nconst emit = defineEmits(['update:modelValue', 'onResultClick', 'onResultHover']);\nconst slots = useSlots();\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst searchInput = ref<HTMLInputElement | null>(null);\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\nconst computedStatus = computed(() => ({\n  default: !props.results,\n  filled: props.results && props.results.length > 0,\n  blank: props.results && props.results.length === 0,\n}));\nconst isClickOutside = ref(false);\nconst isSearchFocused = ref(false);\n\nconst itemRefs = ref<InstanceType<typeof ElVerticalTab>[]>([]);\nconst activeResult = ref<number | undefined>();\n\nconst { value, uuid, setValue } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n  emit('update:modelValue', newValue?.trim());\n});\n\nconst searchBarRef = ref<HTMLInputElement>();\nconst { hasFocus, activate, deactivate } = useFocusTrap(searchBarRef as any);\n\nconst isOpen = defineModel('isOpen', {\n  default: true,\n  required: true,\n  type: Boolean,\n});\n\nconst closeSearchBar = () => {\n  isOpen.value = false;\n  activeResult.value = undefined;\n  value.value = '';\n};\n\nconst scrollToFocusedIndex = (index: number) => {\n  itemRefs.value?.at(index)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst onResultClick = (index: number) => {\n  emit('onResultClick', index);\n  setValue('');\n  activeResult.value = undefined;\n};\n\nconst onResultHover = (index: number) => {\n  activeResult.value = index;\n  scrollToFocusedIndex(index);\n  emit('onResultHover', index);\n};\n\nconst onClickOutside = () => closeSearchBar();\n\nonKeyStroke(\n  ['ArrowUp', 'ArrowDown', 'Enter', 'Escape'],\n  e => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (hasFocus && props.results?.length) {\n      switch (e.key) {\n        case 'ArrowUp':\n          const previousActiveIndex = Math.max((activeResult.value ?? 0) - 1, 0);\n          onResultHover(previousActiveIndex);\n          break;\n        case 'ArrowDown':\n          const nextActiveIndex = activeResult.value !== undefined ? Math.min(activeResult.value + 1, props.results.length - 1) : 0;\n          onResultHover(nextActiveIndex);\n          break;\n        case 'Enter':\n          if (activeResult.value !== undefined) {\n            onResultClick(activeResult.value);\n          }\n          break;\n      }\n    }\n\n    if (e.key === 'Escape') {\n      closeSearchBar();\n    }\n  },\n  { target: searchBarRef },\n);\n\nwatch([isOpen, searchInput], async () => {\n  isBodyScrollLocked.value = isOpen.value;\n\n  if (isOpen.value) {\n    searchInput.value?.focus();\n\n    if (props.shouldHoverFirstResultOnOpen && props.results?.length) {\n      onResultHover(0);\n    }\n\n    await nextTick();\n    activate();\n  } else {\n    deactivate();\n    value.value = '';\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <CustomTransition name=\"fade\">\n      <div\n        v-if=\"isOpen\"\n        ref=\"searchBarRef\"\n        class=\"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0\"\n      >\n        <div\n          v-on-click-outside=\"onClickOutside\"\n          class=\"m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md\"\n          :class=\"{\n            'gap-6': props.results,\n          }\"\n        >\n          <!-- Search bar -->\n          <div class=\"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl\">\n            <ElIcon name=\"MagnifyingGlassIcon\" class=\"text-neutral-lighter w-6 h-6\" />\n            <input\n              ref=\"searchInput\"\n              v-model=\"value\"\n              :name=\"id || `${uuid}`\"\n              type=\"text\"\n              class=\"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0\"\n              :placeholder=\"placeholder\"\n              @focusin=\"\n                () => {\n                  isSearchFocused = true; // Set search focused\n                  isClickOutside = false; // Set click outside to false\n                }\n              \"\n              @focusout=\"\n                () => {\n                  isSearchFocused = false;\n                }\n              \"\n            />\n          </div>\n\n          <span class=\"flex flex-col gap-y-6 overflow-y-hidden\">\n            <ElDivider v-if=\"results\" direction=\"horizontal\" />\n            <div\n              v-if=\"blankResults && computedStatus.blank\"\n              class=\"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter\"\n            >\n              <ElIcon v-bind=\"blankResults.icon\" class=\"w-7 h-7\" />\n              <p class=\"text-sm font-semibold text-neutral-darker\">{{ blankResults.primaryRow }}</p>\n              <p class=\"text-sm font-normal\">{{ blankResults.secondaryRow }}</p>\n            </div>\n            <div v-if=\"results && computedStatus.filled\" class=\"flex py-2 overflow-y-hidden\">\n              <!-- Results Left column  -->\n              <div\n                class=\"flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen\"\n                :class=\"{ 'pr-6': slots.info && results.length > 0 }\"\n              >\n                <span v-if=\"text\" class=\"text-sm font-medium text-neutral-darker\">{{ text }}</span>\n                <div class=\"flex flex-col gap-1 w-full\">\n                  <ElVerticalTab\n                    v-for=\"(result, index) in results\"\n                    :key=\"index\"\n                    ref=\"itemRefs\"\n                    :color=\"color\"\n                    v-bind=\"result\"\n                    :status=\"activeResult === index ? 'hover' : 'default'\"\n                    tabindex=\"-1\"\n                    @click=\"() => onResultClick(index)\"\n                    @mouseover=\"() => onResultHover(index)\"\n                  />\n                </div>\n              </div>\n              <!-- Blank Results -->\n\n              <div v-if=\"slots.info\">\n                <ElDivider direction=\"vertical\" />\n              </div>\n              <div v-if=\"slots.info\" class=\"flex-1 pl-6 overflow-y-auto\">\n                <slot name=\"info\"></slot>\n              </div>\n            </div>\n            <div v-if=\"results && footer\" class=\"flex items-center gap-1 self-stretch\">\n              <span class=\"text-sm font-normal text-neutral-darker\">{{ footer.text }}</span>\n              <ElButton v-bind=\"footer.button\" variant=\"tertiary\" />\n            </div>\n          </span>\n        </div>\n\n        <!-- Backdrop -->\n        <div class=\"fixed inset-0 transition-opacity\">\n          <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n        </div>\n      </div>\n    </CustomTransition>\n  </Teleport>\n</template>\n"],"names":["elInputSearchColors","elInputSearchStatus","props","__props","emit","__emit","slots","useSlots","isBodyScrollLocked","useScrollLock","searchInput","ref","computedModelValue","computed","computedValidation","computedStatus","isClickOutside","isSearchFocused","itemRefs","activeResult","value","uuid","setValue","useInput","newValue","searchBarRef","hasFocus","activate","deactivate","useFocusTrap","isOpen","_useModel","closeSearchBar","scrollToFocusedIndex","index","_c","_b","_a","onResultClick","onResultHover","onClickOutside","onKeyStroke","previousActiveIndex","nextActiveIndex","watch","nextTick"],"mappings":"8gFACaA,GAAsB,CAAC,UAAW,WAAW,EAG7CC,GAAsB,CAAC,UAAW,SAAU,OAAO,+eAgBhE,MAAMC,EAAQC,EAuCRC,EAAOC,EACPC,EAAQC,IACRC,EAAqBC,GAAc,SAAS,IAAI,EAEhDC,EAAcC,EAA6B,IAAI,EAC/CC,EAAqBC,EAAS,IAAMX,EAAM,UAAU,EACpDY,EAAqBD,EAAS,IAAM,CAACX,EAAM,UAAU,CAAC,EACtDa,EAAiBF,EAAS,KAAO,CACrC,QAAS,CAACX,EAAM,QAChB,OAAQA,EAAM,SAAWA,EAAM,QAAQ,OAAS,EAChD,MAAOA,EAAM,SAAWA,EAAM,QAAQ,SAAW,CACjD,EAAA,EACIc,EAAiBL,EAAI,EAAK,EAC1BM,EAAkBN,EAAI,EAAK,EAE3BO,EAAWP,EAA0C,CAAA,CAAE,EACvDQ,EAAeR,IAEf,CAAE,MAAAS,EAAO,KAAAC,EAAM,SAAAC,GAAaC,GAASX,EAAoBE,EAAoBZ,EAAM,KAAkBsB,GAAA,CACpGpB,EAAA,oBAAqBoB,GAAA,YAAAA,EAAU,MAAM,CAAA,CAC3C,EAEKC,EAAed,IACf,CAAE,SAAAe,EAAU,SAAAC,EAAU,WAAAC,CAAW,EAAIC,GAAaJ,CAAmB,EAErEK,EAASC,EAAY5B,EAAA,QAI1B,EAEK6B,EAAiB,IAAM,CAC3BF,EAAO,MAAQ,GACfX,EAAa,MAAQ,OACrBC,EAAM,MAAQ,EAAA,EAGVa,EAAwBC,GAAkB,YACrCC,GAAAC,GAAAC,EAAAnB,EAAA,QAAA,YAAAmB,EAAO,GAAGH,KAAV,YAAAE,EAAkB,MAAlB,MAAAD,EAAuB,eAAe,CAAE,MAAO,SAAA,EAAW,EAG/DG,EAAiBJ,GAAkB,CACvC9B,EAAK,gBAAiB8B,CAAK,EAC3BZ,EAAS,EAAE,EACXH,EAAa,MAAQ,MAAA,EAGjBoB,EAAiBL,GAAkB,CACvCf,EAAa,MAAQe,EACrBD,EAAqBC,CAAK,EAC1B9B,EAAK,gBAAiB8B,CAAK,CAAA,EAGvBM,EAAiB,IAAMR,IAE7B,OAAAS,GACE,CAAC,UAAW,YAAa,QAAS,QAAQ,EACrC,GAAA,OAIC,GAHJ,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAEdf,KAAYW,EAAAnC,EAAM,UAAN,MAAAmC,EAAe,QAC7B,OAAQ,EAAE,IAAK,CACb,IAAK,UACH,MAAMK,EAAsB,KAAK,KAAKvB,EAAa,OAAS,GAAK,EAAG,CAAC,EACrEoB,EAAcG,CAAmB,EACjC,MACF,IAAK,YACH,MAAMC,EAAkBxB,EAAa,QAAU,OAAY,KAAK,IAAIA,EAAa,MAAQ,EAAGjB,EAAM,QAAQ,OAAS,CAAC,EAAI,EACxHqC,EAAcI,CAAe,EAC7B,MACF,IAAK,QACCxB,EAAa,QAAU,QACzBmB,EAAcnB,EAAa,KAAK,EAElC,KACJ,CAGE,EAAE,MAAQ,UACGa,GAEnB,EACA,CAAE,OAAQP,CAAa,CAAA,EAGzBmB,EAAM,CAACd,EAAQpB,CAAW,EAAG,SAAY,SACvCF,EAAmB,MAAQsB,EAAO,MAE9BA,EAAO,QACTO,EAAA3B,EAAY,QAAZ,MAAA2B,EAAmB,QAEfnC,EAAM,gCAAgCkC,EAAAlC,EAAM,UAAN,MAAAkC,EAAe,SACvDG,EAAc,CAAC,EAGjB,MAAMM,EAAS,EACNlB,MAEEC,IACXR,EAAM,MAAQ,GAChB,CACD"}
+{"version":3,"file":"ElInputSearch.vue.esm2.js","sources":["../../../src/forms/ElInputSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputSearchColors = ['primary', 'secondary'] as const;\nexport type ElInputSearchColors = (typeof elInputSearchColors)[number];\n\nexport const elInputSearchStatus = ['default', 'filled', 'blank'] as const;\nexport type ElInputSearchStatus = (typeof elInputSearchStatus)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport ElDivider from '@/ElDivider.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport ElVerticalTab from '@/ElVerticalTab.vue';\nimport { ElButton } from '..';\nimport { computed, PropType, ref, useSlots, watch, nextTick } from 'vue';\nimport { useInput, withTextualElInputProps } from './input';\nimport { vOnClickOutside } from '@vueuse/components';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport { onKeyStroke, useScrollLock } from '@vueuse/core';\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap';\n\nconst props = defineProps({\n  ...withTextualElInputProps(),\n  status: {\n    type: String as PropType<ElInputSearchStatus>,\n    default: 'default',\n  },\n  text: {\n    type: String,\n    default: undefined,\n  },\n  results: {\n    type: Array as PropType<InstanceType<typeof ElVerticalTab>['$props'][]>,\n    default: undefined,\n  },\n  footer: {\n    type: Object as PropType<{\n      text: string;\n      button: InstanceType<typeof ElButton>['$props'];\n    }>,\n    default: undefined,\n  },\n  blankResults: {\n    type: Object as PropType<{\n      icon: InstanceType<typeof ElIcon>['$props'];\n      primaryRow: string;\n      secondaryRow?: string;\n    }>,\n    default: undefined,\n  },\n  shouldHoverFirstResultOnOpen: {\n    type: Boolean,\n    default: false,\n  },\n  color: {\n    type: String as PropType<ElInputSearchColors>,\n    default: 'primary',\n  },\n});\n\nconst emit = defineEmits(['update:modelValue', 'onResultClick', 'onResultHover']);\nconst slots = useSlots();\nconst isBodyScrollLocked = useScrollLock(document.body);\n\nconst searchInput = ref<HTMLInputElement | null>(null);\nconst computedModelValue = computed(() => props.modelValue);\nconst computedValidation = computed(() => [props.validation]);\nconst computedStatus = computed(() => ({\n  default: !props.results,\n  filled: props.results && props.results.length > 0,\n  blank: props.results && props.results.length === 0,\n}));\nconst isClickOutside = ref(false);\nconst isSearchFocused = ref(false);\n\nconst itemRefs = ref<InstanceType<typeof ElVerticalTab>[]>([]);\nconst activeResult = ref<number | undefined>();\n\nconst { value, uuid, setValue } = useInput(computedModelValue, computedValidation, props.name, newValue => {\n  emit('update:modelValue', newValue?.trim());\n});\n\nconst searchBarRef = ref<HTMLInputElement>();\nconst { hasFocus, activate, deactivate } = useFocusTrap(searchBarRef as any);\n\nconst isOpen = defineModel('isOpen', {\n  default: true,\n  required: true,\n  type: Boolean,\n});\n\nconst closeSearchBar = () => {\n  isOpen.value = false;\n  activeResult.value = undefined;\n  value.value = '';\n};\n\nconst scrollToFocusedIndex = (index: number) => {\n  itemRefs.value?.at(index)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst onResultClick = (index: number) => {\n  emit('onResultClick', index);\n  setValue('');\n  activeResult.value = undefined;\n};\n\nconst onResultHover = (index: number) => {\n  activeResult.value = index;\n  scrollToFocusedIndex(index);\n  emit('onResultHover', index);\n};\n\nconst onClickOutside = () => closeSearchBar();\n\nonKeyStroke(\n  ['ArrowUp', 'ArrowDown', 'Enter', 'Escape'],\n  e => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (hasFocus && props.results?.length) {\n      switch (e.key) {\n        case 'ArrowUp':\n          const previousActiveIndex = Math.max((activeResult.value ?? 0) - 1, 0);\n          onResultHover(previousActiveIndex);\n          break;\n        case 'ArrowDown':\n          const nextActiveIndex = activeResult.value !== undefined ? Math.min(activeResult.value + 1, props.results.length - 1) : 0;\n          onResultHover(nextActiveIndex);\n          break;\n        case 'Enter':\n          if (activeResult.value !== undefined) {\n            onResultClick(activeResult.value);\n          }\n          break;\n      }\n    }\n\n    if (e.key === 'Escape') {\n      closeSearchBar();\n    }\n  },\n  { target: searchBarRef },\n);\n\nwatch([isOpen, searchInput], async () => {\n  isBodyScrollLocked.value = isOpen.value;\n\n  if (isOpen.value) {\n    searchInput.value?.focus();\n\n    if (props.shouldHoverFirstResultOnOpen && props.results?.length) {\n      onResultHover(0);\n    }\n\n    await nextTick();\n    activate();\n  } else {\n    deactivate();\n    value.value = '';\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <CustomTransition name=\"fade\">\n      <div\n        v-if=\"isOpen\"\n        ref=\"searchBarRef\"\n        class=\"fixed inset-x-0 top-0 z-40 flex justify-center max-h-full overflow-y-auto px-4 pt-20 pb-6 max-sm:p-0\"\n      >\n        <div\n          v-on-click-outside=\"onClickOutside\"\n          class=\"m-10 z-50 md:max-w-3xl w-full flex flex-col p-6 border rounded-2xl border-neutral-surface bg-neutral-surface shadow-md\"\n          :class=\"{\n            'gap-6': props.results,\n          }\"\n        >\n          <!-- Search bar -->\n          <div class=\"flex flex-row items-center gap-3 bg-neutral-surface rounded-2xl\">\n            <ElIcon name=\"MagnifyingGlassIcon\" class=\"text-neutral-lighter w-6 h-6\" />\n            <input\n              ref=\"searchInput\"\n              v-model=\"value\"\n              :name=\"id || `${uuid}`\"\n              type=\"text\"\n              class=\"p-0 text-lg font-normal flex-1 outline-none border-none bg-neutral-surface focus:ring-none focus:border-none focus:outline-none border-transparent focus:border-transparent focus:ring-0\"\n              :placeholder=\"placeholder\"\n              @focusin=\"\n                () => {\n                  isSearchFocused = true; // Set search focused\n                  isClickOutside = false; // Set click outside to false\n                }\n              \"\n              @focusout=\"\n                () => {\n                  isSearchFocused = false;\n                }\n              \"\n            />\n          </div>\n\n          <span class=\"flex flex-col gap-y-6 overflow-y-hidden\">\n            <ElDivider v-if=\"results\" direction=\"horizontal\" />\n            <div\n              v-if=\"blankResults && computedStatus.blank\"\n              class=\"flex flex-col items-center justify-center flex-1 gap-4 py-8 text-neutral-lighter\"\n            >\n              <ElIcon v-bind=\"blankResults.icon\" class=\"w-7 h-7\" />\n              <p class=\"text-sm font-semibold text-neutral-darker\">{{ blankResults.primaryRow }}</p>\n              <p class=\"text-sm font-normal\">{{ blankResults.secondaryRow }}</p>\n            </div>\n            <div v-if=\"results && computedStatus.filled\" class=\"flex py-2 overflow-y-hidden\">\n              <!-- Results Left column  -->\n              <div\n                class=\"flex flex-col items-start flex-1 gap-6 overflow-y-auto max-h-50-screen\"\n                :class=\"{ 'pr-6': slots.info && results.length > 0 }\"\n              >\n                <span v-if=\"text\" class=\"text-sm font-medium text-neutral-darker\">{{ text }}</span>\n                <div class=\"flex flex-col gap-1 w-full\">\n                  <ElVerticalTab\n                    v-for=\"(result, index) in results\"\n                    :key=\"index\"\n                    ref=\"itemRefs\"\n                    :color=\"color\"\n                    v-bind=\"result\"\n                    :status=\"activeResult === index ? 'hover' : 'default'\"\n                    tabindex=\"-1\"\n                    @click=\"() => onResultClick(index)\"\n                    @mouseover=\"() => onResultHover(index)\"\n                  />\n                </div>\n              </div>\n              <!-- Blank Results -->\n\n              <div v-if=\"slots.info\">\n                <ElDivider direction=\"vertical\" />\n              </div>\n              <div v-if=\"slots.info\" class=\"flex-1 pl-6 overflow-y-auto\">\n                <slot name=\"info\"></slot>\n              </div>\n            </div>\n            <div v-if=\"results && footer\" class=\"flex items-center gap-1 self-stretch\">\n              <span class=\"text-sm font-normal text-neutral-darker\">{{ footer.text }}</span>\n              <ElButton v-bind=\"footer.button\" variant=\"tertiary\" />\n            </div>\n          </span>\n        </div>\n\n        <!-- Backdrop -->\n        <div class=\"fixed inset-0 transition-opacity\">\n          <div ref=\"backdrop\" class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>\n        </div>\n      </div>\n    </CustomTransition>\n  </Teleport>\n</template>\n"],"names":["elInputSearchColors","elInputSearchStatus","props","__props","emit","__emit","slots","useSlots","isBodyScrollLocked","useScrollLock","searchInput","ref","computedModelValue","computed","computedValidation","computedStatus","isClickOutside","isSearchFocused","itemRefs","activeResult","value","uuid","setValue","useInput","newValue","searchBarRef","hasFocus","activate","deactivate","useFocusTrap","isOpen","_useModel","closeSearchBar","scrollToFocusedIndex","index","_c","_b","_a","onResultClick","onResultHover","onClickOutside","onKeyStroke","previousActiveIndex","nextActiveIndex","watch","nextTick"],"mappings":"yjFACaA,GAAsB,CAAC,UAAW,WAAW,EAG7CC,GAAsB,CAAC,UAAW,SAAU,OAAO,+eAgBhE,MAAMC,EAAQC,EAuCRC,EAAOC,EACPC,EAAQC,IACRC,EAAqBC,GAAc,SAAS,IAAI,EAEhDC,EAAcC,EAA6B,IAAI,EAC/CC,EAAqBC,EAAS,IAAMX,EAAM,UAAU,EACpDY,EAAqBD,EAAS,IAAM,CAACX,EAAM,UAAU,CAAC,EACtDa,EAAiBF,EAAS,KAAO,CACrC,QAAS,CAACX,EAAM,QAChB,OAAQA,EAAM,SAAWA,EAAM,QAAQ,OAAS,EAChD,MAAOA,EAAM,SAAWA,EAAM,QAAQ,SAAW,CACjD,EAAA,EACIc,EAAiBL,EAAI,EAAK,EAC1BM,EAAkBN,EAAI,EAAK,EAE3BO,EAAWP,EAA0C,CAAA,CAAE,EACvDQ,EAAeR,IAEf,CAAE,MAAAS,EAAO,KAAAC,EAAM,SAAAC,GAAaC,GAASX,EAAoBE,EAAoBZ,EAAM,KAAkBsB,GAAA,CACpGpB,EAAA,oBAAqBoB,GAAA,YAAAA,EAAU,MAAM,CAAA,CAC3C,EAEKC,EAAed,IACf,CAAE,SAAAe,EAAU,SAAAC,EAAU,WAAAC,CAAW,EAAIC,GAAaJ,CAAmB,EAErEK,EAASC,EAAY5B,EAAA,QAI1B,EAEK6B,EAAiB,IAAM,CAC3BF,EAAO,MAAQ,GACfX,EAAa,MAAQ,OACrBC,EAAM,MAAQ,EAAA,EAGVa,EAAwBC,GAAkB,YACrCC,GAAAC,GAAAC,EAAAnB,EAAA,QAAA,YAAAmB,EAAO,GAAGH,KAAV,YAAAE,EAAkB,MAAlB,MAAAD,EAAuB,eAAe,CAAE,MAAO,SAAA,EAAW,EAG/DG,EAAiBJ,GAAkB,CACvC9B,EAAK,gBAAiB8B,CAAK,EAC3BZ,EAAS,EAAE,EACXH,EAAa,MAAQ,MAAA,EAGjBoB,EAAiBL,GAAkB,CACvCf,EAAa,MAAQe,EACrBD,EAAqBC,CAAK,EAC1B9B,EAAK,gBAAiB8B,CAAK,CAAA,EAGvBM,EAAiB,IAAMR,IAE7B,OAAAS,GACE,CAAC,UAAW,YAAa,QAAS,QAAQ,EACrC,GAAA,OAIC,GAHJ,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAEdf,KAAYW,EAAAnC,EAAM,UAAN,MAAAmC,EAAe,QAC7B,OAAQ,EAAE,IAAK,CACb,IAAK,UACH,MAAMK,EAAsB,KAAK,KAAKvB,EAAa,OAAS,GAAK,EAAG,CAAC,EACrEoB,EAAcG,CAAmB,EACjC,MACF,IAAK,YACH,MAAMC,EAAkBxB,EAAa,QAAU,OAAY,KAAK,IAAIA,EAAa,MAAQ,EAAGjB,EAAM,QAAQ,OAAS,CAAC,EAAI,EACxHqC,EAAcI,CAAe,EAC7B,MACF,IAAK,QACCxB,EAAa,QAAU,QACzBmB,EAAcnB,EAAa,KAAK,EAElC,KACJ,CAGE,EAAE,MAAQ,UACGa,GAEnB,EACA,CAAE,OAAQP,CAAa,CAAA,EAGzBmB,EAAM,CAACd,EAAQpB,CAAW,EAAG,SAAY,SACvCF,EAAmB,MAAQsB,EAAO,MAE9BA,EAAO,QACTO,EAAA3B,EAAY,QAAZ,MAAA2B,EAAmB,QAEfnC,EAAM,gCAAgCkC,EAAAlC,EAAM,UAAN,MAAAkC,EAAe,SACvDG,EAAc,CAAC,EAGjB,MAAMM,EAAS,EACNlB,MAEEC,IACXR,EAAM,MAAQ,GAChB,CACD"}