wave-ui 1.40.0 → 1.42.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.40.0",
+  "version": "1.42.1",
   "description": "An emerging UI framework for Vue.js & Vue 3 with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "main": "./dist/wave-ui.umd.js",
@@ -43,36 +43,37 @@
     "*.vue"
   ],
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@babel/eslint-parser": "^7.14.7",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/core": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
     "@mdi/font": "^5.9.55",
-    "@vitejs/plugin-vue": "^1.2.5",
-    "autoprefixer": "^10.3.1",
-    "axios": "^0.21.1",
-    "core-js": "^3.15.2",
-    "eslint": "^7.31.0",
+    "@vitejs/plugin-vue": "^1.9.4",
+    "autoprefixer": "^10.4.0",
+    "axios": "^0.21.4",
+    "core-js": "^3.19.0",
+    "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-vue": "^7.14.0",
+    "eslint-plugin-promise": "^5.1.1",
+    "eslint-plugin-vue": "^7.20.0",
     "font-awesome": "^4.7.0",
     "ghspa": "^1.0.0",
-    "gsap": "^3.7.1",
+    "gsap": "^3.8.0",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.35.2",
-    "simple-syntax-highlighter": "^1.4.8",
+    "sass": "^1.43.4",
+    "simple-syntax-highlighter": "^1.5.0",
     "splitpanes": "^2.3.8",
-    "vite": "^2.4.3",
+    "vite": "^2.6.13",
     "vite-plugin-pug": "^0.3.0",
-    "vite-plugin-vue2": "^1.7.3",
+    "vite-plugin-vue2": "^1.9.0",
     "vue": "^2.6.14",
-    "vue-router": "^3.5.2",
+    "vue-router": "^3.5.3",
     "vue-svg-loader": "^0.16.0",
     "vue-template-compiler": "^2.6.14",
-    "vueperslides": "^2.15.2"
+    "vueperslides": "^2.15.2",
+    "vuex": "^3.6.2"
   }
 }

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-badge-wrap
+.w-badge-wrap(v-on="$listeners")
   slot
   transition(:name="`${transition}`")
     .w-badge(
@@ -104,6 +104,7 @@ export default {
   border-radius: 99em;
   // Always get an even number for better text vertical align.
   height: round(1.1 * divide($base-font-size, 2)) * 2;
+  line-height: round(1.1 * divide($base-font-size, 2)) * 2;
   min-width: round(1.1 * divide($base-font-size, 2)) * 2;
   z-index: 1;
   padding: 0 $base-increment;
@@ -121,29 +122,38 @@ export default {
     $height: round(divide($base-font-size, 2)) * 2;
     font-size: round(0.67 * divide($base-font-size, 2)) * 2;
     height: $height;
+    line-height: $height;
     min-width: $height;
 
     &--round {width: $height;padding: 0 round(divide($height, 2));}
   }
   &.size--sm {
+    $height: round(1.1 * divide($base-font-size, 2)) * 2;
     font-size: round(0.75 * divide($base-font-size, 2)) * 2;
-    height: round(1.1 * divide($base-font-size, 2)) * 2;
-    min-width: round(1.1 * divide($base-font-size, 2)) * 2;
+    height: $height;
+    line-height: $height;
+    min-width: $height;
   }
   &.size--md {
+    $height: round(1.3 * divide($base-font-size, 2)) * 2;
     font-size: round(0.9 * divide($base-font-size, 2)) * 2;
-    height: round(1.3 * divide($base-font-size, 2)) * 2;
-    min-width: round(1.3 * divide($base-font-size, 2)) * 2;
+    height: $height;
+    line-height: $height;
+    min-width: $height;
   }
   &.size--lg {
+    $height: round(1.5 * divide($base-font-size, 2)) * 2;
     font-size: round(1.05 * divide($base-font-size, 2)) * 2;
-    height: round(1.5 * divide($base-font-size, 2)) * 2;
-    min-width: round(1.5 * divide($base-font-size, 2)) * 2;
+    height: $height;
+    line-height: $height;
+    min-width: $height;
   }
   &.size--xl {
+    $height: round(1.8 * divide($base-font-size, 2)) * 2;
     font-size: round(1.2 * divide($base-font-size, 2)) * 2;
-    height: round(1.8 * divide($base-font-size, 2)) * 2;
-    min-width: round(1.8 * divide($base-font-size, 2)) * 2;
+    height: $height;
+    line-height: $height;
+    min-width: $height;
   }
 
   // Position.

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

@@ -119,8 +119,8 @@ export default {
   &.size--lg {font-size: round(1.7 * $base-font-size);}
   &.size--xl {font-size: 2 * $base-font-size;}
 
-  // In w-button and w-alert.
-  // .w-button &, .w-alert & {font-size: round(1.4 * $base-font-size);}
+  // Icon's vertical alignment in button.
+  .w-button &, .w-button &:before {line-height: inherit;}
   // Always an even number to vertical align well in button.
   .w-button.size--xs & {font-size: round(0.95 * divide($base-font-size, 2)) * 2;}
   .w-alert.size--xs & {font-size: $base-font-size;}

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

@@ -36,6 +36,8 @@
     ref="overlay"
     :value="showMenu"
     :persistent="persistent"
+    :class="overlayClass || null"
+    v-bind="overlayProps"
     :z-index="(zIndex || 200) - 1"
     @input="showMenu = false")
 </template>
@@ -86,6 +88,8 @@ export default {
     zIndex: { type: [Number, String, Boolean] },
     minWidth: { type: [Number, String] }, // can be like: `40`, `5em`, `activator`.
     overlay: { type: Boolean },
+    overlayClass: { type: String },
+    overlayProps: { type: Object }, // Allow passing down an object of props to the w-overlay component.
     persistent: { type: Boolean },
     noPosition: { type: Boolean }
   },

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

@@ -27,6 +27,7 @@ component(
     label.w-switch__label.w-form-el-shakable(v-else-if="label" :for="`w-switch--${_uid}`" v-html="label")
   .w-switch__input(
     @click="$refs.input.focus();$refs.input.click()"
+    v-on="$listeners"
     :class="inputClasses")
   template(v-if="hasLabel && !labelOnLeft")
     label.w-switch__label.w-form-el-shakable(v-if="$slots.default" :for="`w-switch--${_uid}`")

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

@@ -15,7 +15,7 @@
         th.w-table__header(
           v-for="(header, i) in headers"
           :key="i"
-          @click="header.sortable !== false && sortTable(header)"
+          @click="!colResizing.dragging && header.sortable !== false && sortTable(header)"
           :class="headerClasses(header)")
           w-icon.w-table__header-sort(
             v-if="header.sortable !== false && header.align === 'right'"
@@ -122,6 +122,9 @@
 
 import { consoleError } from '../utils/console'
 
+// When column resizing is on, this is the minimum cell width that we can resize to.
+const minColumnWidth = 15
+
 export default {
   name: 'w-table',
   props: {
@@ -404,15 +407,17 @@ export default {
       columnEl.style.width = colWidth + deltaX + 'px'
       nextColumnEl.style.width = nextColWidth - deltaX + 'px'
 
-      // 2. Check if we went too far (the width applyed is different than the browser-computed one).
-      const minWidthReached = deltaX < 0 && columnEl.offsetWidth > newColWidth
+      // 2. Check if we went too far (the width applied is different than the browser-computed one).
+      const minWidthReached = (deltaX < 0 && columnEl.offsetWidth > newColWidth) ||
+                              columnEl.offsetWidth <= minColumnWidth
       const maxWidthReached = deltaX > 0 && nextColumnEl.offsetWidth > newNextColWidth
 
       // 3. If we went too far, correct the value of both cells widths.
       // Make sure we don't shrink enough to push other left cells.
       if (minWidthReached) {
-        columnEl.style.width = columnEl.offsetWidth + 'px'
-        nextColumnEl.style.width = maxWidth - columnEl.offsetWidth + 'px'
+        const newWidth = Math.max(columnEl.offsetWidth, minColumnWidth)
+        columnEl.style.width = newWidth + 'px'
+        nextColumnEl.style.width = maxWidth - newWidth + 'px'
       }
       // Make sure we don't grow enough to push other right cells.
       else if (maxWidthReached) {
@@ -421,19 +426,24 @@ export default {
       }
     },
 
-    onResizerMouseUp (e) {
+    onResizerMouseUp () {
       // Remove listeners.
       document.removeEventListener('mousemove', this.onResizerMouseMove)
       document.removeEventListener('mouseup', this.onResizerMouseUp)
 
       // Reset all the variables (better for debugging).
-      this.colResizing.dragging = false
-      this.colResizing.columnIndex = null
-      this.colResizing.startCursorX = null
-      this.colResizing.columnEl = null
-      this.colResizing.nextColumnEl = null
-      this.colResizing.colWidth = null
-      this.colResizing.nextColWidth = null
+      // setTimeout 0 to make sure the sorting is not applied when releasing the mouse on a header
+      // cell after resizing.
+      // (releasing the mouse on table header triggers a click event captured by the sorting feature)
+      setTimeout(() => {
+        this.colResizing.dragging = false
+        this.colResizing.columnIndex = null
+        this.colResizing.startCursorX = null
+        this.colResizing.columnEl = null
+        this.colResizing.nextColumnEl = null
+        this.colResizing.colWidth = null
+        this.colResizing.nextColWidth = null
+      }, 0)
     }
   },
 
@@ -490,6 +500,10 @@ $tr-border-top: 1px;
   border-collapse: collapse;
   border: none;
 
+  &--resizable-cols {
+    table-layout: fixed; // Allow resizing beyond the cell minimum text width.
+  }
+
   &--resizing {
     &, * {cursor: col-resize;}
 
@@ -498,8 +512,11 @@ $tr-border-top: 1px;
 
   // Table headers.
   // ------------------------------------------------------
-  &__header {
-    padding: $base-increment;
+  &__header {padding: $base-increment;}
+  &__header--resizable {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   &--fixed-header th {
@@ -596,7 +613,15 @@ $tr-border-top: 1px;
   &__header:first-child, &__cell:first-child {padding-left: 2 * $base-increment;}
   &__header:last-child, &__cell:last-child {padding-right: 2 * $base-increment;}
 
-  &--resizable-cols &__cell {position: relative;}
+  &--resizable-cols &__cell {
+    position: relative;
+
+    &, & * {
+      overflow: hidden;
+      // white-space: nowrap; // If you only want the content cell on a single line.
+      text-overflow: ellipsis;
+    }
+  }
 
   .no-data &__cell {
     background-color: rgba(255, 255, 255, 0.2);

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

@@ -61,6 +61,12 @@
     @for $i from 1 through 6 {
       .bd#{$i} {border: $i + px solid $border-color;}
     }
+    .bdx1 {border-left: 1px solid $border-color;border-right: 1px solid $border-color;}
+    .bdy1 {border-top: 1px solid $border-color;border-bottom: 1px solid $border-color;}
+    .bdl1 {border-left: 1px solid $border-color;}
+    .bdr1 {border-right: 1px solid $border-color;}
+    .bdt1 {border-top: 1px solid $border-color;}
+    .bdb1 {border-bottom: 1px solid $border-color;}
     .bd0 {border: none;}
 
     @for $i from 1 through 6 {

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

@@ -142,11 +142,11 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 
 // Twist.
 // --------------------------------------------------------
-.twist-enter-active {animation: w-twist $transition-duration;}
-.twist-leave-active {animation: w-twist $transition-duration reverse;}
+.twist-enter-active {animation: w-twist ($transition-duration + 0.25s);}
+.twist-leave-active {animation: w-twist ($transition-duration + 0.25s) reverse;}
 @keyframes w-twist {
-  0% {transform: scale(0) rotate(-30deg);}
-  60% {transform: scale(1.03) rotate(5deg);}
+  0% {transform: scale(0) rotate(-70deg);}
+  60% {transform: scale(1.03) rotate(6deg);}
   100% {transform: scale(1) rotate(0deg);}
 }
 // --------------------------------------------------------

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

@@ -17,7 +17,7 @@ $layout-padding: $base-increment * 4 !default; // Applied on the .content-wrap t
 $border-radius: 3px !default;
 $border-color: rgba(0, 0, 0, 0.15);
 $border: 1px solid $border-color !default;
-$transition-duration: 0.2s !default;
+$transition-duration: 0.25s !default;
 $fast-transition-duration: 0.15s !default;
 $box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
              0 2px 2px 0 rgba(0, 0, 0, 0.15),