wave-ui 3.1.0 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "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",
@@ -49,24 +49,25 @@
     "lint": "vite lint"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/core": "^7.21.3",
+    "@babel/eslint-parser": "^7.21.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@faker-js/faker": "^7.6.0",
     "@mdi/font": "^5.9.55",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vue/compiler-sfc": "3.2.45",
-    "autoprefixer": "^10.4.13",
-    "axios": "^0.25.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^9.9.0",
+    "autoprefixer": "^10.4.14",
+    "axios": "^1.3.4",
+    "eslint": "^8.36.0",
+    "eslint-plugin-vue": "^9.10.0",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.11.4",
+    "gsap": "^3.11.5",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
     "postcss": "^8.4.21",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.58.3",
+    "sass": "^1.60.0",
     "simple-syntax-highlighter": "^2.2.5",
     "splitpanes": "^3.1.5",
     "standard": "^17.0.0",

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

@@ -59,7 +59,7 @@
 
       //- Normal rows.
       template(v-if="tableItems.length && loading !== true")
-        template(v-for="(item, i) in sortedItems" :key="i")
+        template(v-for="(item, i) in paginatedItems" :key="i")
           //- Fully custom tr (`item` slot).
           slot(
             v-if="$slots.item"
@@ -136,26 +136,41 @@
       tr.w-table__row.w-table__pagination-wrap(v-if="pagination && paginationConfig")
         td.w-table__cell(:colspan="headers.length")
           .w-table__pagination
-            w-select.pagination-number.pagination-number--items-per-page(
-              v-if="paginationConfig.itemsPerPageOptions"
-              v-model="paginationConfig.itemsPerPage"
-              :items="paginationConfig.itemsPerPageOptions"
-              label-position="left"
-              label="Items per page"
-              label-color="inherit")
-            span.pagination-number.pagination-number--results.
-              {{ paginationConfig.start }}-{{ paginationConfig.end }} of {{ paginationConfig.total }}
-            .pagination-arrows
-              w-button.pagination-arrow.pagination-arrow--prev(
-                @click="paginationConfig.page--"
-                icon="wi-chevron-left"
-                text
-                lg)
-              w-button.pagination-arrow.pagination-arrow--next(
-                @click="paginationConfig.page++"
-                icon="wi-chevron-right"
-                text
-                lg)
+            | {{ paginationConfig }}
+            slot(
+              name="pagination"
+              :range="`${paginationConfig.start}-${paginationConfig.end} of ${paginationConfig.total}`"
+              :total="paginationConfig.total")
+              w-select.pagination-number.pagination-number--items-per-page(
+                v-if="paginationConfig.itemsPerPageOptions"
+                v-model="paginationConfig.itemsPerPage"
+                @input="updatePaginationConfig"
+                :items="paginationConfig.itemsPerPageOptions"
+                label-position="left"
+                label="Items per page"
+                label-color="inherit")
+              .pagination-arrows
+                w-button.pagination-arrow.pagination-arrow--prev(
+                  @click="goToPage('-1')"
+                  :disabled="paginationConfig.page <= 1"
+                  icon="wi-chevron-left"
+                  text
+                  lg)
+                w-button.pagination-arrow.pagination-arrow--prev(
+                  v-for="i in paginationConfig.pagesCount"
+                  :key="i"
+                  @click="goToPage(i)"
+                  round
+                  text
+                  lg) {{ i }}
+                w-button.pagination-arrow.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 }}
 </template>
 
 <script>
@@ -339,6 +354,10 @@ 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)
     }
   },
 
@@ -535,17 +554,32 @@ export default {
     },
 
     updatePaginationConfig () {
-      const itemsPerPage = this.pagination?.itemsPerPage || 10
+      const itemsPerPage = this.pagination?.itemsPerPage || 20
+      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 = {
         itemsPerPage,
-        itemsPerPageOptions: this.pagination?.itemsPerPageOptions || [{ label: '10', value: 10 }, { label: '100', value: 100 }, { label: 'All', value: 0 }],
+        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 >= (itemsPerPage * page) ? (itemsPerPage * page) : (total % (itemsPerPage * page)),
-        total
+        end: total >= (itemsPerPageOrTotal * page) ? (itemsPerPageOrTotal * page) : (total % (itemsPerPageOrTotal * page)),
+        total,
+        pagesCount: Math.ceil(total / itemsPerPageOrTotal)
       }
+    },
+
+    goToPage (page) {
+      if (['-1', '+1'].includes(page)) this.paginationConfig.page += +page
+      else this.paginationConfig.page = page
+      const { itemsPerPage } = 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
     }
   },
 
@@ -581,6 +615,11 @@ export default {
 
     selectedRows (array) {
       this.selectedRowsInternal = Array.isArray(array) && array.length ? this.selectedRows : []
+    },
+
+    pagination: {
+      handler () { this.updatePaginationConfig() },
+      deep: true
     }
   }
 }
@@ -800,27 +839,31 @@ $tr-border-top: 1px;
     }
   }
 
+  // Pagination.
+  // ------------------------------------------------------
+  &__pagination-wrap {
+    border-top: $border;
+  }
   &__pagination {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    padding-top: $base-increment;
-    padding-bottom: $base-increment;
 
     .pagination-number--items-per-page {
-      margin-right: 6 * $base-increment;
       flex-grow: 0;
       text-align: right;
     }
+
+    .pagination-arrows {
+      margin-left: 3 * $base-increment;
+      margin-right: 3 * $base-increment;
+    }
+
     .pagination-number--of {
       margin-left: $base-increment;
       margin-right: $base-increment;
     }
     .w-select__selection {max-width: 60px;}
-
-    .pagination-arrows {
-      margin-left: 6 * $base-increment;
-    }
   }
 }
 

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

@@ -48,7 +48,7 @@ $base-font-size: 14px !default; // Must be a px unit.
 $base-increment: round(divide($base-font-size, 4)) !default;
 $layout-padding: $base-increment * 4 !default; // Applied on the .content-wrap tag.
 $border-radius: 3px !default;
-$border-color: rgba(var(--w-contrast-bg-color-rgb), 0.15) !default;
+$border-color: rgba(var(--w-contrast-bg-color-rgb), 0.12) !default;
 $border: 1px solid $border-color !default;
 $transition-duration: 0.25s !default;
 $fast-transition-duration: 0.15s !default;