wave-ui 3.27.2 → 4.0.0

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

@@ -19,15 +19,14 @@ const config = reactive({
     // Note: colorShades must be enabled for this to work.
     colorShadeCssVariables: false,
 
-    // Generate palette colors and palette color shades.
-    // Can't have this option: color palette is generated via SCSS in colors.scss.
-    // colorPalette: true,
+    // Built-in palette colors and shades always generate CSS variables.
 
     breakpointSpaces: false, // Generate margin & padding classes for each breakpoint. E.g. `sm-ma2`.
     // Generate helper classes for each breakpoint.
     // E.g. `sm-text-left`, `xs-hide`.
     breakpointLayoutClasses: true,
-    grid: 12
+    grid: 12,
+    appClasses: '' // Custom CSS classes to add to the .w-app element.
   },
   colors: {
     // Default colors of Wave UI. Can be overridden from the Wave UI user config on init.
@@ -57,6 +56,8 @@ const config = reactive({
     align: 'right',
     transition: 'default' // Sliding from the side by default.
   },
+  // Default ripple for v-wave-ripple and components (unless their `no-ripple` prop is set).
+  ripple: true,
   presets: {} // User presets for each component.
 })
 

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

@@ -0,0 +1,72 @@
+/**
+ * Material-style pointer ripple: appends a transient node at the pointer, removes after animation.
+ * SSR-safe: no-op when window/document are unavailable.
+ *
+ * @param {HTMLElement} hostEl
+ * @param {PointerEvent|MouseEvent|TouchEvent} event
+ * @param {{ disabled?: boolean, sizeRect?: DOMRect }} [options]
+ */
+export function applyRipple (hostEl, event, options = {}) {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return
+  if (!hostEl?.ownerDocument || options.disabled) return
+  if (window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches) return
+
+  let clientX = typeof event.clientX === 'number' ? event.clientX : null
+  let clientY = typeof event.clientY === 'number' ? event.clientY : null
+  if ((clientX == null || clientY == null) && event.touches?.length) {
+    clientX = event.touches[0].clientX
+    clientY = event.touches[0].clientY
+  }
+  if (clientX == null || clientY == null) return
+
+  const rect = hostEl.getBoundingClientRect()
+  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
+
+  const inkContainer = document.createElement('span')
+  inkContainer.className = 'w-ripple__ink-container'
+  inkContainer.setAttribute('aria-hidden', 'true')
+
+  const ink = document.createElement('span')
+  ink.className = 'w-ripple__ink'
+  ink.style.width = `${size}px`
+  ink.style.height = `${size}px`
+  ink.style.left = `${x}px`
+  ink.style.top = `${y}px`
+
+  inkContainer.appendChild(ink)
+  hostEl.appendChild(inkContainer)
+
+  const done = () => {
+    ink.removeEventListener('animationend', done)
+    inkContainer.remove()
+  }
+  ink.addEventListener('animationend', done, { once: true })
+  // Fallback if animationend does not fire
+  window.setTimeout(() => {
+    if (inkContainer.parentNode === hostEl) inkContainer.remove()
+  }, 600)
+}
+
+/**
+ * @param {import('vue').ComponentPublicInstance | null | undefined} instance
+ * @returns {{ config: { ripple?: boolean } }}
+ */
+export function getWaveUiFromInstance (instance) {
+  const $waveui = instance?.$waveui
+  if ($waveui && typeof $waveui === 'object') return $waveui
+  return { config: { ripple: true } }
+}
+
+/**
+ * @param {boolean|undefined} propRipple
+ * @param {{ config?: { ripple?: boolean } }} $waveui
+ */
+export function isRippleEnabled (propRipple, $waveui) {
+  if (typeof propRipple === 'boolean') return propRipple
+  const g = $waveui?.config?.ripple
+  return g !== false
+}

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

@@ -0,0 +1,40 @@
+import { applyRipple, getWaveUiFromInstance, isRippleEnabled } from './ripple'
+
+function bindingDisabled (binding) {
+  const v = binding.value
+  if (v === false) return true
+  if (v && typeof v === 'object' && v.disabled) return true
+  return false
+}
+
+function rippleAllowed (binding, instance) {
+  if (bindingDisabled(binding)) return false
+  const $waveui = getWaveUiFromInstance(instance)
+  if (binding.value === true) return isRippleEnabled(true, $waveui)
+  return isRippleEnabled(undefined, $waveui)
+}
+
+export const waveRippleDirective = {
+  mounted (el, binding) {
+    el.classList.add('w-ripple')
+    el.__waveRippleLastBinding = binding
+    const handler = e => {
+      if (typeof e.button === 'number' && e.button !== 0) return
+      const b = el.__waveRippleLastBinding
+      if (!rippleAllowed(b, b?.instance)) return
+      applyRipple(el, e)
+    }
+    el.__waveRippleHandler = handler
+    el.addEventListener('pointerdown', handler)
+  },
+
+  updated (el, binding) {
+    el.__waveRippleLastBinding = binding
+  },
+
+  unmounted (el) {
+    el.removeEventListener('pointerdown', el.__waveRippleHandler)
+    delete el.__waveRippleHandler
+    delete el.__waveRippleLastBinding
+  }
+}

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>