wave-ui 3.11.0 → 3.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.11.0",
+  "version": "3.12.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-autocomplete.vue

@@ -81,12 +81,6 @@ export default {
       return this.normalize(this.keywords)
     },
 
-    // Keep the autocomplete matching as fast as possible by caching optimized search strings.
-    // An array of optimized strings.
-    normalizedSelection () {
-      return this.selection.map(item => this.normalize(item?.searchable))
-    },
-
     // Keep the autocomplete matching as fast as possible by caching optimized search strings.
     optimizedItemsForSearch () {
       return this.items.map((item, i) => ({
@@ -98,8 +92,7 @@ export default {
 
     filteredItems () {
       let items = this.optimizedItemsForSearch // Array of objects.
-      const selection = this.normalizedSelection.join(',') // Optimized string of coma separated words.
-      const isItemNotSelected = item => !selection.includes(item.searchable)
+      const isItemNotSelected = item => !this.selection.find(i => i.uid === item.uid)
 
       if (this.keywords) {
         items = items.filter(item => {

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

@@ -478,6 +478,7 @@ $inactive-color: #777;
     align-items: center;
     background: none;
     border: none;
+    border-radius: inherit; // Mostly for the browser-autofilled appearance.
     outline: none;
     padding-left: 2 * $base-increment;
     padding-right: 2 * $base-increment;

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

@@ -34,10 +34,11 @@ component(
         :aria-owns="`w-select-menu--${_.uid}`"
         :aria-activedescendant="`w-select-menu--${_.uid}_item-1`"
         :class="inputWrapClasses")
-        w-icon.w-select__icon.w-select__icon--inner-left(
-          v-if="innerIconLeft"
-          tag="label"
-          @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
+        slot(name="icon-left")
+          w-icon.w-select__icon.w-select__icon--inner-left(
+            v-if="innerIconLeft"
+            tag="label"
+            @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
         .w-select__selection-slot(v-if="$slots.selection")
           //- inputValue is always an array.
           slot(name="selection" :item="multiple ? inputValue : inputValue[0]")
@@ -60,10 +61,11 @@ component(
             v-if="$slots.default || label"
             :class="labelClasses")
             slot {{ label }}
-        w-icon.w-select__icon.w-select__icon--inner-right(
-          v-if="innerIconRight"
-          tag="label"
-          @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
+        slot(name="icon-right")
+          w-icon.w-select__icon.w-select__icon--inner-right(
+            v-if="innerIconRight"
+            tag="label"
+            @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
     w-list(
       ref="w-list"
       :model-value="inputValue"

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

@@ -150,6 +150,7 @@ $outline-width: 2px;
   align-items: center;
   vertical-align: middle;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 
   @include themeable;
 
@@ -157,7 +158,6 @@ $outline-width: 2px;
   &--disabled, &--readonly {
     cursor: not-allowed;
     touch-action: initial;
-    -webkit-tap-highlight-color: transparent;
   }
 
   // Hidden checkbox.

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

@@ -609,16 +609,33 @@ export default {
       })
     },
 
+    /**
+     * Updates the pagination object and fills up missing variables to always maintain the paginationConfig
+     * object accurate for external use (read and write).
+     * The following vars will always be up to date and if one changes from outside the rest of them
+     * will update accordingly: itemsPerPage, itemsPerPageOptions, start, end, page, total.
+     *
+     * @param {Object} config The config object defining the pagination.
+     *  This object can have at most itemsPerPage, page, total, and it will define the start, end and
+     *  pagesCount from the given or current itemsPerPage, page and total.
+     *  - If a total is given for update, trust it blindly (could come from a backend), and recompute
+     *    the rest as long as itemsPerPage is defined.
+     *  - If a page is given for update, it will navigate to that page.
+     *  - If an itemsPerPage is given for update, it will navigate to that page.
+     */
     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 = page || this.paginationConfig.page || 1
+
         page = this.paginationConfig.page // Shorthand var for next lines.
         total = this.paginationConfig.total // Shorthand var for next lines.
+        const itemsInAllPages = itemsPerPage * page
         this.paginationConfig.start = 1
-        this.paginationConfig.end = total >= (itemsPerPage * page) ? (itemsPerPage * page) : (total % (itemsPerPage * page))
+        this.paginationConfig.end = total >= itemsInAllPages ? itemsInAllPages : (total % itemsInAllPages)
+
         this.paginationConfig.pagesCount = Math.ceil(total / itemsPerPage)
       }
       if (page) this.goToPage(page)

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

@@ -17,11 +17,12 @@ component(
 
   //- Input wrapper.
   .w-textarea__textarea-wrap(:class="inputWrapClasses")
-    w-icon.w-textarea__icon.w-textarea__icon--inner-left(
-      v-if="innerIconLeft"
-      tag="label"
-      :for="`w-textarea--${_.uid}`"
-      @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
+    slot(name="icon-left" :input-id="`w-textarea--${_.uid}`")
+      w-icon.w-textarea__icon.w-textarea__icon--inner-left(
+        v-if="innerIconLeft"
+        tag="label"
+        :for="`w-textarea--${_.uid}`"
+        @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
     textarea.w-textarea__textarea(
       ref="textarea"
       v-model="inputValue"
@@ -44,11 +45,12 @@ component(
         v-if="$slots.default || label"
         :class="labelClasses")
         slot {{ label }}
-    w-icon.w-textarea__icon.w-textarea__icon--inner-right(
-      v-if="innerIconRight"
-      tag="label"
-      :for="`w-textarea--${_.uid}`"
-      @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
+    slot(name="icon-right" :input-id="`w-textarea--${_.uid}`")
+      w-icon.w-textarea__icon.w-textarea__icon--inner-right(
+        v-if="innerIconRight"
+        tag="label"
+        :for="`w-textarea--${_.uid}`"
+        @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
 
   //- Right label.
   template(v-if="labelPosition === 'right'")