@tak-ps/vue-tabler 3.4.0 → 3.6.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v3.6.0
+
+- :rocket: Add `TablerPager` component for iterating over a list
+
+### v3.5.0
+
+- :rocket: Add `TablerNone` component for use when a list or property is empty
+
 ### v3.4.0
 
 - :rocket: Add `TablerSchema` component for creating forms from basic JSON Schemas

package/components/None.vue

@@ -0,0 +1,49 @@
+<template>
+<div class='card-body'>
+    <div class='d-flex justify-content-center' :class='{
+        "mt-4 mb-2": !compact
+    }'>
+        <NotesOffIcon v-if='compact' width='32' height='32' />
+        <NotesOffIcon v-else width='48' height='48' />
+    </div>
+
+    <div class='text-center' :class='{
+        "mb-4 mt-2": !compact
+    }'>
+        <div>No <span v-text='label'/></div>
+    </div>
+
+    <div v-if='create' @click='$emit("create")' class='d-flex justify-content-center my-4' :class='{
+        "my-4": !compact
+    }'>
+        <div class='btn btn-primary'><span>Create <span v-text='label'/></span></div>
+    </div>
+</div>
+</template>
+
+<script>
+import {
+    NotesOffIcon
+} from 'vue-tabler-icons'
+
+export default {
+    name: 'TablerNone',
+    props: {
+        label: {
+            type: String,
+            default: 'Items'
+        },
+        compact: {
+            type: Boolean,
+            default: false
+        },
+        create: {
+            type: Boolean,
+            default: true
+        },
+    },
+    components: {
+        NotesOffIcon
+    }
+}
+</script>

package/components/Pager.vue

@@ -0,0 +1,122 @@
+<template>
+<div class='pagination m-0 ms-auto'>
+    <div>
+        <template v-if='parseInt(total) <= parseInt(limit)'>
+            <button @click='page(0)' class='btn mx-1' >
+                <HomeIcon class='icon'/>Home
+            </button>
+        </template>
+        <template v-else>
+            <button @click='page(0)' class='btn mx-1' :class='{ "btn-primary": current === 0 }'>
+                <HomeIcon class='icon'/>Home
+            </button>
+
+            <template v-if='end > 5 && current > 3'>
+                <span class=''> ... </span>
+            </template>
+
+            <template v-if='parseInt(total) / parseInt(limit) > 2'>
+                <button
+                    :key=i
+                    v-for='i in middle'
+                    @click='page(i)'
+                    class='btn mx-1'
+                    v-text='i + 1'
+                    :class='{ "btn-primary": current === i }'
+                >
+                </button>
+            </template>
+
+            <template v-if='end > 5 && current < end - spread'>
+                <span class=''> ... </span>
+            </template>
+            <button
+                @click='page(end - 1)'
+                class='btn mx-1'
+                v-text='end'
+                :class='{ "btn-primary": current === end - 1 }'
+            ></button>
+        </template>
+    </div>
+</div>
+</template>
+
+<script>
+import {
+    HomeIcon
+} from 'vue-tabler-icons';
+
+export default {
+    name: 'TablerPager',
+    props: [ 'total', 'limit' ],
+    data: function() {
+        return this.create();
+    },
+    watch: {
+        total: function() {
+            const set = this.create();
+
+            this.spread = set.spread;
+            this.middle = set.middle;
+            this.current = set.current;
+            this.end = set.end;
+        },
+        limit: function() {
+            const set = this.create();
+
+            this.spread = set.spread;
+            this.middle = set.middle;
+            this.current = set.current;
+            this.end = set.end;
+        },
+        current: function() {
+            if (this.end < 5) return; // All buttons are shown already
+
+            let start;
+            if (this.current <= 3) {
+                start = 0;
+            } else if (this.current >= this.end - 4) {
+                start = this.end - this.spread - 2;
+            } else {
+                start = this.current - 3;
+            }
+
+            this.middle = this.middle.map((ele, i) => {
+                return start + i + 1;
+            });
+        }
+    },
+    methods: {
+        create: function() {
+            const end = Math.ceil(parseInt(this.total) / parseInt(this.limit));
+            let spread; //Number of pages in between home button and last page
+            if (end <= 2) {
+                spread = 0;
+            } else if (end >= 7) {
+                spread = 5;
+            } else {
+                spread = end - 2;
+            }
+
+            // Array containing middle page number
+            let middleAr = new Array(spread).fill(1, 0, spread).map((ele, i) => {
+                return 1 + i;
+            });
+
+            return {
+                spread: spread,
+                middle: middleAr,
+                current: 0,
+                end: end
+            };
+        },
+        page: function(page) {
+            this.current = page;
+            this.$emit('page', this.current);
+        }
+    },
+    components: {
+        HomeIcon
+    }
+}
+</script>

package/lib.js

@@ -1,3 +1,5 @@
+export { default as TablerPager } from './components/Pager.vue'
+export { default as TablerNone } from './components/None.vue'
 export { default as TablerError } from './components/Err.vue'
 export { default as TablerList } from './components/List.vue'
 export { default as TablerHelp } from './components/Help.vue'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "3.4.0",
+    "version": "3.6.0",
     "lib": "lib.js",
     "module": "lib.js",
     "description": "Tabler UI components for Vue3",