Even more TS work and fixes.

frontend/components/Account/ApiKeyModal.vue

@@ -74,6 +74,7 @@ import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
 import {useAxios} from "~/vendor/axios";
 import Modal from "~/components/Common/Modal.vue";
 import {ModalTemplateRef, useHasModal} from "~/functions/useHasModal.ts";
+import {ComponentExposed} from "vue-component-type-helpers";
 
 const props = defineProps<{
     createUrl: string,
@@ -107,7 +108,7 @@ const create = () => {
     show();
 };
 
-const $field = ref<InstanceType<typeof FormGroupField> | null>(null);
+const $field = ref<ComponentExposed<typeof FormGroupField> | null>(null);
 
 const onShown = () => {
     nextTick(() => {

frontend/components/Admin/Stations/StationForm.vue

@@ -116,8 +116,6 @@ const props = withDefaults(
         isRsasInstalled: false,
         isShoutcastInstalled: false,
         isStereoToolInstalled: false,
-        createUrl: null,
-        editUrl: null,
         isModal: false
     }
 );

frontend/components/Common/AudioPlayer.vue

@@ -20,7 +20,6 @@ const props = withDefaults(
         isMuted?: boolean
     }>(),
     {
-        title: null,
         volume: 55,
         isMuted: false
     }

frontend/components/Common/Avatar.vue

@@ -27,8 +27,6 @@ const props = withDefaults(
         width?: number
     }>(),
     {
-        service: null,
-        serviceUrl: null,
         width: 64
     }
 );

frontend/components/Common/BitrateOptions.vue

@@ -70,37 +70,30 @@
     </form-group>
 </template>
 
-<script setup lang="ts">
-import {FormFieldProps, useFormField} from "~/components/Form/useFormField";
+<script setup lang="ts" generic="T = string | number">
+import {FormFieldEmits, FormFieldProps, useFormField} from "~/components/Form/useFormField";
 import {computed, useSlots, WritableComputedRef} from "vue";
 import {includes, map} from "lodash";
 import useSlotsExcept from "~/functions/useSlotsExcept.ts";
 import FormMultiCheck from "~/components/Form/FormMultiCheck.vue";
 import FormLabel, {FormLabelParentProps} from "~/components/Form/FormLabel.vue";
 import FormGroup from "~/components/Form/FormGroup.vue";
 
-interface BitrateOptionsProps extends FormFieldProps, FormLabelParentProps {
+interface BitrateOptionsProps extends FormFieldProps<T>, FormLabelParentProps {
     id: string,
     maxBitrate: number,
     name?: string,
     label?: string,
     description?: string,
 }
 
-const props = withDefaults(
-    defineProps<BitrateOptionsProps>(),
-    {
-        name: null,
-        label: null,
-        description: null,
-    }
-);
+const props = defineProps<BitrateOptionsProps>();
 
 const slots = useSlots();
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits<FormFieldEmits<T>>();
 
-const {model, isRequired} = useFormField(props, emit);
+const {model, isRequired} = useFormField<T>(props, emit);
 
 const radioBitrates = [
     32, 48, 64, 96, 128, 192, 256, 320

frontend/components/Common/CardPage.vue

@@ -47,7 +47,6 @@ const props = withDefaults(
         headerId?: string,
     }>(),
     {
-        title: null,
         headerId: 'card_hdr'
     }
 );

frontend/components/Common/Charts/TimeSeriesChart.vue

@@ -16,7 +16,7 @@ import ChartAltValues from "~/components/Common/Charts/ChartAltValues.vue";
 import useChart, {ChartProps, ChartTemplateRef} from "~/functions/useChart";
 import {useLuxon} from "~/vendor/luxon";
 
-interface TimeSeriesChartProps extends ChartProps {
+interface TimeSeriesChartProps extends ChartProps<'line'> {
     tz?: string,
 }
 

frontend/components/Common/Dialog.vue

@@ -57,7 +57,7 @@ export interface DialogResponse {
 }
 
 export interface DialogComponentProps extends DialogOptions {
-    resolvePromise(body: DialogResponse)
+    resolvePromise(body: DialogResponse): void
 }
 </script>
 

frontend/components/Common/GridLayout.vue

@@ -77,8 +77,6 @@ export interface GridLayoutProps {
 }
 
 const props = withDefaults(defineProps<GridLayoutProps>(), {
-    id: null,
-    apiUrl: null,
     paginated: false,
     loading: false,
     hideOnLoading: true,

frontend/components/Common/Modal.vue

@@ -67,8 +67,7 @@ const props = withDefaults(
     {
         active: false,
         busy: false,
-        size: 'md',
-        title: null
+        size: 'md'
     }
 );
 

frontend/components/Common/ModalForm.vue

@@ -89,8 +89,7 @@ const props = withDefaults(
         id: 'edit-modal',
         loading: false,
         disableSaveButton: false,
-        noEnforceFocus: false,
-        error: null
+        noEnforceFocus: false
     }
 );
 

frontend/components/Common/PaginationItem.vue

@@ -33,7 +33,6 @@ const props = withDefaults(
     }>(),
     {
         page: 1,
-        label: null,
         active: false,
         disabled: false,
     }

frontend/components/Common/PlayButton.vue

@@ -26,12 +26,11 @@ const props = withDefaults(
         url: string,
         isStream?: boolean,
         isHls?: boolean,
-        iconClass?: stringm
+        iconClass?: string
     }>(),
     {
         isStream: false,
-        isHls: false,
-        iconClass: null
+        isHls: false
     }
 );
 

frontend/components/Common/Tab.vue

@@ -11,13 +11,7 @@
 <script setup lang="ts">
 import {TabChildProps, useTabChild} from "~/functions/tabs.ts";
 
-const props = withDefaults(
-    defineProps<TabChildProps>(),
-    {
-        id: null,
-        itemHeaderClass: null,
-    }
-);
+const props = defineProps<TabChildProps>();
 
 const {computedId, isActive, isLazy} = useTabChild(props);
 </script>

frontend/components/Common/Tabs.vue

@@ -42,7 +42,6 @@ import {TabParentProps, useTabParent} from "~/functions/tabs.ts";
 const props = withDefaults(
     defineProps<TabParentProps>(),
     {
-        modelValue: null,
         navTabsClass: 'nav-tabs',
         contentClass: 'mt-3',
         destroyOnHide: false,

frontend/components/Common/TimeCode.vue

@@ -15,27 +15,27 @@ import {isEmpty, padStart} from 'lodash';
 
 const props = withDefaults(
     defineProps<{
-        modelValue?: string
+        modelValue?: string | number | null
     }>(),
     {
         modelValue: null,
     }
 );
 
 const emit = defineEmits<{
-    (e: 'update:modelValue', value: string | null): void
+    (e: 'update:modelValue', value: number | null): void
 }>();
 
-const parseTimeCode = (timeCode) => {
+const parseTimeCode = (timeCode: string | number | null) => {
     if (timeCode !== '' && timeCode !== null) {
-        timeCode = padStart(timeCode, 4, '0');
+        timeCode = padStart(String(timeCode), 4, '0');
         return timeCode.substring(0, 2) + ':' + timeCode.substring(2);
     }
 
     return null;
 }
 
-const convertToTimeCode = (time) => {
+const convertToTimeCode = (time: string): number | null => {
     if (isEmpty(time)) {
         return null;
     }

frontend/components/Common/Toast.vue

@@ -53,7 +53,6 @@ const props = withDefaults(
         variant?: string,
     }>(),
     {
-        title: null,
         variant: 'info',
     }
 );

frontend/components/Common/Waveform.vue

@@ -66,16 +66,11 @@ import usePlayerVolume from "~/functions/usePlayerVolume";
 import useShowVolume from "~/functions/useShowVolume.ts";
 import MuteButton from "~/components/Common/MuteButton.vue";
 
-const props = withDefaults(
-    defineProps<{
-        audioUrl: string,
-        waveformUrl: string,
-        waveformCacheUrl?: string,
-    }>(),
-    {
-        waveformCacheUrl: null
-    }
-);
+const props = defineProps<{
+    audioUrl: string,
+    waveformUrl: string,
+    waveformCacheUrl?: string,
+}>();
 
 const emit = defineEmits(['ready']);
 

frontend/components/Form/FormGroupCheckbox.vue

@@ -51,15 +51,15 @@
     </form-group>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T = boolean | null">
 import VuelidateError from "./VuelidateError.vue";
 import FormLabel, {FormLabelParentProps} from "~/components/Form/FormLabel.vue";
 import FormGroup from "~/components/Form/FormGroup.vue";
-import {FormFieldProps, useFormField} from "~/components/Form/useFormField";
+import {FormFieldEmits, FormFieldProps, useFormField} from "~/components/Form/useFormField";
 import {useSlots} from "vue";
 import FormCheckbox from "~/components/Form/FormCheckbox.vue";
 
-interface FormGroupCheckboxProps extends FormFieldProps, FormLabelParentProps {
+interface FormGroupCheckboxProps extends FormFieldProps<T>, FormLabelParentProps {
     id: string,
     name?: string,
     label?: string,
@@ -80,7 +80,7 @@ const props = withDefaults(
 
 const slots = useSlots();
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits<FormFieldEmits<T>>();
 
-const {model, isVuelidateField, isRequired} = useFormField(props, emit);
+const {model, isVuelidateField, isRequired} = useFormField<T>(props, emit);
 </script>