wave-ui 1.53.2 → 1.55.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.53.2",
+  "version": "1.55.0",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "main": "./dist/wave-ui.umd.js",
@@ -10,6 +10,7 @@
   "exports": {
     "./dist/wave-ui.css": "./dist/wave-ui.css",
     "./dist/wave-ui.cjs.js": "./dist/wave-ui.cjs.js",
+    "./src/wave-ui": "./src/wave-ui/index.js",
     ".": {
       "import": "./dist/wave-ui.es.js",
       "require": "./dist/wave-ui.umd.js"

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

@@ -189,6 +189,7 @@ export default {
     user-select: none;
     cursor: pointer;
     border-top: $border;
+    -webkit-tap-highlight-color: transparent;
 
     .w-accordion__item--disabled & {
       cursor: not-allowed;

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

@@ -166,6 +166,7 @@ $spinner-size: 40;
   // Background-color must not transition to not affect the hover & focus states
   // in :before & :after.
   transition: $transition-duration, background-color 0s, padding 0s;
+  -webkit-tap-highlight-color: transparent;
 
   // In w-flex wrapper, allow overriding the default `align-self: center`.
   .w-flex.align-start > & {align-self: flex-start;}

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

@@ -133,11 +133,9 @@ $inactive-color: #666;
   // Contain the hidden radio button, so browser doesn't pan to it when outside of the screen.
   position: relative;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 
-  &--disabled {
-    cursor: not-allowed;
-    -webkit-tap-highlight-color: transparent;
-  }
+  &--disabled {cursor: not-allowed;}
 
   // The hidden real checkbox.
   input[type="checkbox"] {
@@ -234,7 +232,8 @@ $inactive-color: #666;
     animation: w-checkbox-ripple 0.55s 0.15s ease;
   }
 
-  :focus ~ &__input:before {
+  :focus ~ &__input:before,
+  :active ~ &__input:before {
     transform: scale(1.8);
     opacity: 0.2;
   }

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

@@ -134,6 +134,7 @@ export default {
     icon: { type: String, default: '' },
     itemLabelKey: { type: String, default: 'label' }, // Name of the label field.
     itemValueKey: { type: String, default: 'value' }, // Name of the value field.
+    itemClassKey: { type: String, default: 'class' }, // Name of the class field.
     itemColorKey: { type: String, default: 'color' }, // Support a different color per item.
     itemRouteKey: { type: String, default: 'route' }, // Name of the route field for `nav` lists.
     itemClass: { type: String },
@@ -230,7 +231,7 @@ export default {
         'w-list__item-label--selectable': this.isSelectable,
         [item.color]: !!item.color,
         [this.SelectionColor]: item._selected && !item.color && this.SelectionColor,
-        [this.itemClass]: !!this.itemClass
+        [item[this.itemClassKey] || this.itemClass]: item[this.itemClassKey] || this.itemClass
       }
     },
 
@@ -483,6 +484,7 @@ export default {
     padding-top: 1px;
     padding-bottom: 1px;
     display: flex;
+    -webkit-tap-highlight-color: transparent;
 
     .w-list--navigation &,
     .w-list--checklist & {

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

@@ -218,12 +218,12 @@ $circle-size: 40;
     background-image: linear-gradient(
                         -45deg,
                         rgba(255, 255, 255, 0.2) 25%,
-                        transparent 25%,
-                        transparent 50%,
+                        rgba(255, 255, 255, 0) 25%,
+                        rgba(255, 255, 255, 0) 50%,
                         rgba(255, 255, 255, 0.2) 50%,
                         rgba(255, 255, 255, 0.2) 75%,
-                        transparent 75%,
-                        transparent
+                        rgba(255, 255, 255, 0) 75%,
+                        rgba(255, 255, 255, 0)
                       );
     background-size: 50px 50px;
     animation: w-progress-stripes 2s infinite linear;

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

@@ -134,6 +134,7 @@ $inactive-color: #666;
   // Contain the hidden radio button, so browser doesn't pan to it when outside of the screen.
   position: relative;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 
   &--disabled {
     cursor: not-allowed;
@@ -211,7 +212,8 @@ $inactive-color: #666;
     animation: w-radio-ripple 0.55s 0.15s ease;
   }
 
-  :focus + &__input:before {
+  :focus ~ &__input:before,
+  :active ~ &__input:before {
     transform: scale(1.8);
     opacity: 0.2;
   }

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

@@ -173,6 +173,7 @@ export default {
     border: none;
     background: none;
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
     @include default-transition($fast-transition-duration);
 
     // Disabled & readonly.
@@ -246,13 +247,16 @@ export default {
     animation: w-rating-ripple 0.55s ease;
   }
 
-  &__button:focus:after {
+  &__button:focus:after,
+  &__button:active:after {
     transform: scale(1.8);
     opacity: 0.2;
   }
   &__button--on:focus:after {
     transform: scale(1.8);
   }
+  .w-rating--disabled &__button:after,
+  .w-rating--readonly &__button:after {opacity: 0;}
 
   // After ripple reset to default state, then remove the class via js and the
   // `:focus + &__button:after` will re-transition to normal focused outline.

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

@@ -10,6 +10,8 @@
         v-for="(header, i) in headers"
         :key="i"
         :width="header.width || null")
+
+    //- Table header.
     thead(v-if="!noHeaders")
       tr
         th.w-table__header(
@@ -35,6 +37,8 @@
             v-if="i < headers.length - 1 && resizableColumns"
             :class="{ 'w-table__col-resizer--hover': colResizing.hover === i, 'w-table__col-resizer--active': colResizing.columnIndex === i }"
             @click.stop="/* Prevent click on header, which triggers sorting & DOM refresh. */")
+
+    //- Table body.
     tbody
       //- Progress bar.
       tr.w-table__progress-bar(v-if="loading")
@@ -114,6 +118,17 @@
                 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 }")
+      //- Extra row.
+      .w-table__extra-row(v-if="$slots['extra-row']")
+        slot(name="extra-row")
+
+    //- Table footer.
+    tfoot.w-table__footer(v-if="$slots.footer || $slots['footer-row']")
+      slot(v-if="$slots['footer-row']" name="footer-row")
+      tr.w-table__row(v-else)
+        td.w-table__cell(:colspan="headers.length")
+          slot(name="footer")
+      //- .pagination
 </template>
 
 <script>
@@ -133,6 +148,7 @@ export default {
     headers: { type: Array, required: true },
     noHeaders: { type: Boolean },
     fixedHeaders: { type: Boolean },
+    fixedFooter: { type: Boolean },
     loading: { type: Boolean },
     // Allow single sort: `+id`, or multiple in an array like: ['+id', '-firstName'].
     sort: { type: [String, Array] },
@@ -175,7 +191,15 @@ export default {
     resizableColumns: { type: Boolean }
   },
 
-  emits: ['row-select', 'row-expand', 'row-click', 'update:sort', 'update:selected-rows', 'update:expanded-rows', 'column-resize'],
+  emits: [
+    'row-select',
+    'row-expand',
+    'row-click',
+    'update:sort',
+    'update:selected-rows',
+    'update:expanded-rows',
+    'column-resize'
+  ],
 
   data: () => ({
     activeSorting: [],
@@ -243,7 +267,8 @@ export default {
         'w-table--mobile': this.isMobile || null,
         'w-table--resizable-cols': this.resizableColumns || null,
         'w-table--resizing': this.colResizing.dragging,
-        'w-table--fixed-header': this.fixedHeaders
+        'w-table--fixed-header': this.fixedHeaders,
+        'w-table--fixed-footer': this.fixedFooter
       }
     },
 
@@ -523,7 +548,7 @@ $tr-border-top: 1px;
     text-overflow: ellipsis;
   }
 
-  &--fixed-header th {
+  &--fixed-header thead {
     position: sticky;
     top: 0;
     background-color: #fff;
@@ -631,6 +656,28 @@ $tr-border-top: 1px;
     background-color: rgba(255, 255, 255, 0.2);
     padding: (2 * $base-increment) $base-increment;
   }
+
+  // Table footer.
+  // ------------------------------------------------------
+  &__footer &__cell {
+    padding-top: $base-increment;
+    padding-bottom: $base-increment;
+  }
+
+  &--fixed-footer tfoot {
+    position: sticky;
+    bottom: 0;
+    background-color: #fff;
+
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      border-bottom: $border;
+    }
+  }
 }
 
 // Mobile layout.

package/src/wave-ui/components/w-tabs/index.vue

@@ -192,6 +192,15 @@ export default {
       if (typeof index === 'string') index = ~~index
       else if (isNaN(index) || index < 0) index = 0
       this.activeTabIndex = index
+
+      // Scroll the new active tab item title into view if needed.
+      this.$nextTick(() => {
+        const ref = this.$refs['tabs-bar']
+        this.activeTabEl = ref && ref.querySelector(`.w-tabs__bar-item:nth-child(${index + 1})`)
+        if (this.activeTabEl) {
+          this.activeTabEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
+        }
+      })
     },
 
     // Return the original item (so there is no `_index`, etc.).
@@ -281,6 +290,7 @@ export default {
     transition: $transition-duration ease-in-out, flex-grow 0s, flex 0s; // `flex` for Safari.
     user-select: none;
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
 
     .w-tabs--fill-bar & {flex-grow: 1;flex-basis: 0;}
     .w-tabs--card & {

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

@@ -135,6 +135,7 @@ export default {
   &--clickable {
     cursor: pointer;
     user-select: none;
+    -webkit-tap-highlight-color: transparent;
 
     .w-tag__closable {
       margin-left: 3px;

package/src/wave-ui/scss/_layout.scss

@@ -16,7 +16,7 @@
 
     .grow {flex-grow: 1;flex-basis: auto;}
     .no-grow {flex-grow: 0;}
-    .shrink {flex-shrink: 1;margin-left: auto;margin-right: auto;}
+    .shrink {flex-shrink: 1;}
     .no-shrink {flex-shrink: 0;}
     .fill-width {width: 100%;}
     .fill-height {height: 100%;}