@vcmap/ui 5.3.3 → 6.0.0-rc.2

package/src/navigation/OrientationToolsButton.vue

@@ -1,26 +1,24 @@
 <template>
-  <VcsTooltip :tooltip-position="tooltipPosition" :tooltip="tooltip">
-    <template #activator="{ on, attrs }">
-      <v-card
-        class="h-8 w-8 d-flex align-center justify-center text-center btn-orientation-tools"
-        v-bind="{ ...$attrs, ...attrs }"
-        v-on="{ ...$listeners, ...on }"
-      >
-        <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;
-    }
-  }
-</style>
+<style lang="scss" scoped></style>
 <script>
-  import { VCard, VIcon } from 'vuetify/lib';
-  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
@@ -31,9 +29,9 @@
   export default {
     name: 'OrientationToolsButton',
     components: {
-      VcsTooltip,
       VCard,
       VIcon,
+      VTooltip,
     },
     props: {
       icon: {
@@ -49,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;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, 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;
@@ -26,5 +30,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     tooltipPosition: string;
-}>;
+}, {}>;
 export default _default;

package/src/navigation/TiltSlider.vue

@@ -1,95 +1,82 @@
 <template>
-  <VcsTooltip
-    :tooltip="$t('navigation.pitchTooltip', [Math.round(value)])"
-    tooltip-position="left"
+  <v-card
+    :width="minWidth"
+    :height="minHeight"
+    v-bind="props"
+    :disabled="disabled"
   >
-    <template #activator="{ on, attrs }">
-      <v-card class="w-8" v-on="on" v-bind="attrs" :disabled="disabled">
-        <v-slider
-          track-color="base lighten-3"
-          v-model="tilt"
-          :max="0"
-          :min="-90"
-          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 {
-    ::v-deep {
-      .v-slider {
-        min-height: 48px;
-        margin-top: 8px;
-        margin-bottom: 8px;
-      }
-      .v-slider__thumb {
-        cursor: pointer;
-        border-radius: 3px;
-        width: 16px;
-        height: 4px;
-        border: 0;
-        left: -8px;
-        &:before {
-          background-color: transparent;
-        }
-      }
+  .v-slider.v-input--vertical {
+    :deep(.v-slider-track__fill) {
+      width: 2px;
     }
-  }
-  .v-application .theme--light.vcs-slider {
-    ::v-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;
-        }
-      }
+    :deep(.v-slider-track__tick--first) {
+      bottom: 0;
+    }
+    :deep(.v-slider-track__tick--last) {
+      bottom: 100%;
     }
   }
-  .v-application .theme--dark.vcs-slider {
-    ::v-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;
-        }
-      }
+
+  .vcs-tilt-slider {
+    margin-top: 6px;
+    margin-bottom: 10px;
+    :deep(.v-slider-thumb__surface) {
+      border-radius: 3px;
+      width: 16px;
+      height: 4px;
+      margin-top: 10px;
+      box-shadow: none !important;
     }
   }
+  :deep(.v-slider-thumb__surface::before) {
+    --v-focus-opacity: 0;
+    --v-hover-opacity: 0;
+    --v-pressed-opacity: 0;
+  }
+
+  .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/lib';
-  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: {
-      value: {
+      modelValue: {
         type: Number,
         required: true,
       },
@@ -99,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.value),
+        localValue,
+        tickSize,
+        trackSize,
+        props,
+        minWidth,
+        minHeight,
       };
     },
-    watch: {
-      value() {
-        this.localValue = clamp(Math.round(this.value), -90, 0);
-      },
-    },
-    computed: {
-      tilt: {
-        get() {
-          return this.localValue;
-        },
-        set(value) {
-          if (value !== this.localValue) {
-            this.localValue = value;
-            this.$emit('input', value);
-          }
-        },
-      },
-    },
-  };
+  });
 </script>

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

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: NumberConstructor;
         required: true;
     };
@@ -8,15 +8,18 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
         default: boolean;
     };
-}, {}, {
-    localValue: number;
 }, {
-    tilt: {
-        get(): number;
-        set(value: any): void;
-    };
-}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+    localValue: import("vue").Ref<any>;
+    tickSize: import("vue").ComputedRef<number>;
+    trackSize: import("vue").ComputedRef<number>;
+    props: import("@vue/shared").LooseRequired<{
+        readonly disabled: boolean;
+        readonly modelValue: number;
+    } & {}>;
+    minWidth: import("vue").ComputedRef<number>;
+    minHeight: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: NumberConstructor;
         required: true;
     };
@@ -27,5 +30,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     disabled: boolean;
-}>;
+}, {}>;
 export default _default;

package/src/navigation/VcsCompass.vue

@@ -3,32 +3,34 @@
     :style="{
       transform: `rotate(${compassRotation}deg)`,
     }"
-    @click="$emit('input', 0)"
-    class="h-16 w-16 d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease"
+    @click="$emit('update:modelValue', 0)"
+    class="d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease"
     elevation="1"
+    :height="height"
+    :width="width"
   >
     <span>N</span>
     <MapNavCompass
-      class="position-absolute pos-a-0 primary--text"
+      class="position-absolute top-0 bottom-0 right-0 left-0 text-primary"
       @click="$event.stopPropagation()"
-      @direction-click="$emit('input', $event)"
+      @direction-click="$emit('update:modelValue', $event)"
       :can-emit="!disabled && (viewMode === '3d' || viewMode === 'oblique')"
       :hide-ticks="viewMode === 'oblique'"
     />
   </v-sheet>
 </template>
-
+<style lang="scss" scoped></style>
 <script>
   import { computed, ref } from 'vue';
 
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import MapNavCompass from './MapNavCompass.vue';
+  import { useFontSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description Compass component to be shown on the map.
    * @vue-prop {OrientationToolsViewMode}  viewMode  - Mode of the map. Defines the behaviour of the compass.
-   * @vue-prop {number}                     value     - Number of degrees of the compass rotation.
-   * @vue-event {number} input
+   * @vue-prop {number}                     modelValue     - Number of degrees of the compass rotation.
    * @vue-prop {boolean} disabled - whether compass should be disabled
    */
   export default {
@@ -42,7 +44,7 @@
         type: String,
         required: true,
       },
-      value: {
+      modelValue: {
         type: Number,
         default: 0,
       },
@@ -53,15 +55,26 @@
       },
     },
     setup(props) {
-      const rotationValue = ref(props.value);
+      const rotationValue = ref(props.modelValue);
+
+      const fontSize = useFontSize();
+      const height = computed(() => {
+        return fontSize.value * 5;
+      });
+
+      const width = computed(() => {
+        return fontSize.value * 5;
+      });
 
       return {
         rotationValue,
         compassRotation: computed(() => -1 * rotationValue.value),
+        height,
+        width,
       };
     },
     watch: {
-      value(newValue, oldValue) {
+      modelValue(newValue, oldValue) {
         let diff = newValue - oldValue;
         if (diff > 180) {
           diff -= 360;

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

@@ -3,7 +3,7 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-    value: {
+    modelValue: {
         type: NumberConstructor;
         default: number;
     };
@@ -13,14 +13,16 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
     };
 }, {
-    rotationValue: any;
+    rotationValue: import("vue").Ref<number>;
     compassRotation: import("vue").ComputedRef<number>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    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<{
     viewMode: {
         type: StringConstructor;
         required: true;
     };
-    value: {
+    modelValue: {
         type: NumberConstructor;
         default: number;
     };
@@ -30,7 +32,7 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
     };
 }>>, {
-    value: number;
     disabled: boolean;
-}>;
+    modelValue: number;
+}, {}>;
 export default _default;

package/src/navigation/VcsZoomButton.vue

@@ -45,20 +45,18 @@
     .inner {
       box-shadow: rgba(0, 0, 0, 0.25) 0 0 10px 0 inset;
     }
-    ::v-deep {
-      .btn-orientation-tools {
-        &:first-child {
-          box-shadow:
-            rgba(0, 0, 0, 0.25) -2px 2px 1px -2px,
-            rgba(0, 0, 0, 0.08) 1px 0 0 0,
-            rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
-        }
-        &:last-child {
-          box-shadow:
-            rgba(0, 0, 0, 0.25) -2px 3px 1px -2px,
-            rgba(0, 0, 0, 0.08) 1px 4px 2px 0,
-            rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
-        }
+    :deep(.btn-orientation-tools) {
+      &:first-child {
+        box-shadow:
+          rgba(0, 0, 0, 0.25) -2px 2px 1px -2px,
+          rgba(0, 0, 0, 0.08) 1px 0 0 0,
+          rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
+      }
+      &:last-child {
+        box-shadow:
+          rgba(0, 0, 0, 0.25) -2px 3px 1px -2px,
+          rgba(0, 0, 0, 0.08) 1px 4px 2px 0,
+          rgba(0, 0, 0, 0.05) -1px 1px 1px 1px !important;
       }
     }
   }

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

@@ -4,7 +4,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
         required: false;
         type: BooleanConstructor;
@@ -12,5 +12,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     disabled: boolean;
-}>;
+}, {}>;
 export default _default;

package/src/navigation/locatorHelper.js

@@ -24,7 +24,7 @@ import { getDefaultPrimaryColor } from '../vuePlugins/vuetify.js';
  */
 function getColor(opacity, app) {
   return Color.fromCssColorString(
-    app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(),
+    app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(app),
   )
     .withAlpha(opacity)
     .toCssColorString();

package/src/navigation/overviewMap.d.ts

@@ -128,7 +128,7 @@ declare class OverviewMap {
      * Is passed a {@link InteractionEvent} as its only argument
      * @type {import("@vcmap/core").VcsEvent<import("@vcmap/core").InteractionEvent>}
      */
-    get mapClicked(): import("@vcmap/core/dist/src/vcsEvent.js").default<import("@vcmap/core").InteractionEvent>;
+    get mapClicked(): import("@vcmap/core").VcsEvent<import("@vcmap/core").InteractionEvent>;
     /**
      * @private
      */

package/src/navigation/overviewMap.js

@@ -140,7 +140,7 @@ class OverviewMap {
     this._obliqueSelectedImageLayer = null;
 
     const primary =
-      app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor();
+      app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(app);
     const fillColor = Color.fromCssColorString('#EDEDED');
 
     /**
@@ -180,7 +180,7 @@ class OverviewMap {
      * @type {import("@vcmap/core").VectorStyleItem}
      */
     this.cameraIconStyle = new VectorStyleItem({
-      image: getCameraIcon(getDefaultPrimaryColor()),
+      image: getCameraIcon(getDefaultPrimaryColor(this._app)),
     });
 
     /**
@@ -289,7 +289,7 @@ class OverviewMap {
    * @private
    */
   _updatePrimaryColor() {
-    const color = getColorByKey('primary');
+    const color = getColorByKey(this._app, 'primary');
     this.obliqueSelectedStyle?.stroke?.setColor(color);
     this._obliqueSelectedImageLayer?.forceRedraw?.();
     const rotation = this.cameraIconStyle.image.getRotation();

package/src/notifier/NotifierComponent.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <v-snackbar
-      dark
       v-for="notification in notifications"
       :key="notification.id"
       v-model="notification.open"
@@ -11,22 +10,22 @@
         {{ icon[notification.type] }}
       </v-icon>
       <span class="snack-title">{{
-        $t(notification.title || defaultTitle[notification.type])
+        $st(notification.title || defaultTitle[notification.type])
       }}</span>
-      <template #action="{ attrs }">
+      <template #actions="{ props }">
         <VcsButton
           icon="mdi-close"
-          v-bind="attrs"
+          v-bind="props"
           @click="notification.open = false"
         />
       </template>
-      <span>{{ $t(notification.message) }}</span>
+      <span>{{ $st(notification.message) }}</span>
     </v-snackbar>
   </div>
 </template>
 
 <script>
-  import { VSnackbar, VIcon } from 'vuetify/lib';
+  import { VSnackbar, VIcon } from 'vuetify/components';
   import { inject } from 'vue';
   import VcsButton from '../components/buttons/VcsButton.vue';
   import { NotificationType } from './notifier.js';
@@ -65,22 +64,20 @@
 
 <style lang="scss" scoped>
   .v-snack {
-    ::v-deep {
-      .v-snack__content {
-        display: grid;
-        gap: 8px 4px;
-        grid-template-columns: 20px auto;
-        .v-icon {
-          grid-row-start: 1;
-          grid-row-end: 3;
-          align-self: start;
-          font-size: 17px;
-        }
-      }
-      .v-snack__action {
-        align-self: flex-start;
-        margin-top: 4px;
+    :deep(.v-snack__content) {
+      display: grid;
+      gap: 8px 4px;
+      grid-template-columns: 20px auto;
+      .v-icon {
+        grid-row-start: 1;
+        grid-row-end: 3;
+        align-self: start;
+        font-size: 17px;
       }
     }
+    :deep(.v-snack__action) {
+      align-self: flex-start;
+      margin-top: 4px;
+    }
   }
 </style>

package/src/notifier/NotifierComponent.vue.d.ts

@@ -6,5 +6,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     defaultTitle: {
         [x: string]: string;
     };
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/notifier/notifier.d.ts

@@ -18,7 +18,8 @@ export type Notification = {
     type: NotificationType;
     title?: string | undefined;
     timeout: number;
-    open: import("vue").Ref<boolean>;
+    openRef: import("vue").Ref<boolean>;
+    open: typeof open;
     close: () => void;
 };
 /**