wave-ui 4.0.2 → 4.1.1

package/src/wave-ui/core.js

@@ -5,6 +5,7 @@ import { colorPalette, generateColorShades, flattenColors } from './utils/colors
 import { injectColorsCSSInDOM, injectCSSInDOM } from './utils/dynamic-css'
 import { injectNotifManagerInDOM, NotificationManager } from './utils/notification-manager'
 import { waveRippleDirective } from './utils/wave-ripple-directive'
+import { scheduleFocus, registerVFocus, unregisterVFocus } from './utils/focus'
 import './scss/index.scss'
 
 let mounted = false
@@ -112,8 +113,10 @@ export default class WaveUI {
   static install (app, options = {}) {
     // Register directives.
     app.directive('focus', {
-      // Wait for the next tick to focus the newly mounted element.
-      mounted: el => setTimeout(() => el.focus(), 0)
+      mounted: (el) => {
+        if (!registerVFocus(el)) scheduleFocus(el)
+      },
+      unmounted: (el) => unregisterVFocus(el)
     })
     app.directive('scroll', {
       mounted: (el, binding) => {

package/src/wave-ui/mixins/detachable.js

@@ -9,6 +9,7 @@
  */
 
 import { consoleWarn } from '../utils/console'
+import { callFocus } from '../utils/focus'
 
 // Minimum space (px) from the viewport edge when flipping / nudging.
 const VIEWPORT_MARGIN = 4
@@ -65,6 +66,10 @@ export default {
     // Components use this to bind visibility:hidden, so the element is never visible at the
     // wrong position before its coordinates are calculated.
     detachableReady: false,
+    // Transition @after-enter has run for the current open cycle.
+    _contentEntered: false,
+    // v-focus entries waiting for detachableReady + _contentEntered.
+    _autofocusTargets: [],
     // The Vue Teleport target. Stored as data (not computed) so it is resolved lazily at
     // open()-time — after the DOM is committed — rather than during VNode creation where
     // document.querySelector() may return null for elements that are part of the same render batch.
@@ -171,6 +176,35 @@ export default {
     onAfterLeave () {
       this.detachableReady = false
       this.detachableEl = null
+      this._contentEntered = false
+      this._autofocusTargets = []
+    },
+
+    onDetachableAfterEnter () {
+      this._contentEntered = true
+      this._maybeFlushAutofocus()
+    },
+
+    registerAutofocus (entry) {
+      if (!this._autofocusTargets) this._autofocusTargets = []
+      this._autofocusTargets.push(entry)
+      this._maybeFlushAutofocus()
+    },
+
+    unregisterAutofocus (el) {
+      if (!this._autofocusTargets?.length) return
+      this._autofocusTargets = this._autofocusTargets.filter(entry => entry.el !== el)
+    },
+
+    _maybeFlushAutofocus () {
+      if (this.detachableReady && this._contentEntered) this.flushAutofocus()
+    },
+
+    flushAutofocus () {
+      const targets = this._autofocusTargets || []
+      this._autofocusTargets = []
+      if (!targets.length) return
+      this.$nextTick(() => targets.forEach(({ el }) => callFocus(el)))
     },
 
     unbindActivatorDocEvents () {
@@ -253,6 +287,7 @@ export default {
 
       // Hide before entering the DOM; handles rapid re-opens where detachableReady is still true.
       this.detachableReady = false
+      this._contentEntered = false
 
       // Resolve the teleport target here, at open()-time, so the DOM is fully committed and
       // detachableDefaultRoot() (for nested menus/tooltips) returns the correct element.
@@ -274,8 +309,11 @@ export default {
         this.activatorWidth = this.activatorEl.offsetWidth
       }
 
-      if (!this.noPosition) this.computeDetachableCoords()
-      else this.detachableReady = true
+      if (!this.noPosition) await this.computeDetachableCoords()
+      else {
+        this.detachableReady = true
+        this._maybeFlushAutofocus()
+      }
 
       // In `getActivatorCoordinates` accessing the menu computed styles takes a few ms (less than 10ms),
       // if we don't postpone the Menu apparition it will start transition from a visible menu and
@@ -412,6 +450,7 @@ export default {
       // Always await $nextTick so coordinates, placement class, and visibility are flushed atomically.
       this.detachableReady = true
       await this.$nextTick()
+      this._maybeFlushAutofocus()
 
       // Guard against the component being unmounted while awaiting.
       if (!this.detachableEl) return

package/src/wave-ui/mixins/focusable.js

@@ -0,0 +1,22 @@
+import { guardFocusable, focusElement } from '../utils/focus'
+
+export default {
+  focusable: true,
+
+  methods: {
+    focus () {
+      if (!guardFocusable(this)) return
+      const refName = this.$options.focusTargetRef || 'input'
+      const tryFocus = () => {
+        const target = this.$refs[refName]
+        if (target) focusElement(target)
+        return !!target
+      }
+      if (tryFocus()) return
+      this.$nextTick(() => {
+        if (tryFocus()) return
+        this.$nextTick(() => tryFocus())
+      })
+    }
+  }
+}

package/src/wave-ui/scss/_base.scss

@@ -88,6 +88,8 @@
 }
 
 :root[data-theme="light"] {
+  color-scheme: light;
+
   --w-base-bg-color: #fff;
   --w-base-color: #000;
   --w-contrast-bg-color: #000;
@@ -97,6 +99,8 @@
 }
 
 :root[data-theme="dark"] {
+  color-scheme: dark;
+
   --w-base-bg-color: #222;
   --w-base-color: #fff;
   --w-contrast-bg-color: #fff;

package/src/wave-ui/utils/focus.js

@@ -0,0 +1,74 @@
+import { nextTick } from 'vue'
+
+const DETACHABLE_COMPONENTS = new Set(['w-menu', 'w-tooltip'])
+
+/** Walk Vue 3 logical parent instances from a directive host element (`__vueParentComponent`). */
+function walkParentInstances (el, predicate) {
+  let instance = el?.__vueParentComponent
+  while (instance) {
+    if (predicate(instance)) return instance
+    instance = instance.parent
+  }
+  return null
+}
+
+function componentName (instance) {
+  return instance?.type?.name ?? instance?.proxy?.$options?.name
+}
+
+function isFocusableInstance (instance) {
+  return !!(instance?.type?.focusable || instance?.proxy?.$options?.focusable)
+}
+
+function isDetachableInstance (instance) {
+  return DETACHABLE_COMPONENTS.has(componentName(instance))
+}
+
+export function focusElement (el) {
+  el?.focus?.()
+}
+
+export function guardFocusable (vm) {
+  if (vm.isDisabled || vm.isReadonly) return false
+  return true
+}
+
+/** Nearest ancestor component with `focusable: true` (e.g. w-input inside w-form-element). */
+export function resolveFocusableInstance (el) {
+  return walkParentInstances(el, isFocusableInstance)
+}
+
+/** w-menu / w-tooltip host for deferred v-focus while floating content opens. */
+export function findDetachableInstance (el) {
+  const instance = walkParentInstances(el, isDetachableInstance)
+  return instance?.proxy ?? null
+}
+
+export function callFocus (el) {
+  const instance = resolveFocusableInstance(el)
+  const focusFn = instance?.exposed?.focus ?? instance?.proxy?.focus
+  if (typeof focusFn === 'function') {
+    focusFn()
+    return
+  }
+  focusElement(el)
+}
+
+/** Schedule focus after mount so template refs exist on the host component. */
+export function scheduleFocus (el) {
+  nextTick(() => callFocus(el))
+}
+
+/** Register v-focus on a detachable host; returns false when not inside w-menu/w-tooltip. */
+export function registerVFocus (el) {
+  const detachable = findDetachableInstance(el)
+  if (!detachable) return false
+  el.__waveUiDetachable = detachable
+  detachable.registerAutofocus({ el })
+  return true
+}
+
+export function unregisterVFocus (el) {
+  el.__waveUiDetachable?.unregisterAutofocus(el)
+  delete el.__waveUiDetachable
+}