@ditojs/ui 2.11.2 → 2.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/ui",
-  "version": "2.11.2",
+  "version": "2.12.0",
   "type": "module",
   "description": "Dito.js UI is a simple UI library, built with Vue.js for use in Dito.js Admin and elsewhere",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/ui",
@@ -32,18 +32,18 @@
     "ie_mob >= 11"
   ],
   "dependencies": {
-    "@ditojs/utils": "^2.11.1",
+    "@ditojs/utils": "^2.12.0",
     "@soda/get-current-script": "^1.0.2"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.11.0",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@ditojs/build": "^2.12.0",
+    "@vitejs/plugin-vue": "^4.3.4",
     "@vue/compiler-sfc": "^3.3.4",
     "pug": "^3.0.2",
-    "sass": "1.64.2",
-    "vite": "^4.4.8"
+    "sass": "1.66.1",
+    "vite": "^4.4.9"
   },
-  "gitHead": "681f441e6d90931bbfa7dfb301fb480d7b6fc4cf",
+  "gitHead": "186a1020c58e17182a19895e5f5df2955a22c301",
   "scripts": {
     "build:icons": "yarn inline-assets src/icons/*.svg --template src/icons/template.js > src/styles/mixins/_icons.scss",
     "build:vue": "vite build",

package/src/components/Pagination.vue

@@ -6,21 +6,19 @@
   )
     template(
       v-if="total > 0"
-    ) {{ first }} – {{ last }}
-    template(
-      v-else
-    ) 0
-    | / {{ total }}
-  .dito-buttons.dito-buttons-round
+    ) {{ first }} – {{ last }} / {{ total }}
+  .dito-buttons.dito-buttons-round(
+    v-if="numPages > 1"
+  )
     button.dito-button(
-      v-for="page in pageRange"
-      :class="getPageClass(page)"
-      :disabled="page.disabled"
-      @click="onClickPage(page)"
+      v-for="button in buttons"
+      :class="getButtonClasses(button)"
+      :disabled="button.disabled"
+      @click="onClickButton(button)"
     )
       span(
-        v-if="page.text"
-      ) {{ page.text }}
+        v-if="button.text"
+      ) {{ button.text }}
 </template>
 
 <script>
@@ -36,84 +34,46 @@ export default {
 
   data() {
     return {
-      pageRange: [],
       showPrev: true,
       showNext: true,
-      numPages: 0,
-      currentPageSize: this.pageSize,
       currentPage: this.page
     }
   },
 
   computed: {
     first() {
-      return (this.currentPage - 1) * this.currentPageSize + 1
+      return (this.currentPage - 1) * this.pageSize + 1
     },
 
     last() {
-      return Math.min(this.first + this.currentPageSize - 1, this.total)
+      return Math.min(this.first + this.pageSize - 1, this.total)
+    },
+
+    numPages() {
+      return Math.ceil(this.total / this.pageSize)
     }
   },
 
   watch: {
-    total: 'updatePageRange',
-    showPrev: 'updatePageRange',
-    showNext: 'updatePageRange',
-
     page(page) {
       this.currentPage = page
     },
 
-    pageSize(pageSize) {
-      this.currentPageSize = pageSize
-    },
-
-    currentPageSize(currentPageSize) {
-      this.numPages = Math.ceil(this.total / currentPageSize)
+    pageSize() {
       if (this.currentPage > this.numPages) {
         this.currentPage = this.numPages
       }
-      this.updatePageRange()
     },
 
     currentPage(to, from) {
       if (to !== from) {
-        this.updatePageRange()
         this.$emit('update:page', to)
       }
-    }
-  },
-
-  created() {
-    this.currentPage = this.page
-    this.currentPageSize = this.pageSize
-  },
-
-  mounted() {
-    this.updatePageRange()
-  },
-
-  methods: {
-    onClickPage(page) {
-      if (page.index && !page.disabled && page.index !== this.currentPage) {
-        this.currentPage = page.index
-      }
     },
 
-    getPageClass(page) {
-      const classes = {
-        'dito-selected': page.active
-      }
-      if (page.type) {
-        classes[`dito-button-${page.type}`] = true
-      }
-      return classes
-    },
-
-    updatePageRange() {
-      const { showPrev, showNext, total, currentPageSize, currentPage } = this
+    buttons() {
+      const { showPrev, showNext, currentPage, numPages } = this
       const showLength = showPrev + showNext + 1
-      const numPages = (this.numPages = Math.ceil(total / currentPageSize))
 
       let start = 1
       let end = 1
@@ -129,44 +89,70 @@ export default {
         end = currentPage + showNext
       }
 
-      const pageRange = []
-      pageRange.push({
+      const buttons = []
+      buttons.push({
         index: currentPage - 1,
         type: 'prev',
         disabled: currentPage <= 1
       })
       if (start >= 2) {
-        pageRange.push({ index: 1, text: 1 })
+        buttons.push({ index: 1, text: 1 })
       }
       if (start > 2) {
-        pageRange.push({
+        buttons.push({
           index: Math.max(1, currentPage - 10),
           type: 'ellipsis-prev'
         })
       }
       for (let i = start; i <= end; i++) {
-        pageRange.push({
+        buttons.push({
           index: i,
           text: i,
           active: i === currentPage
         })
       }
       if (end < numPages - 1) {
-        pageRange.push({
+        buttons.push({
           index: Math.min(numPages, currentPage + 10),
           type: 'ellipsis-next'
         })
       }
       if (end <= numPages - 1) {
-        pageRange.push({ index: numPages, text: numPages })
+        buttons.push({ index: numPages, text: numPages })
       }
-      pageRange.push({
+      buttons.push({
         index: currentPage + 1,
         type: 'next',
         disabled: currentPage >= numPages
       })
 
-      this.pageRange = pageRange
+      return buttons
+    }
+  },
+
+  created() {
+    this.currentPage = this.page
+  },
+
+  methods: {
+    getButtonClasses(button) {
+      const classes = {
+        'dito-selected': button.active
+      }
+      if (button.type) {
+        classes[`dito-button-${button.type}`] = true
+      }
+      return classes
+    },
+
+    onClickButton(button) {
+      if (
+        button.index &&
+        !button.disabled &&
+        button.index !== this.currentPage
+      ) {
+        this.currentPage = button.index
+      }
     }
   }
 }