@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.3

package/src/components/vector-properties/VcsVectorPropertiesComponent.vue.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="@vcmap-cesium/engine" />
+/// <reference types="@vcmap/core/dist/cesium.js" />
 export const genericVectorProperties: string[];
 export const pointVectorProperties: string[];
 export const nonPointVectorProperties: string[];
@@ -8,7 +10,7 @@ export const dimensionsUpperCase: string[];
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;
     };
     valueDefault: {
         type: ObjectConstructor;
@@ -39,6 +41,183 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
+    localValue: import("vue").Ref<{
+        readonly propertyChanged: {
+            readonly numberOfListeners: number;
+            addEventListener: (listener: (event: import("@vcmap/core/dist/src/layer/vectorProperties.js", { with: { "resolution-mode": "import" } }).PropertyChangedKey[]) => void | Promise<void>) => () => void;
+            removeEventListener: (listener: (event: import("@vcmap/core/dist/src/layer/vectorProperties.js", { with: { "resolution-mode": "import" } }).PropertyChangedKey[]) => void | Promise<void>) => boolean;
+            raiseEvent: (event: import("@vcmap/core/dist/src/layer/vectorProperties.js", { with: { "resolution-mode": "import" } }).PropertyChangedKey[]) => void;
+            awaitRaisedEvent: (event: import("@vcmap/core/dist/src/layer/vectorProperties.js", { with: { "resolution-mode": "import" } }).PropertyChangedKey[]) => Promise<void>;
+            destroy: () => void;
+        };
+        altitudeMode: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).HeightReference;
+        getAltitudeMode: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).HeightReference;
+        allowPicking: boolean;
+        getAllowPicking: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => boolean;
+        classificationType: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).ClassificationType | undefined;
+        getClassificationType: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).ClassificationType | undefined;
+        scaleByDistance: {
+            near: number;
+            nearValue: number;
+            far: number;
+            farValue: number;
+            clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).NearFarScalar | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).NearFarScalar;
+            equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).NearFarScalar | undefined) => boolean;
+        } | undefined;
+        getScaleByDistance: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).NearFarScalar | undefined;
+        eyeOffset: {
+            x: number;
+            y: number;
+            z: number;
+            clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+            equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+            equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+            toString: () => string;
+        } | undefined;
+        getEyeOffset: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined;
+        heightAboveGround: number;
+        getHeightAboveGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        skirt: number;
+        getSkirt: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        groundLevel: number | undefined;
+        getGroundLevel: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number | undefined;
+        extrudedHeight: number;
+        getExtrudedHeight: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        storeysAboveGround: number;
+        getStoreysAboveGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        storeysBelowGround: number;
+        getStoreysBelowGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        storeyHeightsAboveGround: number[];
+        getStoreyHeightsAboveGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number[];
+        storeyHeightsBelowGround: number[];
+        getStoreyHeightsBelowGround: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number[];
+        modelUrl: string | undefined;
+        getModelUrl: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => string | undefined;
+        modelScaleX: number;
+        getModelScaleX: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        modelScaleY: number;
+        getModelScaleY: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        modelScaleZ: number;
+        getModelScaleZ: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        modelHeading: number;
+        getModelHeading: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        modelPitch: number;
+        getModelPitch: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        modelRoll: number;
+        getModelRoll: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => number;
+        modelOptions: Record<string, unknown> | undefined;
+        getModelOptions: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => Record<string, unknown>;
+        modelAutoScale: boolean;
+        getModelAutoScale: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => boolean;
+        baseUrl: string | undefined;
+        getBaseUrl: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => string | undefined;
+        primitiveOptions: {
+            type: import("@vcmap/core", { with: { "resolution-mode": "import" } }).PrimitiveOptionsType;
+            geometryOptions: {
+                length: number;
+                topRadius: number;
+                bottomRadius: number;
+                slices?: number | undefined;
+                vertexFormat?: {
+                    position: boolean;
+                    normal: boolean;
+                    st: boolean;
+                    bitangent: boolean;
+                    tangent: boolean;
+                    color: boolean;
+                } | undefined;
+            } | {
+                radius?: number | undefined;
+                stackPartitions?: number | undefined;
+                slicePartitions?: number | undefined;
+                vertexFormat?: {
+                    position: boolean;
+                    normal: boolean;
+                    st: boolean;
+                    bitangent: boolean;
+                    tangent: boolean;
+                    color: boolean;
+                } | undefined;
+            } | {
+                radii?: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+                    equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+                    equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+                    toString: () => string;
+                } | undefined;
+                innerRadii?: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+                    equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+                    equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+                    toString: () => string;
+                } | undefined;
+                minimumClock?: number | undefined;
+                maximumClock?: number | undefined;
+                minimumCone?: number | undefined;
+                maximumCone?: number | undefined;
+                stackPartitions?: number | undefined;
+                slicePartitions?: number | undefined;
+                vertexFormat?: {
+                    position: boolean;
+                    normal: boolean;
+                    st: boolean;
+                    bitangent: boolean;
+                    tangent: boolean;
+                    color: boolean;
+                } | undefined;
+            } | {
+                minimum: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+                    equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+                    equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+                    toString: () => string;
+                };
+                maximum: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    clone: (result?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3;
+                    equals: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined) => boolean;
+                    equalsEpsilon: (right?: import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).Cartesian3 | undefined, relativeEpsilon?: number | undefined, absoluteEpsilon?: number | undefined) => boolean;
+                    toString: () => string;
+                };
+                vertexFormat?: {
+                    position: boolean;
+                    normal: boolean;
+                    st: boolean;
+                    bitangent: boolean;
+                    tangent: boolean;
+                    color: boolean;
+                } | undefined;
+            } | undefined;
+            depthFailColor?: string | number[] | {
+                setTransform: (transform?: DOMMatrix2DInit | undefined) => void;
+            } | {
+                addColorStop: (offset: number, color: string) => void;
+            } | undefined;
+            offset?: number[] | undefined;
+            additionalOptions?: Record<string, unknown> | undefined;
+        } | undefined;
+        getPrimitiveOptions: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesPrimitiveOptions<import("@vcmap/core", { with: { "resolution-mode": "import" } }).PrimitiveOptionsType> | undefined;
+        getPrimitive: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesPrimitive | null;
+        getModel: (feature: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>) => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesModelOptions | null;
+        setVcsMeta: (vcsMeta: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VcsMeta) => void;
+        setValues: (options: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions) => void;
+        getValues: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;
+        getValuesForFeatures: (features: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>[]) => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;
+        setValuesForFeatures: (options: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions, features: import("ol/Feature.js", { with: { "resolution-mode": "import" } }).default<import("ol/geom.js", { with: { "resolution-mode": "import" } }).Geometry>[]) => void;
+        getVcsMeta: (defaultOptions?: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions | undefined) => Omit<import("@vcmap/core", { with: { "resolution-mode": "import" } }).VcsMeta, "version">;
+        destroy: () => void;
+    }>;
     headerActions: import("vue").ComputedRef<{
         name: string;
         title: string;
@@ -46,38 +225,28 @@ declare const _default: import("vue").DefineComponent<{
         callback: () => void;
     }[]>;
     visibleProperties: import("vue").ComputedRef<Set<unknown>>;
-    altitudeMode: import("vue").WritableComputedRef<any>;
     availableAltitudeModes: import("vue").ComputedRef<{
         value: string;
-        text: string;
+        title: string;
     }[]>;
-    heightAboveGround: import("vue").WritableComputedRef<any>;
-    allowPicking: import("vue").WritableComputedRef<any>;
-    classificationType: import("vue").WritableComputedRef<any>;
-    scaleByDistance: import("vue").WritableComputedRef<any>[];
+    availableClassificationTypes: {
+        value: string;
+        title: string;
+    }[];
+    classificationType: import("vue").WritableComputedRef<"none" | import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).ClassificationType.CESIUM_3D_TILE | import("@vcmap-cesium/engine", { with: { "resolution-mode": "import" } }).ClassificationType.BOTH | undefined>;
     hasScaleByDistance: import("vue").WritableComputedRef<boolean>;
     scaleByDistanceDefault: number[];
-    eyeOffset: import("vue").WritableComputedRef<any>[];
     hasEyeOffset: import("vue").WritableComputedRef<boolean>;
     eyeOffsetDefault: number[];
-    groundLevel: import("vue").WritableComputedRef<any>;
-    extrudedHeight: import("vue").WritableComputedRef<any>;
-    skirt: import("vue").WritableComputedRef<any>;
-    storeysAboveGround: import("vue").WritableComputedRef<any>;
-    storeysBelowGround: import("vue").WritableComputedRef<any>;
     storeyHeights: import("vue").ComputedRef<{}>;
-    modelUrl: import("vue").WritableComputedRef<any>;
     modelScale: import("vue").ComputedRef<{}>;
-    modelHeading: import("vue").WritableComputedRef<any>;
-    modelPitch: import("vue").WritableComputedRef<any>;
-    modelRoll: import("vue").WritableComputedRef<any>;
-    baseUrl: import("vue").WritableComputedRef<any>;
-    reset: () => void;
     dimensionsUpperCase: string[];
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {
+    computed: typeof import("@vue/reactivity").computed;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ObjectConstructor;
-        default: () => void;
+        default: () => import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;
     };
     valueDefault: {
         type: ObjectConstructor;
@@ -107,7 +276,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     modelValue: Record<string, any>;
     properties: unknown[];
     expandable: boolean;

package/src/components/viewpoint/VcsViewpointComponent.vue

@@ -176,11 +176,12 @@
     onUnmounted,
     reactive,
     ref,
+    toRaw,
     watch,
   } from 'vue';
   import { VSheet, VContainer, VRow, VCol } from 'vuetify/components';
   import { CesiumMap, ObliqueMap, OpenlayersMap, Viewpoint } from '@vcmap/core';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
@@ -188,6 +189,20 @@
   import VcsSlider from '../form-inputs-controls/VcsSlider.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
 
+  /**
+   * Updates the localValue ref by keeping name and properties
+   * @param {import("vue").Ref<import("vue").UnwrapRef<import("@vcmap/core").ViewpointOptions>>} localValue
+   * @param {import("@vcmap/core").Viewpoint} viewpoint
+   */
+  function updateLocalValueFromViewpoint(localValue, viewpoint) {
+    const options = viewpoint.toJSON();
+    options.name = localValue.value.name;
+    if (localValue.value.properties) {
+      options.properties = toRaw(localValue.value.properties);
+    }
+    localValue.value = options;
+  }
+
   /**
    * Set up post render handler, if action is active.
    * If action is inactive, destroy post render handler to allow manual editing.
@@ -213,9 +228,7 @@
           ) {
             return;
           }
-          const options = viewpoint.toJSON();
-          options.name = localValue.value.name;
-          localValue.value = options;
+          updateLocalValueFromViewpoint(localValue, viewpoint);
           cachedViewpoint = viewpoint;
         },
       );
@@ -416,10 +429,10 @@
         title: 'components.viewpoint.updateFromView',
         async callback() {
           if (app.maps.activeMap) {
-            const viewpoint = await app.maps.activeMap.getViewpoint();
-            const options = viewpoint.toJSON();
-            options.name = localValue.value.name;
-            localValue.value = options;
+            updateLocalValueFromViewpoint(
+              localValue,
+              await app.maps.activeMap.getViewpoint(),
+            );
           }
         },
       };

package/src/components/viewpoint/VcsViewpointEditor.vue

@@ -7,6 +7,7 @@
     v-bind="{ ...$attrs, ...$props }"
   >
     <VcsViewpointComponent
+      v-bind="$attrs"
       v-model="localConfig"
       hide-name
       :name-rules="nameRules"

package/src/contentTree/contentTreeItem.d.ts

@@ -272,11 +272,11 @@ declare class ContentTreeItem {
     /**
      * @param {(string|HTMLCanvasElement|HTMLImageElement)=} icon
      */
-    set icon(icon: string | HTMLCanvasElement | HTMLImageElement | undefined);
+    set icon(icon: string | HTMLImageElement | HTMLCanvasElement | undefined);
     /**
      * @type {string|HTMLCanvasElement|HTMLImageElement|undefined}
      */
-    get icon(): string | HTMLCanvasElement | HTMLImageElement | undefined;
+    get icon(): string | HTMLImageElement | HTMLCanvasElement | undefined;
     /**
      * @param {number} weight
      */

package/src/contentTree/contentTreeItem.js

@@ -1,5 +1,5 @@
 import { ref, reactive, computed, shallowRef } from 'vue';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, ofEnum, oneOf } from '@vcsuite/check';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import { ClassRegistry, VcsEvent } from '@vcmap/core';
 import { createLinkAction } from '../actions/actionHelper.js';
@@ -258,7 +258,7 @@ class ContentTreeItem {
    * @param {StateActionState} state
    */
   set state(state) {
-    check(state, Object.values(StateActionState));
+    check(state, ofEnum(StateActionState));
 
     if (this._state.value !== state) {
       this._state.value = state;
@@ -277,7 +277,7 @@ class ContentTreeItem {
    * @param {string} url
    */
   set infoUrl(url) {
-    checkMaybe(url, String);
+    check(url, maybe(String));
 
     if (this._infoUrl !== url) {
       this._infoUrl = url;
@@ -309,7 +309,7 @@ class ContentTreeItem {
    * @param {string|undefined} title
    */
   set title(title) {
-    checkMaybe(title, String);
+    check(title, maybe(String));
 
     this._title.value = title;
   }
@@ -325,7 +325,7 @@ class ContentTreeItem {
    * @param {string|undefined} tooltip
    */
   set tooltip(tooltip) {
-    checkMaybe(tooltip, String);
+    check(tooltip, maybe(String));
 
     this._tooltip.value = tooltip;
   }
@@ -341,7 +341,7 @@ class ContentTreeItem {
    * @param {(string|HTMLCanvasElement|HTMLImageElement)=} icon
    */
   set icon(icon) {
-    checkMaybe(icon, [String, HTMLElement]);
+    check(icon, maybe(oneOf(String, HTMLElement)));
 
     this._icon.value = icon;
   }
@@ -411,7 +411,7 @@ class ContentTreeItem {
    */
   addAction(action, weight = 11) {
     check(action.name, String);
-    checkMaybe(weight, Number);
+    check(weight, maybe(Number));
 
     const index = this._getActionIndex(action.name);
     if (index > -1) {

package/src/featureInfo/featureInfo.js

@@ -21,7 +21,7 @@ import {
   Entity,
 } from '@vcmap-cesium/engine';
 import { Feature } from 'ol';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf } from '@vcsuite/check';
 
 import { vcsAppSymbol } from '../pluginHelper.js';
 import FeatureInfoInteraction from './featureInfoInteraction.js';
@@ -390,15 +390,13 @@ class FeatureInfo extends Collection {
    * @returns {Promise<void>}
    */
   async selectFeature(feature, position, windowPosition, featureInfoView) {
-    check(feature, [
-      Feature,
-      Entity,
-      Cesium3DTileFeature,
-      Cesium3DTilePointFeature,
-    ]);
-    checkMaybe(position, [Number]);
-    checkMaybe(windowPosition, [Number]);
-    checkMaybe(featureInfoView, AbstractFeatureInfoView);
+    check(
+      feature,
+      oneOf(Feature, Entity, Cesium3DTileFeature, Cesium3DTilePointFeature),
+    );
+    check(position, maybe([Number]));
+    check(windowPosition, maybe([Number]));
+    check(featureInfoView, maybe(AbstractFeatureInfoView));
 
     const usedFeatureInfoView =
       feature[featureInfoViewSymbol] ??

package/src/init.d.ts

@@ -18,41 +18,8 @@ export function initAppFromModule(mountTarget: string, configUrl?: string | unde
  * @returns {Promise<import("@src/vcsUiApp.js").default>}
  */
 export function initAppFromAppConfig(mountTarget: string, appUrl: string): Promise<import("@src/vcsUiApp.js").default>;
-export namespace VcsUiAppConfigPattern {
-    let id: (StringConstructor | undefined)[];
-    let layers: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let maps: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let styles: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let viewpoints: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let startingViewpointName: (StringConstructor | undefined)[];
-    let startingMapName: (StringConstructor | undefined)[];
-    let projection: (ObjectConstructor | undefined)[];
-    let categories: ({
-        name: StringConstructor;
-        items: ObjectConstructor[];
-    }[] | undefined)[];
-    let obliqueCollections: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let plugins: (ObjectConstructor[] | undefined)[];
-    let contentTree: (ObjectConstructor[] | undefined)[];
-    let uiConfig: (ObjectConstructor[] | undefined)[];
-    let featureInfo: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let i18n: (ObjectConstructor[] | undefined)[];
-}
+/**
+ * Base pattern to check VcsUiAppConfig
+ * @type {Record<string, import("@vcsuite/check").Pattern}
+ */
+export const VcsUiAppConfigPattern: Record<string, import("@vcsuite/check").Pattern>;

package/src/init.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import { check, checkMaybe, is } from '@vcsuite/check';
+import { check, is, maybe, oneOf, optional } from '@vcsuite/check';
 import { VcsModule } from '@vcmap/core';
 import VcsAppComponentWrapper from './application/VcsAppWrapper.vue';
 import VcsUiApp from './vcsUiApp.js';
@@ -15,23 +15,24 @@ const VcsObjectPattern = {
 
 /**
  * Base pattern to check VcsUiAppConfig
+ * @type {Record<string, import("@vcsuite/check").Pattern}
  */
 export const VcsUiAppConfigPattern = {
-  id: [undefined, String],
-  layers: [undefined, [VcsObjectPattern]],
-  maps: [undefined, [VcsObjectPattern]],
-  styles: [undefined, [VcsObjectPattern]],
-  viewpoints: [undefined, [VcsObjectPattern]],
-  startingViewpointName: [undefined, String],
-  startingMapName: [undefined, String],
-  projection: [undefined, Object],
-  categories: [undefined, [{ name: String, items: [Object] }]],
-  obliqueCollections: [undefined, [VcsObjectPattern]],
-  plugins: [undefined, [Object]],
-  contentTree: [undefined, [Object]],
-  uiConfig: [undefined, [Object]],
-  featureInfo: [undefined, [VcsObjectPattern]],
-  i18n: [undefined, [Object]],
+  id: optional(String),
+  layers: optional([VcsObjectPattern]),
+  maps: optional([VcsObjectPattern]),
+  styles: optional([VcsObjectPattern]),
+  viewpoints: optional([VcsObjectPattern]),
+  startingViewpointName: optional(String),
+  startingMapName: optional(String),
+  projection: optional(Object),
+  categories: optional([{ name: String, items: [Object] }]),
+  obliqueCollections: optional([VcsObjectPattern]),
+  plugins: optional([Object]),
+  contentTree: optional([Object]),
+  uiConfig: optional([Object]),
+  featureInfo: optional([VcsObjectPattern]),
+  i18n: optional([Object]),
 };
 
 /**
@@ -62,7 +63,7 @@ export default async function initApp(mountTarget) {
  */
 export async function initAppFromModule(mountTarget, configUrl) {
   check(mountTarget, String);
-  checkMaybe(configUrl, String);
+  check(configUrl, maybe(String));
 
   const app = await initApp(mountTarget);
   if (configUrl) {
@@ -90,7 +91,7 @@ export async function initAppFromAppConfig(mountTarget, appUrl) {
    */
   const appConfig = await fetch(appUrl).then((response) => response.json());
 
-  check(appConfig.modules, [String, Object]);
+  check(appConfig.modules, [oneOf(String, Object)]);
 
   const modules = await Promise.all(
     appConfig.modules.map(async (c) => {

package/src/legend/StyleLegendItem.vue

@@ -1,17 +1,13 @@
 <template>
-  <v-list density="compact">
-    <v-row>
+  <v-list>
+    <v-row no-gutters>
       <v-col
         v-for="(row, idx) in item.rows"
         :key="idx"
         :cols="cols"
         :class="{ 'w-100': item.colNr === 1, 'w-50': item.colNr !== 1 }"
       >
-        <v-list-item
-          density="compact"
-          class="pa-0"
-          :class="determineInnerPadding(idx)"
-        >
+        <v-list-item class="pa-0" :class="determineInnerPadding(idx)">
           <template #prepend>
             <v-img
               v-if="
@@ -20,7 +16,6 @@
               "
               width="32"
               height="24"
-              cover
               :src="getImageSrcFromShape(row.image)"
             />
             <svg
@@ -93,7 +88,7 @@
           </template>
 
           <v-list-item-title
-            class="pt-2"
+            class="pa-2"
             :title="$st(row.tooltip || row.title)"
           >
             {{ $st(row.title) }}