wave-ui 2.47.0 → 3.0.0

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,30 @@ 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
+      }
+    },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: [
@@ -222,7 +261,8 @@ export default {
       nextColWidth: null,
       columnEl: null,
       nextColumnEl: null
-    }
+    },
+    paginationConfig: {}
   }),
 
   computed: {
@@ -277,7 +317,9 @@ export default {
         'w-table--resizing': this.colResizing.dragging,
         'w-table--fixed-header': this.fixedHeaders,
         'w-table--fixed-footer': this.fixedFooter,
-        'w-table--sticky-column': this.hasStickyColumn
+        'w-table--sticky-column': this.hasStickyColumn,
+        'w-table--dark': this.dark,
+        'w-table--light': this.light
       }
     },
 
@@ -490,6 +532,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 +555,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: {
@@ -546,6 +604,8 @@ $tr-border-top: 1px;
   border-collapse: collapse;
   border: none;
 
+  @include themeable;
+
   &--fixed-layout {
     table-layout: fixed; // Allow resizing beyond the cell minimum text width.
   }
@@ -570,7 +630,7 @@ $tr-border-top: 1px;
   &--fixed-header thead {
     position: sticky;
     top: 0;
-    background-color: #fff;
+    background-color: $base-bg-color;
     z-index: 1; // For sticky columns to go under.
 
     &:after {
@@ -595,14 +655,14 @@ $tr-border-top: 1px;
       right: 0;
       bottom: 0;
       z-index: -1;
-      background-color: #fff;
+      background-color: $base-bg-color;
     }
   }
 
   // Sorting arrow.
   &__header--sortable {cursor: pointer;}
   &__header-sort {
-    color: rgba(0, 0, 0, 0.8);
+    color: rgba(var(--w-base-color-rgb), 0.8);
     vertical-align: text-bottom;
     @include default-transition;
 
@@ -662,7 +722,7 @@ $tr-border-top: 1px;
 
   // Table body.
   // ------------------------------------------------------
-  tbody tr {border-top: $tr-border-top solid rgba(0, 0, 0, 0.06);}
+  tbody tr {border-top: $tr-border-top solid rgba(var(--w-base-color-rgb), 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;}
@@ -675,7 +735,7 @@ $tr-border-top: 1px;
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--primary);
+    background-color: var(--w-primary);
     opacity: 0.2;
     pointer-events: none;
   }
@@ -707,7 +767,7 @@ $tr-border-top: 1px;
       bottom: 0;
       z-index: -1;
     }
-    &:before {background-color: #fff;}
+    &:before {background-color: $base-bg-color;}
   }
   tr:nth-child(odd) &__cell--sticky:after {background-color: $table-tr-odd-color;}
   tr:hover &__cell--sticky:after {background-color: $table-tr-hover-color;}
@@ -727,7 +787,7 @@ $tr-border-top: 1px;
   &--fixed-footer tfoot {
     position: sticky;
     bottom: 0;
-    background-color: #fff;
+    background-color: $base-bg-color;
     z-index: 1; // For sticky columns to go under.
 
     &:after {
@@ -739,14 +799,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-tabs/index.vue

@@ -73,7 +73,9 @@ export default {
     fillBar: { type: Boolean },
     center: { type: Boolean },
     right: { type: Boolean },
-    card: { type: Boolean }
+    card: { type: Boolean },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   components: { TabContent },
@@ -125,7 +127,9 @@ export default {
         'w-tabs--no-slider': this.noSlider,
         'w-tabs--pill-slider': this.pillSlider,
         'w-tabs--fill-bar': this.fillBar,
-        'w-tabs--init': this.init
+        'w-tabs--init': this.init,
+        'w-tabs--dark': this.dark,
+        'w-tabs--light': this.light
       }
     },
 
@@ -259,6 +263,8 @@ export default {
   border: $border;
   overflow: hidden;
 
+  @include themeable;
+
   &--tile {border-radius: 0;}
   &--card {border: none;}
   &--no-border, &--shadow {border: none;}

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

@@ -25,7 +25,6 @@ export default {
     modelValue: { type: [Boolean, Number], default: -1 },
     color: { type: String },
     bgColor: { type: String },
-    dark: { type: Boolean },
     shadow: { type: Boolean },
     tile: { type: Boolean },
     round: { type: Boolean },
@@ -38,7 +37,9 @@ export default {
     lg: { type: Boolean },
     xl: { type: Boolean },
     width: { type: [Number, String] },
-    height: { type: [Number, String] }
+    height: { type: [Number, String] },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: ['input', 'update:modelValue'],
@@ -58,7 +59,8 @@ export default {
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [`size--${this.presetSize}`]: true,
-        'w-tag--dark': this.dark && !this.outline,
+        'w-tag--dark': this.dark,
+        'w-tag--light': this.light,
         'w-tag--clickable': this.modelValue !== -1,
         'w-tag--outline': this.outline,
         'w-tag--no-border': this.noBorder || this.shadow,
@@ -85,14 +87,16 @@ export default {
   justify-content: center;
   vertical-align: middle;
   border-radius: $border-radius;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  background-color: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(var(--w-contrast-bg-color-rgb), 0.08);
+  background-color: rgba(var(--w-base-bg-color-rgb), 0.85);
   padding-left: 2 * $base-increment;
   padding-right: 2 * $base-increment;
   cursor: default;
   user-select: none;
 
-  &--dark {color: rgba(255, 255, 255, 0.95);}
+  @include themeable;
+
+  &--dark {color: rgba(var(--w-base-bg-color-rgb), 0.95);}
   &--outline {background-color: transparent;border-color: currentColor;}
   &--no-border {border-color: transparent;}
   &--round {border-radius: 99em;}
@@ -103,6 +107,7 @@ export default {
     $font-size: round(0.7 * $base-font-size);
     font-size: $font-size;
     line-height: $font-size + 2px;
+    padding: round(0.25 * $base-increment) $base-increment;
   }
   &.size--sm {
     $font-size: round(0.82 * $base-font-size);
@@ -150,7 +155,7 @@ export default {
     }
 
     &:hover {
-      .w-tag__closable {background-color: rgba(0, 0, 0, 0.1);}
+      .w-tag__closable {background-color: rgba(var(--w-contrast-bg-color-rgb), 0.1);}
     }
 
     // Overlay to mark the focus and active state.
@@ -171,19 +176,19 @@ export default {
 
     // Hover state.
     &:hover:before {background-color: currentColor;opacity: 0.06;}
-    &--dark:hover:before {background-color: rgba(255, 255, 255, 0.12);opacity: 1;}
+    &--dark:hover:before {background-color: rgba(var(--w-base-bg-color-rgb), 0.12);opacity: 1;}
     &--outline:hover:before,
     &--text:hover:before {background-color: currentColor;opacity: 0.12;}
 
     // Focus state.
     &:focus:before {background-color: currentColor;opacity: 0.2;}
-    &--dark:focus:before {background-color: rgba(255, 255, 255, 0.12);}
+    &--dark:focus:before {background-color: rgba(var(--w-base-bg-color-rgb), 0.12);}
     &--outline:focus:before,
     &--text:focus:before {background-color: currentColor;opacity: 0.12;}
 
     // Active state.
     &:active:before {background-color: currentColor;opacity: 0.2;}
-    &--dark:active:before {background-color: rgba(255, 255, 255, 0.2);}
+    &--dark:active:before {background-color: rgba(var(--w-base-bg-color-rgb), 0.2);}
     &--outline:active:before,
     &--text:active:before {background-color: currentColor;opacity: 0.2;}
   }

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

@@ -83,14 +83,15 @@ export default {
     color: { type: String, default: 'primary' },
     bgColor: { type: String },
     labelColor: { type: String, default: 'primary' },
-    dark: { type: Boolean },
     outline: { type: Boolean },
     shadow: { type: Boolean },
     noAutogrow: { type: Boolean },
     resizable: { type: Boolean }, // Toggle the HTML built-in bottom right corner resize handle.
     tile: { type: Boolean },
     rows: { type: [Number, String], default: 3 },
-    cols: { type: [Number, String] }
+    cols: { type: [Number, String] },
+    dark: { type: Boolean },
+    light: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -132,6 +133,7 @@ export default {
         [`w-textarea--${this.hasValue ? 'filled' : 'empty'}`]: true,
         'w-textarea--focused': this.isFocused && !this.isReadonly,
         'w-textarea--dark': this.dark,
+        'w-textarea--light': this.light,
         'w-textarea--resizable': this.resizable,
         'w-textarea--floating-label': this.hasLabel && this.labelPosition === 'inside' && !this.staticLabel,
         'w-textarea--no-padding': !this.outline && !this.bgColor && !this.shadow,
@@ -228,6 +230,8 @@ $inactive-color: #777;
   flex-wrap: wrap;
   font-size: $base-font-size;
 
+  @include themeable;
+
   // textarea wrapper.
   // ------------------------------------------------------
   &__textarea-wrap {

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-ul.w-timeline
+ul.w-timeline(:class="classes")
   li.w-timeline-item(v-for="(item, i) in items" :key="i")
     component.w-timeline-item__bullet(
       :is="item[itemIconKey] || icon ? 'w-icon' : 'div'"
@@ -23,16 +23,29 @@ export default {
     itemTitleKey: { type: String, default: 'title' },
     itemContentKey: { type: String, default: 'content' },
     itemIconKey: { type: String, default: 'icon' },
-    itemColorKey: { type: String, default: 'color' }
+    itemColorKey: { type: String, default: 'color' },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
-  emits: []
+  emits: [],
+
+  computed: {
+    classes () {
+      return {
+        'w-timeline--dark': this.dark,
+        'w-timeline--light': this.light
+      }
+    }
+  }
 }
 </script>
 
 <style lang="scss">
 .w-timeline {
   margin-left: $base-increment;
+
+  @include themeable;
 }
 
 .w-timeline-item {
@@ -48,7 +61,7 @@ export default {
     position: absolute;
     top: 2px;
     left: 0;
-    background-color: #fff;
+    background-color: $timeline-bullet-color;
     border-radius: 1em;
     border: 1px solid currentColor;
     width: $base-font-size;
@@ -66,7 +79,7 @@ export default {
     top: 2px;
     bottom: -2px;
     left: -1px;
-    border-left: 2px solid #ddd;
+    border-left: 2px solid $timeline-bg-color;
   }
 }
 </style>

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

@@ -19,7 +19,9 @@ export default {
     width: { type: [Number, String], default: null },
     height: { type: [Number, String], default: null },
     noBorder: { type: Boolean },
-    shadow: { type: Boolean }
+    shadow: { type: Boolean },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: [],
@@ -41,6 +43,8 @@ export default {
       return {
         [this.color]: !!this.color,
         [`${this.bgColor}--bg`]: !!this.bgColor,
+        'w-toolbar--dark': this.dark,
+        'w-toolbar--light': this.light,
         'w-toolbar--absolute': !!this.absolute,
         'w-toolbar--fixed': !!this.fixed,
         [`w-toolbar--${this.bottom ? 'bottom' : 'top'}`]: !this.vertical,
@@ -66,9 +70,11 @@ export default {
   flex: 1 1 auto;
   align-items: center;
   padding: (2 * $base-increment) (3 * $base-increment);
-  background-color: #fff;
+  background-color: $toolbar-bg-color;
   z-index: 10;
 
+  @include themeable;
+
   &--absolute, &--fixed {top: 0;left: 0;right: 0;}
   &--absolute {position: absolute;}
   &--fixed {position: fixed;}

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

@@ -32,7 +32,9 @@ export default {
     transition: { type: String },
     tooltipClass: { type: [String, Object, Array] },
     persistent: { type: Boolean },
-    delay: { type: Number }
+    delay: { type: Number },
+    dark: { type: Boolean },
+    light: { type: Boolean }
     // Other props in the detachable mixin:
     // detachTo, appendTo, fixed, top, bottom, left, right, alignTop, alignBottom, alignLeft,
     // alignRight, noPosition, zIndex, activator.
@@ -78,6 +80,8 @@ export default {
         ...this.tooltipClasses,
         [`w-tooltip--${this.position}`]: !this.noPosition,
         [`w-tooltip--align-${this.alignment}`]: !this.noPosition && this.alignment,
+        'w-tooltip--dark': this.dark,
+        'w-tooltip--light': this.light,
         'w-tooltip--tile': this.tile,
         'w-tooltip--round': this.round,
         'w-tooltip--shadow': this.shadow,
@@ -190,7 +194,7 @@ export default {
   position: absolute;
   padding: $base-increment round(1.5 * $base-increment);
   border-radius: $border-radius;
-  border: 1px solid #ddd;
+  border: 1px solid $tooltip-border-color;
   background-color: $tooltip-bg-color;
   pointer-events: none;
   color: $tooltip-color;
@@ -199,6 +203,8 @@ export default {
   width: max-content; // Not supported in IE11. :/
   z-index: 100;
 
+  @include themeable;
+
   &--fixed {position: fixed;z-index: 1000;}
 
   &--tile {border-radius: 0;}
@@ -218,12 +224,12 @@ export default {
 
   // Tooltip without border.
   &--no-border {
-    @include triangle(var(--w-tooltip-bg-color), '.w-tooltip', 7px, 0);
+    @include triangle($tooltip-bg-color, '.w-tooltip', 7px, 0);
   }
 
   // Tooltip with border.
   &:not(&--no-border) {
-    @include triangle(var(--w-tooltip-bg-color), '.w-tooltip', 7px);
+    @include triangle($tooltip-bg-color, '.w-tooltip', 7px);
   }
 }