@vcmap/ui 5.3.2 → 6.0.0-rc.1

package/src/navigation/VcsCompass.vue

@@ -3,25 +3,32 @@
     :style="{
       transform: `rotate(${compassRotation}deg)`,
     }"
-    @click="$emit('input', 0)"
+    @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"
     elevation="1"
   >
     <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>
+  .h-16 {
+    height: 64px;
+  }
+  .w-16 {
+    width: 64px;
+  }
+</style>
 <script>
   import { computed, ref } from 'vue';
 
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import MapNavCompass from './MapNavCompass.vue';
 
   /**
@@ -42,7 +49,7 @@
         type: String,
         required: true,
       },
-      value: {
+      modelValue: {
         type: Number,
         default: 0,
       },
@@ -53,7 +60,7 @@
       },
     },
     setup(props) {
-      const rotationValue = ref(props.value);
+      const rotationValue = ref(props.modelValue);
 
       return {
         rotationValue,
@@ -61,7 +68,7 @@
       };
     },
     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,14 @@ 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<{
+}, 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 +30,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;
 };
 /**

package/src/notifier/notifier.js

@@ -16,7 +16,8 @@ import { v4 as uuidv4 } from 'uuid';
  * @property {NotificationType} type
  * @property {string} [title]
  * @property {number} timeout
- * @property {import("vue").Ref<boolean>} open
+ * @property {import("vue").Ref<boolean>} openRef
+ * @property {open} open
  * @property {function():void} close
  */
 
@@ -57,7 +58,7 @@ function createNotification(options, notifier) {
       return timeout ?? 5000;
     },
     get open() {
-      return open;
+      return open.value;
     },
     set open(value) {
       open.value = value?.value ?? value; // when used as a v-model, this is set as a boolean
@@ -65,6 +66,9 @@ function createNotification(options, notifier) {
         this.close();
       }
     },
+    get openRef() {
+      return open;
+    },
     close() {
       open.value = false;
       setTimeout(() => {

package/src/search/ResultItem.vue

@@ -1,26 +1,27 @@
 <template>
-  <div class="ma-2 d-flex flex-row align-center" v-if="item">
-    <v-list-item-icon v-if="item.icon" class="px-1">
+  <v-list-item class="ma-2 d-flex flex-row align-center" v-if="item">
+    <template #prepend v-if="item.icon">
       <v-icon>
         {{ item.icon }}
       </v-icon>
-    </v-list-item-icon>
+    </template>
     <div class="px-2 d-flex align-center" :title="$t('search.select')">
       <span v-html="marked" />
     </div>
-    <VcsActionButtonList
-      v-if="hasActions"
-      :actions="item.actions"
-      :block-overflow="true"
-      :overflow-count="2"
-      right
-    />
-  </div>
+    <template #append>
+      <VcsActionButtonList
+        v-if="hasActions"
+        :actions="item.actions"
+        :overflow-count="2"
+        right
+      />
+    </template>
+  </v-list-item>
 </template>
 
 <script>
   import { computed } from 'vue';
-  import { VIcon, VListItemIcon } from 'vuetify/lib';
+  import { VIcon, VListItem } from 'vuetify/components';
   import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
 
   /**
@@ -55,8 +56,8 @@
     name: 'ResultItem',
     components: {
       VcsActionButtonList,
-      VListItemIcon,
       VIcon,
+      VListItem,
     },
     props: {
       query: {

package/src/search/ResultItem.vue.d.ts

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     hasActions: import("vue").ComputedRef<boolean>;
     marked: import("vue").ComputedRef<string>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     query: {
         type: StringConstructor;
         default: string;
@@ -21,5 +21,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     query: string;
-}>;
+}, {}>;
 export default _default;

package/src/search/ResultsComponent.vue

@@ -1,29 +1,22 @@
 <template>
-  <v-list dense class="ma-0 overflow-y-auto vcs-search-results">
-    <v-list-item-group v-model="highlighted">
-      <v-list-item v-for="(item, index) in results" :key="index" class="px-0">
-        <v-list-item-content>
-          <ResultItem :item="item" :query="query" class="cursor-pointer" />
-          <v-divider
-            v-if="index < results.length - 1"
-            :key="index"
-            class="base lighten-3"
-          />
-        </v-list-item-content>
-      </v-list-item>
-    </v-list-item-group>
+  <v-list
+    density="compact"
+    class="ma-0 overflow-y-auto vcs-search-results"
+    v-model="highlighted"
+  >
+    <ResultItem
+      :item="item"
+      :query="query"
+      class="cursor-pointer px-0"
+      v-for="(item, index) in results"
+      :key="index"
+    />
   </v-list>
 </template>
 
 <script>
   import { inject, onUnmounted, ref, computed } from 'vue';
-  import {
-    VDivider,
-    VList,
-    VListItem,
-    VListItemContent,
-    VListItemGroup,
-  } from 'vuetify/lib';
+  import { VList } from 'vuetify/components';
   import ResultItem from './ResultItem.vue';
 
   /**
@@ -37,10 +30,6 @@
     components: {
       ResultItem,
       VList,
-      VListItemGroup,
-      VListItem,
-      VListItemContent,
-      VDivider,
     },
     props: {
       query: {

package/src/search/ResultsComponent.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     highlighted: import("vue").WritableComputedRef<number>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     query: {
         type: StringConstructor;
         default: string;
@@ -20,5 +20,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     query: string;
-}>;
+}, {}>;
 export default _default;

package/src/search/SearchComponent.vue

@@ -3,7 +3,7 @@
     <span class="d-flex justify-space-between align-center mt-1 ml-2">
       <v-icon class="pa-1"> $vcsSearch </v-icon>
       <VcsTextField
-        class="d-inline-block user-select-none w-full mx-1"
+        class="d-inline-block user-select-none w-100 mx-1"
         autofocus
         :loading="searching"
         clearable
@@ -14,7 +14,7 @@
         @input="reset"
       />
     </span>
-    <v-divider class="mt-1 base darken-1" v-if="!!results.length" />
+    <v-divider class="mt-1 base-darken-1" v-if="!!results.length" />
     <ResultsComponent :query="query" :results="results" />
     <v-divider v-if="!!results.length" />
     <div v-if="!!results.length" class="d-flex px-2 pt-2 pb-1 justify-end">
@@ -26,27 +26,28 @@
 </template>
 
 <style lang="scss" scoped>
-  ::v-deep {
-    .v-input {
-      fieldset {
-        padding: 0 !important;
-      }
-      fieldset,
-      input {
-        border-color: transparent !important;
-      }
+  :deep(.v-input) {
+    fieldset {
+      padding: 0 !important;
     }
-    .v-icon .v-icon__component {
-      width: 16px;
-      height: 16px;
+    fieldset,
+    input {
+      border-color: transparent !important;
     }
   }
+  :deep(.v-icon .v-icon__component) {
+    width: 16px;
+    height: 16px;
+  }
+  .user-select-none {
+    user-select: none;
+  }
 </style>
 
 <script>
   import { inject, onUnmounted, ref } from 'vue';
   import { getLogger } from '@vcsuite/logger';
-  import { VSheet, VDivider, VIcon } from 'vuetify/lib';
+  import { VSheet, VDivider, VIcon } from 'vuetify/components';
   import VcsTextField from '../components/form-inputs-controls/VcsTextField.vue';
   import ResultsComponent from './ResultsComponent.vue';
   import VcsFormButton from '../components/buttons/VcsFormButton.vue';

package/src/search/SearchComponent.vue.d.ts

@@ -1,10 +1,10 @@
 declare const _default: import("vue").DefineComponent<{}, {
     query: import("vue").Ref<null>;
     searching: import("vue").Ref<boolean>;
-    results: import("vue").Ref<import("./search.js").ResultItem[]>;
+    results: import("vue").Ref<import("./search.js", { with: { "resolution-mode": "import" } }).ResultItem[]>;
     reset: () => void;
     clear: () => void;
     search: () => Promise<void>;
     zoomToAll: () => void;
-}, {}, {}, {}, 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/search/search.d.ts

@@ -15,13 +15,13 @@ export type ResultItem = {
      */
     clicked?: (() => Promise<void>) | undefined;
     /**
-     * If a feature is provided, the feature is added to the result layer and search zooms to the layer's extent. Default clicked handler is zoom to feature, highlight feature and select feature, if feature has a FeatureInfoView.
+     * If a feature (in web mercator) is provided, the feature is added to the result layer and search zooms to the layer's extent. Default clicked handler is zoom to feature, highlight feature and select feature, if feature has a FeatureInfoView.
      */
     feature?: import("ol").Feature | undefined;
 };
 export type SearchImpl = {
     /**
-     * Name of the implementation. Must be the name of the plugin the SearchImpl is owned by
+     * Name of the implementation. Must be unique, best practice is to prefix with your plugin name to ensure uniqueness or use a uuid.
      */
     name: string;
     search: (arg0: string) => Promise<Array<ResultItem>>;

package/src/search/search.js

@@ -28,12 +28,12 @@ import { getViewpointFromFeature } from '../actions/actionHelper.js';
  * @property {string} [icon] An optional icon
  * @property {Array<import("../actions/actionHelper.js").VcsAction>} [actions]
  * @property {function():Promise<void>} [clicked] Obligatory, if no feature is provided. Can overwrite default zoom to feature behaviour.
- * @property {import("ol").Feature|undefined} [feature] If a feature is provided, the feature is added to the result layer and search zooms to the layer's extent. Default clicked handler is zoom to feature, highlight feature and select feature, if feature has a FeatureInfoView.
+ * @property {import("ol").Feature|undefined} [feature] If a feature (in web mercator) is provided, the feature is added to the result layer and search zooms to the layer's extent. Default clicked handler is zoom to feature, highlight feature and select feature, if feature has a FeatureInfoView.
  */
 
 /**
  * @typedef {Object} SearchImpl
- * @property {string} name Name of the implementation. Must be the name of the plugin the SearchImpl is owned by
+ * @property {string} name Name of the implementation. Must be unique, best practice is to prefix with your plugin name to ensure uniqueness or use a uuid.
  * @property {function(string):Promise<Array<ResultItem>>} search
  * @property {function(string):Promise<Array<string>>} [suggest] // XXX currently not implemented in UI at Beta state
  * @property{function():void} abort - should abort any ongoing requests to search or suggest without throwing an error
@@ -75,19 +75,19 @@ function setupSearchResultLayer(app) {
   app.layers.add(resultLayer);
 
   const style = new VectorStyleItem({
-    image: getPointResultIcon(getDefaultPrimaryColor()),
+    image: getPointResultIcon(getDefaultPrimaryColor(app)),
     fill: {
       color: 'rgba(237, 237, 237, 0.1)',
     },
     stroke: {
-      color: getDefaultPrimaryColor(),
+      color: getDefaultPrimaryColor(app),
       width: 5,
     },
   });
   resultLayer.setStyle(style);
 
   function setResultColor() {
-    const color = getColorByKey('primary');
+    const color = getColorByKey(app, 'primary');
     style.stroke?.setColor(color);
     style.image = new Icon(getPointResultIcon(color));
     resultLayer.forceRedraw();
@@ -185,11 +185,7 @@ class Search extends IndexedCollection {
   add(item, owner, index) {
     check(owner, [String, vcsAppSymbol]);
     check(item.search, Function);
-    if (item.name !== owner) {
-      getLogger('Search').warning(
-        'SearchImplementations must be named as the plugin they are owned by.',
-      );
-    }
+
     item[searchImplOwnerSymbol] = owner;
     super.add(item, index);
   }

package/src/setup.js

@@ -1,9 +1,9 @@
-import Vue from 'vue';
+// import Vue from 'vue';
 
 // eslint-disable-next-line no-unused-vars
 import * as core from '@vcmap/core';
 // pull in entire core for vcsClassRegistry
 
-Vue.config.productionTip = false;
+// Vue.config.productionTip = false;
 
 window.CESIUM_BASE_URL = '/node_modules/@vcmap-cesium/engine/Build/';

package/src/styles/_typography.scss

@@ -1,6 +1,7 @@
 @import 'vcsFont.scss';
 
-.v-application {
+.v-application,
+.v-overlay-container {
   h1,
   h2,
   h3,
@@ -13,19 +14,19 @@
   input,
   .caption,
   .tooltip,
+  label,
   p {
-    font-size: $vcs-font-size;
+    font-size: var(--v-vcs-font-size);
     &:not(.v-icon) {
-      font-family: 'Titillium Web', sans-serif !important;
+      font-family: var(--v-vcs-font-family), sans-serif !important;
     }
   }
-
   h1 {
-    font-size: 16px;
+    font-size: calc(var(--v-vcs-font-size) + 3px);
   }
 
   h2 {
-    font-size: 14px;
+    font-size: calc(var(--v-vcs-font-size) + 1px);
   }
 
   h3 {
@@ -33,7 +34,10 @@
   }
 
   h4 {
-    font-size: 12px;
+    font-size: calc(var(--v-vcs-font-size) - 1px);
     font-weight: normal;
   }
+  .v-tooltip > .v-overlay__content {
+    font-size: var(--v-vcs-font-size);
+  }
 }