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

package/src/manager/window/windowManager.d.ts

@@ -14,12 +14,12 @@ 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>,
  *   position? : Partial<WindowPositionOptions>,
- *   slot: WindowSlot,
+ *   slot?: WindowSlot,
  *   props?: T,
  *   provides?: Record<string, unknown>
  * }} WindowComponentOptions
@@ -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,12 +131,12 @@ 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>;
     position?: Partial<WindowPositionOptions>;
-    slot: WindowSlot;
+    slot?: WindowSlot;
     props?: T;
     provides?: Record<string, unknown>;
 };
@@ -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

@@ -2,7 +2,7 @@ import { computed, reactive, ref } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
 import { parseEnumValue } from '@vcsuite/parsers';
-import { check } from '@vcsuite/check';
+import { check, oneOf } from '@vcsuite/check';
 import { vcsAppSymbol } from '../../pluginHelper.js';
 
 /**
@@ -104,12 +104,12 @@ 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>,
  *   position? : Partial<WindowPositionOptions>,
- *   slot: WindowSlot,
+ *   slot?: WindowSlot,
  *   props?: T,
  *   provides?: Record<string, unknown>
  * }} WindowComponentOptions
@@ -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>,
@@ -563,7 +563,7 @@ class WindowManager {
    * @returns {WindowComponent}
    */
   add(windowComponentOptions, owner) {
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
 
     if (
       windowComponentOptions.id &&
@@ -747,7 +747,7 @@ class WindowManager {
    */
   addExternalIdToZIndex(id, owner) {
     check(id, String);
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
 
     if (this.has(id)) {
       throw new Error(`Id ${id} already belongs to a window id`);

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>

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

@@ -8,14 +8,17 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
         default: boolean;
     };
-}, any, {
-    localValue: number;
 }, {
-    tilt: {
-        get(): number;
-        set(value: any): void;
-    };
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    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;

package/src/navigation/VcsCompass.vue

@@ -4,8 +4,10 @@
       transform: `rotate(${compassRotation}deg)`,
     }"
     @click="$emit('update:modelValue', 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"
+    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
@@ -17,25 +19,18 @@
     />
   </v-sheet>
 </template>
-<style lang="scss" scoped>
-  .h-16 {
-    height: 64px;
-  }
-  .w-16 {
-    width: 64px;
-  }
-</style>
+<style lang="scss" scoped></style>
 <script>
   import { computed, ref } from 'vue';
 
   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 {
@@ -62,9 +57,20 @@
     setup(props) {
       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: {

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

@@ -15,6 +15,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     rotationValue: import("vue").Ref<number>;
     compassRotation: 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<{
     viewMode: {
         type: StringConstructor;

package/src/search/search.js

@@ -10,7 +10,7 @@ import {
   Viewpoint,
 } from '@vcmap/core';
 import { shallowRef } from 'vue';
-import { check } from '@vcsuite/check';
+import { check, oneOf } from '@vcsuite/check';
 import { Icon } from 'ol/style.js';
 import { getLogger } from '@vcsuite/logger';
 import { vcsAppSymbol } from '../pluginHelper.js';
@@ -183,7 +183,7 @@ class Search extends IndexedCollection {
    * @param {number=} index
    */
   add(item, owner, index) {
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
     check(item.search, Function);
 
     item[searchImplOwnerSymbol] = owner;

package/src/siteConfig.js

@@ -35,7 +35,7 @@ function setHeaderTitle(title) {
   document.head.appendChild(titleElement);
 }
 
-const defaultFavicon = './assets/favicon.svg';
+const defaultFavicon = './assets/favicon-4c4ce5df.svg';
 
 const defaultHeaderTitle = 'VC Map';
 

package/src/state.js

@@ -1,4 +1,4 @@
-import { check } from '@vcsuite/check';
+import { check, optional } from '@vcsuite/check';
 import { getLogger } from '@vcsuite/logger';
 import { Viewpoint } from '@vcmap/core';
 
@@ -257,9 +257,9 @@ export function getStateFromURL(url) {
  */
 export function setStateToUrl(state, url) {
   check(state, {
-    activeMap: [String, undefined],
-    activeViewpoint: [Object, undefined],
-    activeObliqueCollection: [String, undefined],
+    activeMap: optional(String),
+    activeViewpoint: optional(Object),
+    activeObliqueCollection: optional(String),
     layers: Array,
     plugins: Array,
     moduleIds: [String],

package/src/styles/_typography.scss

@@ -12,6 +12,7 @@
   span,
   button,
   input,
+  textarea,
   .caption,
   .tooltip,
   label,