wave-ui 2.23.0 → 2.27.0

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

@@ -1,12 +1,21 @@
 <template lang="pug">
 .w-table-wrap(:class="wrapClasses")
-  table.w-table(:class="classes")
+  table.w-table(
+    :class="classes"
+    @mousedown="onMouseDown"
+    @mouseover="onMouseOver"
+    @mouseout="onMouseOut")
+    colgroup
+      col.w-table__col(
+        v-for="(header, i) in headers"
+        :key="i"
+        :width="header.width || null")
     thead(v-if="!noHeaders")
       tr
         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'"
@@ -22,14 +31,27 @@
           w-icon.w-table__header-sort(
             v-if="header.sortable !== false && header.align !== 'right'"
             :class="headerSortClasses(header)") wi-arrow-down
+          //- Notes: prevent click on header (`.stop`), which triggers sorting & DOM refresh.
+          span.w-table__col-resizer(
+            v-if="i < headers.length - 1 && resizableColumns"
+            :class="{ 'w-table__col-resizer--hover': colResizing.hover === i, 'w-table__col-resizer--active': colResizing.columnIndex === i }"
+            @click.stop)
     tbody
+      //- Progress bar.
       tr.w-table__progress-bar(v-if="loading")
         td(:colspan="headers.length")
           w-progress(tile)
           .w-table__loading-text
             slot(name="loading") Loading...
-      template(v-else-if="tableItems.length")
+      //- No data.
+      tr.no-data(v-if="!tableItems.length")
+        td.w-table__cell.text-center(:colspan="headers.length")
+          slot(name="no-data") No data to show.
+
+      //- Normal rows.
+      template(v-else)
         template(v-for="(item, i) in sortedItems" :key="i")
+          //- Fully custom tr (`item` slot).
           slot(
             v-if="$slots.item"
             name="item"
@@ -69,25 +91,40 @@
                   :item="item"
                   :label="item[header.key] || ''"
                   :index="i + 1")
+                span.w-table__col-resizer(
+                  v-if="j < headers.length - 1 && resizableColumns"
+                  :class="{ 'w-table__col-resizer--hover': colResizing.hover === j, 'w-table__col-resizer--active': colResizing.columnIndex === j }")
+
               td.w-table__cell(
                 v-else
                 :key="`${j}-b`"
                 :data-label="header.label"
-                :class="`text-${header.align || 'left'}`"
-                v-html="item[header.key] || ''")
+                :class="`text-${header.align || 'left'}`")
+                div(v-html="item[header.key] || ''")
+                span.w-table__col-resizer(
+                  v-if="j < headers.length - 1 && resizableColumns"
+                  :class="{ 'w-table__col-resizer--hover': colResizing.hover === j, 'w-table__col-resizer--active': colResizing.columnIndex === j }")
+
+          //- Expanded row.
           tr.w-table__row.w-table__row--expanded(v-if="expandedRowsByUid[item._uid]")
             td.w-table__cell(:colspan="headers.length")
               div(v-if="expandedRowsByUid[item._uid]")
                 slot(name="expanded-row" :item="item" :index="i + 1")
-
-      tr.no-data(v-else)
-        td.w-table__cell.text-center(:colspan="headers.length")
-          slot(name="no-data") No data to show.
+              span.w-table__col-resizer(
+                v-if="j < headers.length - 1 && resizableColumns"
+                :class="{ 'w-table__col-resizer--hover': colResizing.hover === j, 'w-table__col-resizer--active': colResizing.columnIndex === j }")
 </template>
 
 <script>
+/**
+ * @todo: (Column Resizing) Recalc. on browser resize.
+ */
+
 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: {
@@ -133,7 +170,8 @@ export default {
     uidKey: { type: String, default: 'id' },
 
     filter: { type: Function },
-    mobileBreakpoint: { type: Number, default: 0 }
+    mobileBreakpoint: { type: Number, default: 0 },
+    resizableColumns: { type: Boolean }
   },
 
   emits: ['row-select', 'row-expand', 'row-click', 'update:sort', 'update:selected-rows', 'update:expanded-rows'],
@@ -141,7 +179,18 @@ export default {
   data: () => ({
     activeSorting: [],
     selectedRowsInternal: [], // Array of uids.
-    expandedRowsInternal: [] // Array of uids.
+    expandedRowsInternal: [], // Array of uids.
+    // Column resizing feature.
+    colResizing: {
+      dragging: false,
+      hover: false, // False or a column number starting from 0.
+      columnIndex: null, // Column number starting from 0.
+      startCursorX: null,
+      colWidth: null,
+      nextColWidth: null,
+      columnEl: null,
+      nextColumnEl: null
+    }
   }),
 
   computed: {
@@ -192,6 +241,8 @@ export default {
     classes () {
       return {
         'w-table--mobile': this.isMobile || null,
+        'w-table--resizable-cols': this.resizableColumns || null,
+        'w-table--resizing': this.colResizing.dragging,
         'w-table--fixed-header': this.fixedHeaders
       }
     },
@@ -214,7 +265,8 @@ export default {
   methods: {
     headerClasses (header) {
       return {
-        'w-table__header--sortable': header.sortable !== false,
+        'w-table__header--sortable': header.sortable !== false, // Can also be falsy with `0`.
+        'w-table__header--resizable': !!this.resizableColumns,
         [`text-${header.align || 'left'}`]: true
       }
     },
@@ -296,6 +348,102 @@ export default {
       }
 
       this.$emit('row-click', { item, index })
+    },
+
+    // Attach 1 single event listener on the table rather than 1 on each resizer.
+    onMouseDown (e) {
+      if (e.target.classList.contains('w-table__col-resizer')) {
+        this.colResizing.columnIndex = +e.target.parentNode.cellIndex
+        this.colResizing.startCursorX = e.pageX // x-axis coordinate at drag start.
+
+        // Applying width on colgroup > col works with & without `no-headers`.
+        // So it's better than setting a condition to apply on first row tds in case of no-headers.
+        this.colResizing.columnEl = this.$el.querySelector(`col:nth-child(${this.colResizing.columnIndex + 1})`)
+        this.colResizing.nextColumnEl = this.colResizing.columnEl.nextSibling
+        this.colResizing.colWidth = this.colResizing.columnEl.offsetWidth
+        this.colResizing.nextColWidth = this.colResizing.nextColumnEl.offsetWidth
+
+        // Now that we've grabbed the resizer, bind the mousemove & mouseup events to the whole document.
+        document.addEventListener('mousemove', this.onResizerMouseMove)
+        document.addEventListener('mouseup', this.onResizerMouseUp)
+      }
+    },
+
+    // Attach 1 single event listener on the table rather than 1 on each resizer.
+    onMouseOver ({ target }) {
+      // On col resizer mouseover.
+      if (target.classList.contains('w-table__col-resizer')) {
+        this.colResizing.hover = +target.parentNode.cellIndex
+      }
+    },
+
+    // Attach 1 single event listener on the table rather than 1 on each resizer.
+    onMouseOut ({ target }) {
+      // On col resizer mouseout.
+      if (target.classList.contains('w-table__col-resizer')) this.colResizing.hover = false
+    },
+
+    /**
+     * Notes:
+     * Make sure there is no change of variable that would cause a DOM refresh,
+     * and glitch while dragging.
+     * this.$set(this.headers[columnIndex], 'width', colWidth + deltaX)
+
+     * If using the width attribute with variable (so data-driven) and not `style.width`,
+     * any later change of variable would cause a DOM refresh, and lose the current DOM state
+     * (losing the 2 columns width). So do a direct DOM manipulation using `.style.width`.
+     */
+    onResizerMouseMove (e) {
+      const { startCursorX, columnEl, nextColumnEl, colWidth, nextColWidth } = this.colResizing
+
+      this.colResizing.dragging = true
+      const deltaX = e.pageX - startCursorX
+
+      const maxWidth = colWidth + nextColWidth
+      const newColWidth = colWidth + deltaX
+      const newNextColWidth = nextColWidth - deltaX
+
+      // 1. Apply the change of width.
+      columnEl.style.width = colWidth + deltaX + 'px'
+      nextColumnEl.style.width = nextColWidth - deltaX + 'px'
+
+      // 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) {
+        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) {
+        columnEl.style.width = maxWidth - nextColumnEl.offsetWidth + 'px'
+        nextColumnEl.style.width = nextColumnEl.offsetWidth + 'px'
+      }
+    },
+
+    onResizerMouseUp () {
+      // Remove listeners.
+      document.removeEventListener('mousemove', this.onResizerMouseMove)
+      document.removeEventListener('mouseup', this.onResizerMouseUp)
+
+      // Reset all the variables (better for debugging).
+      // 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)
     }
   },
 
@@ -335,6 +483,8 @@ export default {
 </script>
 
 <style lang="scss">
+$tr-border-top: 1px;
+
 .w-table-wrap {
   position: relative;
   border-radius: $border-radius;
@@ -350,10 +500,23 @@ export default {
   border-collapse: collapse;
   border: none;
 
+  &--resizable-cols {
+    table-layout: fixed; // Allow resizing beyond the cell minimum text width.
+  }
+
+  &--resizing {
+    &, * {cursor: col-resize;}
+
+    user-select: none;
+  }
+
   // Table headers.
   // ------------------------------------------------------
-  &__header {
-    padding: $base-increment;
+  &__header {padding: $base-increment;}
+  &__header--resizable {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   &--fixed-header th {
@@ -386,6 +549,29 @@ export default {
     &--active {opacity: 0.7;}
   }
 
+  // Resizable columns.
+  &__header--resizable {position: relative;}
+  &__col-resizer {
+    position: absolute;
+    right: -5px;
+    top: -$tr-border-top;
+    bottom: 0;
+    width: 10px;
+    cursor: col-resize;
+    z-index: 1;
+
+    &:before {
+      content: '';
+      border-right: $border;
+      position: absolute;
+      left: 50%;
+      top: 0;
+      bottom: 0;
+      transform: translateX(-50%);
+    }
+    &--hover:before, &--active:before {border-right-width: 2px;}
+  }
+
   // Progress bar when loading.
   &__progress-bar:nth-child(odd) {background: none;}
   &__progress-bar td {padding: 0;height: 1px;}
@@ -405,7 +591,7 @@ export default {
 
   // Table body.
   // ------------------------------------------------------
-  tbody tr {border-top: 1px solid rgba(0, 0, 0, 0.06);}
+  tbody tr {border-top: $tr-border-top solid rgba(0, 0, 0, 0.06);}
   // Don't apply built-in bg color if a bg color is already found on a tr.
   tbody tr:nth-child(odd):not(.no-data):not([class*="--bg"]) {background-color: $table-tr-odd-color;}
   tbody .w-table__row:hover:not(.no-data):not([class*="--bg"]) {background-color: $table-tr-hover-color;}
@@ -427,12 +613,23 @@ export default {
   &__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;
+
+    &, & * {
+      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);
     padding: (2 * $base-increment) $base-increment;
   }
 }
 
+// Mobile layout.
 .w-table--mobile {
   thead {display: none;}
   td {display: block;}

package/src/wave-ui/components/{w-tabs.vue → w-tabs/index.vue}

@@ -27,26 +27,30 @@
     .w-tabs__bar-extra(v-if="$slots['tabs-bar-extra']")
       slot(name="tabs-bar-extra")
     .w-tabs__slider(v-if="!noSlider && !card" :class="sliderColor" :style="sliderStyles")
+
   .w-tabs__content-wrap(v-if="tabsItems.length")
     transition(:name="transitionName" :mode="transitionMode")
-      .w-tabs__content(v-if="activeTab" :key="activeTab._index" :class="contentClass")
-        slot(
-          v-if="$slots[`item-content.${activeTab.id || activeTab._index + 1}`]"
-          :name="`item-content.${activeTab.id || activeTab._index + 1}`"
-          :item="getOriginalItem(activeTab)"
-          :index="activeTab._index + 1"
-          :active="activeTab._index === activeTabIndex")
-        slot(
-          v-else
-          name="item-content"
-          :item="getOriginalItem(activeTab)"
-          :index="activeTab._index + 1"
-          :active="activeTab._index === activeTabIndex")
-          div(v-html="activeTab[itemContentKey]")
+      keep-alive
+        //- Keep-alive only works with components, not with DOM nodes.
+        tab-content(:key="activeTab._index" :class="contentClass")
+          slot(
+            v-if="$slots[`item-content.${activeTab.id || activeTab._index + 1}`]"
+            :name="`item-content.${activeTab.id || activeTab._index + 1}`"
+            :item="getOriginalItem(activeTab)"
+            :index="activeTab._index + 1"
+            :active="activeTab._index === activeTabIndex")
+          slot(
+            v-else
+            name="item-content"
+            :item="getOriginalItem(activeTab)"
+            :index="activeTab._index + 1"
+            :active="activeTab._index === activeTabIndex")
+            div(v-html="activeTab[itemContentKey]")
 </template>
 
 <script>
 import { reactive } from 'vue'
+import TabContent from './tab-content.vue'
 
 export default {
   name: 'w-tabs',
@@ -70,6 +74,8 @@ export default {
     card: { type: Boolean }
   },
 
+  components: { TabContent },
+
   emits: ['input', 'update:modelValue', 'focus'],
 
   data: () => ({

package/src/wave-ui/components/w-tabs/tab-content.vue

@@ -0,0 +1,8 @@
+<template lang="pug">
+.w-tabs__content
+  slot
+</template>
+
+<script>
+// Keep-alive only works with components, not with DOM nodes.
+</script>

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/_icons.scss

@@ -1,6 +1,7 @@
 @font-face {
   font-family: 'wave-ui';
-  src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff');
+  // Base64 encoded woff font (https://hellogreg.github.io/woff2base).
+  src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff');
   font-weight: normal;
   font-style: normal;
 }
@@ -41,3 +42,5 @@
 .wi-star:before {content: "\e013";}
 .wi-search:before {content: "\e014";}
 .wi-wave:before {content: "\e015";}
+.wi-file:before {content: "\e016";}
+.wi-spinner:before {content: "\e017";}