wave-ui 1.68.1 → 1.70.0

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

@@ -42,7 +42,14 @@ export default {
     transition: { type: String },
     tooltipClass: { type: [String, Object, Array] },
     persistent: { type: Boolean },
-    delay: { type: Number }
+    delay: { type: Number },
+    caption: { type: Boolean }, // Apply the caption class and style (grey, italic, small).
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean },
+    enableTouch: { type: Boolean }
     // Other props in the detachable mixin:
     // appendTo, fixed, top, bottom, left, right, alignTop, alignBottom, alignLeft,
     // alignRight, noPosition, zIndex, activator.
@@ -81,6 +88,17 @@ export default {
       return this.transition || `w-tooltip-slide-fade-${direction}`
     },
 
+    size () {
+      return (
+        (this.xs && 'xs') ||
+        (this.sm && 'sm') ||
+        (this.sm && 'md') ||
+        (this.lg && 'lg') ||
+        (this.xl && 'xl') ||
+        (this.caption ? 'sm' : 'md') // if no size is set put md by default, or sm if caption is on.
+      )
+    },
+
     classes () {
       return {
         [this.color]: this.color,
@@ -90,6 +108,8 @@ export default {
         [`w-tooltip--align-${this.alignment}`]: !this.noPosition && this.alignment,
         'w-tooltip--tile': this.tile,
         'w-tooltip--round': this.round,
+        caption: this.caption,
+        [`size--${this.size}`]: true,
         'w-tooltip--shadow': this.shadow,
         'w-tooltip--fixed': this.fixed,
         'w-tooltip--no-border': this.noBorder || this.bgColor,
@@ -103,17 +123,21 @@ export default {
         zIndex: this.zIndex || this.zIndex === 0 || null,
         top: (this.detachableCoords.top && `${~~this.detachableCoords.top}px`) || null,
         left: (this.detachableCoords.left && `${~~this.detachableCoords.left}px`) || null,
-        '--w-tooltip-bg-color': this.$waveui.colors[this.bgColor || 'white']
+        '--w-tooltip-bg-color': this.$waveui.colors[this.bgColor] || 'rgb(var(--w-base-bg-color-rgb))'
       }
     },
 
     activatorEventHandlers () {
       let handlers = {}
-      if (this.showOnClick) handlers = { click: this.toggle }
-      else {
+
+      // Check the window exists: SSR-proof.
+      const isTouchDevice = typeof window !== 'undefined' && 'ontouchstart' in window
+
+      // Toggling tooltip on mouseenter/mouseout (by default), and also show on focus, hide on blur.
+      if (!this.showOnClick && !isTouchDevice) {
         handlers = {
-          focus: this.toggle,
-          blur: this.toggle,
+          focus: this.open,
+          blur: this.close,
           mouseenter: e => {
             this.hoveringActivator = true
             this.open(e)
@@ -123,10 +147,10 @@ export default {
             this.close()
           }
         }
-
-        // Check the window exists: SSR-proof.
-        if (typeof window !== 'undefined' && 'ontouchstart' in window) handlers.click = this.toggle
       }
+      // Only bind a click event on mobile, or if showOnClick is set.
+      else if (this.enableTouch || this.showOnClick) handlers = { click: this.toggle }
+
       return handlers
     }
   },
@@ -146,8 +170,12 @@ export default {
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     toggle (e) {
       let shouldShowTooltip = this.detachableVisible
+
+      // For touch devices.
       if (typeof window !== 'undefined' && 'ontouchstart' in window) {
-        if (e.type === 'click') shouldShowTooltip = !shouldShowTooltip
+        // disable tooltip opening for mouseenter activation.
+        if (!this.enableTouch && !this.showOnClick) shouldShowTooltip = false
+        else shouldShowTooltip = !shouldShowTooltip
       }
       else if (e.type === 'click' && this.showOnClick) shouldShowTooltip = !shouldShowTooltip
       else if (['mouseenter', 'focus'].includes(e.type) && !this.showOnClick) shouldShowTooltip = true
@@ -226,6 +254,12 @@ export default {
   &--left {margin-left: -3 * $base-increment;}
   &--right {margin-left: 3 * $base-increment;}
 
+  &.size--xs {font-size: 0.75rem;}
+  &.size--sm {font-size: 0.83rem;}
+  &.size--md {font-size: 0.9rem;}
+  &.size--lg {font-size: 1rem;}
+  &.size--xl {font-size: 1.1rem;}
+
   &--custom-transition {transform: none;}
 
   // Tooltip without border.

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

@@ -214,19 +214,19 @@ export default {
 
     onLabelKeydown (item, e) {
       // Keys: 13 enter, 32 space, 37 arrow left, 38 arrow up, 39 arrow right, 40 arrow down.
-      if (!(e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) && [13, 32, 37, 38, 39, 40].includes(e.which)) {
+      if (!(e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) && [13, 32, 37, 38, 39, 40].includes(e.keyCode)) {
         if (item.children || item.branch) {
-          if ([13, 32].includes(e.which)) this.expandDepth(item) && e.preventDefault()
-          else if (e.which === 37) this.expandDepth(item, false) && e.preventDefault()
-          else if (e.which === 39) this.expandDepth(item, true) && e.preventDefault()
+          if ([13, 32].includes(e.keyCode)) this.expandDepth(item) && e.preventDefault()
+          else if (e.keyCode === 37) this.expandDepth(item, false) && e.preventDefault()
+          else if (e.keyCode === 39) this.expandDepth(item, true) && e.preventDefault()
         }
 
         // On arrow up or down, focus the prev or next item.
-        if ([38, 40].includes(e.which)) {
+        if ([38, 40].includes(e.keyCode)) {
           const treeRoot = this.$el.closest('.w-tree--depth0')
           const treeTabbableItems = treeRoot.querySelectorAll('.w-tree__item-label[tabindex="0"]')
           const currLabel = e.target.closest('.w-tree__item-label')
-          const indexModifier = e.which === 38 ? -1 : 1;
+          const indexModifier = e.keyCode === 38 ? -1 : 1;
 
           ([...treeTabbableItems]).some((item, i) => {
             if (item.isSameNode(currLabel)) {
@@ -238,7 +238,7 @@ export default {
         }
       }
 
-      if (e.which === 13) {
+      if (e.keyCode === 13) {
         if (this.selectable) item.selected = !item.selected
         // Always emitting on enter keydown, but different event for selection.
         this.emitItemSelection(item, e)

package/src/wave-ui/core.js

@@ -1,17 +1,51 @@
+import { consoleWarn } from './utils/console'
 import { mergeConfig } from './utils/config'
 import NotificationManager from './utils/notification-manager'
 import { colorPalette, generateColorShades, flattenColors } from './utils/colors'
-// import * as directives from './directives'
+
+// const detectOSDarkMode = $waveui => {
+//   const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')
+//   $waveui.preferredTheme = matchMedia.matches ? 'dark' : 'light'
+//   $waveui.switchTheme($waveui.preferredTheme)
+
+//   matchMedia.addEventListener('change', event => {
+//     $waveui.preferredTheme = event.matches ? 'dark' : 'light'
+//     $waveui.switchTheme($waveui.preferredTheme)
+//   })
+// }
 
 /**
  * Inject presets into a Vue component props defaults before its registration into the app.
+ * If a preset is not found in the given component props, try to find it in its mixins, if any.
  *
+ * @todo remove mixins-related code when stopping support for Vue 2.
  * @param {Object} component the Vue component to inject presets into.
  * @param {Object} presets the presets to inject. E.g. `{ bgColor: 'green' }`.
  */
 const injectPresets = (component, presets) => {
   for (const preset in presets) {
-    component.props[preset].default = presets[preset]
+    // If we don't have the prop output a warning and continue.
+    if (!component.props?.[preset]) {
+      let foundProp = false
+      // Check to see if the prop exists on a mixin when it doesn't exist on the component.
+      // @todo: remove this check when there is no more Vue 2 and mixins: mixins are now deprecated.
+      if (Array.isArray(component.mixins) && component.mixins.length) {
+        // Loop through the array of mixin, and if we find the prop in one, update its default value.
+        for (const mixin of component.mixins) {
+          if (mixin?.props?.[preset]) {
+            mixin.props[preset].default = presets[preset]
+            foundProp = true
+            break
+          }
+        }
+
+        // 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.
+      }
+    }
+
+    else component.props[preset].default = presets[preset]
   }
 }
 

package/src/wave-ui/mixins/detachable.js

@@ -22,7 +22,8 @@ export default {
     noPosition: { type: Boolean },
     zIndex: { type: [Number, String, Boolean] },
     // Optionally designate an external activator.
-    activator: { type: [String, Object] } // The activator can be a DOM string selector, a ref or a DOM node.
+    // The activator can be a DOM string selector, a ref or a DOM node.
+    activator: { type: [String, Object] }
   },
 
   inject: {
@@ -35,7 +36,11 @@ export default {
     // as is in an array so we can delete them on destroy.
     // This only applies to the activatorEventHandlers, the other events listeners can be removed
     // normally.
-    docEventListenersHandlers: []
+    docEventListenersHandlers: [],
+    // The user may open and close the detachable so fast (like when toggling on hover) that it
+    // should not show up at all. Keep the ability to cancel the opening timer (if there is a set
+    // delay prop).
+    openTimeout: null
   }),
 
   computed: {
@@ -111,6 +116,13 @@ export default {
         (['left', 'right'].includes(this.position) && this.alignBottom && 'bottom') ||
         ''
       )
+    },
+
+    shouldShowOnClick () {
+      // For props simplicity, the w-tooltip component has the `showOnHover` prop,
+      // whereas the w-menu has `showOnClick`.
+      return (this.$options.props.showOnHover && !this.showOnHover) ||
+        (this.$options.props.showOnClick && this.showOnClick)
     }
   },
 
@@ -119,7 +131,10 @@ export default {
     async open (e) {
       // A tiny delay may help positioning the detachable correctly in case of multiple activators
       // with different menu contents.
-      if (this.delay) await new Promise(resolve => setTimeout(resolve, this.delay))
+      if (this.delay) await new Promise(resolve => (this.openTimeout = setTimeout(resolve, this.delay)))
+
+      // Cancel opening if the timeout has been cancelled by blur event (when going fast).
+      if (this.delay && !this.openTimeout) return
 
       this.detachableVisible = true
 
@@ -336,7 +351,7 @@ export default {
     else {
       this.$nextTick(() => {
         if (this.activator) this.bindActivatorEvents()
-        if (this.value) this.toggle({ type: 'click', target: this.activatorEl })
+        if (this.value) this.open({ target: this.activatorEl })
       })
     }
 
@@ -346,7 +361,10 @@ export default {
       wrapper.parentNode.insertBefore(this.overlayEl, wrapper)
     }
 
-    if (this.value && this.activator) this.toggle({ type: 'click', target: this.activatorEl })
+    if (this.value && this.activator) {
+      this.toggle({ type: this.shouldShowOnClick ? 'click' : 'mouseenter', target: this.activatorEl })
+    }
+    else if (this.value) this.open({ target: this.activatorEl })
   },
 
   beforeDestroy () {
@@ -368,7 +386,10 @@ export default {
 
   watch: {
     value (bool) {
-      if (!!bool !== this.detachableVisible) this.toggle({ type: 'click', target: this.activatorEl })
+      if (!!bool !== this.detachableVisible) {
+        if (bool) this.open({ target: this.activatorEl })
+        else this.close()
+      }
     },
     appendTo () {
       this.removeFromDOM()

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

@@ -1,3 +1,21 @@
+@use "sass:map";
+
+// The CSS variables are used in the dynamic-css.js file in order to reuse the same SCSS
+// variable presets.
+:root {
+  --w-base-increment: #{$base-increment};
+  --w-css-scope: #{$css-scope};
+  --w-base-bg-color-rgb: #{map.get($theme-light, 'base-bg-color-rgb')};
+  --w-base-color-rgb: #{map.get($theme-light, 'base-color-rgb')};
+  --w-contrast-bg-color-rgb: #{map.get($theme-light, 'contrast-bg-color-rgb')};
+  --w-contrast-color-rgb: #{map.get($theme-light, 'contrast-color-rgb')};
+  --w-caption-color-rgb: #{map.get($theme-light, 'caption-color-rgb')};
+  --w-disabled-color-rgb: #{map.get($theme-light, 'disabled-color-rgb')};
+
+  background-color: rgb(var(--w-base-bg-color-rgb));
+  color: rgb(var(--w-base-color-rgb));
+}
+
 * {outline: none;margin: 0;padding: 0;}
 
 body {overflow-x: hidden;}

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

@@ -5,6 +5,39 @@
   // @return $a / $b;
 }
 
+// THEME COLORS.
+// ========================================================
+// These colors are defined by a list of RBG channels only, so you can later apply any alpha channel.
+// If you don't need themes, you can leave this as is and override the global defaults.
+$theme-light: (
+  base-bg-color-rgb: (255, 255, 255), // #fff.
+  base-color-rgb: (0, 0, 0), // #000.
+  contrast-bg-color-rgb: (0, 0, 0), // #000.
+  contrast-color-rgb: (255, 255, 255), // #fff.
+  caption-color-rgb: (80, 80, 80, 0.7), // #505050.
+  disabled-color-rgb: (204, 204, 204), // #ccc.
+) !default;
+
+$theme-dark: (
+  base-bg-color-rgb: (34, 34, 34), // #222.
+  base-color-rgb: (255, 255, 255), // #fff.
+  contrast-bg-color-rgb: (255, 255, 255), // #fff.
+  contrast-color-rgb: (0, 0, 0), // #000.
+  caption-color-rgb: (175, 175, 175, 0.7), // #afafaf.
+  disabled-color-rgb: (74, 74, 74), // #4a4a4a.
+) !default;
+
+// These variables are filled up with the current theme colors for you to use.
+$primary: var(--w-primary-color);
+$secondary: var(--w-secondary-color);
+$base-bg-color: rgb(var(--w-base-bg-color-rgb));
+$base-color: rgb(var(--w-base-color-rgb));
+$contrast-bg-color: rgb(var(--w-contrast-bg-color-rgb));
+$contrast-color: rgb(var(--w-contrast-color-rgb));
+$caption-color: rgb(var(--w-caption-color-rgb));
+// When a form element is disabled (checkbox, radio, input, select list).
+$disabled-color: rgb(var(--w-disabled-color-rgb));
+
 // GLOBAL DEFAULTS.
 // ========================================================
 $css-scope: '.w-app' !default; // Allows control on CSS rules priority.
@@ -14,8 +47,8 @@ $use-layout-classes: true !default;
 $base-font-size: 14px !default; // Must be a px unit.
 $base-increment: round(divide($base-font-size, 4)) !default;
 $layout-padding: $base-increment * 4 !default; // Applied on the .content-wrap tag.
-$border-radius: 3px !default;
-$border-color: rgba(0, 0, 0, 0.15);
+$border-radius: 4px !default;
+$border-color: rgba(var(--w-contrast-bg-color-rgb), 0.12) !default;
 $border: 1px solid $border-color !default;
 $transition-duration: 0.25s !default;
 $fast-transition-duration: 0.15s !default;
@@ -28,34 +61,95 @@ $form-field-height: 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;
 
+// Detachable elements are: w-tooltip, w-menu, w-confirm.
+$detachable-bg-color: $base-bg-color !default;
+$detachable-color: $base-color !default;
+
 // COMPONENTS DEFAULTS.
 // ========================================================
+// w-confirm.
+// --------------------------------------------------------
+$confirm-bg-color: $detachable-bg-color !default;
+$confirm-color: $detachable-color !default;
+// --------------------------------------------------------
+
+// w-dialog.
+// --------------------------------------------------------
+$dialog-bg-color: $base-bg-color !default;
+// --------------------------------------------------------
+
+// w-divider.
+// --------------------------------------------------------
+$divider-color: $border-color !default;
+// --------------------------------------------------------
+
 // w-drawer.
+// --------------------------------------------------------
 $drawer-max-size: 380px !default;
+$drawer-bg-color: $base-bg-color !default;
+// --------------------------------------------------------
+
+// w-menu.
+// --------------------------------------------------------
+$menu-bg-color: $detachable-bg-color !default;
+$menu-color: $detachable-color !default;
+// --------------------------------------------------------
+
+// w-progress.
+// --------------------------------------------------------
+$progress-bg-color: rgba(var(--w-contrast-bg-color-rgb), 0.15) !default;
+// --------------------------------------------------------
+
+// w-rating.
+// --------------------------------------------------------
+$rating-bg-color: rgba(var(--w-contrast-bg-color-rgb), 0.25) !default;
 // --------------------------------------------------------
 
 // w-slider.
 // --------------------------------------------------------
 $slider-height: $base-increment !default;
-$slider-track-color: #ddd;
+$slider-track-color: rgba(var(--w-contrast-bg-color-rgb), 0.15) !default;
+$slider-thumb-button-bg-color: $base-bg-color !default;
+$slider-thumb-label-bg-color: $base-bg-color !default;
+$slider-thumb-label-color: rgba(var(--w-base-color-rgb), 0.75) !default;
+$slider-step-label-bg-color: rgba(var(--w-contrast-bg-color-rgb), 0.2) !default;
+$slider-step-label-color: rgba(var(--w-base-color-rgb), 0.5) !default;
+
+// w-switch.
+// --------------------------------------------------------
+$switch-inactive-color: rgba(var(--w-contrast-bg-color-rgb), 0.25) !default;
+$switch-thumb-color: #fff !default;
 // --------------------------------------------------------
 
 // w-table.
 // --------------------------------------------------------
-$table-tr-odd-color: rgba(0, 0, 0, 0.02);
-$table-tr-hover-color: rgba(0, 0, 0, 0.05);
-$table-color: rgba(0, 0, 0, 0.7);
+$table-tr-odd-color: rgba(0, 0, 0, 0.02) !default;
+$table-tr-hover-color: rgba(0, 0, 0, 0.05) !default;
+$table-color: rgba(var(--w-contrast-color-rgb), 0.7) !default;
 // --------------------------------------------------------
 
 // w-textarea.
 // --------------------------------------------------------
-$textarea-line-height: 1.2;
+$textarea-line-height: 1.2 !default;
+// --------------------------------------------------------
+
+// w-timeline.
+// --------------------------------------------------------
+$timeline-bullet-color: $base-bg-color !default;
+$timeline-bg-color: rgba(var(--w-contrast-bg-color-rgb), 0.25) !default;
+// --------------------------------------------------------
+
+// w-toolbar.
+// --------------------------------------------------------
+$toolbar-max-size: 380px !default;
+$toolbar-bg-color: $base-bg-color !default;
 // --------------------------------------------------------
 
 // w-tooltip.
 // --------------------------------------------------------
-$tooltip-bg-color: #fff;
-$tooltip-color: rgba(0, 0, 0, 0.7);
+$tooltip-bg-color: $detachable-bg-color !default;
+$tooltip-color: $detachable-color !default;
+$tooltip-border-color: $border-color !default;
 // --------------------------------------------------------
 
 // Mixins.

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

@@ -1,4 +1,3 @@
-@import './variables';
 @import './base';
 @import './typography';
 @import './layout';

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

@@ -7,15 +7,18 @@ const cssVars = {
 
 const generateColors = config => {
   let styles = ''
+  const cssVariables = {}
   const { cssScope } = cssVars
 
   // Extract status colors and place them after the other colors.
   const { info, warning, success, error, ...colors } = config.colors
 
-  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:${config.colors[colorName]}}` +
+      `${cssScope} .${colorName}{color:${config.colors[colorName]}}`
   }
 
   // Color shades are generated in core.js, if the option is on.
@@ -36,12 +39,19 @@ const generateColors = config => {
       `${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(';')}}`
+  // 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 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.
@@ -153,6 +163,7 @@ const genBreakpointLayoutClasses = breakpoints => {
     'text-nowrap{white-space:nowrap}',
     'row{flex-direction:row}',
     'column{flex-direction:column}',
+    'column-reverse{flex-direction:column-reverse}',
     'grow{flex-grow:1;flex-basis:auto}',
     'no-grow{flex-grow:0}',
     'shrink{flex-shrink:1;margin-left:auto;margin-right:auto}',