feat(VOverlay): add clickOutsideIgnore prop to v-overlay

[MichaelGitArt]

Ignoring click outside event

Add prop to prevent closing on clicking outside when we need it. When clicking on notification, for example.

Description

We have an overlay/dialog with action, that could show us a toast notification, that should be closed. The notification is not part of the overlay content and the dialog is closing when we click on it.

As a solution, we could specify persistent prop. In this case, we lose the possibility to close an overlay on ESC or by clicking outside the overlay content.

So, here is a clickOutsideIgnore prop, that allows us to provide a function or selector for ignoring clicking on specific elements.

Playground.vue code

<script lang="ts" setup>
  const ignoreFn = (e: MouseEvent): boolean => {
    if (!(e.target instanceof HTMLElement)) return false
    return e.target.textContent?.trim() === 'GOOD'
  }
</script>

<template>
  <v-app>
    <v-container>
      <VDialog :click-outside-ignore="'.el-q'">
        <template #activator="{ props }">
          <v-btn v-bind="props">Open Dialog (Selector)</v-btn>
        </template>

        <VCard>
          Content
        </VCard>
      </VDialog>

      <VDialog :click-outside-ignore="ignoreFn">
        <template #activator="{ props }">
          <v-btn v-bind="props">Open Dialog (Function)</v-btn>
        </template>

        <VCard>
          Content
        </VCard>
      </VDialog>

      <VDialog>
        <template #activator="{ props }">
          <v-btn v-bind="props">Open Dialog (Base)</v-btn>
        </template>

        <VCard>
          Content
        </VCard>
      </VDialog>

      <div class="el-q">
        <div class="nested">
          GOOD
        </div>
      </div>
    </v-container>
  </v-app>
</template>

<style lang="scss" scoped>
  .el-q {
    color: red;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 4000;
    background: #fff;
    padding: 20px;
  }
</style>

[MetRonnie]

We have an overlay/dialog with action, that could show us a toast notification, that should be closed. The notification is not part of the overlay content and the dialog is closing when we click on it.

FYI I have contributed a fix for that here https://github.com/vuetifyjs/vuetify/pull/19393 if you are using the overlay/dialog with scrim