wave-ui 4.0.0 → 4.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "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/index.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed, Fragment } from 'vue'
 import { objectifyClasses } from '../../utils/index'
 import { consoleError } from '../../utils/console'
 import RippleMixin from '../../mixins/ripple'
@@ -119,7 +119,8 @@ export default {
 
     // Detect if the accordion items are directly provided through slot using WAccordionItem.
     accordionItemsProvided () {
-      return this.$slots.default?.()?.some(item => item?.type?.name === 'w-accordion-item')
+      const slot = this.$slots.default?.() || []
+      return this.hasAccordionItemVNodes(slot)
     },
 
     accordionClasses () {
@@ -151,6 +152,18 @@ export default {
   },
 
   methods: {
+    hasAccordionItemVNodes (nodes = []) {
+      return nodes.some((node) => {
+        if (!node) return false
+        if (node.type === WAccordionItem) return true
+        if (node.type?.name === 'w-accordion-item') return true
+        if (node.type === Fragment && Array.isArray(node.children)) {
+          return this.hasAccordionItemVNodes(node.children)
+        }
+        return false
+      })
+    },
+
     getAccordionItem (cuid) {
       return this.accordionItemsById[cuid]
     },

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

@@ -1,7 +1,7 @@
 <template lang="pug">
 slot(name="activator")
 slot(v-if="!$slots.activator")
-teleport(:to="teleportTarget" :disabled="!teleportTarget")
+teleport(v-if="detachableDomReady" :to="teleportTarget" :disabled="!teleportTarget")
   transition(:name="transitionName" appear @after-leave="onAfterLeave")
     .w-menu(
       v-if="custom && detachableVisible"

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

@@ -183,6 +183,38 @@ export default {
   },
 
   methods: {
+    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 +232,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 +291,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 +318,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 +329,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 +353,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 +375,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)
       },

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

@@ -1,7 +1,7 @@
 <template lang="pug">
 slot(name="activator")
 slot(v-if="!$slots.activator")
-teleport(:to="teleportTarget" :disabled="!teleportTarget")
+teleport(v-if="detachableDomReady" :to="teleportTarget" :disabled="!teleportTarget")
   transition(:name="transitionName" appear @after-leave="onAfterLeave")
     .w-tooltip(
       v-if="detachableVisible"

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

@@ -44,6 +44,11 @@ export default {
   },
 
   data: () => ({
+    /**
+     * When false (SSR + first hydrated paint), the Teleport subtree is not rendered so HTML matches.
+     * Set true in mounted(), then the menu/tooltip portal attaches — avoids Nuxt/Vue hydration mismatches.
+     */
+    detachableDomReady: false,
     // The event listeners handlers have to be removed the exact same way they have been attached.
     // Since the handler functions have variables that change after hot-reload, keep them exactly
     // as is in an array so we can delete them on destroy.
@@ -464,29 +469,32 @@ export default {
   },
 
   mounted () {
-    if (this.activator) {
-      // External activator: attach via document-level delegation.
-      this.bindActivatorEvents()
-    }
-    else {
-      // Slot-based activator: auto-attach DOM listeners to the slot's root element on next tick
-      // so the slot content is guaranteed to be in the DOM.
-      this.$nextTick(() => {
-        // Re-check activator prop (might have resolved from a Vue ref after the tick).
-        if (this.activator) this.bindActivatorEvents()
-        else this._attachActivatorListeners()
-
-        if (this.modelValue && !this.disable) this.open({ target: this.activatorEl })
-      })
-    }
+    this.detachableDomReady = true
+    this.$nextTick(() => {
+      if (this.activator) {
+        // External activator: attach via document-level delegation.
+        this.bindActivatorEvents()
+      }
+      else {
+        // Slot-based activator: auto-attach DOM listeners to the slot's root element on next tick
+        // so the slot content is guaranteed to be in the DOM.
+        this.$nextTick(() => {
+          // Re-check activator prop (might have resolved from a Vue ref after the tick).
+          if (this.activator) this.bindActivatorEvents()
+          else this._attachActivatorListeners()
+
+          if (this.modelValue && !this.disable) this.open({ target: this.activatorEl })
+        })
+      }
 
-    // Unwrap the overlay if any.
-    if (this.overlay) this.overlayEl = this.$refs.overlay?.$el
+      // Unwrap the overlay if any.
+      if (this.overlay) this.overlayEl = this.$refs.overlay?.$el
 
-    if (this.modelValue && this.activator && !this.disable) {
-      this.toggle({ type: this.shouldShowOnClick ? 'click' : 'mouseenter', target: this.activatorEl })
-    }
-    else if (this.modelValue && !this.disable) this.open({ target: this.activatorEl })
+      if (this.modelValue && this.activator && !this.disable) {
+        this.toggle({ type: this.shouldShowOnClick ? 'click' : 'mouseenter', target: this.activatorEl })
+      }
+      else if (this.modelValue && !this.disable) this.open({ target: this.activatorEl })
+    })
   },
 
   unmounted () {