wave-ui 2.26.0 → 2.29.0

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

@@ -1,11 +1,10 @@
 <template lang="pug">
-.w-menu-wrap(ref="wrapper")
+.w-menu-wrap
   slot(name="activator" :on="activatorEventHandlers")
-  transition(:name="transitionName")
+  transition(:name="transitionName" appear)
     .w-menu(
-      v-if="custom"
+      v-if="custom && menuVisible"
       ref="menu"
-      v-show="showMenu"
       @click="hideOnMenuClick && closeMenu(true)"
       @mouseenter="showOnHover && (hoveringMenu = true)"
       @mouseleave="showOnHover && ((hoveringMenu = false), closeMenu())"
@@ -13,15 +12,14 @@
       :style="styles")
       slot
     w-card.w-menu(
-      v-else
+      v-else-if="menuVisible"
       ref="menu"
-      v-show="showMenu"
       @click.native="hideOnMenuClick && closeMenu(true)"
       @mouseenter.native="showOnHover && (hoveringMenu = true)"
       @mouseleave.native="showOnHover && ((hoveringMenu = false), closeMenu())"
       :tile="tile"
-      :title-class="titleClass"
-      :content-class="contentClass"
+      :title-class="titleClasses"
+      :content-class="contentClasses"
       :shadow="shadow"
       :no-border="noBorder"
       :class="classes"
@@ -34,12 +32,12 @@
   w-overlay(
     v-if="overlay"
     ref="overlay"
-    :model-value="showMenu"
+    :model-value="menuVisible"
     :persistent="persistent"
-    :class="overlayClass || null"
+    :class="overlayClasses"
     v-bind="overlayProps"
     :z-index="(zIndex || 200) - 1"
-    @update:model-value="showMenu = false")
+    @update:model-value="menuVisible = false")
 </template>
 
 <script>
@@ -52,6 +50,7 @@
  * and move the menu 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.
@@ -71,10 +70,11 @@ export default {
     round: { type: Boolean },
     noBorder: { type: Boolean },
     transition: { type: String },
-    menuClass: { type: String },
-    titleClass: { type: String },
-    contentClass: { type: String },
+    menuClass: { type: [String, Object, Array] },
+    titleClass: { type: [String, Object, Array] },
+    contentClass: { type: [String, Object, Array] },
     // Position.
+    arrow: { type: Boolean }, // The small triangle pointing toward the activator.
     detachTo: { type: [String, Boolean, Object] },
     fixed: { type: Boolean },
     top: { type: Boolean },
@@ -88,7 +88,7 @@ export default {
     zIndex: { type: [Number, String, Boolean] },
     minWidth: { type: [Number, String] }, // can be like: `40`, `5em`, `activator`.
     overlay: { type: Boolean },
-    overlayClass: { type: String },
+    overlayClass: { type: [String, Object, Array] },
     overlayProps: { type: Object }, // Allow passing down an object of props to the w-overlay component.
     persistent: { type: Boolean },
     noPosition: { type: Boolean }
@@ -97,7 +97,7 @@ export default {
   emits: ['input', 'update:modelValue', 'open', 'close'],
 
   data: () => ({
-    showMenu: false,
+    menuVisible: false,
     hoveringActivator: false,
     hoveringMenu: false,
     // The menu computed top & left coordinates.
@@ -117,25 +117,29 @@ export default {
     },
 
     // DOM element to attach menu 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-menu `detach-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 menu.
+    // ! \ This computed uses the DOM - NO SSR (only trigger from beforeMount and later).
     menuParentEl () {
       return this.detachToTarget
     },
@@ -165,27 +169,46 @@ export default {
       )
     },
 
+    menuClasses () {
+      return objectifyClasses(this.menuClass)
+    },
+
+    titleClasses () {
+      return objectifyClasses(this.titleClass)
+    },
+
+    contentClasses () {
+      return objectifyClasses(this.contentClass)
+    },
+
+    overlayClasses () {
+      return objectifyClasses(this.overlayClass)
+    },
+
     classes () {
       return {
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
-        [this.menuClass]: this.menuClass,
-        [`w-menu--${this.position}`]: true,
-        [`w-menu--align-${this.alignment}`]: this.alignment,
+        ...this.menuClasses,
+        [`w-menu--${this.position}`]: !this.noPosition,
+        [`w-menu--align-${this.alignment}`]: !this.noPosition && this.alignment,
         'w-menu--tile': this.tile,
         'w-menu--card': !this.custom,
         'w-menu--round': this.round,
+        'w-menu--arrow': this.arrow,
         'w-menu--shadow': this.shadow,
         'w-menu--fixed': this.fixed
       }
     },
 
+    // The floating menu styles.
     styles () {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || (this.overlay && !this.zIndex && 200) || null,
         top: (this.menuCoordinates.top && `${~~this.menuCoordinates.top}px`) || null,
         left: (this.menuCoordinates.left && `${~~this.menuCoordinates.left}px`) || null,
-        minWidth: (this.minWidth && this.menuMinWidth) || null
+        minWidth: (this.minWidth && this.menuMinWidth) || null,
+        '--w-menu-bg-color': this.arrow && this.$waveui.colors[this.bgColor || 'white']
       }
     },
 
@@ -208,8 +231,10 @@ export default {
             }, 10)
           }
         }
-
-        if ('ontouchstart' in window) handlers.click = this.toggleMenu
+        // Check the window exists: SSR-proof.
+        if (typeof window !== 'undefined' && 'ontouchstart' in window) {
+          handlers.click = this.toggleMenu
+        }
       }
       else handlers = { click: this.toggleMenu }
       return handlers
@@ -217,8 +242,9 @@ export default {
   },
 
   methods: {
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     toggleMenu (e) {
-      let shouldShowMenu = this.showMenu
+      let shouldShowMenu = this.menuVisible
       if ('ontouchstart' in window && this.showOnHover && e.type === 'click') {
         shouldShowMenu = !shouldShowMenu
       }
@@ -234,11 +260,21 @@ export default {
 
       this.timeoutId = clearTimeout(this.timeoutId)
 
-      if (shouldShowMenu) this.openMenu(e)
+      if (shouldShowMenu) {
+        this.$emit('update:modelValue', (this.menuVisible = true))
+        this.$emit('input', true)
+        this.$emit('open')
+
+        this.openMenu(e)
+      }
       else this.closeMenu()
     },
 
-    openMenu (e) {
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
+    async openMenu (e) {
+      this.menuVisible = true
+      await this.insertMenu()
+
       if (this.minWidth === 'activator') this.activatorWidth = this.activatorEl.offsetWidth
 
       if (!this.noPosition) this.computeMenuPosition(e)
@@ -247,10 +283,10 @@ export default {
       // if we don't postpone the Menu apparition it will start transition from a visible menu and
       // thus will not transition.
       this.timeoutId = setTimeout(() => {
-        this.$emit('update:modelValue', (this.showMenu = true))
+        this.$emit('update:modelValue', true)
         this.$emit('input', true)
         this.$emit('open')
-      }, 10)
+      }, 0)
 
       if (!this.persistent) document.addEventListener('mousedown', this.onOutsideMousedown)
       if (!this.noPosition) window.addEventListener('resize', this.onResize)
@@ -261,6 +297,7 @@ export default {
      * - click of activator
      * - hover outside if showOnHover
      * - click inside menu if hideOnMenuClick.
+     * / ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
      *
      * @param {Boolean} force when showOnHover is set to true, hovering menu should keep it open.
      *                        But if hideOnMenuClick is also set to true, this should force close
@@ -269,14 +306,14 @@ export default {
     async closeMenu (force = false) {
       // Might be already closed.
       // E.g. showOnHover & hideOnMenuClick: on click, force hide then mouseleave is also firing.
-      if (!this.showMenu) return
+      if (!this.menuVisible) return
 
       if (this.showOnHover && !force) {
         await new Promise(resolve => setTimeout(resolve, 10))
         if (this.showOnHover && (this.hoveringMenu || this.hoveringActivator)) return
       }
 
-      this.$emit('update:modelValue', (this.showMenu = false))
+      this.$emit('update:modelValue', (this.menuVisible = false))
       this.$emit('input', false)
       this.$emit('close')
       // Remove the mousedown listener if the menu got closed without a mousedown outside of the menu.
@@ -284,9 +321,10 @@ export default {
       window.removeEventListener('resize', this.onResize)
     },
 
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     onOutsideMousedown (e) {
       if (!this.menuEl.contains(e.target) && !this.activatorEl.contains(e.target)) {
-        this.$emit('update:modelValue', (this.showMenu = false))
+        this.$emit('update:modelValue', (this.menuVisible = false))
         this.$emit('input', false)
         this.$emit('close')
         document.removeEventListener('mousedown', this.onOutsideMousedown)
@@ -299,6 +337,7 @@ export default {
       this.computeMenuPosition()
     },
 
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     getCoordinates (e) {
       // Get the activator coordinates relative to window.
       const { top, left, width, height } = (e ? e.target : this.activatorEl).getBoundingClientRect()
@@ -318,6 +357,7 @@ export default {
       return coords
     },
 
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     computeMenuPosition (e) {
       // Get the activator coordinates.
       let { top, left, width, height } = this.getCoordinates(e)
@@ -401,49 +441,53 @@ export default {
       this.menuEl.style.visibility = null
 
       // The menu coordinates are also recalculated while resizing window with open menu: keep the menu visible.
-      if (!this.showMenu) this.menuEl.style.display = 'none'
+      if (!this.menuVisible) this.menuEl.style.display = 'none'
 
       this.menuCoordinates = { top, left }
     },
 
     insertMenu () {
-      const wrapper = this.$refs.wrapper
-      this.menuEl = this.$refs.menu.$el || this.$refs.menu
-      // Unwrap the activator element.
-      wrapper.parentNode.insertBefore(this.activatorEl, wrapper)
-
-      // Unwrap the overlay.
-      if (this.overlay) wrapper.parentNode.insertBefore(this.overlayEl, wrapper)
-
-      // Move the menu elsewhere in the DOM.
-      // wrapper.parentNode.insertBefore(this.menuEl, wrapper)
-      this.detachToTarget.appendChild(this.menuEl)
+      return new Promise(resolve => {
+        this.$nextTick(() => {
+          this.menuEl = this.$refs.menu?.$el || this.$refs.menu
+
+          // Move the menu elsewhere in the DOM.
+          // wrapper.parentNode.insertBefore(this.menuEl, wrapper)
+          this.detachToTarget.appendChild(this.menuEl)
+          resolve()
+        })
+      })
     },
 
     removeMenu () {
-      // el.remove() doesn't work on IE11.
-      if (this.menuEl && this.menuEl.parentNode) this.menuEl.parentNode.removeChild(this.menuEl)
+      if (this.menuEl && this.menuEl.parentNode) this.menuEl.remove()
     }
   },
 
   mounted () {
-    this.activatorEl = this.$refs.wrapper.firstElementChild
-    this.overlayEl = this.overlay ? this.$refs.overlay.$el : null
-    this.insertMenu()
+    const wrapper = this.$el
+    this.activatorEl = wrapper.firstElementChild
+    // Unwrap the activator element.
+    wrapper.parentNode.insertBefore(this.activatorEl, wrapper)
+
+    // Unwrap the overlay.
+    if (this.overlay) {
+      this.overlayEl = this.$refs.overlay?.$el
+      wrapper.parentNode.insertBefore(this.overlayEl, wrapper)
+    }
 
     if (this.modelValue) this.toggleMenu({ type: 'click', target: this.activatorEl })
   },
 
   beforeUnmount () {
     this.removeMenu()
-    // el.remove() doesn't work on IE11.
-    if (this.overlay && this.overlayEl.parentNode) this.overlayEl.parentNode.removeChild(this.overlayEl)
-    if (this.activatorEl && this.activatorEl.parentNode) this.activatorEl.parentNode.removeChild(this.activatorEl)
+    if (this.overlay && this.overlayEl.parentNode) this.overlayEl.remove()
+    if (this.activatorEl && this.activatorEl.parentNode) this.activatorEl.remove()
   },
 
   watch: {
     modelValue (bool) {
-      if (!!bool !== this.showMenu) this.toggleMenu({ type: 'click', target: this.activatorEl })
+      if (!!bool !== this.menuVisible) this.toggleMenu({ type: 'click', target: this.activatorEl })
     },
     detachTo () {
       this.removeMenu()
@@ -473,5 +517,14 @@ export default {
   &--bottom {margin-top: 3 * $base-increment;}
   &--left {margin-left: -3 * $base-increment;}
   &--right {margin-left: 3 * $base-increment;}
+
+  &--arrow {
+    &.w-menu--top {margin-top: -4 * $base-increment;}
+    &.w-menu--bottom {margin-top: 4 * $base-increment;}
+    &.w-menu--left {margin-left: -4 * $base-increment;}
+    &.w-menu--right {margin-left: 4 * $base-increment;}
+
+    @include triangle(var(--w-menu-bg-color), '.w-menu', 9px);
+  }
 }
 </style>

package/src/wave-ui/components/w-notification-manager.vue

@@ -62,7 +62,7 @@ export default {
   z-index: 1000;
   pointer-events: none;
   width: 280px;
-  overflow: auto;
+  overflow-x: hidden;
 
   &--left {right: auto;left: 0;}
 

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

@@ -5,7 +5,7 @@
     @mousedown="onMouseDown"
     @mouseover="onMouseOver"
     @mouseout="onMouseOut")
-    colgroup
+    colgroup(ref="colgroup")
       col.w-table__col(
         v-for="(header, i) in headers"
         :key="i"
@@ -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'"
@@ -44,7 +44,7 @@
           .w-table__loading-text
             slot(name="loading") Loading...
       //- No data.
-      tr.no-data(v-if="!tableItems.length")
+      tr.no-data(v-else-if="!tableItems.length")
         td.w-table__cell.text-center(:colspan="headers.length")
           slot(name="no-data") No data to show.
 
@@ -58,12 +58,12 @@
             :item="item"
             :index="i + 1"
             :select="() => doSelectRow(item, i)"
-            :classes="{ 'w-table__row': true, 'w-table__row--selected': selectedRowsByUid[item._uid] !== undefined, 'w-table__row--has-expanded': expandedRowsByUid[item._uid] !== undefined }")
+            :classes="{ 'w-table__row': true, 'w-table__row--selected': selectedRowsByUid[item._uid] !== undefined, 'w-table__row--expanded': expandedRowsByUid[item._uid] !== undefined }")
 
           tr.w-table__row(
             v-else
             @click="doSelectRow(item, i)"
-            :class="{ 'w-table__row--selected': selectedRowsByUid[item._uid] !== undefined, 'w-table__row--has-expanded': expandedRowsByUid[item._uid] !== undefined }")
+            :class="{ 'w-table__row--selected': selectedRowsByUid[item._uid] !== undefined, 'w-table__row--expanded': expandedRowsByUid[item._uid] !== undefined }")
             template(v-for="(header, j) in headers")
               td.w-table__cell(
                 v-if="$slots[`item-cell.${header.key}`] || $slots[`item-cell.${j + 1}`] || $slots['item-cell']"
@@ -106,13 +106,14 @@
                   :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]")
+          tr.w-table__row.w-table__row--expansion(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")
-              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 }")
+              w-transition-expand(y)
+                div(v-if="expandedRowsByUid[item._uid]")
+                  slot(name="row-expansion" :item="item" :index="i + 1")
+                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 === j }")
 </template>
 
 <script>
@@ -122,6 +123,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: {
@@ -171,7 +175,7 @@ export default {
     resizableColumns: { type: Boolean }
   },
 
-  emits: ['row-select', 'row-expand', 'row-click', 'update:sort', 'update:selected-rows', 'update:expanded-rows'],
+  emits: ['row-select', 'row-expand', 'row-click', 'update:sort', 'update:selected-rows', 'update:expanded-rows', 'column-resize'],
 
   data: () => ({
     activeSorting: [],
@@ -199,8 +203,7 @@ export default {
     },
 
     filteredItems () {
-      if (typeof this.filter === 'function') return this.tableItems.filter(this.filter)
-      return this.tableItems
+      return typeof this.filter === 'function' ? this.tableItems.filter(this.filter) : this.tableItems
     },
 
     sortedItems () {
@@ -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,28 @@ 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(() => {
+        // On Mouse up, emit an event containing all the new widths of the columns.
+        const widths = [...this.$refs.colgroup.childNodes].map(column => column.style?.width || column.offsetWidth)
+        this.$emit('column-resize', { index: this.colResizing.columnIndex, widths })
+
+        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 +504,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 +516,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 +617,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-tabs/index.vue

@@ -170,7 +170,8 @@ export default {
     // Updates the slider position.
     updateSlider (domLookup = true) {
       if (domLookup) {
-        this.activeTabEl = this.$refs['tabs-bar'].querySelector('.w-tabs__bar-item--active')
+        const ref = this.$refs['tabs-bar']
+        this.activeTabEl = ref && ref.querySelector('.w-tabs__bar-item--active')
       }
 
       if (!this.fillBar && this.activeTabEl) {

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

@@ -116,7 +116,7 @@ export default {
       return listeners
     },
     hasValue () {
-      return this.inputValue
+      return this.inputValue || this.inputValue === 0
     },
     hasLabel () {
       return this.label || this.$slots.default