@vcmap/ui 5.3.2 → 6.0.0-rc.1

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/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();

package/plugins/@vcmap-show-case/flight-component-example/src/FlightExample.vue

@@ -4,8 +4,8 @@
       v-if="hasFlightInstance"
       :parent-id="$attrs['window-state'].id"
     />
-    <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 type="submit" variant="filled" @click="log">
           Log FlightOptions
         </VcsFormButton>
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import { provide, ref, shallowRef, nextTick } from 'vue';
   import { VcsFlightComponent, VcsFormButton } from '@vcmap/ui';
   import { FlightInstance } from '@vcmap/core';