Major overhaul to the theme and now functioning.

ServerManagerWebApp/frontend/node_modules/vuetify/lib/locale/adapters/vue-i18n.d.ts

@@ -0,0 +1,8 @@
+import type { I18n, useI18n } from 'vue-i18n';
+import type { LocaleInstance } from '../../composables/locale.js';
+type VueI18nAdapterParams = {
+    i18n: I18n<any, {}, {}, string, false>;
+    useI18n: typeof useI18n;
+};
+export declare function createVueI18nAdapter({ i18n, useI18n }: VueI18nAdapterParams): LocaleInstance;
+

ServerManagerWebApp/frontend/node_modules/vuetify/lib/locale/adapters/vue-i18n.js

@@ -0,0 +1,87 @@
+// Composables
+import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
+import { toRef, watch } from 'vue';
+
+// Types
+
+function useProvided(props, prop, provided) {
+  const internal = useProxiedModel(props, prop);
+  internal.value = props[prop] ?? provided.value;
+  watch(provided, v => {
+    if (props[prop] == null) {
+      internal.value = v;
+    }
+  });
+  return internal;
+}
+function inferDecimalSeparator(format) {
+  return format(0.1).includes(',') ? ',' : '.';
+}
+function createProvideFunction(data) {
+  return props => {
+    const current = useProvided(props, 'locale', data.current);
+    const fallback = useProvided(props, 'fallback', data.fallback);
+    const messages = useProvided(props, 'messages', data.messages);
+    const i18n = data.useI18n({
+      locale: current.value,
+      fallbackLocale: fallback.value,
+      messages: messages.value,
+      useScope: 'local',
+      legacy: false,
+      inheritLocale: false
+    });
+    watch(current, v => {
+      i18n.locale.value = v;
+    });
+    return {
+      name: 'vue-i18n',
+      current,
+      fallback,
+      messages,
+      decimalSeparator: toRef(() => props.decimalSeparator ?? inferDecimalSeparator(i18n.n)),
+      t: function (key) {
+        for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          params[_key - 1] = arguments[_key];
+        }
+        return i18n.t(key, params);
+      },
+      n: i18n.n,
+      provide: createProvideFunction({
+        current,
+        fallback,
+        messages,
+        useI18n: data.useI18n
+      })
+    };
+  };
+}
+export function createVueI18nAdapter(_ref) {
+  let {
+    i18n,
+    useI18n
+  } = _ref;
+  const current = i18n.global.locale;
+  const fallback = i18n.global.fallbackLocale;
+  const messages = i18n.global.messages;
+  return {
+    name: 'vue-i18n',
+    current,
+    fallback,
+    messages,
+    decimalSeparator: toRef(() => inferDecimalSeparator(i18n.global.n)),
+    t: function (key) {
+      for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        params[_key2 - 1] = arguments[_key2];
+      }
+      return i18n.global.t(key, params);
+    },
+    n: i18n.global.n,
+    provide: createProvideFunction({
+      current,
+      fallback,
+      messages,
+      useI18n
+    })
+  };
+}
+//# sourceMappingURL=vue-i18n.js.map

ServerManagerWebApp/frontend/node_modules/vuetify/lib/locale/adapters/vuetify.d.ts

@@ -0,0 +1,2 @@
+import type { LocaleInstance, LocaleOptions } from '../../composables/locale.js';
+export declare function createVuetifyAdapter(options?: LocaleOptions): LocaleInstance;

ServerManagerWebApp/frontend/node_modules/vuetify/lib/locale/adapters/vuetify.js

@@ -0,0 +1,104 @@
+// Composables
+import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
+import { ref, shallowRef, toRef, watch } from 'vue';
+import { consoleError, consoleWarn, getObjectValueByPath } from "../../util/index.js"; // Locales
+import en from "../en.js"; // Types
+const LANG_PREFIX = '$vuetify.';
+const replace = (str, params) => {
+  return str.replace(/\{(\d+)\}/g, (match, index) => {
+    return String(params[Number(index)]);
+  });
+};
+const createTranslateFunction = (current, fallback, messages) => {
+  return function (key) {
+    for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      params[_key - 1] = arguments[_key];
+    }
+    if (!key.startsWith(LANG_PREFIX)) {
+      return replace(key, params);
+    }
+    const shortKey = key.replace(LANG_PREFIX, '');
+    const currentLocale = current.value && messages.value[current.value];
+    const fallbackLocale = fallback.value && messages.value[fallback.value];
+    let str = getObjectValueByPath(currentLocale, shortKey, null);
+    if (!str) {
+      consoleWarn(`Translation key "${key}" not found in "${current.value}", trying fallback locale`);
+      str = getObjectValueByPath(fallbackLocale, shortKey, null);
+    }
+    if (!str) {
+      consoleError(`Translation key "${key}" not found in fallback`);
+      str = key;
+    }
+    if (typeof str !== 'string') {
+      consoleError(`Translation key "${key}" has a non-string value`);
+      str = key;
+    }
+    return replace(str, params);
+  };
+};
+function createNumberFunction(current, fallback) {
+  return (value, options) => {
+    const numberFormat = new Intl.NumberFormat([current.value, fallback.value], options);
+    return numberFormat.format(value);
+  };
+}
+function inferDecimalSeparator(current, fallback) {
+  const format = createNumberFunction(current, fallback);
+  return format(0.1).includes(',') ? ',' : '.';
+}
+function useProvided(props, prop, provided) {
+  const internal = useProxiedModel(props, prop, props[prop] ?? provided.value);
+
+  // TODO: Remove when defaultValue works
+  internal.value = props[prop] ?? provided.value;
+  watch(provided, v => {
+    if (props[prop] == null) {
+      internal.value = provided.value;
+    }
+  });
+  return internal;
+}
+function createProvideFunction(state) {
+  return props => {
+    const current = useProvided(props, 'locale', state.current);
+    const fallback = useProvided(props, 'fallback', state.fallback);
+    const messages = useProvided(props, 'messages', state.messages);
+    return {
+      name: 'vuetify',
+      current,
+      fallback,
+      messages,
+      decimalSeparator: toRef(() => inferDecimalSeparator(current, fallback)),
+      t: createTranslateFunction(current, fallback, messages),
+      n: createNumberFunction(current, fallback),
+      provide: createProvideFunction({
+        current,
+        fallback,
+        messages
+      })
+    };
+  };
+}
+export function createVuetifyAdapter(options) {
+  const current = shallowRef(options?.locale ?? 'en');
+  const fallback = shallowRef(options?.fallback ?? 'en');
+  const messages = ref({
+    en,
+    ...options?.messages
+  });
+  return {
+    name: 'vuetify',
+    current,
+    fallback,
+    messages,
+    decimalSeparator: toRef(() => options?.decimalSeparator ?? inferDecimalSeparator(current, fallback)),
+    t: createTranslateFunction(current, fallback, messages),
+    n: createNumberFunction(current, fallback),
+    provide: createProvideFunction({
+      current,
+      fallback,
+      messages
+    })
+  };
+}
+//# sourceMappingURL=vuetify.js.map