wave-ui 3.19.0 → 3.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.19.0",
+  "version": "3.20.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",
@@ -42,22 +42,27 @@
     "vue framework",
     "ui"
   ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --base /wave-ui/",
+    "build-types": "tsc -p ./tsconfig.json",
+    "build-bundle": "BUNDLE=true vite build && npm run build-types",
+    "preview": "vite preview --base /wave-ui/",
+    "lint": "biome check .",
+    "lint:fix": "biome check --apply .",
+    "format": "biome format .",
+    "format:fix": "biome format --write .",
+    "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
+  },
   "devDependencies": {
-    "@eslint/js": "^9.21.0",
-    "@faker-js/faker": "^9.5.1",
+    "@babel/core": "^7.26.10",
+    "@biomejs/biome": "^1.9.4",
+    "@faker-js/faker": "^9.6.0",
     "@mdi/font": "^7.4.47",
     "@tsconfig/recommended": "^1.0.8",
-    "@typescript-eslint/eslint-plugin": "^8.25.0",
-    "@typescript-eslint/parser": "^8.25.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "autoprefixer": "^10.4.20",
-    "axios": "^1.8.1",
-    "eslint": "^9.21.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-n": "^17.15.1",
-    "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-vue": "^9.32.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "autoprefixer": "^10.4.21",
+    "axios": "^1.8.4",
     "font-awesome": "^4.7.0",
     "globals": "^16.0.0",
     "gsap": "^3.12.7",
@@ -65,13 +70,12 @@
     "material-design-icons": "^3.0.1",
     "postcss": "^8.5.3",
     "pug": "^3.0.3",
-    "rollup-plugin-delete": "^3.0.0",
-    "sass": "^1.85.1",
+    "rollup-plugin-delete": "^3.0.1",
+    "sass": "^1.86.2",
     "simple-syntax-highlighter": "^3.1.1",
-    "splitpanes": "^3.1.8",
+    "splitpanes": "^4.0.3",
     "typescript": "^5.8.2",
-    "typescript-eslint": "^8.25.0",
-    "vite": "^6.2.0",
+    "vite": "^6.2.4",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
@@ -84,14 +88,5 @@
   "engines": {
     "node": ">=16.0.0",
     "pnpm": ">=8.0.0"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build --base /wave-ui/",
-    "build-types": "tsc -p ./tsconfig.json",
-    "build-bundle": "BUNDLE=true vite build && npm run build-types",
-    "preview": "vite preview --base /wave-ui/",
-    "lint": "vite lint",
-    "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
   }
-}
+}

package/src/wave-ui/components/transitions/w-transition-expand.vue

@@ -135,7 +135,7 @@ export default {
     },
     applyShowStyles (el) {
       if (this.animX) {
-        el.style.width = this.el.width + 'px'
+        el.style.width = `${this.el.width}px`
         el.style.marginLeft = this.el.marginLeft
         el.style.marginRight = this.el.marginRight
         el.style.paddingLeft = this.el.paddingLeft
@@ -144,7 +144,7 @@ export default {
         el.style.borderRightWidth = this.el.borderRightWidth
       }
       if (this.animY) {
-        el.style.height = this.el.height + 'px'
+        el.style.height = `${this.el.height}px`
         el.style.marginTop = this.el.marginTop
         el.style.marginBottom = this.el.marginBottom
         el.style.paddingTop = this.el.paddingTop
@@ -153,7 +153,7 @@ export default {
         el.style.borderBottomWidth = this.el.borderBottomWidth
       }
 
-      el.style.transition = this.duration + 'ms ease-in-out'
+      el.style.transition = `${this.duration}ms ease-in-out`
     },
     applyOriginalStyles (el) {
       el.style.cssText = this.el.originalStyles

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

@@ -99,8 +99,8 @@ export default {
       if (this.keywords) {
         items = items.filter(item => {
           if (!item.searchable.includes(this.normalizedKeywords)) return false
-          else if (this.multiple && !this.allowDuplicates) return isItemNotSelected(item)
-          else return true
+          if (this.multiple && !this.allowDuplicates) return isItemNotSelected(item)
+          return true
         })
       }
 
@@ -111,7 +111,7 @@ export default {
 
     highlightedItemIndex () {
       if (this.highlightedItem === null) return -1
-      else if (this.highlightedItem === 'extra-item') return this.filteredItems.length
+      if (this.highlightedItem === 'extra-item') return this.filteredItems.length
 
       return this.filteredItems.findIndex(item => item.uid === this.highlightedItem)
     },

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

@@ -66,13 +66,13 @@ export default {
       ]
     },
     classes () {
-      const slotText = this.$slots.badge && this.$slots.badge().map(item => item.children).join('')
+      const slotText = this.$slots.badge?.().map(item => item.children).join('')
 
       return {
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [this.badgeClass]: this.badgeClass || null,
-        'w-badge--round': this.round || (slotText || this.modelValue + '' || '').length < 2,
+        'w-badge--round': this.round || (slotText || `${this.modelValue}` || '').length < 2,
         'w-badge--dark': this.dark,
         'w-badge--light': this.light,
         'w-badge--outline': this.outline,

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

@@ -52,12 +52,12 @@ export default {
 
     titleHasToolbar () {
       const { title } = this.$slots
-      return title && title().map(vnode => vnode.type.name).join('').includes('w-toolbar')
+      return title?.()?.map(vnode => vnode.type.name).join('').includes('w-toolbar')
     },
 
     actionsHasToolbar () {
       const { actions } = this.$slots
-      return actions && actions().map(vnode => vnode.type.name).join('').includes('w-toolbar')
+      return actions?.()?.map(vnode => vnode.type.name).join('').includes('w-toolbar')
     },
 
     imgProps () {

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

@@ -75,7 +75,7 @@ export default {
           _index: i,
           value: itemValue, // If no value is set then add one to prevent error.
           color: item[this.itemColorKey] || this.color,
-          _isChecked: this.modelValue && this.modelValue.includes(itemValue)
+          _isChecked: this.modelValue?.includes(itemValue)
         })
       })
     },

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

@@ -87,7 +87,7 @@ export default {
   methods: {
     readIcon () {
       const { default: slot } = this.$slots
-      const [fontName = '', icon = ''] = (typeof slot === 'function' && slot()[0].children.trim().split(' ')) || []
+      const [fontName = '', icon = ''] = (typeof slot === 'function' && slot()?.[0]?.children?.trim()?.split(' ')) || []
       this.fontName = fontName
       this.icon = icon
 

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

@@ -183,7 +183,7 @@ export default {
 
     if (this.lazy) {
       const IntersectObserver = new IntersectionObserver(entry => {
-        if (entry[0] && entry[0].isIntersecting) {
+        if (entry[0]?.isIntersecting) {
           this.loadImage()
           IntersectObserver.disconnect()
         }

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

@@ -335,7 +335,7 @@ export default {
       // If the preview prop is a string, the user is setting the  preview to an icon and
       // don't need the actual file preview.
       const isPreviewAnIcon = typeof this.preview === 'string'
-      const isFileAnImage = original.type && original.type.startsWith('image/')
+      const isFileAnImage = original.type?.startsWith('image/')
       // Check if the file is an image and set a preview image.
       if (this.preview && !isPreviewAnIcon && isFileAnImage) {
         reader.addEventListener('load', e => {
@@ -357,7 +357,7 @@ export default {
     // On page load, check if the field is autofilled by the browser.
     // 20211229. Only a problem on Chrome. Firefox ok, Safari always prompts before filling up.
     setTimeout(() => {
-      if (this.$refs.input && this.$refs.input.matches(':-webkit-autofill')) this.isAutofilled = true
+      if (this.$refs.input?.matches(':-webkit-autofill')) this.isAutofilled = true
     }, 400) // Can't be less than 350: time for the browser to autofill.
   },
 

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

@@ -133,9 +133,9 @@ export default {
     getItemValue (item) {
       if (item && typeof item === 'object') {
         if (item[this.itemValueKey] !== undefined) return item[this.itemValueKey]
-        else return item[this.itemLabelKey] !== undefined ? item[this.itemLabelKey] : item.index
+        return item[this.itemLabelKey] !== undefined ? item[this.itemLabelKey] : item.index
       }
-      else return item
+      return item
     },
 
     // Action of selecting 1 item.

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

@@ -122,12 +122,12 @@ export default {
 
     menuMinWidth () {
       if (this.minWidth === 'activator') return this.activatorWidth ? `${this.activatorWidth}px` : 0
-      else return isNaN(this.minWidth) ? this.minWidth : (this.minWidth ? `${this.minWidth}px` : 0)
+      return isNaN(this.minWidth) ? this.minWidth : (this.minWidth ? `${this.minWidth}px` : 0)
     },
 
     menuMaxWidth () {
       if (this.maxWidth === 'activator') return this.activatorWidth ? `${this.activatorWidth}px` : 0
-      else return isNaN(this.maxWidth) ? this.maxWidth : (this.maxWidth ? `${this.maxWidth}px` : 0)
+      return isNaN(this.maxWidth) ? this.maxWidth : (this.maxWidth ? `${this.maxWidth}px` : 0)
     },
 
     menuClasses () {
@@ -190,7 +190,7 @@ export default {
             this.hoveringActivator = true
             this.open(e)
           },
-          mouseleave: e => {
+          mouseleave: () => {
             this.hoveringActivator = false
             // Wait 10ms, the time to get the hoveringMenu updated on mouseenter on the menu.
             setTimeout(() => {
@@ -313,7 +313,15 @@ export default {
     &.w-menu--left {margin-left: -4 * $base-increment;}
     &.w-menu--right {margin-left: 4 * $base-increment;}
 
-    @include triangle(var(--w-menu-bg-color), '.w-menu', 9px);
-  }
+    // Menu without border.
+    &.w-menu--no-border {
+      @include triangle(var(--w-menu-bg-color), '.w-menu', 9px, 0);
+    }
+
+    // Menu with border.
+    &:not(.w-menu--no-border) {
+      @include triangle(var(--w-menu-bg-color), '.w-menu', 9px);
+    }
+}
 }
 </style>

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

@@ -148,7 +148,7 @@ export default {
       this.scrollable.hovered = false
     },
 
-    onResize (e) {
+    onResize () {
     },
 
     onMouseWheel (e) {
@@ -156,7 +156,7 @@ export default {
 
       // When scrolling beyond limits, release the mousewheel and scroll the parent.
       if (this.scrollValuePercent <= 0 && e[this.m.deltaXorY] < 0) return
-      else if (this.scrollValuePercent >= 100 - this.thumbSizePercent && e[this.m.deltaXorY] > 0) return
+      if (this.scrollValuePercent >= 100 - this.thumbSizePercent && e[this.m.deltaXorY] > 0) return
 
       e.preventDefault() // Hold the scroll in the hovered w-scrollable element.
 

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

@@ -262,7 +262,7 @@ export default {
       type: [Boolean, Object, String],
       validator: object => {
         if (!object) return true // Accept any falsy value.
-        else if (typeof object === 'object' && (!object.itemsPerPage || (object.page && isNaN(object.page)))) {
+        if (typeof object === 'object' && (!object.itemsPerPage || (object.page && isNaN(object.page)))) {
           consoleError(
             'Wrong pagination config received in the w-table\'s `pagination` prop (received: `' + JSON.stringify(object) + '`). ' +
             '\nExpected object: { itemsPerPage: Integer, page: Integer } or { itemsPerPage: Integer, start: Integer }.'
@@ -539,8 +539,8 @@ export default {
       const newNextColWidth = nextColWidth - deltaX
 
       // 1. Apply the change of width.
-      columnEl.style.width = colWidth + deltaX + 'px'
-      nextColumnEl.style.width = nextColWidth - deltaX + 'px'
+      columnEl.style.width = `${colWidth + deltaX}px`
+      nextColumnEl.style.width = `${nextColWidth - deltaX}px`
 
       // 2. Check if we went too far (the width applied is different than the browser-computed one).
       const minWidthReached = (deltaX < 0 && columnEl.offsetWidth > newColWidth) ||
@@ -551,13 +551,13 @@ export default {
       // Make sure we don't shrink enough to push other left cells.
       if (minWidthReached) {
         const newWidth = Math.max(columnEl.offsetWidth, minColumnWidth)
-        columnEl.style.width = newWidth + 'px'
-        nextColumnEl.style.width = maxWidth - newWidth + 'px'
+        columnEl.style.width = `${newWidth}px`
+        nextColumnEl.style.width = `${maxWidth - newWidth}px`
       }
       // Make sure we don't grow enough to push other right cells.
       else if (maxWidthReached) {
-        columnEl.style.width = maxWidth - nextColumnEl.offsetWidth + 'px'
-        nextColumnEl.style.width = nextColumnEl.offsetWidth + 'px'
+        columnEl.style.width = `${maxWidth - nextColumnEl.offsetWidth}px`
+        nextColumnEl.style.width = `${nextColumnEl.offsetWidth}px`
       }
     },
 

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

@@ -257,7 +257,7 @@ export default {
     updateSlider (domLookup = true) {
       if (domLookup) {
         const ref = this.$refs['tabs-bar']
-        this.activeTabEl = ref && ref.querySelector('.w-tabs__bar-item--active')
+        this.activeTabEl = ref?.querySelector('.w-tabs__bar-item--active')
       }
 
       if (!this.fillBar && this.activeTabEl) {
@@ -285,7 +285,7 @@ export default {
         // Scroll the new active tab item title into view if needed.
         this.$nextTick(() => {
           const ref = this.$refs['tabs-bar']
-          this.activeTabEl = ref && ref.querySelector(`.w-tabs__bar-item:nth-child(${index + 1})`)
+          this.activeTabEl = ref?.querySelector(`.w-tabs__bar-item:nth-child(${index + 1})`)
           if (this.activeTabEl) {
             this.activeTabEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
           }

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

@@ -191,7 +191,7 @@ export default {
       this.$refs.textarea.style.height = ''
       const linesCount = (this.$refs.textarea.scrollHeight - this.paddingY) / this.lineHeight
       const height = Math.max(linesCount, this.rows) * this.lineHeight + this.paddingY
-      this.$refs.textarea.style.height = height + 'px'
+      this.$refs.textarea.style.height = `${height}px`
     },
     getLineHeight () {
       const computedStyles = window.getComputedStyle(this.$refs.textarea, null)

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

@@ -31,13 +31,13 @@ export default {
     toolbarHeight () {
       const h = this.height
       // If a number is passed without units, append `px`.
-      return h && parseInt(h) == h ? h + 'px' : h
+      return h && parseInt(h) === h ? `${h}px` : h
     },
     // Return the width value if defined, or false otherwise.
     toolbarWidth () {
       const w = this.width
       // If a number is passed without units, append `px`.
-      return w && parseInt(w) == w ? w + 'px' : w
+      return w && parseInt(w) === w ? `${w}px` : w
     },
     classes () {
       return {

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

@@ -136,7 +136,7 @@ export default {
             this.hoveringActivator = true
             this.open(e)
           },
-          mouseleave: e => {
+          mouseleave: () => {
             this.hoveringActivator = false
             this.close()
           }

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

@@ -295,7 +295,7 @@ export default {
     },
 
     focusTreeItem (liNode) {
-      liNode && liNode.querySelector('.w-tree__item-label').focus()
+      liNode?.querySelector('.w-tree__item-label').focus()
     },
 
     itemIcon (item) {

package/src/wave-ui/core.js

@@ -45,7 +45,6 @@ const injectPresets = (component, presets) => {
 
         // If the given prop (= preset) is still not found in the mixins props raise warning.
         if (!foundProp) consoleWarn(`Attempting to set a preset on a prop that doesn't exist: \`${component.name}.${preset}\`.`)
-        continue // Continue to the next preset.
       }
     }
 
@@ -74,19 +73,40 @@ export default class WaveUI {
     theme: null, // The current theme (light or dark).
     _notificationManager: null,
 
-    // Callable from this.$waveui.
+    /**
+     * Notify the user. (Callable from this.$waveui)
+     *
+     * @param {...any} args - The arguments to pass to the notification manager.
+     */
     notify (...args) {
       this._notificationManager.notify(...args)
     },
 
-    // Callable from this.$waveui.
-    switchTheme (theme, skipFlatten = false) {
+    /**
+     * Switch the theme. (Callable from this.$waveui)
+     *
+     * @param {string} theme - The theme to switch to.
+     */
+    switchTheme (theme) {
       this.theme = theme
       document.documentElement.setAttribute('data-theme', theme)
       document.head.querySelector('#wave-ui-colors')?.remove?.()
       const themeColors = this.config.colors[this.theme]
       injectColorsCSSInDOM(themeColors, this.config.css.colorShadeCssVariables)
       this.colors = flattenColors(themeColors, colorPalette)
+    },
+
+    /**
+     * Set the classes of the app element. (Callable from this.$waveui)
+     *
+     * @param {string} classes - The classes to set.
+     */
+    setAppClasses (...classes) {
+      const wApp = document.querySelector('.w-app')
+      if (wApp) {
+        wApp.className = 'w-app' // First reset the classes.
+        wApp.classList.add(...classes)
+      }
     }
   }
 
@@ -134,7 +154,7 @@ export default class WaveUI {
           injectNotifManagerInDOM(app)
 
           // This mixin must only run once, we can delete it.
-          app._context.mixins.find(mixin => mixin.mounted && delete mixin.mounted)
+          app._context.mixins.find(mixin => mixin.mounted && (mixin.mounted = undefined))
         }
       }
     })

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-types */
 declare module 'wave-ui/src/wave-ui' {
-  import { App } from 'vue'
+  import type { App } from 'vue'
 
   import type { $waveui } from '@/types/$waveui'
   import type { ConstructorOptions } from '@/types/plugin'

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

@@ -306,7 +306,7 @@ export default {
     removeFromDOM () {
       document.removeEventListener('mousedown', this.onOutsideMousedown)
       window.removeEventListener('resize', this.onResize)
-      if (this.detachableEl && this.detachableEl.parentNode) {
+      if (this.detachableEl?.parentNode) {
         this.detachableVisible = false
         this.detachableEl.remove()
         this.detachableEl = null

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

@@ -20,7 +20,7 @@ export const generateColorShades = config => {
       const color = { label, color: (themeOfColors[label]?.color ?? themeOfColors[label])?.replace?.('#', '') }
       const col = color.color
       if (!col) continue // Don't break if a color is only set for one of the themes.
-      if (col.length === 3) color.color = col[0] + '' + col[0] + col[1] + col[1] + col[2] + col[2]
+      if (col.length === 3) color.color = `${col[0]}${col[0]}${col[1]}${col[1]}${col[2]}${col[2]}`
 
       for (let i = 1; i <= 6; i++) {
         const lighterColor = lighten(`#${color.color}`, i * (colorInfo?.lightIncrement ?? 16) + (colorInfo?.lightOffset ?? 0))

package/src/wave-ui/utils/notification-manager.js

@@ -4,7 +4,7 @@ import WNotificationManager from '../components/w-notification-manager.vue'
 export class NotificationManager {
   static #instance
   notifications
-   // Private fields.
+  // Private fields.
   _uid // A unique ID for each notification.
   _notificationDefaults