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

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/manager/window/windowManager.d.ts

@@ -14,7 +14,7 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
 /**
  * @typedef {{
  *   id?: string,
- *   parendId?: string,
+ *   parentId?: string,
  *   component: import("vue").Component<T, unknown, unknown>,
  *   headerComponent?: import("vue").Component<T, unknown, unknown>,
  *   state? : Partial<WindowState>,
@@ -53,7 +53,7 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
 /**
  * @typedef {{
  *   id: string,
- *   parendId?: string,
+ *   parentId?: string,
  *   component: import("vue").Component<T, unknown, unknown>,
  *   headerComponent?: import("vue").Component<T, unknown, unknown>,
  *   state : Partial<WindowState>,
@@ -131,7 +131,7 @@ export namespace WindowPositions {
 export default WindowManager;
 export type WindowComponentOptions<T extends Object = Object> = {
     id?: string;
-    parendId?: string;
+    parentId?: string;
     component: import("vue").Component<T, unknown, unknown>;
     headerComponent?: import("vue").Component<T, unknown, unknown>;
     state?: Partial<WindowState>;
@@ -188,7 +188,7 @@ export type WindowState = {
 };
 export type WindowComponent<T extends Object = Object> = {
     id: string;
-    parendId?: string;
+    parentId?: string;
     component: import("vue").Component<T, unknown, unknown>;
     headerComponent?: import("vue").Component<T, unknown, unknown>;
     state: Partial<WindowState>;

package/src/manager/window/windowManager.js

@@ -104,7 +104,7 @@ export function isSlotPosition(windowPosition) {
 /**
  * @typedef {{
  *   id?: string,
- *   parendId?: string,
+ *   parentId?: string,
  *   component: import("vue").Component<T, unknown, unknown>,
  *   headerComponent?: import("vue").Component<T, unknown, unknown>,
  *   state? : Partial<WindowState>,
@@ -145,7 +145,7 @@ export function isSlotPosition(windowPosition) {
 /**
  * @typedef {{
  *   id: string,
- *   parendId?: string,
+ *   parentId?: string,
  *   component: import("vue").Component<T, unknown, unknown>,
  *   headerComponent?: import("vue").Component<T, unknown, unknown>,
  *   state : Partial<WindowState>,

package/src/navigation/MapNavigation.vue

@@ -335,9 +335,12 @@
 <style lang="scss" scoped>
   .nav-container {
     position: absolute;
-    right: 2rem;
-    bottom: 1rem;
+    right: 26px;
+    // right: 26px --> the 2rem were 26px in the old map, now 32px ?Important?
+    bottom: 13px;
+    // bottom: 13px --> the 1rem were 13px in the old map, now 16px ?Important?
     width: unset;
+    padding: 12px;
     &.mobile {
       top: 1rem;
       right: 1rem;
@@ -345,7 +348,7 @@
     }
   }
   .nav-container > {
-    .row {
+    .v-row {
       margin-top: 15px;
       margin-bottom: 0;
     }

package/src/navigation/OrientationToolsButton.vue

@@ -1,31 +1,24 @@
 <template>
-  <VcsTooltip :tooltip-position="tooltipPosition" :tooltip="tooltip">
-    <template #activator="{ props }">
-      <v-card
-        class="h-8 w-8 d-flex align-center justify-center text-center btn-orientation-tools"
-        v-bind="{ ...$attrs, ...props }"
-      >
-        <v-icon size="16">{{ icon }}</v-icon>
-      </v-card>
-    </template>
-  </VcsTooltip>
+  <v-card
+    class="d-flex align-center justify-center text-center btn-orientation-tools"
+    v-bind="{ ...$attrs }"
+    :height="height"
+    :width="width"
+  >
+    <v-icon :size="iconSize">{{ icon }}</v-icon>
+    <v-tooltip
+      v-if="tooltip"
+      activator="parent"
+      :location="tooltipPosition"
+      :text="$st(tooltip)"
+    ></v-tooltip>
+  </v-card>
 </template>
-<style lang="scss" scoped>
-  .btn-orientation-tools {
-    &:before {
-      background-color: transparent !important;
-    }
-  }
-  .h-8 {
-    height: 32px;
-  }
-  .w-8 {
-    width: 32px;
-  }
-</style>
+<style lang="scss" scoped></style>
 <script>
-  import { VCard, VIcon } from 'vuetify/components';
-  import VcsTooltip from '../components/notification/VcsTooltip.vue';
+  import { VCard, VIcon, VTooltip } from 'vuetify/components';
+  import { computed } from 'vue';
+  import { useFontSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description v-card with h & w 8. Requires an icon and binds all attributes & listeners to the v-card
@@ -36,9 +29,9 @@
   export default {
     name: 'OrientationToolsButton',
     components: {
-      VcsTooltip,
       VCard,
       VIcon,
+      VTooltip,
     },
     props: {
       icon: {
@@ -54,5 +47,25 @@
         default: 'left',
       },
     },
+    setup() {
+      const fontSize = useFontSize();
+
+      const iconSize = computed(() => {
+        return fontSize.value * (1.2 + 0.1 / 3);
+      });
+      const height = computed(() => {
+        return fontSize.value * 2.5;
+      });
+      // 32px
+      const width = computed(() => {
+        return fontSize.value * 2.5;
+      });
+
+      return {
+        iconSize,
+        height,
+        width,
+      };
+    },
   };
 </script>

package/src/navigation/OrientationToolsButton.vue.d.ts

@@ -11,7 +11,11 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    iconSize: import("vue").ComputedRef<number>;
+    height: import("vue").ComputedRef<number>;
+    width: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     icon: {
         type: StringConstructor;
         required: true;

package/src/navigation/TiltSlider.vue

@@ -1,89 +1,79 @@
 <template>
-  <VcsTooltip
-    :tooltip="$t('navigation.pitchTooltip', [Math.round(modelValue)])"
-    tooltip-position="left"
+  <v-card
+    :width="minWidth"
+    :height="minHeight"
+    v-bind="props"
+    :disabled="disabled"
   >
-    <template #activator="{ props }">
-      <v-card class="w-8" v-bind="props" :disabled="disabled">
-        <v-slider
-          track-color="base lighten-3"
-          v-model="tilt"
-          :max="0"
-          :min="-90"
-          direction="vertical"
-          hide-details
-          class="vcs-slider"
-          v-bind="{ ...$attrs }"
-        />
-      </v-card>
-    </template>
-  </VcsTooltip>
+    <v-slider
+      :track-size="trackSize"
+      :tick-size="tickSize"
+      :track-color="'base-lighten-3'"
+      thumb-color="base-darken-4"
+      track-fill-color="'base-darken-4'"
+      :max="0"
+      :min="-90"
+      direction="vertical"
+      hide-details
+      class="vcs-tilt-slider"
+      v-bind="{ ...$attrs }"
+      v-model="localValue"
+    ></v-slider>
+    <v-tooltip
+      activator="parent"
+      location="left"
+      :text="$st('navigation.pitchTooltip', [Math.round(localValue)])"
+    ></v-tooltip>
+  </v-card>
 </template>
+
 <style lang="scss" scoped>
-  @import '../styles/shades.scss';
-  .vcs-slider {
-    :deep(.v-slider) {
-      min-height: 48px;
-      margin-top: 8px;
-      margin-bottom: 8px;
+  .v-slider.v-input--vertical {
+    :deep(.v-slider-track__fill) {
+      width: 2px;
+    }
+    :deep(.v-slider-track__tick--first) {
+      bottom: 0;
+    }
+    :deep(.v-slider-track__tick--last) {
+      bottom: 100%;
     }
-    :deep(.v-slider__thumb) {
-      cursor: pointer;
+  }
+
+  .vcs-tilt-slider {
+    margin-top: 6px;
+    margin-bottom: 10px;
+    :deep(.v-slider-thumb__surface) {
       border-radius: 3px;
       width: 16px;
       height: 4px;
-      border: 0;
-      left: -8px;
-      &:before {
-        background-color: transparent;
-      }
+      margin-top: 10px;
+      box-shadow: none !important;
     }
   }
-  .v-application .theme--light.vcs-slider {
-    :deep(.v-slider) {
-      .v-slider__track-container {
-        .v-slider__track-fill {
-          background-color: map-get($shades, 'black') !important;
-        }
-      }
-      .v-slider__thumb {
-        background-color: map-get($shades, 'black') !important;
-      }
-    }
-  }
-  .v-application .theme--dark.vcs-slider {
-    :deep(.v-slider) {
-      .v-slider__track-container {
-        .v-slider__track-fill {
-          background-color: map-get($shades, 'white') !important;
-        }
-      }
-      .v-slider__thumb {
-        background-color: map-get($shades, 'white') !important;
-      }
-    }
+  :deep(.v-slider-thumb__surface::before) {
+    --v-focus-opacity: 0;
+    --v-hover-opacity: 0;
+    --v-pressed-opacity: 0;
   }
-  .w-8 {
-    width: 32px;
+
+  .v-input--vertical :deep(.v-input__control) {
+    min-height: calc(var(--v-vcs-font-size) * 4);
   }
 </style>
+
 <script>
-  import { clamp } from 'ol/math.js';
-  import { VCard, VSlider } from 'vuetify/components';
-  import VcsTooltip from '../components/notification/VcsTooltip.vue';
+  import { computed, defineComponent } from 'vue';
+  import { VCard, VSlider, VTooltip } from 'vuetify/components';
+  import { useFontSize, useItemHeight } from '../vuePlugins/vuetify.js';
+  import { useProxiedAtomicModel } from '../components/modelHelper.js';
 
-  /**
-   * @description A vertical slider from 0 to -90. pass value with v-model
-   * @vue-prop {number} value
-   * @vue-prop {boolean} disabled - whether tilt slider should be disabled
-   * @vue-event {number} input
-   */
-  export default {
+  export default defineComponent({
     name: 'TiltSlider',
     components: {
-      VcsTooltip,
       VCard,
       VSlider,
+      VTooltip,
     },
     props: {
       modelValue: {
@@ -96,28 +86,33 @@
         default: false,
       },
     },
-    data() {
+    setup(props, { emit }) {
+      const itemHeight = useItemHeight();
+
+      const trackSize = computed(() => {
+        return Math.floor(itemHeight.value / 12);
+      });
+      const tickSize = computed(() => {
+        return trackSize.value * 2;
+      });
+      const fontSize = useFontSize();
+      const minWidth = computed(() => {
+        return fontSize.value * 2.5;
+      });
+      const minHeight = computed(() => {
+        return fontSize.value * 5;
+      });
+
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
+
       return {
-        localValue: Math.round(this.modelValue),
+        localValue,
+        tickSize,
+        trackSize,
+        props,
+        minWidth,
+        minHeight,
       };
     },
-    watch: {
-      modelValue() {
-        this.localValue = clamp(Math.round(this.modelValue), -90, 0);
-      },
-    },
-    computed: {
-      tilt: {
-        get() {
-          return this.localValue;
-        },
-        set(value) {
-          if (value !== this.localValue) {
-            this.localValue = value;
-            this.$emit('update:modelValue', value);
-          }
-        },
-      },
-    },
-  };
+  });
 </script>