wave-ui 1.60.1 → 1.62.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.60.1",
+  "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",
@@ -48,7 +48,7 @@
     "lint": "vite lint"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@mdi/font": "^6.9.96",

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

@@ -1,4 +1,3 @@
-// Keep all the `.vue` extensions for Vite & Rollup.
 export { default as WAccordion } from './w-accordion.vue'
 export { default as WAlert } from './w-alert.vue'
 export { default as WApp } from './w-app.vue'
@@ -49,3 +48,4 @@ export { default as WTransitionScaleFade } from './transitions/w-transition-scal
 export { default as WTransitionSlide } from './transitions/w-transition-slide.vue'
 export { default as WTransitionSlideFade } from './transitions/w-transition-slide-fade.vue'
 export { default as WTransitionTwist } from './transitions/w-transition-twist.vue'
+export { default as WTree } from './w-tree.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-dialog.vue

@@ -123,7 +123,7 @@ export default {
     overflow: auto;
     background-color: #fff;
 
-    .w-dialog--fullscreen & {
+    .w-dialog--fullscreen > & {
       flex: 1 1 auto;
       height: 100%;
       max-width: none;

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

@@ -78,6 +78,7 @@ export default {
     absolute: { type: Boolean },
     overlayColor: { type: String },
     overlayOpacity: { type: [Number, String, Boolean] },
+    drawerClass: { type: String },
     tag: { type: String, default: 'aside' }
   },
 
@@ -127,6 +128,7 @@ export default {
     },
     drawerClasses () {
       return {
+        [this.drawerClass]: true,
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         'w-drawer--open': !!this.showDrawer,

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

@@ -128,6 +128,7 @@ export default {
   .w-button.size--lg &, .w-alert.size--lg & {font-size: round(1.7 * $base-font-size);}
   .w-button.size--xl &, .w-alert.size--xl & {font-size: 2 * $base-font-size;}
 
+  &:before {transition: transform $transition-duration;}
   &--spin:before {animation: w-icon--spin 2s infinite linear;}
   &--spin-a:before {animation: w-icon--spin-a 2s infinite linear;}
   &--rotate45:before {transform: rotate(45deg);}

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

@@ -9,7 +9,7 @@ component.w-image-wrap(:is="wrapperTag" :class="wrapperClasses" :style="wrapperS
       :src="tag === 'img' ? imgSrc : null")
   .w-image__loader(v-if="!noSpinner && loading")
     slot(v-if="$slots.loading" name="loading")
-    w-progress(v-else circle indeterminate)
+    w-progress(v-else circle indeterminate v-bind="spinnerColor ? { color: spinnerColor } : {}")
   component.w-image__content(v-if="$slots.default" :is="wrapperTag" :class="contentClass")
     slot
 </template>
@@ -22,9 +22,10 @@ component.w-image-wrap(:is="wrapperTag" :class="wrapperClasses" :style="wrapperS
  * - adaptive size: given ratio + width 100% (use bg)
  * - adaptive size: given ratio + height 100% (use bg)
  * - adaptive & locked size: given width or height and using <img>
+ *
+ * @todo handle figure, captions, srcset, webp.
  **/
 
-// @todo handle figure, captions, srcset, webp.
 import { consoleWarn } from '../utils/console'
 
 export default {
@@ -40,6 +41,7 @@ export default {
     fixed: { type: Boolean },
     contain: { type: Boolean },
     noSpinner: { type: Boolean },
+    spinnerColor: { type: String },
     fallback: { type: String },
     transition: { type: String, default: 'fade' },
     contentClass: { type: [String, Array, Object] }

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

@@ -453,7 +453,7 @@ $inactive-color: #777;
   &__input {
     width: 100%;
     height: 100%;
-    font-size: inherit;
+    font: inherit;
     color: inherit;
     text-align: inherit;
     display: inline-flex;

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.