feat(VMenu): port to v3

[KaelWD]

fixes #3303
fixes #5310
fixes #9753
fixes #10578
fixes #11818
fixes #12110

Markup:

<template>
  <v-app>
    <v-locale-provider rtl>
      <v-container style="height: 2500px">
        <v-btn style="position: fixed; top: 8px; right: 8px">
          Fixed

          <v-menu activator="parent" anchor="bottom end">
            <v-sheet>
              <v-list>
                <v-list-item v-for="i in 14" :title="'List item with a long title ' + i" link />
              </v-list>
            </v-sheet>
          </v-menu>
        </v-btn>

        <!--      <pre>{{ d }}</pre>-->
        <div style="height: 300px" />

        <!--      <div style="height: 600px; overflow: scroll" class="mx-12">-->
        <!--        <div style="height: 300px" />-->
        <v-btn>
          Menu

          <v-menu activator="parent" anchor="end" scroll-strategy="block" scrim="transparent">
            <v-sheet>
              <v-list>
                <v-list-item v-for="i in 14" :title="'List item with a long title' + i" link />
              </v-list>
            </v-sheet>
          </v-menu>
        </v-btn>
        <div class="my-3" />

        <v-btn>
          Menu

          <v-menu activator="parent" anchor="bottom">
            <v-sheet>
              <v-list>
                <v-list-item title="List item with a very very very very very very very very very very very very very very long title" link />
              </v-list>
            </v-sheet>
          </v-menu>
        </v-btn>

        <div class="my-3" />

        <v-menu max-height="304" scroll-strategy="block">
          <template #activator="{ props }">
            <v-input v-slot="data" v-bind="props">
              <input type="text" v-bind="data.props" @focus="onFocus">
            </v-input>
          </template>

          <v-sheet>
            <v-list>
              <v-list-item v-for="i in 18" :title="'List item ' + i" link />
            </v-list>
          </v-sheet>
        </v-menu>

        <div class="my-3" />

        <v-btn>
          Dialog

          <v-dialog activator="parent">
            <v-sheet>
              <v-list>
                <v-list-item title="List" link />
              </v-list>
            </v-sheet>
          </v-dialog>
        </v-btn>
      <!--         <div style="height: 300px" />-->
      <!--      </div>-->
      </v-container>
    </v-locale-provider>

    <!--    <teleport to=".v-overlay-container">-->
    <!--      <div ref="o" class="overlay-test" />-->
    <!--    </teleport>-->
  </v-app>
</template>

<script>
  export default {
    // data: () => ({
    //   d: {},
    // }),
    // mounted () {
    //   setInterval(() => this.update(), 500)
    // },
    methods: {
      //   update () {
      //     this.d = {
      //       win: window.innerHeight,
      //       doc: document.documentElement.clientHeight,
      //       box: document.documentElement.getBoundingClientRect().height,
      //       ovr: this.$refs.o.getBoundingClientRect().height,
      //     }
      //   },
      onFocus (e) {
        if (window.innerHeight - e.target.getBoundingClientRect().bottom < 304) {
          const els = [...document.querySelectorAll('v-overlay-scroll-blocked')]
          els.forEach(el => el.classList.remove('v-overlay-scroll-blocked'))
          e.target.scrollIntoView(true)
          els.forEach(el => el.classList.add('v-overlay-scroll-blocked'))
          setTimeout(() => window.dispatchEvent(new Event('resize')), 300)
        }
      },
    },
  }
</script>

<style>
.overlay-test {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>