@tak-ps/vue-tabler 3.87.4 → 4.1.0

package/components/List.vue

@@ -19,7 +19,7 @@
         >
             <div class='d-flex mx-2'>
                 <span
-                    v-if='ele'
+                    v-if='ele && namekey'
                     style='padding-top: 6px;'
                     v-text='ele[namekey]'
                 />
@@ -31,7 +31,7 @@
                 <div class='ms-auto'>
                     <IconSettings
                         :size='32'
-                        :stroke='1'
+                        stroke='1'
                         style='margin-top: 4px;'
                     />
                 </div>
@@ -51,11 +51,12 @@
                     placeholder='Name'
                 />
                 <div
-                    v-for='ele in list[listkey]'
+                    v-for='ele in (listkey ? list[listkey] : [])'
                     :key='ele.id'
                     @click='select(ele)'
                 >
                     <div
+                        v-if='namekey'
                         class='d-flex align-items-center my-1 cursor-pointer'
                         v-text='ele[namekey]'
                     />
@@ -65,43 +66,44 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue'
 import TablerInput from './input/Input.vue';
 import {
     IconSettings
 } from '@tabler/icons-vue';
 
-const props = defineProps({
-    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
-    },
-})
+export interface ListProps {
+    url?: string;
+    listkey?: string;
+    namekey?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    initial?: Record<string, any>;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    limit?: number;
+}
+
+const props = withDefaults(defineProps<ListProps>(), {
+    label: '',
+    required: false,
+    disabled: false,
+    limit: 10
+});
 
-const emit = defineEmits(['selected'])
+const emit = defineEmits<{
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (e: 'selected', ele: any): void
+}>()
 
-const ele = ref(null)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ele = ref<any>(null)
 const isMounted = ref(false)
 const filter = ref('')
-const list = ref({})
-const button = ref(null)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const list = ref<any>({})
+const button = ref<HTMLElement | null>(null)
 
 const buttonHeight = computed(() => {
     if(!isMounted.value) return 100;
@@ -109,16 +111,22 @@ const buttonHeight = computed(() => {
     return buttonDOM ? buttonDOM.offsetWidth : 100;
 })
 
-const select = (selectedEle) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const select = (selectedEle: any) => {
     ele.value = selectedEle;
-    filter.value = selectedEle[props.namekey];
+    if (props.namekey) {
+        filter.value = selectedEle[props.namekey];
+    }
     emit("selected", selectedEle)
 }
 
 const fetchList = async () => {
+    if (!props.url) return;
+    // @ts-expect-error: Global window function
     const url = window.stdurl(props.url);
     url.searchParams.append('filter', filter.value);
-    url.searchParams.append('limit', props.limit);
+    url.searchParams.append('limit', String(props.limit));
+    // @ts-expect-error: Global window function
     list.value = await window.std(url);
 }
 
@@ -133,7 +141,7 @@ watch(filter, async () => {
 
 // Mounted lifecycle
 onMounted(async () => {
-    if (props.initial && props.initial[props.namekey]) ele.value = props.initial;
+    if (props.initial && props.namekey && props.initial[props.namekey]) ele.value = props.initial;
     await fetchList();
     isMounted.value = true;
 })

package/components/Loading.vue

@@ -38,15 +38,14 @@
     </div>
 </template>
 
-<script setup>
-defineProps({
-    inline: {
-        type: Boolean,
-        default: false
-    },
-    desc: {
-        type: String,
-        default: 'Loading...'
-    }
-})
+<script setup lang="ts">
+export interface LoadingProps {
+    inline?: boolean;
+    desc?: string;
+}
+
+withDefaults(defineProps<LoadingProps>(), {
+    inline: false,
+    desc: 'Loading...'
+});
 </script>

package/components/Markdown.vue

@@ -5,20 +5,19 @@
     />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
+// @ts-expect-error: showdown types not available
 import showdown from 'showdown'
 
-const props = defineProps({
-    markdown: {
-        type: String,
-        required: true
-    },
-    autowrap: {
-        type: Boolean,
-        default: true
-    }
-})
+export interface MarkdownProps {
+    markdown: string;
+    autowrap?: boolean;
+}
+
+const props = withDefaults(defineProps<MarkdownProps>(), {
+    autowrap: true
+});
 
 const html = computed(() => {
     const converter = new showdown.Converter({

package/components/Modal.vue

@@ -33,26 +33,24 @@
     </teleport>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, nextTick } from 'vue'
 
-defineProps({
-    size: {
-        // sm, md, lg, xl
-        type: String,
-        default: 'sm'
-    },
-    fade: {
-        type: Boolean,
-        default: true
-    }
-})
+export interface ModalProps {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    fade?: boolean;
+}
+
+withDefaults(defineProps<ModalProps>(), {
+    size: 'sm',
+    fade: true
+});
 
-const modal = ref(null)
+const modal = ref<HTMLElement | null>(null)
 
 onMounted(() => {
     nextTick(() => {
-        modal.value.focus()
+        modal.value?.focus()
     })
 })
 </script>

package/components/None.vue

@@ -9,12 +9,12 @@
             <IconNotesOff
                 v-if='compact'
                 :size='32'
-                :stroke='1'
+                stroke='1'
             />
             <IconNotesOff
                 v-else
                 :size='48'
-                :stroke='1'
+                stroke='1'
             />
         </div>
 
@@ -25,7 +25,7 @@
             }'
         >
             <div class='user-select-none'>
-                No <span v-text='label' />
+                <span v-text='label' />
             </div>
         </div>
 
@@ -44,27 +44,24 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
     IconNotesOff
 } from '@tabler/icons-vue'
 
-defineProps({
-    label: {
-        type: String,
-        default: 'Items'
-    },
-    compact: {
-        type: Boolean,
-        default: false
-    },
-    create: {
-        type: Boolean,
-        default: true
-    },
-})
+export interface NoneProps {
+    label?: string;
+    compact?: boolean;
+    create?: boolean;
+}
 
-const emit = defineEmits([
-    'create'
-])
+withDefaults(defineProps<NoneProps>(), {
+    label: 'No Items',
+    compact: false,
+    create: true
+});
+
+const emit = defineEmits<{
+    (e: 'create'): void
+}>()
 </script>

package/components/Pager.vue

@@ -1,14 +1,14 @@
 <template>
     <div class='pagination m-0'>
         <div>
-            <template v-if='parseInt(total) <= parseInt(limit)'>
+            <template v-if='total <= limit'>
                 <button
                     class='btn mx-1'
                     @click='changePage(0)'
                 >
                     <IconHome
                         :size='32'
-                        :stroke='1'
+                        stroke='1'
                         class='icon'
                     />Home
                 </button>
@@ -21,7 +21,7 @@
                 >
                     <IconHome
                         :size='32'
-                        :stroke='1'
+                        stroke='1'
                         class='icon'
                     />Home
                 </button>
@@ -30,7 +30,7 @@
                     <span class=''> ... </span>
                 </template>
 
-                <template v-if='parseInt(total) / parseInt(limit) > 2'>
+                <template v-if='total / limit > 2'>
                     <button
                         v-for='i in middle'
                         :key='i'
@@ -55,33 +55,31 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from 'vue'
 import {
     IconHome
 } from '@tabler/icons-vue';
 
-const props = defineProps({
-    total: {
-        type: Number
-    },
-    page: {
-        type: Number
-    },
-    limit: {
-        type: Number
-    }
-})
+export interface PagerProps {
+    total: number;
+    page: number;
+    limit: number;
+}
+
+const props = defineProps<PagerProps>();
 
-const emit = defineEmits(['page'])
+const emit = defineEmits<{
+    (e: 'page', page: number): void
+}>()
 
 const spread = ref(0)
-const middle = ref([])
+const middle = ref<number[]>([])
 const current = ref(0)
 const end = ref(0)
 
 const create = () => {
-    const endValue = Math.ceil(parseInt(props.total) / parseInt(props.limit));
+    const endValue = Math.ceil(props.total / props.limit);
     let spreadValue; //Number of pages in between home button and last page
     if (endValue <= 2) {
         spreadValue = 0;
@@ -104,7 +102,7 @@ const create = () => {
     };
 }
 
-const changePage = (page) => {
+const changePage = (page: number) => {
     current.value = page;
     emit('page', current.value);
 }
@@ -143,7 +141,7 @@ watch(() => props.limit, () => {
 watch(current, () => {
     if (end.value < 5) return; // All buttons are shown already
 
-    let start;
+    let start: number;
     if (current.value <= 3) {
         start = 0;
     } else if (current.value >= end.value - 4) {

package/components/Progress.vue

@@ -7,11 +7,12 @@
     </div>
 </template>
 
-<script setup>
-defineProps({
-    percent: {
-        type: Number,
-        default: 1
-    }
-})
+<script setup lang="ts">
+export interface ProgressProps {
+    percent?: number;
+}
+
+withDefaults(defineProps<ProgressProps>(), {
+    percent: 1
+});
 </script>

package/components/RefreshButton.vue

@@ -23,24 +23,21 @@
     </IconButton>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
     IconRefresh
 } from '@tabler/icons-vue';
 import IconButton from './IconButton.vue';
 
-const props = defineProps({
-    title: {
-        type: String,
-        default: 'Refresh'
-    },
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    size: {
-        type: Number,
-        default: 32
-    }
-})
+export interface RefreshButtonProps {
+    title?: string;
+    loading?: boolean;
+    size?: number;
+}
+
+const props = withDefaults(defineProps<RefreshButtonProps>(), {
+    title: 'Refresh',
+    loading: false,
+    size: 32
+});
 </script>

package/components/Schema.vue

@@ -57,7 +57,7 @@
                             <IconPlus
                                 v-if='!disabled'
                                 :size='32'
-                                :stroke='1'
+                                stroke='1'
                                 class='cursor-pointer'
                                 @click='push(key)'
                             />
@@ -71,13 +71,13 @@
                     >
                         <div class='d-flex'>
                             <div class='mx-2 my-2'>
-                                Entry <span v-text='i + 1' />
+                                Entry <span v-text='Number(i) + 1' />
                             </div>
                             <div class='ms-auto mx-2 my-2'>
                                 <IconTrash
                                     v-if='!disabled'
                                     :size='32'
-                                    :stroke='1'
+                                    stroke='1'
                                     class='cursor-pointer'
                                     @click='data[key].splice(i, 1)'
                                 />
@@ -106,7 +106,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
 import TablerInput from './input/Input.vue';
 import TablerToggle from './input/Toggle.vue';
@@ -117,28 +117,30 @@ import {
     IconTrash,
 } from '@tabler/icons-vue';
 
-const props = defineProps({
-    modelValue: {
-        type: Object,
-        required: true
-    },
-    schema: {
-        type: Object,
-        required: true
-    },
-    disabled: {
-        type: Boolean,
-        default: false
-    }
-})
+export interface SchemaProps {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modelValue: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    schema: any;
+    disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<SchemaProps>(), {
+    disabled: false
+});
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (e: 'update:modelValue', value: any): void;
+}>();
 
-const loading = ref(true)
-const s = ref({})
-const data = ref({})
+const loading = ref(true);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const s = ref<any>({});
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const data = ref<any>({});
 
-const push = (key) => {
+const push = (key: string) => {
     if (!props.schema.properties[key].items) data.value[key].push('');
     if (props.schema.properties[key].items.type === 'object') {
         data.value[key].push({});

package/components/Slidedown.vue

@@ -42,27 +42,26 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue';
 import {
     IconChevronDown
 } from '@tabler/icons-vue';
 
-const isExpanded = ref(false);
-
-const contentWrapperRef = ref(null);
+export interface SlidedownProps {
+    arrow?: boolean;
+    clickAnywhereExpand?: boolean;
+}
 
-const props = defineProps({
-    arrow: {
-        type: Boolean,
-        default: true
-    },
-    clickAnywhereExpand: {
-        type: Boolean,
-        default: false
-    }
+const props = withDefaults(defineProps<SlidedownProps>(), {
+    arrow: true,
+    clickAnywhereExpand: false
 });
 
+const isExpanded = ref(false);
+
+const contentWrapperRef = ref<HTMLElement | null>(null);
+
 function toggle() {
     isExpanded.value = !isExpanded.value;
 
@@ -72,7 +71,7 @@ function toggle() {
         if (isExpanded.value) {
             el.style.maxHeight = el.scrollHeight + 'px';
         } else {
-            el.style.maxHeight = null;
+            el.style.maxHeight = ''; // Reset to CSS default (0)
         }
     }
 };

package/components/input/Colour.vue

@@ -36,48 +36,37 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
 import TablerLabel from '../internal/Label.vue'
 
-const props = defineProps({
-    modelValue: {
-        type: String,
-        required: true
-    },
-    autofocus: {
-        type: Boolean,
-        default: false
-    },
-    default: {
-        type: String,
-        default: ''
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-    description: {
-        type: String,
-        default: ''
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    label: {
-        type: String,
-        default: ''
-    },
-})
+export interface ColourProps {
+    modelValue: string;
+    autofocus?: boolean;
+    default?: string;
+    required?: boolean;
+    description?: string;
+    disabled?: boolean;
+    label?: string;
+}
+
+const props = withDefaults(defineProps<ColourProps>(), {
+    autofocus: false,
+    default: '',
+    required: false,
+    description: '',
+    disabled: false,
+    label: ''
+});
 
-const emit = defineEmits([
-    'blur', 'update:modelValue'
-])
+const emit = defineEmits<{
+    (e: 'blur'): void;
+    (e: 'update:modelValue', value: string): void;
+}>();
 
-const current = ref('')
+const current = ref<string>('')
 
-const invertColours = {
+const invertColours: Record<string, string> = {
     '#1d273b': 'dark',
     '#ffffff': 'white',
     '#206bc4': 'blue',
@@ -91,7 +80,7 @@ const invertColours = {
     '#74b816': 'lime'
 }
 
-const colours = {
+const colours: Record<string, string> = {
     dark: '#1d273b',
     white: '#ffffff',
     blue: '#206bc4',