@vcmap/ui 5.3.3 → 6.0.0-rc.2

package/src/vcsUiApp.js

@@ -44,6 +44,7 @@ import AbstractFeatureInfoView from './featureInfo/abstractFeatureInfoView.js';
 import { createVueI18n, setupI18n } from './vuePlugins/i18n.js';
 import { callbackClassRegistry } from './callback/vcsCallback.js';
 import createSiteConfig from './siteConfig.js';
+import { createVcsVuetify } from './vuePlugins/vuetify.js';
 
 /**
  * @typedef {import("@vcmap/core").VcsModuleConfig & {
@@ -58,13 +59,20 @@ import createSiteConfig from './siteConfig.js';
 /**
  * @typedef {Object} PluginConfig
  * @property {string} name
- * @property {string|undefined} entry - path to the plugin's index.js
- * @property {string|undefined} version - version or version range
+ * @property {string|undefined} [entry] - path to the plugin's index.js
+ * @property {string|undefined} [version] - version or version range
+ */
+
+/**
+ * @typedef {import("vue").Component<{ getConfig(): Promise<Config>, setConfig(config: Config): Promise<void> }> & {
+ *  title?: string
+ * }} PluginConfigEditorComponent
+ * @template {Object} Config
  */
 
 /**
  * @typedef {Object} PluginConfigEditor
- * @property {import("vue").Component & { title: string | undefined}} component - A editor component to configure a plugin or item
+ * @property {PluginConfigEditorComponent<object>} component - A editor component to configure a plugin or item
  * @property {string} [collectionName='plugins'] - The collection the item belongs to. Default is plugins collection.
  * @property {string} [itemName] - The item the editor can be used for. Can be a name or className. Default is the plugin's name.
  * @property {function():string} [infoUrlCallback] - An optional function returning an url referencing help or further information regarding the config editor.
@@ -108,7 +116,7 @@ import createSiteConfig from './siteConfig.js';
  * @typedef {{
  *   added: import("@vcmap/core").VcsEvent<T>,
  *   removed: import("@vcmap/core").VcsEvent<T>,
- *   componentIds: Array<string>,
+ *   componentIds: import("vue").UnwrapRef<Array<string>>,
  *   get: function(string):T|undefined,
  *   has: function(string):boolean,
  *   remove: function(string):void,
@@ -208,6 +216,41 @@ class VcsUiApp extends VcsApp {
       }),
     ];
 
+    /**
+     * @type {I18nCollection<Object>}
+     * @private
+     */
+    this._i18n = makeOverrideCollection(
+      new I18nCollection(this._plugins),
+      () => this.dynamicModuleId,
+    );
+
+    /**
+     *
+     * @type {import("vue-i18n").I18n}
+     * @private
+     */
+    this._vueI18nPlugin = createVueI18n();
+
+    /**
+     * @type {ReturnType<typeof import("vuetify").createVuetify>}
+     * @private
+     */
+    this._vuetify = createVcsVuetify(this._vueI18nPlugin);
+
+    /**
+     *
+     * @type {import("vue-i18n").Composer}
+     * @private
+     */
+    this._vueI18n = this._vueI18nPlugin.global;
+    /**
+     *
+     * @type {function(): void}
+     * @private
+     */
+    this._vueI18nDestroy = setupI18n(this);
+
     /**
      * @type {OverrideClassRegistry<import("./callback/vcsCallback.js").default>}
      * @private
@@ -253,6 +296,7 @@ class VcsUiApp extends VcsApp {
      * @private
      */
     this._navbarManager = new NavbarManager();
+
     /**
      * @type {import("@vcmap/core").OverrideCollection<import("./uiConfig.js").UiConfigurationItem<unknown>, UiConfig>}
      * @private
@@ -284,28 +328,6 @@ class VcsUiApp extends VcsApp {
      */
     this._overviewMap = new OverviewMap(this);
 
-    /**
-     * @type {I18nCollection<Object>}
-     * @private
-     */
-    this._i18n = makeOverrideCollection(
-      new I18nCollection(this._plugins),
-      () => this.dynamicModuleId,
-    );
-
-    /**
-     *
-     * @type {import("vue-i18n").VueI18n}
-     * @private
-     */
-    this._vueI18n = createVueI18n();
-    /**
-     *
-     * @type {function(): void}
-     * @private
-     */
-    this._vueI18nDestroy = setupI18n(this);
-
     /**
      * @type {CategoryManager}
      * @private
@@ -430,7 +452,21 @@ class VcsUiApp extends VcsApp {
   }
 
   /**
-   * @returns {import("vue-i18n").IVueI18n}
+   * @returns {import("vue-i18n").I18n}
+   */
+  get vueI18nPlugin() {
+    return this._vueI18nPlugin;
+  }
+
+  /**
+   * @returns {ReturnType<typeof import("vuetify").createVuetify>}
+   */
+  get vuetify() {
+    return this._vuetify;
+  }
+
+  /**
+   * @returns {import("vue-i18n").VueI18n}
    */
   get vueI18n() {
     return this._vueI18n;

package/src/vuePlugins/i18n.d.ts

@@ -1,8 +1,14 @@
 /**
  * creates a new VueI18n Instance.
- * @returns {import("vue-i18n").IVueI18n}
+ * @returns {import("vue-i18n").I18n}
  */
-export function createVueI18n(): import("vue-i18n").IVueI18n;
+export function createVueI18n(): import("vue-i18n").I18n;
+/**
+ * creates a Vue Plugin with a new $st template helper which can handle undefined. Will just redirect to vueI18n,
+ * if key is a string
+ * @returns {import("vue").Plugin}
+ */
+export function createSafeI18n(): import("vue").Plugin;
 /**
  * @param {import("../vcsUiApp.js").default} app
  * @returns {function():void} returns a destroy function

package/src/vuePlugins/i18n.js

@@ -1,18 +1,24 @@
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
-
-Vue.use(VueI18n);
+import { createI18n } from 'vue-i18n';
+import { is } from '@vcsuite/check';
+import { resolveValue } from '@intlify/core-base';
 
 /**
  * creates a new VueI18n Instance.
- * @returns {import("vue-i18n").IVueI18n}
+ * @returns {import("vue-i18n").I18n}
  */
 export function createVueI18n() {
-  return new VueI18n({
+  return createI18n({
+    legacy: false,
     locale: 'en',
-    silentFallbackWarn: true,
-    silentTranslationWarn: true,
+    missingWarn: false,
+    fallbackWarn: false,
     fallbackLocale: ['en', 'de'],
+    messageResolver: (obj, path) => {
+      const value = resolveValue(obj, path);
+      return typeof value === 'string'
+        ? value.replaceAll(/@/g, "{'@'}")
+        : value;
+    },
     messages: {
       en: {},
     },
@@ -20,13 +26,34 @@ export function createVueI18n() {
   });
 }
 
+/**
+ * creates a Vue Plugin with a new $st template helper which can handle undefined. Will just redirect to vueI18n,
+ * if key is a string
+ * @returns {import("vue").Plugin}
+ */
+export function createSafeI18n() {
+  return {
+    install: (vApp) => {
+      vApp.config.globalProperties.$st = (key, ...args) => {
+        if (!is(key, String)) {
+          if (key !== null && key !== undefined) {
+            return String(key);
+          }
+          return '';
+        }
+        return vApp.config.globalProperties.$t(key, ...args);
+      };
+    },
+  };
+}
+
 /**
  * sets the messages to the app's I18n Instance;
  * @param {import("../vcsUiApp.js").default} app
  */
 function setI18nMessages(app) {
   app.vueI18n.availableLocales.forEach((locale) => {
-    app.vueI18n.setLocaleMessage(locale, undefined);
+    app.vueI18n.setLocaleMessage(locale, {});
   });
   Object.entries(app.i18n.getMergedMessages()).forEach(
     ([locale, localeMessages]) => {
@@ -41,18 +68,19 @@ function setI18nMessages(app) {
  */
 export function setupI18n(app) {
   setI18nMessages(app);
-  app.vueI18n.locale = app.locale;
+  app.vueI18n.locale.value = app.locale;
   const destroyFunctions = [
     app.i18n.changed.addEventListener(() => {
       setI18nMessages(app);
     }),
     app.localeChanged.addEventListener((locale) => {
-      app.vueI18n.locale = locale;
+      app.vueI18n.locale.value = locale;
     }),
   ];
   return function tearDownI18nSetup() {
     destroyFunctions.forEach((destroy) => {
       destroy();
     });
+    app.vueI18nPlugin.dispose();
   };
 }

package/src/vuePlugins/vuetify.d.ts

@@ -1,19 +1,93 @@
+export function createVcsThemes(): {
+    light: {
+        colors: {
+            base: string;
+            'base-lighten-5': string;
+            'base-lighten-4': string;
+            'base-lighten-3': string;
+            'base-lighten-2': string;
+            'base-lighten-1': string;
+            'base-darken-1': string;
+            'base-darken-2': string;
+            'base-darken-3': string;
+            'base-darken-4': string;
+            primary: string;
+            warning: string;
+            error: string;
+            info: string;
+            success: string;
+            'surface-light': string;
+        };
+        variables: {
+            'hover-opacity': number;
+            'high-emphasis-opacity': number;
+            'medium-emphasis-opacity': number;
+            'vcs-item-height': string;
+            'vcs-font-size': string;
+            'vcs-font-family': string;
+        };
+    };
+    dark: {
+        colors: {
+            base: string;
+            'base-lighten-5': string;
+            'base-lighten-4': string;
+            'base-lighten-3': string;
+            'base-lighten-2': string;
+            'base-lighten-1': string;
+            'base-darken-1': string;
+            'base-darken-2': string;
+            'base-darken-3': string;
+            'base-darken-4': string;
+            primary: string;
+            warning: string;
+            error: string;
+            info: string;
+            success: string;
+            'surface-light': string;
+        };
+        variables: {
+            'hover-opacity': number;
+            'vcs-item-height': string;
+            'vcs-font-size': string;
+            'vcs-font-family': string;
+        };
+    };
+};
+/**
+ * @param {import("vue-i18n").I18n} i18n
+ * @returns {ReturnType<typeof import("vuetify").createVuetify>}
+ */
+export function createVcsVuetify(i18n: import("vue-i18n").I18n): ReturnType<typeof import("vuetify").createVuetify>;
 /**
- * @returns {import("vuetify").default}
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {boolean}
  */
-export function createVuetify(): import("vuetify").default;
+export function isDark(app: import("../vcsUiApp.js").default): boolean;
 /**
  * Returns the default primary color depending on the selected theme mode
+ * @param {import("../vcsUiApp.js").default} app
  * @returns {string}
  */
-export function getDefaultPrimaryColor(): string;
+export function getDefaultPrimaryColor(app: import("../vcsUiApp.js").default): string;
 /**
  * Returns the color depending on the current theme mode
+ * @param {import("../vcsUiApp.js").default} app
  * @param {string} value - color key, e.g. 'primary'
- * @param {string=} variant - color variant, e.g. 'lighten1', 'darken4', ...
+ * @param {string=} variant - color variant, e.g. 'lighten-1', 'darken-4', ...
  * @returns {string}
  */
-export function getColorByKey(value: string, variant?: string | undefined): string;
+export function getColorByKey(app: import("../vcsUiApp.js").default, value: string, variant?: string | undefined): string;
+/**
+ * returns the itemHeight as a number
+ * @returns {import("vue").ComputedRef<number>}
+ */
+export function useItemHeight(): import("vue").ComputedRef<number>;
+/**
+ * returns the fontSize as a number
+ * @returns {import("vue").ComputedRef<number>}
+ */
+export function useFontSize(): import("vue").ComputedRef<number>;
 /**
  * @type {{light:string,dark:string}}
  */
@@ -21,7 +95,3 @@ export const defaultPrimaryColor: {
     light: string;
     dark: string;
 };
-/**
- * @type {import("vuetify").default}
- */
-export const vuetify: import("vuetify").default;

package/src/vuePlugins/vuetify.js

@@ -1,11 +1,10 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify/lib';
-import { genVariations } from 'vuetify/lib/services/theme/utils.js';
-import { colorToInt } from 'vuetify/lib/util/colorUtils.js';
+import { createVuetify, useTheme } from 'vuetify';
+import { useI18n } from 'vue-i18n';
+import 'vuetify/styles';
+import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n';
+import { computed } from 'vue';
 import Icons from '../components/icons/+all.js';
 
-Vue.use(Vuetify);
-
 /**
  * @type {{light:string,dark:string}}
  */
@@ -14,86 +13,170 @@ export const defaultPrimaryColor = {
   dark: '#27B97C',
 };
 
+export function createVcsThemes() {
+  return {
+    light: {
+      colors: {
+        base: '#9E9E9E',
+        'base-lighten-5': '#FFFFFF',
+        'base-lighten-4': '#F8F8F8',
+        'base-lighten-3': '#EBEBEB',
+        'base-lighten-2': '#D0D0D0',
+        'base-lighten-1': '#B8B8B8',
+        'base-darken-1': '#858585',
+        'base-darken-2': '#6B6B6B',
+        'base-darken-3': '#525252',
+        'base-darken-4': '#383838',
+        primary: defaultPrimaryColor.light,
+        warning: '#FFCE00',
+        error: '#AA0000',
+        info: '#2196F3',
+        success: '#4CAF50',
+        'surface-light': '#ffffff',
+      },
+      variables: {
+        'hover-opacity': 0.16,
+        'high-emphasis-opacity': 1,
+        'medium-emphasis-opacity': 1,
+        'vcs-item-height': '32px',
+        'vcs-font-size': '13px',
+        'vcs-font-family': 'Titillium Web',
+      },
+    },
+    dark: {
+      colors: {
+        base: '#9E9E9E',
+        'base-lighten-5': '#FFFFFF',
+        'base-lighten-4': '#383838',
+        'base-lighten-3': '#525252',
+        'base-lighten-2': '#6B6B6B',
+        'base-lighten-1': '#858585',
+        'base-darken-1': '#B8B8B8',
+        'base-darken-2': '#D0D0D0',
+        'base-darken-3': '#EBEBEB',
+        'base-darken-4': '#F8F8F8',
+        primary: defaultPrimaryColor.dark,
+        warning: '#FFCE00',
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        'surface-light': '#222222',
+      },
+      variables: {
+        'hover-opacity': 0.16,
+        'vcs-item-height': '40px',
+        'vcs-font-size': '15px',
+        'vcs-font-family': 'Titillium Web',
+      },
+    },
+  };
+}
+
 /**
- * @returns {import("vuetify").default}
+ * @param {import("vue-i18n").I18n} i18n
+ * @returns {ReturnType<typeof import("vuetify").createVuetify>}
  */
-export function createVuetify() {
+export function createVcsVuetify(i18n) {
   const dark =
     window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false;
 
-  return new Vuetify({
+  const theme = {
+    options: {
+      customProperties: true,
+    },
+    themes: createVcsThemes(),
+    variations: {
+      colors: ['primary'],
+      lighten: 5,
+      darken: 5,
+    },
+  };
+  if (dark) {
+    theme.defaultTheme = 'dark';
+  }
+
+  return createVuetify({
     treeShake: false,
+    defaults: {
+      VBtn: {
+        ripple: false,
+      },
+      VIcon: {
+        size: 16,
+      },
+      VList: {
+        density: 'compact',
+        class: 'pa-0 vcsList',
+      },
+      VListItem: {
+        density: 'compact',
+        ripple: false,
+      },
+      VRadio: {
+        density: 'compact',
+        ripple: false,
+      },
+      VRadioGroup: {
+        density: 'compact',
+        ripple: false,
+      },
+      VTextField: {
+        density: 'compact',
+      },
+      VFileInput: {
+        density: 'compact',
+      },
+      VTextarea: {
+        density: 'compact',
+      },
+      VCheckbox: {
+        density: 'compact',
+        ripple: false,
+      },
+      VSelect: {
+        density: 'compact',
+      },
+      VSlider: {
+        density: 'compact',
+        ripple: false,
+      },
+      VSwitch: {
+        density: 'compact',
+        ripple: false,
+      },
+    },
     defaultAssets: {
       font: {
         family: 'titillium-web',
       },
     },
-    theme: {
-      dark,
-      options: {
-        customProperties: true,
-      },
-      themes: {
-        light: {
-          base: {
-            base: '#9E9E9E',
-            lighten5: '#FFFFFF',
-            lighten4: '#F8F8F8',
-            lighten3: '#EBEBEB',
-            lighten2: '#D0D0D0',
-            lighten1: '#B8B8B8',
-            darken1: '#858585',
-            darken2: '#6B6B6B',
-            darken3: '#525252',
-            darken4: '#383838',
-          },
-          primary: defaultPrimaryColor.light,
-          warning: '#FFCE00',
-          error: '#AA0000',
-          info: '#2196F3',
-          success: '#4CAF50',
-        },
-        dark: {
-          base: {
-            base: '#9E9E9E',
-            lighten5: '#FFFFFF',
-            lighten4: '#383838',
-            lighten3: '#525252',
-            lighten2: '#6B6B6B',
-            lighten1: '#858585',
-            darken1: '#B8B8B8',
-            darken2: '#D0D0D0',
-            darken3: '#EBEBEB',
-            darken4: '#F8F8F8',
-          },
-          primary: defaultPrimaryColor.dark,
-          warning: '#FFCE00',
-          error: '#FF5252',
-          info: '#2196F3',
-          success: '#4CAF50',
-        },
-      },
-    },
+    theme,
     icons: {
-      iconfont: 'mdi',
-      values: {
+      aliases: {
         ...Icons,
       },
     },
+    locale: {
+      adapter: createVueI18nAdapter({ i18n, useI18n }),
+    },
   });
 }
 
 /**
- * @type {import("vuetify").default}
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {boolean}
  */
-export const vuetify = createVuetify();
+export function isDark(app) {
+  return app.vuetify.theme.current.value.dark;
+}
 
 /**
  * Returns the default primary color depending on the selected theme mode
+ * @param {import("../vcsUiApp.js").default} app
  * @returns {string}
  */
-export function getDefaultPrimaryColor() {
-  if (vuetify.framework.theme.isDark) {
+export function getDefaultPrimaryColor(app) {
+  if (isDark(app)) {
     return defaultPrimaryColor.dark;
   }
   return defaultPrimaryColor.light;
@@ -101,15 +184,41 @@ export function getDefaultPrimaryColor() {
 
 /**
  * Returns the color depending on the current theme mode
+ * @param {import("../vcsUiApp.js").default} app
  * @param {string} value - color key, e.g. 'primary'
- * @param {string=} variant - color variant, e.g. 'lighten1', 'darken4', ...
+ * @param {string=} variant - color variant, e.g. 'lighten-1', 'darken-4', ...
  * @returns {string}
  */
-export function getColorByKey(value, variant) {
-  const mode = vuetify.framework.theme.isDark ? 'dark' : 'light';
-  const color = vuetify.framework.theme.themes[mode][value];
-  if (color && variant) {
-    return color[variant] ?? genVariations(value, colorToInt(color))[variant];
+export function getColorByKey(app, value, variant) {
+  let key = value;
+  if (variant) {
+    key = `${value}-${variant}`;
   }
-  return color?.base ?? color;
+  return app.vuetify.theme.current.value.colors[key];
+}
+
+/**
+ * returns the itemHeight as a number
+ * @returns {import("vue").ComputedRef<number>}
+ */
+export function useItemHeight() {
+  const theme = useTheme();
+  return computed(() => {
+    const itemHeight = theme.current.value.variables['vcs-item-height'] ?? 32;
+    // get rid of `px`
+    return Number.parseFloat(itemHeight);
+  });
+}
+
+/**
+ * returns the fontSize as a number
+ * @returns {import("vue").ComputedRef<number>}
+ */
+export function useFontSize() {
+  const theme = useTheme();
+  return computed(() => {
+    const fontSize = theme.current.value.variables['vcs-font-size'] ?? 13;
+    // get rid of `px`
+    return Number.parseFloat(fontSize);
+  });
 }