@vcmap/ui 6.0.0-rc.7 → 6.0.0-rc.9

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-c3b6c9b3.js";
+export * from "./vuetify-ac50bfc8.js";

package/index.d.ts

@@ -294,6 +294,8 @@ export { getProvidedFlightInstance, setupFlightAnchorEditingListener } from "./s
 export type * from "./src/components/flight/composables.d.ts";
 export { default as VcsFeatureEditingWindow, EditorTransformationIcons, getAllowedEditorTransformationModes } from "./src/components/vector-properties/VcsFeatureEditingWindow.vue";
 export type * from "./src/components/vector-properties/VcsFeatureEditingWindow.vue.d.ts";
+export { LegendType, StyleRowType } from "./src/legend/legendHelper.js";
+export type * from "./src/legend/legendHelper.d.ts";
 
 declare module 'vue' {
   interface ComponentCustomProperties {

package/index.js

@@ -315,3 +315,4 @@ export * from './src/application/attributionsHelper.js';
 export * from './src/components/attrsHelpers.js';
 export * from './src/components/modelHelper.js';
 export * from './src/components/composables.js';
+export { LegendType, StyleRowType } from './src/legend/legendHelper.js';

package/lib/olLib.js

@@ -63,6 +63,7 @@ export {isSorted as ol$array$isSorted} from 'ol/array';
 export {assert as ol$asserts$assert} from 'ol/asserts';
 export {createExtent as ol$centerconstraint$createExtent} from 'ol/centerconstraint';
 export {none as ol$centerconstraint$none} from 'ol/centerconstraint';
+export {NO_COLOR as ol$color$NO_COLOR} from 'ol/color';
 export {asString as ol$color$asString} from 'ol/color';
 export {withAlpha as ol$color$withAlpha} from 'ol/color';
 export {rgbaToLcha as ol$color$rgbaToLcha} from 'ol/color';
@@ -488,6 +489,7 @@ export {default as ol$layer$Base} from 'ol/layer/Base';
 export {default as ol$layer$BaseImage} from 'ol/layer/BaseImage';
 export {default as ol$layer$BaseTile} from 'ol/layer/BaseTile';
 export {default as ol$layer$BaseVector} from 'ol/layer/BaseVector';
+export {default as ol$layer$Flow} from 'ol/layer/Flow';
 export {default as ol$layer$Graticule} from 'ol/layer/Graticule';
 export {GroupEvent as ol$layer$Group$GroupEvent} from 'ol/layer/Group';
 export {default as ol$layer$Group} from 'ol/layer/Group';
@@ -679,6 +681,10 @@ export {defaultOrder as ol$renderer$vector$defaultOrder} from 'ol/renderer/vecto
 export {getSquaredTolerance as ol$renderer$vector$getSquaredTolerance} from 'ol/renderer/vector';
 export {getTolerance as ol$renderer$vector$getTolerance} from 'ol/renderer/vector';
 export {renderFeature as ol$renderer$vector$renderFeature} from 'ol/renderer/vector';
+export {U as ol$renderer$webgl$FlowLayer$U} from 'ol/renderer/webgl/FlowLayer';
+export {A as ol$renderer$webgl$FlowLayer$A} from 'ol/renderer/webgl/FlowLayer';
+export {V as ol$renderer$webgl$FlowLayer$V} from 'ol/renderer/webgl/FlowLayer';
+export {default as ol$renderer$webgl$FlowLayer} from 'ol/renderer/webgl/FlowLayer';
 export {default as ol$renderer$webgl$Layer} from 'ol/renderer/webgl/Layer';
 export {default as ol$renderer$webgl$PointsLayer} from 'ol/renderer/webgl/PointsLayer';
 export {Uniforms as ol$renderer$webgl$TileLayer$Uniforms} from 'ol/renderer/webgl/TileLayer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.0.0-rc.7",
+  "version": "6.0.0-rc.9",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -57,10 +57,10 @@
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^11.0.2",
-    "@vcmap/core": "^6.0.0-rc.7",
-    "ol": "^10.0.0",
+    "@vcmap/core": "^6.0.0-rc.10",
+    "ol": "^10.2.0",
     "vue": "~3.4.38",
-    "vuetify": "^3.7.1"
+    "vuetify": "^3.7.2"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.17",

package/plugins/@vcmap-show-case/list-example/src/ListExample.vue

@@ -146,10 +146,13 @@
       @item-moved="move"
       @item-renamed="({ item, newTitle }) => (item.title = newTitle)"
     >
-      <template #[`item.prepend-title`]="{ index }" v-if="prependIndex">
+      <template #[`item.prepend`]="{ index }" v-if="prependIndex">
         {{ index }}
       </template>
-      <template #[`item.append-title`]="{ index }" v-if="appendIndex">
+      <template #[`item.title`]="{ index }">
+        {{ index }}
+      </template>
+      <template #[`item.append`]="{ index }" v-if="appendIndex">
         {{ index }}
       </template>
     </vcs-list>

package/plugins/@vcmap-show-case/plugin-editors/src/PluginEditors.vue

@@ -39,10 +39,9 @@
                   parentId: name,
                   slot: WindowSlot.DYNAMIC_CHILD,
                   props: {
-                    getConfig: () =>
-                      Promise.resolve(
-                        vcsApp.plugins.getSerializedByKey(plugin.name),
-                      ),
+                    getConfig: () => {
+                      return vcsApp.plugins.getSerializedByKey(plugin.name);
+                    },
                     setConfig(config) {
                       if (config) {
                         vcsApp.notifier.add({

package/plugins/package.json

@@ -1,11 +1,27 @@
 {
   "dependencies": {
     "@vcmap/print": "https://github.com/virtualcitySYSTEMS/map-print.git#main",
-    "@vcmap/multi-view": "https://github.com/virtualcitySYSTEMS/map-multi-view.git",
-    "@vcmap/transparent-terrain": "https://github.com/virtualcitySYSTEMS/map-transparent-terrain.git",
     "@vcmap/walk": "https://github.com/virtualcitySYSTEMS/map-walk.git#main",
     "@vcmap/clipping-tool": "https://github.com/virtualcitySYSTEMS/map-clipping-tool.git#main",
+    "@vcmap/transparent-terrain": "https://github.com/virtualcitySYSTEMS/map-transparent-terrain.git#main",
+    "@vcmap/height-profile": "https://github.com/virtualcitySYSTEMS/map-heightprofile.git#main",
+    "@vcmap/flight": "https://github.com/virtualcitySYSTEMS/map-flight.git#main",
+    "@vcmap/swipe-tool": "https://github.com/virtualcitySYSTEMS/map-swipe-tool.git#main",
+    "@vcmap/export": "https://github.com/virtualcitySYSTEMS/map-export.git#main",
     "@vcmap/viewshed": "https://github.com/virtualcitySYSTEMS/map-viewshed.git#main",
-    "@vcmap/link-button": "https://github.com/virtualcitySYSTEMS/map-link-button.git#main"
+    "@vcmap/measurement": "https://github.com/virtualcitySYSTEMS/map-measurement.git#main",
+    "@vcmap/multi-view": "https://github.com/virtualcitySYSTEMS/map-multi-view.git#main",
+    "@vcmap/draw": "https://github.com/virtualcitySYSTEMS/map-draw.git#main",
+    "@vcmap/shadow": "https://github.com/virtualcitySYSTEMS/map-shadow.git#main",
+    "@vcmap/search-wfs": "https://github.com/virtualcitySYSTEMS/map-search-wfs.git#main",
+    "@vcmap/search-esri": "https://github.com/virtualcitySYSTEMS/map-search-esri.git#main",
+    "@vcmap/search-coordinate": "https://github.com/virtualcitySYSTEMS/map-search-coordinate.git#main",
+    "@vcmap/link-button": "https://github.com/virtualcitySYSTEMS/map-link-button.git#main",
+    "@vcmap/cesium-filters": "https://github.com/virtualcitySYSTEMS/map-cesium-filters.git#main",
+    "@vcmap/search-nominatim": "https://github.com/virtualcitySYSTEMS/map-search-nominatim.git#main",
+    "@vcmap/create-link": "https://github.com/virtualcitySYSTEMS/map-create-link.git#main"
+  },
+  "optionalDependencies": {
+    "@vcmap/planning": "^6.0.0-rc.1"
   }
 }

package/src/actions/StyleSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet v-if="items" class="pt-1 pb-0 px-0">
+  <v-sheet v-if="items" class="pt-1 pb-0 px-0 style-selector">
     <v-list>
       <v-list-item
         v-for="(item, index) in items"

package/src/application/VcsApp.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="fill-height pa-0" absolute fluid>
+  <v-container class="fill-height pa-0 vcs-app" absolute fluid>
     <VcsSplashScreen
       v-if="splashScreen"
       :options="splashScreen"
@@ -248,6 +248,33 @@
       }
     };
 
+    let currentEntryLength = entries.length;
+    const watchEntries = watch(entries, (newValue) => {
+      if (
+        app.uiConfig.config.openLegendOnAdd &&
+        newValue.length > currentEntryLength &&
+        !app.windowManager.has('legend')
+      ) {
+        app.windowManager.add(
+          {
+            id: 'legend',
+            component: VcsLegend,
+            state: {
+              headerTitle: 'legend.title',
+              headerIcon: '$vcsLegend',
+              infoUrl: app.getHelpUrlCallback(
+                '/components/contentspace.html#id_legend',
+              ),
+            },
+            slot: WindowSlot.DYNAMIC_RIGHT,
+            props: { entries },
+          },
+          vcsAppSymbol,
+        );
+      }
+      currentEntryLength = newValue.length;
+    });
+
     /**
      * Handles legend button and window.
      * Adds a button, if legend definitions are available or removes legend otherwise.
@@ -284,6 +311,7 @@
     ];
 
     return () => {
+      watchEntries();
       app.navbarManager.remove('legend');
       app.windowManager.remove('legend');
       destroy();

package/src/application/VcsApp.vue.d.ts

@@ -300,6 +300,7 @@ declare const _default: import("vue").DefineComponent<{
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
             readonly medium?: {
                 readonly sse?: number | undefined;
@@ -309,6 +310,7 @@ declare const _default: import("vue").DefineComponent<{
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
             readonly high?: {
                 readonly sse?: number | undefined;
@@ -318,12 +320,17 @@ declare const _default: import("vue").DefineComponent<{
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
         } | undefined;
         /**
-         * - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+         * - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
          */
         readonly vuetifyTheme?: any;
+        /**
+         * - open the legend window, if new layer has a config
+         */
+        readonly openLegendOnAdd?: boolean | undefined;
     };
     showFooter: import("vue").ComputedRef<boolean>;
     footerHeight: import("vue").ComputedRef<number>;

package/src/application/VcsAppWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app class="vcs-app-wrapper">
     <VcsApp :app-id="appId" />
   </v-app>
 </template>

package/src/application/VcsAttributions.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-attributions">
     <v-list v-if="entries.length" class="px-2">
       <v-list-item
         v-for="{ key, title, attributions } in entries"

package/src/application/VcsAttributionsFooter.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="d-flex align-center justify-end overflow-hidden">
+  <div
+    class="d-flex align-center justify-end overflow-hidden vcs-attributions-footer"
+  >
     <div class="attribution-container">
       <span
         v-for="attribution in mergedAttributions"

package/src/application/VcsContainer.vue.d.ts

@@ -220,6 +220,7 @@ declare const _default: import("vue").DefineComponent<{
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
             readonly medium?: {
                 readonly sse?: number | undefined;
@@ -229,6 +230,7 @@ declare const _default: import("vue").DefineComponent<{
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
             readonly high?: {
                 readonly sse?: number | undefined;
@@ -238,12 +240,17 @@ declare const _default: import("vue").DefineComponent<{
                 readonly fogScreenSpaceErrorFactor?: number | undefined;
                 readonly resolutionScale?: number | undefined;
                 readonly layerSSEFactor?: number | undefined;
+                readonly msaa?: 1 | 2 | 4 | 8 | undefined;
             } | undefined;
         } | undefined;
         /**
-         * - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+         * - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
          */
         readonly vuetifyTheme?: any;
+        /**
+         * - open the legend window, if new layer has a config
+         */
+        readonly openLegendOnAdd?: boolean | undefined;
     };
     xs: import("vue").Ref<boolean>;
     mobileLogo: import("vue").ComputedRef<any>;

package/src/application/VcsMainMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="vcs-main-map">
     <VcsMap :map-id="mapId" />
     <MapNavigation v-if="showMapNavigation" />
   </div>

package/src/application/VcsMap.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    class="vcs-map"
     :id="mapId"
     @click.right.stop="
       (e) => {

package/src/application/VcsNavbar.vue

@@ -3,7 +3,7 @@
     absolute
     :density="density"
     elevation="0"
-    class="px-4"
+    class="px-4 vcs-navbar"
     :height="toolbarHeight"
     :style="xs ? { bottom: 0 } : { top: 0 }"
   >

package/src/application/VcsPositionDisplay.vue

@@ -1,7 +1,7 @@
 <template>
   <span
-    class="d-flex gc-2 px-1 h-100 align-center"
-    :class="{ 'vcs-position-display': positionDisplayAction.active }"
+    class="d-flex gc-2 px-1 h-100 align-center vcs-position-display"
+    :class="{ active: positionDisplayAction.active }"
   >
     <VcsButton
       :tooltip="positionDisplayAction.title"
@@ -52,7 +52,7 @@
 </template>
 
 <style lang="scss" scoped>
-  .vcs-position-display {
+  .active {
     background-color: rgb(var(--v-theme-primary));
     span {
       color: rgb(var(--v-theme-on-primary));

package/src/application/VcsSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="px-1 py-0">
+  <v-container class="px-1 py-0 vcs-settings">
     <v-row no-gutters>
       <v-col>
         <VcsLabel html-for="settingsLanguageSelect">

package/src/application/VcsSplashScreen.vue

@@ -7,6 +7,7 @@
     :max-width="position.maxWidth"
     :max-height="position.maxHeight"
     persistent
+    class="vcs-splash-screen"
   >
     <v-card>
       <v-card-text>

package/src/application/VcsTextPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container class="vcs-text-page">
     <VcsMarkdown :content="$st(content)"></VcsMarkdown>
   </v-container>
 </template>

package/src/application/VcsTextPageFooter.vue

@@ -1,5 +1,7 @@
 <template v-if="textPage.title">
-  <span class="d-inline-block text-truncate mr-1 flex-shrink-0">
+  <span
+    class="d-inline-block text-truncate mr-1 flex-shrink-0 vcs-text-page-footer"
+  >
     <span v-if="textPage.url" class="text-page-footer">
       <a :href="$st(textPage.url)" target="_blank"
         >{{ $st(textPage.title) }} <span></span>

package/src/components/buttons/VcsActionButtonList.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="actions.length > 0" :class="classes" class="gc-2">
+  <div
+    v-if="actions.length > 0"
+    :class="classes"
+    class="gc-2 vcs-action-button-list"
+  >
     <template v-if="buttons.length > 0">
       <component
         :is="button"

package/src/components/buttons/VcsButton.vue

@@ -5,7 +5,7 @@
     variant="text"
     :color="appliedColor"
     :disabled="disabled"
-    class="vcsButton"
+    class="vcs-button"
     elevation="0"
     density="compact"
     size="small"
@@ -24,7 +24,7 @@
       <VcsBadge
         v-if="hasUpdate"
         :color="'bg-warning'"
-        class="position-absolute"
+        class="position-absolute badge"
       />
       <slot name="default" v-bind="scope ?? {}" />
     </template>
@@ -41,7 +41,7 @@
   }
   .v-btn {
     padding: 0px;
-    &.vcsButton {
+    &.vcs-button {
       &:hover {
         color: rgb(var(--v-theme-primary-lighten-1)) !important;
       }
@@ -65,7 +65,7 @@
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
   import { useFontSize, useIconSize } from '../../vuePlugins/vuetify.js';
-  import { useForwardSlots } from '../composables.js';
+  import { getForwardSlots } from '../composables.js';
 
   /**
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn}.
@@ -124,7 +124,7 @@
           return null;
         }
       });
-      const forwardSlots = useForwardSlots(slots, ['default']);
+      const forwardSlots = getForwardSlots(slots, ['default']);
       const hasDefaultSlot = computed(() => {
         return !!slots?.default;
       });

package/src/components/buttons/VcsButton.vue.d.ts

@@ -28,7 +28,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     hasDefaultSlot: import("vue").ComputedRef<boolean>;
     appliedColor: import("vue").ComputedRef<string | null>;
     iconSize: import("vue").ComputedRef<number>;

package/src/components/buttons/VcsFormButton.vue

@@ -5,7 +5,7 @@
     color="primary"
     :min-width="itemHeight * 1.5"
     :height="itemHeight"
-    class="vcsFormButton"
+    class="vcs-form-button"
     :slim="false"
     v-bind="{ ...$attrs }"
   >
@@ -22,7 +22,7 @@
       <VcsBadge
         v-if="hasUpdate"
         :color="'bg-warning'"
-        class="position-absolute"
+        class="position-absolute badge"
       />
       <slot name="default" v-bind="scope ?? {}" />
     </template>
@@ -68,7 +68,7 @@
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
   import { useFontSize, useIconSize } from '../../vuePlugins/vuetify.js';
-  import { useForwardSlots } from '../composables.js';
+  import { getForwardSlots } from '../composables.js';
 
   /**
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn}.
@@ -121,7 +121,7 @@
       const hasDefaultSlot = computed(() => {
         return !!slots?.default;
       });
-      const forwardSlots = useForwardSlots(slots, ['default']);
+      const forwardSlots = getForwardSlots(slots, ['default']);
       const fontSize = useFontSize();
       const iconSize = useIconSize();
       const itemHeight = computed(() => {

package/src/components/buttons/VcsFormButton.vue.d.ts

@@ -21,7 +21,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     buttonVariant: import("vue").ComputedRef<string>;
     hasDefaultSlot: import("vue").ComputedRef<boolean>;
     itemHeight: import("vue").ComputedRef<number>;

package/src/components/buttons/VcsToolButton.vue

@@ -4,7 +4,7 @@
     :variant="buttonVariant"
     :height="itemHeight + 2"
     :min-width="itemHeight + itemHeight / 3"
-    class="vcsToolButton"
+    class="vcs-tool-button"
     :disabled="disabled"
     :class="{
       'vcs-background': background,
@@ -26,7 +26,7 @@
       <VcsBadge
         v-if="hasUpdate"
         :color="'bg-warning'"
-        class="position-absolute"
+        class="position-absolute badge"
       />
       <slot name="default" v-bind="scope ?? {}" />
     </template>
@@ -69,7 +69,7 @@
   import { computed } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
-  import { useForwardSlots } from '../composables.js';
+  import { getForwardSlots } from '../composables.js';
   import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
@@ -140,7 +140,7 @@
       const hasDefaultSlot = computed(() => {
         return !!slots?.default;
       });
-      const forwardSlots = useForwardSlots(slots, ['default']);
+      const forwardSlots = getForwardSlots(slots, ['default']);
       const buttonVariant = computed(() => {
         if (props.active && !props.disabled) {
           return 'flat';

package/src/components/buttons/VcsToolButton.vue.d.ts

@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
     itemHeight: import("vue").ComputedRef<number>;
     iconSize: import("vue").ComputedRef<number>;
     appliedColor: import("vue").ComputedRef<string | null>;
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     buttonVariant: import("vue").ComputedRef<"flat" | "text">;
     hasDefaultSlot: import("vue").ComputedRef<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/src/components/composables.d.ts

@@ -9,9 +9,9 @@ export function usePadding(attrs: Object): import("vue").ComputedRef<boolean>;
  * returns only the slotNames which are not excluded as a computed.
  * @param {import("vue").Slots} slots
  * @param {Array<string>} exclude
- * @returns {import("vue").ComputedRef<Array<string>>}
+ * @returns {Array<string>}
  */
-export function useForwardSlots(slots: import("vue").Slots, exclude?: Array<string>): import("vue").ComputedRef<Array<string>>;
+export function getForwardSlots(slots: import("vue").Slots, exclude?: Array<string>): Array<string>;
 /**
  * @param {import("vue").ComputedRef<HTMLElement|undefined>} parent
  * @param {import("vue").ComputedRef<string|undefined>} tooltip

package/src/components/composables.js

@@ -22,12 +22,10 @@ export function usePadding(attrs) {
  * returns only the slotNames which are not excluded as a computed.
  * @param {import("vue").Slots} slots
  * @param {Array<string>} exclude
- * @returns {import("vue").ComputedRef<Array<string>>}
+ * @returns {Array<string>}
  */
-export function useForwardSlots(slots, exclude = []) {
-  return computed(() => {
-    return Object.keys(slots).filter((slotName) => !exclude.includes(slotName));
-  });
+export function getForwardSlots(slots, exclude = []) {
+  return Object.keys(slots).filter((slotName) => !exclude.includes(slotName));
 }
 
 let intersectionObserver = null;

package/src/components/extent/VcsExtent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="py-0 px-1">
+  <v-container class="py-0 px-1 vcs-extent">
     <v-row no-gutters v-if="modelValue.projection">
       <v-col :cols="firstCols">
         <VcsLabel :html-for="`${cid}-projection`">

package/src/components/extent/VcsExtentEditor.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsFormSection
+    class="vcs-extent-editor"
     :heading="heading"
     :header-actions="actions"
     :action-button-list-overflow-count="2"

package/src/components/flight/VcsFlightAnchorsComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsFormSection
+    class="vcs-flight-anchors-component"
     :heading="title"
     :expandable="expandable"
     start-open

package/src/components/flight/VcsFlightComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-flight-component">
     <VcsFormSection
       :heading="heading"
       :expandable="expandable"

package/src/components/flight/VcsFlightEditor.vue

@@ -1,5 +1,6 @@
 <template>
   <AbstractConfigEditor
+    class="vcs-flight-editor"
     @submit="apply"
     @cancel="cancel"
     @reset="reset"

package/src/components/flight/VcsFlightPlayer.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="py-0 px-1">
+  <v-container class="py-0 px-1 vcs-flight-player">
     <VcsLabel>{{ $t('flight.player') }}</VcsLabel>
     <VcsSlider
       v-if="clock"