wave-ui 4.0.1 → 4.1.0

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,46 @@ 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
+
+      if (typeof value === 'string') {
+        if (this.tabsByUid[value]?._uid) return value
+        const parsed = Number.parseInt(value, 10)
+        if (!Number.isNaN(parsed) && `${parsed}` === value.trim()) return this.tabs[parsed]?._uid || null
+        return null
+      }
+
+      if (typeof value === 'number' && value >= 0) return this.tabs[value]?._uid || null
+      return null
+    },
+
+    syncActiveTabFromModelValue (value = this.modelValue) {
+      const uid = this.resolveTabUid(value) || this.tabs[0]?._uid || null
+      const tab = uid ? this.tabsByUid[uid] : null
+      this.activeTabUid = tab?._uid || null
+      this.activeTabIndex = tab?._index || 0
+    },
+
+    shouldEmitUidModelValue () {
+      if (typeof this.modelValue !== 'string') return false
+      return !/^\d+$/.test(this.modelValue.trim())
+    },
+
+    getModelValueForTab (tab) {
+      if (this.shouldEmitUidModelValue()) return tab[this.itemIdKey] ?? tab._uid
+      return tab._index
+    },
+
     // Adding a tab in the list.
     addTab (item) {
       // If there is no unique ID provided, inject one in each tab.
@@ -200,6 +241,7 @@ export default {
     refreshTabs () {
       let items = this.items
       if (typeof items === 'number') items = Array(items).fill().map((_, i) => this.tabs[i] || {})
+      else items = items || []
 
       this.tabs = items.map((item, _index) => {
         // If there is no unique ID provided, inject one in each tab.
@@ -258,19 +300,23 @@ export default {
     openTab (uid) {
       this.prevTabIndex = this.activeTabIndex // To resolve the transition direction.
       const tab = this.tabsByUid[uid]
+      if (!tab) return
       this.activeTabIndex = tab._index
       this.activeTabUid = tab._uid
-      this.$emit('update:modelValue', tab._index)
-      this.$emit('input', tab._index)
+      const modelValue = this.getModelValueForTab(tab)
+      this.$emit('update:modelValue', modelValue)
+      this.$emit('input', modelValue)
 
       if (!this.noSlider) this.$nextTick(this.updateSlider)
     },
 
     // Updates the slider position.
     updateSlider (domLookup = true) {
-      if (domLookup) {
-        const ref = this.$refs['tabs-bar']
-        this.activeTabEl = ref?.querySelector('.w-tabs__bar-item--active')
+      const ref = this.$refs['tabs-bar']
+      if (domLookup || !this.activeTabEl) {
+        this.activeTabEl =
+          ref?.querySelector('.w-tabs__bar-item--active')
+          || ref?.querySelector(`.w-tabs__bar-item:nth-child(${this.activeTabIndex + 1})`)
       }
 
       if (!this.fillBar && this.activeTabEl) {
@@ -281,6 +327,10 @@ export default {
         this.slider.left = `${left - parentLeft - parseInt(borderLeftWidth) + tabsBar.scrollLeft}px`
         this.slider.width = `${width}px`
       }
+      else if (!this.fillBar && domLookup && this.tabs.length) {
+        // Hydration/layout timing can briefly hide active title lookup; retry once on next tick.
+        this.$nextTick(() => this.updateSlider(false))
+      }
       else {
         this.slider.left = `${this.activeTab._index * 100 / this.tabs.length}%`
         this.slider.width = `${100 / this.tabs.length}%`
@@ -288,17 +338,17 @@ export default {
     },
 
     updateActiveTab (index) {
-      if (typeof index === 'string') index = ~~index
-      else if (isNaN(index) || index < 0) index = 0
+      const uid = this.resolveTabUid(index)
+      const tab = uid ? this.tabsByUid[uid] : null
 
       // Only open the tab if it is found.
-      if (this.tabs[index]?._uid) {
-        this.openTab(this.tabs[index]?._uid)
+      if (tab?._uid) {
+        this.openTab(tab._uid)
 
         // Scroll the new active tab item title into view if needed.
         this.$nextTick(() => {
           const ref = this.$refs['tabs-bar']
-          this.activeTabEl = ref?.querySelector(`.w-tabs__bar-item:nth-child(${index + 1})`)
+          this.activeTabEl = ref?.querySelector(`.w-tabs__bar-item:nth-child(${tab._index + 1})`)
           if (this.activeTabEl) {
             this.activeTabEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
           }
@@ -312,13 +362,14 @@ export default {
     }
   },
 
-  beforeMount () {
+  created () {
     this.tabs = [] // Reset for hot-reloading.
-    const items = typeof this.items === 'number' ? Array(this.items).fill().map(Object) : this.items
+    const items = typeof this.items === 'number' ? Array(this.items).fill().map(Object) : this.items || []
     items.forEach(this.addTab)
+    this.syncActiveTabFromModelValue(this.modelValue)
+  },
 
-    if (this.modelValue ?? false) this.updateActiveTab(this.modelValue)
-
+  beforeMount () {
     this.$nextTick(() => {
       this.updateSlider()
       // Disable the slider transition while loading.
@@ -333,14 +384,15 @@ export default {
   },
 
   watch: {
-    modelValue (index) {
-      if (index !== this.activeTabIndex) this.updateActiveTab(index)
+    modelValue (value) {
+      const uid = this.resolveTabUid(value)
+      if (uid && uid !== this.activeTabUid) this.updateActiveTab(value)
     },
     items: {
       handler () {
         this.refreshTabs()
-
-        if (this.tabs.length) this.reopenTheActiveTab()
+        this.syncActiveTabFromModelValue(this.modelValue)
+        if (!this.activeTabUid && this.tabs.length) this.reopenTheActiveTab()
 
         if (!this.noSlider) this.$nextTick(this.updateSlider)
       },
@@ -412,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]))
+    }
+  }
+}

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,39 @@
+import { nextTick } from 'vue'
+
+export function focusElement (el) {
+  el?.focus?.()
+}
+
+export function guardFocusable (vm) {
+  if (vm.isDisabled || vm.isReadonly) return false
+  return true
+}
+
+/**
+ * Resolve focus() from a directive host. On components, `vnode` is the root element
+ * VNode (no `vnode.component`); the DOM owner is on `el.__vueParentComponent`.
+ * Walk up when the root is a wrapper (e.g. `w-form-element` around `w-input`).
+ */
+export function resolveFocusFn (vnode, el) {
+  let instance = vnode?.component ?? el?.__vueParentComponent
+  while (instance) {
+    const focusFn = instance.exposed?.focus ?? instance.proxy?.focus
+    if (typeof focusFn === 'function') return focusFn
+    instance = instance.parent
+  }
+  return null
+}
+
+export function callFocus (vnode, el) {
+  const focusFn = resolveFocusFn(vnode, el)
+  if (typeof focusFn === 'function') {
+    focusFn()
+    return
+  }
+  focusElement(el)
+}
+
+/** Schedule focus after mount so template refs exist on the host component. */
+export function scheduleFocus (vnode, el) {
+  nextTick(() => callFocus(vnode, el))
+}