@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/plugins/@vcmap-show-case/buttons-example/src/ButtonsExample.vue

@@ -1,70 +1,70 @@
 <template>
   <v-card>
-    <v-list-item>
-      <v-list-item-content>
+    <v-list density="compact">
+      <v-list-item density="compact">
         <v-list-item-title class="font-weight-bold">
           DISABLED
         </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action>
-        <v-switch v-model="disabled" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+        <template #append>
+          <v-list-item-action>
+            <v-switch hide-details density="compact" v-model="disabled" />
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold">
           HAS UPDATE
         </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action>
-        <v-switch v-model="update" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+        <template #append>
+          <v-list-item-action>
+            <v-switch hide-details density="compact" v-model="update" />
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold"> ACTIVE </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action>
-        <v-switch v-model="active" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+        <template #append>
+          <v-list-item-action>
+            <v-switch hide-details density="compact" v-model="active" />
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold">
           ACTIVE BACKGROUND
         </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action>
-        <v-switch v-model="background" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+        <template #append>
+          <v-list-item-action>
+            <v-switch hide-details density="compact" v-model="background" />
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold">
           LOADING
         </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action>
-        <v-switch v-model="loading" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+        <template #append>
+          <v-list-item-action>
+            <v-switch hide-details density="compact" v-model="loading" />
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold">
           <!-- eslint-disable-next-line -->
           &ltVcsFormButton /&gt
         </v-list-item-title>
-        <v-row>
+        <v-row class="pa-1">
           <v-col>
             <v-card>
               <v-card-title>Form fields</v-card-title>
               <v-card-actions>
-                <div class="d-flex gap-2">
+                <div class="d-flex gc-2">
                   <VcsFormButton
                     @click="toggle"
                     :disabled="disabled"
@@ -114,16 +114,14 @@
             </v-card>
           </v-col>
         </v-row>
-      </v-list-item-content>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold">
           <!-- eslint-disable-next-line -->
           &ltVcsToolButton/&gt
         </v-list-item-title>
-        <v-row>
+        <v-row class="pa-1">
           <v-col>
             <v-card>
               <v-card-title>Navbar</v-card-title>
@@ -167,16 +165,14 @@
             </v-card>
           </v-col>
         </v-row>
-      </v-list-item-content>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold">
           <!-- eslint-disable-next-line -->
           &ltVcsButton/&gt
         </v-list-item-title>
-        <v-row>
+        <v-row class="pa-1">
           <v-col>
             <v-card>
               <v-card-title>Action Item</v-card-title>
@@ -218,8 +214,8 @@
             </v-card>
           </v-col>
         </v-row>
-      </v-list-item-content>
-    </v-list-item>
+      </v-list-item>
+    </v-list>
   </v-card>
 </template>
 <script>
@@ -232,8 +228,8 @@
   import { ref } from 'vue';
   import {
     VCard,
+    VList,
     VListItem,
-    VListItemContent,
     VListItemTitle,
     VListItemAction,
     VSwitch,
@@ -242,7 +238,7 @@
     VCol,
     VCardTitle,
     VCardActions,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
 
   export default {
     name: 'ButtonsExample',
@@ -252,8 +248,8 @@
       VcsFormButton,
       VcsActionButtonList,
       VCard,
+      VList,
       VListItem,
-      VListItemContent,
       VListItemTitle,
       VListItemAction,
       VSwitch,

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

@@ -24,7 +24,7 @@ export default async function buttonsExample() {
           icon: '$vcsTouch',
         },
         {
-          id: 'buttons-textfields-example',
+          id: 'buttons-buttons-example',
           component: ButtonsExample,
           slot: WindowSlot.DETACHED,
           state: {

package/plugins/@vcmap-show-case/category-tester/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/category-tester",
-  "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "version": "2.0.0",
+  "mapVersion": "^6.0.0"
 }

package/plugins/@vcmap-show-case/category-tester/src/CategoriesExample.vue

@@ -2,17 +2,21 @@
   <div>
     <v-container class="pa-0">
       <v-expansion-panels
-        accordion
+        variant="accordion"
         multiple
         v-if="!componentView && componentIds.length > 0"
         class="rounded-0"
+        v-model="panels"
       >
         <collection-component-provider
-          v-for="componentId in componentIds"
+          v-for="(componentId, index) in componentIds"
           :component-id="componentId"
           :key="componentId"
         >
-          <collection-component @openList="openList" />
+          <collection-component
+            @openList="openList"
+            :open="panels.includes(index)"
+          />
           <v-dialog v-model="optionsDialog" width="300">
             <v-card class="pa-2">
               <CollectionComponentOptions />
@@ -32,8 +36,8 @@
         </v-dialog>
       </collection-component-provider>
     </v-container>
-    <div class="d-flex gap-2 px-2 pt-2 pb-1">
-      <div class="d-flex gap-2 w-full justify-end">
+    <div class="d-flex gc-2 px-2 pt-2 pb-1">
+      <div class="d-flex gc-2 w-full justify-end">
         <VcsFormButton @click="newCategory.dialog = true" variant="filled"
           >Request Category</VcsFormButton
         >
@@ -113,7 +117,7 @@
     VCardTitle,
     VForm,
     VDialog,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import { getObjectFromClassRegistry } from '@vcmap/core';
   import { name as owner } from '../package.json';
   import CollectionComponentOptions from './CollectionComponentOptions.vue';
@@ -151,6 +155,7 @@
       provide('collectionManager', app.categoryManager);
       const componentIds = ref([]);
       const destroyFunctions = [];
+      const panels = ref([]);
 
       const newCategory = ref({
         dialog: false,
@@ -358,6 +363,7 @@
         newCategory,
         newItem,
         optionsDialog,
+        panels,
         addItem,
         async requestCategory() {
           const { collectionComponent, category } =

package/plugins/@vcmap-show-case/category-tester/src/CollectionComponentOptions.vue

@@ -2,7 +2,7 @@
   <v-container class="py-0 px-2">
     <v-row no-gutters>
       <v-col>
-        <VcsLabel html-for="title" dense>
+        <VcsLabel html-for="title">
           {{ $t('categoryTester.title') }}
         </VcsLabel>
       </v-col>
@@ -12,8 +12,8 @@
     </v-row>
     <v-row no-gutters v-for="key in keys" :key="key">
       <v-col>
-        <VcsLabel :html-for="key" dense>
-          {{ $t(`categoryTester.${key}`) }}
+        <VcsLabel :html-for="key">
+          {{ $st(`categoryTester.${key}`) }}
         </VcsLabel>
       </v-col>
       <v-col>
@@ -25,7 +25,7 @@
 
 <script>
   import { computed, inject, isRef } from 'vue';
-  import { VContainer, VRow, VCol } from 'vuetify/lib';
+  import { VContainer, VRow, VCol } from 'vuetify/components';
   import { VcsCheckbox, VcsLabel, VcsTextField } from '@vcmap/ui';
 
   /**

package/plugins/@vcmap-show-case/category-tester/src/FoobarEditor.vue

@@ -7,7 +7,7 @@
     <v-container class="py-0 px-2">
       <v-row no-gutters v-if="!multi">
         <v-col>
-          <VcsLabel html-for="name" required dense>
+          <VcsLabel html-for="name" required>
             {{ $t('categoryTester.fooEditor.name') }}
           </VcsLabel>
         </v-col>
@@ -17,7 +17,7 @@
       </v-row>
       <v-row no-gutters v-if="!multi">
         <v-col>
-          <VcsLabel html-for="title" dense>
+          <VcsLabel html-for="title">
             {{ $t('categoryTester.fooEditor.title') }}
           </VcsLabel>
         </v-col>
@@ -32,7 +32,7 @@
       </v-row>
       <v-row no-gutters>
         <v-col>
-          <VcsLabel html-for="random" dense>
+          <VcsLabel html-for="random">
             {{ $t('categoryTester.fooEditor.random') }}
           </VcsLabel>
         </v-col>
@@ -53,7 +53,7 @@
 
 <script>
   import { onMounted, onUnmounted, ref, watch } from 'vue';
-  import { VContainer, VRow, VCol } from 'vuetify/lib';
+  import { VContainer, VRow, VCol } from 'vuetify/components';
   import { AbstractConfigEditor, VcsLabel, VcsTextField } from '@vcmap/ui';
 
   export default {

package/plugins/@vcmap-show-case/collection-manager-example/src/CollectionManagerExample.vue

@@ -11,7 +11,7 @@
           <v-container>
             <v-row no-gutters>
               <v-col>
-                <VcsLabel html-for="selectInput" dense>
+                <VcsLabel html-for="selectInput">
                   {{ $t('collectionManagerExample.select') }}
                 </VcsLabel>
               </v-col>
@@ -24,7 +24,7 @@
                 />
               </v-col>
             </v-row>
-            <div class="d-flex gap-2 w-full justify-end">
+            <div class="d-flex gc-2 w-full justify-end">
               <VcsFormButton @click="addCollection" variant="filled"
                 >Add Collection</VcsFormButton
               >
@@ -48,7 +48,7 @@
     VcsLabel,
     VcsSelect,
   } from '@vcmap/ui';
-  import { VCol, VContainer, VRow, VCard, VDialog } from 'vuetify/lib';
+  import { VCol, VContainer, VRow, VCard, VDialog } from 'vuetify/components';
   import { Collection } from '@vcmap/core';
   import { name as owner } from '../package.json';
 
@@ -76,6 +76,7 @@
       title: 'Collection Component Standalone',
       collection: new Collection(),
       renamable: true,
+      selectable: true,
     });
 
     for (let i = 0; i <= 12; i++) {
@@ -111,6 +112,8 @@
     return collectionComponent;
   }
 
+  let collectionComponentStandalone;
+
   export default {
     name: 'CollectionManagerExample',
     components: {
@@ -129,7 +132,6 @@
     setup() {
       const app = inject('vcsApp');
       const collectionManager = inject('collectionManager');
-      const componentIds = ref(collectionManager.componentIds);
       const appCollections = [
         'maps',
         'layers',
@@ -142,8 +144,10 @@
       const selected = ref(appCollections[0]);
       const addDialog = ref(false);
 
-      const collectionComponentStandalone =
-        setupCollectionComponentStandalone();
+      if (!collectionComponentStandalone) {
+        collectionComponentStandalone = setupCollectionComponentStandalone();
+      }
+
       // provide for <CollectionComponentStandalone>
       provide('collectionComponent', collectionComponentStandalone);
 
@@ -242,7 +246,7 @@
       ];
 
       return {
-        componentIds,
+        componentIds: collectionManager.componentIds,
         appCollections,
         selected,
         addCollection,

package/plugins/@vcmap-show-case/config-editor/src/ConfigEditor.vue

@@ -3,7 +3,7 @@
     <VcsTextArea v-model="configString" v-if="!loading" />
     <v-progress-circular v-else />
 
-    <div class="d-flex gap-2 px-1 pt-2 pb-1 justify-end">
+    <div class="d-flex gc-2 px-1 pt-2 pb-1 justify-end">
       <VcsFormButton variant="filled" @click="replaceModule">
         Apply
       </VcsFormButton>
@@ -16,7 +16,7 @@
   import { ref, inject } from 'vue';
   import { VcsTextArea, VcsFormButton } from '@vcmap/ui';
   import { VcsModule } from '@vcmap/core';
-  import { VContainer, VProgressCircular } from 'vuetify/lib';
+  import { VContainer, VProgressCircular } from 'vuetify/components';
 
   const moduleId = 'foo';
 

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/extent-example/README.md

@@ -1,3 +1,3 @@
 # Extent Example
 
-This is a show-case plugin demonstrating the usage of the [VcsExtent](../../../src/components/form-inputs-controls/VcsExtent.vue) component.
+This is a show-case plugin demonstrating the usage of the [VcsExtentEditor](../../../src/components/extent/VcsExtentEditor.vue) component.

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

@@ -1,15 +1,18 @@
-import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
-import { Extent, VectorLayer } from '@vcmap/core';
-import { ref } from 'vue';
+import {
+  ButtonLocation,
+  createToggleAction,
+  WindowSlot,
+  VcsExtentEditor,
+} from '@vcmap/ui';
+import { Extent } from '@vcmap/core';
+import { reactive } from 'vue';
 import packageJSON from '../package.json';
-import ExtentExample from './ExtentExample.vue';
 
 /**
  * @returns {VcsPlugin}
  */
 export default async function extentExample() {
-  const sampleLayerOptions = VectorLayer.getDefaultOptions();
-  sampleLayerOptions.extent = new Extent().toJSON();
+  const modelValue = reactive(new Extent().toJSON());
 
   return {
     get name() {
@@ -30,14 +33,14 @@ export default async function extentExample() {
         },
         {
           id: 'extent-example',
-          component: ExtentExample,
+          component: VcsExtentEditor,
           slot: WindowSlot.DYNAMIC_LEFT,
           state: {
             headerTitle: 'Extent Example',
             headerIcon: '$vcsBoundingBox',
           },
           props: {
-            value: ref(sampleLayerOptions),
+            modelValue,
           },
         },
         app.windowManager,
@@ -46,18 +49,6 @@ export default async function extentExample() {
       app.navbarManager.add({ action }, packageJSON.name, ButtonLocation.TOOL);
       this._destroyAction = destroy;
     },
-    i18n: {
-      de: {
-        extentExample: {
-          title: 'Ausdehnung',
-        },
-      },
-      en: {
-        extentExample: {
-          title: 'Extent',
-        },
-      },
-    },
     destroy() {
       if (this._destroyAction) {
         this._destroyAction();