wave-ui 3.1.3 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.1.3",
+  "version": "3.3.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",

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

@@ -165,7 +165,7 @@ $spinner-size: 40;
   z-index: 1;
   // Background-color must not transition to not affect the hover & focus states
   // in :before & :after.
-  transition: $transition-duration, background-color 0s, padding 0s;
+  transition: all $transition-duration, background-color 0s, padding 0s;
   -webkit-tap-highlight-color: transparent;
 
   @include themeable;
@@ -253,10 +253,10 @@ $spinner-size: 40;
   // Button states.
   // ------------------------------------------------------
   // Hover & focus states - inside button.
-  &:hover:before, &:focus:before {opacity: 0.08;}
-  &--dark:hover:before, &--dark:focus:before {opacity: 0.2;}
-  &--outline:hover:before, &--outline:focus:before,
-  &--text:hover:before, &--text:focus:before {opacity: 0.12;}
+  &:hover:before, &:focus-visible:before {opacity: 0.2;}
+  &--dark:hover:before, &--dark:focus-visible:before {opacity: 0.4;}
+  &--outline:hover:before, &--outline:focus-visible:before,
+  &--text:hover:before, &--text:focus-visible:before {opacity: 0.12;}
 
   // Focus state - outside button.
   &:after {
@@ -273,22 +273,25 @@ $spinner-size: 40;
     transition: opacity 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95), transform 0.25s ease-in;
     transform: scale(0.85, 0.7);
   }
-  &:focus:after {
+  &:focus-visible:after {
     opacity: 0.4;
     transform: scale(1);
     transition: opacity 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95), transform 0.25s ease-out;
   }
-  &--dark:focus:after {opacity: 0.2;}
+  &--dark:focus-visible:after {opacity: 0.2;}
 
   // Active state.
-  &:active:before {opacity: 0.2;}
-  &--dark:active:before, &.primary--bg:active:before {opacity: 0.25;}
+  &:active {transform: scale(1.02);}
+  &:active:before {opacity: 0.3;}
+  &--dark:active:before, &.primary--bg:active:before {opacity: 0.35;}
 
   // Disable visual feedback on loading and disabled buttons.
   &--loading:hover:before,
-  &--loading:focus:before,
+  &--loading:focus-visible:before,
   &--loading:active:before,
   &[disabled]:before {opacity: 0;}
+  &--loading:active,
+  &[disabled] {transform: none;}
   // ------------------------------------------------------
 
   // Disable events binding on nested content.
@@ -304,6 +307,7 @@ $spinner-size: 40;
     align-items: center;
     justify-content: center;
     background: inherit;
+    border-radius: inherit;
 
     svg {height: 75%;}
     circle {

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

@@ -190,7 +190,7 @@ export default {
     },
     selectionString () {
       return this.inputValue && this.inputValue.map(
-        item => item[this.itemValueKey] !== undefined ? item[this.itemLabelKey] : (item[this.itemLabelKey] !== undefined ? item[this.itemLabelKey] : item)
+        item => item[this.itemValueKey] !== undefined ? item[this.itemLabelKey] : (item[this.itemLabelKey] ?? item)
       ).join(', ')
     },
     classes () {

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

@@ -9,7 +9,8 @@
       col.w-table__col(
         v-for="(header, i) in headers"
         :key="i"
-        :width="header.width || null")
+        :width="header.width || null"
+        :class="colClasses[i]")
 
     //- Table header.
     thead(v-if="!noHeaders")
@@ -135,42 +136,41 @@
           slot(name="footer")
       tr.w-table__row.w-table__pagination-wrap(v-if="pagination && paginationConfig")
         td.w-table__cell(:colspan="headers.length")
-          .w-table__pagination
-            | {{ paginationConfig }}
+          .w-table__pagination.w-pagination
             slot(
               name="pagination"
-              :range="`${paginationConfig.start}-${paginationConfig.end} of ${paginationConfig.total}`"
+              :range="`${paginationConfig.start}-${paginationConfig.end}`"
               :total="paginationConfig.total")
-              w-select.pagination-number.pagination-number--items-per-page(
+              w-select.w-pagination__items-per-page(
                 v-if="paginationConfig.itemsPerPageOptions"
                 v-model="paginationConfig.itemsPerPage"
-                @input="updatePaginationConfig"
+                @input="updatePaginationConfig({ itemsPerPage: paginationConfig.itemsPerPage })"
                 :items="paginationConfig.itemsPerPageOptions"
                 label-position="left"
                 label="Items per page"
                 label-color="inherit")
-              .pagination-arrows
-                w-button.pagination-arrow.pagination-arrow--prev(
+              .pages-wrap
+                w-button.w-pagination__arrow.w-pagination__arrow--prev(
                   @click="goToPage('-1')"
                   :disabled="paginationConfig.page <= 1"
                   icon="wi-chevron-left"
                   text
                   lg)
-                w-button.pagination-arrow.pagination-arrow--prev(
+                w-button.w-pagination__page(
                   v-for="i in paginationConfig.pagesCount"
                   :key="i"
-                  @click="goToPage(i)"
+                  @click="i !== paginationConfig.page && goToPage(i)"
+                  :class="{ 'w-pagination__page--active': i === paginationConfig.page }"
                   round
-                  text
                   lg) {{ i }}
-                w-button.pagination-arrow.pagination-arrow--next(
+                w-button.w-pagination__arrow.w-pagination__arrow--next(
                   @click="goToPage('+1')"
                   :disabled="paginationConfig.page >= paginationConfig.pagesCount"
                   icon="wi-chevron-right"
                   text
                   lg)
-              span.pagination-number.pagination-number--results.
-                {{ paginationConfig.start }}-{{ paginationConfig.end }} of {{ paginationConfig.total }}
+              span.w-pagination__results.
+                {{ paginationConfig.start }}-{{ paginationConfig.end || paginationConfig.total }} of {{ paginationConfig.total }}
 </template>
 
 <script>
@@ -195,6 +195,9 @@ export default {
     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] },
+    sortFunction: { type: Function },
+    filter: { type: Function },
+    fetch: { type: Function },
 
     expandableRows: {
       validator: value => {
@@ -229,11 +232,16 @@ export default {
     // 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 },
 
+    // An object containing:
+    // - itemsPerPage
+    // - itemsPerPageOptions
+    // - start
+    // - end
+    // - page
+    // - total
     pagination: {
       type: [Boolean, Object, String],
       validator: object => {
@@ -283,7 +291,7 @@ export default {
   computed: {
     tableItems () {
       return this.items.map((item, i) => {
-        item._uid = item[this.uidKey] !== undefined ? item[this.uidKey] : i
+        item._uid = item[this.uidKey] ?? i
         return item
       })
     },
@@ -293,7 +301,7 @@ export default {
     },
 
     sortedItems () {
-      if (!this.activeSorting.length || this.sortFunction) return this.filteredItems
+      if (!this.activeSorting.length || this.sortFunction || this.fetch) return this.filteredItems
 
       // Only sort with 1 key for now, may handle more later.
       const sortKey1 = this.activeSorting[0].replace(/^[+-]/, '')
@@ -310,6 +318,10 @@ export default {
       })
     },
 
+    paginatedItems () {
+      return typeof this.fetch === 'function' ? this.sortedItems : this.sortedItems.slice(this.paginationConfig.start - 1, this.paginationConfig.end)
+    },
+
     // Returns an object containing { key1: '+', key2: '-' }. With + or - for ASC/DESC.
     activeSortingKeys () {
       return this.activeSorting.reduce((obj, item) => {
@@ -324,8 +336,16 @@ export default {
       }
     },
 
+    colClasses () {
+      return this.headers.map(header => {
+        return { 'w-table__col--highlighted': this.activeSortingKeys[header.key] }
+      }) || []
+    },
+
     classes () {
       return {
+        'w-table--loading': this.loading,
+        'w-table--loading-in-header': this.loading === 'header',
         'w-table--fixed-layout': this.fixedLayout || this.resizableColumns || this.hasStickyColumn,
         'w-table--mobile': this.isMobile || null,
         'w-table--resizable-cols': this.resizableColumns || null,
@@ -354,10 +374,6 @@ export default {
     // Faster lookup than array.includes(uid) and also cached.
     expandedRowsByUid () {
       return this.expandedRowsInternal.reduce((obj, uid) => (obj[uid] = true) && obj, {})
-    },
-
-    paginatedItems () {
-      return this.sortedItems.slice(this.paginationConfig.start, this.paginationConfig.end)
     }
   },
 
@@ -389,9 +405,8 @@ export default {
 
       this.$emit('update:sort', this.activeSorting)
 
-      if (typeof this.sortFunction === 'function') {
-        await this.sortFunction(this.activeSorting)
-      }
+      if (typeof this.sortFunction === 'function') await this.sortFunction(this.activeSorting)
+      else if (typeof this.fetch === 'function') await this.callApiFetch()
     },
 
     doSelectRow (item, index) {
@@ -553,33 +568,75 @@ export default {
       }, 0)
     },
 
-    updatePaginationConfig () {
-      const itemsPerPage = this.pagination?.itemsPerPage || 20
+    initPagination () {
+      const itemsPerPage = this.pagination?.itemsPerPage ?? 20 // Can also be `0` for all.
+
       const itemsPerPageOptions = this.pagination?.itemsPerPageOptions || [20, 100, { label: 'All', value: 0 }]
-      const total = this.pagination?.total || this.items.length
-      const itemsPerPageOrTotal = itemsPerPage || total
-      const page = this.pagination?.page || 1
-      this.paginationConfig = {
+      // If the given itemsPerPage is not in the itemsPerPageOptions, add it.
+      if (!itemsPerPageOptions.find(item => (item?.value ?? item) === +itemsPerPage)) {
+        itemsPerPageOptions.push(itemsPerPage)
+      }
+      this.paginationConfig.itemsPerPageOptions = itemsPerPageOptions.map(item => ({
+        label: ['string', 'number'].includes(typeof item) ? item.toString() : (item.label || item.value),
+        value: ['string', 'number'].includes(typeof item) ? ~~item : (item.value ?? item.label)
+      }))
+      // Sort the options in an ascending order.
+      this.paginationConfig.itemsPerPageOptions.sort((a, b) => a.value < b.value ? -1 : 1)
+      const optionAll = this.paginationConfig.itemsPerPageOptions.shift()
+      this.paginationConfig.itemsPerPageOptions.push(optionAll)
+
+      this.updatePaginationConfig({
         itemsPerPage,
-        itemsPerPageOptions: itemsPerPageOptions.map(item => ({
-          label: ['string', 'number'].includes(typeof item) ? item.toString() : (item.label || item.value),
-          value: ['string', 'number'].includes(typeof item) ? ~~item : (item.value ?? item.label)
-        })),
-        page,
-        start: this.pagination?.start || 1,
-        end: total >= (itemsPerPageOrTotal * page) ? (itemsPerPageOrTotal * page) : (total % (itemsPerPageOrTotal * page)),
-        total,
-        pagesCount: Math.ceil(total / itemsPerPageOrTotal)
+        page: this.pagination.page || 1,
+        total: this.pagination.total || this.items.length
+      })
+    },
+
+    updatePaginationConfig ({ itemsPerPage, page, total }) {
+      if (total) this.paginationConfig.total = total
+      if (itemsPerPage !== undefined) {
+        this.paginationConfig.itemsPerPage = itemsPerPage
+        itemsPerPage = itemsPerPage || this.paginationConfig.total // If `0`, take all the results.
+        this.paginationConfig.page = 1;
+        ({ page } = this.paginationConfig) // Shorthand var for next lines.
+        total = this.paginationConfig.total // Shorthand var for next lines.
+        this.paginationConfig.start = 1
+        this.paginationConfig.end = total >= (itemsPerPage * page) ? (itemsPerPage * page) : (total % (itemsPerPage * page))
+        this.paginationConfig.pagesCount = Math.ceil(total / itemsPerPage)
       }
+      if (page) this.goToPage(page)
     },
 
-    goToPage (page) {
+    /**
+     * Goes to a given page or to the next or previous page.
+     *
+     * @param {Number|String} page a number to go to a specific page or `-1`, `+1` for prev & next page.
+     */
+    async goToPage (page) {
       if (['-1', '+1'].includes(page)) this.paginationConfig.page += +page
       else this.paginationConfig.page = page
-      const { itemsPerPage } = this.paginationConfig
+      const { itemsPerPage, total } = this.paginationConfig
       this.paginationConfig.page = Math.max(1, this.paginationConfig.page)
       this.paginationConfig.start = (itemsPerPage * (this.paginationConfig.page - 1)) + 1
-      this.paginationConfig.end = (this.paginationConfig.start - 1) + itemsPerPage
+      this.paginationConfig.end = (this.paginationConfig.start - 1) + (itemsPerPage || total)
+
+      if (typeof this.fetch === 'function') await this.callApiFetch()
+    },
+
+    /**
+     * Call a user provided fetch function in order to fetch table items from an API.
+     * While waiting for the call to resolve, nothing in the table will change.
+     */
+    async callApiFetch () {
+      const { page, start, end, total, itemsPerPage } = this.paginationConfig
+      return await this.fetch({
+        page,
+        start,
+        end: end || total,
+        total,
+        itemsPerPage: itemsPerPage || total,
+        sorting: this.activeSorting
+      })
     }
   },
 
@@ -590,7 +647,7 @@ export default {
     if ((this.expandedRows || []).length) this.expandedRowsInternal = this.expandedRows
     if ((this.selectedRows || []).length) this.selectedRowsInternal = this.selectedRows
 
-    if (this.pagination) this.updatePaginationConfig()
+    if (this.pagination) this.initPagination()
   },
 
   watch: {
@@ -617,9 +674,14 @@ export default {
       this.selectedRowsInternal = Array.isArray(array) && array.length ? this.selectedRows : []
     },
 
-    pagination: {
-      handler () { this.updatePaginationConfig() },
-      deep: true
+    'pagination.page' (page) {
+      this.updatePaginationConfig({ page })
+    },
+    'pagination.itemsPerPage' (itemsPerPage) {
+      this.updatePaginationConfig({ itemsPerPage })
+    },
+    'pagination.total' (total) {
+      this.updatePaginationConfig({ total })
     }
   }
 }
@@ -655,6 +717,12 @@ $tr-border-top: 1px;
     user-select: none;
   }
 
+  // Table columns.
+  // ------------------------------------------------------
+  &__col--highlighted {
+    background-color: rgba(var(--w-contrast-bg-color-rgb), 0.04);
+  }
+
   // Table headers.
   // ------------------------------------------------------
   thead {position: relative;}
@@ -744,7 +812,7 @@ $tr-border-top: 1px;
     left: 0;
     right: 0;
   }
-  &__progress-bar td {padding: 0;height: 1px;}
+  &__progress-bar td {padding: 0;height: 0;}
   @-moz-document url-prefix() {
     &__progress-bar td {height: 100%;}
   }
@@ -753,7 +821,7 @@ $tr-border-top: 1px;
     display: flex;
     align-items: center;
     justify-content: center;
-    height:100%;
+    height: 100%;
     width: 100%;
     padding-top: 2 * $base-increment;
     padding-bottom: 2 * $base-increment;
@@ -761,6 +829,9 @@ $tr-border-top: 1px;
 
   // Table body.
   // ------------------------------------------------------
+  tbody {transition: opacity $transition-duration;}
+  &--loading-in-header tbody {opacity: 0.6;}
+
   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;}
@@ -818,52 +889,79 @@ $tr-border-top: 1px;
 
   // Table footer.
   // ------------------------------------------------------
-  &__footer &__cell {
-    padding-top: $base-increment;
-    padding-bottom: $base-increment;
-  }
-
   &--fixed-footer tfoot {
     position: sticky;
-    bottom: 0;
+    bottom: -1px;
     background-color: $base-bg-color;
     z-index: 1; // For sticky columns to go under.
 
     &:after {
       content: '';
       position: absolute;
-      bottom: 0;
+      top: 0;
       left: 0;
       right: 0;
-      border-bottom: $border;
+      border-top: $border;
     }
   }
 
+  &__footer &__cell {
+    padding-top: $base-increment;
+    padding-bottom: $base-increment;
+  }
+
   // Pagination.
   // ------------------------------------------------------
-  &__pagination-wrap {
-    border-top: $border;
-  }
   &__pagination {
     display: flex;
     align-items: center;
     justify-content: flex-end;
 
-    .pagination-number--items-per-page {
-      flex-grow: 0;
+    .w-pagination__items-per-page {
+      flex: 0 0 auto;
       text-align: right;
     }
 
-    .pagination-arrows {
+    .pages-wrap {
       margin-left: 3 * $base-increment;
       margin-right: 3 * $base-increment;
+      overflow: auto;
+      max-height: 4.5em;
+    }
+
+    .w-pagination__page {
+      margin: 0.5 * $base-increment;
+      font-size: 0.9em;
+      aspect-ratio: 1;
+      overflow: hidden;
+      color: rgba(var(--w-base-color-rgb), 0.65);
+      background-color: rgba(var(--w-base-bg-color-rgb), 0.4);
+
+      &:hover:before {
+        background-color: $primary;
+        opacity: 0.1;
+      }
+      &:active:before {
+        background-color: $primary;
+        opacity: 0.2;
+      }
+
+      &--active {
+        font-weight: bold;
+        color: $primary;
+
+        &:before {
+          background-color: $primary;
+          opacity: 0.1;
+        }
+      }
     }
 
-    .pagination-number--of {
+    .w-pagination__results {
       margin-left: $base-increment;
       margin-right: $base-increment;
+      white-space: nowrap;
     }
-    .w-select__selection {max-width: 60px;}
   }
 }
 

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

@@ -6,11 +6,11 @@ ul.w-tree(:class="classes")
     :class="itemClasses(item)")
     //- The keys `route` & `disabled` are always present in any currentDepthItems.
     component.w-tree__item-label(
-      :is="!disabled && !item.disabled && item.route ? (!$router || hasExternalLink(item) ? 'a' : 'router-link') : 'div'"
+      :is="getTreeItemComponent(item)"
       v-bind="item.route && { [!$router || hasExternalLink(item) ? 'href' : 'to']: item.route }"
       @click="!disabled && !item.disabled && onLabelClick(item, $event)"
       @keydown="!disabled && !item.disabled && onLabelKeydown(item, $event)"
-      :tabindex="!disabled && !item.disabled && (item.children || item.branch || selectable) && !(unexpandableEmpty && !item.children) ? 0 : null")
+      :tabindex="getTreeItemTabindex(item)")
       //- @click.stop to not follow link if item is a link.
       w-button.w-tree__item-expand(
         v-if="(item.children || item.branch) && ((expandOpenIcon && item.open) || expandIcon) && !(unexpandableEmpty && !item.children)"
@@ -22,7 +22,12 @@ ul.w-tree(:class="classes")
         :disabled="disabled || item.disabled"
         text
         sm)
-      slot(name="item" :item="item.originalItem" :depth="depth" :open="item.open")
+      slot(
+        name="item"
+        :item="item.originalItem"
+        :depth="depth"
+        :path="item.path"
+        :open="item.open")
         w-icon(v-if="itemIcon(item)" class="w-tree__item-icon" :color="item.originalItem[itemIconColorKey] || iconColor") {{ itemIcon(item) }}
         span(v-html="item.label")
         span.ml1(v-if="counts && (item.children || item.branch)").
@@ -30,13 +35,14 @@ ul.w-tree(:class="classes")
     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 })")
+      @after-enter="$emit('open', { item: item.originalItem, open: item.open, depth, path: getTreeItemPathForOutput(item) })"
+      @after-leave="$emit('close', { item: item.originalItem, open: item.open, depth, path: getTreeItemPathForOutput(item) })")
       w-tree(
         v-if="item.children && item.open"
         v-bind="$props"
         :depth="depth + 1"
         :data="item.originalItem.children"
+        :parent="item"
         @before-open="$emit('before-open', $event)"
         @open="$emit('open', $event)"
         @before-close="$emit('before-close', $event)"
@@ -44,8 +50,8 @@ ul.w-tree(:class="classes")
         @click="$emit('click', $event)"
         @select="$emit('select', $event)"
         @update:model-value="$emit('update:model-value', $event)")
-        template(#item="{ item, depth, open }")
-          slot(name="item" :item="item" :depth="depth" :open="open")
+        template(#item="{ item, depth, path, open }")
+          slot(name="item" :item="item" :depth="depth" :path="path" :open="open")
 </template>
 
 <script>
@@ -60,7 +66,8 @@ export default {
   props: {
     modelValue: { type: [Object, Array] },
     data: { type: [Object, Array], required: true },
-    depth: { type: Number, default: 0 },
+    depth: { type: Number, default: 0 }, // To get the context from nested items.
+    parent: { type: Object, default: null }, // To get the context from nested items.
     branchClass: { type: String },
     leafClass: { type: String },
     branchIcon: { type: String },
@@ -115,7 +122,7 @@ export default {
       if (!Array.isArray(items)) items = [items]
 
       items.forEach((item, i) => {
-        this.currentDepthItems.push({
+        const itemWrapper = {
           originalItem: item, // Store the original item to return it on event emits.
           _uid: this.depth.toString() + (i + 1),
           label: item[this.itemLabelKey],
@@ -124,11 +131,48 @@ export default {
           route: item[this.itemRouteKey],
           disabled: item[this.itemDisabledKey],
           depth: this.depth,
-          open: !!(oldItems[i]?.open || this.expandAll || item[this.itemOpenKey])
-        })
+          open: !!(oldItems[i]?.open || this.expandAll || item[this.itemOpenKey]),
+          parent: this.parent || null,
+          path: [] // Ancestors path from root to leaf including self.
+        }
+        itemWrapper.path = this.getTreeItemPath(itemWrapper)
+        this.currentDepthItems.push(itemWrapper)
       })
     },
 
+    getTreeItemComponent (item) {
+      return !this.disabled && !item.disabled && item.route ? (!this.$router || this.hasExternalLink(item) ? 'a' : 'router-link') : 'div'
+    },
+
+    getTreeItemTabindex (item) {
+      return !this.disabled && !item.disabled && (item.children || item.branch || this.selectable) && !(this.unexpandableEmpty && !item.children) ? 0 : null
+    },
+
+    /**
+     * Get the tree path of the given item.
+     * The full ancestors items are stored in the array and not only their `originalItem`s in case
+     * it is mutated before we return it to the user through slots and emitted events.
+     * Before it is returned to the user, this array is mapped to only give the `originalItem`s.
+     *
+     * @param {Object} item the tree item to get the ancestors path for.
+     * @return an array of item objects from the root to the leaf (including the item itself).
+     */
+    getTreeItemPath (item) {
+      const ancestorsPath = [item]
+
+      let ancestor = item.parent
+      while (ancestor) {
+        ancestorsPath.push(ancestor)
+        ancestor = ancestor.parent
+      }
+      ancestorsPath.reverse()
+      return ancestorsPath
+    },
+
+    getTreeItemPathForOutput (item) {
+      return item.path.map(item => item.originalItem)
+    },
+
     /**
      * Expand/collapse the given tree item when possible (not disabled, has children).
      *
@@ -139,7 +183,12 @@ export default {
       if (typeof open === 'boolean') item.open = open
       else item.open = !item.open
 
-      const emitParams = { item: item.originalItem, open: item.open, depth: this.depth }
+      const emitParams = {
+        item: item.originalItem,
+        open: item.open,
+        depth: this.depth,
+        path: this.getTreeItemPathForOutput(item)
+      }
 
       this.$emit(item.open ? 'before-open' : 'before-close', emitParams)
 
@@ -154,14 +203,24 @@ export default {
       const route = item[this.itemRouteKey]
       if (route && this.$router && !this.hasExternalLink(item)) e.preventDefault()
 
-      this.$emit('click', { item: item.originalItem, depth: this.depth, e })
+      this.$emit('click', {
+        item: item.originalItem,
+        depth: this.depth,
+        path: this.getTreeItemPathForOutput(item),
+        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 }
+      const emitParams = {
+        item: item.originalItem,
+        depth: this.depth,
+        path: this.getTreeItemPathForOutput(item),
+        e
+      }
       if (item.children || (item.branch && !this.unexpandableEmpty)) {
         emitParams.open = item.open
       }
@@ -299,8 +358,8 @@ $expand-icon-size: 20px;
       right: - $base-increment - 2px;
       border-radius: $border-radius;
     }
-    &:hover:before {background-color: rgba($primary, 0.05);}
-    &:focus:before {background-color: rgba($primary, 0.1);}
+    &:hover:before {background-color: $primary;opacity: 0.1;}
+    &:focus:before {background-color: $primary;opacity: 0.2;}
   }
   &__item--leaf &__item-label:before {
     left: - $base-increment;