fix(VFab): improve positioning & examples

[J-Sek]

Description

Original goal was to restore VFab + VSpeedDial example (original in v2 docs) after hearing colleague on Discord saying he does not know the path to migrate v-speed-dial with fixed. Upgrade guide states that fixed and absolute are combined in position, but this is not the case here.

There is also a minor problem that traditional usage when v-speed-dial wraps element with <template #activator> makes the menu attach to .v-fab wrapper element which extends far beyond the visible button. So the only viable usage is to wrap v-speed-dial inside v-fab. We should consider explaining it in the Upgrade guide.

Notes:

• switching from absolute to app causes Error: [Vuetify] Could not find injected layout, and :key="..." may seem unnecessary, but prevents this issue
• should we swap 2nd and 4th row in "Menu location" selector?

Markup:

<template>
  <v-app>
    <v-app-bar :elevation="2">
      <template #prepend>
        <v-app-bar-nav-icon @click="sidebarOpen = !sidebarOpen" />
      </template>
      <v-app-bar-title>Application Bar</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer
      v-model="sidebarOpen"
      color="grey"
      app
      persistent
    >
      <h4 class="pa-6">Left sidebar</h4>
    </v-navigation-drawer>
    <v-footer color="lime" app>
      <h4 class="text-center">Footer</h4>
    </v-footer>
    <v-main>
      <v-card class="pa-6 mb-6" variant="flat">
        <v-row dense>
          <v-col cols="12" sm="3">
            <h5>FAB position</h5>
            <v-radio-group v-model="fabPosition" density="compact" hide-details>
              <v-radio label="Fixed" value="fixed" />
              <v-radio label="Absolute" value="absolute" />
              <v-radio label="None" value="" />
            </v-radio-group>
          </v-col>
          <v-col cols="12" sm="3">
            <h5>FAB location</h5>
            <v-radio-group v-model="fabLocation" :disabled="!fabPosition" 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 :disabled="fabPosition !== 'absolute'" 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>({{ fabLocation }})</code>
          </v-col>
          <v-col cols="12" sm="3">
            <h5>Menu location</h5>
            <v-radio-group v-model="menuLocation" 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>({{ menuLocation }})</code>
          </v-col>
          <v-col cols="12" sm="3">
            <h5>Transition</h5>
            <v-radio-group v-model="transition" density="compact" hide-details>
              <v-radio label="Fade" value="fade-transition" />
              <v-radio label="Slide y" value="slide-y-transition" />
              <v-radio label="Slide y reverse" value="slide-y-reverse-transition" />
              <v-radio label="Slide x" value="slide-x-transition" />
              <v-radio label="Slide x reverse" value="slide-x-reverse-transition" />
              <v-radio label="Scale" value="scale-transition" />
            </v-radio-group>
          </v-col>
        </v-row>
      </v-card>

      <v-card class="demo-panel" variant="outlined">
        <p>Card Content<br>(selectable text)</p>
        <v-fab
          :key="fabPosition"
          :absolute="fabPosition === 'absolute'"
          :app="fabPosition === 'fixed'"
          :color="fabOpen ? '' : 'primary'"
          :location="fabLocation"
          size="large"
          icon
        >
          <v-icon>{{ fabOpen ? 'mdi-close' : 'mdi-crown' }}</v-icon>
          <v-speed-dial v-model="fabOpen" :location="menuLocation" :transition="transition" activator="parent">
            <v-btn key="1" color="success" icon>
              <v-icon size="24">$success</v-icon></v-btn>
            <v-btn key="2" color="info" icon>
              <v-icon size="24">$info</v-icon></v-btn>
            <v-btn key="3" color="warning" icon>
              <v-icon size="24">$warning</v-icon></v-btn>
            <v-btn key="4" color="error" icon>
              <v-icon size="24">$error</v-icon></v-btn>
          </v-speed-dial>
        </v-fab>
      </v-card>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref, watch } from 'vue'

const fabOpen = ref(false)
const sidebarOpen = ref(true)
const fabPosition = ref('absolute')
const menuLocation = ref('left center')
const fabLocation = ref('right bottom')
const transition = ref('slide-y-reverse-transition')

watch(menuLocation, reopen)
watch(transition, reopen)
watch(fabLocation, () => fabOpen.value = false)
watch(fabPosition, () => fabOpen.value = false)

function reopen() {
  fabOpen.value = false
  setTimeout(() => fabOpen.value = true, 400)
}
</script>

<style scoped>
.demo-panel { margin: 0 80px 50px; padding: 24px;  min-height: 300px; }
.v-selection-control--disabled,
.v-input--disabled .v-selection-control { opacity: .1; }
.v-radio { flex-grow: 0 !important; }
h5 { margin-bottom: 12px; }
code { display: block; font-size: .8rem; margin-top: 12px; }
::v-deep(.v-label) { margin-left: 8px; }
</style>

[johnleider]

• I wasn't able to reproduce the error when switching between app and absolute
• I think it works great