@vcmap/ui 5.3.7 → 6.0.0-rc.10

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,25 @@
-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,
+    globalInjection: true,
     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 +27,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 +69,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,88 @@
 /**
- * @returns {import("vuetify").default}
+ * @typedef {Object} VcsColors
+ * @property {string} [base]
+ * @property {string} [base-lighten-5]
+ * @property {string} [base-lighten-4]
+ * @property {string} [base-lighten-3]
+ * @property {string} [base-lighten-2]
+ * @property {string} [base-lighten-1]
+ * @property {string} [base-darken-1]
+ * @property {string} [base-darken-2]
+ * @property {string} [base-darken-3]
+ * @property {string} [base-darken-4]
+ * @property {string} [primary]
+ * @property {string} [warning]
+ * @property {string} [error]
+ * @property {string} [info]
+ * @property {string} [success]
+ * @property {string} [surface-light]
  */
-export function createVuetify(): import("vuetify").default;
+/**
+ * @typedef {Object} VcsVariables
+ * @property {string} [hover-opacity]
+ * @property {string} [high-emphasis-opacity]
+ * @property {string} [medium-emphasis-opacity]
+ * @property {string} [vcs-font-size]
+ * @property {string} [vcs-font-family]
+ */
+/**
+ * @typedef {Object} VcsTheme
+ * @property {VcsColors} [colors]
+ * @property {VcsVariables} [variables]
+ */
+/**
+ * @typedef {Object} VcsThemes
+ * @property {VcsTheme} [dark]
+ * @property {VcsTheme} [light]
+ */
+/**
+ * @param {VcsThemes} [options]
+ * @param {{ dark:string, light:string }|string} [primaryColor]
+ * @returns {VcsThemes}
+ */
+export function createVcsThemes(options?: VcsThemes | undefined, primaryColor?: string | {
+    dark: string;
+    light: string;
+} | undefined): VcsThemes;
+/**
+ * @param {ReturnType<typeof import("vuetify").createVuetify>} vuetify
+ * @param {VcsThemes} theme
+ */
+export function setTheme(vuetify: ReturnType<typeof import("vuetify").createVuetify>, theme: VcsThemes): void;
+/**
+ * @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>;
+/**
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {boolean}
+ */
+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 fontSize as a number
+ * @returns {import("vue").ComputedRef<number>}
+ */
+export function useFontSize(): import("vue").ComputedRef<number>;
+/**
+ * returns the default IconSize as a number, value is based on the fontSize
+ * @returns {import("vue").ComputedRef<number>}
+ */
+export function useIconSize(): import("vue").ComputedRef<number>;
 /**
  * @type {{light:string,dark:string}}
  */
@@ -21,7 +90,36 @@ export const defaultPrimaryColor: {
     light: string;
     dark: string;
 };
-/**
- * @type {import("vuetify").default}
- */
-export const vuetify: import("vuetify").default;
+export type VcsColors = {
+    base?: string | undefined;
+    "base-lighten-5"?: string | undefined;
+    "base-lighten-4"?: string | undefined;
+    "base-lighten-3"?: string | undefined;
+    "base-lighten-2"?: string | undefined;
+    "base-lighten-1"?: string | undefined;
+    "base-darken-1"?: string | undefined;
+    "base-darken-2"?: string | undefined;
+    "base-darken-3"?: string | undefined;
+    "base-darken-4"?: string | undefined;
+    primary?: string | undefined;
+    warning?: string | undefined;
+    error?: string | undefined;
+    info?: string | undefined;
+    success?: string | undefined;
+    "surface-light"?: string | undefined;
+};
+export type VcsVariables = {
+    "hover-opacity"?: string | undefined;
+    "high-emphasis-opacity"?: string | undefined;
+    "medium-emphasis-opacity"?: string | undefined;
+    "vcs-font-size"?: string | undefined;
+    "vcs-font-family"?: string | undefined;
+};
+export type VcsTheme = {
+    colors?: VcsColors | undefined;
+    variables?: VcsVariables | undefined;
+};
+export type VcsThemes = {
+    dark?: VcsTheme | undefined;
+    light?: VcsTheme | undefined;
+};

package/src/vuePlugins/vuetify.js

@@ -1,11 +1,12 @@
-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 { VSvgIcon } from 'vuetify/components';
+import { useI18n } from 'vue-i18n';
+import 'vuetify/styles';
+import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n';
+import { computed, h } from 'vue';
+import DOMPurify from 'dompurify';
 import Icons from '../components/icons/+all.js';
 
-Vue.use(Vuetify);
-
 /**
  * @type {{light:string,dark:string}}
  */
@@ -15,85 +16,279 @@ export const defaultPrimaryColor = {
 };
 
 /**
- * @returns {import("vuetify").default}
+ * @typedef {Object} VcsColors
+ * @property {string} [base]
+ * @property {string} [base-lighten-5]
+ * @property {string} [base-lighten-4]
+ * @property {string} [base-lighten-3]
+ * @property {string} [base-lighten-2]
+ * @property {string} [base-lighten-1]
+ * @property {string} [base-darken-1]
+ * @property {string} [base-darken-2]
+ * @property {string} [base-darken-3]
+ * @property {string} [base-darken-4]
+ * @property {string} [primary]
+ * @property {string} [warning]
+ * @property {string} [error]
+ * @property {string} [info]
+ * @property {string} [success]
+ * @property {string} [surface-light]
+ */
+
+/**
+ * @typedef {Object} VcsVariables
+ * @property {string} [hover-opacity]
+ * @property {string} [high-emphasis-opacity]
+ * @property {string} [medium-emphasis-opacity]
+ * @property {string} [vcs-font-size]
+ * @property {string} [vcs-font-family]
+ */
+
+/**
+ * @typedef {Object} VcsTheme
+ * @property {VcsColors} [colors]
+ * @property {VcsVariables} [variables]
+ */
+
+/**
+ * @typedef {Object} VcsThemes
+ * @property {VcsTheme} [dark]
+ * @property {VcsTheme} [light]
+ */
+
+/**
+ * @param {VcsThemes} [options]
+ * @param {{ dark:string, light:string }|string} [primaryColor]
+ * @returns {VcsThemes}
+ */
+export function createVcsThemes(options, primaryColor) {
+  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:
+          primaryColor?.dark ?? primaryColor ?? defaultPrimaryColor.light,
+        warning: '#FFCE00',
+        error: '#AA0000',
+        info: '#2196F3',
+        success: '#4CAF50',
+        'surface-light': '#ffffff',
+        ...options?.light?.colors,
+      },
+      variables: {
+        'hover-opacity': 0.16,
+        'high-emphasis-opacity': 1,
+        'medium-emphasis-opacity': 1,
+        'vcs-font-size': '13px',
+        'vcs-font-family': 'Titillium Web',
+        ...options?.light?.variables,
+      },
+    },
+    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: primaryColor?.dark ?? primaryColor ?? defaultPrimaryColor.dark,
+        warning: '#FFCE00',
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        'surface-light': '#222222',
+        ...options?.dark?.colors,
+      },
+      variables: {
+        'hover-opacity': 0.16,
+        'high-emphasis-opacity': 1,
+        'medium-emphasis-opacity': 1,
+        'vcs-font-size': '13px',
+        'vcs-font-family': 'Titillium Web',
+        ...options?.dark?.variables,
+      },
+    },
+  };
+}
+
+/**
+ * @param {ReturnType<typeof import("vuetify").createVuetify>} vuetify
+ * @param {VcsThemes} theme
+ */
+export function setTheme(vuetify, theme) {
+  Object.assign(vuetify.theme.themes.value.light.colors, theme?.light?.colors);
+  Object.assign(
+    vuetify.theme.themes.value.light.variables,
+    theme?.light?.variables,
+  );
+  Object.assign(vuetify.theme.themes.value.dark.colors, theme?.dark?.colors);
+  Object.assign(
+    vuetify.theme.themes.value.dark.variables,
+    theme?.dark?.variables,
+  );
+}
+
+const imageUrlSet = {
+  component: (props) =>
+    h(
+      props.tag,
+      h('img', {
+        src: props.icon,
+        alt: 'custom icon',
+        style: { width: 'auto', height: '100%' },
+      }),
+    ),
+};
+
+const svgStringSet = {
+  component: (props) => {
+    const svg = new DOMParser()
+      .parseFromString(DOMPurify.sanitize(props.icon), 'image/svg+xml')
+      .querySelector('svg');
+    svg?.classList.add('v-icon__svg');
+    return h(props.tag, {
+      innerHTML: svg?.outerHTML,
+    });
+  },
+};
+
+const svgPathDataSet = {
+  component: VSvgIcon,
+};
+
+/**
+ * @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,
+      },
+      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,
+      },
+      VDataTable: {
+        density: 'compact',
+      },
+      VSelect: {
+        density: 'compact',
+      },
+      VSlider: {
+        density: 'compact',
+        ripple: false,
+      },
+      VSwitch: {
+        density: 'compact',
+        ripple: false,
+      },
+      VColorPicker: {
+        elevation: 0,
+        tile: true,
+      },
+      VExpansionPanel: {
+        ripple: false,
+        elevation: 0,
+        tile: true,
+      },
+    },
     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,
       },
+      sets: {
+        imageUrl: imageUrlSet,
+        svgString: svgStringSet,
+        svgPathData: svgPathDataSet,
+      },
+    },
+    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 +296,39 @@ 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 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);
+  });
+}
+
+/**
+ * returns the default IconSize as a number, value is based on the fontSize
+ * @returns {import("vue").ComputedRef<number>}
+ */
+export function useIconSize() {
+  const fontSize = useFontSize();
+  return computed(() => {
+    return fontSize.value * (1.2 + 0.1 / 3);
+  });
 }