wave-ui 2.48.0 → 3.0.0

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

@@ -5,43 +5,49 @@ const cssVars = {
   baseIncrement: 4
 }
 
-const generateColors = config => {
+// Global var for faster results in the resize event handler.
+let breakpointsDef = { keys: [], values: [] }
+let currentBreakpoint = null
+
+// Generates the CSS for all the dynamic colors and shades. E.g.
+// :root {[color1-variable], [color2-variable]}
+// .color1--bg {background-color: [color1-variable]}
+// .color1 {color: [color1-variable]}
+const generateColors = themeColors => {
   let styles = ''
-  const { cssScope } = cssVars
+  const cssVariables = {}
 
   // Extract status colors and place them after the other colors.
-  const { info, warning, success, error, ...colors } = config.colors
+  const { info, warning, success, error, shades, ...colors } = themeColors
+  const { cssScope } = cssVars
 
-  for (const color in colors) {
+  // User custom colors.
+  // ------------------------------------------------------
+  for (const colorName in colors) {
     styles +=
-      `${cssScope} .${color}--bg{background-color:${config.colors[color]}}` +
-      `${cssScope} .${color}{color:${config.colors[color]}}`
+      `${cssScope} .${colorName}--bg{background-color:var(--w-${colorName}-color)}` +
+      `${cssScope} .${colorName}{color:var(--w-${colorName}-color)}`
   }
-
-  // Color shades are generated in core.js, if the option is on.
-  if (config.css.colorShades && config.colorShades) {
-    Object.entries(config.colorShades).forEach(([label, color]) => {
-      styles +=
-        `${cssScope} .${label}--bg{background-color:${color}}` +
-        `${cssScope} .${label}{color:${color}}`
-    })
+  // The shades don't need css vars.
+  for (const colorName in shades) {
+    styles +=
+      `${cssScope} .${colorName}--bg{background-color:${shades[colorName]}}` +
+      `${cssScope} .${colorName}{color:${shades[colorName]}}`
   }
 
+  // Creating CSS3 variables.
+  // ------------------------------------------------------
+  // Create a CSS variable for each color for theming and reuse in components.
   // Status colors must remain after the other colors so they have priority in form validations.
   // That only makes sense when there are 2 colors on the same element: e.g. `span.primary.error`.
-  const statusColors = { info, warning, success, error } // This order is also important for priorities.
-  for (const color in statusColors) {
-    styles +=
-      `${cssScope} .${color}--bg{background-color:${config.colors[color]}}` +
-      `${cssScope} .${color}{color:${config.colors[color]}}`
-  }
-
-  // Add the primary color to the CSS variables for reuse in components.
-  const cssVariables = []
-  cssVariables.push(`--primary: ${config.colors.primary}`)
-  styles += `:root {${cssVariables.join(';')}}`
+  const allColors = { ...colors, info, warning, success, error }
+  for (const colorName in allColors) cssVariables[colorName] = allColors[colorName]
+  let cssVariablesString = ''
+  Object.entries(cssVariables).forEach(([colorName, colorHex]) => {
+    cssVariablesString += `--w-${colorName}-color: ${colorHex};`
+  })
 
-  return styles
+  return `:root{${cssVariablesString}}${styles}`
 }
 
 // Generate the layout grid. E.g. xs1, xs2, ..., xl12.
@@ -218,7 +224,64 @@ const genBreakpointLayoutClasses = breakpoints => {
   return styles
 }
 
-export default config => {
+const getBreakpoint = $waveui => {
+  const width = window.innerWidth
+  const breakpoints = breakpointsDef.values.slice(0)
+  // Most performant lookup.
+  breakpoints.push(width)
+  breakpoints.sort((a, b) => a - b)
+  const breakpoint = breakpointsDef.keys[breakpoints.indexOf(width)] || 'xl'
+
+  if (breakpoint !== currentBreakpoint) {
+    currentBreakpoint = breakpoint
+    $waveui.breakpoint = {
+      name: breakpoint,
+      xs: breakpoint === 'xs',
+      sm: breakpoint === 'sm',
+      md: breakpoint === 'md',
+      lg: breakpoint === 'lg',
+      xl: breakpoint === 'xl',
+      width
+    }
+  }
+
+  $waveui.breakpoint.width = window.innerWidth
+}
+
+// Should run on first mounted hook.
+export const injectCSSInDOM = $waveui => {
+  const { config } = $waveui
+  breakpointsDef = { keys: Object.keys(config.breakpoints), values: Object.values(config.breakpoints) }
+
+  // Inject global dynamic CSS classes in document head.
+  if (!document.getElementById('wave-ui-styles')) {
+    const css = document.createElement('style')
+    css.id = 'wave-ui-styles'
+    css.innerHTML = doDynamicCSS(config)
+
+    const firstStyle = document.head.querySelectorAll('style,link[rel="stylesheet"]')[0]
+    if (firstStyle) firstStyle.before(css)
+    else document.head.appendChild(css)
+  }
+
+  getBreakpoint($waveui)
+  window.addEventListener('resize', () => getBreakpoint($waveui))
+}
+
+export const injectColorsCSSInDOM = themeColors => {
+  // Inject global dynamic CSS classes in document head.
+  if (!document.getElementById('wave-ui-colors')) {
+    const css = document.createElement('style')
+    css.id = 'wave-ui-colors'
+    css.innerHTML = generateColors(themeColors)
+
+    const firstStyle = document.head.querySelectorAll('style,link[rel="stylesheet"]')[0]
+    if (firstStyle) firstStyle.before(css)
+    else document.head.appendChild(css)
+  }
+}
+
+const doDynamicCSS = config => {
   const entries = Object.entries(config.breakpoints)
   const breakpointsDef = entries.map(([label, max], i) => {
     // Construct the breakpoint objects.
@@ -227,11 +290,10 @@ export default config => {
   })
 
   const computedStyles = getComputedStyle(document.documentElement)
-  cssVars.cssScope = computedStyles.getPropertyValue('--css-scope')
-  cssVars.baseIncrement = parseInt(computedStyles.getPropertyValue('--base-increment'))
+  cssVars.cssScope = computedStyles.getPropertyValue('--w-css-scope')
+  cssVars.baseIncrement = parseInt(computedStyles.getPropertyValue('--w-base-increment'))
 
   let styles = ''
-  styles += generateColors(config)
   styles += generateBreakpoints(breakpointsDef, config.css.grid)
   if (config.css.breakpointLayoutClasses) styles += genBreakpointLayoutClasses(breakpointsDef)
   // if (config.css.breakpointSpaces) styles += generateBreakpointSpaces(breakpointsDef)

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

@@ -1,9 +1,8 @@
-// @todo: find a way to use private fields with Vue 3 proxies.
-// https://github.com/tc39/proposal-class-fields/issues/106
-// https://github.com/tc39/proposal-class-fields/issues/227
+import { createApp, defineComponent } from 'vue'
+import WNotificationManager from '../components/w-notification-manager.vue'
 
-export default class NotificationManager {
-  static instance
+export class NotificationManager {
+  static #instance
   notifications
    // Private fields.
   _uid // A unique ID for each notification.
@@ -11,9 +10,8 @@ export default class NotificationManager {
 
   constructor () {
     // Singleton pattern.
-    if (NotificationManager.instance) return NotificationManager.instance
+    if (NotificationManager.#instance) return NotificationManager.#instance
 
-    NotificationManager.instance = this
     this.notifications = []
     this._uid = 0
     this._notificationDefaults = {
@@ -23,10 +21,14 @@ export default class NotificationManager {
       timeout: 4000,
       dismiss: true
     }
+    NotificationManager.#instance = this
   }
 
   notify (...args) {
-    let notification = { ...this._notificationDefaults, _uid: this._uid++ }
+    let notification = {
+      ...this._notificationDefaults,
+      _uid: this._uid++
+    }
 
     if (typeof args[0] === 'object') notification = { ...notification, ...args[0] }
     else {
@@ -38,6 +40,10 @@ export default class NotificationManager {
         timeout: timeout || timeout === 0 ? parseFloat(timeout) : 4000
       }
     }
+
+    // Allow calling notification.dismiss().
+    if (notification.dismiss) notification.dismiss = () => this.dismiss(notification._uid)
+
     this.notifications.push(notification)
     if (~~notification.timeout !== 0) setTimeout(() => this.dismiss(notification._uid), notification.timeout)
   }
@@ -46,3 +52,28 @@ export default class NotificationManager {
     this.notifications = this.notifications.filter(item => item._uid !== uid)
   }
 }
+
+/**
+ * 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.
+ */
+export const injectNotifManagerInDOM = (wApp, components, $waveui) => {
+  const div = document.createElement('div')
+  wApp.appendChild(div)
+
+  const WNotifManager = createApp(defineComponent({
+    ...WNotificationManager,
+    inject: ['$waveui']
+  })).provide('$waveui', $waveui)
+
+  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.
+}