More Vue3 migrations.

frontend/vue/components/Dashboard.vue

@@ -181,7 +181,7 @@
 </template>
 
 <script>
-import TimeSeriesChart from '~/components/Common/TimeSeriesChart';
+import TimeSeriesChart from '~/components/Common/Charts/TimeSeriesChart.vue';
 import DataTable from '~/components/Common/DataTable';
 import store from 'store';
 import Icon from '~/components/Common/Icon';

frontend/vue/components/Setup/Register.vue

@@ -33,7 +33,7 @@
                 <form id="login-form" class="form vue-form" action="" method="post">
                     <input type="hidden" name="csrf" :value="csrf"/>
 
-                    <b-wrapped-form-group id="username" name="username" label-class="mb-2" :field="v$.form.username"
+                    <b-wrapped-form-group id="username" name="username" label-class="mb-2" :field="v$.username"
                                           input-type="email">
                         <template #label="{lang}">
                             <icon icon="email" class="mr-1"></icon>
@@ -41,7 +41,7 @@
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-wrapped-form-group id="password" name="password" label-class="mb-2" :field="v$.form.password"
+                    <b-wrapped-form-group id="password" name="password" label-class="mb-2" :field="v$.password"
                                           input-type="password">
                         <template #label="{lang}">
                             <icon icon="vpn_key" class="mr-1"></icon>
@@ -49,7 +49,7 @@
                         </template>
                     </b-wrapped-form-group>
 
-                    <b-button type="submit" size="lg" block variant="primary" :disabled="v$.form.$invalid"
+                    <b-button type="submit" size="lg" block variant="primary" :disabled="v$.$invalid"
                               class="mt-2">
                         {{ $gettext('Create Account') }}
                     </b-button>
@@ -59,38 +59,28 @@
     </div>
 </template>
 
-<script>
-import useVuelidate from "@vuelidate/core";
-import {email, required} from '@vuelidate/validators';
+<script setup>
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import Icon from "~/components/Common/Icon";
-import validatePassword from '~/functions/validatePassword.js';
+import {reactive} from "vue";
+import {email, required} from "@vuelidate/validators";
+import validatePassword from "~/functions/validatePassword";
+import useVuelidate from "@vuelidate/core";
 
-export default {
-    name: 'SetupRegister',
-    components: {Icon, BWrappedFormGroup},
-    setup() {
-        return {v$: useVuelidate()}
-    },
-    props: {
-        csrf: String,
-        error: String,
-    },
-    validations() {
-        return {
-            form: {
-                username: {required, email},
-                password: {required, validatePassword}
-            }
-        }
-    },
-    data() {
-        return {
-            form: {
-                username: null,
-                password: null,
-            }
-        }
-    }
-}
+const props = defineProps({
+    csrf: String,
+    error: String,
+});
+
+const form = reactive({
+    username: null,
+    password: null,
+});
+
+const formValidations = {
+    username: {required, email},
+    password: {required, validatePassword}
+};
+
+const v$ = useVuelidate(formValidations, form);
 </script>

frontend/vue/components/Setup/Settings.vue

@@ -8,7 +8,9 @@
         </template>
         <template #cardUpper>
             <info-card>
-                {{ $gettext('Complete the setup process by providing some information about your broadcast environment. These settings can be changed later from the administration panel.') }}
+                {{
+                    $gettext('Complete the setup process by providing some information about your broadcast environment. These settings can be changed later from the administration panel.')
+                }}
             </info-card>
         </template>
         <template #submitButtonName>
@@ -16,30 +18,26 @@
         </template>
     </admin-settings>
 </template>
-<script>
+
+<script setup>
 import AdminSettings from "~/components/Admin/Settings";
 import SetupStep from "./SetupStep";
 import InfoCard from "~/components/Common/InfoCard";
 
-export default {
-    name: 'SetupSettings',
-    components: {InfoCard, SetupStep, AdminSettings},
-    props: {
-        apiUrl: String,
-        releaseChannel: {
-            type: String,
-            default: 'rolling',
-            required: false
-        },
-        continueUrl: {
-            type: String,
-            required: true
-        }
+const props = defineProps({
+    apiUrl: String,
+    releaseChannel: {
+        type: String,
+        default: 'rolling',
+        required: false
     },
-    methods: {
-        onSaved() {
-            window.location.href = this.continueUrl;
-        }
+    continueUrl: {
+        type: String,
+        required: true
     }
+});
+
+const onSaved = () => {
+    window.location.href = props.continueUrl;
 }
 </script>

frontend/vue/components/Setup/SetupStep.vue

@@ -29,25 +29,20 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import Icon from "~/components/Common/Icon";
 
-export default {
-    name: 'SetupStep',
-    components: {Icon},
-    props: {
-        step: Number
-    },
-    methods: {
-        getStepperClass(currentStep) {
-            if (this.step === currentStep) {
-                return ['stepper', 'active'];
-            } else if (this.step > currentStep) {
-                return ['stepper', 'done'];
-            } else {
-                return ['stepper'];
-            }
-        }
+const props = defineProps({
+    step: Number
+});
+
+const getStepperClass = (currentStep) => {
+    if (props.step === currentStep) {
+        return ['stepper', 'active'];
+    } else if (props.step > currentStep) {
+        return ['stepper', 'done'];
+    } else {
+        return ['stepper'];
     }
 }
 </script>

frontend/vue/components/Setup/Station.vue

@@ -14,7 +14,7 @@
             }}
         </info-card>
 
-        <admin-stations-form v-bind="$props" ref="form" :is-edit-mode="false" :create-url="createUrl"
+        <admin-stations-form v-bind="$props" ref="adminForm" :is-edit-mode="false" :create-url="createUrl"
                              @submitted="onSubmitted">
             <template #submitButtonText>
                 {{ $gettext('Create and Continue') }}
@@ -23,29 +23,28 @@
     </b-card>
 </template>
 
-<script>
+<script setup>
 import AdminStationsForm, {StationFormProps} from "~/components/Admin/Stations/StationForm";
 import SetupStep from "./SetupStep";
 import InfoCard from "~/components/Common/InfoCard";
+import {onMounted, ref} from "vue";
 
-export default {
-    name: 'StationsProfileEdit',
-    components: {InfoCard, SetupStep, AdminStationsForm},
-    mixins: [StationFormProps],
-    props: {
-        createUrl: String,
-        continueUrl: {
-            type: String,
-            required: true
-        }
-    },
-    mounted() {
-        this.$refs.form.reset();
-    },
-    methods: {
-        onSubmitted() {
-            window.location.href = this.continueUrl;
-        },
+const props = defineProps({
+    ...StationFormProps.props,
+    createUrl: String,
+    continueUrl: {
+        type: String,
+        required: true
     }
+});
+
+const adminForm = ref(); // Template Ref
+
+onMounted(() => {
+    adminForm.value.reset();
+});
+
+const onSubmitted = () => {
+    window.location.href = props.continueUrl;
 }
 </script>

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

@@ -44,7 +44,7 @@
 </template>
 
 <script setup>
-import PieChart from "~/components/Common/PieChart";
+import PieChart from "~/components/Common/Charts/PieChart.vue";
 import DataTable from "~/components/Common/DataTable";
 import formatTime from "~/functions/formatTime";
 import {onMounted, ref, shallowRef, toRef, watch} from "vue";

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

@@ -46,10 +46,10 @@
 </template>
 
 <script setup>
-import TimeSeriesChart from "~/components/Common/TimeSeriesChart";
-import HourChart from "~/components/Stations/Reports/Overview/HourChart";
+import TimeSeriesChart from "~/components/Common/Charts/TimeSeriesChart.vue";
+import HourChart from "~/components/Common/Charts/HourChart.vue";
 import {DateTime} from "luxon";
-import PieChart from "~/components/Common/PieChart";
+import PieChart from "~/components/Common/Charts/PieChart.vue";
 import {onMounted, ref, shallowRef, toRef, watch} from "vue";
 import {get, set, useMounted} from "@vueuse/core";
 import {useAxios} from "~/vendor/axios";

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

@@ -25,7 +25,7 @@
 </template>
 
 <script setup>
-import PieChart from "~/components/Common/PieChart";
+import PieChart from "~/components/Common/Charts/PieChart.vue";
 import DataTable from "~/components/Common/DataTable";
 import {onMounted, ref, shallowRef, toRef, watch} from "vue";
 import gettext from "~/vendor/gettext";