wave-ui 4.0.2 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "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,10 +90,11 @@ 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'
 
 export default {
   name: 'w-accordion-item',
-
+  expose: ['focus'],
   mixins: [RippleMixin],
 
   setup () {
@@ -161,6 +162,11 @@ export default {
   },
 
   methods: {
+    focus () {
+      if (this.accordionItem._disabled) return
+      focusElement(this.$el.querySelector('.w-accordion__item-title'))
+    },
+
     onAccordionTitlePointerDown (e) {
       if (this.accordionItem._disabled) return
       if (e.target.closest?.('.w-accordion__expand-icon')) return

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

@@ -113,10 +113,12 @@ component(
 <script>
 import { computed } from 'vue'
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
+import FocusableMixin from '../mixins/focusable'
 
 export default {
   name: 'w-autocomplete',
-  mixins: [FormElementMixin],
+  expose: ['focus'],
+  mixins: [FormElementMixin, FocusableMixin],
   inheritAttrs: false,
 
   setup () {

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

@@ -1,10 +1,10 @@
 <template lang="pug">
 component(v-if="tooltip" is="w-tooltip" v-bind="tooltipProps")
-  button-partial(v-bind="buttonProps")
+  button-partial(ref="button" v-bind="buttonProps")
     slot
   template(#tooltip)
     div(v-html="tooltip")
-button-partial(v-else v-bind="buttonProps")
+button-partial(v-else ref="button" v-bind="buttonProps")
   slot
   template(#loading)
     slot(name="loading")
@@ -12,9 +12,11 @@ button-partial(v-else v-bind="buttonProps")
 
 <script>
 import ButtonPartial from './button.vue'
+import { focusElement } from '../../utils/focus'
 
 export default {
   name: 'w-button',
+  expose: ['focus'],
   inheritAttrs: false, // The attrs are only bound to the button-partial, not the root.
 
   props: {
@@ -66,6 +68,13 @@ export default {
       const { tooltip, tooltipProps = {}, ...props } = this.$props
       return { ...props, ...this.$attrs }
     }
+  },
+
+  methods: {
+    focus () {
+      if (this.disabled) return
+      focusElement(this.$refs.button?.$el)
+    }
   }
 }
 </script>

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

@@ -50,10 +50,12 @@ component(
 
 <script>
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
+import FocusableMixin from '../mixins/focusable'
 
 export default {
   name: 'w-checkbox',
-  mixins: [FormElementMixin],
+  expose: ['focus'],
+  mixins: [FormElementMixin, FocusableMixin],
 
   setup () {
     return useWaveUiFormIds()

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

@@ -9,6 +9,7 @@ component(
   :wrap="inline"
   :class="classes")
   w-checkbox(
+    ref="item"
     v-for="(item, i) in checkboxItems"
     :key="i"
     :model-value="item._isChecked"
@@ -32,9 +33,11 @@ component(
 <script>
 import { reactive } from 'vue'
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
+import { guardFocusable } from '../utils/focus'
 
 export default {
   name: 'w-checkboxes',
+  expose: ['focus'],
   mixins: [FormElementMixin],
 
   setup () {
@@ -104,6 +107,12 @@ export default {
   },
 
   methods: {
+    focus () {
+      if (!guardFocusable(this)) return
+      const items = [].concat(this.$refs.item || []).filter(Boolean)
+      items.find(c => !c.isDisabled && !c.isReadonly)?.focus?.()
+    },
+
     reset () {
       this.checkboxItems.forEach(item => (item._isChecked = null))
       this.$emit('update:modelValue', [])

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

@@ -1,5 +1,6 @@
 <template lang="pug">
 w-overlay.w-dialog(
+  ref="overlay"
   :model-value="showWrapper"
   :persistent="persistent"
   :persistent-no-animation="persistentNoAnimation"
@@ -32,6 +33,7 @@ import { objectifyClasses } from '../utils/index'
 
 export default {
   name: 'w-dialog',
+  expose: ['focus'],
 
   props: {
     modelValue: { default: true },
@@ -103,6 +105,10 @@ export default {
   },
 
   methods: {
+    focus () {
+      this.$refs.overlay?.focus?.()
+    },
+
     onOutsideClick () {
       if (!this.persistent) {
         this.showContent = false

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

@@ -5,6 +5,7 @@
     .w-drawer-wrap__pushable
       w-overlay(
         v-if="!noOverlay"
+        ref="overlay"
         v-model="showDrawer"
         @click="onOutsideClick"
         :persistent="persistent"
@@ -21,12 +22,15 @@
         ref="drawer"
         :is="tag || 'aside'"
         :class="drawerClasses"
-        :style="styles")
+        :style="styles"
+        :tabindex="noOverlay ? 0 : null"
+        @keydown.escape.stop="noOverlay && !persistent && onOutsideClick()")
         slot
   //- Other cases.
   template(v-else)
     w-overlay(
       v-if="!noOverlay"
+      ref="overlay"
       v-model="showDrawer"
       @click="onOutsideClick"
       :persistent="persistent"
@@ -43,11 +47,14 @@
         ref="drawer"
         :is="tag || 'aside'"
         :class="drawerClasses"
-        :style="styles")
+        :style="styles"
+        :tabindex="noOverlay ? 0 : null"
+        @keydown.escape.stop="noOverlay && !persistent && onOutsideClick()")
         slot
 </template>
 
 <script>
+import { focusElement } from '../utils/focus'
 // The complexity in this component is on close:
 // we must keep the wrapper in the DOM until the drawer transition is finished.
 // Then emit the modelValue update that will trigger the removal of the wrapper from the DOM.
@@ -56,6 +63,7 @@ const oppositeSides = { left: 'right', right: 'left', top: 'down', bottom: 'up'
 
 export default {
   name: 'w-drawer',
+  expose: ['focus'],
 
   props: {
     modelValue: { default: true },
@@ -164,6 +172,11 @@ export default {
   },
 
   methods: {
+    focus () {
+      if (this.$refs.overlay) this.$refs.overlay.focus()
+      else focusElement(this.$refs.drawer?.$el || this.$refs.drawer)
+    },
+
     onBeforeClose () {
       this.$emit('before-close')
     },

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

@@ -129,11 +129,13 @@ component(
  **/
 
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
+import FocusableMixin from '../mixins/focusable'
 import { reactive } from 'vue'
 
 export default {
   name: 'w-input',
-  mixins: [FormElementMixin],
+  expose: ['focus'],
+  mixins: [FormElementMixin, FocusableMixin],
   inheritAttrs: false, // The attrs should only be added to the input not the wrapper.
 
   setup () {

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

@@ -45,10 +45,11 @@ ul.w-list(:class="classes")
 <script>
 import { useId } from 'vue'
 import RippleMixin from '../mixins/ripple'
+import { focusElement } from '../utils/focus'
 
 export default {
   name: 'w-list',
-
+  expose: ['focus'],
   mixins: [RippleMixin],
 
   setup () {
@@ -138,6 +139,14 @@ export default {
   },
 
   methods: {
+    focus () {
+      const selected = this.listItems.find(li => li._selected && !li.disabled)
+      const target = selected || this.listItems.find(li => !li.disabled)
+      if (!target) return
+      if (this.listId) focusElement(document.getElementById(`${this.listId}_item-${target._index + 1}`))
+      else focusElement(this.$el.querySelector('[role="option"][tabindex="0"]'))
+    },
+
     // If object, get the item value, if none, get the item label, if none get the id.
     // If simple value, return as is.
     getItemValue (item) {

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

@@ -48,9 +48,11 @@ teleport(v-if="detachableDomReady" :to="teleportTarget" :disabled="!teleportTarg
 <script>
 import { objectifyClasses } from '../utils/index'
 import DetachableMixin from '../mixins/detachable'
+import { focusElement } from '../utils/focus'
 
 export default {
   name: 'w-menu',
+  expose: ['focus'],
   mixins: [DetachableMixin],
   inheritAttrs: false, // The attrs are only bound to the button-partial, not the root.
 
@@ -215,6 +217,11 @@ export default {
   },
 
   methods: {
+    focus () {
+      if (this.overlay && this.$refs.overlay) this.$refs.overlay.focus()
+      else focusElement(this.activatorEl)
+    },
+
     /**
      * Other methods in the `detachable` mixin:
      * - `open`

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

@@ -5,17 +5,18 @@ transition(name="fade" appear @after-leave="onClose")
     v-show="showOverlay"
     ref="overlay"
     :style="(modelValue && styles) || null"
-    @keydown.escape.stop="onClick"
     @click="onClick"
-    v-focus
     tabindex="0"
     :class="classes")
     slot
 </template>
 
 <script>
+import { focusElement } from '../utils/focus'
+
 export default {
   name: 'w-overlay',
+  expose: ['focus'],
 
   props: {
     modelValue: {},
@@ -39,7 +40,8 @@ export default {
 
   data: () => ({
     persistentAnimate: false,
-    showOverlay: false
+    showOverlay: false,
+    documentEscapeBound: false
   }),
 
   computed: {
@@ -61,11 +63,29 @@ export default {
   },
 
   methods: {
-    onClick (e) {
-      // Don't react to a click inside the content (event bubbling).
-      if (!e.target.classList.contains('w-overlay')) return
+    focus () {
+      focusElement(this.$refs.overlay)
+    },
 
-      // Quickly add the animation class and remove it.
+    bindDocumentEscape () {
+      if (this.documentEscapeBound) return
+      document.addEventListener('keydown', this.onDocumentEscape)
+      this.documentEscapeBound = true
+    },
+
+    unbindDocumentEscape () {
+      if (!this.documentEscapeBound) return
+      document.removeEventListener('keydown', this.onDocumentEscape)
+      this.documentEscapeBound = false
+    },
+
+    onDocumentEscape (e) {
+      if (e.key !== 'Escape') return
+      if (!this.showOverlay || !this.modelValue) return
+      this.dismiss(e)
+    },
+
+    dismiss (e) {
       if (this.persistent && !this.persistentNoAnimation) {
         this.persistentAnimate = true
         setTimeout(() => (this.persistentAnimate = false), 150) // Must match CSS animation duration.
@@ -78,9 +98,16 @@ export default {
       this.$emit('click', e)
     },
 
+    onClick (e) {
+      // Don't react to a click inside the content (event bubbling).
+      if (!e.target.classList.contains('w-overlay')) return
+      this.dismiss(e)
+    },
+
     // Wait until the end of the closing transition (v-show) to completely unmount (v-if).
     // The onClose method is called twice from the transition: once for the v-show, and once for the v-if.
     onClose () {
+      this.unbindDocumentEscape()
       this.$emit('update:modelValue', false)
       this.$emit('input', false)
       if (!this.modelValue) this.$emit('close') // Only emit once.
@@ -89,11 +116,20 @@ export default {
 
   created () {
     this.showOverlay = this.modelValue
+    if (this.modelValue) this.bindDocumentEscape()
+  },
+
+  unmounted () {
+    this.unbindDocumentEscape()
   },
 
   watch: {
     modelValue (bool) {
-      if (bool) this.showOverlay = true
+      if (bool) {
+        this.showOverlay = true
+        this.bindDocumentEscape()
+      }
+      else this.unbindDocumentEscape()
     }
   }
 }

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

@@ -48,10 +48,12 @@ component(
 
 <script>
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
+import FocusableMixin from '../mixins/focusable'
 
 export default {
   name: 'w-radio',
-  mixins: [FormElementMixin],
+  expose: ['focus'],
+  mixins: [FormElementMixin, FocusableMixin],
 
   setup () {
     return useWaveUiFormIds()

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

@@ -9,6 +9,7 @@ component(
   :wrap="inline"
   :class="classes")
   w-radio(
+    ref="item"
     v-for="(item, i) in radioItems"
     :key="i"
     :model-value="item.value === modelValue"
@@ -31,9 +32,11 @@ component(
 
 <script>
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
+import { guardFocusable } from '../utils/focus'
 
 export default {
   name: 'w-radios',
+  expose: ['focus'],
   mixins: [FormElementMixin],
 
   setup () {
@@ -97,6 +100,12 @@ export default {
   },
 
   methods: {
+    focus () {
+      if (!guardFocusable(this)) return
+      const items = [].concat(this.$refs.item || []).filter(Boolean)
+      items.find(c => !c.isDisabled && !c.isReadonly)?.focus?.()
+    },
+
     onInput (item) {
       this.inputValue = true
       this.$emit('update:modelValue', item.value)

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

@@ -30,9 +30,11 @@ component(
 
 <script>
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
+import { guardFocusable, focusElement } from '../utils/focus'
 
 export default {
   name: 'w-rating',
+  expose: ['focus'],
   mixins: [FormElementMixin],
 
   setup () {
@@ -104,6 +106,11 @@ export default {
   },
 
   methods: {
+    focus () {
+      if (!guardFocusable(this)) return
+      focusElement(this.$el.querySelector('.w-rating__button:not([disabled])'))
+    },
+
     onButtonClick (i) {
       this.rating = i
       this.$emit('update:modelValue', this.rating)

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

@@ -110,10 +110,13 @@ component(
 
 import { computed } from 'vue'
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
+import FocusableMixin from '../mixins/focusable'
+import { guardFocusable, focusElement } from '../utils/focus'
 
 export default {
   name: 'w-select',
-  mixins: [FormElementMixin],
+  expose: ['focus'],
+  mixins: [FormElementMixin, FocusableMixin],
 
   setup (props) {
     const { waveUiUseId } = useWaveUiFormIds()
@@ -259,6 +262,12 @@ export default {
   },
 
   methods: {
+    focus () {
+      if (!guardFocusable(this)) return
+      focusElement(this.$refs['selection-input'])
+      if (!this.showMenu) this.openMenu()
+    },
+
     onFocus (e) {
       if (this.isFocused) return
 

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

@@ -79,10 +79,13 @@ component(
 
 <script>
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
+import FocusableMixin from '../mixins/focusable'
 
 export default {
   name: 'w-slider',
-  mixins: [FormElementMixin],
+  expose: ['focus'],
+  focusTargetRef: 'thumb',
+  mixins: [FormElementMixin, FocusableMixin],
 
   setup () {
     return useWaveUiFormIds()

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

@@ -55,10 +55,12 @@ component(
 
 <script>
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
+import FocusableMixin from '../mixins/focusable'
 
 export default {
   name: 'w-switch',
-  mixins: [FormElementMixin],
+  expose: ['focus'],
+  mixins: [FormElementMixin, FocusableMixin],
   inheritAttrs: false, // The attrs should only be added to the input not the wrapper.
 
   setup () {

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

@@ -76,10 +76,11 @@ 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'
 
 export default {
   name: 'w-tabs',
-
+  expose: ['focus'],
   mixins: [RippleMixin],
 
   setup () {
@@ -183,6 +184,14 @@ export default {
   },
 
   methods: {
+    focus () {
+      const bar = this.$refs['tabs-bar']
+      if (!bar) return
+      const tab = bar.querySelector('[role="tab"][aria-selected="true"]:not([tabindex="-1"])')
+        || bar.querySelector('[role="tab"][tabindex="0"]')
+      focusElement(tab)
+    },
+
     resolveTabUid (value) {
       if (!this.tabs.length) return null
       if (value === undefined || value === null || value === '') return this.tabs[0]._uid
@@ -455,6 +464,12 @@ export default {
       margin-right: -1px;
     }
     .w-tabs--card &--active {border-bottom-color: transparent;}
+    .w-tabs--pill-slider & {
+      padding: calc(var(--w-base-increment) * 1) calc(var(--w-base-increment) * 2);
+      margin: calc(var(--w-base-increment) * 1) calc(var(--w-base-increment) * 1);
+      border-radius: 99em;
+      font-size: round(nearest, calc(1.1 * var(--w-base-font-size)), 1px);
+    }
 
     &--disabled {
       cursor: not-allowed;

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

@@ -19,10 +19,11 @@ span.w-tag(
 
 <script>
 import RippleMixin from '../mixins/ripple'
+import { focusElement } from '../utils/focus'
 
 export default {
   name: 'w-tag',
-
+  expose: ['focus'],
   mixins: [RippleMixin],
 
   props: {
@@ -48,6 +49,13 @@ export default {
 
   emits: ['input', 'update:modelValue'],
 
+  methods: {
+    focus () {
+      if (this.modelValue === -1) return
+      focusElement(this.$el)
+    }
+  },
+
   computed: {
     presetSize () {
       return (

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

@@ -68,10 +68,13 @@ component(
  **/
 
 import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
+import FocusableMixin from '../mixins/focusable'
 
 export default {
   name: 'w-textarea',
-  mixins: [FormElementMixin],
+  expose: ['focus'],
+  focusTargetRef: 'textarea',
+  mixins: [FormElementMixin, FocusableMixin],
   inheritAttrs: false, // The attrs should only be added to the textarea not the wrapper.
 
   setup () {

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

@@ -68,8 +68,11 @@ import { consoleWarn } from '../utils/console'
  * - option to add a left border.
  **/
 
+import { focusElement } from '../utils/focus'
+
 export default {
   name: 'w-tree',
+  expose: ['focus'],
 
   mixins: [RippleMixin],
 
@@ -122,6 +125,11 @@ export default {
   },
 
   methods: {
+    focus () {
+      if (this.disabled) return
+      focusElement(this.$el.querySelector('.w-tree__item-label[tabindex="0"]'))
+    },
+
     //  From data watcher, retain the oldItems open state.
     updateCurrentDepthTree (items, oldItems = []) {
       this.currentDepthItems = []

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 } from './utils/focus'
 import './scss/index.scss'
 
 let mounted = false
@@ -112,8 +113,7 @@ 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, binding, vnode) => scheduleFocus(vnode, el)
     })
     app.directive('scroll', {
       mounted: (el, binding) => {

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

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