npm - @vcmap/ui - Versions diffs - 5.0.0-rc.28 → 5.0.0-rc.30 - Mend

@vcmap/ui 5.0.0-rc.28 → 5.0.0-rc.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/config/base.config.json +22 -0
package/config/dev.config.json +4 -0
package/dist/assets/cesium/Workers/cesiumWorkerBootstrapper.js +1 -1
package/dist/assets/cesium/Workers/package.js +1 -1
package/dist/assets/cesium/Workers/transferTypedArrayTest.js +1 -1
package/dist/assets/{cesium.973919.js → cesium.eaf7cc.js} +149552 -149560
package/dist/assets/cesium.js +1 -1
package/dist/assets/{core.7a2173.js → core.b16511.js} +4077 -3965
package/dist/assets/core.js +1 -1
package/dist/assets/index-c115e3a1.js +1 -0
package/dist/assets/{ol.f6e2e4.js → ol.4bbf0f.js} +11405 -11126
package/dist/assets/ol.js +1 -1
package/dist/assets/{ui.bd7a9a.css → ui.ab815e.css} +2 -2
package/dist/assets/{ui.bd7a9a.js → ui.ab815e.js} +4232 -3512
package/dist/assets/ui.js +1 -1
package/dist/assets/vue.js +2 -2
package/dist/assets/{vuetify.95f6c3.js → vuetify.ea3fa8.js} +1 -1
package/dist/assets/vuetify.js +2 -2
package/dist/index.html +1 -1
package/index.js +7 -0
package/lib/olLib.js +6 -0
package/package.json +3 -3
package/plugins/@vcmap/search-nominatim/SearchNominatimEditor.vue +90 -0
package/plugins/@vcmap/search-nominatim/index.js +37 -0
package/plugins/@vcmap-show-case/form-inputs-example/FormInputsExample.vue +37 -1
package/plugins/@vcmap-show-case/form-inputs-example/index.js +3 -0
package/plugins/@vcmap-show-case/form-inputs-example/validation.js +11 -0
package/plugins/@vcmap-show-case/style-input-example/styleExample.vue +0 -1
package/plugins/@vcmap-show-case/vector-properties-example/index.js +40 -0
package/plugins/@vcmap-show-case/vector-properties-example/package.json +5 -0
package/plugins/@vcmap-show-case/vector-properties-example/vectorPropertiesExample.vue +109 -0
package/plugins/@vcmap-show-case/window-tester/WindowExample.vue +27 -9
package/plugins/@vcmap-show-case/window-tester/index.js +13 -1
package/plugins/@vcmap-show-case/window-tester/windowExampleToggleChild.vue +11 -10
package/src/actions/actionHelper.js +7 -3
package/src/application/VcsApp.vue +31 -0
package/src/components/form-inputs-controls/VcsChipArrayInput.vue +282 -0
package/src/components/form-inputs-controls/VcsTextField.vue +12 -5
package/src/components/icons/+all.js +3 -3
package/src/components/lists/VcsTreeviewLeaf.vue +1 -1
package/src/components/lists/VcsTreeviewSearchbar.vue +9 -4
package/src/components/plugins/AbstractConfigEditor.vue +84 -0
package/src/components/style/VcsImageSelector.vue +6 -5
package/src/components/style/VcsTextSelector.vue +1 -1
package/src/components/tables/VcsDataTable.vue +100 -13
package/src/components/vector-properties/VcsVectorPropertiesComponent.vue +737 -0
package/src/components/vector-properties/composables.js +93 -0
package/src/contentTree/contentTreeCollection.js +3 -0
package/src/featureInfo/abstractFeatureInfoView.js +3 -1
package/src/featureInfo/balloonFeatureInfoView.js +3 -2
package/src/featureInfo/featureInfo.js +1 -0
package/src/i18n/de.js +44 -9
package/src/i18n/en.js +42 -7
package/src/manager/collectionManager/collectionComponent.js +1 -1
package/src/manager/window/WindowComponent.vue +4 -1
package/src/manager/window/WindowComponentHeader.vue +25 -13
package/src/manager/window/windowManager.js +6 -2
package/src/navigation/overviewMap.js +1 -1
package/src/pluginHelper.js +57 -17
package/src/uiConfig.js +1 -0
package/src/vcsUiApp.js +45 -34
package/dist/assets/index-1b09f88d.js +0 -1
/package/dist/assets/{vue.d4be99.js → vue.67e80f.js} +0 -0
/package/dist/assets/{vuetify.95f6c3.css → vuetify.ea3fa8.css} +0 -0
/package/src/components/icons/{PolygonIcon.vue → PointIcon.vue} +0 -0

package/dist/assets/ui.js CHANGED Viewed

	@@ -1 +1 @@
1	- export * from "./ui.~~bd7a9a~~.js";
1	+ export * from "./ui.ab815e.js";

package/dist/assets/vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vue.d4be99.js";
-import { default as f } from "./vue.d4be99.js";
+export * from "./vue.67e80f.js";
+import { default as f } from "./vue.67e80f.js";
 export {
   f as default
 };

package/dist/assets/{vuetify.95f6c3.js → vuetify.ea3fa8.js} RENAMED Viewed

@@ -13,7 +13,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify.95f6c3.css');import v from "./vue.d4be99.js";
+} await loadCss('./assets/vuetify.ea3fa8.css');import v from "./vue.67e80f.js";
 const Ne = v.extend().extend({
   name: "themeable",
   provide() {

package/dist/assets/vuetify.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vuetify.95f6c3.js";
-import { default as f } from "./vuetify.95f6c3.js";
+export * from "./vuetify.ea3fa8.js";
+import { default as f } from "./vuetify.ea3fa8.js";
 export {
   f as default
 };

package/dist/index.html CHANGED Viewed

@@ -29,7 +29,7 @@
     />
     <link rel="icon" type="image/svg+xml" href="./assets/favicon.d5ec97.svg" />
-    <script type="module" crossorigin src="./assets/index-1b09f88d.js"></script>
+    <script type="module" crossorigin src="./assets/index-c115e3a1.js"></script>
   </head>
   <body style="height: 100vh">
     <noscript>

package/index.js CHANGED Viewed

@@ -139,6 +139,7 @@ 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 {
   createVuetify,
   vuetify,
@@ -161,6 +162,7 @@ export {
   vcsAppSymbol,
   pluginFactorySymbol,
   pluginBaseUrlSymbol,
+  pluginModuleUrlSymbol,
   getPluginAssetUrl,
   isValidPackageName,
   loadPlugin,
@@ -203,6 +205,7 @@ export { default as VcsFormSection } from './src/components/form-inputs-controls
 export { default as VcsSelect } from './src/components/form-inputs-controls/VcsSelect.vue';
 export { default as VcsSlider } from './src/components/form-inputs-controls/VcsSlider.vue';
 export { default as VcsTextField } from './src/components/form-inputs-controls/VcsTextField.vue';
+export { default as VcsChipArrayInput } from './src/components/form-inputs-controls/VcsChipArrayInput.vue';
 export { default as VcsTextArea } from './src/components/form-inputs-controls/VcsTextArea.vue';
 export { default as VcsWizard } from './src/components/form-inputs-controls/VcsWizard.vue';
 export { default as VcsWizardStep } from './src/components/form-inputs-controls/VcsWizardStep.vue';
@@ -244,5 +247,9 @@ export {
   VectorStyleMenus,
 } from './src/components/style/VcsVectorStyleComponent.vue';
+export { default as VcsVectorPropertiesComponent } from './src/components/vector-properties/VcsVectorPropertiesComponent.vue';
 // export { default as VcsFileNamePopover } from './src/components/popovers/VcsFileNamePopover.vue';
 // export { default as VcsTexturePopover } from './src/components/popovers/VcsTexturePopover.vue';
+export { default as AbstractConfigEditor } from './src/components/plugins/AbstractConfigEditor.vue';

package/lib/olLib.js CHANGED Viewed

@@ -50,6 +50,7 @@ export {default as ol$ViewHint} from 'ol/ViewHint';
 export {default as ol$ViewProperty} from 'ol/ViewProperty';
 export {binarySearch as ol$array$binarySearch} from 'ol/array';
 export {ascending as ol$array$ascending} from 'ol/array';
+export {descending as ol$array$descending} from 'ol/array';
 export {linearFindNearest as ol$array$linearFindNearest} from 'ol/array';
 export {reverseSubArray as ol$array$reverseSubArray} from 'ol/array';
 export {extend as ol$array$extend} from 'ol/array';
@@ -124,6 +125,8 @@ export {preventDefault as ol$events$Event$preventDefault} from 'ol/events/Event'
 export {default as ol$events$Event} from 'ol/events/Event';
 export {default as ol$events$EventType} from 'ol/events/EventType';
 export {default as ol$events$Key} from 'ol/events/Key';
+export {SnapEventType as ol$events$SnapEvent$SnapEventType} from 'ol/events/SnapEvent';
+export {SnapEvent as ol$events$SnapEvent$SnapEvent} from 'ol/events/SnapEvent';
 export {default as ol$events$Target} from 'ol/events/Target';
 export {all as ol$events$condition$all} from 'ol/events/condition';
 export {altKeyOnly as ol$events$condition$altKeyOnly} from 'ol/events/condition';
@@ -139,6 +142,7 @@ export {singleClick as ol$events$condition$singleClick} from 'ol/events/conditio
 export {doubleClick as ol$events$condition$doubleClick} from 'ol/events/condition';
 export {noModifierKeys as ol$events$condition$noModifierKeys} from 'ol/events/condition';
 export {platformModifierKeyOnly as ol$events$condition$platformModifierKeyOnly} from 'ol/events/condition';
+export {platformModifierKey as ol$events$condition$platformModifierKey} from 'ol/events/condition';
 export {shiftKeyOnly as ol$events$condition$shiftKeyOnly} from 'ol/events/condition';
 export {targetNotEditable as ol$events$condition$targetNotEditable} from 'ol/events/condition';
 export {mouseOnly as ol$events$condition$mouseOnly} from 'ol/events/condition';
@@ -507,6 +511,7 @@ export {register as ol$proj$proj4$register} from 'ol/proj/proj4';
 export {setEPSGLookup as ol$proj$proj4$setEPSGLookup} from 'ol/proj/proj4';
 export {getEPSGLookup as ol$proj$proj4$getEPSGLookup} from 'ol/proj/proj4';
 export {fromEPSGCode as ol$proj$proj4$fromEPSGCode} from 'ol/proj/proj4';
+export {epsgLookupMapTiler as ol$proj$proj4$epsgLookupMapTiler} from 'ol/proj/proj4';
 export {clear as ol$proj$projections$clear} from 'ol/proj/projections';
 export {get as ol$proj$projections$get} from 'ol/proj/projections';
 export {add as ol$proj$projections$add} from 'ol/proj/projections';
@@ -751,6 +756,7 @@ export {expressionToGlsl as ol$style$expressions$expressionToGlsl} from 'ol/styl
 export {uniformNameForVariable as ol$style$expressions$uniformNameForVariable} from 'ol/style/expressions';
 export {PALETTE_TEXTURE_ARRAY as ol$style$expressions$PALETTE_TEXTURE_ARRAY} from 'ol/style/expressions';
 export {toStyle as ol$style$flat$toStyle} from 'ol/style/flat';
+export {createDefaultStyle as ol$style$flat$createDefaultStyle} from 'ol/style/flat';
 export {SymbolType as ol$style$literal$SymbolType} from 'ol/style/literal';
 export {createOrUpdate as ol$tilecoord$createOrUpdate} from 'ol/tilecoord';
 export {getKeyZXY as ol$tilecoord$getKeyZXY} from 'ol/tilecoord';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "5.0.0-rc.28",
+  "version": "5.0.0-rc.30",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -45,8 +45,8 @@
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "~2.4.3",
-    "@vcmap/core": "^5.0.0-rc.36",
-    "ol": "~7.4.0",
+    "@vcmap/core": "^5.0.0-rc.37",
+    "ol": "~7.5.1",
     "vue": "~2.7.3",
     "vuetify": "~2.6.7"
   },

package/plugins/@vcmap/search-nominatim/SearchNominatimEditor.vue ADDED Viewed

@@ -0,0 +1,90 @@
+<template>
+  <AbstractConfigEditor @submit="apply" v-bind="{ ...$attrs, ...$props }">
+    <v-container class="py-0 px-1">
+      <v-row
+        no-gutters
+        v-for="key in ['url', 'state', 'city', 'countryCode']"
+        :key="key"
+      >
+        <v-col>
+          <VcsLabel :html-for="key" dense>
+            {{ $t(`searchNominatim.${key}`) }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <VcsTextField
+            :id="key"
+            clearable
+            dense
+            v-model.trim="localConfig[key]"
+          />
+        </v-col>
+      </v-row>
+      <!-- XXX extent -->
+      <v-row no-gutters>
+        <v-col>
+          <VcsLabel html-for="limit" dense>
+            {{ $t('searchNominatim.limit') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <VcsTextField
+            id="limit"
+            clearable
+            dense
+            type="number"
+            v-model.number="localConfig.limit"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </AbstractConfigEditor>
+</template>
+<script>
+  import { VContainer, VRow, VCol } from 'vuetify/lib';
+  import { VcsLabel, VcsTextField, AbstractConfigEditor } from '@vcmap/ui';
+  import { ref } from 'vue';
+  import Nominatim from './nominatim.js';
+  export default {
+    name: 'SearchNominatimEditor',
+    title: 'Search Nominatim Editor',
+    components: {
+      VContainer,
+      VRow,
+      VCol,
+      AbstractConfigEditor,
+      VcsLabel,
+      VcsTextField,
+    },
+    props: {
+      getConfig: {
+        type: Function,
+        required: true,
+      },
+      setConfig: {
+        type: Function,
+        required: true,
+      },
+    },
+    setup(props) {
+      const localConfig = ref({});
+      const defaultOptions = Nominatim.getDefaultOptions();
+      props.getConfig().then((config) => {
+        localConfig.value = Object.assign(defaultOptions, config);
+      });
+      const apply = async () => {
+        await props.setConfig(localConfig.value);
+      };
+      return {
+        localConfig,
+        apply,
+      };
+    },
+  };
+</script>
+<style scoped></style>

package/plugins/@vcmap/search-nominatim/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { version, name } from './package.json';
 import Nominatim from './nominatim.js';
+import SearchNominatimEditor from './SearchNominatimEditor.vue';
 /**
  * @param {NominatimSearchOptions} config - the configuration of this plugin instance, passed in from the app.
@@ -25,5 +26,41 @@ export default function searchNominatim(config) {
       this._app = vcsUiApp;
       vcsUiApp.search.add(this._instance, name);
     },
+    /**
+     * @returns {NominatimSearchOptions}
+     */
+    toJSON() {
+      return this._instance.toJSON();
+    },
+    getDefaultOptions() {
+      return Nominatim.getDefaultOptions();
+    },
+    getConfigEditors() {
+      return [{ component: SearchNominatimEditor }];
+    },
+    i18n: {
+      de: {
+        searchNominatim: {
+          name: 'Name',
+          url: 'URL zu Nominatim',
+          state: 'Bundesland',
+          city: 'Stadt',
+          countryCode: 'Ländercode',
+          limit: 'Maximale Anzahl Resultate',
+          bbox: 'Bounding Box',
+        },
+      },
+      en: {
+        searchNominatim: {
+          name: 'Name',
+          url: 'URL to Nominatim',
+          state: 'State',
+          city: 'City',
+          countryCode: 'Country Code',
+          limit: 'Maximum number of results',
+          bbox: 'Bounding Box',
+        },
+      },
+    },
   };
 }

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

@@ -54,6 +54,34 @@
               />
             </v-col>
           </v-row>
+          <v-row no-gutters>
+            <v-col class="w-max-half">
+              <VcsLabel html-for="arrayInput" :dense="dense">
+                Array Input
+              </VcsLabel>
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsChipArrayInput
+                id="arrayInput"
+                type="number"
+                :dense="dense"
+                v-model="state.arrayInput"
+                :rules="[arrayTest]"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsChipArrayInput
+                id="arrayInput"
+                :dense="dense"
+                v-model="state.arrayInputString"
+                column
+              />
+            </v-col>
+          </v-row>
           <v-row no-gutters>
             <v-col>
               <VcsTextField
@@ -394,6 +422,7 @@
     VcsRadio,
     VcsFormButton,
     VcsTextField,
+    VcsChipArrayInput,
     VcsFormattedNumber,
     VcsFormSection,
     VcsLabel,
@@ -404,7 +433,12 @@
   } from '@vcmap/ui';
   import { VCol, VContainer, VForm, VRow, VIcon } from 'vuetify/lib';
   import packageJSON from './package.json';
-  import { isValidText, conditionalTest, isValidEmail } from './validation.js';
+  import {
+    isValidText,
+    conditionalTest,
+    arrayTest,
+    isValidEmail,
+  } from './validation.js';
   export default {
     name: 'FormInputsExample',
@@ -418,6 +452,7 @@
       VcsFormSection,
       VcsLabel,
       VcsTextArea,
+      VcsChipArrayInput,
       VForm,
       VRow,
       VCol,
@@ -455,6 +490,7 @@
         isValid: ref(true),
         isValidText,
         conditionalTest,
+        arrayTest,
         isValidEmail,
         newUpdate,
         resetState() {

package/plugins/@vcmap-show-case/form-inputs-example/index.js CHANGED Viewed

@@ -26,6 +26,7 @@ function getLogger() {
  * @typedef FormInputsExampleState
  * @property {string} selected
  * @property {Array<string>} selectedMultiple
+ * @property {Array<number>} arrayInput
  * @property {string} conditionalInput
  * @property {string} initialTextInput
  * @property {number} numberInput
@@ -83,6 +84,8 @@ export default function formInputsExample(config) {
   const pluginState = {
     selected: pluginConfig.selectOptions.value[0],
     selectedMultiple: [],
+    arrayInput: [1, 2, 3],
+    arrayInputString: ['a', 'b', 'c'],
     conditionalInput: '',
     initialTextInput: pluginConfig.initialTextInput.value,
     numberInput: 100.156,

package/plugins/@vcmap-show-case/form-inputs-example/validation.js CHANGED Viewed

@@ -20,6 +20,17 @@ export function conditionalTest(value, condition) {
   }
 }
+/**
+ * @param {number[]} value
+ * @returns {boolean|string}
+ */
+export function arrayTest(value) {
+  if (value > 10) {
+    return 'Input must be lower 10';
+  }
+  return true;
+}
 /**
  * @param {string} value
  * @returns {boolean|string}

package/plugins/@vcmap-show-case/style-input-example/styleExample.vue CHANGED Viewed

@@ -135,7 +135,6 @@
               color: parseColor(image.getStroke().getColor()),
               width: image.getStroke().getWidth(),
             },
-            src: 'mdi-circle-outline',
           };
         } else if (image instanceof Icon) {
           styleOptions.value.image = {

package/plugins/@vcmap-show-case/vector-properties-example/index.js ADDED Viewed

@@ -0,0 +1,40 @@
+import { WindowSlot, createToggleAction, ButtonLocation } from '@vcmap/ui';
+import packageJSON from './package.json';
+import component from './vectorPropertiesExample.vue';
+export default function createVectorPropertiesExamplePlugin() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
+    initialize(vcsApp) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Vector Properties Example',
+        },
+        {
+          id: 'vector-properties-example',
+          state: {
+            headerTitle: 'Vector Properties Example',
+          },
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        vcsApp.windowManager,
+        packageJSON.name,
+      );
+      vcsApp.navbarManager.add(
+        { id: 'vectorProperties', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this.destroy = destroy;
+    },
+  };
+}

package/plugins/@vcmap-show-case/vector-properties-example/package.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/vector-properties-example",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0"
+}

package/plugins/@vcmap-show-case/vector-properties-example/vectorPropertiesExample.vue ADDED Viewed

@@ -0,0 +1,109 @@
+<template>
+  <v-sheet>
+    <v-container>
+      <v-row>
+        <v-col>
+          <VcsList
+            :items="propertiesToSelectFrom"
+            :selectable="true"
+            v-model="propertiesToDisplay"
+            title="Select all"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+    <VcsVectorPropertiesComponent
+      v-model="featureProperties"
+      :value-default="defaultOptions"
+      :show3-d-properties="is3D"
+      :properties="propertiesToDisplay.map((item) => item.name)"
+    />
+  </v-sheet>
+</template>
+<script>
+  import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
+  import { CesiumMap, VectorLayer, VectorProperties } from '@vcmap/core';
+  import { VcsVectorPropertiesComponent, VcsList } from '@vcmap/ui';
+  import { VSheet, VContainer, VRow, VCol } from 'vuetify/lib';
+  import { Feature } from 'ol';
+  import { Polygon } from 'ol/geom.js';
+  export const polygonCoords = [
+    [
+      [13.37302869387225, 52.515969833848686, 34.5146781549614],
+      [13.374380945328324, 52.51418689937603, 33.692166432214975],
+      [13.376569529360477, 52.516925129014055, 34.36842554294618],
+      [13.37302869387225, 52.515969833848686, 34.5146781549614],
+    ],
+  ];
+  export default {
+    name: 'VectorPropertiesExample',
+    components: {
+      VcsVectorPropertiesComponent,
+      VcsList,
+      VSheet,
+      VContainer,
+      VRow,
+      VCol,
+    },
+    setup() {
+      /** @type {import('@vcmap/core').VcsApp} */
+      const vcsApp = inject('vcsApp');
+      const is3D = ref(false);
+      function updateIs3D() {
+        is3D.value = vcsApp.maps.activeMap instanceof CesiumMap;
+      }
+      const mapActivatedListener =
+        vcsApp.maps.mapActivated.addEventListener(updateIs3D);
+      updateIs3D();
+      const feature = new Feature({
+        geometry: new Polygon(polygonCoords),
+      });
+      const layer = new VectorLayer({
+        name: 'vectorPropertiesExampleLayer',
+        projection: {
+          epsg: 'EPSG:4326',
+        },
+      });
+      const featureProperties = ref(
+        layer.vectorProperties.getValuesForFeatures([feature]),
+      );
+      watch(featureProperties, () => {
+        layer.vectorProperties.setValuesForFeatures(featureProperties.value, [
+          feature,
+        ]);
+      });
+      const defaultOptions = VectorProperties.getDefaultOptions();
+      const propertiesToSelectFrom = Object.keys(defaultOptions).map((key) => ({
+        name: key,
+        title: key,
+      }));
+      onMounted(() => {
+        vcsApp.layers.add(layer);
+        layer.addFeatures([feature]);
+        layer.activate();
+      });
+      onUnmounted(() => {
+        layer.deactivate();
+        vcsApp.layers.remove(layer);
+        layer.destroy();
+        mapActivatedListener();
+      });
+      return {
+        featureProperties,
+        defaultOptions,
+        is3D,
+        propertiesToSelectFrom,
+        propertiesToDisplay: ref([...propertiesToSelectFrom]),
+      };
+    },
+  };
+</script>

package/plugins/@vcmap-show-case/window-tester/WindowExample.vue CHANGED Viewed

@@ -35,14 +35,16 @@
       const exampleWindows = [
         {
           id: 'dynamicLeft',
-          headerTitle: 'Example dynamicLeft',
+          state: {
+            headerTitle: ['windowTester.title', '-', 'Example dynamicLeft'],
+          },
           component: WindowExampleToggleChild,
           slot: WindowSlot.DYNAMIC_LEFT,
         },
         {
           id: 'dynamicLeft2',
           state: {
-            headerTitle: 'Example dynamicLeft2',
+            headerTitle: ['windowTester.title', '-', 'Example dynamicLeft2'],
           },
           component: WindowExampleToggleChild,
           slot: WindowSlot.DYNAMIC_LEFT,
@@ -50,7 +52,11 @@
         {
           id: 'dynamicLeft2 large',
           state: {
-            headerTitle: 'Example dynamicLeft2 with 1000px width',
+            headerTitle: [
+              'windowTester.title',
+              '-',
+              'Example dynamicLeft2 with 1000px width',
+            ],
           },
           component: WindowExampleToggleChild,
           slot: WindowSlot.DYNAMIC_LEFT,
@@ -61,7 +67,7 @@
         {
           id: 'dynamicRight',
           state: {
-            headerTitle: 'Example dynamicRight',
+            headerTitle: ['windowTester.title', '-', 'Example dynamicRight'],
           },
           component: WindowExampleContent,
           headerComponent: MyCustomHeader,
@@ -73,7 +79,7 @@
         {
           id: 'dynamicRight2',
           state: {
-            headerTitle: 'Example dynamicRight2',
+            headerTitle: ['windowTester.title', '-', 'Example dynamicRight2'],
           },
           component: WindowExampleContent,
           slot: WindowSlot.DYNAMIC_RIGHT,
@@ -81,7 +87,7 @@
         {
           id: 'static',
           state: {
-            headerTitle: 'Example static',
+            headerTitle: ['windowTester.title', '-', 'Example static'],
             styles: { 'background-color': 'red' },
           },
           component: WindowExampleToggleChild,
@@ -90,7 +96,11 @@
         {
           id: 'static2',
           state: {
-            headerTitle: 'Example static2 With TestClass',
+            headerTitle: [
+              'windowTester.title',
+              '-',
+              'Example static2 With TestClass',
+            ],
             classes: {
               vcsTest: computed(() => {
                 return showTestClass.value;
@@ -103,7 +113,11 @@
         {
           id: 'position1',
           state: {
-            headerTitle: 'Example position1 relative',
+            headerTitle: [
+              'windowTester.title',
+              '-',
+              'Example position1 relative',
+            ],
           },
           component: WindowExampleToggleChild,
           position: {
@@ -117,7 +131,11 @@
           id: 'position2',
           state: {
             hideHeader: false,
-            headerTitle: 'Example position2 absolute',
+            headerTitle: [
+              'windowTester.title',
+              '-',
+              'Example position2 absolute',
+            ],
           },
           component: WindowExampleToggleChild,
           position: {

package/plugins/@vcmap-show-case/window-tester/index.js CHANGED Viewed

@@ -25,7 +25,7 @@ export default async function windowTester() {
         {
           id: 'window-tester',
           state: {
-            headerTitle: 'Window Tester',
+            headerTitle: 'windowTester.title',
           },
           component: windowExample,
           position: {
@@ -58,6 +58,18 @@ export default async function windowTester() {
       );
       this._destroyAction = [destroy, destroyToolboxData];
     },
+    i18n: {
+      de: {
+        windowTester: {
+          title: 'Fenster Tester',
+        },
+      },
+      en: {
+        windowTester: {
+          title: 'Window Tester',
+        },
+      },
+    },
     destroy() {
       if (this._destroyActions) {
         this._destroyActions.forEach((cb) => cb());