@tak-ps/vue-tabler 3.78.1 → 3.79.0

package/CHANGELOG.md

@@ -10,6 +10,15 @@
 
 ## Version History
 
+### v3.79.0
+
+- :tada: Migrate all components to `<script setup>`
+- :tada: Add `TablerSlidedown` component
+
+### v3.78.2
+
+- :bug: Fix disabled state on button
+
 ### v3.78.1
 
 - :bug: Fix disabled state on button

package/components/Alert.vue

@@ -61,42 +61,32 @@
     </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import {
     IconAlertTriangle,
     IconChevronRight,
     IconChevronDown,
 } from '@tabler/icons-vue'
 
-export default {
-    name: 'TablerAlert',
-    props: {
-        title: {
-            type: String,
-            default: 'Generic Error'
-        },
-        err: {
-            type: Error,
-            default: new Error('Something is amiss')
-        },
-        compact: {
-            type: Boolean,
-            default: false
-        },
-        advanced: {
-            type: Boolean,
-            default: true
-        },
+defineProps({
+    title: {
+        type: String,
+        default: 'Generic Error'
     },
-    data: function() {
-        return {
-            open: false
-        }
+    err: {
+        type: Error,
+        default: new Error('Something is amiss')
     },
-    components: {
-        IconAlertTriangle,
-        IconChevronRight,
-        IconChevronDown,
-    }
-}
+    compact: {
+        type: Boolean,
+        default: false
+    },
+    advanced: {
+        type: Boolean,
+        default: true
+    },
+})
+
+const open = ref(false)
 </script>

package/components/BreadCrumb.vue

@@ -6,7 +6,7 @@
         <li class='breadcrumb-item'>
             <a
                 class='cursor-pointer'
-                @click='$router.push("/")'
+                @click='router.push("/")'
             >Home</a>
         </li>
         <li
@@ -24,41 +24,43 @@
             <a
                 v-else-if='normalize'
                 class='cursor-pointer'
-                @click='$router.push("/" + crumbs.splice(0, crumb_it + 1).join("/").toLowerCase())'
+                @click='router.push("/" + crumbs.splice(0, crumb_it + 1).join("/").toLowerCase())'
                 v-text='crumb'
             />
             <a
                 v-else
                 class='cursor-pointer'
-                @click='$router.push("/" + crumbs.splice(0, crumb_it + 1).join("/"))'
+                @click='router.push("/" + crumbs.splice(0, crumb_it + 1).join("/"))'
                 v-text='crumb'
             />
         </li>
     </ol>
 </template>
 
-<script>
-export default {
-    name: 'BreadCrumb',
-    props: {
-        normalize: {
-            type: Boolean,
-            default: true,
-            description: 'Perform Title Casing on URL Components'
-        }
-    },
-    data: function() {
-        return {
-            crumbs: this.$route.path.split('/').filter((crumb) => {
-                return crumb.length;
-            }).map((crumb) => {
-                if (this.normalize) {
-                    return `${crumb[0].toUpperCase()}${crumb.slice(1, crumb.length)}`;
-                } else {
-                    return `${crumb[0]}${crumb.slice(1, crumb.length)}`;
-                }
-            })
+<script setup>
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const props = defineProps({
+    normalize: {
+        type: Boolean,
+        default: true,
+        description: 'Perform Title Casing on URL Components'
+    }
+})
+
+const router = useRouter()
+const route = useRoute()
+
+const crumbs = computed(() => {
+    return route.path.split('/').filter((crumb) => {
+        return crumb.length
+    }).map((crumb) => {
+        if (props.normalize) {
+            return `${crumb[0].toUpperCase()}${crumb.slice(1, crumb.length)}`
+        } else {
+            return `${crumb[0]}${crumb.slice(1, crumb.length)}`
         }
-    },
-}
+    })
+})
 </script>

package/components/Button.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-const props = defineProps<{
+    const props = defineProps({
     disabled: Boolean
-}>()
+    })
 </script>

package/components/Bytes.vue

@@ -2,20 +2,18 @@
     <span v-text='display' />
 </template>
 
-<script>
-export default {
-    name: 'TablerBytes',
-    props: {
-        bytes: {
-            type: Number,
-            required: true
-        }
-    },
-    computed: {
-        display: function() {
-             const i = this.bytes == 0 ? 0 : Math.floor(Math.log(this.bytes) / Math.log(1024));
-             return (this.bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
-         }
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    bytes: {
+        type: Number,
+        required: true
     }
-}
+})
+
+const display = computed(() => {
+    const i = props.bytes == 0 ? 0 : Math.floor(Math.log(props.bytes) / Math.log(1024))
+    return (props.bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
+})
 </script>

package/components/Delete.vue

@@ -1,14 +1,14 @@
 <template>
     <div>
-        <template v-if='displaytype === "button"'>
+        <template v-if='props.displaytype === "button"'>
             <div
                 class='btn btn-outline-danger'
                 @click.stop.prevent='modal = true'
             >
-                <span v-text='label' />
+                <span v-text='props.label' />
             </div>
         </template>
-        <template v-else-if='displaytype === "menu"'>
+        <template v-else-if='props.displaytype === "menu"'>
             <div
                 class='cursor-pointer col-12 d-flex align-items-center px-2 py-2'
                 @click.stop.prevent='modal = true'
@@ -19,7 +19,7 @@
                 />
                 <span
                     class='mx-2'
-                    v-text='label'
+                    v-text='props.label'
                 />
             </div>
         </template>
@@ -29,7 +29,7 @@
                 @click.stop.prevent='modal = true'
             >
                 <IconTrash
-                    :size='size'
+                    :size='props.size'
                     :stroke='1'
                 />
             </TablerIconButton>
@@ -52,7 +52,7 @@
             <div class='modal-footer'>
                 <div
                     class='btn btn-danger'
-                    @click='$emit("delete")'
+                    @click='deleting'
                 >
                     <TablerLoading
                         v-if='loading'
@@ -60,11 +60,11 @@
                     />
                     <template v-else>
                         <IconTrash
-                            :size='32'
+                            :size='props.size'
                             :stroke='1'
                         /><span
                             class='mx-2'
-                            v-text='label'
+                            v-text='props.label'
                         />
                     </template>
                 </div>
@@ -73,7 +73,8 @@
     </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import TablerModal from './Modal.vue';
 import TablerIconButton from './IconButton.vue';
 import TablerLoading from './Loading.vue';
@@ -81,42 +82,28 @@ import {
     IconTrash
 } from '@tabler/icons-vue';
 
-export default {
-    name: 'TablerDelete',
-    components: {
-        IconTrash,
-        TablerLoading,
-        TablerIconButton,
-        TablerModal
+const props = defineProps({
+    label: {
+        type: String,
+        default: 'Delete'
     },
-    props: {
-        label: {
-            type: String,
-            default: 'Delete'
-        },
-        size: {
-            type: Number,
-            default: 32
-        },
-        displaytype: {
-            type: String,
-            default: 'button' // Or icon
-        }
+    size: {
+        type: Number,
+        default: 32
     },
-    emits: [
-        'delete'
-    ],
-    data: function() {
-        return {
-            loading: false,
-            modal: false
-        }
-    },
-    methods: {
-        deleting: function() {
-            this.loading = true;
-            this.$emit('delete')
-        }
+    displaytype: {
+        type: String,
+        default: 'button' // Or icon
     }
+})
+
+const emit = defineEmits(['delete'])
+
+const loading = ref(false)
+const modal = ref(false)
+
+const deleting = () => {
+    loading.value = true;
+    emit('delete')
 }
 </script>

package/components/Epoch.vue

@@ -2,67 +2,63 @@
     <span v-text='display' />
 </template>
 
-<script>
-export default {
-    name: 'TablerEpoch',
-    props: {
-        date: {
-            type: [Number, String],
-            required: true
-        },
-        format: {
-            type: String,
-            default: 'Human'
-        }
-    },
-    data: function() {
-        return {
-            suffix: {
-                1: 'st',
-                2: 'nd',
-                3: 'rd'
-            },
-            months: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-                'August',
-                'September',
-                'October',
-                'November',
-                'December'
-            ]
-        }
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    date: {
+        type: [Number, String],
+        required: true
     },
-    computed: {
-        display: function() {
-            const date = new Date(this.date)
+    format: {
+        type: String,
+        default: 'Human'
+    }
+})
 
-            if (this.format === 'ISO') {
-                return date.toISOString()
-                    .replace('T', ' ')
-                    .replace(/:[0-9]+\.[0-9]+[A-Z]/, '');
-            } else if (this.format === 'Human') {
-                const day = String(date.getUTCDate());
-                let suffix = this.suffix[day.slice(day.length - 1)] || 'th';
-                if (['11', '12', '13'].includes(day)) suffix = 'th';
+const suffix = {
+    1: 'st',
+    2: 'nd',
+    3: 'rd'
+}
+
+const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+]
 
-                let res = `${this.months[date.getUTCMonth()]} ${date.getUTCDate()}${suffix}`;
-                if (date.getFullYear() !== new Date().getFullYear()) {
-                    res = res + ` ${date.getFullYear()}`;
-                }
+const display = computed(() => {
+    const date = new Date(props.date)
 
-                res = res + `, ${String(date.getUTCHours()).padStart(2, '0')}:${String(date.getMinutes()).padEnd(2, '0')}`;
+    if (props.format === 'ISO') {
+        return date.toISOString()
+            .replace('T', ' ')
+            .replace(/:[0-9]+\.[0-9]+[A-Z]/, '')
+    } else if (props.format === 'Human') {
+        const day = String(date.getUTCDate())
+        let suf = suffix[day.slice(day.length - 1)] || 'th'
+        if (['11', '12', '13'].includes(day)) suf = 'th'
 
-                return res;
-            } else {
-                return date.toString();
-            }
+        let res = `${months[date.getUTCMonth()]} ${date.getUTCDate()}${suf}`
+        if (date.getFullYear() !== new Date().getFullYear()) {
+            res = res + ` ${date.getFullYear()}`
         }
+
+        res = res + `, ${String(date.getUTCHours()).padStart(2, '0')}:${String(date.getMinutes()).padEnd(2, '0')}`
+
+        return res
+    } else {
+        return date.toString()
     }
-}
+})
 </script>

package/components/EpochRange.vue

@@ -2,94 +2,90 @@
     <span v-text='display' />
 </template>
 
-<script>
-export default {
-    name: 'EpochRange',
-    props: {
-        format: {
-            type: String,
-            default: 'Human'
-        },
-        start: {
-            type: [Number, String],
-            required: true
-        },
-        end: {
-            type: [Number, String],
-            required: true
-        },
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    format: {
+        type: String,
+        default: 'Human'
     },
-    data: function() {
-        return {
-            suffix: {
-                1: 'st',
-                2: 'nd',
-                3: 'rd'
-            },
-            months: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-                'August',
-                'September',
-                'October',
-                'November',
-                'December'
-            ]
-        }
+    start: {
+        type: [Number, String],
+        required: true
+    },
+    end: {
+        type: [Number, String],
+        required: true
     },
-    computed: {
-        display: function() {
-            if (this.format === 'ISO') {
-                const start = new Date(this.start)
-                const end = new Date(this.end)
+})
 
-                const start_dt = start.toISOString().replace(/[A-Z].*/, '');
-                const end_dt = end.toISOString().replace(/[A-Z].*/, '');
-                if (start_dt === end_dt) {
-                    return `${start.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')} - ${end.toISOString().replace(/^.*?[A-Z]/, '').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')}`;
-                } else {
-                    return `${start.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')} - ${end.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')}`;
-                }
-            } else if (this.format === 'Human') {
-                const start = new Date(this.start)
-                const end = new Date(this.end)
+const suffix = {
+    1: 'st',
+    2: 'nd',
+    3: 'rd'
+}
+
+const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+]
 
-                const start_day = String(start.getUTCDate());
-                let start_day_suffix = this.suffix[start_day.slice(start_day.length - 1)] || 'th';
-                if (['11', '12', '13'].includes(start_day)) start_day_suffix = 'th';
-                const end_day = String(end.getUTCDate());
-                let end_day_suffix = this.suffix[end_day.slice(end_day.length - 1)] || 'th';
-                if (['11', '12', '13'].includes(end_day)) end_day_suffix = 'th';
+const display = computed(() => {
+    if (props.format === 'ISO') {
+        const start = new Date(props.start)
+        const end = new Date(props.end)
 
-                const start_month = `${this.months[start.getUTCMonth()]} ${start.getUTCDate()}${start_day_suffix}`;
-                const end_month = `${this.months[end.getUTCMonth()]} ${end.getUTCDate()}${end_day_suffix}`;
-                const start_time = `${String(start.getUTCHours()).padStart(2, '0')}:${String(start.getMinutes()).padEnd(2, '0')}`;
-                const end_time = `${String(end.getUTCHours()).padStart(2, '0')}:${String(end.getMinutes()).padEnd(2, '0')}`;
+        const start_dt = start.toISOString().replace(/[A-Z].*/, '');
+        const end_dt = end.toISOString().replace(/[A-Z].*/, '');
+        if (start_dt === end_dt) {
+            return `${start.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')} - ${end.toISOString().replace(/^.*?[A-Z]/, '').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')}`;
+        } else {
+            return `${start.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')} - ${end.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')}`;
+        }
+    } else if (props.format === 'Human') {
+        const start = new Date(props.start)
+        const end = new Date(props.end)
 
-                if (start.getFullYear() === end.getFullYear() && start.getFullYear() === new Date().getFullYear()) {
-                    if (start.getUTCMonth() === end.getUTCMonth() && start.getUTCDate() === end.getUTCDate()) {
-                        return `${start_month} ${start_time} - ${end_time}`;
-                    } else {
-                        return `${start_month} ${start_time} - ${end_month} ${end_time}`;
-                    }
-                } else if (start.getFullYear() === end.getFullYear()) {
-                    if (start.getUTCMonth() === end.getUTCMonth() && start.getUTCDate() === end.getUTCDate()) {
-                        return `${start_month}, ${start.getFullYear()} ${start_time} - ${end_time}`;
-                    } else {
-                        return `${start_month}, ${start.getFullYear()} ${start_time} - ${end_month} ${end_time}`;
-                    }
-                } else {
-                    return `${start_month} ${start.getFullYear()}, ${start_time} - ${end_month} ${end.getFullYear()}, ${end_time}`;
-                }
+        const start_day = String(start.getUTCDate());
+        let start_day_suffix = suffix[start_day.slice(start_day.length - 1)] || 'th';
+        if (['11', '12', '13'].includes(start_day)) start_day_suffix = 'th';
+        const end_day = String(end.getUTCDate());
+        let end_day_suffix = suffix[end_day.slice(end_day.length - 1)] || 'th';
+        if (['11', '12', '13'].includes(end_day)) end_day_suffix = 'th';
+
+        const start_month = `${months[start.getUTCMonth()]} ${start.getUTCDate()}${start_day_suffix}`;
+        const end_month = `${months[end.getUTCMonth()]} ${end.getUTCDate()}${end_day_suffix}`;
+        const start_time = `${String(start.getUTCHours()).padStart(2, '0')}:${String(start.getMinutes()).padEnd(2, '0')}`;
+        const end_time = `${String(end.getUTCHours()).padStart(2, '0')}:${String(end.getMinutes()).padEnd(2, '0')}`;
+
+        if (start.getFullYear() === end.getFullYear() && start.getFullYear() === new Date().getFullYear()) {
+            if (start.getUTCMonth() === end.getUTCMonth() && start.getUTCDate() === end.getUTCDate()) {
+                return `${start_month} ${start_time} - ${end_time}`;
             } else {
-                return 'Invalid Format'
+                return `${start_month} ${start_time} - ${end_month} ${end_time}`;
             }
+        } else if (start.getFullYear() === end.getFullYear()) {
+            if (start.getUTCMonth() === end.getUTCMonth() && start.getUTCDate() === end.getUTCDate()) {
+                return `${start_month}, ${start.getFullYear()} ${start_time} - ${end_time}`;
+            } else {
+                return `${start_month}, ${start.getFullYear()} ${start_time} - ${end_month} ${end_time}`;
+            }
+        } else {
+            return `${start_month} ${start.getFullYear()}, ${start_time} - ${end_month} ${end.getFullYear()}, ${end_time}`;
         }
+    } else {
+        return 'Invalid Format'
     }
-}
+})
 </script>