feat(VTooltip): update for v3 (#14052)

Fixes #7529 Fixes #8213 Resolves #9878 Fixes #12552
vuetifyjs · Aug 16, 2021 · fedb40b · fedb40b
1 parent 563c0cf
commit fedb40b
Show file tree

Hide file tree

Showing 17 changed files with 449 additions and 356 deletions.
diff --git a/packages/vuetify/src/components/VDialog/VDialog.tsx b/packages/vuetify/src/components/VDialog/VDialog.tsx
@@ -11,12 +11,14 @@ import { makeTransitionProps } from '@/composables/transition'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { ref, watch } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import { defineComponent, IN_BROWSER } from '@/util'
 
 export default defineComponent({
   name: 'VDialog',
 
+  inheritAttrs: false,
+
   props: {
     fullscreen: Boolean,
     origin: {
@@ -87,6 +89,15 @@ export default defineComponent({
       }, { immediate: true })
     }
 
+    watch(isActive, async val => {
+      await nextTick()
+      if (val) {
+        overlay.value!.contentEl?.focus({ preventScroll: true })
+      } else {
+        overlay.value!.activatorEl?.focus({ preventScroll: true })
+      }
+    })
+
     return () => {
       return (
         <VOverlay

diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -1,45 +1,39 @@
 // Styles
 import './VMenu.sass'
 
-// Directives
-import ClickOutside from '@/directives/click-outside'
-import Resize from '@/directives/resize'
+// Components
+import { VOverlay } from '@/components/VOverlay'
+import { VDialogTransition } from '@/components/transitions'
 
-// Utilities
-import {
-  defineComponent,
-} from '@/util'
+// Composables
 import { makeTransitionProps } from '@/composables/transition'
-import { VOverlay } from '@/components'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
+// Utilities
+import { defineComponent, getUid } from '@/util'
+import { computed } from 'vue'
+
 export default defineComponent({
   name: 'VMenu',
 
-  directives: {
-    ClickOutside,
-    Resize,
-  },
+  inheritAttrs: false,
 
   props: {
-    closeOnClick: {
-      type: Boolean,
-      default: true,
-    },
-    closeOnContentClick: {
-      type: Boolean,
-      default: true,
-    },
+    // TODO
+    // closeOnClick: {
+    //   type: Boolean,
+    //   default: true,
+    // },
+    // closeOnContentClick: {
+    //   type: Boolean,
+    //   default: true,
+    // },
     disableKeys: Boolean,
     modelValue: Boolean,
-    openOnClick: {
-      type: Boolean,
-      default: true,
-    },
-    openOnHover: Boolean,
+    id: String,
 
     ...makeTransitionProps({
-      transition: false,
+      transition: { component: VDialogTransition },
     } as const),
   },
 
@@ -50,6 +44,9 @@ export default defineComponent({
   setup (props, { attrs, slots }) {
     const isActive = useProxiedModel(props, 'modelValue')
 
+    const uid = getUid()
+    const id = computed(() => props.id || `v-menu-${uid}`)
+
     return () => {
       return (
         <VOverlay
@@ -62,11 +59,10 @@ export default defineComponent({
           positionStrategy="connected"
           scrollStrategy="reposition"
           scrim={ false }
-          aria-role="dialog"
-          aria-modal="true"
           activatorProps={{
             'aria-haspopup': 'menu',
             'aria-expanded': String(isActive.value),
+            'aria-owns': id.value,
           }}
           { ...attrs }
           v-slots={{

diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.sass b/packages/vuetify/src/components/VOverlay/VOverlay.sass
@@ -30,6 +30,7 @@
   outline: none
   position: absolute
   pointer-events: auto
+  contain: layout
 
 .v-overlay__scrim
   pointer-events: auto

diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -12,6 +12,7 @@ import { useBackgroundColor } from '@/composables/color'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { useRtl } from '@/composables/rtl'
 import { useTeleport } from '@/composables/teleport'
+import { makeDimensionProps, useDimension } from '@/composables/dimensions'
 
 // Directives
 import { ClickOutside } from '@/directives/click-outside'
@@ -27,9 +28,9 @@ import {
 import {
   computed,
   mergeProps,
-  nextTick,
   ref,
   Teleport,
+  toHandlers,
   toRef,
   Transition,
   watch,
@@ -39,7 +40,6 @@ import {
 // Types
 import type { PropType, Ref } from 'vue'
 import type { BackgroundColorData } from '@/composables/color'
-import { makeDimensionProps, useDimension } from '@/composables/dimensions'
 
 function useBooted (isActive: Ref<boolean>, eager: Ref<boolean>) {
   const isBooted = ref(eager.value)
@@ -121,7 +121,7 @@ export default defineComponent({
     const scrimColor = useBackgroundColor(computed(() => {
       return typeof props.scrim === 'string' ? props.scrim : null
     }))
-    const { activatorEl, onActivatorClick } = useActivator(props, isActive)
+    const { activatorEl, activatorEvents } = useActivator(props, isActive)
     const { dimensionStyles } = useDimension(props)
 
     const contentEl = ref<HTMLElement>()
@@ -137,15 +137,6 @@ export default defineComponent({
       updatePosition,
     })
 
-    watch(isActive, async val => {
-      await nextTick()
-      if (val) {
-        contentEl.value?.focus({ preventScroll: true })
-      } else {
-        activatorEl.value?.focus({ preventScroll: true })
-      }
-    })
-
     function onClickOutside (e: MouseEvent) {
       emit('click:outside', e)
 
@@ -208,8 +199,7 @@ export default defineComponent({
           props: mergeProps({
             modelValue: isActive.value,
             'onUpdate:modelValue': (val: boolean) => isActive.value = val,
-            onClick: onActivatorClick,
-          }, props.activatorProps),
+          }, toHandlers(activatorEvents), props.activatorProps),
         }) }
         <Teleport
           disabled={ !teleportTarget.value }
@@ -244,7 +234,7 @@ export default defineComponent({
                 <div
                   ref={ contentEl }
                   v-show={ isActive.value }
-                  v-click-outside={{ handler: onClickOutside, closeConditional }}
+                  v-click-outside={{ handler: onClickOutside, closeConditional, include: () => [activatorEl.value] }}
                   class={[
                     'v-overlay__content',
                     props.contentClass,
@@ -253,7 +243,6 @@ export default defineComponent({
                     dimensionStyles.value,
                     contentStyles.value,
                   ]}
-                  tabindex={ -1 }
                   onKeydown={ onKeydown }
                 >
                   { slots.default?.({ isActive }) }
@@ -268,6 +257,7 @@ export default defineComponent({
     return {
       animateClick,
       contentEl,
+      activatorEl,
     }
   },
 })