wave-ui 2.45.1 → 2.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.45.1",
+  "version": "2.47.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": "^5.9.55",
@@ -57,7 +57,7 @@
     "autoprefixer": "^10.4.13",
     "axios": "^0.25.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^9.7.0",
+    "eslint-plugin-vue": "^9.8.0",
     "font-awesome": "^4.7.0",
     "gsap": "^3.11.3",
     "ionicons": "^4.6.3",
@@ -69,7 +69,7 @@
     "simple-syntax-highlighter": "^2.2.5",
     "splitpanes": "^3.1.5",
     "standard": "^17.0.0",
-    "vite": "^3.2.3",
+    "vite": "^3.2.5",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
     "vueperslides": "^3.5.1",

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/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

@@ -76,6 +76,7 @@ export default {
     absolute: { type: Boolean },
     overlayColor: { type: String },
     overlayOpacity: { type: [Number, String, Boolean] },
+    drawerClass: { type: String },
     tag: { type: String, default: 'aside' }
   },
 
@@ -125,6 +126,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

@@ -457,7 +457,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-table.vue

@@ -38,11 +38,16 @@
             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)
+      //- Progress bar only.
+      w-transition-fade
+        tr.w-table__progress-bar(v-if="loading === 'header'")
+          td(:colspan="headers.length")
+            w-progress(tile)
 
     //- Table body.
     tbody
-      //- Progress bar.
-      tr.w-table__progress-bar(v-if="loading")
+      //- Progress bar & loading text.
+      tr.w-table__progress-bar(v-if="loading === true")
         td(:colspan="headers.length")
           w-progress(tile)
           .w-table__loading-text
@@ -53,7 +58,7 @@
           slot(name="no-data") No data to show.
 
       //- Normal rows.
-      template(v-else)
+      template(v-if="tableItems.length && loading !== true")
         template(v-for="(item, i) in sortedItems" :key="i")
           //- Fully custom tr (`item` slot).
           slot(
@@ -150,7 +155,7 @@ export default {
     fixedLayout: { type: Boolean },
     fixedHeaders: { type: Boolean },
     fixedFooter: { type: Boolean },
-    loading: { type: Boolean },
+    loading: { type: [Boolean, String] }, // Bool or 'header' to only display the bar in the header.
     // Allow single sort: `+id`, or multiple in an array like: ['+id', '-firstName'].
     sort: { type: [String, Array] },
 
@@ -188,6 +193,7 @@ export default {
     uidKey: { type: String, default: 'id' },
 
     filter: { type: Function },
+    sortFunction: { type: Function },
     mobileBreakpoint: { type: Number, default: 0 },
     resizableColumns: { type: Boolean }
   },
@@ -232,7 +238,7 @@ export default {
     },
 
     sortedItems () {
-      if (!this.activeSorting.length) return this.filteredItems
+      if (!this.activeSorting.length || this.sortFunction) return this.filteredItems
 
       // Only sort with 1 key for now, may handle more later.
       const sortKey1 = this.activeSorting[0].replace(/^[+-]/, '')
@@ -313,15 +319,18 @@ export default {
       ]
     },
 
-    sortTable (header) {
+    async sortTable (header) {
       const alreadySortingThis = this.activeSortingKeys[header.key]
       if (alreadySortingThis && this.activeSortingKeys[header.key] === '-') {
         this.activeSorting = []
-        return this.$emit('update:sort')
       }
       else this.activeSorting[0] = (alreadySortingThis ? '-' : '+') + header.key
 
       this.$emit('update:sort', this.activeSorting)
+
+      if (typeof this.sortFunction === 'function') {
+        await this.sortFunction(this.activeSorting)
+      }
     },
 
     doSelectRow (item, index) {
@@ -549,6 +558,8 @@ $tr-border-top: 1px;
 
   // Table headers.
   // ------------------------------------------------------
+  thead {position: relative;}
+
   &__header {padding: $base-increment;}
   &__header--resizable {
     overflow: hidden;
@@ -628,6 +639,12 @@ $tr-border-top: 1px;
 
   // Progress bar when loading.
   &__progress-bar:nth-child(odd) {background: none;}
+  thead .w-progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
   &__progress-bar td {padding: 0;height: 1px;}
   @-moz-document url-prefix() {
     &__progress-bar td {height: 100%;}
@@ -754,6 +771,7 @@ $tr-border-top: 1px;
 
   .w-table__progress-bar {
     display: table-row;
+
     td {display: table-cell;}
     td:before {display: none;}
   }

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

@@ -0,0 +1,294 @@
+<template lang="pug">
+ul.w-tree(:class="classes")
+  li.w-tree__item(
+    v-for="(item, i) in currentDepthItems"
+    :key="i"
+    :class="itemClasses(item)")
+    .w-tree__item-label(
+      @click="!disabled && onLabelClick(item, $event)"
+      @keydown="!disabled && onLabelKeydown(item, $event)"
+      :tabindex="!disabled && (item.children || item.branch || selectable) && !(unexpandableEmpty && !item.children) ? 0 : null")
+      w-button.w-tree__item-expand(
+        v-if="(item.children || item.branch) && ((expandOpenIcon && item.open) || expandIcon) && !(unexpandableEmpty && !item.children)"
+        color="inherit"
+        :icon="(item.open && expandOpenIcon) || expandIcon"
+        :icon-props="{ rotate90a: !item.open }"
+        :tabindex="-1"
+        :disabled="disabled"
+        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) }}
+        span {{ item.label }}
+        span.ml1(v-if="counts && (item.children || item.branch)").
+          ({{ item.originalItem.children?.length || 0 }})
+    component(
+      :is="noTransition ? 'div' : 'w-transition-expand'"
+      :y="!noTransition || null"
+      @after-enter="$emit('open', { item: item.originalItem, open: item.open, depth })"
+      @after-leave="$emit('close', { item: item.originalItem, open: item.open, depth })")
+      w-tree(
+        v-if="item.children && item.open"
+        v-bind="$props"
+        :depth="depth + 1"
+        :data="item.originalItem.children"
+        @before-open="$emit('before-open', $event)"
+        @open="$emit('open', $event)"
+        @before-close="$emit('before-close', $event)"
+        @close="$emit('close', $event)"
+        @click="$emit('click', $event)"
+        @select="$emit('select', $event)"
+        @update:model-value="$emit('update:model-value', $event)")
+        template(#item-label="{ item, depth, open }")
+          slot(name="item-label" :item="item" :depth="depth" :open="open")
+</template>
+
+<script>
+/**
+ * @todo things to support:
+ * - items routes
+ * - icon per item
+ * - left border?
+ **/
+
+export default {
+  name: 'w-tree',
+  props: {
+    modelValue: { type: [Object, Array] },
+    data: { type: [Object, Array], required: true },
+    depth: { type: Number, default: 0 },
+    branchClass: { type: String },
+    leafClass: { type: String },
+    branchIcon: { type: String },
+    branchOpenIcon: { type: String },
+    leafIcon: { type: String },
+    expandIcon: { type: [Boolean, String], default: 'wi-triangle-down' },
+    expandOpenIcon: { type: [Boolean, String] },
+    expandAll: { type: Boolean },
+    unexpandableEmpty: { type: Boolean },
+    disabled: { type: Boolean },
+    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 }
+  },
+
+  emits: ['update:model-value', 'before-open', 'open', 'before-close', 'close', 'click', 'select'],
+
+  data: () => ({
+    currentDepthItems: [], // A clone of the data prop with additional info per item.
+    dataPropUnwatch: null // Holds the unwatch handler of the data prop.
+  }),
+
+  computed: {
+    classes () {
+      return {
+        [`w-tree--depth${this.depth}`]: true,
+        'w-tree--expand-icon': this.expandIcon && !this.depth,
+        'w-tree--disabled': this.disabled && !this.depth,
+        'w-tree--no-expand-button': !this.expandIcon
+      }
+    }
+  },
+
+  methods: {
+    //  From data watcher, retain the oldItems open state.
+    updateCurrentDepthTree (items, oldItems = []) {
+      this.currentDepthItems = []
+
+      items.forEach((item, i) => {
+        this.currentDepthItems.push({
+          originalItem: item, // Store the original item to return it on event emits.
+          _uid: this.depth.toString() + (i + 1),
+          label: item.label,
+          children: !!item.children, // The children tree remains available in originalItem.
+          branch: item.branch,
+          depth: this.depth,
+          open: oldItems[i]?.open || false
+        })
+      })
+    },
+
+    /**
+     * Expand/collapse the given tree item when possible (not disabled, has children).
+     *
+     * @param {Object} item the item to expand.
+     * @param {Boolean|Undefined} open when a boolean is received, force a state (open or close).
+     */
+    expandDepth (item, open) {
+      if (typeof open === 'boolean') item.open = open
+      else item.open = !item.open
+
+      const emitParams = { item: item.originalItem, open: item.open, depth: this.depth }
+
+      this.$emit(item.open ? 'before-open' : 'before-close', emitParams)
+
+      if (!this.unexpandableEmpty && !item.children) {
+        this.$emit(item.open ? 'open' : 'close', emitParams)
+      }
+
+      return true // Just to chain instructions.
+    },
+
+    onLabelClick (item, e) {
+      this.$emit('click', { item: item.originalItem, depth: this.depth, e })
+      if (item.children || (item.branch && !this.unexpandableEmpty)) this.expandDepth(item)
+
+      if (this.selectable) this.emitItemSelection(item, e)
+    },
+
+    emitItemSelection (item, e) {
+      const emitParams = { item: item.originalItem, depth: this.depth, e }
+      if (item.children || (item.branch && !this.unexpandableEmpty)) {
+        emitParams.open = item.open
+      }
+      this.$emit('update:model-value', emitParams)
+      this.$emit('select', emitParams)
+    },
+
+    onLabelKeydown (item, e) {
+      // Keys: 13 enter, 32 space, 37 arrow left, 38 arrow up, 39 arrow right, 40 arrow down.
+      if (!(e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) && [13, 32, 37, 38, 39, 40].includes(e.which)) {
+        if (item.children || item.branch) {
+          if ([13, 32].includes(e.which)) this.expandDepth(item) && e.preventDefault()
+          else if (e.which === 37) this.expandDepth(item, false) && e.preventDefault()
+          else if (e.which === 39) this.expandDepth(item, true) && e.preventDefault()
+        }
+
+        // On arrow up or down, focus the prev or next item.
+        if ([38, 40].includes(e.which)) {
+          const treeRoot = this.$el.closest('.w-tree--depth0')
+          const treeTabbableItems = treeRoot.querySelectorAll('.w-tree__item-label[tabindex="0"]')
+          const currLabel = e.target.closest('.w-tree__item-label')
+          const indexModifier = e.which === 38 ? -1 : 1;
+
+          ([...treeTabbableItems]).some((item, i) => {
+            if (item.isSameNode(currLabel)) {
+              treeTabbableItems[i + indexModifier] && treeTabbableItems[i + indexModifier].focus()
+              return true // Break the loop.
+            }
+          })
+        }
+      }
+
+      if (this.selectable) this.emitItemSelection(item, e)
+    },
+
+    /**
+     * Returns the previous sibling matching the given selector, or false if not found.
+     *
+     * @param {Object} node the DOM node to find sibling for.
+     * @param {String} selector any valid DOM selector to match the siblings.
+     */
+    getPreviousSibling (node, selector) {
+      while (selector && (node = node.previousElementSibling)) {
+        if (node.matches(selector)) return node
+      }
+      return false
+    },
+
+    /**
+     * Returns the next sibling matching the given selector, or false if not found.
+     *
+     * @param {Object} node the DOM node to find sibling for.
+     * @param {String} selector any valid DOM selector to match the siblings.
+     */
+    getNextSibling (node, selector) {
+      while (selector && (node = node.nextElementSibling)) {
+        if (node.matches(selector)) return node
+      }
+      return false
+    },
+
+    focusTreeItem (liNode) {
+      liNode && liNode.querySelector('.w-tree__item-label').focus()
+    },
+
+    itemIcon (item) {
+      return (
+        item.originalItem.icon ||
+        (!item.children && !item.branch && this.leafIcon) ||
+        ((item.children || item.branch) && ((item.open && this.branchOpenIcon) || this.branchIcon))
+      )
+    },
+
+    itemClasses (item) {
+      return {
+        [item.children || item.branch ? 'w-tree__item--branch' : 'w-tree__item--leaf']: true,
+        'w-tree__item--empty': item.branch && !item.children,
+        'w-tree__item--unexpandable': item.branch && !item.children && this.unexpandableEmpty
+      }
+    }
+  },
+
+  created () {
+    this.updateCurrentDepthTree(this.data)
+    this.dataPropUnwatch = this.$watch(
+      'data',
+      // 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.
+    )
+  },
+
+  unmounted () {
+    this.dataPropUnwatch()
+  }
+}
+</script>
+
+<style lang="scss">
+$expand-icon-size: 20px;
+
+.w-tree {
+  margin: 0;
+
+  // Tree items.
+  // ------------------------------------------------------
+  &__item {list-style-type: none;}
+  &__item--branch {}
+  &__item--leaf {margin-left: $base-increment * 5 + 2px;}
+  &--no-expand-button &__item--leaf {margin-left: 0;}
+
+  // Tree item label.
+  // ------------------------------------------------------
+  &__item-label {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: -1px;
+      bottom: -1px;
+      left: - $base-increment + 2px;
+      right: - $base-increment - 2px;
+      border-radius: $border-radius;
+    }
+    &:focus:before {background-color: rgba($primary, 0.1);}
+  }
+  &__item--leaf &__item-label:before {
+    left: - $base-increment;
+    right: - $base-increment;
+  }
+
+  &__item-expand {margin-right: 2px;}
+
+  &__item--branch > &__item-label {cursor: pointer;}
+  &__item--unexpandable > &__item-label {
+    margin-left: $expand-icon-size + 2px;
+    cursor: auto;
+  }
+  &--disabled &__item-label {cursor: auto;}
+  &--disabled &__item--branch > &__item-label {opacity: 0.5;}
+
+  &__item-icon {margin-right: $base-increment;}
+
+  // Recursive children.
+  // ------------------------------------------------------
+  .w-tree {margin-left: $base-increment * 5;}
+}
+</style>

package/src/wave-ui/core.js

@@ -4,9 +4,9 @@ import NotificationManager from './utils/notification-manager'
 import colors from './utils/colors'
 // import * as directives from './directives'
 
-const shadeColor = (col, amt) => {
-  return '#' + col.slice(1).match(/../g)
-    .map(x => (x =+ `0x${x}` + amt, x < 0 ? 0 : ( x > 255 ? 255 : x)).toString(16).padStart(2, 0))
+const shadeColor = (color, amount) => {
+  return '#' + color.slice(1).match(/../g)
+    .map(x => (x =+ `0x${x}` + amount, x < 0 ? 0 : ( x > 255 ? 255 : x)).toString(16).padStart(2, 0))
     .join('')
 }
 

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

@@ -41,28 +41,79 @@
     .#{$label}--bg {background-color: $color;}
     .#{$label} {color: $color;}
 
-    @for $i from 1 through 5 {
-      $light-increment: 8;
+    @for $i from 1 through 6 {
+      $light-increment: 7.5;
+      $light-offset: 0;
+      $dark-increment: 6.2;
       // Some color shades need bigger or smaller increments to end up with the same scale.
       @if $label == 'deep-orange' {
-        $light-increment: 7;
+        $light-increment: 6.4;
       }
-      @if $label == 'green' or $label == 'amber' {
-        $light-increment: 8.3;
+      @if $label == 'orange' {
       }
-      @if $label == 'pink' or $label == 'orange' {
-        $light-increment: 8.5;
+      @else if $label == 'green' {
+        $light-increment: 7.6;
+        $dark-increment: 5.7;
       }
-      @if $label == 'cyan' or $label == 'purple' or $label == 'deep-purple' or $label == 'indigo' or $label == 'light-blue' {
-        $light-increment: 9;
+      @else if $label == 'amber' {
       }
-      @if $label == 'teal' or $label == 'brown' {
-        $light-increment: 10;
+      @else if $label == 'pink' {
+        $light-increment: 6.7;
+        $light-offset: -4;
       }
-      .#{$label}-light#{$i}--bg {background-color: lighten($color, $light-increment * $i);}
-      .#{$label}-light#{$i} {color: lighten($color, $light-increment * $i);}
-      .#{$label}-dark#{$i}--bg {background-color: darken($color, 6 * $i);}
-      .#{$label}-dark#{$i} {color: darken($color, 6 * $i);}
+      @else if $label == 'red' {
+        $light-increment: 6.5;
+        $light-offset: -1;
+      }
+      @else if $label == 'indigo' {
+        $light-increment: 8;
+        $dark-increment: 5.7;
+      }
+      @else if $label == 'deep-purple' {
+        $light-increment: 8;
+        $dark-increment: 5.7;
+      }
+      @else if $label == 'light-blue' {
+        $light-increment: 7.8;
+      }
+      @else if $label == 'light-green' {
+        $light-increment: 6;
+        $light-offset: -5;
+      }
+      @else if $label == 'lime' {
+        $light-increment: 6.2;
+        $light-offset: -6;
+      }
+      @else if $label == 'yellow' {
+        $light-increment: 5.5;
+        $light-offset: -8;
+      }
+      @else if $label == 'purple' {
+        $light-increment: 6.5;
+        $light-offset: -8.5;
+      }
+      @else if $label == 'cyan' {
+        $light-increment: 9.4;
+        $light-offset: 6.5;
+        $dark-increment: 5.7;
+      }
+      @else if $label == 'teal' {
+        $light-increment: 9.6;
+        $light-offset: 5;
+        $dark-increment: 5.4;
+      }
+      @else if $label == 'blue' {
+        $light-increment: 6.8;
+        $dark-increment: 6.8;
+      }
+      @else if $label == 'brown' {
+        $light-increment: 8.8;
+        $dark-increment: 5;
+      }
+      .#{$label}-light#{$i}--bg {background-color: lighten($color, $light-increment * $i - $light-offset);}
+      .#{$label}-light#{$i} {color: lighten($color, $light-increment * $i - $light-offset);}
+      .#{$label}-dark#{$i}--bg {background-color: darken($color, $dark-increment * $i);}
+      .#{$label}-dark#{$i} {color: darken($color, $dark-increment * $i);}
     }
   }
 }