wave-ui 3.18.0 → 3.19.0

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

@@ -1,3 +1,4 @@
+@use "sass:math";
 @use 'variables' as *;
 
 // All these CSS classes will not be generated if the $use-layout-classes is set to false.
@@ -67,7 +68,7 @@
     .bd0 {border: none;}
 
     @for $i from 1 through 6 {
-      .bdrs#{$i} {border-radius: round($i * $base-increment);}
+      .bdrs#{$i} {border-radius: math.round($i * $base-increment);}
     }
     .bdrsr {border-radius: 999em;}
     .bdrsm {border-radius: 100%;}
@@ -78,13 +79,13 @@
     // ----------------------------------------------
     @for $i from -6 through -1 {
       .sh#{$i} {
-        box-shadow: 0 0 (-1 * round($i * $base-increment)) rgba(#000, max(0.15 * divide(-$i, 2), 0.15)) inset;
+        box-shadow: 0 0 (-1 * math.round($i * $base-increment)) rgba(#000, max(0.15 * divide(-$i, 2), 0.15)) inset;
       }
     }
     @for $i from 1 through 6 {
       .sh#{$i} {
         box-shadow: 0 0 1px rgba(#000, 0.1),
-                    round($base-increment * divide($i, 4)) round($base-increment * divide($i, 4)) round($i * $base-increment) rgba(#000, max(0.15 * divide($i, 2), 0.15));
+                    math.round($base-increment * divide($i, 4)) math.round($base-increment * divide($i, 4)) math.round($i * $base-increment) rgba(#000, max(0.15 * divide($i, 2), 0.15));
       }
     }
     .sh0 {box-shadow: none;}
@@ -94,7 +95,7 @@
     // ----------------------------------------------
     // Margin.
     @for $i from 0 through 12 {
-      $number: round($i * $base-increment);
+      $number: math.round($i * $base-increment);
       .ma#{$i} {margin: $number;}
       @if ($i > 0) {.ma-#{$i} {margin: -$number;}}
     }
@@ -102,7 +103,7 @@
     .ma0 {margin: 0;}
 
     @for $i from 0 through 12 {
-      $number: round($i * $base-increment);
+      $number: math.round($i * $base-increment);
       .mx#{$i} {margin-left: $number;margin-right: $number;}
       .my#{$i} {margin-top: $number;margin-bottom: $number;}
       @if ($i > 0) {
@@ -116,7 +117,7 @@
     .my0 {margin-top: 0;margin-bottom: 0;}
 
     @for $i from 0 through 12 {
-      $number: round($i * $base-increment);
+      $number: math.round($i * $base-increment);
       .mt#{$i} {margin-top: $number;}
       .mr#{$i} {margin-right: $number;}
       .mb#{$i} {margin-bottom: $number;}
@@ -139,13 +140,13 @@
 
     // Padding.
     @for $i from 1 through 12 {
-      $number: round($i * $base-increment);
+      $number: math.round($i * $base-increment);
       .pa#{$i} {padding: $number;}
     }
     .pa0 {padding: 0;}
 
     @for $i from 0 through 12 {
-      $number: round($i * $base-increment);
+      $number: math.round($i * $base-increment);
       .px#{$i} {padding-left: $number;padding-right: $number;}
       .py#{$i} {padding-top: $number;padding-bottom: $number;}
     }
@@ -153,7 +154,7 @@
     .py0 {padding-top: 0;padding-bottom: 0;}
 
     @for $i from 0 through 12 {
-      $number: round($i * $base-increment);
+      $number: math.round($i * $base-increment);
       .pt#{$i} {padding-top: $number;}
       .pr#{$i} {padding-right: $number;}
       .pb#{$i} {padding-bottom: $number;}
@@ -167,14 +168,14 @@
 
     // Sizes.
     // ----------------------------------------------
-    // In all the sizes below, round(x / 2) * 2 to always have even numbers.
+    // In all the sizes below, math.round(x / 2) * 2 to always have even numbers.
     // Different heights with a mix of odd and even numbers will misalign
     // when vertically centering (vertical-align or align-items center).
-    .size--xs {font-size: round(0.8 * $base-font-size);}
-    .size--sm {font-size: round(0.9 * $base-font-size);}
-    .size--md {font-size: round(1 * $base-font-size);}
-    .size--lg {font-size: round(1.2 * $base-font-size);}
-    .size--xl {font-size: round(1.4 * $base-font-size);}
+    .size--xs {font-size: math.round(0.8 * $base-font-size);}
+    .size--sm {font-size: math.round(0.9 * $base-font-size);}
+    .size--md {font-size: math.round(1 * $base-font-size);}
+    .size--lg {font-size: math.round(1.2 * $base-font-size);}
+    .size--xl {font-size: math.round(1.4 * $base-font-size);}
     // ----------------------------------------------
 
     // Grid system.
@@ -211,6 +212,6 @@
 }
 
 @for $i from 1 through 12 {
-  .w-flex.gap#{$i}, .w-grid.gap#{$i} {gap: round($base-increment * $i);}
+  .w-flex.gap#{$i}, .w-grid.gap#{$i} {gap: math.round($base-increment * $i);}
 }
 .w-flex.gap0, .w-grid.gap0 {gap: 0;}

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

@@ -1,28 +1,29 @@
+@use "sass:math";
 @use 'variables' as *;
 
 #{$css-scope} {
   .headline, .title1 {
-    font-size: round(2.2 * $base-font-size);
+    font-size: math.round(2.2 * $base-font-size);
     font-weight: 100;
   }
 
   .title2 {
-    font-size: round(1.7 * $base-font-size);
+    font-size: math.round(1.7 * $base-font-size);
     font-weight: 400;
   }
 
   .title3 {
-    font-size: round(1.4 * $base-font-size);
+    font-size: math.round(1.4 * $base-font-size);
     font-weight: 400;
   }
 
   .title4 {
-    font-size: round(1.25 * $base-font-size);
+    font-size: math.round(1.25 * $base-font-size);
     font-weight: 400;
   }
 
   .title5 {
-    font-size: round(1.1 * $base-font-size);
+    font-size: math.round(1.1 * $base-font-size);
     font-weight: 600;
   }
 
@@ -32,7 +33,7 @@
   }
 
   .caption {
-    font-size: round(0.85 * $base-font-size);
+    font-size: math.round(0.85 * $base-font-size);
     font-style: italic;
     color: $caption-color;
   }

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

@@ -44,7 +44,7 @@ $css-scope: '.w-app' !default; // Allows control on CSS rules priority.
 $use-layout-classes: true !default;
 
 $base-font-size: 14px !default; // Must be a px unit.
-$base-increment: round(divide($base-font-size, 4)) !default;
+$base-increment: math.round(divide($base-font-size, 4)) !default;
 $layout-padding: $base-increment * 4 !default; // Applied on the .content-wrap tag.
 $border-radius: 4px !default;
 $border-color: color-mix(in srgb, var(--w-contrast-bg-color) 12%, transparent) !default;
@@ -54,9 +54,9 @@ $fast-transition-duration: 0.15s !default;
 $box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
              0 2px 2px 0 rgba(0, 0, 0, 0.15),
              0 1px 5px 0 rgba(0, 0, 0, 0.15) !default;
-$form-field-height: round(2 * $base-font-size) !default;
+$form-field-height: math.round(2 * $base-font-size) !default;
 // Always an even number for better vertical alignment. (Used in checkbox, radio, switch)
-$small-form-el-size: round(divide(1.3 * $base-font-size, 2)) * 2 !default;
+$small-form-el-size: math.round(divide(1.3 * $base-font-size, 2)) * 2 !default;
 
 // Detachable elements are: w-tooltip, w-menu, w-confirm.
 $detachable-bg-color: $base-bg-color !default;

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

@@ -1,4 +1,4 @@
-import { createApp, defineComponent } from 'vue'
+import { h, render } from 'vue'
 import WNotificationManager from '../components/w-notification-manager.vue'
 
 export class NotificationManager {
@@ -56,24 +56,17 @@ export class NotificationManager {
 /**
  * Injects the w-notification-manager in the DOM programmatically so the user does not have to do it.
  *
- * @param {Object} wApp The DOM element where to mount the w-notification-manager.
- * @param {Object} components All the Wave UI components to provide to the w-notification-manager,
- *                            so it can also use them.
- * @param {Object} $waveui the injected reactive instance of the WaveUI class.
+ * @param {Object} app The Vue app instance.
  */
-export const injectNotifManagerInDOM = (wApp, components, $waveui) => {
+export const injectNotifManagerInDOM = app => {
   const div = document.createElement('div')
-  wApp.appendChild(div)
+  document.body.appendChild(div) // Attach to body before teleporting.
 
-  const WNotifManager = createApp(defineComponent({
-    ...WNotificationManager,
-    inject: ['$waveui']
-  })).provide('$waveui', $waveui)
+  // Create a VNode for WNotificationManager and assign app._context to inherit global components.
+  const vnode = h(WNotificationManager)
+  vnode.appContext = app._context // ! \ Attach app context to inherit global components & provide()!
 
-  for (const id in components) {
-    const component = components[id]
-    WNotifManager.component(component.name, { ...component, inject: ['$waveui'] })
-  }
-  WNotifManager.mount(div)
-  div.remove() // The WNotificationManager contains a teleport to .w-app.
+  render(vnode, div) // Render inside the main app scope.
+
+  div.remove() // The WNotificationManager component teleports itself inside `.w-app`.
 }