@vcmap/ui 5.3.3 → 6.0.0-rc.2

package/plugins/@vcmap-show-case/textfields-example/src/TextfieldsExample.vue

@@ -85,7 +85,13 @@
   </v-sheet>
 </template>
 <script>
-  import { VSheet, VContainer, VRow, VCol, VTextField } from 'vuetify/lib';
+  import {
+    VSheet,
+    VContainer,
+    VRow,
+    VCol,
+    VTextField,
+  } from 'vuetify/components';
 
   export default {
     name: 'TextfieldsExample',

package/plugins/@vcmap-show-case/theme-changer/src/ThemeChangerComponent.vue

@@ -72,14 +72,14 @@
     VCardText,
     VChip,
     VListItem,
-    VListItemContent,
+    // VListItemContent,
     VListItemTitle,
     VListItemAction,
     VAvatar,
     VIcon,
     VDivider,
     VSwitch,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
 
   export default {
     name: 'ThemeChanger',
@@ -88,7 +88,7 @@
       VCardText,
       VChip,
       VListItem,
-      VListItemContent,
+      // VListItemContent,
       VListItemTitle,
       VListItemAction,
       VAvatar,

package/plugins/@vcmap-show-case/theme-changer/src/index.js

@@ -1,6 +1,6 @@
 import { ref } from 'vue';
 import { check } from '@vcsuite/check';
-import { ButtonLocation, createToggleAction, vuetify } from '@vcmap/ui';
+import { ButtonLocation, createToggleAction, createVcsThemes } from '@vcmap/ui';
 import ThemeChangerComponent from './ThemeChangerComponent.vue';
 import packageJSON from '../package.json';
 import defaultConfig from '../config.json';
@@ -31,7 +31,7 @@ export default async function themeChanger(config) {
   /** @type {VcMapTheme} */
   const vcsTheme = {
     name: 'VCS Theme',
-    ...vuetify.userPreset.theme.themes,
+    ...createVcsThemes(),
   };
   const customThemes = config.themes || defaultConfig.themes;
   const availableThemes = [vcsTheme, ...customThemes];

package/plugins/@vcmap-show-case/toolbox-example/src/TriStateExampleWindow.vue

@@ -9,7 +9,7 @@
 
 <style scoped></style>
 <script>
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
 
   export default {
     name: 'WindowExampleContent',

package/plugins/@vcmap-show-case/vector-properties-example/src/VectorPropertiesExample.vue

@@ -6,7 +6,7 @@
           <VcsList
             :items="propertiesToSelectFrom"
             :selectable="true"
-            v-model="propertiesToDisplay"
+            v-model="propertiesSelected"
             title="Select all"
           />
         </v-col>
@@ -29,13 +29,20 @@
           />
         </v-col>
       </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsFormButton @click="() => console.log({ ...featureProperties })"
+            >Log VectorProperties</VcsFormButton
+          >
+        </v-col>
+      </v-row>
     </v-container>
     <VcsVectorPropertiesComponent
       v-model="featureProperties"
       :value-default="defaultOptions"
       :show3-d-properties="is3D"
-      :properties="propertiesToDisplay.map((item) => item.name)"
-      :hide-dividers="hideDividers"
+      :properties="properties"
+      :show-dividers="!hideDividers"
       :expandable="expandable"
       :show-reset="showReset"
     />
@@ -43,14 +50,24 @@
 </template>
 
 <script>
-  import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
+  import {
+    computed,
+    inject,
+    onMounted,
+    onUnmounted,
+    reactive,
+    ref,
+    shallowRef,
+    watch,
+  } from 'vue';
   import { CesiumMap, VectorLayer, VectorProperties } from '@vcmap/core';
   import {
     VcsVectorPropertiesComponent,
     VcsList,
     VcsCheckbox,
+    VcsFormButton,
   } from '@vcmap/ui';
-  import { VSheet, VContainer, VRow, VCol } from 'vuetify/lib';
+  import { VSheet, VContainer, VRow, VCol } from 'vuetify/components';
   import { Feature } from 'ol';
   import { Polygon } from 'ol/geom.js';
 
@@ -69,6 +86,7 @@
       VcsVectorPropertiesComponent,
       VcsList,
       VcsCheckbox,
+      VcsFormButton,
       VSheet,
       VContainer,
       VRow,
@@ -96,9 +114,10 @@
         },
       });
 
-      const featureProperties = ref(
+      const featureProperties = shallowRef(
         layer.vectorProperties.getValuesForFeatures([feature]),
       );
+      featureProperties.value.scaleByDistance = [0, 1, 100, 0];
       watch(featureProperties, () => {
         layer.vectorProperties.setValuesForFeatures(featureProperties.value, [
           feature,
@@ -106,10 +125,13 @@
       });
 
       const defaultOptions = VectorProperties.getDefaultOptions();
-      const propertiesToSelectFrom = Object.keys(defaultOptions).map((key) => ({
-        name: key,
-        title: key,
-      }));
+      const propertiesToSelectFrom = reactive(
+        Object.keys(defaultOptions).map((key) => ({
+          name: key,
+          title: key,
+        })),
+      );
+      const propertiesSelected = shallowRef([...propertiesToSelectFrom]);
 
       onMounted(() => {
         vcsApp.layers.add(layer);
@@ -128,7 +150,10 @@
         defaultOptions,
         is3D,
         propertiesToSelectFrom,
-        propertiesToDisplay: ref([...propertiesToSelectFrom]),
+        propertiesSelected,
+        properties: computed(() =>
+          propertiesSelected.value.map(({ name }) => name),
+        ),
         hideDividers: ref(false),
         expandable: ref(false),
         showReset: ref(true),

package/plugins/@vcmap-show-case/viewpoint-component-example/src/ViewpointExample.vue

@@ -1,11 +1,11 @@
 <template>
   <v-sheet>
     <VcsViewpointComponent v-model="viewpointOptions" />
-    <div class="d-flex gap-2 px-2 pt-2 pb-1">
-      <div class="d-flex gap-2 w-full justify-start">
+    <div class="d-flex gc-2 px-2 pt-2 pb-1">
+      <div class="d-flex gc-2 w-full justify-start">
         <VcsFormButton icon="$vcsReturn" @click="reset" />
       </div>
-      <div class="d-flex gap-2 w-full justify-end">
+      <div class="d-flex gc-2 w-full justify-end">
         <VcsFormButton type="submit" variant="filled" @click="log">
           Log ViewpointOptions
         </VcsFormButton>
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import { inject, ref } from 'vue';
   import { VcsViewpointComponent, VcsFormButton } from '@vcmap/ui';
   import { Viewpoint } from '@vcmap/core';

package/plugins/@vcmap-show-case/window-tester/src/BrokenWindow.vue

@@ -0,0 +1,17 @@
+<script setup>
+  import { ref } from 'vue';
+  import { VSheet, VCard } from 'vuetify/components';
+
+  const prefix = undefined;
+  const model = ref('foo');
+</script>
+
+<template>
+  <v-sheet>
+    <v-card class="pa-2" elevation="2">
+      <input v-model="model" type="text" :prefix="prefix" />
+    </v-card>
+  </v-sheet>
+</template>
+
+<style scoped lang="scss"></style>

package/plugins/@vcmap-show-case/window-tester/src/EmptyComponent.vue

@@ -9,7 +9,7 @@
   }
 </style>
 <script>
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
 
   export default {
     name: 'EmptyComponent',

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

@@ -25,6 +25,7 @@
   import MyCustomHeader from './MyCustomHeader.vue';
   import EmptyComponent from './EmptyComponent.vue';
   import { name as owner } from '../package.json';
+  import Broken from './BrokenWindow.vue';
 
   const showTestClass = ref(false);
 
@@ -177,6 +178,15 @@
           component: WindowExampleContent,
           slot: WindowSlot.DYNAMIC_CHILD,
         },
+        {
+          id: 'broken',
+          state: {
+            headerTitle: 'This window is broken',
+            headerIcon: 'mdi-human-child',
+          },
+          component: Broken,
+          slot: WindowSlot.DETACHED,
+        },
       ];
 
       onUnmounted(() => {

package/plugins/@vcmap-show-case/window-tester/src/WindowExampleContent.vue

@@ -6,7 +6,7 @@
 
 <style scoped></style>
 <script>
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
 
   export default {
     name: 'WindowExampleContent',

package/plugins/@vcmap-show-case/window-tester/src/WindowExampleToggleChild.vue

@@ -8,7 +8,7 @@
 
 <style scoped></style>
 <script>
-  import { VContainer } from 'vuetify/lib';
+  import { VContainer } from 'vuetify/components';
   import { VcsFormButton, WindowSlot } from '@vcmap/ui';
   import { inject } from 'vue';
   import WindowExampleContent from './WindowExampleContent.vue';

package/plugins/@vcmap-show-case/wizard-example/src/WizardExample.vue

@@ -1,24 +1,20 @@
 <template>
   <VcsWizard v-model.number="step">
     <VcsWizardStep
-      step="1"
-      :complete="step > 1"
+      step="0"
+      :complete="step > 0"
       help-text="1. this is the help text"
       heading="This is the first step"
       v-model.number="step"
     >
-      <template #content>
-        <!-- px-2 because does not contain input components -->
-        <v-container class="px-2 py-0">
-          <div>This is the content of the first step.</div>
-          <VcsFormButton @click="increaseStep()" class="my-2">
-            Next
-          </VcsFormButton>
-        </v-container>
+      <!-- px-2 because does not contain input components -->
+      <div>This is the content of the first step.</div>
+      <template #actions="{ next }">
+        <VcsFormButton @click="next">Next</VcsFormButton>
       </template>
     </VcsWizardStep>
     <VcsWizardStep
-      step="2"
+      step="1"
       editable
       :header-actions="actions.second"
       heading="This is the second step"
@@ -33,35 +29,29 @@
           <li>test</li>
         </ol>
       </template>
-      <template #content>
-        <v-container class="px-1 py-0">
-          <v-form ref="form" v-model="formValid" lazy-validation>
-            <VcsSelect
-              :items="['this', 'is', 'a', 'test']"
-              v-model="selection"
-              placeholder="Select"
-              :rules="[
-                (v) => (!!v && v !== 'this') || 'Please select a valid option.',
-              ]"
-            />
-            <VcsFormButton @click="decreaseStep()"> Back </VcsFormButton>
-          </v-form>
-        </v-container>
-      </template>
-    </VcsWizardStep>
-    <VcsWizardStep step="3" v-model.number="step">
-      <template #header>
-        <div class="d-flex flex-grow-1 flex-row-reverse">
-          <VcsFormButton
-            :disabled="!selection || !formValid"
-            @click="finish()"
-            variant="filled"
-          >
-            Finish
-          </VcsFormButton>
-        </div>
+      <v-form ref="formRef" v-model="formValid" lazy-validation>
+        <VcsSelect
+          :items="['this', 'is', 'a', 'test']"
+          v-model="selection"
+          placeholder="Select"
+          :rules="[
+            (v) => (!!v && v !== 'this') || 'Please select a valid option.',
+          ]"
+        />
+      </v-form>
+      <template #actions="{ prev }">
+        <VcsFormButton @click="prev">Back</VcsFormButton>
       </template>
     </VcsWizardStep>
+    <div class="d-flex flex-grow-1 flex-row-reverse pa-2">
+      <VcsFormButton
+        :disabled="!selection || !formValid"
+        @click="finish()"
+        variant="filled"
+      >
+        Finish
+      </VcsFormButton>
+    </div>
   </VcsWizard>
 </template>
 
@@ -72,7 +62,7 @@
     VcsFormButton,
     VcsSelect,
   } from '@vcmap/ui';
-  import { VForm, VContainer } from 'vuetify/lib';
+  import { VForm } from 'vuetify/components';
   import { ref } from 'vue';
 
   /** Component to showcase the VcsWizard and VcsWizardStep. */
@@ -84,12 +74,11 @@
       VcsFormButton,
       VcsSelect,
       VForm,
-      VContainer,
     },
     setup() {
-      const step = ref(1);
-      const selection = ref();
-      const form = ref();
+      const step = ref(0);
+      const selection = ref(undefined);
+      const formRef = ref(null);
       const formValid = ref(false);
       const actions = {
         second: [
@@ -103,22 +92,19 @@
           },
         ],
       };
+
+      function finish() {
+        step.value = 0;
+        formRef.value?.resetValidation();
+      }
+
       return {
         step,
-        increaseStep() {
-          step.value += 1;
-        },
-        decreaseStep() {
-          step.value -= 1;
-        },
         selection,
         actions,
         formValid,
-        form,
-        finish() {
-          step.value = 1;
-          form.value.reset();
-        },
+        formRef,
+        finish,
       };
     },
   };

package/src/actions/StyleSelector.vue

@@ -9,38 +9,16 @@
         <v-list-item-title
           :class="{ 'primary--text': item.value === currentStyleName }"
         >
-          {{ $t(item.text) }}
+          {{ $st(item.text) }}
         </v-list-item-title>
       </v-list-item>
     </v-list>
-    <v-list v-if="currentStyleLegend.length > 0">
-      <v-list-item
-        v-for="(entry, index) in currentStyleLegend"
-        :key="`style-legend-${index}`"
-        dense
-      >
-        <v-list-item-icon>
-          <v-chip :color="entry.color" />
-        </v-list-item-icon>
-        <v-list-item-content>
-          {{ $t(entry.title) }}
-        </v-list-item-content>
-      </v-list-item>
-    </v-list>
   </v-sheet>
 </template>
 
 <script>
   import { computed, inject, onUnmounted, ref } from 'vue';
-  import {
-    VChip,
-    VList,
-    VListItem,
-    VListItemContent,
-    VListItemIcon,
-    VListItemTitle,
-    VSheet,
-  } from 'vuetify/lib';
+  import { VList, VListItem, VListItemTitle, VSheet } from 'vuetify/components';
 
   /**
    * @description Modal listing available styles.
@@ -54,10 +32,7 @@
       VSheet,
       VList,
       VListItem,
-      VListItemIcon,
       VListItemTitle,
-      VChip,
-      VListItemContent,
     },
     props: {
       availableStyles: {
@@ -75,16 +50,12 @@
       /** @type {import("@vcmap/core").FeatureLayer} */
       const layer = app.layers.getByKey(props.layerName);
       const currentStyleName = ref(layer.style.name || layer.defaultStyle.name);
-      const currentStyleLegend = ref([]);
       const defaultStyle = layer.defaultStyle.name;
 
-      function setStyle(styleItem) {
+      function setStyle() {
         currentStyleName.value = layer.style.name;
-        if (styleItem.legend) {
-          currentStyleLegend.value = styleItem.legend;
-        }
       }
-      setStyle(layer.style);
+      setStyle();
       // TODO error handling if layer is missing or not a feature layer
       const styleChangedListener =
         layer.styleChanged.addEventListener(setStyle);
@@ -126,7 +97,6 @@
 
       return {
         currentStyleName,
-        currentStyleLegend,
         items,
         select,
       };

package/src/actions/StyleSelector.vue.d.ts

@@ -9,10 +9,12 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     currentStyleName: import("vue").Ref<string>;
-    currentStyleLegend: import("vue").Ref<never[]>;
-    items: import("vue").ComputedRef<any>;
+    items: import("vue").ComputedRef<{
+        text: unknown;
+        value: unknown;
+    }[]>;
     select: (styleName: any) => void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     availableStyles: {
         type: ArrayConstructor;
         default: () => never[];
@@ -23,5 +25,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     availableStyles: unknown[];
-}>;
+}, {}>;
 export default _default;

package/src/actions/actionHelper.js

@@ -74,13 +74,13 @@ export function createMapButtonAction(actionOptions, mapName, maps) {
   check(maps, MapCollection);
 
   const active = maps.activeMap?.name === mapName;
-  const action = {
+  const action = reactive({
     ...actionOptions,
     active,
     callback() {
       maps.setActiveMap(mapName);
     },
-  };
+  });
   const destroyListener = maps.mapActivated.addEventListener((map) => {
     action.active = map?.name === mapName;
   });
@@ -111,7 +111,7 @@ export function createToggleAction(
   check(windowComponent, { id: String });
   check(owner, [String, vcsAppSymbol]);
 
-  const action = {
+  const action = reactive({
     ...actionOptions,
     active: windowManager.has(windowComponent.id),
     callback() {
@@ -122,7 +122,7 @@ export function createToggleAction(
       }
       return null;
     },
-  };
+  });
 
   const listeners = [
     windowManager.added.addEventListener(({ id }) => {
@@ -277,7 +277,7 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
     }
   };
 
-  const action = {
+  const action = reactive({
     ...actionOptions,
     active: false,
     callback(event) {
@@ -306,7 +306,7 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
       }
       return null;
     },
-  };
+  });
 
   const listeners = [
     app.windowManager.removed.addEventListener(({ id: windowId }) => {

package/src/actions/extentActions.d.ts

@@ -29,10 +29,9 @@ export function createExtentFeatureAction(app: import("@src/vcsUiApp.js").defaul
 /**
  * @param {import("@src/vcsUiApp.js").default} app
  * @param {import("vue").ComputedRef<import("@vcmap/core").Extent>|import("vue").Ref<import("@vcmap/core").Extent>|import("vue").WritableComputedRef<import("@vcmap/core").Extent>} extent
- * @param {boolean} disabled
  * @returns {{ actions: Array<import("./actionHelper.js").VcsAction>, destroy: () => void, layer: import("@vcmap/core").VectorLayer, featureId: string }}
  */
-export function setupExtentComponentActions(app: import("@src/vcsUiApp.js").default, extent: import("vue").ComputedRef<import("@vcmap/core").Extent> | import("vue").Ref<import("@vcmap/core").Extent> | import("vue").WritableComputedRef<import("@vcmap/core").Extent>, disabled: boolean): {
+export function setupExtentComponentActions(app: import("@src/vcsUiApp.js").default, extent: import("vue").ComputedRef<import("@vcmap/core").Extent> | import("vue").Ref<import("@vcmap/core").Extent> | import("vue").WritableComputedRef<import("@vcmap/core").Extent>): {
     actions: Array<import("./actionHelper.js").VcsAction>;
     destroy: () => void;
     layer: import("@vcmap/core").VectorLayer;

package/src/actions/extentActions.js

@@ -11,6 +11,7 @@ import {
   startEditGeometrySession,
   VectorLayer,
   Viewpoint,
+  wgs84Projection,
 } from '@vcmap/core';
 import { reactive, ref, watch, nextTick } from 'vue';
 import { Feature } from 'ol';
@@ -270,7 +271,14 @@ function setupVertexAction(
  * @param {string} featureId
  */
 function syncExtentFeature(extent, layer, featureId) {
-  const extentGeometry = fromExtent(extent.value.extent);
+  const extentCoords = [...extent.value.extent];
+  // clamp coords for visualization, because at the pole Cesium has issues
+  if (extent.value.projection.epsg === wgs84Projection.epsg) {
+    extentCoords[1] = Math.max(-89, extentCoords[1]);
+    extentCoords[3] = Math.min(89, extentCoords[3]);
+  }
+
+  const extentGeometry = fromExtent(extentCoords);
   extentGeometry.transform(
     extent.value.projection.proj,
     mercatorProjection.proj,
@@ -280,18 +288,21 @@ function syncExtentFeature(extent, layer, featureId) {
     c.push(0);
   });
   coordinates[0].pop();
-  const geometry = new Polygon(coordinates, 'XYZ');
-  geometry.set('_vcsGeomType', GeometryType.BBox);
-  layer.getFeatureById(featureId).setGeometry(geometry);
+  if (layer.getFeatureById(featureId).getGeometry()) {
+    layer.getFeatureById(featureId).getGeometry().setCoordinates(coordinates);
+  } else {
+    const geometry = new Polygon(coordinates, 'XYZ');
+    geometry.set('_vcsGeomType', GeometryType.BBox);
+    layer.getFeatureById(featureId).setGeometry(geometry);
+  }
 }
 
 /**
  * @param {import("@src/vcsUiApp.js").default} app
  * @param {import("vue").ComputedRef<import("@vcmap/core").Extent>|import("vue").Ref<import("@vcmap/core").Extent>|import("vue").WritableComputedRef<import("@vcmap/core").Extent>} extent
- * @param {boolean} disabled
  * @returns {{ actions: Array<import("./actionHelper.js").VcsAction>, destroy: () => void, layer: import("@vcmap/core").VectorLayer, featureId: string }}
  */
-export function setupExtentComponentActions(app, extent, disabled) {
+export function setupExtentComponentActions(app, extent) {
   const layer = new VectorLayer({
     projection: mercatorProjection.toJSON(),
     zIndex: maxZIndex - 1,
@@ -320,9 +331,9 @@ export function setupExtentComponentActions(app, extent, disabled) {
   );
 
   const { action: showExtentAction, destroy: destroyShowExtent } =
-    createLayerToggleAction(layer, disabled);
+    createLayerToggleAction(layer, false);
   const { action: createExtentAction, destroy: destroyCreateExtent } =
-    createExtentFeatureAction(app, layer, extent, featureId, disabled);
+    createExtentFeatureAction(app, layer, extent, featureId, false);
   const zoomToExtentAction = createZoomToExtentAction(app, extent);
   zoomToExtentAction.title = 'components.extent.zoom';
   const { action: translateAction, destroy: destroyTranslate } =