@tak-ps/vue-tabler 3.52.0 → 3.53.0

package/components/Loading.vue

@@ -1,26 +1,41 @@
 <template>
-<div :class='{
-    "w-full": !inline,
-    "d-flex": inline
-}'>
-    <template v-if='inline'>
-        <div class='d-flex'>
-            <div class="spinner-border" role="status"></div>
-            <div v-if='desc && desc.length' class='mx-3 align-self-center' v-text='desc'></div>
-        </div>
-    </template>
-    <template v-else>
-        <div class='d-flex justify-content-center my-4'>
-            <div class="spinner-border" role="status"></div>
-        </div>
-
-        <template v-if='desc && desc.length'>
+    <div
+        :class='{
+            "w-full": !inline,
+            "d-flex": inline
+        }'
+    >
+        <template v-if='inline'>
+            <div class='d-flex'>
+                <div
+                    class='spinner-border'
+                    role='status'
+                />
+                <div
+                    v-if='desc && desc.length'
+                    class='mx-3 align-self-center'
+                    v-text='desc'
+                />
+            </div>
+        </template>
+        <template v-else>
             <div class='d-flex justify-content-center my-4'>
-                <div class='' v-text='desc'></div>
+                <div
+                    class='spinner-border'
+                    role='status'
+                />
             </div>
+
+            <template v-if='desc && desc.length'>
+                <div class='d-flex justify-content-center my-4'>
+                    <div
+                        class=''
+                        v-text='desc'
+                    />
+                </div>
+            </template>
         </template>
-    </template>
-</div>
+    </div>
 </template>
 
 <script>

package/components/Markdown.vue

@@ -1,5 +1,5 @@
 <template>
-<div v-html='html'></div>
+    <div v-html='html' />
 </template>
 
 <script>

package/components/Modal.vue

@@ -1,16 +1,26 @@
 <template>
-<div class="modal modal-blur fade show" tabindex="-1" style="display: block;" aria-modal="true" role="dialog">
-      <div class="modal-dialog modal-dialog-centered" role="document" :class='{
-        "modal-sm": size === "sm",
-        "modal-md": size === "md",
-        "modal-lg": size === "lg",
-        "modal-xl": size === "xl",
-      }'>
-            <div class="modal-content">
-                <slot/>
+    <div
+        class='modal modal-blur fade show'
+        tabindex='-1'
+        style='display: block;'
+        aria-modal='true'
+        role='dialog'
+    >
+        <div
+            class='modal-dialog modal-dialog-centered'
+            role='document'
+            :class='{
+                "modal-sm": size === "sm",
+                "modal-md": size === "md",
+                "modal-lg": size === "lg",
+                "modal-xl": size === "xl",
+            }'
+        >
+            <div class='modal-content'>
+                <slot />
             </div>
-      </div>
-</div>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -20,7 +30,7 @@ export default {
         size: {
             // sm, md, lg, xl
             type: String,
-            defaut: 'sm'
+            default: 'sm'
         }
     }
 }

package/components/None.vue

@@ -1,24 +1,45 @@
 <template>
-<div class='card-body'>
-    <div class='d-flex justify-content-center' :class='{
-        "mt-4 mb-2": !compact
-    }'>
-        <IconNotesOff v-if='compact' :size='32' :stroke='1' />
-        <IconNotesOff v-else :size='48' :stroke='1'/>
-    </div>
+    <div class='card-body'>
+        <div
+            class='d-flex justify-content-center'
+            :class='{
+                "mt-4 mb-2": !compact
+            }'
+        >
+            <IconNotesOff
+                v-if='compact'
+                :size='32'
+                :stroke='1'
+            />
+            <IconNotesOff
+                v-else
+                :size='48'
+                :stroke='1'
+            />
+        </div>
 
-    <div class='text-center' :class='{
-        "mb-4 mt-2": !compact
-    }'>
-        <div>No <span v-text='label'/></div>
-    </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
+            v-if='create'
+            class='d-flex justify-content-center my-4'
+            :class='{
+                "my-4": !compact
+            }'
+            @click='$emit("create")'
+        >
+            <div class='btn btn-primary'>
+                <span>Create <span v-text='label' /></span>
+            </div>
+        </div>
     </div>
-</div>
 </template>
 
 <script>
@@ -28,6 +49,9 @@ import {
 
 export default {
     name: 'TablerNone',
+    components: {
+        IconNotesOff
+    },
     props: {
         label: {
             type: String,
@@ -42,8 +66,8 @@ export default {
             default: true
         },
     },
-    components: {
-        IconNotesOff
-    }
+    emits: [
+        'create'
+    ]
 }
 </script>

package/components/Pager.vue

@@ -1,44 +1,58 @@
 <template>
-<div class='pagination m-0 ms-auto'>
-    <div>
-        <template v-if='parseInt(total) <= parseInt(limit)'>
-            <button @click='changePage(0)' class='btn mx-1' >
-                <IconHome :size='32' :stroke='1' class='icon'/>Home
-            </button>
-        </template>
-        <template v-else>
-            <button @click='changePage(0)' class='btn mx-1' :class='{ "btn-primary": current === 0 }'>
-                <IconHome :size='32' :stroke='1' class='icon'/>Home
-            </button>
-
-            <template v-if='end > 5 && current > 3'>
-                <span class=''> ... </span>
-            </template>
-
-            <template v-if='parseInt(total) / parseInt(limit) > 2'>
+    <div class='pagination m-0 ms-auto'>
+        <div>
+            <template v-if='parseInt(total) <= parseInt(limit)'>
                 <button
-                    :key=i
-                    v-for='i in middle'
-                    @click='changePage(i)'
                     class='btn mx-1'
-                    v-text='i + 1'
-                    :class='{ "btn-primary": current === i }'
+                    @click='changePage(0)'
                 >
+                    <IconHome
+                        :size='32'
+                        :stroke='1'
+                        class='icon'
+                    />Home
                 </button>
             </template>
+            <template v-else>
+                <button
+                    class='btn mx-1'
+                    :class='{ "btn-primary": current === 0 }'
+                    @click='changePage(0)'
+                >
+                    <IconHome
+                        :size='32'
+                        :stroke='1'
+                        class='icon'
+                    />Home
+                </button>
+
+                <template v-if='end > 5 && current > 3'>
+                    <span class=''> ... </span>
+                </template>
+
+                <template v-if='parseInt(total) / parseInt(limit) > 2'>
+                    <button
+                        v-for='i in middle'
+                        :key='i'
+                        class='btn mx-1'
+                        :class='{ "btn-primary": current === i }'
+                        @click='changePage(i)'
+                        v-text='i + 1'
+                    />
+                </template>
 
-            <template v-if='end > 5 && current < end - spread'>
-                <span class=''> ... </span>
+                <template v-if='end > 5 && current < end - spread'>
+                    <span class=''> ... </span>
+                </template>
+                <button
+                    class='btn mx-1'
+                    :class='{ "btn-primary": current === end - 1 }'
+                    @click='changePage(end - 1)'
+                    v-text='end'
+                />
             </template>
-            <button
-                @click='changePage(end - 1)'
-                class='btn mx-1'
-                v-text='end'
-                :class='{ "btn-primary": current === end - 1 }'
-            ></button>
-        </template>
+        </div>
     </div>
-</div>
 </template>
 
 <script>
@@ -48,6 +62,9 @@ import {
 
 export default {
     name: 'TablerPager',
+    components: {
+        IconHome
+    },
     props: {
         total: {
             type: Number
@@ -59,6 +76,9 @@ export default {
             type: Number
         }
     },
+    emits: [
+        'page'
+    ],
     data: function() {
         return this.create();
     },
@@ -127,9 +147,6 @@ export default {
             this.current = page;
             this.$emit('page', this.current);
         }
-    },
-    components: {
-        IconHome
     }
 }
 </script>

package/components/Progress.vue

@@ -1,10 +1,10 @@
 <template>
-<div class="progress progress-xs">
-    <div
-        class="progress-bar bg-primary"
-        :style='`width: ${percent * 100}%;`'
-    ></div>
-</div>
+    <div class='progress progress-xs'>
+        <div
+            class='progress-bar bg-primary'
+            :style='`width: ${percent * 100}%;`'
+        />
+    </div>
 </template>
 
 <script>

package/components/Schema.vue

@@ -1,78 +1,108 @@
 <template>
-<div class='px-2 py-2'>
-    <TablerLoading v-if='loading'/>
-    <template v-else>
-        <div :key='key' v-for='key in Object.keys(s.properties)' class='py-2 floating-input'>
-            <template v-if='s.properties[key].enum'>
-                <TablerEnum
-                    :label='key'
-                    :disabled='disabled'
-                    :required='s.properties[key].required || false'
-                    :description='s.properties[key].description || ""'
-                    v-model='data[key]'
-                    :options='s.properties[key].enum'
-                    :default='s.properties[key].default'
-                />
-            </template>
-            <template v-else-if='s.properties[key].type === "string"'>
-                <TablerInput
-                    :label='key'
-                    :disabled='disabled'
-                    :required='s.properties[key].required || false'
-                    :description='s.properties[key].description || ""'
-                    v-model='data[key]'
-                />
-            </template>
-            <template v-else-if='s.properties[key].type === "number" || s.properties[key].type === "integer"'>
-                <TablerInput
-                    :type='s.properties[key].type'
-                    :label='key'
-                    :disabled='disabled'
-                    :required='s.properties[key].required || false'
-                    :description='s.properties[key].description || ""'
-                    v-model='data[key]'
-                />
-            </template>
-            <template v-else-if='s.properties[key].type === "boolean"'>
-                <TablerToggle
-                    :label='key'
-                    :disabled='disabled'
-                    :required='s.properties[key].required || false'
-                    :description='s.properties[key].description || ""'
-                    v-model='data[key]'
-                />
-            </template>
-            <template v-else-if='s.properties[key].type === "array"'>
-                <div class='d-flex'>
-                    <label class='form-label' v-text='key'/>
-                    <div class='ms-auto'>
-                        <IconPlus v-if='!disabled' @click='push(key)' :size='32' :stroke='1' class='cursor-pointer'/>
-                    </div>
-                </div>
-
-                <div :key='i' v-for='(arr, i) of data[key]' class='border rounded my-2 py-2 mx-2 px-2'>
+    <div class='px-2 py-2'>
+        <TablerLoading v-if='loading' />
+        <template v-else>
+            <div
+                v-for='key in Object.keys(s.properties)'
+                :key='key'
+                class='py-2 floating-input'
+            >
+                <template v-if='s.properties[key].enum'>
+                    <TablerEnum
+                        v-model='data[key]'
+                        :label='key'
+                        :disabled='disabled'
+                        :required='s.properties[key].required || false'
+                        :description='s.properties[key].description || ""'
+                        :options='s.properties[key].enum'
+                        :default='s.properties[key].default'
+                    />
+                </template>
+                <template v-else-if='s.properties[key].type === "string"'>
+                    <TablerInput
+                        v-model='data[key]'
+                        :label='key'
+                        :disabled='disabled'
+                        :required='s.properties[key].required || false'
+                        :description='s.properties[key].description || ""'
+                    />
+                </template>
+                <template v-else-if='s.properties[key].type === "number" || s.properties[key].type === "integer"'>
+                    <TablerInput
+                        v-model='data[key]'
+                        :type='s.properties[key].type'
+                        :label='key'
+                        :disabled='disabled'
+                        :required='s.properties[key].required || false'
+                        :description='s.properties[key].description || ""'
+                    />
+                </template>
+                <template v-else-if='s.properties[key].type === "boolean"'>
+                    <TablerToggle
+                        v-model='data[key]'
+                        :label='key'
+                        :disabled='disabled'
+                        :required='s.properties[key].required || false'
+                        :description='s.properties[key].description || ""'
+                    />
+                </template>
+                <template v-else-if='s.properties[key].type === "array"'>
                     <div class='d-flex'>
-                        <div class='mx-2 my-2'>Entry <span v-text='i + 1'/></div>
-                        <div class='ms-auto mx-2 my-2'>
-                            <IconTrash v-if='!disabled' @click='data[key].splice(i, 1)' :size='32' :stroke='1' class='cursor-pointer'/>
+                        <label
+                            class='form-label'
+                            v-text='key'
+                        />
+                        <div class='ms-auto'>
+                            <IconPlus
+                                v-if='!disabled'
+                                :size='32'
+                                :stroke='1'
+                                class='cursor-pointer'
+                                @click='push(key)'
+                            />
                         </div>
                     </div>
 
-                    <GenericSchema :schema='s.properties[key].items' :disabled='disabled' v-model='data[key][i]' />
-                </div>
-            </template>
-            <template v-else>
-                <div class='row'>
-                    <TablerInput
-                        :label='key'
-                        :rows='3'
-                        :disabled='disabled'
-                        v-model='data[key]'/>
-                </div>
-            </template>
-        </div>
-    </template>
-</div>
+                    <div
+                        v-for='(arr, i) of data[key]'
+                        :key='i'
+                        class='border rounded my-2 py-2 mx-2 px-2'
+                    >
+                        <div class='d-flex'>
+                            <div class='mx-2 my-2'>
+                                Entry <span v-text='i + 1' />
+                            </div>
+                            <div class='ms-auto mx-2 my-2'>
+                                <IconTrash
+                                    v-if='!disabled'
+                                    :size='32'
+                                    :stroke='1'
+                                    class='cursor-pointer'
+                                    @click='data[key].splice(i, 1)'
+                                />
+                            </div>
+                        </div>
+
+                        <GenericSchema
+                            v-model='data[key][i]'
+                            :schema='s.properties[key].items'
+                            :disabled='disabled'
+                        />
+                    </div>
+                </template>
+                <template v-else>
+                    <div class='row'>
+                        <TablerInput
+                            v-model='data[key]'
+                            :label='key'
+                            :rows='3'
+                            :disabled='disabled'
+                        />
+                    </div>
+                </template>
+            </div>
+        </template>
+    </div>
 </template>
 
 <script>
@@ -87,6 +117,14 @@ import {
 
 export default {
     name: 'TablerSchema',
+    components: {
+        IconPlus,
+        IconTrash,
+        TablerInput,
+        TablerToggle,
+        TablerEnum,
+        TablerLoading
+    },
     props: {
         modelValue: {
             type: Object,
@@ -101,6 +139,9 @@ export default {
             default: false
         }
     },
+    emits: [
+        'update:modelValue'
+    ],
     data: function() {
         return {
             loading: true,
@@ -151,14 +192,6 @@ export default {
                 this.data[key].push('');
             }
         }
-    },
-    components: {
-        IconPlus,
-        IconTrash,
-        TablerInput,
-        TablerToggle,
-        TablerEnum,
-        TablerLoading
     }
 }
 </script>

package/components/input/Colour.vue

@@ -1,17 +1,37 @@
 <template>
-<div class='row'>
-    <TablerLabel :label='label' :description='description' :required='required'><slot/></TablerLabel>
-    <div class='col-12 d-flex'>
-        <div :key='color' v-for='color in Object.keys(colours)' class='border border-white rounded mx-1' style='height: 26px;'>
-            <label class="form-colorinput">
-                <input :disabled='disabled' v-model='current' :value='color' type="radio" class="form-colorinput-input">
-                <span class="form-colorinput-color bg-dark rounded" :class='[
-                    `bg-${color}`
-                ]'></span>
-            </label>
+    <div class='row'>
+        <TablerLabel
+            :label='label'
+            :description='description'
+            :required='required'
+        >
+            <slot />
+        </TablerLabel>
+        <div class='col-12 d-flex'>
+            <div
+                v-for='color in Object.keys(colours)'
+                :key='color'
+                class='border border-white rounded mx-1'
+                style='height: 26px;'
+            >
+                <label class='form-colorinput'>
+                    <input
+                        v-model='current'
+                        :disabled='disabled'
+                        :value='color'
+                        type='radio'
+                        class='form-colorinput-input'
+                    >
+                    <span
+                        class='form-colorinput-color bg-dark rounded'
+                        :class='[
+                            `bg-${color}`
+                        ]'
+                    />
+                </label>
+            </div>
         </div>
     </div>
-</div>
 </template>
 
 <script>
@@ -19,6 +39,9 @@ import TablerLabel from '../internal/Label.vue';
 
 export default {
     name: 'TablerColour',
+    components: {
+        TablerLabel
+    },
     props: {
         modelValue: {
             type: String,
@@ -42,6 +65,9 @@ export default {
         },
         label: String,
     },
+    emits: [
+        'update:modelValue'
+    ],
     data: function() {
         return {
             current: '',
@@ -73,13 +99,6 @@ export default {
             }
         }
     },
-    mounted: function() {
-        if (!this.modelValue && this.default) {
-            this.current = this.invertColours[this.default]
-        } else {
-            this.current = this.invertColours[this.modelValue];
-        }
-    },
     watch: {
         modelValue: function() {
             this.current = this.invertColours[this.modelValue];
@@ -89,8 +108,12 @@ export default {
             this.$emit('update:modelValue', this.colours[this.current]);
         }
     },
-    components: {
-        TablerLabel
+    mounted: function() {
+        if (!this.modelValue && this.default) {
+            this.current = this.invertColours[this.default]
+        } else {
+            this.current = this.invertColours[this.modelValue];
+        }
     }
 }
 </script>