wave-ui 3.19.0 → 3.21.0

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/scss/_base.scss

@@ -6,6 +6,16 @@
 :root {
   --w-base-increment: #{$base-increment};
   --w-css-scope: #{$css-scope};
+  --w-contrast-bg-o05-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent)};
+  --w-contrast-bg-o1-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 10%, transparent)};
+  --w-contrast-bg-o2-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 20%, transparent)};
+  --w-contrast-bg-o3-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 30%, transparent)};
+  --w-contrast-bg-o4-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 40%, transparent)};
+  --w-contrast-bg-o5-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 50%, transparent)};
+  --w-contrast-bg-o6-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 60%, transparent)};
+  --w-contrast-bg-o7-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 70%, transparent)};
+  --w-contrast-bg-o8-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 80%, transparent)};
+  --w-contrast-bg-o9-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 90%, transparent)};
 
   background-color: var(--w-base-bg-color);
   color: var(--w-base-color);

package/src/wave-ui/scss/_colors.scss

@@ -126,6 +126,13 @@
   .base-color--bg {background-color: var(--w-base-bg-color);}
   .contrast-color {color: color-mix(in srgb, var(--w-contrast-color) 75%, transparent);}
   .contrast-color--bg {background-color: var(--w-contrast-bg-color);}
+
+  .contrast-o05 {color: var(--w-contrast-bg-o05-color);}
+  .contrast-o05--bg {background-color: var(--w-contrast-bg-o05-color);}
+  @for $i from 1 through 9 {
+    .contrast-o#{$i} {color: var(--w-contrast-bg-o#{$i}-color);}
+    .contrast-o#{$i}--bg {background-color: var(--w-contrast-bg-o#{$i}-color);}
+  }
   // ------------------------------------------------------
 
   // Status colors - must stay last and have highest priority.

package/src/wave-ui/scss/_layout.scss

@@ -52,6 +52,15 @@
     .d-iflex {display: inline-flex;}
     .d-block {display: block;}
     .d-iblock {display: inline-block;}
+
+    .ovh {overflow: hidden;}
+    .ovv {overflow: visible;}
+    .ova {overflow: auto;}
+
+    .op05 {opacity: 0.05;}
+    @for $i from 0 through 9 {
+      .op#{$i} {opacity: $i * 0.1;}
+    }
     // ----------------------------------------------
 
     // Borders (from 0 to 6), radii (from 0 to 6 + `m` for max).

package/src/wave-ui/scss/variables/_variables.scss

@@ -148,3 +148,10 @@ $tooltip-bg-color: $detachable-bg-color !default;
 $tooltip-color: $detachable-color !default;
 $tooltip-border-color: $border-color !default;
 // --------------------------------------------------------
+
+// w-scrollable.
+// --------------------------------------------------------
+$scrollbar-size: 8px !default;
+$scrollbar-bg-color: color-mix(in srgb, var(--w-contrast-bg-color) 8%, var(--w-base-bg-color)) !default;
+$scrollbar-thumb-color: color-mix(in srgb, var(--w-contrast-bg-color) 25%, var(--w-base-bg-color)) !default;
+// --------------------------------------------------------

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))
@@ -205,12 +205,12 @@ export function mixColors (color1, color2, weight = 50) {
   const red = clamp(Math.round(c1.red * c1Weight + c2.red * c2Weight), 0, 255)
   const green = clamp(Math.round(c1.green * c1Weight + c2.green * c2Weight), 0, 255)
   const blue = clamp(Math.round(c1.blue * c1Weight + c2.blue * c2Weight), 0, 255)
-
   const alpha = c1.alpha * percentage + c2.alpha * (1 - percentage)
 
-  return c1.hasAlpha || c2.hasAlpha || alpha !== 1
-    ? hexFromRGB(red, green, blue, alpha)
-    : hexFromRGB(red, green, blue)
+  const channels = [red, green, blue]
+  if (c1.hasAlpha || c2.hasAlpha || alpha !== 1) channels.push(alpha)
+
+  return hexFromRGB(...channels)
 }
 
 /**

package/src/wave-ui/utils/dynamic-css.js

@@ -1,5 +1,5 @@
-// Defaults CSS variables. Will be overridden in the main function of this file (the export default)
-// which fetches the CSS :root variables generated by _layout.scss.
+// Defaults CSS variables. Will be overridden in the doDynamicCSS() function
+// which fetches the CSS :root variables generated by _base.scss.
 const cssVars = {
   cssScope: '.w-app',
   baseIncrement: 4

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