wave-ui 1.61.0 → 1.63.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.61.0",
+  "version": "1.63.0",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",

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

@@ -28,6 +28,7 @@ export { default as WProgress } from './w-progress.vue'
 export { default as WRadio } from './w-radio.vue'
 export { default as WRadios } from './w-radios.vue'
 export { default as WRating } from './w-rating.vue'
+export { default as WScrollbar } from './w-scrollbar.vue'
 export { default as WSelect } from './w-select.vue'
 export { default as WSlider } from './w-slider.vue'
 export { default as WSpinner } from './w-spinner.vue'

package/src/wave-ui/components/transitions/w-transition-expand.vue

@@ -27,6 +27,7 @@ export default {
 
   data: () => ({
     el: {
+      savedState: false,
       originalStyles: '',
       width: 0,
       height: 0,
@@ -59,7 +60,7 @@ export default {
     beforeAppear (el) {
       // Only save original state once before a 'clean' transition start.
       // Not when clicking very fast and mixing states order.
-      if (this.cleanTransitionCycle) this.saveOriginalStyles(el)
+      if (this.cleanTransitionCycle) this.saveOriginalInlineStyles(el)
       this.cleanTransitionCycle = false
     },
     appear (el, done) {
@@ -76,7 +77,7 @@ export default {
     beforeEnter (el) {
       // Only save original state once before a 'clean' transition start.
       // Not when clicking very fast and mixing states order.
-      if (this.cleanTransitionCycle) this.saveOriginalStyles(el)
+      if (this.cleanTransitionCycle) this.saveOriginalInlineStyles(el)
       this.cleanTransitionCycle = false
     },
     enter (el, done) {
@@ -91,6 +92,9 @@ export default {
       this.cleanTransitionCycle = false
     },
     beforeLeave (el) {
+      // When starting with an open item.
+      if (!this.el.savedState) this.saveComputedStyles(el)
+
       this.beforeHide(el)
       this.cleanTransitionCycle = false
     },
@@ -102,6 +106,9 @@ export default {
     afterLeave (el) {
       this.applyOriginalStyles(el)
       this.cleanTransitionCycle = true
+      // Reset for recomputing the next time we start the transition from an open state.
+      // In case there might be some changed styles from last closing.
+      this.el.savedState = false
     },
 
     applyHideStyles (el) {
@@ -151,11 +158,25 @@ export default {
     applyOriginalStyles (el) {
       el.style.cssText = this.el.originalStyles
     },
-    saveOriginalStyles (el) {
-      // Keep the original styles to restore them after transition.
+    saveOriginalInlineStyles (el) {
+      // Keep any original inline styles to restore them after transition.
       this.el.originalStyles = el.style.cssText
     },
     show (el, done) {
+      this.saveComputedStyles(el)
+      this.applyHideStyles(el)
+
+      setTimeout(() => this.applyShowStyles(el), 20)
+      setTimeout(done, this.duration)
+    },
+    beforeHide (el) {
+      this.applyShowStyles(el)
+    },
+    hide (el, done) {
+      setTimeout(() => this.applyHideStyles(el), 20)
+      setTimeout(done, this.duration)
+    },
+    saveComputedStyles (el) {
       const computedStyles = window.getComputedStyle(el, null)
 
       // Save the width & height then set them to 0 as the animation starting point.
@@ -177,17 +198,7 @@ export default {
         this.el.borderTopWidth = computedStyles.getPropertyValue('borderTopWidth')
         this.el.borderBottomWidth = computedStyles.getPropertyValue('borderBottomWidth')
       }
-      this.applyHideStyles(el)
-
-      setTimeout(() => this.applyShowStyles(el), 20)
-      setTimeout(done, this.duration)
-    },
-    beforeHide (el) {
-      this.applyShowStyles(el)
-    },
-    hide (el, done) {
-      setTimeout(() => this.applyHideStyles(el), 20)
-      setTimeout(done, this.duration)
+      this.el.savedState = true
     }
   }
 }

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

@@ -2,7 +2,9 @@
 .w-confirm
   w-menu(v-model="showPopup" v-bind="wMenuProps")
     template(#activator="{ on }")
-      w-button.w-confirm__button(v-on="{ ...$listeners, ...on }" v-bind="buttonProps")
+      w-button.w-confirm__button(
+        v-on="{ ...$listeners, ...(disablePrompt ? {} : on) }"
+        v-bind="buttonProps")
         slot
     w-flex(:column="!inline" align-center)
       div
@@ -32,6 +34,7 @@ export default {
     bgColor: { type: String },
     color: { type: String },
     icon: { type: String },
+    disablePrompt: { type: Boolean }, // If true, the confirm button acts like a simple w-button.
     mainButton: { type: Object }, // Allow passing down an object of props to the w-button component.
     question: { type: String, default: 'Are you sure?' },
 

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

@@ -302,7 +302,7 @@ export default {
         // eslint-disable-next-line vue/custom-event-name-casing
         else if (e.keyCode === 27) this.$emit('keydown:escape')
         // On arrow keys press, navigate to prev/next item.
-        else if (this.arrowsNavigation) {
+        else if (this.arrowsNavigation && [38, 40].includes(e.keyCode)) {
           e.preventDefault()
           if (e.keyCode === 38) this.focusPrevNextItem(li._index, false)
           if (e.keyCode === 40) this.focusPrevNextItem(li._index, true)
@@ -407,7 +407,10 @@ export default {
       if (!this.isMultipleSelect) this.listItems.forEach(item => (item._selected = false))
 
       this.checkSelection(selection) // Create an array with the selected values.
-        .forEach(val => (this.listItems.find(item => item._value === val)._selected = true))
+        .forEach(val => {
+          const foundItem = this.listItems.find(item => item._value === val)
+          if (foundItem) foundItem._selected = true
+        })
     }
   },
 

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

@@ -63,12 +63,12 @@ export default {
 .w-notification-manager {
   position: fixed;
   top: 0;
-  bottom: 0;
+  max-height: 100%;
   right: 0;
   z-index: 1000;
-  pointer-events: none;
   width: 280px;
   overflow-x: hidden;
+  overflow-y: auto;
 
   &--left {right: auto;left: 0;}
 
@@ -79,7 +79,6 @@ export default {
     right: 0;
     margin: 8px;
     flex-grow: 1;
-    pointer-events: all;
   }
 }
 </style>

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

@@ -0,0 +1,24 @@
+<template lang="pug">
+.w-scrollbar
+</template>
+
+<script>
+export default {
+  name: 'w-scrollbar',
+  props: {
+
+  },
+
+  emits: [],
+
+  data: () => ({
+
+  })
+}
+</script>
+
+<style lang="scss">
+.w-scrollbar {
+
+}
+</style>

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

@@ -60,7 +60,7 @@ component(
           v-for="(val, i) in (inputValue.length ? inputValue : [{}])"
           :key="i"
           type="hidden"
-          :value="val.value || ''"
+          :value="val.value === undefined ? '' : val.value.toString()"
           :name="inputName + (multiple ? '[]' : '')")
         template(v-if="labelPosition === 'inside' && showLabelInside")
           label.w-select__label.w-select__label--inside.w-form-el-shakable(
@@ -299,7 +299,7 @@ export default {
     // Also accept objects if returnObject is true.
     // In any case, always end up with an array.
     checkSelection (items) {
-      items = Array.isArray(items) ? items : (items ? [items] : [])
+      items = Array.isArray(items) ? items : (items !== undefined ? [items] : [])
       // `selectItems` items always have a value.
       const allValues = this.selectItems.map(item => item.value)
 
@@ -424,8 +424,10 @@ export default {
   &__selection {
     width: 100%;
     height: 100%;
-    font-size: inherit;
+    min-height: inherit;
+    font: inherit;
     color: inherit;
+    text-align: inherit;
     background: none;
     border: none;
     outline: none;
@@ -522,12 +524,15 @@ export default {
     position: absolute;
     top: 50%;
     left: 0;
-    // Use margin instead of padding as the scale transformation bellow decreases the real padding
+    right: 0;
+    // Use margin instead of padding as the scale transformation below decreases the real padding
     // size and misaligns the label.
     margin-left: 2 * $base-increment;
     transform: translateY(-50%);
     pointer-events: none;
 
+    .w-select--inner-icon-right & {padding-right: 22px;}
+
     .w-select--no-padding & {
       left: 0;
       margin-left: 0;

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

@@ -38,7 +38,7 @@ component(
         v-if="loading"
         circle
         color="inherit"
-        v-bind="typeof loading === 'number' ? { 'model-value': loading } : {}")
+        v-bind="typeof loading === 'number' ? { value: loading } : {}")
       slot(v-else name="thumb")
   template(v-if="hasLabel && !labelOnLeft")
     label.w-switch__label.w-switch__label--right.w-form-el-shakable(

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

@@ -128,12 +128,34 @@
         slot(name="extra-row")
 
     //- Table footer.
-    tfoot.w-table__footer(v-if="$slots.footer || $slots['footer-row']")
+    tfoot.w-table__footer(v-if="$slots.footer || $slots['footer-row'] || pagination")
       slot(v-if="$slots['footer-row']" name="footer-row")
-      tr.w-table__row(v-else)
+      tr.w-table__row(v-else-if="$slots.footer")
         td.w-table__cell(:colspan="headers.length")
           slot(name="footer")
-      //- .pagination
+      tr.w-table__row.w-table__pagination-wrap(v-if="pagination && paginationConfig")
+        td.w-table__cell(:colspan="headers.length")
+          .w-table__pagination
+            w-select.pagination-number.pagination-number--items-per-page(
+              v-if="paginationConfig.itemsPerPageOptions"
+              v-model="paginationConfig.itemsPerPage"
+              :items="paginationConfig.itemsPerPageOptions"
+              label-position="left"
+              label="Items per page"
+              label-color="inherit")
+            span.pagination-number.pagination-number--results.
+              {{ paginationConfig.start }}-{{ paginationConfig.end }} of {{ paginationConfig.total }}
+            .pagination-arrows
+              w-button.pagination-arrow.pagination-arrow--prev(
+                @click="paginationConfig.page--"
+                icon="wi-chevron-left"
+                text
+                lg)
+              w-button.pagination-arrow.pagination-arrow--next(
+                @click="paginationConfig.page++"
+                icon="wi-chevron-right"
+                text
+                lg)
 </template>
 
 <script>
@@ -189,13 +211,28 @@ export default {
 
     forceSelection: { type: Boolean },
 
-    // Useful to select or expand a row, and even after a filter, the same row will stay selected or exanded.
+    // Useful to select or expand a row, and even after a filter, the same row will stay selected or expanded.
     uidKey: { type: String, default: 'id' },
 
     filter: { type: Function },
     sortFunction: { type: Function },
     mobileBreakpoint: { type: Number, default: 0 },
-    resizableColumns: { type: Boolean }
+    resizableColumns: { type: Boolean },
+
+    pagination: {
+      type: [Boolean, Object, String],
+      validator: object => {
+        if (!object) return true // Accept any falsy value.
+        else if (typeof object === 'object' && (!object.itemsPerPage || (object.page && isNaN(object.page)))) {
+          consoleError(
+            'Wrong pagination config received in the w-table\'s `pagination` prop (received: `' + JSON.stringify(object) + '`). ' +
+            '\nExpected object: { itemsPerPage: Integer, page: Integer } or { itemsPerPage: Integer, start: Integer }.'
+          )
+          return false
+        }
+        return true
+      }
+    }
   },
 
   emits: [
@@ -222,7 +259,8 @@ export default {
       nextColWidth: null,
       columnEl: null,
       nextColumnEl: null
-    }
+    },
+    paginationConfig: {}
   }),
 
   computed: {
@@ -490,6 +528,20 @@ export default {
         this.colResizing.colWidth = null
         this.colResizing.nextColWidth = null
       }, 0)
+    },
+
+    updatePaginationConfig () {
+      const itemsPerPage = this.pagination?.itemsPerPage || 10
+      const total = this.pagination?.total || this.items.length
+      const page = this.pagination?.page || 1
+      this.paginationConfig = {
+        itemsPerPage,
+        itemsPerPageOptions: this.pagination?.itemsPerPageOptions || [{ label: '10', value: 10 }, { label: '100', value: 100 }, { label: 'All', value: 0 }],
+        page,
+        start: this.pagination?.start || 1,
+        end: total >= (itemsPerPage * page) ? (itemsPerPage * page) : (total % (itemsPerPage * page)),
+        total
+      }
     }
   },
 
@@ -499,6 +551,8 @@ export default {
 
     if ((this.expandedRows || []).length) this.expandedRowsInternal = this.expandedRows
     if ((this.selectedRows || []).length) this.selectedRowsInternal = this.selectedRows
+
+    if (this.pagination) this.updatePaginationConfig()
   },
 
   watch: {
@@ -739,14 +793,45 @@ $tr-border-top: 1px;
       border-bottom: $border;
     }
   }
+
+  &__pagination {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-top: $base-increment;
+    padding-bottom: $base-increment;
+
+    .pagination-number--items-per-page {
+      margin-right: 6 * $base-increment;
+      flex-grow: 0;
+      text-align: right;
+    }
+    .pagination-number--of {
+      margin-left: $base-increment;
+      margin-right: $base-increment;
+    }
+    .w-select__selection {max-width: 60px;}
+
+    .pagination-arrows {
+      margin-left: 6 * $base-increment;
+    }
+  }
 }
 
 // Mobile layout.
 .w-table--mobile {
+  display: flex;
+
   thead {display: none;}
-  td {display: block;}
+  tbody {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
   tr {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
     padding-top: $base-increment;
     padding-bottom: $base-increment;
   }

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

@@ -4,22 +4,27 @@ ul.w-tree(:class="classes")
     v-for="(item, i) in currentDepthItems"
     :key="i"
     :class="itemClasses(item)")
-    .w-tree__item-label(
-      @click="!disabled && onLabelClick(item, $event)"
-      @keydown="!disabled && onLabelKeydown(item, $event)"
-      :tabindex="!disabled && (item.children || item.branch || selectable) && !(unexpandableEmpty && !item.children) ? 0 : null")
+    //- The keys `route` & `disabled` are always present in any currentDepthItems.
+    component.w-tree__item-label(
+      :is="!disabled && !item.disabled && item.route ? (!$router || hasExternalLink(item) ? 'a' : 'router-link') : 'div'"
+      v-bind="item.route && { [!$router || hasExternalLink(item) ? 'href' : 'to']: item.route }"
+      @click="!disabled && !item.disabled && onLabelClick(item, $event)"
+      @keydown="!disabled && !item.disabled && onLabelKeydown(item, $event)"
+      :tabindex="!disabled && !item.disabled && (item.children || item.branch || selectable) && !(unexpandableEmpty && !item.children) ? 0 : null")
+      //- @click.stop to not follow link if item is a link.
       w-button.w-tree__item-expand(
         v-if="(item.children || item.branch) && ((expandOpenIcon && item.open) || expandIcon) && !(unexpandableEmpty && !item.children)"
+        @click.stop="!disabled && !item.disabled && onLabelClick(item, $event)"
         color="inherit"
         :icon="(item.open && expandOpenIcon) || expandIcon"
         :icon-props="{ rotate90a: !item.open }"
         :tabindex="-1"
-        :disabled="disabled"
+        :disabled="disabled || item.disabled"
         text
         sm)
-      slot(name="item-label" :item="item.originalItem" :depth="depth" :open="item.open")
-        w-icon(v-if="itemIcon(item)" class="w-tree__item-icon") {{ itemIcon(item) }}
-        span {{ item.label }}
+      slot(name="item" :item="item.originalItem" :depth="depth" :open="item.open")
+        w-icon(v-if="itemIcon(item)" class="w-tree__item-icon" :color="item.originalItem[itemIconColorKey] || iconColor") {{ itemIcon(item) }}
+        span(v-html="item.label")
         span.ml1(v-if="counts && (item.children || item.branch)").
           ({{ item.originalItem.children ? item.originalItem.children.length : 0 }})
     component(
@@ -39,16 +44,15 @@ ul.w-tree(:class="classes")
         @click="$emit('click', $event)"
         @select="$emit('select', $event)"
         @input="$emit('input', $event)")
-        template(#item-label="{ item, depth, open }")
-          slot(name="item-label" :item="item" :depth="depth" :open="open")
+        template(#item="{ item, depth, open }")
+          slot(name="item" :item="item" :depth="depth" :open="open")
 </template>
 
 <script>
+import { consoleWarn } from '../utils/console'
 /**
- * @todo things to support:
- * - items routes
- * - icon per item
- * - left border?
+ * @todo:
+ * - option to add a left border.
  **/
 
 export default {
@@ -70,8 +74,14 @@ export default {
     noTransition: { type: Boolean },
     selectable: { type: Boolean },
     // By default it only reacts to items count change (added or deleted items) not property of items change.
-    depthReactivity: { type: Boolean },
-    counts: { type: Boolean }
+    deepReactivity: { type: Boolean },
+    counts: { type: Boolean },
+    itemIconKey: { type: String, default: 'icon' }, // Support a different icon per item.
+    iconColor: { type: String }, // Applies a color on all the label item icons.
+    itemIconColorKey: { type: String, default: 'iconColor' }, // Applies a specific color on each label item icons.
+    itemRouteKey: { type: String, default: 'route' }, // Uses a router link if the item has the `route` key.
+    itemDisabledKey: { type: String, default: 'disabled' }, // Disables the item click and selection.
+    itemOpenKey: { type: String, default: 'open' } // Open the item by default.
   },
 
   emits: ['input', 'before-open', 'open', 'before-close', 'close', 'click', 'select'],
@@ -97,6 +107,12 @@ export default {
     updateCurrentDepthTree (items, oldItems = []) {
       this.currentDepthItems = []
 
+      if (!Array.isArray(items) && typeof items !== 'object') {
+        return consoleWarn(`[w-tree] the tree items must be of type array or object, ${typeof items} received.`, items)
+      }
+
+      if (!Array.isArray(items)) items = [items]
+
       items.forEach((item, i) => {
         this.currentDepthItems.push({
           originalItem: item, // Store the original item to return it on event emits.
@@ -104,8 +120,10 @@ export default {
           label: item.label,
           children: !!item.children, // The children tree remains available in originalItem.
           branch: item.branch,
+          route: item[this.itemRouteKey],
+          disabled: item[this.itemDisabledKey],
           depth: this.depth,
-          open: oldItems[i]?.open || false
+          open: !!(oldItems[i]?.open || this.expandAll || item[this.itemOpenKey])
         })
       })
     },
@@ -132,6 +150,9 @@ export default {
     },
 
     onLabelClick (item, e) {
+      const route = item[this.itemRouteKey]
+      if (route && this.$router && !this.hasExternalLink(item)) e.preventDefault()
+
       this.$emit('click', { item: item.originalItem, depth: this.depth, e })
       if (item.children || (item.branch && !this.unexpandableEmpty)) this.expandDepth(item)
 
@@ -183,6 +204,7 @@ export default {
      * @param {String} selector any valid DOM selector to match the siblings.
      */
     getPreviousSibling (node, selector) {
+      // eslint-disable-next-line no-unmodified-loop-condition
       while (selector && (node = node.previousElementSibling)) {
         if (node.matches(selector)) return node
       }
@@ -196,6 +218,7 @@ export default {
      * @param {String} selector any valid DOM selector to match the siblings.
      */
     getNextSibling (node, selector) {
+      // eslint-disable-next-line no-unmodified-loop-condition
       while (selector && (node = node.nextElementSibling)) {
         if (node.matches(selector)) return node
       }
@@ -208,15 +231,20 @@ export default {
 
     itemIcon (item) {
       return (
-        item.originalItem.icon ||
+        item.originalItem[this.itemIconKey] ||
         (!item.children && !item.branch && this.leafIcon) ||
         ((item.children || item.branch) && ((item.open && this.branchOpenIcon) || this.branchIcon))
       )
     },
 
+    hasExternalLink (item) {
+      return /^(https?:)?\/\/|mailto:|tel:/.test(item[this.itemRouteKey])
+    },
+
     itemClasses (item) {
       return {
         [item.children || item.branch ? 'w-tree__item--branch' : 'w-tree__item--leaf']: true,
+        'w-tree__item--disabled': item[this.itemDisabledKey],
         'w-tree__item--empty': item.branch && !item.children,
         'w-tree__item--unexpandable': item.branch && !item.children && this.unexpandableEmpty
       }
@@ -230,7 +258,7 @@ export default {
       // The open property of each item has to be retained from this.currentDepthItems in order to stay
       // in the same state after DOM repaint.
       items => this.updateCurrentDepthTree(items, this.currentDepthItems),
-      { deep: !!this.depthReactivity } // Deep watching is more resource consuming. Only enable on user demand.
+      { deep: !!this.deepReactivity } // Deep watching is more resource consuming. Only enable on user demand.
     )
   },
 
@@ -259,6 +287,7 @@ $expand-icon-size: 20px;
     position: relative;
     display: inline-flex;
     align-items: center;
+    user-select: none;
 
     &:before {
       content: '';
@@ -269,16 +298,24 @@ $expand-icon-size: 20px;
       right: - $base-increment - 2px;
       border-radius: $border-radius;
     }
+    &:hover:before {background-color: rgba($primary, 0.05);}
     &:focus:before {background-color: rgba($primary, 0.1);}
   }
   &__item--leaf &__item-label:before {
     left: - $base-increment;
     right: - $base-increment;
   }
+  &__item--disabled &__item-label {opacity: 0.5;}
+  &__item--disabled &__item-label:before {display: none;}
 
   &__item-expand {margin-right: 2px;}
 
   &__item--branch > &__item-label {cursor: pointer;}
+  &__item--disabled > &__item-label {
+    color: $disabled-color;
+    cursor: not-allowed;
+    -webkit-tap-highlight-color: transparent;
+  }
   &__item--unexpandable > &__item-label {
     margin-left: $expand-icon-size + 2px;
     cursor: auto;