wave-ui 3.28.0 → 4.0.1

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

@@ -9,13 +9,26 @@ const cssVars = {
 let breakpointsDef = { keys: [], values: [] }
 let currentBreakpoint = null
 
+const generatePaletteVariables = colorPalette => {
+  let cssVariablesString = ''
+
+  colorPalette.forEach(({ label, color, shades = [] }) => {
+    cssVariablesString += `--w-${label}-color: ${color};`
+    shades.forEach(shade => {
+      cssVariablesString += `--w-${shade.label}-color: ${shade.color};`
+    })
+  })
+
+  return `:root{${cssVariablesString}}`
+}
+
 // 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, generateShadeCssVariables) => {
   let styles = ''
-  const cssVariables = {}
+  let cssVariablesString = ''
 
   // Extract status colors and place them after the other colors.
   const { info, warning, success, error, shades, ...colors } = themeColors
@@ -30,9 +43,10 @@ const generateColors = (themeColors, generateShadeCssVariables) => {
   }
   // The shades don't need css vars.
   for (const colorName in shades) {
+    const colorValue = generateShadeCssVariables ? `var(--w-${colorName}-color)` : shades[colorName]
     styles +=
-      `${cssScope} .${colorName}--bg{background-color:${shades[colorName]}}` +
-      `${cssScope} .${colorName}{color:${shades[colorName]}}`
+      `${cssScope} .${colorName}--bg{background-color:${colorValue}}` +
+      `${cssScope} .${colorName}{color:${colorValue}}`
   }
 
   // Creating CSS3 variables.
@@ -41,14 +55,12 @@ const generateColors = (themeColors, generateShadeCssVariables) => {
   // 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 allColors = { ...colors, info, warning, success, error }
-  for (const colorName in allColors) cssVariables[colorName] = allColors[colorName]?.color ?? allColors[colorName]
+  for (const colorName in allColors) {
+    cssVariablesString += `--w-${colorName}-color: ${allColors[colorName]?.color ?? allColors[colorName]};`
+  }
   if (generateShadeCssVariables) {
-    for (const colorName in shades) cssVariables[colorName] = shades[colorName]
+    for (const colorName in shades) cssVariablesString += `--w-${colorName}-color: ${shades[colorName]};`
   }
-  let cssVariablesString = ''
-  Object.entries(cssVariables).forEach(([colorName, colorHex]) => {
-    cssVariablesString += `--w-${colorName}-color: ${colorHex};`
-  })
 
   return `:root{${cssVariablesString}}${styles}`
 }
@@ -104,7 +116,7 @@ const generateBreakpoints = (breakpoints, grid) => {
 
 const generateBreakpointSpaces = breakpoints => {
   let styles = ''
-  const { cssScope, baseIncrement } = cssVars
+  const { cssScope } = cssVars
 
   breakpoints.forEach(({ label, min }) => {
     // Discard `xs` since the min is 0 (`media query (min-width: 0)`), and leave in _layout.scss.
@@ -148,7 +160,7 @@ const generateBreakpointSpaces = breakpoints => {
 
 const genBreakpointLayoutClasses = breakpoints => {
   let styles = ''
-  const { cssScope, baseIncrement } = cssVars
+  const { cssScope } = cssVars
   const layoutClasses = [
     'show{display:block}',
     'hide{display:none}',
@@ -202,8 +214,8 @@ const genBreakpointLayoutClasses = breakpoints => {
         `@media(min-width:${min}px){` +
         layoutClasses.map(rule => `${cssScope} .${label}u-${rule}`).join('') +
         // w-grid columns and gap.
-        array12.map((item, i) => `.w-grid.${label}u-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
-        array12.map((item, i) => `.w-flex.${label}u-gap${i + 1},.w-grid.${label}u-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join('') +
+        array12.map((_, i) => `.w-grid.${label}u-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
+        array12.map((_, i) => `.w-flex.${label}u-gap${i + 1},.w-grid.${label}u-gap${i + 1}{gap:calc(${i + 1} * var(--w-base-increment));}`).join('') +
         `.w-flex.${label}u-gap0,.w-flex.${label}u-gap0{gap:0}` +
         '}'
     }
@@ -214,8 +226,8 @@ const genBreakpointLayoutClasses = breakpoints => {
       `@media (min-width:${min}px) and (max-width:${max}px){` +
       layoutClasses.map(rule => `${cssScope} .${label}-${rule}`).join('') +
       // w-grid columns and gap.
-      array12.map((item, i) => `.w-grid.${label}-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
-      array12.map((item, i) => `.w-flex.${label}-gap${i + 1},.w-grid.${label}-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join('') +
+      array12.map((_, i) => `.w-grid.${label}-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
+      array12.map((_, i) => `.w-flex.${label}-gap${i + 1},.w-grid.${label}-gap${i + 1}{gap:calc(${i + 1} * var(--w-base-increment));}`).join('') +
       `.w-flex.${label}-gap0,.w-flex.${label}-gap0{gap:0}` +
       '}'
   })
@@ -226,8 +238,8 @@ const genBreakpointLayoutClasses = breakpoints => {
         `@media (max-width:${max}px){` +
         layoutClasses.map(rule => `${cssScope} .${label}d-${rule}`).join('') +
         // w-grid columns and gap.
-        array12.map((item, i) => `.w-grid.${label}d-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
-        array12.map((item, i) => `.w-flex.${label}d-gap${i + 1},.w-grid.${label}d-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join('') +
+        array12.map((_, i) => `.w-grid.${label}d-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
+        array12.map((_, i) => `.w-flex.${label}d-gap${i + 1},.w-grid.${label}d-gap${i + 1}{gap:calc(${i + 1} * var(--w-base-increment));}`).join('') +
         `.w-flex.${label}d-gap0,.w-flex.${label}d-gap0{gap:0}` +
         '}'
     }
@@ -290,11 +302,21 @@ export const injectCSSInDOM = $waveui => {
 }
 
 export const injectColorsCSSInDOM = (themeColors, colorPalette, generateShadeCssVariables) => {
+  if (!document.getElementById('wave-ui-palette')) {
+    const css = document.createElement('style')
+    css.id = 'wave-ui-palette'
+    css.innerHTML = generatePaletteVariables(colorPalette)
+
+    const firstStyle = document.head.querySelectorAll('style,link[rel="stylesheet"]')[0]
+    if (firstStyle) firstStyle.before(css)
+    else document.head.appendChild(css)
+  }
+
   // 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, colorPalette, generateShadeCssVariables)
+    css.innerHTML = generateColors(themeColors, generateShadeCssVariables)
 
     const firstStyle = document.head.querySelectorAll('style,link[rel="stylesheet"]')[0]
     if (firstStyle) firstStyle.before(css)
@@ -311,8 +333,8 @@ const doDynamicCSS = config => {
   })
 
   const computedStyles = getComputedStyle(document.documentElement)
-  cssVars.cssScope = computedStyles.getPropertyValue('--w-css-scope')
-  cssVars.baseIncrement = parseInt(computedStyles.getPropertyValue('--w-base-increment'))
+  cssVars.cssScope = (computedStyles.getPropertyValue('--w-css-scope') || '.w-app').trim() || '.w-app'
+  cssVars.baseIncrement = parseInt(computedStyles.getPropertyValue('--w-base-increment'), 10)
 
   let styles = ''
   styles += generateBreakpoints(breakpointsDef, config.css.grid)

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

@@ -4,7 +4,7 @@
  *
  * @param {HTMLElement} hostEl
  * @param {PointerEvent|MouseEvent|TouchEvent} event
- * @param {{ disabled?: boolean }} [options]
+ * @param {{ disabled?: boolean, sizeRect?: DOMRect }} [options]
  */
 export function applyRipple (hostEl, event, options = {}) {
   if (typeof window === 'undefined' || typeof document === 'undefined') return
@@ -20,7 +20,8 @@ export function applyRipple (hostEl, event, options = {}) {
   if (clientX == null || clientY == null) return
 
   const rect = hostEl.getBoundingClientRect()
-  const maxSide = Math.max(rect.width, rect.height)
+  const sizeRect = options.sizeRect || rect
+  const maxSide = Math.max(sizeRect.width, sizeRect.height)
   const size = Math.max(maxSide * 2.5, 48)
   const x = clientX - rect.left - size / 2
   const y = clientY - rect.top - size / 2

package/dist/types/types/components/WApp.d.ts

@@ -1,83 +0,0 @@
-import { type ComputedOptions, type DefineComponent, type EmitsOptions, type ExtractDefaultPropTypes, type MethodOptions, type SlotsType } from 'vue';
-import type { PublicProps, ResolveProps } from '../extra-vue-types';
-export interface WaveAppProps {
-    /**
-     * Sets the layout to `display: block`. By default the layout is: `display: flex`, `flex-direction: column`.
-     * @property {boolean} block
-     * @see https://antoniandre.github.io/wave-ui/w-app
-     */
-    block?: boolean;
-    /**
-     * Sets the layout to display in a row when using the default flex layout (column by default).
-     * @property {boolean} row
-     * @see https://antoniandre.github.io/wave-ui/w-app
-     */
-    row?: boolean;
-    /**
-     * Applies the CSS property: `align-items: center;`.
-     * @property {boolean} alignCenter
-     * @see https://antoniandre.github.io/wave-ui/w-app
-     */
-    alignCenter?: boolean;
-    /**
-     * Applies the CSS property: `align-items: flex-end;`.
-     * @property {boolean} alignEnd
-     * @see https://antoniandre.github.io/wave-ui/w-app
-     */
-    alignEnd?: boolean;
-    /**
-     * Applies the CSS property: `justify-content: center;`.
-     * @property {boolean} justifyCenter
-     * @see https://antoniandre.github.io/wave-ui/w-app
-     */
-    justifyCenter?: boolean;
-    /**
-     * Applies the CSS property: `justify-content: end;`.
-     * @property {boolean} justifyEnd
-     * @see https://antoniandre.github.io/wave-ui/w-app
-     */
-    justifyEnd?: boolean;
-    /**
-     * Applies the CSS property: `justify-content: space-between;`.
-     * @property {boolean} justifySpaceBetween
-     * @see https://antoniandre.github.io/wave-ui/w-app
-     */
-    justifySpaceBetween?: boolean;
-    /**
-     * Applies the CSS property: `justify-content: space-around;`.
-     * @property {boolean} justifySpaceAround
-     * @see https://antoniandre.github.io/wave-ui/w-app
-     */
-    justifySpaceAround?: boolean;
-    /**
-     * Applies the CSS property: `justify-content: space-evenly;`.
-     * @property {boolean} justifySpaceEvenly
-     * @see https://antoniandre.github.io/wave-ui/w-app
-     */
-    justifySpaceEvenly?: boolean;
-    /**
-     * Applies the CSS property: `text-align: center;`.
-     * @property {boolean} textCenter
-     * @see https://antoniandre.github.io/wave-ui/w-app
-     */
-    textCenter?: boolean;
-    /**
-     * Applies the CSS property: `text-align: right;`.
-     * @property {boolean} textRight
-     * @see https://antoniandre.github.io/wave-ui/w-app
-     */
-    textRight?: boolean;
-}
-export type WaveAppEmits = {};
-export interface WaveAppComputeds extends ComputedOptions {
-}
-export interface WaveAppMethods extends MethodOptions {
-}
-export type WaveAppSlots = SlotsType<{
-    /**
-     * The content of the app.
-     * @see https://antoniandre.github.io/wave-ui/w-app
-     */
-    'default': () => any;
-}>;
-export type WApp = DefineComponent<WaveAppProps, {}, {}, WaveAppComputeds, WaveAppMethods, {}, {}, WaveAppEmits & EmitsOptions, string, PublicProps, ResolveProps<WaveAppProps & WaveAppEmits, EmitsOptions>, ExtractDefaultPropTypes<WaveAppProps>, WaveAppSlots>;

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

@@ -1,24 +0,0 @@
-<template lang="pug">
-.w-app
-  slot
-</template>
-
-<script>
-export default {
-  name: 'w-app',
-  // Keep the props for the API documentation.
-  props: {
-    block: { type: Boolean },
-    row: { type: Boolean },
-    alignCenter: { type: Boolean },
-    alignEnd: { type: Boolean },
-    justifyCenter: { type: Boolean },
-    justifyEnd: { type: Boolean },
-    justifySpaceBetween: { type: Boolean },
-    justifySpaceAround: { type: Boolean },
-    justifySpaceEvenly: { type: Boolean },
-    textCenter: { type: Boolean },
-    textRight: { type: Boolean }
-  }
-}
-</script>