wave-ui 2.26.0 → 2.27.0

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

@@ -15,7 +15,7 @@
         th.w-table__header(
           v-for="(header, i) in headers"
           :key="i"
-          @click="header.sortable !== false && sortTable(header)"
+          @click="!colResizing.dragging && header.sortable !== false && sortTable(header)"
           :class="headerClasses(header)")
           w-icon.w-table__header-sort(
             v-if="header.sortable !== false && header.align === 'right'"
@@ -122,6 +122,9 @@
 
 import { consoleError } from '../utils/console'
 
+// When column resizing is on, this is the minimum cell width that we can resize to.
+const minColumnWidth = 15
+
 export default {
   name: 'w-table',
   props: {
@@ -404,15 +407,17 @@ export default {
       columnEl.style.width = colWidth + deltaX + 'px'
       nextColumnEl.style.width = nextColWidth - deltaX + 'px'
 
-      // 2. Check if we went too far (the width applyed is different than the browser-computed one).
-      const minWidthReached = deltaX < 0 && columnEl.offsetWidth > newColWidth
+      // 2. Check if we went too far (the width applied is different than the browser-computed one).
+      const minWidthReached = (deltaX < 0 && columnEl.offsetWidth > newColWidth) ||
+                              columnEl.offsetWidth <= minColumnWidth
       const maxWidthReached = deltaX > 0 && nextColumnEl.offsetWidth > newNextColWidth
 
       // 3. If we went too far, correct the value of both cells widths.
       // Make sure we don't shrink enough to push other left cells.
       if (minWidthReached) {
-        columnEl.style.width = columnEl.offsetWidth + 'px'
-        nextColumnEl.style.width = maxWidth - columnEl.offsetWidth + 'px'
+        const newWidth = Math.max(columnEl.offsetWidth, minColumnWidth)
+        columnEl.style.width = newWidth + 'px'
+        nextColumnEl.style.width = maxWidth - newWidth + 'px'
       }
       // Make sure we don't grow enough to push other right cells.
       else if (maxWidthReached) {
@@ -421,19 +426,24 @@ export default {
       }
     },
 
-    onResizerMouseUp (e) {
+    onResizerMouseUp () {
       // Remove listeners.
       document.removeEventListener('mousemove', this.onResizerMouseMove)
       document.removeEventListener('mouseup', this.onResizerMouseUp)
 
       // Reset all the variables (better for debugging).
-      this.colResizing.dragging = false
-      this.colResizing.columnIndex = null
-      this.colResizing.startCursorX = null
-      this.colResizing.columnEl = null
-      this.colResizing.nextColumnEl = null
-      this.colResizing.colWidth = null
-      this.colResizing.nextColWidth = null
+      // setTimeout 0 to make sure the sorting is not applied when releasing the mouse on a header
+      // cell after resizing.
+      // (releasing the mouse on table header triggers a click event captured by the sorting feature)
+      setTimeout(() => {
+        this.colResizing.dragging = false
+        this.colResizing.columnIndex = null
+        this.colResizing.startCursorX = null
+        this.colResizing.columnEl = null
+        this.colResizing.nextColumnEl = null
+        this.colResizing.colWidth = null
+        this.colResizing.nextColWidth = null
+      }, 0)
     }
   },
 
@@ -490,6 +500,10 @@ $tr-border-top: 1px;
   border-collapse: collapse;
   border: none;
 
+  &--resizable-cols {
+    table-layout: fixed; // Allow resizing beyond the cell minimum text width.
+  }
+
   &--resizing {
     &, * {cursor: col-resize;}
 
@@ -498,8 +512,11 @@ $tr-border-top: 1px;
 
   // Table headers.
   // ------------------------------------------------------
-  &__header {
-    padding: $base-increment;
+  &__header {padding: $base-increment;}
+  &__header--resizable {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   &--fixed-header th {
@@ -596,7 +613,15 @@ $tr-border-top: 1px;
   &__header:first-child, &__cell:first-child {padding-left: 2 * $base-increment;}
   &__header:last-child, &__cell:last-child {padding-right: 2 * $base-increment;}
 
-  &--resizable-cols &__cell {position: relative;}
+  &--resizable-cols &__cell {
+    position: relative;
+
+    &, & * {
+      overflow: hidden;
+      // white-space: nowrap; // If you only want the content cell on a single line.
+      text-overflow: ellipsis;
+    }
+  }
 
   .no-data &__cell {
     background-color: rgba(255, 255, 255, 0.2);

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 }")
   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"
@@ -26,6 +26,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 +43,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,6 +72,10 @@ 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}`
@@ -143,7 +148,7 @@ export default {
       return {
         [this.color]: !this.bgColor,
         [`${this.bgColor} ${this.bgColor}--bg`]: this.bgColor,
-        [this.tooltipClass]: this.tooltipClass,
+        ...this.tooltipClasses,
         [`w-tooltip--${this.position}`]: true,
         'w-tooltip--tile': this.tile,
         'w-tooltip--round': this.round,
@@ -280,8 +285,7 @@ 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()
     }
   },
 
@@ -295,8 +299,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: {

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.

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

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

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 (typeof classes === 'array') classes = { [classes.join(' ')]: true }
+  return classes
+}