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

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-88a2fabe.js";
+export * from "./vuetify-c3b6c9b3.js";

package/index.d.ts

@@ -46,6 +46,8 @@ export { default as PanelComponent } from "./src/manager/panel/PanelComponent.vu
 export type * from "./src/manager/panel/PanelComponent.vue.d.ts";
 export { default as ButtonManager } from "./src/manager/buttonManager.js";
 export type * from "./src/manager/buttonManager.d.ts";
+export { default as ToolboxManagerComponent } from "./src/manager/toolbox/ToolboxManagerComponent.vue";
+export type * from "./src/manager/toolbox/ToolboxManagerComponent.vue.d.ts";
 export { default as CategoryManager } from "./src/manager/collectionManager/categoryManager.js";
 export type * from "./src/manager/collectionManager/categoryManager.d.ts";
 export { default as CollectionManager } from "./src/manager/collectionManager/collectionManager.js";
@@ -102,8 +104,8 @@ export { default as VcsCompass } from "./src/navigation/VcsCompass.vue";
 export type * from "./src/navigation/VcsCompass.vue.d.ts";
 export { default as VcsZoomButton } from "./src/navigation/VcsZoomButton.vue";
 export type * from "./src/navigation/VcsZoomButton.vue.d.ts";
-export { i18nPluginSymbol } from "./src/i18n/i18nCollection.js";
-export type * from "./src/i18n/i18nCollection.d.ts";
+export { default as UiConfig } from "./src/uiConfig.js";
+export type * from "./src/uiConfig.d.ts";
 export { default as VcsUiApp } from "./src/vcsUiApp.js";
 export type * from "./src/vcsUiApp.d.ts";
 export { default as Icons } from "./src/components/icons/+all.js";
@@ -162,8 +164,8 @@ export { default as VcsListItemComponent } from "./src/components/lists/VcsListI
 export type * from "./src/components/lists/VcsListItemComponent.vue.d.ts";
 export { default as VcsTreeview } from "./src/components/lists/VcsTreeview.vue";
 export type * from "./src/components/lists/VcsTreeview.vue.d.ts";
-export { default as VcsTreeviewLeaf } from "./src/components/lists/VcsTreeviewLeaf.vue";
-export type * from "./src/components/lists/VcsTreeviewLeaf.vue.d.ts";
+export { default as VcsTreeviewTitle } from "./src/components/lists/VcsTreeviewTitle.vue";
+export type * from "./src/components/lists/VcsTreeviewTitle.vue.d.ts";
 export { default as VcsTreeviewSearchbar } from "./src/components/lists/VcsTreeviewSearchbar.vue";
 export type * from "./src/components/lists/VcsTreeviewSearchbar.vue.d.ts";
 export { default as VcsBadge } from "./src/components/notification/VcsBadge.vue";
@@ -214,10 +216,14 @@ export { default as VcsExpansionPanel } from "./src/components/section/VcsExpans
 export type * from "./src/components/section/VcsExpansionPanel.vue.d.ts";
 export { default as VcsSplashScreen } from "./src/application/VcsSplashScreen.vue";
 export type * from "./src/application/VcsSplashScreen.vue.d.ts";
+export * from "./src/application/attributionsHelper.js";
+export type * from "./src/application/attributionsHelper.d.ts";
 export * from "./src/components/attrsHelpers.js";
 export type * from "./src/components/attrsHelpers.d.ts";
 export * from "./src/components/modelHelper.js";
 export type * from "./src/components/modelHelper.d.ts";
+export * from "./src/components/composables.js";
+export type * from "./src/components/composables.d.ts";
 export { createMapButtonAction, createToggleAction, createOverviewMapAction, createModalAction, createLinkAction, createGoToViewpointAction, createZoomToFeatureAction } from "./src/actions/actionHelper.js";
 export type * from "./src/actions/actionHelper.d.ts";
 export { parseAndSanitizeMarkdown, renderTemplate } from "./src/components/form-output/markdownHelper.js";
@@ -264,7 +270,9 @@ export { getWindowComponentOptions, default as OverviewMap } from "./src/navigat
 export type * from "./src/navigation/overviewMap.d.ts";
 export { createVueI18n, setupI18n } from "./src/vuePlugins/i18n.js";
 export type * from "./src/vuePlugins/i18n.d.ts";
-export { createVcsThemes, createVcsVuetify, isDark, getDefaultPrimaryColor, getColorByKey, useItemHeight, useFontSize } from "./src/vuePlugins/vuetify.js";
+export { default as I18nCollection, i18nPluginSymbol } from "./src/i18n/i18nCollection.js";
+export type * from "./src/i18n/i18nCollection.d.ts";
+export { createVcsThemes, createVcsVuetify, isDark, getDefaultPrimaryColor, getColorByKey, useFontSize } from "./src/vuePlugins/vuetify.js";
 export type * from "./src/vuePlugins/vuetify.d.ts";
 export { downloadURI, downloadBlob, downloadText, downloadCanvas } from "./src/downloadHelper.js";
 export type * from "./src/downloadHelper.d.ts";
@@ -288,11 +296,15 @@ export { default as VcsFeatureEditingWindow, EditorTransformationIcons, getAllow
 export type * from "./src/components/vector-properties/VcsFeatureEditingWindow.vue.d.ts";
 
 declare module 'vue' {
-  type ReplaceFirstParam<TParams extends readonly any[], TReplace> = {
-    [K in keyof TParams]: K extends "0" ? TReplace : TParams[K]
-  }
-
   interface ComponentCustomProperties {
-    $st: (...params: ReplaceFirstParam<Parameters<import("vue-i18n").ComposerTranslation>, string | null | undefined>) => ReturnType<import("vue-i18n").ComposerTranslation>
+    $st(key: string | number | undefined | null): string;
+    $st(key: string | number | undefined | null, plural: number, options?: import("vue-i18n").TranslateOptions<import("vue-i18n").Locale>): string;
+    $st(key: string | number | undefined | null, defaultMsg: string, options?: import("vue-i18n").TranslateOptions<import("vue-i18n").Locale>): string;
+    $st(key: string | number | undefined | null, list: unknown[], options?: import("vue-i18n").TranslateOptions<import("vue-i18n").Locale>): string;
+    $st(key: string | number | undefined | null, list: unknown[], plural: number): string;
+    $st(key: string | number | undefined | null, list: unknown[], defaultMsg: string): string;
+    $st(key: string | number | undefined | null, named: import("vue-i18n").NamedValue, options?: import("vue-i18n").TranslateOptions<import("vue-i18n").Locale>): string;
+    $st(key: string | number | undefined | null, named: import("vue-i18n").NamedValue, plural: number): string;
+    $st(key: string | number | undefined | null, named: import("vue-i18n").NamedValue, defaultMsg: string): string;
   }
 }

package/index.js

@@ -124,6 +124,7 @@ export {
   ToolboxType,
   defaultToolboxName,
 } from './src/manager/toolbox/toolboxManager.js';
+export { default as ToolboxManagerComponent } from './src/manager/toolbox/ToolboxManagerComponent.vue';
 export { default as CategoryManager } from './src/manager/collectionManager/categoryManager.js';
 export { default as CollectionManager } from './src/manager/collectionManager/collectionManager.js';
 export { default as CollectionManagerComponent } from './src/manager/collectionManager/CollectionManager.vue';
@@ -185,14 +186,17 @@ export { default as VcsCompass } from './src/navigation/VcsCompass.vue';
 export { default as VcsZoomButton } from './src/navigation/VcsZoomButton.vue';
 //
 export { createVueI18n, setupI18n } from './src/vuePlugins/i18n.js';
-export { i18nPluginSymbol } from './src/i18n/i18nCollection.js';
+export {
+  default as I18nCollection,
+  i18nPluginSymbol,
+} from './src/i18n/i18nCollection.js';
+export { default as UiConfig } from './src/uiConfig.js'; // export UiConfig types
 export {
   createVcsThemes,
   createVcsVuetify,
   isDark,
   getDefaultPrimaryColor,
   getColorByKey,
-  useItemHeight,
   useFontSize,
 } from './src/vuePlugins/vuetify.js';
 export {
@@ -262,7 +266,7 @@ export {
 export { default as VcsList } from './src/components/lists/VcsList.vue';
 export { default as VcsListItemComponent } from './src/components/lists/VcsListItemComponent.vue';
 export { default as VcsTreeview } from './src/components/lists/VcsTreeview.vue';
-export { default as VcsTreeviewLeaf } from './src/components/lists/VcsTreeviewLeaf.vue';
+export { default as VcsTreeviewTitle } from './src/components/lists/VcsTreeviewTitle.vue';
 export { default as VcsTreeviewSearchbar } from './src/components/lists/VcsTreeviewSearchbar.vue';
 export { default as VcsBadge } from './src/components/notification/VcsBadge.vue';
 export { default as VcsDefaultLogo } from './src/logo.svg';
@@ -307,5 +311,7 @@ export { default as VcsFileDrop } from './src/components/import/VcsFileDrop.vue'
 export { default as VcsImportComponent } from './src/components/import/VcsImportComponent.vue';
 export { default as VcsExpansionPanel } from './src/components/section/VcsExpansionPanel.vue';
 export { default as VcsSplashScreen } from './src/application/VcsSplashScreen.vue';
+export * from './src/application/attributionsHelper.js';
 export * from './src/components/attrsHelpers.js';
 export * from './src/components/modelHelper.js';
+export * from './src/components/composables.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.0.0-rc.5",
+  "version": "6.0.0-rc.7",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -56,11 +56,11 @@
     "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
-    "@vcmap-cesium/engine": "^10.0.1",
-    "@vcmap/core": "6.0.0-rc.3",
+    "@vcmap-cesium/engine": "^11.0.2",
+    "@vcmap/core": "^6.0.0-rc.7",
     "ol": "^10.0.0",
     "vue": "~3.4.38",
-    "vuetify": "^3.7.0"
+    "vuetify": "^3.7.1"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.17",

package/plugins/@vcmap-show-case/custom-icons-example/README.md

@@ -0,0 +1,3 @@
+# Custom icons example
+
+This is a show-case plugin demonstrating the usage of [custom icons](../../../documentation/CUSTOM_ICONS.md)

package/plugins/@vcmap-show-case/custom-icons-example/assets/svgExample.svg

@@ -0,0 +1 @@
+<svg fill="#000000" width="200px" height="200px" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg"><path id="test" d="M296.482 395.294c0 31.144 -25.327 56.471 -56.471 56.471s-56.471 -25.327 -56.471 -56.471zM240.011 56.471c85.609 0 155.294 69.656 155.294 155.294v98.823c0 21.685 8.188 41.477 21.6 56.471H63.089c13.44 -14.993 21.628 -34.786 21.628 -56.471V211.765c0 -85.638 69.656 -155.294 155.294 -155.294m183.53 254.118V211.765c0 -96.424 -74.823 -175.567 -169.412 -182.823V0H225.894v28.941c-94.617 7.256 -169.412 86.4 -169.412 182.823v98.823c0 31.143 -25.327 56.471 -56.471 56.471v28.235h155.294c0 46.701 37.977 84.706 84.706 84.706 46.701 0 84.706 -38.005 84.706 -84.706h155.294v-28.235c-31.143 0 -56.471 -25.327 -56.471 -56.471Z" fill-rule="evenodd"/></svg>

package/plugins/@vcmap-show-case/custom-icons-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/custom-icon-tester",
+  "version": "1.0.0",
+  "mapVersion": "^6.0"
+}

package/plugins/@vcmap-show-case/custom-icons-example/src/CustomIconsExample.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <VcsFormSection heading="VIcon">
+      <v-row no-gutters v-for="icon in icons" :key="icon.title">
+        <v-col cols="6">
+          <VcsLabel>{{ icon.title }}</VcsLabel>
+        </v-col>
+        <v-col>
+          <VIcon size="x-small">{{ `${icon.set}:${icon.icon}` }}</VIcon>
+        </v-col>
+        <v-col>
+          <VIcon>{{ `${icon.set}:${icon.icon}` }}</VIcon>
+        </v-col>
+        <v-col>
+          <VIcon size="large">{{ `${icon.set}:${icon.icon}` }}</VIcon>
+        </v-col>
+      </v-row>
+    </VcsFormSection>
+  </div>
+</template>
+
+<script>
+  import { VcsFormSection, VcsLabel } from '@vcmap/ui';
+  import { VRow, VCol, VIcon } from 'vuetify/components';
+
+  export default {
+    name: 'CustomIconsExample',
+    components: {
+      VcsLabel,
+      VcsFormSection,
+      VIcon,
+      VRow,
+      VCol,
+    },
+    setup() {
+      const icons = [
+        {
+          title: 'Base64 image',
+          set: 'imageUrl',
+          icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhLS0gTGljZW5zZTogQ0MwLiBNYWRlIGJ5IFNWRyBSZXBvOiBodHRwczovL3d3dy5zdmdyZXBvLmNvbS9zdmcvNjUxNjMvYmVhY2ggLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHJlY3QgeT0iMjcwLjMyNyIgc3R5bGU9ImZpbGw6IzNGQTlGNTsiIHdpZHRoPSI1MTIiIGhlaWdodD0iMTA0LjQ5Ii8+CjxyZWN0IHk9IjM3NC44MTciIHN0eWxlPSJmaWxsOiNGRkQ0NkE7IiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjEzMC42MTIiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0ZGRDI0ODsiIGQ9Ik00MTIuNzM1LDcxLjc5OWMzNC41ODYsMCw2Mi42OTQsMjguMTA4LDYyLjY5NCw2Mi42OTRzLTI4LjEwOCw2Mi42OTQtNjIuNjk0LDYyLjY5NAoJcy02Mi42OTQtMjguMTA4LTYyLjY5NC02Mi42OTRTMzc4LjE0OSw3MS43OTksNDEyLjczNSw3MS43OTl6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiNCM0IzQjM7IiBkPSJNMjQ1LjU1MSwxOTcuMTg2aC02Mi42OTRjMC02Mi42OTQtMzYuNTcxLTk5LjI2NS0zNi41NzEtOTkuMjY1CglDMjAxLjE0Myw5Ny45MjEsMjQ1LjU1MSwxNDIuMzI5LDI0NS41NTEsMTk3LjE4NnoiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0NDQ0NDQzsiIGQ9Ik0xNDYuMjg2LDk3LjkyMWMwLDAsMzYuNTcxLDM2LjU3MSwzNi41NzEsOTkuMjY1aC0zNi41NzFIMTA0LjQ5CglDMTA0LjQ5LDE0NC45NDEsMTQ2LjI4Niw5Ny45MjEsMTQ2LjI4Niw5Ny45MjF6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiNFNkU2RTY7IiBkPSJNMTQ2LjI4Niw5Ny45MjFjMCwwLTQxLjc5Niw0Ny4wMi00MS43OTYsOTkuMjY1SDQ3LjAyQzQ3LjAyLDE0Mi4zMjksOTEuNDI5LDk3LjkyMSwxNDYuMjg2LDk3LjkyMXoiCgkvPgo8cGF0aCBkPSJNMTgwLjI0NSw0MC40NTJoMTUuNjczYzAtNS4xODYsNC40NzItOS43NTcsMTMuMjkyLTEzLjU5YzguMDg5LTMuNTE0LDE2LjQ3OS00Ljc2NSwxNi41NjMtNC43NzZsLTEuMTItNy43NTZsLTEuMTA5LTcuNzU4CgljLTEwLjY1LDEuNTIyLTI2LjE4NCw2LjMtMzUuNDYzLDE1LjcwM2MtOS4yNzktOS40MDMtMjQuODEzLTE0LjE4MS0zNS40NjMtMTUuNzAzbC0yLjIxNiwxNS41MTcKCUMxNTYuNzA2LDIyLjk4OCwxODAuMjQ1LDI4Ljc0NCwxODAuMjQ1LDQwLjQ1MnoiLz4KPHBhdGggZD0iTTI2My44MzcsOTIuNjk3aDE1LjY3M2MwLTUuMTg2LDQuNDcyLTkuNzU3LDEzLjI5Mi0xMy41OWM4LjA4OS0zLjUxNCwxNi40NzktNC43NjUsMTYuNTYzLTQuNzc2bC0xLjEyLTcuNzU2bC0xLjEwOS03Ljc1OAoJYy0xMC42NSwxLjUyMS0yNi4xODUsNi4zLTM1LjQ2MywxNS43MDNjLTkuMjc5LTkuNDAzLTI0LjgxMy0xNC4xODEtMzUuNDYzLTE1LjcwM2wtMi4yMTYsMTUuNTE3CglDMjQwLjI5OCw3NS4yMzMsMjYzLjgzNyw4MC45ODgsMjYzLjgzNyw5Mi42OTd6Ii8+CjxyZWN0IHg9IjI2LjEyMiIgeT0iNDUwLjU3MiIgd2lkdGg9IjIwLjg5OCIgaGVpZ2h0PSIxNS42NzMiLz4KPHJlY3QgeD0iNjcuOTE4IiB5PSI0MDguNzc2IiB3aWR0aD0iMjAuODk4IiBoZWlnaHQ9IjE1LjY3MyIvPgo8cmVjdCB4PSI2Ny45MTgiIHk9IjQ3MS40NyIgd2lkdGg9IjIwLjg5OCIgaGVpZ2h0PSIxNS42NzMiLz4KPHJlY3QgeD0iMTMwLjYxMiIgeT0iNDYxLjAyMSIgd2lkdGg9IjIwLjg5OCIgaGVpZ2h0PSIxNS42NzMiLz4KPHJlY3QgeD0iMjAzLjc1NSIgeT0iNDcxLjQ3IiB3aWR0aD0iMjAuODk4IiBoZWlnaHQ9IjE1LjY3MyIvPgo8cmVjdCB4PSIyMDMuNzU1IiB5PSI0MTkuMjI1IiB3aWR0aD0iMjAuODk4IiBoZWlnaHQ9IjE1LjY3MyIvPgo8cmVjdCB4PSIyNjYuNDQ5IiB5PSI0MDguNzc2IiB3aWR0aD0iMjAuODk4IiBoZWlnaHQ9IjE1LjY3MyIvPgo8cmVjdCB4PSIzMzkuNTkyIiB5PSI0NDAuMTIzIiB3aWR0aD0iMjAuODk4IiBoZWlnaHQ9IjE1LjY3MyIvPgo8cmVjdCB4PSIyODcuMzQ3IiB5PSI0NzEuNDciIHdpZHRoPSIyMC44OTgiIGhlaWdodD0iMTUuNjczIi8+CjxyZWN0IHg9IjM5MS44MzciIHk9IjQwOC43NzYiIHdpZHRoPSIyMC44OTgiIGhlaWdodD0iMTUuNjczIi8+CjxyZWN0IHg9IjM5MS44MzciIHk9IjQ3MS40NyIgd2lkdGg9IjIwLjg5OCIgaGVpZ2h0PSIxNS42NzMiLz4KPHJlY3QgeD0iNDY0Ljk4IiB5PSI0NDAuMTIzIiB3aWR0aD0iMjAuODk4IiBoZWlnaHQ9IjE1LjY3MyIvPgo8cmVjdCB4PSIyMTkuNDI5IiB5PSIzMDkuNTExIiB3aWR0aD0iNDcuMDIiIGhlaWdodD0iMTUuNjczIi8+CjxyZWN0IHg9IjI3Ni44OTgiIHk9IjMwOS41MTEiIHdpZHRoPSIyMC44OTgiIGhlaWdodD0iMTUuNjczIi8+CjxyZWN0IHg9IjIwLjg5OCIgeT0iMzMwLjQwOSIgd2lkdGg9IjQ3LjAyIiBoZWlnaHQ9IjE1LjY3MyIvPgo8cmVjdCB4PSI3OC4zNjciIHk9IjMzMC40MDkiIHdpZHRoPSIyMC44OTgiIGhlaWdodD0iMTUuNjczIi8+CjxyZWN0IHg9IjQwNy41MSIgeT0iMzMwLjQwOSIgd2lkdGg9IjQ3LjAyIiBoZWlnaHQ9IjE1LjY3MyIvPgo8cmVjdCB4PSIzNzYuMTYzIiB5PSIzMzAuNDA5IiB3aWR0aD0iMjAuODk4IiBoZWlnaHQ9IjE1LjY3MyIvPgo8cGF0aCBkPSJNNTEyLDI2Mi40OTJIMTU0LjEyMnYtNTcuNDY5aDk5LjI2NXYtNy44MzdjMC01OS4wNTctNDguMDQ1LTEwNy4xMDItMTA3LjEwMi0xMDcuMTAyUzM5LjE4NCwxMzguMTMsMzkuMTg0LDE5Ny4xODZ2Ny44MzcKCWg5OS4yNjV2NTcuNDY5SDB2MTUuNjczaDEzOC40NDl2ODguODE2SDB2MTUuNjczaDEzOC40NDl2MzEuMzQ3aC0yMy41MXYxNS42NzNoNjIuNjk0di0xNS42NzNoLTIzLjUxdi0zMS4zNDdINTEydi0xNS42NzNIMTU0LjEyMgoJdi04OC44MTZINTEyVjI2Mi40OTJ6IE0xMTIuNjY2LDE4OS4zNWMyLjg2OC0zNC4xODEsMjMuNTI2LTY1LjQ2NiwzMy43NjMtNzkuMDY2YzkuMTUxLDEyLjA3NCwyNi4yOTUsMzkuNywyOC4zNjQsNzkuMDY2SDExMi42NjZ6CgkgTTIzNy4zODIsMTg5LjM1aC00Ni44OTFjLTEuNzY4LTM4LjA1NC0xNi4wMzktNjYuMDQyLTI2Ljc1NS04MS45MjFDMjAzLjMzMiwxMTUuMTEzLDIzMy44OTEsMTQ4LjQzLDIzNy4zODIsMTg5LjM1egoJIE0xMjkuMTAzLDEwNy4zODRjLTEyLjA3LDE3LjI2OC0yOS43MjcsNDcuODktMzIuMTY1LDgxLjk2Nkg1NS4xODlDNTguNjg5LDE0OC4zMzgsODkuMzc4LDExNC45NywxMjkuMTAzLDEwNy4zODR6Ii8+CjxwYXRoIGQ9Ik00MTIuNzM1LDIwNS4wMjNjMzguODkxLDAsNzAuNTMxLTMxLjY0LDcwLjUzMS03MC41MzFzLTMxLjY0LTcwLjUzMS03MC41MzEtNzAuNTMxcy03MC41MzEsMzEuNjQtNzAuNTMxLDcwLjUzMQoJUzM3My44NDQsMjA1LjAyMyw0MTIuNzM1LDIwNS4wMjN6IE00MTIuNzM1LDc5LjYzNWMzMC4yNDgsMCw1NC44NTcsMjQuNjA4LDU0Ljg1Nyw1NC44NTdzLTI0LjYwOSw1NC44NTctNTQuODU3LDU0Ljg1NwoJcy01NC44NTctMjQuNjA4LTU0Ljg1Ny01NC44NTdTMzgyLjQ4Nyw3OS42MzUsNDEyLjczNSw3OS42MzV6Ii8+Cjwvc3ZnPgo=',
+        },
+        {
+          title: 'Image file',
+          set: 'imageUrl',
+          icon: './plugins/@vcmap-show-case/custom-icons-example/assets/imageExample.png',
+        },
+        {
+          title: 'SVG File as image',
+          set: 'imageUrl',
+          icon: './plugins/@vcmap-show-case/custom-icons-example/assets/svgExample.svg',
+        },
+        {
+          title: 'SVG Path',
+          set: 'svgPathData',
+          icon: 'M20.1 15.9A10 10 0 0 1 19.5 12.3v-3A8 8 0 0 0 17.6 4.1 8 8 0 0 0 12.7 1.5a10 10 0 0 0 -3.1 0.3 10 10 0 0 0 -2.7 1.6 10 10 0 0 0 -1.8 2.5 10 10 0 0 0 -0.6 3v3.3a10 10 0 0 1 -0.6 3.6L3 18.5l0.7 1H9q0 1.3 0.9 2.1T12 22.5C13.2 22.5 13.6 22.2 14.1 21.6S15 20.3 15 19.5h5.3L21 18.5zm-7 4.7A2 2 0 0 1 12 21 2 2 0 0 1 10.9 20.6 2 2 0 0 1 10.5 19.5h3a1 1 0 0 1 -0.4 1.1M4.8 18 5.4 16.3a10 10 0 0 0 0.7 -4V9q0 -1.3 0.5 -2.4a4 4 0 0 1 1.5 -2 10 10 0 0 1 2.2 -1.3Q11.6 2.9 12.8 3a6 6 0 0 1 3.9 2.1 6 6 0 0 1 1.5 4.2v3q0 2 0.7 4L19.5 18H5.1z',
+        },
+        {
+          title: 'SVG File',
+          set: 'svgString',
+          icon: `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 475.279 475.279" style="enable-background:new 0 0 475.279 475.279;" xml:space="preserve">
+<g>
+	<path d="M361.531,395.98c-33.02,0-50.146,11.539-65.257,21.718c-13.766,9.274-24.639,16.599-48.496,16.599
+		c-23.856,0-34.729-7.325-48.495-16.599c-15.111-10.18-32.237-21.718-65.257-21.718c-2.381,0-4.67,0.067-6.891,0.182V236.423
+		c23.946,6.592,41.592,28.547,41.592,54.559h30c0-28.366-13.71-53.59-34.852-69.394c14.009,2.427,27.128,10.074,36.125,22.457
+		l24.271-17.634c-16.673-22.948-42.59-35.296-68.983-35.655c12.76-6.271,27.868-7.796,42.424-3.066l9.271-28.531
+		c-22.013-7.154-45.479-5.311-66.078,5.185c-11.382,5.799-21.13,13.869-28.791,23.635c-21.817-27.68-59.396-40.329-94.824-28.82
+		l9.271,28.532c14.556-4.729,29.664-3.205,42.424,3.066C42.59,191.115,16.672,203.463,0,226.411l24.271,17.634
+		c8.997-12.385,22.116-20.032,36.126-22.458c-21.143,15.804-34.854,41.028-34.854,69.395h30c0-26.012,17.646-47.967,41.592-54.559
+		v165.655c-11.486,4.257-20.22,10.135-28.364,15.621c-13.765,9.273-24.637,16.599-48.492,16.599v30
+		c33.018,0,50.145-11.539,65.255-21.719c13.765-9.273,24.637-16.599,48.492-16.599c23.856,0,34.729,7.325,48.495,16.599
+		c15.111,10.18,32.237,21.718,65.257,21.718s50.146-11.539,65.257-21.718c13.766-9.274,24.639-16.599,48.496-16.599
+		c23.855,0,34.728,7.325,48.493,16.599c15.11,10.18,32.237,21.719,65.255,21.719v-30c-23.855,0-34.728-7.325-48.493-16.599
+		C411.676,407.519,394.55,395.98,361.531,395.98z"/>
+	<path d="M438.776,105.982c-1.944-9.575-5.72-18.48-10.933-26.351l25.824-25.824l-21.213-21.213l-25.824,25.824
+		c-7.871-5.213-16.777-8.989-26.351-10.933V10.982h-30v36.503c-9.575,1.944-18.48,5.72-26.351,10.933l-25.824-25.824l-21.213,21.213
+		l25.824,25.824c-5.213,7.871-8.989,16.777-10.933,26.351h-36.503v30h36.503c1.944,9.575,5.72,18.48,10.933,26.351l-25.824,25.824
+		l21.213,21.213l25.824-25.824c7.871,5.213,16.777,8.989,26.351,10.933v36.503h30v-36.503c9.575-1.944,18.48-5.72,26.351-10.933
+		l25.824,25.824l21.213-21.213l-25.824-25.824c5.213-7.871,8.989-16.777,10.933-26.351h36.503v-30H438.776z"/>
+</g>
+</svg>`,
+        },
+      ];
+
+      return {
+        icons,
+      };
+    },
+  };
+</script>

package/plugins/@vcmap-show-case/custom-icons-example/src/index.js

@@ -0,0 +1,45 @@
+import { ButtonLocation, createToggleAction } from '@vcmap/ui';
+import CustomIconsExample from './CustomIconsExample.vue';
+import packageJSON from '../package.json';
+
+export default async function customIconExample() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Custom icons example',
+        },
+        {
+          id: 'custom-icons-example',
+          state: {
+            headerTitle: 'Custom icons example',
+          },
+          component: CustomIconsExample,
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: 'custom-icons-example', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this._destoryAction = [destroy];
+    },
+    destroy() {
+      if (this._destroyActions) {
+        this._destroyActions.forEach((cb) => cb());
+        this._destroyActions = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue

@@ -41,9 +41,9 @@
             </v-col>
           </v-row>
           <v-row no-gutters>
-            <v-col>
+            <v-col cols="6">
               <VcsLabel :disabled="disabled" html-for="conditionalInput">
-                ConditionalInput
+                Conditional Input with long label
               </VcsLabel>
             </v-col>
             <v-col>

package/plugins/@vcmap-show-case/plugin-editors/src/PluginEditors.vue

@@ -1,15 +1,21 @@
 <template>
-  <VcsList :items="plugins" :show-title="false" />
+  <div>
+    <VcsHelp
+      text="Below all config editors provided by plugins are listed. Important Note: Changes made in editors are not applied!"
+    ></VcsHelp>
+    <VcsList :items="plugins" :show-title="false" />
+  </div>
 </template>
 
 <script>
   import { inject, onUnmounted, ref } from 'vue';
-  import { VcsList, createToggleAction, WindowSlot } from '@vcmap/ui';
+  import { VcsList, createToggleAction, WindowSlot, VcsHelp } from '@vcmap/ui';
   import { name } from '../package.json';
 
   export default {
     name: 'PluginEditors',
     components: {
+      VcsHelp,
       VcsList,
     },
     setup() {
@@ -41,12 +47,10 @@
                       if (config) {
                         vcsApp.notifier.add({
                           type: 'info',
-                          message: `${plugin.name}: ${JSON.stringify(
-                            config,
-                            null,
-                            2,
-                          )}`,
+                          title: plugin.name,
+                          message: JSON.stringify(config, null, 2),
                         });
+                        console.log(config);
                       } else {
                         vcsApp.notifier.add({
                           type: 'warning',

package/plugins/@vcmap-show-case/project-selector/src/ModulesListComponent.vue

@@ -13,7 +13,7 @@
         <v-icon
           v-if="module.description && toggleable"
           right
-          v-bind="{ ...$attrs, ...props }"
+          v-bind="{ ...$attrs, ...$props }"
         >
           mdi-help-circle
         </v-icon>

package/plugins/@vcmap-show-case/theming-example/README.md

@@ -0,0 +1,3 @@
+# Theming Example
+
+This is a show-case plugin demonstrating the different Theming options.

package/plugins/@vcmap-show-case/theming-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/theming-example",
+  "version": "1.0.0",
+  "mapVersion": "^6.0.0"
+}

package/plugins/@vcmap-show-case/theming-example/src/ThemingExample.vue

@@ -0,0 +1,116 @@
+<template>
+  <VCard>
+    <VcsFormSection heading="Colors" expandable start-open>
+      <v-container class="px-1 py-0">
+        <v-row
+          v-for="key in Object.keys(currentTheme.colors)"
+          :key="key"
+          no-gutters
+        >
+          <v-col>
+            <VcsLabel>{{ key }}</VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsTextField
+              v-model="currentTheme.colors[key]"
+              :bg-color="currentTheme.colors[key]"
+            ></VcsTextField>
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <VcsFormSection heading="Variables" expandable start-open>
+      <v-container class="px-1 py-0">
+        <v-row
+          no-gutters
+          v-for="key in Object.keys(currentTheme.variables)"
+          :key="key"
+        >
+          <v-col>
+            <VcsLabel>{{ key }}</VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsTextField v-model="currentTheme.variables[key]"></VcsTextField>
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <v-container class="px-1 py-0">
+      <VcsFormButton @click="reset"> Reset default </VcsFormButton>
+    </v-container>
+  </VCard>
+</template>
+
+<script>
+  import {
+    createVcsThemes,
+    VcsTextField,
+    VcsLabel,
+    VcsFormSection,
+    VcsFormButton,
+    isDark,
+  } from '@vcmap/ui';
+  import {
+    watch,
+    inject,
+    ref,
+    computed,
+    toRaw,
+    onMounted,
+    onUnmounted,
+  } from 'vue';
+  import { VCard, VCol, VRow, VContainer } from 'vuetify/components';
+
+  export default {
+    name: 'ThemingExample',
+    components: {
+      VcsLabel,
+      VcsFormSection,
+      VcsFormButton,
+      VcsTextField,
+      VContainer,
+      VCard,
+      VRow,
+      VCol,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const theming = ref(createVcsThemes());
+      const currentTheme = computed(() => {
+        if (isDark(app)) {
+          return theming.value.dark;
+        } else {
+          return theming.value.light;
+        }
+      });
+      onMounted(() => {
+        app.uiConfig.override({
+          name: 'vuetifyTheme',
+          value: toRaw(theming.value),
+        });
+      });
+      onUnmounted(() => {
+        app.uiConfig.remove(app.uiConfig.getByKey('vuetifyTheme'));
+      });
+      watch(
+        () => theming.value,
+        () => {
+          app.uiConfig.replace({
+            name: 'vuetifyTheme',
+            value: toRaw(theming.value),
+          });
+        },
+        { deep: true },
+      );
+      return {
+        reset: () => {
+          theming.value = createVcsThemes();
+        },
+        theming,
+        currentTheme,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/plugins/@vcmap-show-case/theming-example/src/index.js

@@ -0,0 +1,53 @@
+import { createToggleAction, ButtonLocation, WindowSlot } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import ThemingExample from './ThemingExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async () => {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Theming Example',
+          icon: '$vcsWand',
+          title: 'Theming Example Plugin',
+        },
+        {
+          id: 'theming-example',
+          component: ThemingExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'Theming Example',
+            headerIcon: '$vcsWand',
+            styles: { width: '350px', height: 'auto' },
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: 'theming-example', action },
+        packageJSON.name,
+        ButtonLocation.MENU,
+      );
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+};