{"version":3,"file":"index.mjs","sources":["../../../../src/components/Floating/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  Middleware,\n  Placement,\n  ReferenceElement,\n  Strategy,\n  autoUpdate,\n  flip,\n  hide,\n  offset,\n  size,\n  useFloating,\n} from '@floating-ui/vue';\nimport {\n  PropType,\n  Ref,\n  nextTick,\n  onMounted,\n  onUnmounted,\n  ref,\n  toRefs,\n  watch,\n} from 'vue';\n\nconst props = defineProps({\n  reference: {\n    type: Object as PropType<ReferenceElement>,\n    required: true,\n  },\n  open: {\n    type: Boolean,\n    default: false,\n  },\n  sameSize: {\n    type: Boolean,\n    default: false,\n  },\n  offset: {\n    type: Number,\n    default: 4,\n  },\n  strategy: {\n    type: String as PropType<Strategy>,\n    default: 'absolute',\n  },\n  placement: {\n    type: String as PropType<Placement>,\n    default: 'bottom-start',\n  },\n  transform: {\n    type: Boolean as PropType<boolean>,\n    default: true,\n  },\n  middleware: {\n    type: Array as PropType<Middleware[]>,\n    default: () => [],\n  },\n});\n\nconst { reference } = toRefs(props);\nconst floating = ref<HTMLElement>();\n\nconst { floatingStyles, update } = useFloating(reference, floating, {\n  strategy: props.strategy,\n  placement: props.placement,\n  transform: props.transform,\n  middleware: [\n    flip({\n      padding: 10,\n    }),\n    offset({\n      mainAxis: props.offset,\n    }),\n    hide(),\n    props.sameSize\n      ? size({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n              minWidth: '200px',\n            });\n          },\n        })\n      : undefined,\n    ...props.middleware,\n  ],\n});\n\nlet cleanup = undefined;\n\nwatch(\n  () => props.open,\n  (open) => {\n    if (open) {\n      nextTick(() => {\n        cleanup = autoUpdate(reference.value, floating.value, update);\n      });\n    } else {\n      cleanup?.();\n    }\n  }\n);\n\nonUnmounted(() => {\n  cleanup?.();\n});\n</script>\n\n<template>\n  <div\n    v-if=\"open\"\n    ref=\"floating\"\n    :style=\"floatingStyles\"\n    class=\"absolute rounded-md border border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-800\"\n  >\n    <slot></slot>\n  </div>\n</template>\n\n<style>\n.v-enter-active,\n.v-leave-active {\n  opacity: 1;\n  transition: opacity 0.5s ease;\n}\n\n.v-enter-from,\n.v-leave-to {\n  opacity: 0;\n}\n</style>\n"],"names":["props","__props","reference","toRefs","floating","ref","floatingStyles","update","useFloating","flip","offset","hide","size","rects","elements","cleanup","watch","open","nextTick","autoUpdate","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,UAAMA,IAAQC,GAmCR,EAAE,WAAAC,EAAA,IAAcC,EAAOH,CAAK,GAC5BI,IAAWC,KAEX,EAAE,gBAAAC,GAAgB,QAAAC,EAAA,IAAWC,EAAYN,GAAWE,GAAU;AAAA,MAClE,UAAUJ,EAAM;AAAA,MAChB,WAAWA,EAAM;AAAA,MACjB,WAAWA,EAAM;AAAA,MACjB,YAAY;AAAA,QACVS,EAAK;AAAA,UACH,SAAS;AAAA,QAAA,CACV;AAAA,QACDC,EAAO;AAAA,UACL,UAAUV,EAAM;AAAA,QAAA,CACjB;AAAA,QACDW,EAAK;AAAA,QACLX,EAAM,WACFY,EAAK;AAAA,UACH,MAAM,EAAE,OAAAC,GAAO,UAAAC,KAAY;AAClB,mBAAA,OAAOA,EAAS,SAAS,OAAO;AAAA,cACrC,OAAO,GAAGD,EAAM,UAAU,KAAK;AAAA,cAC/B,UAAU;AAAA,YAAA,CACX;AAAA,UACH;AAAA,QACD,CAAA,IACD;AAAA,QACJ,GAAGb,EAAM;AAAA,MACX;AAAA,IAAA,CACD;AAED,QAAIe;AAEJ,WAAAC;AAAA,MACE,MAAMhB,EAAM;AAAA,MACZ,CAACiB,MAAS;AACR,QAAIA,IACFC,EAAS,MAAM;AACb,UAAAH,IAAUI,EAAWjB,EAAU,OAAOE,EAAS,OAAOG,CAAM;AAAA,QAAA,CAC7D,IAESQ,KAAA,QAAAA;AAAA,MAEd;AAAA,IAAA,GAGFK,EAAY,MAAM;AACN,MAAAL,KAAA,QAAAA;AAAA,IAAA,CACX;;;;;;;;;;;"}