wave-ui 2.26.0 → 2.29.0

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

@@ -1,7 +1,7 @@
 <template lang="pug">
-.w-tooltip-wrap(ref="wrapper" :class="{ 'w-tooltip-wrap--attached': !detachTo }")
+.w-tooltip-wrap(:class="{ 'w-tooltip-wrap--attached': !detachTo }")
   slot(name="activator" :on="eventHandlers")
-  transition(:name="transitionName")
+  transition(:name="transitionName" appear)
     //- In Vue 3, a ref in a transition doesn't stay in $refs, it must be set as a function.
     .w-tooltip(
       :ref="el => tooltipEl = el"
@@ -9,11 +9,7 @@
       v-show="showTooltip"
       :class="classes"
       :style="styles")
-      //- When there is a bg color, another div wrapper is needed for the triangle
-      //- to inherit the current color.
-      div(v-if="bgColor" :class="color")
-        slot
-      slot(v-else)
+      slot
 </template>
 
 <script>
@@ -26,6 +22,7 @@
  * and move the tooltip elsewhere in the DOM.
  */
 
+import { objectifyClasses } from '../utils/index'
 import { consoleWarn } from '../utils/console'
 
 const marginFromWindowSide = 4 // Amount of px from a window side, instead of overflowing.
@@ -42,8 +39,8 @@ export default {
     shadow: { type: Boolean },
     tile: { type: Boolean },
     round: { type: Boolean },
-    transition: { type: String, default: '' },
-    tooltipClass: { type: String },
+    transition: { type: String },
+    tooltipClass: { type: [String, Object, Array] },
     // Position.
     detachTo: {},
     fixed: { type: Boolean },
@@ -71,32 +68,41 @@ export default {
   }),
 
   computed: {
+    tooltipClasses () {
+      return objectifyClasses(this.tooltipClass)
+    },
+
     transitionName () {
       const direction = this.position.replace(/top|bottom/, m => ({ top: 'up', bottom: 'down' }[m]))
       return this.transition || `w-tooltip-slide-fade-${direction}`
     },
 
+    // DOM element to attach tooltip to.
+    // ! \ This computed uses the DOM - NO SSR (only trigger from beforeMount and later).
     detachToTarget () {
-      let target = this.detachTo || '.w-app'
-      if (target === true) target = '.w-app'
-      else if (target && !['object', 'string'].includes(typeof target)) target = '.w-app'
+      const defaultTarget = '.w-app'
+
+      let target = this.detachTo || defaultTarget
+      if (target === true) target = defaultTarget
+      else if (target && !['object', 'string'].includes(typeof target)) target = defaultTarget
       else if (typeof target === 'object' && !target.nodeType) {
-        target = '.w-app'
+        target = defaultTarget
         consoleWarn('Invalid node provided in w-tooltip `attach-to`. Falling back to .w-app.', this)
       }
       if (typeof target === 'string') target = document.querySelector(target)
 
       if (!target) {
-        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : '.w-app'}`, this)
-        target = document.querySelector('.w-app')
+        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : defaultTarget}`, this)
+        target = document.querySelector(defaultTarget)
       }
 
       return target
     },
 
     // DOM element that will receive the tooltip.
+    // ! \ This computed uses the DOM - NO SSR (only trigger from beforeMount and later).
     tooltipParentEl () {
-      return this.detachTo ? this.detachToTarget : this.$refs.wrapper
+      return this.detachTo ? this.detachToTarget : this.$el
     },
 
     position () {
@@ -141,9 +147,9 @@ export default {
 
     classes () {
       return {
-        [this.color]: !this.bgColor,
-        [`${this.bgColor} ${this.bgColor}--bg`]: this.bgColor,
-        [this.tooltipClass]: this.tooltipClass,
+        [this.color]: this.color,
+        [`${this.bgColor}--bg`]: this.bgColor,
+        ...this.tooltipClasses,
         [`w-tooltip--${this.position}`]: true,
         'w-tooltip--tile': this.tile,
         'w-tooltip--round': this.round,
@@ -155,11 +161,13 @@ export default {
       }
     },
 
+    // The tooltip styles.
     styles () {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || null,
-        top: `${~~this.tooltipCoordinates.top}px`,
-        left: `${~~this.tooltipCoordinates.left}px`
+        top: (this.tooltipCoordinates.top && `${~~this.tooltipCoordinates.top}px`) || null,
+        left: (this.tooltipCoordinates.left && `${~~this.tooltipCoordinates.left}px`) || null,
+        '--w-tooltip-bg-color': this.$waveui.colors[this.bgColor || 'white']
       }
     },
 
@@ -174,16 +182,18 @@ export default {
           mouseleave: this.toggle
         }
 
-        if ('ontouchstart' in window) handlers.click = this.toggle
+        // Check the window exists: SSR-proof.
+        if (typeof window !== 'undefined' && 'ontouchstart' in window) handlers.click = this.toggle
       }
       return handlers
     }
   },
 
   methods: {
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     toggle (e) {
       let shouldShowTooltip = this.showTooltip
-      if ('ontouchstart' in window) {
+      if (typeof window !== 'undefined' && 'ontouchstart' in window) {
         if (e.type === 'click') shouldShowTooltip = !shouldShowTooltip
       }
       else if (e.type === 'click' && this.showOnClick) shouldShowTooltip = !shouldShowTooltip
@@ -211,6 +221,7 @@ export default {
       }
     },
 
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     getCoordinates () {
       const { top, left, width, height } = this.activatorEl.getBoundingClientRect()
       let coords = { top, left, width, height }
@@ -268,7 +279,7 @@ export default {
     },
 
     insertTooltip () {
-      const wrapper = this.$refs.wrapper
+      const wrapper = this.$el
 
       // Unwrap the activator element.
       wrapper.parentNode.insertBefore(this.activatorEl, wrapper)
@@ -280,13 +291,12 @@ export default {
     },
 
     removeTooltip () {
-      // el.remove() doesn't work on IE11.
-      if (this.tooltipEl && this.tooltipEl.parentNode) this.tooltipEl.parentNode.removeChild(this.tooltipEl)
+      if (this.tooltipEl && this.tooltipEl.parentNode) this.tooltipEl.remove()
     }
   },
 
   mounted () {
-    this.activatorEl = this.$refs.wrapper.firstElementChild
+    this.activatorEl = this.$el.firstElementChild
     if (this.detachTo) this.insertTooltip()
 
     if (this.modelValue) this.toggle({ type: 'click', target: this.activatorEl })
@@ -295,8 +305,7 @@ export default {
   beforeUnmount () {
     this.removeTooltip()
 
-    // el.remove() doesn't work on IE11.
-    if (this.activatorEl && this.activatorEl.parentNode) this.activatorEl.parentNode.removeChild(this.activatorEl)
+    if (this.activatorEl && this.activatorEl.parentNode) this.activatorEl.remove()
   },
 
   watch: {
@@ -363,94 +372,17 @@ export default {
 
   &--custom-transition {transform: none;}
 
-  &:after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 6px solid transparent;
-  }
-  &--top:after {
-    top: 100%;
-    left: 50%;
-    border-top-color: $tooltip-bg-color;
-    transform: translateX(-50%);
-    margin-top: 1px;
-  }
-  &--bottom:after {
-    bottom: 100%;
-    left: 50%;
-    border-bottom-color: $tooltip-bg-color;
-    transform: translateX(-50%);
-    margin-bottom: 1px;
-  }
-  &--left:after {
-    left: 100%;
-    top: 50%;
-    border-left-color: $tooltip-bg-color;
-    transform: translateY(-50%);
-    margin-left: 1px;
-  }
-  &--right:after {
-    right: 100%;
-    top: 50%;
-    border-right-color: $tooltip-bg-color;
-    transform: translateY(-50%);
-    margin-right: 1px;
-  }
-
   // Tooltip without border.
   // --------------------------------------------------------
-  &--no-border.w-tooltip--top:after {margin-top: -1px;border-top-color: inherit;}
-  &--no-border.w-tooltip--bottom:after {margin-bottom: -1px;border-bottom-color: inherit;}
-  &--no-border.w-tooltip--left:after {margin-left: -1px;border-left-color: inherit;}
-  &--no-border.w-tooltip--right:after {margin-right: -1px;border-right-color: inherit;}
+  &--no-border {
+    @include triangle(var(--w-tooltip-bg-color), '.w-tooltip', 7px, 0);
+  }
 
   // Tooltip with border.
   // --------------------------------------------------------
-  &:not(&--no-border).w-tooltip--top:after {margin-top: -1px;}
-  &:not(&--no-border).w-tooltip--bottom:after {margin-bottom: -1px;}
-  &:not(&--no-border).w-tooltip--left:after {margin-left: -1px;}
-  &:not(&--no-border).w-tooltip--right:after {margin-right: -1px;}
-
   &:not(&--no-border) {
-    &:before {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 0;
-      border: 7px solid transparent;
-    }
-    &.w-tooltip--top:before {
-      top: 100%;
-      left: 50%;
-      border-top-color: inherit;
-      transform: translateX(-50%);
-      margin-top: 0;
-    }
-    &.w-tooltip--bottom:before {
-      bottom: 100%;
-      left: 50%;
-      border-bottom-color: inherit;
-      transform: translateX(-50%);
-      margin-bottom: 0;
-    }
-    &.w-tooltip--left:before {
-      left: 100%;
-      top: 50%;
-      border-left-color: inherit;
-      transform: translateY(-50%);
-      margin-left: 0;
-    }
-    &.w-tooltip--right:before {
-      right: 100%;
-      top: 50%;
-      border-right-color: inherit;
-      transform: translateY(-50%);
-      margin-right: 0;
-    }
+    @include triangle(var(--w-tooltip-bg-color), '.w-tooltip', 7px);
   }
-  // --------------------------------------------------------
 }
 
 // Transitions.

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

@@ -10,24 +10,3 @@ a {text-decoration: none;}
   padding-left: 3 * $base-increment;
   padding-right: 3 * $base-increment;
 }
-
-.nav-menu ~ .main-content {padding-left: 4em;}
-
-footer {
-  margin-top: 5em;
-
-  .nav-drawer ~ & {padding-left: 12px;}
-
-  .heart:hover {animation: heartbeat 1s infinite;}
-  small {font-size: 10px;}
-  .caption {padding-top: 1px;}
-}
-
-@keyframes heartbeat {
-  0%, 30%, 60%, 100% {transform: scale(1);}
-  15%, 45% {transform: scale(1.2);}
-}
-
-@media screen and (max-width: 560px) {
-  button.go-top {display: none;}
-}

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

@@ -0,0 +1,100 @@
+@mixin default-transition($duration: $transition-duration, $delay: 0s) {
+  transition: $duration $delay ease-in-out;
+}
+
+@mixin out-back-transition($duration: $transition-duration, $delay: 0s) {
+  transition: $duration $delay cubic-bezier(0.18, 0.89, 0.32, 1.28);
+}
+
+/**
+ * Generates a triangle arrow on the edge of an element.
+ *
+ * @param $color: the color to apply to the triangle.
+ * @param $selector: the element selector that receives the modifiers (--top, --left, etc.).
+ * @param $size: the triangle size at the base.
+ * @param $thickness: the border thickness, 0 to remove the border.
+ */
+@mixin triangle($color: white, $selector: '', $size: 7px, $thickness: 1px) {
+  @if ($thickness > 0) {
+    // The underneath border triangle.
+    &:before {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 0;
+      border: $size solid transparent;
+    }
+
+    &#{$selector}--top:before {
+      top: 100%;
+      left: 50%;
+      border-top-color: inherit;
+      transform: translateX(-50%);
+      margin-top: 0;
+    }
+    &#{$selector}--bottom:before {
+      bottom: 100%;
+      left: 50%;
+      border-bottom-color: inherit;
+      transform: translateX(-50%);
+      margin-bottom: 0;
+    }
+    &#{$selector}--left:before {
+      left: 100%;
+      top: 50%;
+      border-left-color: inherit;
+      transform: translateY(-50%);
+      margin-left: 0;
+    }
+    &#{$selector}--right:before {
+      right: 100%;
+      top: 50%;
+      border-right-color: inherit;
+      transform: translateY(-50%);
+      margin-right: 0;
+    }
+
+    &#{$selector}--align-top:before {transform: none;top: (2 * $base-increment) - 1px;}
+    &#{$selector}--align-bottom:before {transform: none;top: auto;bottom: (2 * $base-increment) - 1px;}
+    &#{$selector}--align-left:before {transform: none;left: (2 * $base-increment) - 1px;}
+    &#{$selector}--align-right:before {transform: none;left: auto;right: (2 * $base-increment) - 1px;}
+  }
+
+  // The colored triangle on top of `:before`.
+  &:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: ($size - $thickness) solid transparent;
+  }
+  &#{$selector}--top:after {
+    top: 100%;
+    left: 50%;
+    border-top-color: $color;
+    transform: translateX(-50%);
+  }
+  &#{$selector}--bottom:after {
+    bottom: 100%;
+    left: 50%;
+    border-bottom-color: $color;
+    transform: translateX(-50%);
+  }
+  &#{$selector}--left:after {
+    left: 100%;
+    top: 50%;
+    border-left-color: $color;
+    transform: translateY(-50%);
+  }
+  &#{$selector}--right:after {
+    right: 100%;
+    top: 50%;
+    border-right-color: $color;
+    transform: translateY(-50%);
+  }
+
+  &#{$selector}--align-top:after {transform: none;top: 2 * $base-increment;}
+  &#{$selector}--align-bottom:after {transform: none;top: auto;bottom: 2 * $base-increment;}
+  &#{$selector}--align-left:after {transform: none;left: 2 * $base-increment;}
+  &#{$selector}--align-right:after {transform: none;left: auto;right: 2 * $base-increment;}
+}

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

@@ -28,15 +28,6 @@ $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;
 
-// Mixins.
-@mixin default-transition($duration: $transition-duration, $delay: 0s) {
-  transition: $duration $delay ease-in-out;
-}
-
-@mixin out-back-transition($duration: $transition-duration, $delay: 0s) {
-  transition: $duration $delay cubic-bezier(0.18, 0.89, 0.32, 1.28);
-}
-
 // COMPONENTS DEFAULTS.
 // ========================================================
 // w-drawer.
@@ -66,3 +57,7 @@ $textarea-line-height: 1.2;
 $tooltip-bg-color: #fff;
 $tooltip-color: rgba(0, 0, 0, 0.7);
 // --------------------------------------------------------
+
+// Mixins.
+// --------------------------------------------------------
+@import './mixins';

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

@@ -0,0 +1,11 @@
+/**
+ * Takes CSS classes as a string array or object and turn them into an object.
+ *
+ * @param {String|Array|Object} classes the CSS classes to merge into an object
+ * @return {Object}
+ */
+export const objectifyClasses = (classes = {}) => {
+  if (typeof classes === 'string') classes = { [classes]: true }
+  else if (Array.isArray(classes)) classes = { [classes.join(' ')]: true }
+  return classes
+}