Последняя версия с сервера прошлого разработчика

resources/js/Shared/Form/Dropdown.vue

@@ -0,0 +1,71 @@
+<template>
+  <button type="button" @click="show = true">
+    <slot />
+    <teleport to="body">
+      <div v-if="show">
+        <div class="bg-indigo-200 bg-opacity-25" style="position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99998;" @click="show = false" />
+        <div ref="dropdown" style="position: absolute; z-index: 99999;" @click.stop="show = autoClose ? false : true">
+          <slot name="dropdown" />
+        </div>
+      </div>
+    </teleport>
+  </button>
+</template>
+
+<script>
+import Popper from 'popper.js'
+
+export default {
+  props: {
+    placement: {
+      type: String,
+      default: 'bottom-end',
+    },
+    offset: {
+      type: String,
+      default: '0, 10',
+    },
+    boundary: {
+      type: String,
+      default: 'scrollParent',
+    },
+    autoClose: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      show: false,
+    }
+  },
+  watch: {
+    show(show) {
+      if (show) {
+        this.$nextTick(() => {
+          this.popper = new Popper(this.$el, this.$refs.dropdown, {
+            placement: this.placement,
+            modifiers: {
+                preventOverflow: { boundariesElement: this.boundary, padding: 0},
+                offset: {
+                    enabled: true,
+                    offset: this.offset
+                }
+            },
+
+          })
+        })
+      } else if (this.popper) {
+        setTimeout(() => this.popper.destroy(), 100)
+      }
+    },
+  },
+  mounted() {
+    document.addEventListener('keydown', (e) => {
+      if (e.keyCode === 27) {
+        this.show = false
+      }
+    })
+  },
+}
+</script>