@vcmap/ui 5.3.2 → 6.0.0-rc.1

package/src/styles/main.scss

@@ -1,11 +1,9 @@
-@import './utils/all';
-
-@import './theming';
 @import './typography';
 @import './shades';
 @import './variables';
 @import './vcsFont';
 @import './vcsGrid';
+@import './vcsList';
 
 /* latin-ext */
 @font-face {
@@ -19,3 +17,8 @@ html.vcs-ui {
   overflow-x: hidden !important;
   overflow-y: hidden !important;
 }
+
+svg {
+  height: inherit;
+  width: inherit;
+}

package/src/styles/settings.scss

@@ -0,0 +1,6 @@
+// @use 'vuetify';
+@use 'vuetify/settings' with (
+  // $font-size-root: 13px,
+  // $icon-size: 20px,
+  /** Footer **/ // $footer-padding: 0px 0px, // 6px 16px !default;
+);

package/src/styles/variables.scss

@@ -14,10 +14,11 @@ $material-dark: (
   ),
   'input-bottom-line': var(--v-base-base),
   'dividers': var(--v-base-lighten2),
-  'toolbar': rgba(map-get($shades, 'black'), 0.8),
-  'table': (
-    'hover': var(--v-base-lighten4),
-  ),
+  //'toolbar': rgba(map-get($shades, 'black'), 0.8),
+  'table':
+    (
+      'hover': var(--v-base-lighten4),
+    ),
 );
 $material-light: (
   'text-fields': (
@@ -33,10 +34,11 @@ $material-light: (
     'disabled': rgba(map-get($shades, 'black'), 0.5),
   ),
   'dividers': var(--v-base-lighten2),
-  'toolbar': rgba(map-get($shades, 'white'), 0.8),
-  'table': (
-    'hover': var(--v-base-lighten4),
-  ),
+  //'toolbar': rgba(map-get($shades, 'white'), 0.8),
+  'table':
+    (
+      'hover': var(--v-base-lighten4),
+    ),
 );
 
 // input font and icon

package/src/styles/vcsGrid.scss

@@ -1,13 +1,3 @@
 // fonts
 $line-height-base: 40px; // header lines
 $line-height-dense: 32px; // rows in form field
-
-.gap-1 {
-  gap: 4px;
-}
-.gap-2 {
-  gap: 8px;
-}
-.gap-3 {
-  gap: 12px;
-}

package/src/styles/vcsList.scss

@@ -0,0 +1,8 @@
+// Default global List overrides
+// `vcsList` class is set per default to VList Elements
+
+.vcsList {
+  .v-list-item--density-compact.v-list-item--one-line {
+    min-height: var(--v-vcs-item-height);
+  }
+}

package/src/vcsUiApp.d.ts

@@ -60,7 +60,7 @@ export type VcsPlugin<P extends Object, S extends Object> = {
 export type VcsComponentManager<T extends Object, O extends Object> = {
     added: import("@vcmap/core").VcsEvent<T>;
     removed: import("@vcmap/core").VcsEvent<T>;
-    componentIds: Array<string>;
+    componentIds: import("vue").UnwrapRef<Array<string>>;
     get: (arg0: string) => T | undefined;
     has: (arg0: string) => boolean;
     remove: (arg0: string) => void;
@@ -94,6 +94,34 @@ declare class VcsUiApp extends VcsApp {
      * @private
      */
     private _pluginListeners;
+    /**
+     * @type {I18nCollection<Object>}
+     * @private
+     */
+    private _i18n;
+    /**
+     *
+     * @type {import("vue-i18n").I18n}
+     * @private
+     */
+    private _vueI18nPlugin;
+    /**
+     * @type {ReturnType<typeof import("vuetify").createVuetify>}
+     * @private
+     */
+    private _vuetify;
+    /**
+     *
+     * @type {import("vue-i18n").Composer}
+     * @private
+     */
+    private _vueI18n;
+    /**
+     *
+     * @type {function(): void}
+     * @private
+     */
+    private _vueI18nDestroy;
     /**
      * @type {OverrideClassRegistry<import("./callback/vcsCallback.js").default>}
      * @private
@@ -149,23 +177,6 @@ declare class VcsUiApp extends VcsApp {
      * @private
      */
     private _overviewMap;
-    /**
-     * @type {I18nCollection<Object>}
-     * @private
-     */
-    private _i18n;
-    /**
-     *
-     * @type {import("vue-i18n").VueI18n}
-     * @private
-     */
-    private _vueI18n;
-    /**
-     *
-     * @type {function(): void}
-     * @private
-     */
-    private _vueI18nDestroy;
     /**
      * @type {CategoryManager}
      * @private
@@ -247,9 +258,106 @@ declare class VcsUiApp extends VcsApp {
      */
     get i18n(): I18nCollection;
     /**
-     * @returns {import("vue-i18n").IVueI18n}
+     * @returns {import("vue-i18n").I18n}
+     */
+    get vueI18nPlugin(): import("vue-i18n").I18n<any, any, any, string, boolean>;
+    /**
+     * @returns {ReturnType<typeof import("vuetify").createVuetify>}
+     */
+    get vuetify(): {
+        install: (app: import("vue").App<any>) => void;
+        defaults: import("vue").Ref<import("vuetify").DefaultsInstance>;
+        display: import("vuetify").DisplayInstance; /**
+         * @type {import("@vcmap/core").OverrideCollection<AbstractFeatureInfoView>}
+         * @private
+         */
+        theme: import("vuetify").ThemeInstance & {
+            install: (app: import("vue").App<any>) => void;
+        };
+        icons: Record<string, any>;
+        locale: {
+            isRtl: import("vue").Ref<boolean>;
+            rtl: import("vue").Ref<Record<string, boolean>>;
+            rtlClasses: import("vue").Ref<string>;
+            name: string;
+            messages: import("vue").Ref<import("vuetify").LocaleMessages>;
+            current: import("vue").Ref<string>;
+            fallback: import("vue").Ref<string>;
+            t: (key: string, ...params: unknown[]) => string;
+            n: (value: number) => string;
+            provide: (props: import("vuetify").LocaleOptions) => import("vuetify").LocaleInstance;
+        };
+        date: {
+            options: {
+                adapter: (new (options: {
+                    locale: any;
+                    formats?: any;
+                }) => import("vuetify").DateInstance) | import("vuetify").DateInstance;
+                formats?: Record<string, any> | undefined;
+                locale: Record<string, any>;
+            };
+            instance: {
+                locale?: any;
+                date: (value?: any) => unknown;
+                format: (date: unknown, formatString: string) => string;
+                toJsDate: (value: unknown) => Date;
+                parseISO: (date: string) => unknown;
+                toISO: (date: unknown) => string;
+                startOfDay: (date: unknown) => unknown;
+                endOfDay: (date: unknown) => unknown;
+                startOfWeek: (date: unknown) => unknown; /**
+                 * An event triggered when the VcsApp was mounted and a target was set for the maps.
+                 * Provides the id of the target html element.
+                 * @type {import("@vcmap/core").VcsEvent<string>}
+                 */
+                endOfWeek: (date: unknown) => unknown;
+                startOfMonth: (date: unknown) => unknown;
+                endOfMonth: (date: unknown) => unknown;
+                startOfYear: (date: unknown) => unknown;
+                endOfYear: (date: unknown) => unknown;
+                isAfter: (date: unknown, comparing: unknown) => boolean;
+                isAfterDay: (value: unknown, comparing: unknown) => boolean;
+                isSameDay: (date: unknown, comparing: unknown) => boolean;
+                isSameMonth: (date: unknown, comparing: unknown) => boolean;
+                isSameYear: (value: unknown, comparing: unknown) => boolean;
+                isBefore: (date: unknown, comparing: unknown) => boolean;
+                isEqual: (date: unknown, comparing: unknown) => boolean;
+                isValid: (date: any) => boolean;
+                isWithinRange: (date: unknown, range: [unknown, unknown]) => boolean;
+                addMinutes: (date: unknown, amount: number) => unknown;
+                addHours: (date: unknown, amount: number) => unknown;
+                addDays: (date: unknown, amount: number) => unknown;
+                addWeeks: (date: unknown, amount: number) => unknown;
+                addMonths: (date: unknown, amount: number) => unknown;
+                getYear: (date: unknown) => number;
+                setYear: (date: unknown, year: number) => unknown;
+                getDiff: (date: unknown, comparing: unknown, unit?: string | undefined) => number;
+                getWeekArray: (date: unknown) => unknown[][];
+                getWeekdays: () => string[];
+                getMonth: (date: unknown) => number;
+                setMonth: (date: unknown, month: number) => unknown;
+                getDate: (date: unknown) => number;
+                setDate: (date: unknown, day: number) => unknown;
+                getNextMonth: (date: unknown) => unknown;
+                getPreviousMonth: (date: unknown) => unknown;
+                /**
+                 * @type {I18nCollection}
+                 */
+                getHours: (date: unknown) => number;
+                setHours: (date: unknown, hours: number) => unknown;
+                getMinutes: (date: unknown) => number;
+                setMinutes: (date: unknown, minutes: number) => unknown;
+            };
+        };
+        goTo: {
+            rtl: import("vue").Ref<boolean>;
+            options: Record<string, any>;
+        };
+    };
+    /**
+     * @returns {import("vue-i18n").VueI18n}
      */
-    get vueI18n(): import("vue-i18n").IVueI18n;
+    get vueI18n(): import("vue-i18n").VueI18n<any, any, any, string, string, string, import("vue-i18n").Composer<any, any, any, string, string, string>>;
     /**
      * @returns {CategoryManager}
      */
@@ -295,7 +403,6 @@ declare class VcsUiApp extends VcsApp {
      */
     serializeModule(moduleId: string): VcsUiModuleConfig;
 }
-import { version } from '../package.json';
 import { VcsApp } from '@vcmap/core';
 import { VcsEvent } from '@vcmap/core';
 import { Collection } from '@vcmap/core';

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 & {
@@ -108,7 +109,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 +209,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 +289,7 @@ class VcsUiApp extends VcsApp {
      * @private
      */
     this._navbarManager = new NavbarManager();
+
     /**
      * @type {import("@vcmap/core").OverrideCollection<import("./uiConfig.js").UiConfigurationItem<unknown>, UiConfig>}
      * @private
@@ -284,28 +321,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 +445,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,17 +1,16 @@
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
-
-Vue.use(VueI18n);
+import { createI18n } from 'vue-i18n';
+import { is } from '@vcsuite/check';
 
 /**
  * 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'],
     messages: {
       en: {},
@@ -20,13 +19,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 +61,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;