@tak-ps/vue-tabler 3.35.0 → 3.37.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v3.27.0
+
+- :tada: Add stack trace to error modal
+
+### v3.26.0
+
+- :bug: Icon sizes became variable, explicitly fix all icon sizes
+
 ### v3.25.0
 
 - :bug: Add `.stop.prevent` on button & icon click

package/components/Delete.vue

@@ -6,7 +6,7 @@
         </div>
     </template>
     <template v-else>
-        <IconTrash @click.stop.prevent='modal = true' class='cursor-pointer'/>
+        <IconTrash @click.stop.prevent='modal = true' size='32' class='cursor-pointer'/>
     </template>
 
     <TablerModal v-if='modal'>
@@ -20,7 +20,7 @@
         </div>
         <div class="modal-footer">
             <div @click='$emit("delete")' class="btn btn-danger">
-                <IconTrash/><span class='mx-2' v-text='label'/>
+                <IconTrash size='32'/><span class='mx-2' v-text='label'/>
             </div>
         </div>
     </TablerModal>

package/components/Dropdown.vue

@@ -2,7 +2,7 @@
 <div class="dropdown">
     <div type="button" :id='id' data-bs-toggle="dropdown" aria-expanded="false">
         <slot>
-            <IconSettings style='cursor-pointer'/>
+            <IconSettings size='32' class='cursor-pointer'/>
         </slot>
     </div>
     <ul class="dropdown-menu w-100" :aria-labelledby='id'>

package/components/Err.vue

@@ -3,11 +3,25 @@
         <button type="button" class="btn-close" @click='close' aria-label="Close"></button>
         <div class="modal-status bg-yellow"></div>
         <div class="modal-body text-center py-4">
-            <IconAlertCircle/>
+            <IconAlertCircle size='40'/>
             <h3>Website Error</h3>
             <div class="text-muted" v-text='err.message'></div>
-            <pre v-if='err.body' v-text='err.body'></pre>
         </div>
+
+        <template v-if='err.body || err.stack'>
+            <div class="py-2 px-3">
+                <div @click='open = !open' class='subheader d-flex align-items-center cursor-pointer'>
+                    <IconChevronRight v-if='!open' size='24' class='cursor-pointer'/>
+                    <IconChevronDown v-else size='24' class='cursor-pointer'/>
+                    <span>Advanced</span>
+                    </div>
+                <pre
+                    v-if='open'
+                    v-text='err.body || err.stack'
+                    class='my-3'
+                />
+            </div>
+        </template>
         <div class="modal-footer">
             <div class="w-100">
                 <div class="row">
@@ -21,19 +35,37 @@
 <script>
 import Modal from './Modal.vue';
 import {
-    IconAlertCircle
+    IconAlertCircle,
+    IconChevronRight,
+    IconChevronDown
 } from '@tabler/icons-vue'
 
 export default {
     name: 'TablerErr',
-    props: ['err'],
+    props: {
+        err: {
+            type: Error,
+            required: true
+        },
+        trace: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data: function() {
+        return {
+            open: false
+        }
+    },
     methods: {
         close: function() {
             this.$emit('close');
-        }
+        },
     },
     components: {
         Modal,
+        IconChevronRight,
+        IconChevronDown,
         IconAlertCircle
     }
 }

package/components/List.vue

@@ -14,7 +14,7 @@
             <span v-else style='padding-top: 6px;'>Select <span v-text='label'/></span>
 
             <div class='ms-auto'>
-                <IconSettings style='margin-top: 4px;'/>
+                <IconSettings size='32' style='margin-top: 4px;'/>
             </div>
         </div>
     </div>

package/components/None.vue

@@ -3,8 +3,8 @@
     <div class='d-flex justify-content-center' :class='{
         "mt-4 mb-2": !compact
     }'>
-        <IconNotesOff v-if='compact' width='32' height='32' />
-        <IconNotesOff v-else width='48' height='48' />
+        <IconNotesOff v-if='compact' size='32' />
+        <IconNotesOff v-else size='48'/>
     </div>
 
     <div class='text-center' :class='{

package/components/Pager.vue

@@ -3,12 +3,12 @@
     <div>
         <template v-if='parseInt(total) <= parseInt(limit)'>
             <button @click='changePage(0)' class='btn mx-1' >
-                <IconHome class='icon'/>Home
+                <IconHome size='32' class='icon'/>Home
             </button>
         </template>
         <template v-else>
             <button @click='changePage(0)' class='btn mx-1' :class='{ "btn-primary": current === 0 }'>
-                <IconHome class='icon'/>Home
+                <IconHome size='32' class='icon'/>Home
             </button>
 
             <template v-if='end > 5 && current > 3'>

package/components/Schema.vue

@@ -46,7 +46,7 @@
                 <div class='d-flex'>
                     <label class='form-label' v-text='key'/>
                     <div class='ms-auto'>
-                        <IconPlus v-if='!disabled' @click='push(key)' class='cursor-pointer'/>
+                        <IconPlus v-if='!disabled' @click='push(key)' size='32' class='cursor-pointer'/>
                     </div>
                 </div>
 
@@ -54,7 +54,7 @@
                     <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)' class='cursor-pointer'/>
+                            <IconTrash v-if='!disabled' @click='data[key].splice(i, 1)' size='32' class='cursor-pointer'/>
                         </div>
                     </div>
 

package/package.json

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