@vcmap/ui 5.3.7 → 6.0.0-rc.10

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,37 @@
 <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 v-if="item" v-bind="$attrs" class="result-item">
+    <template #prepend v-if="item.icon">
       <v-icon>
         {{ item.icon }}
       </v-icon>
-    </v-list-item-icon>
-    <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>
+    <template #title>
+      <v-list-item-title>
+        <span v-html="marked" />
+      </v-list-item-title>
+    </template>
+    <v-tooltip activator="parent">
+      {{ $st('search.select') }}
+    </v-tooltip>
+    <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,
+    VListItemTitle,
+    VTooltip,
+  } from 'vuetify/components';
   import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
 
   /**
@@ -37,7 +48,7 @@
       partials.forEach((partial) => {
         replacement = replacement.replaceAll(
           new RegExp(`(^|[^>])(${partial})`, 'ig'),
-          '<span>$1<span class="primary--text">$2</span></span>',
+          '<span>$1<span class="text-primary">$2</span></span>',
         );
       });
     }
@@ -55,8 +66,10 @@
     name: 'ResultItem',
     components: {
       VcsActionButtonList,
-      VListItemIcon,
       VIcon,
+      VListItem,
+      VListItemTitle,
+      VTooltip,
     },
     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,35 +1,29 @@
 <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
+    class="ma-0 overflow-y-auto vcs-search-results results-component"
+    v-model:selected="highlighted"
+  >
+    <ResultItem
+      :item="item"
+      :query="query"
+      class="cursor-pointer"
+      :class="{ 'vcs-search-result-border': index < items.length - 1 }"
+      v-for="(item, index) in items"
+      :key="index"
+      :value="item.value"
+    />
   </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';
 
   /**
    * @description ResultsComponent listing all available result items in a scrollable list
    * @vue-prop {string} query - The query string forwarded to mark results within resultItem component.
-   * @vue-prop {Array<ResultItem>} results - Array of results.
+   * @vue-prop {Array<import("./search.js").ResultItem>} results - Array of results.
    * @vue-computed {import("vue").Ref<string>} highlighted - The highlighted result item. Updates also on feature select.
    */
   export default {
@@ -37,10 +31,6 @@
     components: {
       ResultItem,
       VList,
-      VListItemGroup,
-      VListItem,
-      VListItemContent,
-      VDivider,
     },
     props: {
       query: {
@@ -53,23 +43,27 @@
       },
     },
     setup(props) {
-      const highlightedRef = ref(-1);
+      const items = computed(() => {
+        return props.results.map((item, index) => ({
+          ...item,
+          value: index,
+        }));
+      });
+      const selectedRef = ref([]);
       /** @type {import("@src/vcsUiApp.js").default} */
       const app = inject('vcsApp');
       const selectedListener = app.featureInfo.featureChanged.addEventListener(
         (feature) => {
-          if (highlightedRef.value >= 0) {
-            if (
-              feature &&
-              props.results[highlightedRef.value].feature === feature
-            ) {
+          if (selectedRef.value.length > 0) {
+            const [index] = selectedRef.value;
+            if (feature && items.value[index].feature === feature) {
               return;
             }
-            highlightedRef.value = -1;
+            selectedRef.value = [];
           } else if (feature) {
-            highlightedRef.value = props.results.findIndex(
-              (r) => r.feature === feature,
-            );
+            selectedRef.value = [
+              items.value.findIndex((r) => r.feature === feature),
+            ];
           }
         },
       );
@@ -79,14 +73,16 @@
       });
 
       return {
+        items,
         highlighted: computed({
           get() {
-            return highlightedRef.value;
+            return selectedRef.value;
           },
           set(value) {
-            highlightedRef.value = value;
-            if (value >= 0) {
-              const item = props.results[value];
+            selectedRef.value = value;
+            const [index] = value;
+            if (index >= 0) {
+              const item = items.value[index];
               item.clicked();
             }
           },
@@ -96,8 +92,12 @@
   };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .vcs-search-results {
     max-height: 400px;
   }
+  .vcs-search-result-border {
+    border-bottom: thin solid;
+    border-color: rgb(var(--v-theme-base-lighten-2));
+  }
 </style>

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

@@ -8,8 +8,9 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }, {
-    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<{
+    items: import("vue").ComputedRef<any[]>;
+    highlighted: import("vue").WritableComputedRef<never[]>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     query: {
         type: StringConstructor;
         default: string;
@@ -20,5 +21,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     query: string;
-}>;
+}, {}>;
 export default _default;

package/src/search/SearchComponent.vue

@@ -1,20 +1,22 @@
 <template>
   <v-sheet>
-    <span class="d-flex justify-space-between align-center mt-1 ml-2">
-      <v-icon class="pa-1"> $vcsSearch </v-icon>
+    <span
+      class="d-flex justify-space-between align-center mt-1 ml-2 search-component"
+    >
+      <v-icon class="pa-1" :size="searchIconSize"> $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
-        dense
         :placeholder="$t('search.placeholder')"
         v-model.trim="query"
         @keydown.enter="search"
         @input="reset"
+        @click:clear="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,30 +28,22 @@
 </template>
 
 <style lang="scss" scoped>
-  ::v-deep {
-    .v-input {
-      fieldset {
-        padding: 0 !important;
-      }
-      fieldset,
-      input {
-        border-color: transparent !important;
-      }
-    }
-    .v-icon .v-icon__component {
-      width: 16px;
-      height: 16px;
-    }
+  :deep(.v-field .v-field__outline *) {
+    border-color: transparent !important;
+  }
+  .user-select-none {
+    user-select: none;
   }
 </style>
 
 <script>
-  import { inject, onUnmounted, ref } from 'vue';
+  import { inject, onUnmounted, ref, computed } 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';
+  import { useFontSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description Stylized search component providing an input field for search inputs.
@@ -102,6 +96,10 @@
         clear();
       });
 
+      const fontSize = useFontSize();
+      const searchIconSize = computed(() => {
+        return fontSize.value + 11;
+      });
       return {
         query,
         searching,
@@ -110,6 +108,7 @@
         clear,
         search,
         zoomToAll,
+        searchIconSize,
       };
     },
   };

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

@@ -1,10 +1,11 @@
 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<{}>>, {}>;
+    searchIconSize: import("vue").ComputedRef<number>;
+}, {}, {}, {}, 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

@@ -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';
@@ -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();
@@ -183,13 +183,9 @@ class Search extends IndexedCollection {
    * @param {number=} index
    */
   add(item, owner, index) {
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(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/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';
 
@@ -44,25 +44,25 @@ const defaultHeaderTitle = 'VC Map';
  * @returns {() => void}
  */
 export default function createSiteConfig(uiConfig) {
-  if (typeof uiConfig.config.value.favicon === 'string') {
-    setFavicon(uiConfig.config.value.favicon);
+  if (typeof uiConfig.config.favicon === 'string') {
+    setFavicon(uiConfig.config.favicon);
   }
 
-  if (typeof uiConfig.config.value.headerTitle === 'string') {
-    setHeaderTitle(uiConfig.config.value.headerTitle);
+  if (typeof uiConfig.config.headerTitle === 'string') {
+    setHeaderTitle(uiConfig.config.headerTitle);
   }
 
   const updateFavicon = () => {
-    if (typeof uiConfig.config.value.favicon === 'string') {
-      setFavicon(uiConfig.config.value.favicon);
+    if (typeof uiConfig.config.favicon === 'string') {
+      setFavicon(uiConfig.config.favicon);
     } else {
       setFavicon(defaultFavicon);
     }
   };
 
   const updateHeaderTitle = () => {
-    if (typeof uiConfig.config.value.headerTitle === 'string') {
-      setHeaderTitle(uiConfig.config.value.headerTitle);
+    if (typeof uiConfig.config.headerTitle === 'string') {
+      setHeaderTitle(uiConfig.config.headerTitle);
     } else {
       setHeaderTitle(defaultHeaderTitle);
     }

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

@@ -1,6 +1,5 @@
-@import 'vcsFont.scss';
-
-.v-application {
+.v-application,
+.v-overlay-container {
   h1,
   h2,
   h3,
@@ -11,21 +10,22 @@
   span,
   button,
   input,
+  textarea,
   .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 +33,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);
+  }
 }

package/src/styles/main.scss

@@ -1,11 +1,5 @@
-@import './utils/all';
-
-@import './theming';
 @import './typography';
-@import './shades';
-@import './variables';
-@import './vcsFont';
-@import './vcsGrid';
+@import './vcsList';
 
 /* latin-ext */
 @font-face {
@@ -19,3 +13,8 @@ html.vcs-ui {
   overflow-x: hidden !important;
   overflow-y: hidden !important;
 }
+
+svg {
+  height: inherit;
+  width: inherit;
+}

package/src/styles/vcsList.scss

@@ -0,0 +1,8 @@
+// Default global List overrides
+// `vcsList` class is set per default to VList Elements
+
+.vcsList {
+  .v-list-item--density-compact.v-list-item--one-line {
+    min-height: calc(var(--v-vcs-font-size) * 2 + 6px);
+  }
+}