wave-ui 4.2.4 → 4.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "4.2.4",
+  "version": "4.2.5",
   "description": "A UI framework for Vue.js 3 (and 2) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",

package/src/wave-ui/components/w-accordion/item.vue

@@ -90,13 +90,13 @@ import { useId } from 'vue'
 import RippleMixin from '../../mixins/ripple'
 import { isRippleEnabled } from '../../utils/ripple'
 import AccordionContent from './accordion-content.vue'
-import { focusElement } from '../../utils/focus'
+import { focusElement, vFocusLifecycleMixin } from '../../utils/focus'
 
 export default {
   name: 'w-accordion-item',
   focusable: true,
   expose: ['focus'],
-  mixins: [RippleMixin],
+  mixins: [RippleMixin, vFocusLifecycleMixin],
 
   setup () {
     return { accordionItemUid: useId() }

package/src/wave-ui/components/w-button/index.vue

@@ -12,13 +12,14 @@ button-partial(v-else ref="button" v-bind="buttonProps")
 
 <script>
 import ButtonPartial from './button.vue'
+import FocusableMixin from '../../mixins/focusable'
 import { focusElement } from '../../utils/focus'
 
 export default {
   name: 'w-button',
-  focusable: true,
   expose: ['focus'],
   inheritAttrs: false, // The attrs are only bound to the button-partial, not the root.
+  mixins: [FocusableMixin],
 
   props: {
     color: { type: String },

package/src/wave-ui/components/w-checkboxes.vue

@@ -33,13 +33,13 @@ component(
 <script>
 import { reactive } from 'vue'
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
-import { guardFocusable } from '../utils/focus'
+import { guardFocusable, vFocusLifecycleMixin } from '../utils/focus'
 
 export default {
   name: 'w-checkboxes',
   focusable: true,
   expose: ['focus'],
-  mixins: [FormElementMixin],
+  mixins: [FormElementMixin, vFocusLifecycleMixin],
 
   setup () {
     return useWaveUiFormIds()

package/src/wave-ui/components/w-list.vue

@@ -45,13 +45,13 @@ ul.w-list(:class="classes")
 <script>
 import { useId } from 'vue'
 import RippleMixin from '../mixins/ripple'
-import { focusElement } from '../utils/focus'
+import { focusElement, vFocusLifecycleMixin } from '../utils/focus'
 
 export default {
   name: 'w-list',
   focusable: true,
   expose: ['focus'],
-  mixins: [RippleMixin],
+  mixins: [RippleMixin, vFocusLifecycleMixin],
 
   setup () {
     return { waveUiUseId: useId() }

package/src/wave-ui/components/w-radios.vue

@@ -32,13 +32,13 @@ component(
 
 <script>
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
-import { guardFocusable } from '../utils/focus'
+import { guardFocusable, vFocusLifecycleMixin } from '../utils/focus'
 
 export default {
   name: 'w-radios',
   focusable: true,
   expose: ['focus'],
-  mixins: [FormElementMixin],
+  mixins: [FormElementMixin, vFocusLifecycleMixin],
 
   setup () {
     return useWaveUiFormIds()

package/src/wave-ui/components/w-rating.vue

@@ -32,13 +32,13 @@ component(
 
 <script>
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
-import { guardFocusable, focusElement } from '../utils/focus'
+import { guardFocusable, focusElement, vFocusLifecycleMixin } from '../utils/focus'
 
 export default {
   name: 'w-rating',
   focusable: true,
   expose: ['focus'],
-  mixins: [FormElementMixin],
+  mixins: [FormElementMixin, vFocusLifecycleMixin],
 
   setup () {
     return useWaveUiFormIds()

package/src/wave-ui/components/w-scrollable.vue

@@ -42,9 +42,12 @@
 <script setup>
 import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch, useId, useAttrs } from 'vue'
 import { objectifyClasses } from '../utils/index'
+import { useVFocus } from '../utils/focus'
 
 defineOptions({ name: 'WScrollable', focusable: true })
 
+useVFocus()
+
 const props = defineProps({
   color: { type: String, default: 'primary' },
   bgColor: { type: String },

package/src/wave-ui/components/w-tabs/index.vue

@@ -76,13 +76,13 @@ import { useId } from 'vue'
 import { objectifyClasses } from '../../utils/index'
 import RippleMixin from '../../mixins/ripple'
 import TabContent from './tab-content.vue'
-import { focusElement } from '../../utils/focus'
+import { focusElement, vFocusLifecycleMixin } from '../../utils/focus'
 
 export default {
   name: 'w-tabs',
   focusable: true,
   expose: ['focus'],
-  mixins: [RippleMixin],
+  mixins: [RippleMixin, vFocusLifecycleMixin],
 
   setup () {
     return { tabsStableId: useId() }

package/src/wave-ui/components/w-tag.vue

@@ -19,13 +19,13 @@ span.w-tag(
 
 <script>
 import RippleMixin from '../mixins/ripple'
-import { focusElement } from '../utils/focus'
+import { focusElement, vFocusLifecycleMixin } from '../utils/focus'
 
 export default {
   name: 'w-tag',
   focusable: true,
   expose: ['focus'],
-  mixins: [RippleMixin],
+  mixins: [RippleMixin, vFocusLifecycleMixin],
 
   props: {
     modelValue: { type: [Boolean, Number], default: -1 },

package/src/wave-ui/components/w-tree.vue

@@ -68,14 +68,14 @@ import { consoleWarn } from '../utils/console'
  * - option to add a left border.
  **/
 
-import { focusElement } from '../utils/focus'
+import { focusElement, vFocusLifecycleMixin } from '../utils/focus'
 
 export default {
   name: 'w-tree',
   focusable: true,
   expose: ['focus'],
 
-  mixins: [RippleMixin],
+  mixins: [RippleMixin, vFocusLifecycleMixin],
 
   props: {
     modelValue: { type: [Object, Array] },

package/src/wave-ui/core.js

@@ -5,7 +5,7 @@ import { colorPalette, generateColorShades, flattenColors } from './utils/colors
 import { injectColorsCSSInDOM, injectCSSInDOM, generatePaletteVariables, generateColors } 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 { focusDirective } from './utils/focus'
 import './scss/index.scss'
 
 let mounted = false
@@ -198,12 +198,7 @@ export default class WaveUI {
 
   static install (app, options = {}) {
     // Register directives.
-    app.directive('focus', {
-      mounted: (el) => {
-        if (!registerVFocus(el)) scheduleFocus(el)
-      },
-      unmounted: (el) => unregisterVFocus(el)
-    })
+    app.directive('focus', focusDirective)
     app.directive('scroll', {
       mounted: (el, binding) => {
         const f = evt => {

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

@@ -9,7 +9,6 @@
  */
 
 import { consoleWarn } from '../utils/console'
-import { callFocus } from '../utils/focus'
 
 // Minimum space (px) from the viewport edge when flipping / nudging.
 const VIEWPORT_MARGIN = 4
@@ -204,7 +203,7 @@ export default {
       const targets = this._autofocusTargets || []
       this._autofocusTargets = []
       if (!targets.length) return
-      this.$nextTick(() => targets.forEach(({ el }) => callFocus(el)))
+      this.$nextTick(() => targets.forEach(({ focus }) => focus()))
     },
 
     unbindActivatorDocEvents () {

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

@@ -1,6 +1,7 @@
-import { guardFocusable, focusElement } from '../utils/focus'
+import { guardFocusable, focusElement, vFocusLifecycleMixin } from '../utils/focus'
 
 export default {
+  mixins: [vFocusLifecycleMixin],
   focusable: true,
 
   methods: {

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

@@ -1,12 +1,24 @@
-import { nextTick } from 'vue'
+/**
+ * v-focus directive and helpers.
+ *
+ * Two paths:
+ * - Native elements (<input v-focus>) → focusDirective
+ * - Wave focusable components (<w-input v-focus>) → applyVFocusOnMount in mounted
+ *   (directive on a component root only hits the wrapper DOM node; calling focus()
+ *   on the component is required and must not rely on el.__vueParentComponent, which
+ *   is stripped in production builds).
+ *
+ * Inside w-menu / w-tooltip, focus is deferred until the floating content is open.
+ */
 
-const DETACHABLE_COMPONENTS = new Set(['w-menu', 'w-tooltip'])
+import { nextTick, getCurrentInstance, onMounted, onUnmounted } from 'vue'
 
-/** Walk Vue 3 logical parent instances from a directive host element (`__vueParentComponent`). */
-function walkParentInstances (el, predicate) {
-  let instance = el?.__vueParentComponent
+const DETACHABLE = new Set(['w-menu', 'w-tooltip'])
+
+function walk (start, test) {
+  let instance = start
   while (instance) {
-    if (predicate(instance)) return instance
+    if (test(instance)) return instance
     instance = instance.parent
   }
   return null
@@ -16,12 +28,59 @@ function componentName (instance) {
   return instance?.type?.name ?? instance?.proxy?.$options?.name
 }
 
-function isFocusableInstance (instance) {
+function isFocusable (instance) {
   return !!(instance?.type?.focusable || instance?.proxy?.$options?.focusable)
 }
 
-function isDetachableInstance (instance) {
-  return DETACHABLE_COMPONENTS.has(componentName(instance))
+function isDetachable (instance) {
+  return DETACHABLE.has(componentName(instance))
+}
+
+/** Resolve a component instance from directive hook args (works in production). */
+function fromDirective (vnode, prevVNode, test) {
+  // On component roots, prevVNode.component is the host (e.g. w-input).
+  return walk(prevVNode?.component, test) || walk(vnode?.component, test)
+}
+
+/** From a mounted hook — walk instance.parent (reliable in production). */
+function detachableParent (instance) {
+  return walk(instance?.parent, isDetachable)?.proxy ?? null
+}
+
+function detachableFromDirective (vnode, prevVNode) {
+  return fromDirective(vnode, prevVNode, isDetachable)?.proxy ?? null
+}
+
+function resolveFocusableInstance (vnode, prevVNode) {
+  return fromDirective(vnode, prevVNode, isFocusable)
+}
+
+function invokeFocus (instance, el) {
+  const focus = instance?.exposed?.focus ?? instance?.proxy?.focus
+  if (typeof focus === 'function') focus()
+  else focusElement(el)
+}
+
+/** Queue focus on a detachable host until content is visible (see detachable.js). */
+function deferFocus (el, detachable, focus) {
+  el.__waveUiDetachable = detachable
+  detachable.registerAutofocus({ el, focus })
+}
+
+function unregisterVFocus (el) {
+  el.__waveUiDetachable?.unregisterAutofocus(el)
+  delete el.__waveUiDetachable
+}
+
+function scheduleFocus (el, vnode, prevVNode) {
+  const instance = resolveFocusableInstance(vnode, prevVNode)
+  const focus = () => invokeFocus(instance, el)
+  const detachable = detachableFromDirective(vnode, prevVNode)
+  if (detachable) {
+    deferFocus(el, detachable, focus)
+    return
+  }
+  nextTick(focus)
 }
 
 export function focusElement (el) {
@@ -33,42 +92,57 @@ export function guardFocusable (vm) {
   return true
 }
 
-/** Nearest ancestor component with `focusable: true` (e.g. w-input inside w-form-element). */
-export function resolveFocusableInstance (el) {
-  return walkParentInstances(el, isFocusableInstance)
+/** Handles v-focus on native focusable elements only. */
+export const focusDirective = {
+  mounted (el, binding, vnode, prevVNode) {
+    // Focusable Wave components run applyVFocusOnMount instead.
+    if (resolveFocusableInstance(vnode, prevVNode)) return
+    scheduleFocus(el, vnode, prevVNode)
+  },
+  unmounted (el) {
+    unregisterVFocus(el)
+  }
 }
 
-/** 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
+function hasVFocus (vnode) {
+  return !!vnode?.dirs?.some(d => d.dir === focusDirective)
 }
 
-export function callFocus (el) {
-  const instance = resolveFocusableInstance(el)
-  const focusFn = instance?.exposed?.focus ?? instance?.proxy?.focus
-  if (typeof focusFn === 'function') {
-    focusFn()
+function applyVFocusOnMount (instance) {
+  const vnode = instance?.vnode
+  if (!hasVFocus(vnode)) return
+  const vm = instance?.proxy
+  const el = vnode.el ?? vm?.$el
+  if (!el) return
+
+  const focus = () => vm?.focus?.()
+  const detachable = detachableParent(instance)
+  if (detachable) {
+    deferFocus(el, detachable, focus)
     return
   }
-  focusElement(el)
+  focus()
 }
 
-/** 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
+/** For options-API focusable components (focusable: true). */
+export const vFocusLifecycleMixin = {
+  mounted () {
+    applyVFocusOnMount(getCurrentInstance())
+  },
+  unmounted () {
+    unregisterVFocus(this.$el)
+  }
 }
 
-export function unregisterVFocus (el) {
-  el.__waveUiDetachable?.unregisterAutofocus(el)
-  delete el.__waveUiDetachable
+/** For script-setup focusable components (focusable: true). */
+export function useVFocus () {
+  let el = null
+  onMounted(() => {
+    const instance = getCurrentInstance()
+    el = instance?.vnode?.el ?? instance?.proxy?.$el
+    applyVFocusOnMount(instance)
+  })
+  onUnmounted(() => {
+    if (el) unregisterVFocus(el)
+  })
 }