@vcmap/ui 6.0.0-rc.5 → 6.0.0-rc.7

package/src/vcsUiApp.js

@@ -48,39 +48,45 @@ import { createVcsVuetify } from './vuePlugins/vuetify.js';
 
 /**
  * @typedef {import("@vcmap/core").VcsModuleConfig & {
- *    plugins?: Object[],
+ *    plugins?: Record<string, unknown>[],
  *    contentTree?: import("./contentTree/contentTreeItem.js").ContentTreeItemOptions[],
  *    uiConfig?: import("./uiConfig.js").UiConfigurationItem<unknown>[],
  *    featureInfo?: import("./featureInfo/abstractFeatureInfoView.js").FeatureInfoViewOptions[],
- *    i18n?: Object[]
+ *    i18n?: import("./i18n/i18nCollection.js").I18nConfigurationItem[]
  *  }} VcsUiModuleConfig
  */
 
 /**
- * @typedef {Object} PluginConfig
+ * @typedef {{ name: string, entry?: string, version?: string}} PluginConfig
  * @property {string} name
  * @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 {import("vue").Component<{ getConfig(): C, setConfig(config?: C): void }>} PluginConfigEditorComponent
+ * @template {Object} C - plugin or item config
  */
 
 /**
- * @typedef {Object} PluginConfigEditor
- * @property {PluginConfigEditorComponent<object>} component - A editor component to configure a plugin or item
+ * @typedef {{
+ *   component: PluginConfigEditorComponent<C>,
+ *   title?: string,
+ *   collectionName?: string,
+ *   itemName?: string,
+ *   infoUrlCallback?: () => string,
+ * }} PluginConfigEditor
+ * @template {Object} C - plugin or item config
+ * @property {PluginConfigEditorComponent<C>} component - A editor component to configure a plugin or item
+ * @property {string} [title] - optional title to render in the window header & actions of this editor
  * @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.
  */
 
 /**
- * @typedef {function(P, string):VcsPlugin<P, S>} createPlugin
- * @template {Object} P
+ * @typedef {function(C, string):VcsPlugin<C, S>} createPlugin
+ * @template {Object} C
  * @template {Object} S
  */
 
@@ -94,19 +100,19 @@ import { createVcsVuetify } from './vuePlugins/vuetify.js';
  *   i18n?: Object<string, unknown>,
  *   initialize?: function(import("@src/vcsUiApp.js").default, S=):void|Promise<void>,
  *   onVcsAppMounted?: function(import("@src/vcsUiApp.js").default):void,
- *   toJSON?: function(): P,
- *   getDefaultOptions?: function(): P,
+ *   toJSON?: function(): C,
+ *   getDefaultOptions?: function(): C,
  *   getState?: function(boolean=):S|Promise<S>,
- *   getConfigEditors?: function():Array<PluginConfigEditor>,
+ *   getConfigEditors?: function():Array<PluginConfigEditor<object>>,
  *   destroy?: function(): void
  * }} VcsPlugin
- * @template {Object} P
- * @template {Object} S
+ * @template {Object} C - plugin config
+ * @template {Object} S - plugin state
  * @property {Object<string, *>} [i18n] - the i18n messages of this plugin
  * @property {function(import("@src/vcsUiApp.js").default, S=)} initialize - called on plugin added. Is passed the VcsUiApp and optionally, the state for the plugin
  * @property {function(import("@src/vcsUiApp.js").default)} onVcsAppMounted - called on mounted of VcsApp.vue
- * @property {function():P} [toJSON] - should return the plugin's serialization excluding all default values
- * @property {function():P} [getDefaultOptions] - should return the plugin's default options
+ * @property {function():C} [toJSON] - should return the plugin's serialization excluding all default values
+ * @property {function():C} [getDefaultOptions] - should return the plugin's default options
  * @property {function(boolean=):S|Promise<S>} [getState] - should return the plugin's state or a promise for said state. is passed a "for url" flag. If true, only the state relevant for sharing a URL should be passed and short keys shall be used
  * @property {Array<PluginConfigEditor>} [getConfigEditors] - should return components for configuring the plugin or custom items defined by the plugin
  * @api
@@ -164,7 +170,7 @@ class VcsUiApp extends VcsApp {
      */
     this.themeChanged = new VcsEvent();
     /**
-     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin>}
+     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin, Collection<VcsPlugin>, Object>}
      * @private
      */
     this._plugins = makeOverrideCollection(
@@ -260,7 +266,7 @@ class VcsUiApp extends VcsApp {
     );
 
     /**
-     * @type {import("@vcmap/core").OverrideClassRegistry<import("@vcmap/core").Ctor<ContentTreeItem>>}
+     * @type {import("@vcmap/core").OverrideClassRegistry<typeof ContentTreeItem>}
      * @private
      */
     this._contentTreeClassRegistry = new OverrideClassRegistry(
@@ -369,7 +375,7 @@ class VcsUiApp extends VcsApp {
   }
 
   /**
-   * @type {import("@vcmap/core").OverrideCollection<VcsPlugin<Object, Object>>}
+   * @type {import("@vcmap/core").OverrideCollection<VcsPlugin, Collection<VcsPlugin>, Object>}
    */
   get plugins() {
     return this._plugins;
@@ -383,21 +389,21 @@ class VcsUiApp extends VcsApp {
   }
 
   /**
-   * @type {import("@vcmap/core").OverrideClassRegistry<import("@vcmap/core").Ctor<typeof import("./callback/vcsCallback.js").default>>}
+   * @type {import("@vcmap/core").OverrideClassRegistry<typeof import("./callback/vcsCallback.js").default>}
    */
   get callbackClassRegistry() {
     return this._callbackClassRegistry;
   }
 
   /**
-   * @type {import("@vcmap/core").OverrideClassRegistry<import("@vcmap/core").Ctor<typeof ContentTreeItem>>}
+   * @type {import("@vcmap/core").OverrideClassRegistry<typeof ContentTreeItem>}
    */
   get contentTreeClassRegistry() {
     return this._contentTreeClassRegistry;
   }
 
   /**
-   * @type {import("@vcmap/core").OverrideClassRegistry<import("@vcmap/core").Ctor<typeof AbstractFeatureInfoView>>}
+   * @type {import("@vcmap/core").OverrideClassRegistry<typeof AbstractFeatureInfoView>}
    */
   get featureInfoClassRegistry() {
     return this._featureInfoClassRegistry;

package/src/vuePlugins/vuetify.d.ts

@@ -1,61 +1,54 @@
-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;
-            'high-emphasis-opacity': number;
-            'medium-emphasis-opacity': number;
-            'vcs-item-height': string;
-            'vcs-font-size': string;
-            'vcs-font-family': string;
-        };
-    };
-};
+/**
+ * @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?: 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>}
@@ -81,15 +74,15 @@ export function getDefaultPrimaryColor(app: import("../vcsUiApp.js").default): s
  */
 export function getColorByKey(app: import("../vcsUiApp.js").default, value: string, variant?: string | undefined): string;
 /**
- * returns the itemHeight as a number
+ * returns the fontSize as a number
  * @returns {import("vue").ComputedRef<number>}
  */
-export function useItemHeight(): import("vue").ComputedRef<number>;
+export function useFontSize(): import("vue").ComputedRef<number>;
 /**
- * returns the fontSize as a number
+ * returns the default IconSize as a number, value is based on the fontSize
  * @returns {import("vue").ComputedRef<number>}
  */
-export function useFontSize(): import("vue").ComputedRef<number>;
+export function useIconSize(): import("vue").ComputedRef<number>;
 /**
  * @type {{light:string,dark:string}}
  */
@@ -97,3 +90,36 @@ export const defaultPrimaryColor: {
     light: string;
     dark: string;
 };
+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,8 +1,10 @@
 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 } from 'vue';
+import { computed, h } from 'vue';
+import DOMPurify from 'dompurify';
 import Icons from '../components/icons/+all.js';
 
 /**
@@ -13,7 +15,53 @@ export const defaultPrimaryColor = {
   dark: '#27B97C',
 };
 
-export function createVcsThemes() {
+/**
+ * @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: {
@@ -27,20 +75,22 @@ export function createVcsThemes() {
         'base-darken-2': '#6B6B6B',
         'base-darken-3': '#525252',
         'base-darken-4': '#383838',
-        primary: defaultPrimaryColor.light,
+        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-item-height': '32px',
         'vcs-font-size': '13px',
         'vcs-font-family': 'Titillium Web',
+        ...options?.light?.variables,
       },
     },
     dark: {
@@ -55,25 +105,71 @@ export function createVcsThemes() {
         'base-darken-2': '#D0D0D0',
         'base-darken-3': '#EBEBEB',
         'base-darken-4': '#F8F8F8',
-        primary: defaultPrimaryColor.dark,
+        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-item-height': '40px',
-        'vcs-font-size': '15px',
+        '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>}
@@ -103,9 +199,6 @@ export function createVcsVuetify(i18n) {
       VBtn: {
         ripple: false,
       },
-      VIcon: {
-        size: 16,
-      },
       VList: {
         density: 'compact',
         class: 'pa-0 vcsList',
@@ -169,6 +262,11 @@ export function createVcsVuetify(i18n) {
       aliases: {
         ...Icons,
       },
+      sets: {
+        imageUrl: imageUrlSet,
+        svgString: svgStringSet,
+        svgPathData: svgPathDataSet,
+      },
     },
     locale: {
       adapter: createVueI18nAdapter({ i18n, useI18n }),
@@ -212,27 +310,25 @@ export function getColorByKey(app, value, variant) {
 }
 
 /**
- * returns the itemHeight as a number
+ * returns the fontSize as a number
  * @returns {import("vue").ComputedRef<number>}
  */
-export function useItemHeight() {
+export function useFontSize() {
   const theme = useTheme();
   return computed(() => {
-    const itemHeight = theme.current.value.variables['vcs-item-height'] ?? 32;
+    const fontSize = theme.current.value.variables['vcs-font-size'] ?? 13;
     // get rid of `px`
-    return Number.parseFloat(itemHeight);
+    return Number.parseFloat(fontSize);
   });
 }
 
 /**
- * returns the fontSize as a number
+ * returns the default IconSize as a number, value is based on the fontSize
  * @returns {import("vue").ComputedRef<number>}
  */
-export function useFontSize() {
-  const theme = useTheme();
+export function useIconSize() {
+  const fontSize = useFontSize();
   return computed(() => {
-    const fontSize = theme.current.value.variables['vcs-font-size'] ?? 13;
-    // get rid of `px`
-    return Number.parseFloat(fontSize);
+    return fontSize.value * (1.2 + 0.1 / 3);
   });
 }