@tak-ps/vue-tabler 3.5.0 → 3.7.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v3.7.0
+
+- :rocket: Include `description` and `required` to `TablerSchema` and sub components
+
+### 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

package/components/Enum.vue

@@ -1,17 +1,24 @@
 <template>
-<div>
-    <label
-        v-if='label'
-        class="form-label"
-        :class='{
-            "required": required
-        }'
-        v-text='label'
-    ></label>
-
-    <select v-model='current' :disabled='disabled' class='form-select'>
-        <option v-for='option in options' :value="option" v-text='option'></option>
-    </select>
+<div class='row'>
+    <div class='col-12 d-flex'>
+        <span v-if='description' style='margin-right: 4px;'>
+            <InfoSquareIcon @click='help = true' size='20' class='cursor-pointer'/>
+            <Help v-if='help' @click='help = false' :label='label || placeholder' :description='description'/>
+        </span>
+        <label
+            v-if='label'
+            class="form-label"
+            v-text='label'
+            :class='{
+                "required": required
+            }'
+        ></label>
+    </div>
+    <div class='col-12'>
+        <select v-model='current' :disabled='disabled' class='form-select'>
+            <option v-for='option in options' :value="option" v-text='option'></option>
+        </select>
+    </div>
 </div>
 </template>
 
@@ -31,6 +38,10 @@ export default {
             type: Boolean,
             required: false
         },
+        description: {
+            type: String,
+            required: false
+        },
         options: {
             type: Array,
             required: true

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/components/Schema.vue

@@ -5,16 +5,30 @@
             <TablerEnum
                 :label='key'
                 :disabled='disabled'
+                :required='schema.properties[key].required'
+                :description='schema.properties[key].description'
                 v-model='data[key]'
                 :options='schema.properties[key].enum'
                 :default='schema.properties[key].default'
             />
         </template>
         <template v-else-if='schema.properties[key].type === "string"'>
-            <TablerInput :label='key' :disabled='disabled' v-model='data[key]'/>
+            <TablerInput
+                :label='key'
+                :disabled='disabled'
+                :required='schema.properties[key].required'
+                :description='schema.properties[key].description'
+                v-model='data[key]'
+            />
         </template>
         <template v-else-if='schema.properties[key].type === "boolean"'>
-            <TablerToggle :label='key' :disabled='disabled' v-model='data[key]'/>
+            <TablerToggle
+                :label='key'
+                :disabled='disabled'
+                :required='schema.properties[key].required'
+                :description='schema.properties[key].description'
+                v-model='data[key]'
+            />
         </template>
         <template v-else-if='schema.properties[key].type === "array"'>
             <div class='d-flex'>
@@ -37,7 +51,11 @@
         </template>
         <template v-else>
             <div class='row'>
-                <TablerInput :label='key' :rows='3' :disabled='disabled' v-model='data[key]'/>
+                <TablerInput
+                    :label='key'
+                    :rows='3'
+                    :disabled='disabled'
+                    v-model='data[key]'/>
             </div>
         </template>
     </div>

package/components/Toggle.vue

@@ -1,6 +1,10 @@
 <template>
 <div>
     <div class='d-flex align-items-center'>
+        <span v-if='description' style='margin-right: 4px;'>
+            <InfoSquareIcon @click='help = true' size='20' class='cursor-pointer'/>
+            <Help v-if='help' @click='help = false' :label='label || placeholder' :description='description'/>
+        </span>
         <label
             v-if='label'
             class='form-label my-1 mx-2'
@@ -32,6 +36,10 @@ export default {
             type: Boolean,
             default: false
         },
+        description: {
+            type: String,
+            default: false
+        },
         label: {
             type: String,
             default: ''

package/lib.js

@@ -1,3 +1,4 @@
+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'

package/package.json

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