[pull] main from AzuraCast:main

frontend/components/Admin/Stations/Form/BackendForm.vue

@@ -319,7 +319,7 @@ const emit = defineEmits<FormTabEmits>();
 
 const {enableAdvancedFeatures} = useAzuraCast();
 
-const {v$, tabClass} = useVuelidateOnFormTab(
+const {form, v$, tabClass} = useVuelidateOnFormTab(
     props,
     emit,
     computed(() => {

frontend/components/Admin/Stations/Form/FrontendForm.vue

@@ -190,7 +190,7 @@ const emit = defineEmits<FormTabEmits>();
 
 const {enableAdvancedFeatures} = useAzuraCast();
 
-const {v$, tabClass} = useVuelidateOnFormTab(
+const {form, v$, tabClass} = useVuelidateOnFormTab(
     props,
     emit,
     computed(() => {

frontend/components/Admin/Stations/Form/RequestsForm.vue

@@ -70,7 +70,7 @@ interface StationRequestsFormProps extends FormTabProps {
 const props = defineProps<StationRequestsFormProps>();
 const emit = defineEmits<FormTabEmits>();
 
-const {v$, tabClass} = useVuelidateOnFormTab(
+const {form, v$, tabClass} = useVuelidateOnFormTab(
     props,
     emit,
     {

frontend/components/Admin/Stations/Form/StreamersForm.vue

@@ -147,7 +147,7 @@ const emit = defineEmits<FormTabEmits>();
 
 const {enableAdvancedFeatures} = useAzuraCast();
 
-const {v$, tabClass} = useVuelidateOnFormTab(
+const {form, v$, tabClass} = useVuelidateOnFormTab(
     props,
     emit,
     computed(() => {

frontend/components/Admin/StorageLocations/Form/Dropbox.vue

@@ -79,7 +79,7 @@ import Tab from "~/components/Common/Tab.vue";
 const props = defineProps<FormTabProps>();
 const emit = defineEmits<FormTabEmits>();
 
-const {v$, tabClass} = useVuelidateOnFormTab(
+const {form, v$, tabClass} = useVuelidateOnFormTab(
     props,
     emit,
     {

frontend/components/Common/AlbumArt.vue

@@ -25,7 +25,7 @@ import {useLightbox} from "~/vendor/lightbox";
 const props = withDefaults(
     defineProps<{
         src: string,
-        width: number
+        width?: number
     }>(),
     {
         width: 40

frontend/components/Common/Tab.vue

@@ -9,22 +9,15 @@
 </template>
 
 <script setup lang="ts">
-import {useTabChild} from "~/functions/tabs.ts";
+import {TabChildProps, useTabChild} from "~/functions/tabs.ts";
 
-const props = defineProps({
-    id: {
-        type: [String, Number],
-        default: null
-    },
-    label: {
-        type: String,
-        required: true
-    },
-    itemHeaderClass: {
-        type: [String, Function, Array],
-        default: () => null
+const props = withDefaults(
+    defineProps<TabChildProps>(),
+    {
+        id: null,
+        itemHeaderClass: null,
     }
-});
+);
 
 const {computedId, isActive, isLazy} = useTabChild(props);
 </script>

frontend/components/Common/Tabs.vue

@@ -37,26 +37,17 @@
 
 <script setup lang="ts">
 import {onMounted, ref} from "vue";
-import {useTabParent} from "~/functions/tabs.ts";
+import {TabParentProps, useTabParent} from "~/functions/tabs.ts";
 
-const props = defineProps({
-    modelValue: {
-        type: String,
-        default: null
-    },
-    navTabsClass: {
-        type: [String, Function, Array],
-        default: () => 'nav-tabs'
-    },
-    contentClass: {
-        type: [String, Function, Array],
-        default: () => 'mt-3'
-    },
-    destroyOnHide: {
-        type: Boolean,
-        default: false
+const props = withDefaults(
+    defineProps<TabParentProps>(),
+    {
+        modelValue: null,
+        navTabsClass: 'nav-tabs',
+        contentClass: 'mt-3',
+        destroyOnHide: false,
     }
-});
+);
 
 const emit = defineEmits(['update:modelValue']);
 

frontend/components/Stations/Media.vue

@@ -279,31 +279,22 @@ import useStationDateTimeFormatter from "~/functions/useStationDateTimeFormatter
 import {ApiFileList, CustomField, FileTypes} from "~/entities/ApiInterfaces.ts";
 import {DataTableTemplateRef} from "~/functions/useHasDatatable.ts";
 
-const props = defineProps({
-    initialPlaylists: {
-        type: Array,
-        required: false,
-        default: () => []
-    },
-    customFields: {
-        type: Array,
-        required: false,
-        default: () => []
-    },
-    validMimeTypes: {
-        type: Array,
-        required: false,
-        default: () => []
-    },
-    showSftp: {
-        type: Boolean,
-        default: true
-    },
-    supportsImmediateQueue: {
-        type: Boolean,
-        required: true
+const props = withDefaults(
+    defineProps<{
+        initialPlaylists?: any[], // TODO
+        customFields?: any[], // TODO
+        validMimeTypes?: string[],
+        showSftp?: boolean,
+        supportsImmediateQueue?: boolean,
+    }>(),
+    {
+        initialPlaylists: () => [],
+        customFields: () => [],
+        validMimeTypes: () => [],
+        showSftp: true,
+        supportsImmediateQueue: true
     }
-});
+);
 
 const listUrl = getStationApiUrl('/files/list');
 const batchUrl = getStationApiUrl('/files/batch');

frontend/components/Stations/Media/MediaToolbar.vue

@@ -220,30 +220,13 @@ import useHandleBatchResponse from "~/components/Stations/Media/useHandleBatchRe
 import {useNotify} from "~/functions/useNotify.ts";
 import {useDialog} from "~/functions/useDialog.ts";
 
-const props = defineProps({
-    currentDirectory: {
-        type: String,
-        required: true
-    },
-    selectedItems: {
-        type: Object,
-        required: true
-    },
-    playlists: {
-        type: Array,
-        default: () => {
-            return [];
-        }
-    },
-    batchUrl: {
-        type: String,
-        required: true
-    },
-    supportsImmediateQueue: {
-        type: Boolean,
-        required: true
-    }
-});
+const props = defineProps<{
+    currentDirectory: string,
+    selectedItems: object, // TODO
+    playlists?: any[], // TODO
+    batchUrl: string,
+    supportsImmediateQueue: boolean
+}>();
 
 const emit = defineEmits(['relist', 'add-playlist', 'move-files', 'create-directory']);
 

frontend/components/Stations/Media/MoveFilesModal.vue

@@ -96,24 +96,12 @@ import {ModalTemplateRef, useHasModal} from "~/functions/useHasModal.ts";
 import useHandleBatchResponse from "~/components/Stations/Media/useHandleBatchResponse.ts";
 import {useAsyncState} from "@vueuse/core";
 
-const props = defineProps({
-    selectedItems: {
-        type: Object,
-        required: true
-    },
-    currentDirectory: {
-        type: String,
-        required: true
-    },
-    batchUrl: {
-        type: String,
-        required: true
-    },
-    listDirectoriesUrl: {
-        type: String,
-        required: true
-    }
-});
+const props = defineProps<{
+    selectedItems: object, // TODO
+    currentDirectory: string,
+    batchUrl: string,
+    listDirectoriesUrl: string,
+}>();
 
 const emit = defineEmits(['relist']);
 

frontend/components/Stations/Mounts/Form/AutoDj.vue

@@ -58,7 +58,7 @@ const emit = defineEmits<FormTabEmits>();
 
 const {maxBitrate} = useAzuraCastStation();
 
-const {v$, tabClass} = useVuelidateOnFormTab(
+const {form, v$, tabClass} = useVuelidateOnFormTab(
     props,
     emit,
     {
@@ -97,6 +97,6 @@ const formatOptions = [
 ];
 
 const formatSupportsBitrateOptions = computed(() => {
-    return (props.form.autodj_format !== 'flac');
+    return (form.value.autodj_format !== 'flac');
 });
 </script>

frontend/components/Stations/Remotes/Form/AutoDj.vue

@@ -99,7 +99,7 @@ const emit = defineEmits<FormTabEmits>();
 
 const {maxBitrate} = useAzuraCastStation();
 
-const {v$, tabClass} = useVuelidateOnFormTab(
+const {form, v$, tabClass} = useVuelidateOnFormTab(
     props,
     emit,
     {

frontend/components/Stations/Reports/Overview/CommonMetricsView.vue

@@ -52,8 +52,8 @@
 
 <script lang="ts">
 export interface DateRange {
-    start: Date,
-    end: Date,
+    startDate: Date,
+    endDate: Date,
 }
 </script>
 

frontend/components/Stations/Webhooks/Form/BasicInfo.vue

@@ -96,9 +96,9 @@ const triggerOptions = computed(() => {
 
 const {$gettext, interpolate} = useTranslate();
 
-const langSeconds = $gettext('%{ seconds } seconds');
-const langMinutes = $gettext('%{ minutes } minutes');
-const langHours = $gettext('%{ hours } hours');
+const langSeconds = $gettext('%{seconds} seconds');
+const langMinutes = $gettext('%{minutes} minutes');
+const langHours = $gettext('%{hours} hours');
 
 const rateLimitOptions = [
     {

frontend/functions/tabs.ts

@@ -1,4 +1,29 @@
-import {InjectionKey, UnwrapNestedRefs, computed, inject, onBeforeMount, onBeforeUnmount, provide, reactive, watch} from "vue";
+import {
+    computed,
+    inject,
+    InjectionKey,
+    onBeforeMount,
+    onBeforeUnmount,
+    provide,
+    reactive,
+    UnwrapNestedRefs,
+    watch
+} from "vue";
+
+type VueClass = string | Record<string, boolean> | VueClass[];
+
+export interface TabChildProps {
+    id?: string | number,
+    label: string,
+    itemHeaderClass?: VueClass
+}
+
+export interface TabParentProps {
+    modelValue?: string,
+    navTabsClass?: VueClass,
+    contentClass?: VueClass,
+    destroyOnHide?: boolean
+}
 
 interface TabChild {
     computedId: string,
@@ -16,7 +41,12 @@ interface TabParent {
 
 const tabStateKey: InjectionKey<UnwrapNestedRefs<TabParent>> = Symbol() as InjectionKey<UnwrapNestedRefs<TabParent>>;
 
-export function useTabParent(props) {
+export function useTabParent(originalProps: TabParentProps) {
+    const props: TabParentProps = {
+        destroyOnHide: false,
+        ...originalProps,
+    }
+
     const state = reactive<TabParent>({
         lazy: props.destroyOnHide,
         active: null,
@@ -38,31 +68,35 @@ export function useTabParent(props) {
     return state;
 }
 
-export function useTabChild(props) {
+export function useTabChild(props: TabChildProps) {
     const tabState = inject(tabStateKey);
 
-    const computedId = props.id ?? props.label.toLowerCase().replace(/ /g, "-");
+    const computedId = computed(() => {
+        return String(
+            props.id ?? props.label.toLowerCase().replace(/ /g, "-")
+        );
+    });
 
     const isLazy = tabState.lazy;
 
     const isActive = computed(() => {
-        return tabState.active === computedId;
+        return tabState.active === computedId.value;
     });
 
     watch(
         () => ({...props}),
-        () => tabState.update(computedId, {
+        () => tabState.update(computedId.value, {
             ...props,
-            computedId: computedId
+            computedId: computedId.value
         })
     );
 
     onBeforeMount(() => tabState.add({
         ...props,
-        computedId: computedId
+        computedId: computedId.value
     }));
 
-    onBeforeUnmount(() => tabState.delete(computedId));
+    onBeforeUnmount(() => tabState.delete(computedId.value));
 
     return {
         computedId,

frontend/functions/useChart.ts

@@ -39,7 +39,8 @@ export interface ChartProps<
     options?: ChartConfiguration<TType, TData, TLabel> | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>,
     data?: any[],
     aspectRatio?: number,
-    alt?: ChartAltData[]
+    alt?: ChartAltData[],
+    labels?: Array<any>
 }
 
 export const chartProps = {

frontend/functions/useResettableRef.ts

@@ -1,11 +1,13 @@
 import {MaybeRefOrGetter, Ref, ref, toValue} from "vue";
 import {cloneDeep} from "lodash";
 
-export function useResettableRef<T extends object = object>(original: MaybeRefOrGetter<T>): {
+export function useResettableRef<T = any>(
+    original: MaybeRefOrGetter<T>
+): {
     record: Ref<T>,
     reset(): void
 } {
-    const record = ref<T>(cloneDeep(toValue(original)));
+    const record = ref(cloneDeep(toValue(original))) as Ref<T>;
 
     const reset = () => {
         record.value = cloneDeep(toValue(original));