upgrade quasar

package.json

@@ -17,21 +17,21 @@
   "dependencies": {
     "@jsonforms/core": "^3.2.1",
     "@jsonforms/vue": "^3.2.1",
-    "@quasar/extras": "^1.16.11",
+    "@quasar/extras": "^1.16.13",
     "@vueuse/core": "^11.0.0",
     "pinia": "^2.1.7",
     "qrcode": "^1.5.3",
-    "quasar": "^2.17.0",
+    "quasar": "^2.17.3",
     "vue": "^3.4.18",
-    "vue-i18n": "^9.13.1",
+    "vue-i18n": "^10.0.0",
     "vue-qrcode": "^2.2.2",
     "vue-router": "^4.3.2",
     "vue-sse": "^2.5.2"
   },
   "devDependencies": {
     "@intlify/eslint-plugin-vue-i18n": "^3.0.0",
-    "@intlify/unplugin-vue-i18n": "^5.0.0",
-    "@quasar/app-vite": "^2.0.0-beta.22",
+    "@intlify/unplugin-vue-i18n": "^6.0.0",
+    "@quasar/app-vite": "^2.0.0-rc.2",
     "@types/lodash": "^4.17.1",
     "@types/node": "^22.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
@@ -41,7 +41,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.26.0",
     "prettier": "^3.2.5",
-    "typescript": "^5.4.5",
+    "typescript": ">=5.4.5",
     "vite-plugin-checker": "^0.8.0",
     "vue-tsc": "^2.0.0"
   },

quasar.config.ts

@@ -3,10 +3,10 @@
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
-import { configure } from 'quasar/wrappers';
+import { defineConfig } from '#q-app/wrappers';
 import { fileURLToPath } from 'node:url';
 
-export default configure((ctx) => {
+export default defineConfig((ctx) => {
   return {
     // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
     // preFetch: true,

src/components/form/array/ArrayListElement.vue

@@ -22,8 +22,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { Styles } from '../styles';
+import { defineComponent, type PropType } from 'vue';
+import type { Styles } from '../styles';
 
 const listItem = defineComponent({
   name: 'ArrayListElement',

src/components/form/array/ArrayListRenderer.vue

@@ -43,9 +43,9 @@
 </template>
 
 <script lang="ts">
-import { composePaths, createDefaultValue, ControlElement, Resolve, JsonSchema } from '@jsonforms/core';
+import { composePaths, createDefaultValue, type ControlElement, Resolve, type JsonSchema } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { DispatchRenderer, rendererProps, useJsonFormsArrayControl, RendererProps } from '@jsonforms/vue';
+import { DispatchRenderer, rendererProps, useJsonFormsArrayControl, type RendererProps } from '@jsonforms/vue';
 import { useQuasarArrayControl } from '../util';
 import ArrayListElement from './ArrayListElement.vue';
 

src/components/form/array/index.ts

@@ -1,4 +1,4 @@
-import { JsonFormsRendererRegistryEntry, rankWith, schemaTypeIs } from '@jsonforms/core';
+import { type JsonFormsRendererRegistryEntry, rankWith, schemaTypeIs } from '@jsonforms/core';
 
 import { default as ArrayListRenderer } from './ArrayListRenderer.vue';
 

src/components/form/complex/AllOfRenderer.vue

@@ -29,8 +29,14 @@
 </template>
 
 <script lang="ts">
-import { CombinatorSubSchemaRenderInfo, ControlElement, createCombinatorRenderInfos, findMatchingUISchema, UISchemaElement } from '@jsonforms/core';
-import { DispatchRenderer, rendererProps, RendererProps, useJsonFormsAllOfControl } from '@jsonforms/vue';
+import {
+  type CombinatorSubSchemaRenderInfo,
+  type ControlElement,
+  createCombinatorRenderInfos,
+  findMatchingUISchema,
+  type UISchemaElement,
+} from '@jsonforms/core';
+import { DispatchRenderer, rendererProps, type RendererProps, useJsonFormsAllOfControl } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
 import { useQuasarControl } from '../util';
 import { CombinatorProperties } from './components';

src/components/form/complex/AnyOfRenderer.vue

@@ -26,8 +26,8 @@
 </template>
 
 <script lang="ts">
-import { CombinatorSubSchemaRenderInfo, ControlElement, createCombinatorRenderInfos } from '@jsonforms/core';
-import { DispatchRenderer, rendererProps, RendererProps, useJsonFormsAnyOfControl } from '@jsonforms/vue';
+import { type CombinatorSubSchemaRenderInfo, type ControlElement, createCombinatorRenderInfos } from '@jsonforms/core';
+import { DispatchRenderer, rendererProps, type RendererProps, useJsonFormsAnyOfControl } from '@jsonforms/vue';
 
 import { defineComponent, ref } from 'vue';
 

src/components/form/complex/EnumArrayRenderer.vue

@@ -16,9 +16,9 @@
 </template>
 
 <script lang="ts">
-import { ControlElement } from '@jsonforms/core';
+import type { ControlElement } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsMultiEnumControl, RendererProps } from '@jsonforms/vue';
+import { rendererProps, useJsonFormsMultiEnumControl, type RendererProps } from '@jsonforms/vue';
 import { useQuasarBasicControl } from '../util';
 
 const controlRenderer = defineComponent({

src/components/form/complex/ObjectRenderer.vue

@@ -13,8 +13,8 @@
 </template>
 
 <script lang="ts">
-import { ControlElement, findUISchema, Generate, GroupLayout, UISchemaElement } from '@jsonforms/core';
-import { DispatchRenderer, rendererProps, RendererProps, useJsonFormsControlWithDetail } from '@jsonforms/vue';
+import { type ControlElement, findUISchema, Generate, type GroupLayout, type UISchemaElement } from '@jsonforms/core';
+import { DispatchRenderer, rendererProps, type RendererProps, useJsonFormsControlWithDetail } from '@jsonforms/vue';
 import cloneDeep from 'lodash/cloneDeep';
 import isEmpty from 'lodash/isEmpty';
 import { defineComponent } from 'vue';

src/components/form/complex/components/CombinatorProperties.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { Generate, JsonSchema, Layout, UISchemaElement } from '@jsonforms/core';
+import { Generate, type JsonSchema, type Layout, type UISchemaElement } from '@jsonforms/core';
 import omit from 'lodash/omit';
-import { PropType, defineComponent } from 'vue';
+import { type PropType, defineComponent } from 'vue';
 import { DispatchRenderer } from '@jsonforms/vue';
 
 interface CombinatorProps {

src/components/form/complex/index.ts

@@ -1,11 +1,11 @@
 import {
   isAllOfControl,
   isAnyOfControl,
-  JsonFormsRendererRegistryEntry,
+  type JsonFormsRendererRegistryEntry,
   rankWith,
   and,
   hasType,
-  JsonSchema,
+  type JsonSchema,
   schemaMatches,
   schemaSubPathMatches,
   uiTypeIs,

src/components/form/controls/BooleanToggleControlRenderer.vue

@@ -14,9 +14,9 @@
 </template>
 
 <script lang="ts">
-import { ControlElement } from '@jsonforms/core';
+import type { ControlElement } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl, RendererProps } from '@jsonforms/vue';
+import { rendererProps, useJsonFormsControl, type RendererProps } from '@jsonforms/vue';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useQuasarControl } from '../util';
 

src/components/form/controls/ColorControlRenderer.vue

@@ -19,9 +19,9 @@
 </template>
 
 <script lang="ts">
-import { ControlElement } from '@jsonforms/core';
+import type { ControlElement } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl, RendererProps } from '@jsonforms/vue';
+import { rendererProps, useJsonFormsControl, type RendererProps } from '@jsonforms/vue';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useQuasarControl } from '../util';
 

src/components/form/controls/ControlWrapper.vue

@@ -24,9 +24,9 @@
 
 <script lang="ts">
 import { isDescriptionHidden } from '@jsonforms/core';
-import { defineComponent, PropType } from 'vue';
-import { Styles } from '../styles';
-import { Options } from '../util';
+import { defineComponent, type PropType } from 'vue';
+import type { Styles } from '../styles';
+import type { Options } from '../util';
 
 export default defineComponent({
   name: 'ControlWrapper',

src/components/form/controls/EnumArrayControlRenderer.vue

@@ -19,9 +19,9 @@
 </template>
 
 <script lang="ts">
-import { ControlElement } from '@jsonforms/core';
+import type { ControlElement } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsMultiEnumControl, RendererProps } from '@jsonforms/vue';
+import { rendererProps, useJsonFormsMultiEnumControl, type RendererProps } from '@jsonforms/vue';
 import { useQuasarBasicControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 

src/components/form/controls/EnumControlRenderer.vue

@@ -17,9 +17,9 @@
 </template>
 
 <script lang="ts">
-import { ControlElement } from '@jsonforms/core';
+import type { ControlElement } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsEnumControl, RendererProps } from '@jsonforms/vue';
+import { rendererProps, useJsonFormsEnumControl, type RendererProps } from '@jsonforms/vue';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useQuasarControl } from '../util';
 

src/components/form/controls/NumberControlRenderer.vue

@@ -19,9 +19,9 @@
 </template>
 
 <script lang="ts">
-import { ControlElement } from '@jsonforms/core';
+import type { ControlElement } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl, RendererProps } from '@jsonforms/vue';
+import { rendererProps, useJsonFormsControl, type RendererProps } from '@jsonforms/vue';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useQuasarControl } from '../util';
 

src/components/form/controls/SliderControlRenderer.vue

@@ -20,9 +20,9 @@
 </template>
 
 <script lang="ts">
-import { ControlElement } from '@jsonforms/core';
+import type { ControlElement } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl, RendererProps } from '@jsonforms/vue';
+import { rendererProps, useJsonFormsControl, type RendererProps } from '@jsonforms/vue';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useQuasarControl } from '../util';
 

src/components/form/controls/StringControlRenderer.vue

@@ -17,9 +17,9 @@
 </template>
 
 <script lang="ts">
-import { ControlElement } from '@jsonforms/core';
+import type { ControlElement } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl, RendererProps } from '@jsonforms/vue';
+import { rendererProps, useJsonFormsControl, type RendererProps } from '@jsonforms/vue';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useQuasarControl } from '../util';
 

src/components/form/controls/index.ts

@@ -2,7 +2,7 @@
 // export * from './directives';
 
 import {
-  JsonFormsRendererRegistryEntry,
+  type JsonFormsRendererRegistryEntry,
   rankWith,
   isStringControl,
   isRangeControl,
@@ -11,7 +11,7 @@ import {
   or,
   and,
   hasType,
-  JsonSchema,
+  type JsonSchema,
   schemaMatches,
   schemaSubPathMatches,
   uiTypeIs,

src/components/form/layouts/GroupRenderer.vue

@@ -24,9 +24,9 @@
 </template>
 
 <script lang="ts">
-import { JsonFormsRendererRegistryEntry, Layout, rankWith, and, isLayout, uiTypeIs } from '@jsonforms/core';
+import { type JsonFormsRendererRegistryEntry, type Layout, rankWith, and, isLayout, uiTypeIs } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { DispatchRenderer, rendererProps, useJsonFormsLayout, RendererProps } from '@jsonforms/vue';
+import { DispatchRenderer, rendererProps, useJsonFormsLayout, type RendererProps } from '@jsonforms/vue';
 import { useQuasarLayout } from '../util';
 
 const layoutRenderer = defineComponent({

src/components/form/layouts/LayoutRenderer.vue

@@ -14,9 +14,9 @@
 </template>
 
 <script lang="ts">
-import { Layout } from '@jsonforms/core';
+import type { Layout } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { DispatchRenderer, rendererProps, useJsonFormsLayout, RendererProps } from '@jsonforms/vue';
+import { DispatchRenderer, rendererProps, useJsonFormsLayout, type RendererProps } from '@jsonforms/vue';
 import { useQuasarLayout } from '../util';
 
 const layoutRenderer = defineComponent({

src/components/form/layouts/TopLevelNavigationRenderer.vue

@@ -51,9 +51,9 @@
 </template>
 
 <script lang="ts">
-import { Layout, Categorization, Category, isVisible, Scoped } from '@jsonforms/core';
+import { type Layout, type Categorization, type Category, isVisible, type Scoped } from '@jsonforms/core';
 import { defineComponent, ref } from 'vue';
-import { DispatchRenderer, rendererProps, useJsonFormsLayout, RendererProps } from '@jsonforms/vue';
+import { DispatchRenderer, rendererProps, useJsonFormsLayout, type RendererProps } from '@jsonforms/vue';
 import { useQuasarLayout, useAjv } from '../util';
 
 const TopLevelNavigationRenderer = defineComponent({

src/components/form/layouts/index.ts

@@ -1,4 +1,4 @@
-import { JsonFormsRendererRegistryEntry, rankWith, uiTypeIs, isLayout, and } from '@jsonforms/core';
+import { type JsonFormsRendererRegistryEntry, rankWith, uiTypeIs, isLayout, and } from '@jsonforms/core';
 
 import { default as GroupRenderer } from './GroupRenderer.vue';
 import { default as LayoutRenderer } from './LayoutRenderer.vue';

src/components/form/styles/defaultStyles.ts

@@ -1,4 +1,4 @@
-import { Styles } from './styles';
+import { type Styles } from './styles';
 
 export const defaultStyles: Styles = {
   control: {

src/components/form/styles/styles.ts

@@ -1,4 +1,4 @@
-import { UISchemaElement } from '@jsonforms/core';
+import { type UISchemaElement } from '@jsonforms/core';
 import { inject } from 'vue';
 import merge from 'lodash/merge';
 import { defaultStyles } from './defaultStyles';

src/components/form/styles/util.ts

@@ -1,4 +1,4 @@
-import { Styles } from './styles';
+import { type Styles } from './styles';
 import cloneDeep from 'lodash/cloneDeep';
 import mergeWith from 'lodash/mergeWith';
 

src/components/form/util/composition.ts

@@ -1,5 +1,5 @@
 import { useStyles } from '../styles';
-import { computed, ref, ComputedRef, inject, provide } from 'vue';
+import { computed, ref, type ComputedRef, inject, provide } from 'vue';
 import cloneDeep from 'lodash/cloneDeep';
 import debounce from 'lodash/debounce';
 import merge from 'lodash/merge';
@@ -11,7 +11,7 @@ import {
   isDescriptionHidden,
   Resolve,
   findUISchema,
-  JsonFormsSubStates,
+  type JsonFormsSubStates,
   extractAjv,
 } from '@jsonforms/core';
 import isPlainObject from 'lodash/isPlainObject';

src/i18n/locales/en-US.json

@@ -109,5 +109,6 @@
   "Looking for the default password or issues signing in?": "Looking for the default password or issues signing in?",
   "Check the documentation.": "Check the documentation.",
   "Battery": "Battery",
-  "System Temperatures": "System Temperatures"
+  "System Temperatures": "System Temperatures",
+  "Backend Index: ": "Backend Index: "
 }

src/pages/AdminConfigPage.vue

@@ -43,7 +43,7 @@
 <script lang="ts">
 import { ref, computed } from 'vue';
 import { useMainStore } from '../stores/main-store.js';
-import { JsonForms, JsonFormsChangeEvent } from '@jsonforms/vue';
+import { JsonForms, type JsonFormsChangeEvent } from '@jsonforms/vue';
 import { generateDefaultUISchema } from '@jsonforms/core';
 import { defaultStyles, mergeStyles, createAjv, quasarRenderers } from '../components/form';
 import { remoteProcedureCall, _fetch } from '../util/fetch_api';

src/pages/AdminStatusPage.vue

@@ -138,27 +138,14 @@
         </q-card-section>
       </q-card>
 
-      <q-card flat class="q-mr-md q-mb-md">
-        <q-card-section>
-          <q-list separator>
-            <q-item-label header>{{ $t('primary backend') }}</q-item-label>
-            <q-item v-for="(value, key, index) in store.information.backends.primary" :key="index">
-              <q-item-section>
-                <q-item-label caption>{{ key }}</q-item-label>
-                <q-item-label>{{ value }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-card-section>
-      </q-card>
-      <q-card v-if="Object.keys(store.information.backends.secondary).length > 0" flat class="q-mr-md q-mb-md">
+      <q-card v-for="(backend_stats, _, index) in store.information.backends" :key="index" flat class="q-mr-md q-mb-md">
         <q-card-section>
           <q-list separator>
-            <q-item-label header>{{ $t('secondary backend') }}</q-item-label>
-            <q-item v-for="(value, key, index) in store.information.backends.secondary" :key="index">
+            <q-item-label header>{{ $t('Backend Index: ') }}{{ index }}</q-item-label>
+            <q-item v-for="(field_value, field_key, field_index) in backend_stats" :key="field_index">
               <q-item-section>
-                <q-item-label caption>{{ key }}</q-item-label>
-                <q-item-label>{{ value }}</q-item-label>
+                <q-item-label caption>{{ field_key }}</q-item-label>
+                <q-item-label>{{ field_value }}</q-item-label>
               </q-item-section>
             </q-item>
           </q-list>