@vcmap/ui 6.0.0-rc.3 → 6.0.0-rc.6

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-760ced3b.js";
+export * from "./vuetify-4c4e4217.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";
@@ -116,8 +118,6 @@ export { default as VcsFormButton } from "./src/components/buttons/VcsFormButton
 export type * from "./src/components/buttons/VcsFormButton.vue.d.ts";
 export { default as VcsActionButtonList } from "./src/components/buttons/VcsActionButtonList.vue";
 export type * from "./src/components/buttons/VcsActionButtonList.vue.d.ts";
-export { default as VcsTooltip } from "./src/components/notification/VcsTooltip.vue";
-export type * from "./src/components/notification/VcsTooltip.vue.d.ts";
 export { default as VcsHelp } from "./src/components/notification/VcsHelp.vue";
 export type * from "./src/components/notification/VcsHelp.vue.d.ts";
 export { default as VcsTable } from "./src/components/tables/VcsTable.vue";
@@ -160,12 +160,12 @@ export { default as VcsTextPage } from "./src/application/VcsTextPage.vue";
 export type * from "./src/application/VcsTextPage.vue.d.ts";
 export { default as VcsList } from "./src/components/lists/VcsList.vue";
 export type * from "./src/components/lists/VcsList.vue.d.ts";
-export { default as VcsListItem } from "./src/components/lists/VcsListItem.vue";
-export type * from "./src/components/lists/VcsListItem.vue.d.ts";
+export { default as VcsListItemComponent } from "./src/components/lists/VcsListItemComponent.vue";
+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";
@@ -216,14 +216,18 @@ 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, replaceAttributes } from "./src/application/markdownHelper.js";
-export type * from "./src/application/markdownHelper.d.ts";
+export { parseAndSanitizeMarkdown, renderTemplate } from "./src/components/form-output/markdownHelper.js";
+export type * from "./src/components/form-output/markdownHelper.d.ts";
 export { createStateRefAction, StateActionState } from "./src/actions/stateRefAction.js";
 export type * from "./src/actions/stateRefAction.d.ts";
 export { createLayerToggleAction, createZoomToExtentAction, createExtentFeatureAction, setupExtentComponentActions } from "./src/actions/extentActions.js";
@@ -234,7 +238,7 @@ export { createListItemDeleteAction, createListItemBulkAction, createListExportA
 export type * from "./src/actions/listActions.d.ts";
 export { default as VcsCallback, executeCallbacks } from "./src/callback/vcsCallback.js";
 export type * from "./src/callback/vcsCallback.d.ts";
-export { default as VcsApp, setupMapNavbar, setupPluginMountedListeners, setupCategoryManagerWindow } from "./src/application/VcsApp.vue";
+export { default as VcsApp, setupMapNavbar, setupPluginMountedListeners, setupCategoryManagerWindow, categoryManagerWindowId } from "./src/application/VcsApp.vue";
 export type * from "./src/application/VcsApp.vue.d.ts";
 export { default as ContentTreeCollection, createContentTreeCollection } from "./src/contentTree/contentTreeCollection.js";
 export type * from "./src/contentTree/contentTreeCollection.d.ts";
@@ -266,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, getColorByKey, getDefaultPrimaryColor, useItemHeight } 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";
@@ -290,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

@@ -13,8 +13,8 @@ export {
 } from './src/actions/actionHelper.js';
 export {
   parseAndSanitizeMarkdown,
-  replaceAttributes,
-} from './src/application/markdownHelper.js';
+  renderTemplate,
+} from './src/components/form-output/markdownHelper.js';
 export {
   createStateRefAction,
   StateActionState,
@@ -58,6 +58,7 @@ export {
   setupMapNavbar,
   setupPluginMountedListeners,
   setupCategoryManagerWindow,
+  categoryManagerWindowId,
 } from './src/application/VcsApp.vue';
 export { default as VcsAppWrapper } from './src/application/VcsAppWrapper.vue';
 export { default as VcsMap } from './src/application/VcsMap.vue';
@@ -123,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';
@@ -184,13 +186,18 @@ 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,
-  getColorByKey,
+  isDark,
   getDefaultPrimaryColor,
-  useItemHeight,
+  getColorByKey,
+  useFontSize,
 } from './src/vuePlugins/vuetify.js';
 export {
   downloadURI,
@@ -231,7 +238,6 @@ export { default as VcsButton } from './src/components/buttons/VcsButton.vue';
 export { default as VcsToolButton } from './src/components/buttons/VcsToolButton.vue';
 export { default as VcsFormButton } from './src/components/buttons/VcsFormButton.vue';
 export { default as VcsActionButtonList } from './src/components/buttons/VcsActionButtonList.vue';
-export { default as VcsTooltip } from './src/components/notification/VcsTooltip.vue';
 export { default as VcsHelp } from './src/components/notification/VcsHelp.vue';
 export { default as VcsTable } from './src/components/tables/VcsTable.vue';
 export { default as VcsDataTable } from './src/components/tables/VcsDataTable.vue';
@@ -258,9 +264,9 @@ export {
   validateActions,
 } from './src/components/lists/VcsActionList.vue';
 export { default as VcsList } from './src/components/lists/VcsList.vue';
-export { default as VcsListItem } from './src/components/lists/VcsListItem.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';
@@ -305,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.3",
+  "version": "6.0.0-rc.6",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -50,42 +50,42 @@
     "@vcsuite/parsers": "^1.0.3",
     "dompurify": "^3.1.6",
     "fast-deep-equal": "^3.1.3",
-    "marked": "^13.0.2",
-    "semver": "^7.5.4",
+    "marked": "^14.0.0",
+    "semver": "^7.6.3",
     "uuid": "^10.0.0",
     "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^10.0.1",
-    "@vcmap/core": "6.0.0-rc.3",
+    "@vcmap/core": "^6.0.0-rc.5",
     "ol": "^10.0.0",
-    "vue": "~3.4.27",
-    "vuetify": "^3.6.13"
+    "vue": "~3.4.38",
+    "vuetify": "^3.7.1"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.17",
     "@vcmap/rollup-plugin-vcs-ol": "^1.0.2",
     "@vcsuite/eslint-config": "^3.0.5",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/coverage-v8": "^1.6.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitest/coverage-v8": "^2.0.5",
     "@vue/test-utils": "^2.4.6",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-vuetify": "^2.4.0",
     "histoire": "^0.17.17",
     "jest-canvas-mock": "^2.5.2",
-    "jsdoc": "^3.6.7",
+    "jsdoc": "^4.0.3",
     "jsdoc-plugin-intersection": "^1.0.4",
-    "jsdoc-plugin-typescript": "^2.0.6",
-    "jsdom": "^22.1.0",
+    "jsdoc-plugin-typescript": "^2.2.1",
+    "jsdom": "^24.1.1",
     "resize-observer-polyfill": "1.5.1",
     "rollup-plugin-strip-pragma": "^1.0.0",
-    "sass": "^1.77.1",
-    "tar": "^6.1.14",
+    "sass": "^1.77.8",
+    "tar": "^7.4.3",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
-    "vite-plugin-vuetify": "^2.0.3",
-    "vitest": "^1.6.0",
-    "vue-tsc": "^2.0.17"
+    "vite": "^5.4.1",
+    "vite-plugin-vuetify": "^2.0.4",
+    "vitest": "^2.0.5",
+    "vue-tsc": "^2.0.29"
   },
   "stylelint": {
     "extends": "stylelint-config-standard",

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

@@ -77,7 +77,7 @@
                 :disabled="disabled"
                 id="arrayInput"
                 type="number"
-                v-model="array"
+                v-model="state.arrayInput"
                 :rules="[arrayTest]"
               />
             </v-col>
@@ -272,7 +272,7 @@
               />
             </v-col>
           </v-row>
-          <VcsCoordinate :disabled="disabled" v-model="array" />
+          <VcsCoordinate :disabled="disabled" v-model="state.arrayInput" />
         </v-container>
       </template>
     </VcsFormSection>
@@ -556,7 +556,6 @@
       return {
         // no object-destruction of reactive objects! or use toRef()
         state: plugin.state,
-        array: ref([1, 2, 3]),
         // do not put the whole config here, since it would become reactive
         selectOptions: plugin.config.selectOptions,
         form,

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

@@ -10,29 +10,36 @@
         @click="toggle(module)"
       >
         {{ module.name || module.configUrl }}
-        <VcsTooltip
+        <v-icon
           v-if="module.description && toggleable"
-          :tooltip="module.description"
+          right
+          v-bind="{ ...$attrs, ...props }"
         >
-          <template #activator="{ props }">
-            <v-icon right v-bind="{ ...$attrs, ...props }">
-              mdi-help-circle
-            </v-icon>
-          </template>
-        </VcsTooltip>
+          mdi-help-circle
+        </v-icon>
+        <v-tooltip
+          v-if="module.description && toggleable"
+          :text="module.description"
+          activator="parent"
+        />
       </v-chip>
     </v-list>
   </v-container>
 </template>
 
 <script>
-  import { VcsTooltip } from '@vcmap/ui';
-  import { VChip, VContainer, VIcon, VList } from 'vuetify/components';
+  import {
+    VChip,
+    VContainer,
+    VIcon,
+    VList,
+    VTooltip,
+  } from 'vuetify/components';
 
   export default {
     name: 'ModulesListComponent',
     components: {
-      VcsTooltip,
+      VTooltip,
       VContainer,
       VList,
       VChip,

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

@@ -65,6 +65,7 @@ export default function searchExample(config) {
         config.lines ?? defaultLines,
         config.withIcon ?? true,
         config.withPOI ?? true,
+        config.withActions ?? true,
       );
       app.search.add(impl, name);
     },

package/plugins/@vcmap-show-case/search-example/src/searchImpl.js

@@ -36,17 +36,42 @@ function randomPOI(title) {
   return feature;
 }
 
+function getRandomIcon() {
+  const keys = Object.keys(Icons);
+  const index = Math.floor(keys.length * Math.random());
+  return `$${keys[index]}`;
+}
+
 /**
  * @param {string} line
  * @param {boolean} withIcon
  * @param {boolean} withPOI
+ * @param {boolean} withActions
  * @returns {import("@vcmap/ui").ResultItem}
  */
-function lineToResultItem(line, withIcon, withPOI) {
+function lineToResultItem(line, withIcon, withPOI, withActions) {
   let icon;
   if (withIcon) {
-    const icons = Object.keys(Icons);
-    icon = icons[Math.floor(Math.random() * icons.length)];
+    icon = getRandomIcon();
+  }
+
+  let actions;
+  if (withActions) {
+    actions = [
+      {
+        name: 'action-1',
+        icon,
+        callback() {
+          console.log('Action 1');
+        },
+      },
+      {
+        name: 'action-2',
+        callback() {
+          console.log('Action 2');
+        },
+      },
+    ];
   }
 
   let clicked;
@@ -64,6 +89,7 @@ function lineToResultItem(line, withIcon, withPOI) {
     icon,
     clicked,
     feature,
+    actions,
   };
 }
 
@@ -75,19 +101,23 @@ export default class SearchImpl {
    * @param {string[]} lines
    * @param {boolean} withIcon
    * @param {boolean} withPOI
+   * @param {boolean} withActions
    */
-  constructor(lines, withIcon, withPOI) {
+  constructor(lines, withIcon, withPOI, withActions) {
     this.name = name;
     this.lines = lines;
     this.withIcon = withIcon;
     this.withPOI = withPOI;
+    this.withActions = withActions;
   }
 
   search(query) {
     return Promise.resolve(
       this.lines
         .filter((l) => l.toLowerCase().includes(query.toLowerCase()))
-        .map((line) => lineToResultItem(line, this.withIcon, this.withPOI)),
+        .map((line) =>
+          lineToResultItem(line, this.withIcon, this.withPOI, this.withActions),
+        ),
     );
   }
 

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"
+}