feat(VOverlay): noFlip location strategy prop

[mattgilbertnet]

Description

resolves #22641

Markup:

Here's a reproduction: https://play.vuetifyjs.com/playgrounds/lU44gg

<template>
  <v-app>
    <v-container>
      <div>
        <h1>Vmenu Position Tests</h1>
        <div class="vmenu-test-container">
          <div class="vmenu-test-container-inner">
            <v-checkbox
              v-model="noFlip"
              label="No Flip"
            />
            <v-btn
              class="target-btn"
              @click="clickTarget($event);"
            >Click</v-btn>
            <div>
              <v-menu
                v-model="showMenu"
                :target="menuTarget"
                :offset="-8"
                location-strategy="connected"
                location="start center"
                origin="end top"
                scroll-strategy="close"
                transition="fade-transition"
                :close-on-content-click="false"
                width="500"
                :no-flip="noFlip"
              >
                <v-sheet
                  rounded
                  elevation="1"
                  class="agd"
                  ref="sheet"
                >
                  <div class="noflip-demo__header">
                    <div class="noflip-demo__close"><v-btn
                        icon="$close"
                        variant="text"
                        size="x-small"
                        :ripple="false"
                        @click="close"
                        @keydown.enter="close"
                        aria-label="Close"
                      ></v-btn>
                    </div>
                  </div>
                  <div class="noflip-demo__controls">
                    <v-btn
                      class="noflip-demo__controls noflip-demo__controls--prev"
                      @click="tab = (tab + 3) % 4"
                      size="x-small"
                      variant="text"
                      :border="false"
                      aria-label="Previous"
                    >Prev</v-btn>
                    <v-btn
                      class="noflip-demo__controls noflip-demo__controls--next"
                      @click="tab = (tab + 1) % 4"
                      size="x-small"
                      variant="text"
                      :border="false"
                      aria-label="Next"
                    >Next</v-btn>
                  </div>
                  <v-window
                    v-model="tab"
                    class="noflip-demo__window"
                  >
                    <v-window-item
                      :value="0"
                      class="noflip-demo__window-item"
                    >
                      <v-responsive :aspect-ratio="10 / 2">
                        <h2>Item 0 (20%)</h2>
                        <p>Typically uses top right for origin.</p>
                      </v-responsive>
                    </v-window-item>
                    <v-window-item
                      :value="1"
                      class="noflip-demo__window-item"
                    >
                      <v-responsive :aspect-ratio="10 / 4">
                        <h2>Item 1 (40%)</h2>
                      </v-responsive>
                    </v-window-item>
                    <v-window-item
                      :value="2"
                      class="noflip-demo__window-item"
                    >
                      <v-responsive :aspect-ratio="10 / 8">
                        <h2>Item 2 (80%)</h2>
                        <p>Without noFlip, this one typically flips to use bottom right corner</p>
                      </v-responsive>
                    </v-window-item>
                    <v-window-item
                      :value="3"
                      class="noflip-demo__window-item"
                    >
                      <v-responsive :aspect-ratio="1">
                        <h2>Item 3 (100%)</h2>
                        <p>
                          Without noFlip, this one may or may not flip for different window heights.
                        </p>
                      </v-responsive>
                    </v-window-item>
                  </v-window>
                </v-sheet>
              </v-menu>
            </div>
          </div>
        </div>
      </div>
    </v-container>

  </v-app>
</template>

<script setup>
import { ref } from 'vue';
const showMenu = ref(false);
const menuTarget = ref(null);
const noFlip = ref(true);

async function clickTarget(event) {
  showMenu.value = true;
  menuTarget.value = event.target;
}

const tab = ref(0)

function close() {
  showMenu.value = false;
}

</script>

<style lang="scss">
.target-btn {
  position: absolute;
  top: 55%;
  left: 70%;
}
.noflip-demo {
  padding: 10px;
}

.noflip-demo__close {
  position: absolute;
  top: 5px;
  right: 5px;
}

.noflip-demo__window-item {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>