fix(VOverlay): make location and origin actually useful

[J-Sek]

Follow-up after #22698

• renames "viewport" strategy to "static"
  • so we can support origin behavior from v2
• small adjustments to VBottomSheet to avoid regression

fixes #20919

Markup:

<template>
  <v-app theme="dark">
    <div class="guidelines">
      <div class="guideline guideline-v" />
      <div class="guideline guideline-h" />
    </div>
    <v-container>
      <v-btn @click="open = true">Show</v-btn>
      <v-dialog
        v-model="open"
        :location="location"
        :origin="origin"
        :scrim="false"
        width="400"
        no-click-animation
        persistent
      >
        <v-card>
          <v-card-item class="bg-primary">Title</v-card-item>
          <v-card-text>
            <div class="pa-12">Hello world!</div>
          </v-card-text>
          <v-card-actions class="justify-end">
            <v-btn text="Close" @click="open = false" />
          </v-card-actions>
        </v-card>
      </v-dialog>

      <v-row class="mt-6">
        <v-col cols="12" sm="3">
          <h5 class="my-0">location</h5>

          <v-radio-group v-model="location" density="compact" hide-details>
            <div class="d-flex">
              <v-radio value="top left" />
              <v-radio value="top center" />
              <v-radio value="top right" />
            </div>

            <div class="d-flex">
              <v-radio value="left center" />
              <v-radio value="center center" />
              <v-radio value="right center" />
            </div>

            <div class="d-flex">
              <v-radio value="left bottom" />
              <v-radio value="bottom center" />
              <v-radio value="right bottom" />
            </div>
          </v-radio-group>

          <code>({{ location }})</code>
        </v-col>

        <v-col cols="12" sm="3">
          <h5 class="my-0">Origin</h5>

          <v-radio-group v-model="origin" density="compact" hide-details>
            <div class="d-flex">
              <v-radio disabled />
              <v-radio value="top left" />
              <v-radio value="top center" />
              <v-radio value="top right" />
              <v-radio disabled />
            </div>

            <div class="d-flex">
              <v-radio value="left top" />
              <v-radio disabled />
              <v-radio disabled />
              <v-radio disabled />
              <v-radio value="right top" />
            </div>

            <div class="d-flex">
              <v-radio value="left center" />
              <v-radio disabled />
              <v-radio value="center" />
              <v-radio disabled />
              <v-radio value="right center" />
            </div>

            <div class="d-flex">
              <v-radio value="left bottom" />
              <v-radio disabled />
              <v-radio disabled />
              <v-radio disabled />
              <v-radio value="right bottom" />
            </div>

            <div class="d-flex">
              <v-radio disabled />
              <v-radio value="bottom left" />
              <v-radio value="bottom center" />
              <v-radio value="bottom right" />
              <v-radio disabled />
            </div>
          </v-radio-group>

          <code>({{ origin }})</code>
        </v-col>
      </v-row>
    </v-container>

    <v-btn
      class="ma-auto"
      size="x-large"
      text="Open bottom sheet"
      @click="sheet = !sheet"
    />

    <v-bottom-sheet v-model="sheet" inset>
      <v-card class="text-center" height="200">
        <v-card-text>
          <v-btn
            text="Close"
            variant="text"
            @click="sheet = !sheet"
          />

          <br>
          <br>

          <div>
            This is a bottom sheet that is using the inset prop
          </div>
        </v-card-text>
      </v-card>
    </v-bottom-sheet>
  </v-app>
</template>

<script setup>
  import { ref, watch } from 'vue'
  const sheet = ref(false)
  const open = ref(false)
  const location = ref('center center')
  const origin = ref('left bottom')

  watch(origin, () => {
    open.value = false
    setTimeout(() => open.value = true, 300)
  })
</script>

<style scoped>
.guidelines {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.guideline {
  position: absolute;
  background: transparent;
}
.guideline-v {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 3px dashed red;
}
.guideline-h {
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  border-top: 3px dashed red;
}
.v-selection-control--disabled {
  opacity: .1;
}
</style>

[johnleider]

A change like this might require dev if we're going to rename/change a default.

The base branch was changed.

[KaelWD]

Why isn't #22698 on dev?

[J-Sek]

Why isn't #22698 on dev?

Merged for labs component. location-strategy="viewport" was meant to target only VCommandPalette - without it, the usability was bad. It later turned out that we lack implementation for location-strategy="static" and "viewport" seems to fit ideally.

[KaelWD]

I moved #22698 to dev so we aren't introducing a new value then renaming it in 4.1