@tak-ps/vue-tabler 3.78.2 → 3.79.1

package/components/Err.vue

@@ -28,42 +28,30 @@
     </Modal>
 </template>
 
-<script>
-import Modal from './Modal.vue';
-import Alert from './Alert.vue';
+<script setup>
+import Modal from './Modal.vue'
+import Alert from './Alert.vue'
 
-export default {
-    name: 'TablerErr',
-    components: {
-        Alert,
-        Modal
+defineProps({
+    err: {
+        type: Error,
+        required: true
     },
-    props: {
-        err: {
-            type: Error,
-            required: true
-        },
-        title: {
-            type: String,
-            default: 'Website Error'
-        },
-        trace: {
-            type: Boolean,
-            default: true
-        }
+    title: {
+        type: String,
+        default: 'Website Error'
     },
-    emits: [
-        'close'
-    ],
-    data: function() {
-        return {
-            open: false
-        }
-    },
-    methods: {
-        close: function() {
-            this.$emit('close');
-        },
+    trace: {
+        type: Boolean,
+        default: true
     }
+})
+
+const emit = defineEmits([
+    'close'
+])
+
+const close = () => {
+    emit('close')
 }
 </script>

package/components/Help.vue

@@ -34,32 +34,25 @@
     </Modal>
 </template>
 
-<script>
-import Modal from './Modal.vue';
+<script setup>
+import Modal from './Modal.vue'
 
-export default {
-    name: 'TablerHelp',
-    components: {
-        Modal,
+defineProps({
+    label: {
+        type: String,
+        default: 'Help'
     },
-    props: {
-        label: {
-            type: String,
-            require: false,
-            default: 'Help'
-        },
-        description: {
-            type: String,
-            require: true
-        }
-    },
-    emits: [
-        'close'
-    ],
-    methods: {
-        close: function() {
-            this.$emit('close');
-        }
+    description: {
+        type: String,
+        required: true
     }
+})
+
+const emit = defineEmits([
+    'close'
+])
+
+const close = () => {
+    emit('close')
 }
 </script>

package/components/List.vue

@@ -65,83 +65,76 @@
     </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
 import TablerInput from './input/Input.vue';
 import {
     IconSettings
 } from '@tabler/icons-vue';
 
-export default {
-    name: 'TablerList',
-    components: {
-        IconSettings,
-        TablerInput
+const props = defineProps({
+    url: String,
+    listkey: String,
+    namekey: String,
+    initial: Object,
+    label: {
+        type: String,
+        default: ''
     },
-    props: {
-        url: String,
-        listkey: String,
-        namekey: String,
-        initial: Object,
-        label: {
-            type: String,
-            default: ''
-        },
-        required: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        limit: {
-            type: Number,
-            default: 10
-        },
+    required: {
+        type: Boolean,
+        default: false
     },
-    emits: [
-        'selected'
-    ],
-    data: function() {
-        return {
-            ele: null,
-            isMounted: false,
-            filter: '',
-            list: {}
-        }
+    disabled: {
+        type: Boolean,
+        default: false
     },
-    computed: {
-        buttonHeight() {
-            if(!this.isMounted) return 100;
-            const buttonDOM = this.$refs.button
-            return buttonDOM ? buttonDOM.offsetWidth : 100;
-        },
+    limit: {
+        type: Number,
+        default: 10
     },
-    watch: {
-        ele: function() {
-            this.filter = '';
-        },
-        filter: async function() {
-            await this.fetchList();
-        }
-    },
-    mounted: async function() {
-        if (this.initial && this.initial[this.namekey]) this.ele = this.initial;
-        await this.fetchList();
-        this.isMounted = true;
-    },
-    methods: {
-        select: function(ele) {
-            this.ele = ele;
-            this.filter = ele[this.namekey];
-            this.$emit("selected", ele)
-        },
-        fetchList: async function() {
-            const url = window.stdurl(this.url);
-            url.searchParams.append('filter', this.filter);
-            url.searchParams.append('limit', this.limit);
-            this.list = await window.std(url);
-        }
-    }
+})
+
+const emit = defineEmits(['selected'])
+
+const ele = ref(null)
+const isMounted = ref(false)
+const filter = ref('')
+const list = ref({})
+const button = ref(null)
+
+const buttonHeight = computed(() => {
+    if(!isMounted.value) return 100;
+    const buttonDOM = button.value
+    return buttonDOM ? buttonDOM.offsetWidth : 100;
+})
+
+const select = (selectedEle) => {
+    ele.value = selectedEle;
+    filter.value = selectedEle[props.namekey];
+    emit("selected", selectedEle)
 }
+
+const fetchList = async () => {
+    const url = window.stdurl(props.url);
+    url.searchParams.append('filter', filter.value);
+    url.searchParams.append('limit', props.limit);
+    list.value = await window.std(url);
+}
+
+// Watchers
+watch(ele, () => {
+    filter.value = '';
+})
+
+watch(filter, async () => {
+    await fetchList();
+})
+
+// Mounted lifecycle
+onMounted(async () => {
+    if (props.initial && props.initial[props.namekey]) ele.value = props.initial;
+    await fetchList();
+    isMounted.value = true;
+})
 </script>

package/components/Loading.vue

@@ -38,18 +38,15 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'TablerLoading',
-    props: {
-        inline: {
-            type: Boolean,
-            default: false
-        },
-        desc: {
-            type: String,
-            default: 'Loading...'
-        }
+<script setup>
+defineProps({
+    inline: {
+        type: Boolean,
+        default: false
+    },
+    desc: {
+        type: String,
+        default: 'Loading...'
     }
-}
+})
 </script>

package/components/Markdown.vue

@@ -5,30 +5,27 @@
     />
 </template>
 
-<script>
-import showdown from 'showdown';
+<script setup>
+import { computed } from 'vue'
+import showdown from 'showdown'
 
-export default {
-    name: 'TablerMarkdown',
-    props: {
-        markdown: {
-            type: String,
-            required: true
-        },
-        autowrap: {
-            type: Boolean,
-            default: true
-        }
+const props = defineProps({
+    markdown: {
+        type: String,
+        required: true
     },
-    computed: {
-        html: function() {
-            const converter = new showdown.Converter({
-                tables: true,
-                tasklists: true,
-                emoji: true
-            });
-            return converter.makeHtml(this.markdown);
-        }
+    autowrap: {
+        type: Boolean,
+        default: true
     }
-}
+})
+
+const html = computed(() => {
+    const converter = new showdown.Converter({
+        tables: true,
+        tasklists: true,
+        emoji: true
+    })
+    return converter.makeHtml(props.markdown)
+})
 </script>

package/components/Modal.vue

@@ -26,20 +26,22 @@
     </teleport>
 </template>
 
-<script>
-export default {
-    name: 'TablerModal',
-    props: {
-        size: {
-            // sm, md, lg, xl
-            type: String,
-            default: 'sm'
-        }
-    },
-    mounted: function() {
-        this.$nextTick(() => {
-            this.$refs.modal.focus();
-        })
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+
+defineProps({
+    size: {
+        // sm, md, lg, xl
+        type: String,
+        default: 'sm'
     }
-}
+})
+
+const modal = ref(null)
+
+onMounted(() => {
+    nextTick(() => {
+        modal.value.focus()
+    })
+})
 </script>

package/components/None.vue

@@ -35,7 +35,7 @@
             :class='{
                 "my-4": !compact
             }'
-            @click='$emit("create")'
+            @click='emit("create")'
         >
             <div class='btn btn-primary'>
                 <span>Create <span v-text='label' /></span>
@@ -44,32 +44,27 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import {
     IconNotesOff
 } from '@tabler/icons-vue'
 
-export default {
-    name: 'TablerNone',
-    components: {
-        IconNotesOff
+defineProps({
+    label: {
+        type: String,
+        default: 'Items'
     },
-    props: {
-        label: {
-            type: String,
-            default: 'Items'
-        },
-        compact: {
-            type: Boolean,
-            default: false
-        },
-        create: {
-            type: Boolean,
-            default: true
-        },
+    compact: {
+        type: Boolean,
+        default: false
     },
-    emits: [
-        'create'
-    ]
-}
+    create: {
+        type: Boolean,
+        default: true
+    },
+})
+
+const emit = defineEmits([
+    'create'
+])
 </script>

package/components/Pager.vue

@@ -55,98 +55,105 @@
     </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch } from 'vue'
 import {
     IconHome
 } from '@tabler/icons-vue';
 
-export default {
-    name: 'TablerPager',
-    components: {
-        IconHome
+const props = defineProps({
+    total: {
+        type: Number
     },
-    props: {
-        total: {
-            type: Number
-        },
-        page: {
-            type: Number
-        },
-        limit: {
-            type: Number
-        }
+    page: {
+        type: Number
     },
-    emits: [
-        'page'
-    ],
-    data: function() {
-        return this.create();
-    },
-    watch: {
-        page: function() {
-            this.current = this.page;
-        },
-        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: this.page || 0,
-                end: end
-            };
-        },
-        changePage: function(page) {
-            this.current = page;
-            this.$emit('page', this.current);
-        }
+    limit: {
+        type: Number
     }
+})
+
+const emit = defineEmits(['page'])
+
+const spread = ref(0)
+const middle = ref([])
+const current = ref(0)
+const end = ref(0)
+
+const create = () => {
+    const endValue = Math.ceil(parseInt(props.total) / parseInt(props.limit));
+    let spreadValue; //Number of pages in between home button and last page
+    if (endValue <= 2) {
+        spreadValue = 0;
+    } else if (endValue >= 7) {
+        spreadValue = 5;
+    } else {
+        spreadValue = endValue - 2;
+    }
+
+    // Array containing middle page number
+    let middleAr = new Array(spreadValue).fill(1, 0, spreadValue).map((ele, i) => {
+        return 1 + i;
+    });
+
+    return {
+        spread: spreadValue,
+        middle: middleAr,
+        current: props.page || 0,
+        end: endValue
+    };
+}
+
+const changePage = (page) => {
+    current.value = page;
+    emit('page', current.value);
 }
+
+// Initialize values
+const initialValues = create();
+spread.value = initialValues.spread;
+middle.value = initialValues.middle;
+current.value = initialValues.current;
+end.value = initialValues.end;
+
+// Watch for page changes
+watch(() => props.page, () => {
+    current.value = props.page;
+})
+
+// Watch for total changes
+watch(() => props.total, () => {
+    const set = create();
+    spread.value = set.spread;
+    middle.value = set.middle;
+    current.value = set.current;
+    end.value = set.end;
+})
+
+// Watch for limit changes
+watch(() => props.limit, () => {
+    const set = create();
+    spread.value = set.spread;
+    middle.value = set.middle;
+    current.value = set.current;
+    end.value = set.end;
+})
+
+// Watch for current changes
+watch(current, () => {
+    if (end.value < 5) return; // All buttons are shown already
+
+    let start;
+    if (current.value <= 3) {
+        start = 0;
+    } else if (current.value >= end.value - 4) {
+        start = end.value - spread.value - 2;
+    } else {
+        start = current.value - 3;
+    }
+
+    middle.value = middle.value.map((ele, i) => {
+        return start + i + 1;
+    });
+})
 </script>

package/components/Progress.vue

@@ -7,14 +7,11 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'TablerProgress',
-    props: {
-        percent: {
-            type: Number,
-            default: 1
-        }
+<script setup>
+defineProps({
+    percent: {
+        type: Number,
+        default: 1
     }
-}
+})
 </script>