wave-ui 3.25.6 → 3.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.25.6",
+  "version": "3.26.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",
@@ -49,30 +49,30 @@
     "ui"
   ],
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@biomejs/biome": "^1.9.4",
-    "@faker-js/faker": "^9.9.0",
+    "@babel/core": "^7.29.0",
+    "@biomejs/biome": "^2.4.12",
+    "@faker-js/faker": "^10.4.0",
     "@mdi/font": "^7.4.47",
-    "@tsconfig/recommended": "^1.0.10",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "autoprefixer": "^10.4.21",
-    "axios": "^1.11.0",
+    "@tsconfig/recommended": "^1.0.13",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "autoprefixer": "^10.5.0",
+    "axios": "^1.15.1",
     "font-awesome": "^4.7.0",
-    "globals": "^16.4.0",
-    "gsap": "^3.13.0",
+    "globals": "^17.5.0",
+    "gsap": "^3.15.0",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.5.6",
-    "pug": "^3.0.3",
-    "rollup-plugin-delete": "^3.0.1",
-    "sass": "^1.92.1",
+    "postcss": "^8.5.10",
+    "pug": "^3.0.4",
+    "rollup-plugin-delete": "^3.0.2",
+    "sass": "^1.99.0",
     "simple-syntax-highlighter": "^3.1.1",
     "splitpanes": "^4.0.4",
-    "typescript": "^5.9.2",
-    "vite": "^6.3.6",
-    "vite-svg-loader": "^5.1.0",
-    "vue": "^3.5.21",
-    "vue-router": "^4.5.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.9",
+    "vite-svg-loader": "^5.1.1",
+    "vue": "^3.5.32",
+    "vue-router": "^5.0.4",
     "vueperslides": "^3.6.0",
     "vuex": "^4.1.0"
   },

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

@@ -0,0 +1,14 @@
+<template lang="pug">
+.w-accordion__item-content
+  slot
+</template>
+
+<script>
+// Keep-alive only works with components, not with DOM nodes.
+
+export default {
+  name: 'accordion-content', // Keep-alive include/exclude mechanism is component-name-based.
+
+  props: { item: { type: Object, default: () => ({}) } }
+}
+</script>

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

@@ -74,7 +74,9 @@ export default {
     shadow: { type: Boolean },
     duration: { type: Number, default: 250 },
     dark: { type: Boolean },
-    light: { type: Boolean }
+    light: { type: Boolean },
+    keepAlive: { type: Boolean, default: true },
+    keepInDom: { type: Boolean, default: false }
   },
 
   components: { WAccordionItem },

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

@@ -33,20 +33,49 @@
       @click.stop="!accordionItem._disabled && toggleItem(accordionItem, $event)"
       :class="{ 'w-accordion__expand-icon--expanded': accordionItem._expanded, 'w-accordion__expand-icon--rotate90': options.expandIconRotate90 }")
   //- Content.
-  w-transition-expand(y @after-leave="onEndOfCollapse(accordionItem)" :duration="options.duration")
-    .w-accordion__item-content(v-if="accordionItem._expanded" :class="contentClasses")
+  //- keepInDom: content stays mounted; v-show toggles visibility (keep-alive is inactive, like w-tabs).
+  w-transition-expand(
+    v-if="options.keepInDom"
+    y
+    @after-leave="onEndOfCollapse(accordionItem)"
+    :duration="options.duration")
+    accordion-content(
+      v-show="accordionItem._expanded"
+      :item="accordionItem"
+      :class="contentClasses")
       slot(
         name="content"
         :item="getOriginalItem(accordionItem)"
         :expanded="accordionItem._expanded"
         :index="accordionItem._index + 1")
         div(v-html="accordionItem[options.itemContentKey]")
+  w-transition-expand(
+    v-else
+    y
+    @after-leave="onEndOfCollapse(accordionItem)"
+    :duration="options.duration")
+    keep-alive(:exclude="options.keepAlive ? '' : 'accordion-content'")
+      accordion-content(
+        v-if="accordionItem._expanded"
+        :key="accordionItem._cuid"
+        :item="accordionItem"
+        :class="contentClasses")
+        slot(
+          name="content"
+          :item="getOriginalItem(accordionItem)"
+          :expanded="accordionItem._expanded"
+          :index="accordionItem._index + 1")
+          div(v-html="accordionItem[options.itemContentKey]")
 </template>
 
 <script>
+import AccordionContent from './accordion-content.vue'
+
 export default {
   name: 'w-accordion-item',
 
+  components: { AccordionContent },
+
   props: {
     title: { type: String },
     content: { type: String },

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

@@ -67,7 +67,15 @@ export default {
     persistent: { type: Boolean },
     transition: { type: String },
     dark: { type: Boolean },
-    light: { type: Boolean }
+    light: { type: Boolean },
+    loading: { type: Boolean },
+    outline: { type: Boolean },
+    text: { type: Boolean },
+    round: { type: Boolean },
+    shadow: { type: Boolean },
+    tile: { type: Boolean },
+    type: { type: String },
+    disabled: { type: Boolean }
   },
 
   emits: ['cancel', 'confirm'],
@@ -128,6 +136,14 @@ export default {
         icon: this.icon,
         dark: this.dark,
         light: this.light,
+        loading: this.loading,
+        outline: this.outline,
+        text: this.text,
+        round: this.round,
+        shadow: this.shadow,
+        tile: this.tile,
+        type: this.type,
+        disabled: this.disabled,
         tooltip: label,
         tooltipProps,
         ...this.mainButton

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

@@ -1,6 +1,6 @@
 <template lang="pug">
 slot(name="activator" :on="activatorEventHandlers")
-transition(:name="transitionName" appear)
+transition(:name="transitionName" appear @after-leave="onAfterLeave")
   .w-menu(
     v-if="custom && detachableVisible"
     ref="detachable"
@@ -45,8 +45,6 @@ w-overlay(
 import { objectifyClasses } from '../utils/index'
 import DetachableMixin from '../mixins/detachable'
 
-// const marginFromWindowSide = 4 // Amount of px from a window side, instead of overflowing.
-
 export default {
   name: 'w-menu',
   mixins: [DetachableMixin],
@@ -96,10 +94,10 @@ export default {
     detachableVisible: false,
     hoveringActivator: false,
     hoveringMenu: false,
-    // The menu computed top & left coordinates.
+    // null until first computeDetachableCoords run, so no inline top/left is set before positioning.
     detachableCoords: {
-      top: 0,
-      left: 0
+      top: null,
+      left: null
     },
     activatorWidth: 0,
     detachableEl: null,
@@ -113,6 +111,7 @@ export default {
      * - `detachableParentEl`
      * - `activatorEl`
      * - `position`
+     * - `effectiveDetachablePosition`
      * - `alignment`
      **/
 
@@ -154,7 +153,7 @@ export default {
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         ...this.menuClasses,
-        [`w-menu--${this.position}`]: !this.noPosition,
+        [`w-menu--${this.effectiveDetachablePosition}`]: !this.noPosition,
         [`w-menu--align-${this.alignment}`]: !this.noPosition && this.alignment,
         'w-menu--tile': this.tile,
         'w-menu--card': !this.custom,
@@ -171,15 +170,18 @@ export default {
     styles () {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || (this.overlay && !this.zIndex && 200) || null,
-        top: (this.detachableCoords.top && `${~~this.detachableCoords.top}px`) || null,
-        left: (this.detachableCoords.left && `${~~this.detachableCoords.left}px`) || null,
+        top: Number.isFinite(this.detachableCoords.top) ? `${~~this.detachableCoords.top}px` : null,
+        left: Number.isFinite(this.detachableCoords.left) ? `${~~this.detachableCoords.left}px` : null,
         minWidth: (this.minWidth && this.menuMinWidth) || null,
         maxWidth: (this.maxWidth && this.menuMaxWidth) || null,
+        visibility: this.detachableReady ? null : 'hidden', // Hidden until coords are ready.
         '--w-menu-bg-color': this.arrow && (this.$waveui.colors[this.bgColor] || 'var(--w-base-bg-color)')
       }
     },
 
     activatorEventHandlers () {
+      if (this.disable) return {}
+
       let handlers = {}
 
       if (this.showOnHover) {
@@ -222,6 +224,8 @@ export default {
 
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     toggle (e) {
+      if (this.disable) return
+
       let shouldShowMenu = this.detachableVisible
       if (typeof window !== 'undefined' && 'ontouchstart' in window &&
           this.showOnHover && e.type === 'click') {
@@ -271,9 +275,14 @@ export default {
       this.$emit('update:modelValue', (this.detachableVisible = false))
       this.$emit('input', false)
       this.$emit('close')
+      this.viewportPlacementOverride = null
       // Remove the mousedown listener if the menu got closed without a mousedown outside of the menu.
-      document.removeEventListener('mousedown', this.onOutsideMousedown)
-      window.removeEventListener('resize', this.onResize)
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('mousedown', this.onOutsideMousedown)
+      }
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', this.onResize)
+      }
     }
   }
 

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

@@ -1,6 +1,6 @@
 <template lang="pug">
 slot(name="activator" :on="activatorEventHandlers")
-transition(:name="transitionName" appear)
+transition(:name="transitionName" appear @after-leave="onAfterLeave")
   .w-tooltip(
     v-if="detachableVisible"
     ref="detachable"
@@ -14,8 +14,6 @@ transition(:name="transitionName" appear)
 import { objectifyClasses } from '../utils/index'
 import DetachableMixin from '../mixins/detachable'
 
-// const marginFromWindowSide = 4 // Amount of px from a window side, instead of overflowing.
-
 export default {
   name: 'w-tooltip',
   mixins: [DetachableMixin],
@@ -52,10 +50,10 @@ export default {
   data: () => ({
     detachableVisible: false,
     hoveringActivator: false,
-    // The tooltip computed top & left coordinates.
+    // null until first computeDetachableCoords run, so no inline top/left is set before positioning.
     detachableCoords: {
-      top: 0,
-      left: 0
+      top: null,
+      left: null
     },
     detachableEl: null,
     timeoutId: null
@@ -68,6 +66,7 @@ export default {
      * - `detachableParentEl`
      * - `activatorEl`
      * - `position`
+     * - `effectiveDetachablePosition`
      * - `alignment`
      **/
 
@@ -76,7 +75,9 @@ export default {
     },
 
     transitionName () {
-      const direction = this.position.replace(/top|bottom/, m => ({ top: 'up', bottom: 'down' }[m]))
+      const direction = this.effectiveDetachablePosition.replace(/top|bottom/, m => (
+        { top: 'up', bottom: 'down' }[m]
+      ))
       return this.transition || `w-tooltip-slide-fade-${direction}`
     },
 
@@ -96,7 +97,7 @@ export default {
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         ...this.tooltipClasses,
-        [`w-tooltip--${this.position}`]: !this.noPosition,
+        [`w-tooltip--${this.effectiveDetachablePosition}`]: !this.noPosition,
         [`w-tooltip--align-${this.alignment}`]: !this.noPosition && this.alignment,
         'w-tooltip--dark': this.dark,
         'w-tooltip--light': this.light,
@@ -115,13 +116,16 @@ export default {
     styles () {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || null,
-        top: (this.detachableCoords.top && `${~~this.detachableCoords.top}px`) || null,
-        left: (this.detachableCoords.left && `${~~this.detachableCoords.left}px`) || null,
+        top: Number.isFinite(this.detachableCoords.top) ? `${~~this.detachableCoords.top}px` : null,
+        left: Number.isFinite(this.detachableCoords.left) ? `${~~this.detachableCoords.left}px` : null,
+        visibility: this.detachableReady ? null : 'hidden', // Hidden until coords are ready.
         '--w-tooltip-bg-color': this.$waveui.colors[this.bgColor] || 'var(--w-base-bg-color)'
       }
     },
 
     activatorEventHandlers () {
+      if (this.disable) return {}
+
       let handlers = {}
 
       // Check the window exists: SSR-proof.
@@ -163,6 +167,8 @@ export default {
 
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     toggle (e) {
+      if (this.disable) return
+
       let shouldShowTooltip = this.detachableVisible
 
       // For touch devices.
@@ -204,9 +210,14 @@ export default {
       this.$emit('update:modelValue', (this.detachableVisible = false))
       this.$emit('input', false)
       this.$emit('close')
+      this.viewportPlacementOverride = null
       // Remove the mousedown listener if the tooltip got closed without a mousedown outside of the tooltip.
-      document.removeEventListener('mousedown', this.onOutsideMousedown)
-      window.removeEventListener('resize', this.onResize)
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('mousedown', this.onOutsideMousedown)
+      }
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', this.onResize)
+      }
     }
   }
 

package/src/wave-ui/core.js

@@ -53,8 +53,6 @@ const injectPresets = (component, presets) => {
 }
 
 export default class WaveUI {
-  static #registered = false
-
   // Exposed as a global object and also `app.provide`d.
   // Accessible from this.$waveui, or inject('$waveui').
   $waveui = {
@@ -161,11 +159,10 @@ export default class WaveUI {
 
     // eslint-disable-next-line no-new
     new WaveUI(app, options)
-    WaveUI.#registered = true
   }
 
   constructor (app, options = {}) {
-    if (WaveUI.#registered) return // May happen with SSR.
+    if (app.config.globalProperties.$waveui) return // Already installed for this app instance.
 
     this.$waveui._notificationManager = new NotificationManager()
 

package/src/wave-ui/index.d.ts

@@ -6,8 +6,6 @@ declare module 'wave-ui/src/wave-ui' {
   import type { ConstructorOptions } from '@/types/plugin'
 
   export declare class WaveUIPlugin {
-    static #registered: boolean
-
     $waveui: $waveui
 
     constructor(app: App, options?: ConstructorOptions & {})