feat(VOverlay): implement activator prop

[KaelWD]

Description

Brings back the activator prop from v2
Adds a new option activator="parent" as an alternative to the activator slot
Adds a new option activator-props to pass attributes to the bound activator element. This is mostly for internal use so VDialog/VMenu can set appropriate ARIA attributes.

Markup:

<template>
  <v-app>
    <v-container>
      <pre>{{ dialog }}</pre>
      <v-btn id="button">
        Dialog - ID
      </v-btn>
      <v-btn id="button">
        Dialog - parent

        <v-dialog v-if="dialog" activator="parent">
          <v-card title="Dialog" />
        </v-dialog>
      </v-btn>
      <br>
      <v-btn @click="onClick">Toggle dialog</v-btn>

      <v-dialog :activator="button">
        <v-card title="Dialog" />
      </v-dialog>

      <div class="my-5" />

      <v-btn class="my-3" @click="toggleActive">Toggle active</v-btn>

      <pre>{{ activeButton }}</pre>

      <v-row dense>
        <v-col v-for="i in 5" cols="12">
          <v-btn :id="'toggle' + i">
            Button {{ i }} - {{ activeButton === i ? 'active' : 'inactive' }}
          </v-btn>
        </v-col>
      </v-row>

      <v-dialog :activator="'#toggle' + activeButton">
        <v-card title="Dialog" />
      </v-dialog>

      <div class="my-5" />

      <pre>{{ activeButton2 }}</pre>

      <v-row dense>
        <v-col v-for="i in 5" cols="12">
          <v-btn :id="'toggle2' + i" @click="activate(i)">
            Button {{ i }} - {{ activeButton2 === i ? 'active' : 'inactive' }}
          </v-btn>
        </v-col>
      </v-row>

      <v-dialog v-model="dialog2" :activator="'#toggle2' + activeButton2">
        <v-card title="Dialog" />
      </v-dialog>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      dialog: true,
      activeButton: 1,
      activeButton2: 0,
      dialog2: false,
    }),
    computed: {
      button () {
        return this.dialog ? '#button' : undefined
      },
    },
    methods: {
      onClick () {
        this.dialog = !this.dialog
      },
      toggleActive () {
        this.activeButton = this.activeButton % 5 + 1
      },
      activate (i) {
        if (this.activeButton2 !== i) { this.dialog2 = true }
        this.activeButton2 = i
      },
    },
  }
</script>