wave-ui 1.61.0 → 1.62.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.61.0",
+  "version": "1.62.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/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)

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;
+    right: 0;
     // Use margin instead of padding as the scale transformation bellow 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,6 +793,29 @@ $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.

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

@@ -18,7 +18,7 @@ ul.w-tree(:class="classes")
         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) }}
+        w-icon(v-if="itemIcon(item)" class="w-tree__item-icon" :color="item.originalItem[itemIconColorKey] || iconColor") {{ itemIcon(item) }}
         span {{ item.label }}
         span.ml1(v-if="counts && (item.children || item.branch)").
           ({{ item.originalItem.children ? item.originalItem.children.length : 0 }})
@@ -70,8 +70,11 @@ 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.
   },
 
   emits: ['input', 'before-open', 'open', 'before-close', 'close', 'click', 'select'],
@@ -105,7 +108,7 @@ export default {
           children: !!item.children, // The children tree remains available in originalItem.
           branch: item.branch,
           depth: this.depth,
-          open: oldItems[i]?.open || false
+          open: !!(oldItems[i]?.open || this.expandAll)
         })
       })
     },
@@ -183,6 +186,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 +200,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,7 +213,7 @@ 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))
       )
@@ -230,7 +235,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.
     )
   },