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

package/src/manager/window/WindowComponentHeader.vue

@@ -2,21 +2,25 @@
   <div
     class="d-flex justify-space-between align-center window-component-header"
   >
-    <h3 class="d-flex align-center">
+    <h3 class="d-flex align-center flex-grow-1">
       <v-icon
         v-if="windowState.headerIcon"
         class="mr-1"
-        :class="{ 'primary--text': isOnTop }"
+        :class="{ 'text-primary': isOnTop }"
         size="16"
       >
         {{ windowState.headerIcon }}
       </v-icon>
       <span
-        class="d-inline-block user-select-none font-weight-bold"
-        :class="{ 'primary--text': isOnTop }"
+        ref="headerRef"
+        class="d-inline-block user-select-none font-weight-bold vcs-window-header-title"
+        :class="{ 'text-primary': isOnTop }"
       >
         {{ translatedHeaderTitle }}
       </span>
+      <v-tooltip v-if="headerTooltip" activator="parent">
+        {{ $st(headerTooltip) }}
+      </v-tooltip>
     </h3>
     <div class="d-flex justify-space-between align-center">
       <template v-if="windowState.headerActions?.length > 0">
@@ -52,10 +56,10 @@
 
 <style lang="scss" scoped>
   .window-component-header {
-    max-height: 16px;
+    max-height: calc(var(--v-vcs-item-height) / 2);
 
     h3 {
-      line-height: 16px;
+      line-height: calc(var(--v-vcs-item-height) / 2);
     }
     .v-divider--vertical.v-divider--inset {
       margin-top: 2px;
@@ -64,11 +68,19 @@
   .user-select-none {
     user-select: none;
   }
+  .vcs-window-header-title {
+    width: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
 </style>
 
 <script>
-  import { VIcon, VDivider } from 'vuetify/components';
-  import { computed, getCurrentInstance } from 'vue';
+  import { VIcon, VDivider, VTooltip } from 'vuetify/components';
+  import { computed, getCurrentInstance, ref } from 'vue';
+  import { createEllipseTooltip } from '../../components/composables.js';
   import VcsButton from '../../components/buttons/VcsButton.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import { createLinkAction } from '../../actions/actionHelper.js';
@@ -88,6 +100,7 @@
       VcsButton,
       VIcon,
       VDivider,
+      VTooltip,
     },
     inheritAttrs: false,
     props: {
@@ -124,6 +137,8 @@
           : vm.$st(props.windowState.headerTitle),
       );
 
+      const headerRef = ref(null);
+
       const infoAction =
         props.windowState.infoUrl || props.windowState.infoUrlCallback
           ? createLinkAction(
@@ -141,6 +156,12 @@
         close,
         isDockable,
         translatedHeaderTitle,
+        headerRef,
+        headerTooltip: createEllipseTooltip(
+          computed(() => headerRef.value),
+          computed(() => undefined),
+          translatedHeaderTitle,
+        ),
         infoAction,
       };
     },

package/src/manager/window/WindowComponentHeader.vue.d.ts

@@ -17,6 +17,8 @@ declare const _default: import("vue").DefineComponent<{
     close: () => void;
     isDockable: import("vue").ComputedRef<any>;
     translatedHeaderTitle: import("vue").ComputedRef<any>;
+    headerRef: import("vue").Ref<null>;
+    headerTooltip: import("vue").ComputedRef<string>;
     infoAction: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction | undefined;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     windowState: {

package/src/manager/window/WindowManager.vue

@@ -160,9 +160,9 @@
         const position = getPosition(windowComponent);
         moveWindow(id, translation, windowManager, targetSize.value, position);
       };
-
+      const display = useDisplay();
       const addMobileClass = computed(() => {
-        return useDisplay().xs.value && componentIds.length > 0;
+        return display.xs.value && componentIds.length > 0;
       });
 
       const setTargetSize = () => {

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

@@ -19,7 +19,7 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
  *   headerComponent?: import("vue").Component<T, unknown, unknown>,
  *   state? : Partial<WindowState>,
  *   position? : Partial<WindowPositionOptions>,
- *   slot: WindowSlot,
+ *   slot?: WindowSlot,
  *   props?: T,
  *   provides?: Record<string, unknown>
  * }} WindowComponentOptions
@@ -136,7 +136,7 @@ export type WindowComponentOptions<T extends Object = Object> = {
     headerComponent?: import("vue").Component<T, unknown, unknown>;
     state?: Partial<WindowState>;
     position?: Partial<WindowPositionOptions>;
-    slot: WindowSlot;
+    slot?: WindowSlot;
     props?: T;
     provides?: Record<string, unknown>;
 };

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';
 
 /**
@@ -109,7 +109,7 @@ export function isSlotPosition(windowPosition) {
  *   headerComponent?: import("vue").Component<T, unknown, unknown>,
  *   state? : Partial<WindowState>,
  *   position? : Partial<WindowPositionOptions>,
- *   slot: WindowSlot,
+ *   slot?: WindowSlot,
  *   props?: T,
  *   provides?: Record<string, unknown>
  * }} WindowComponentOptions
@@ -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

@@ -249,6 +249,25 @@
       const showOverviewButton = ref(
         app.overviewMap.map.layerCollection.size > 0,
       );
+
+      const handleOverviewMapActiveOnStartup = (item) => {
+        if (
+          item &&
+          item.name === 'overviewMapActiveOnStartup' &&
+          showOverviewButton.value &&
+          item.value &&
+          !overviewAction.active
+        ) {
+          overviewAction.callback();
+        }
+      };
+      handleOverviewMapActiveOnStartup(
+        app.uiConfig.getByKey('overviewMapActiveOnStartup'),
+      );
+      const uiConfigListener = app.uiConfig.added.addEventListener(
+        handleOverviewMapActiveOnStartup,
+      );
+
       // Locator
       const { action: locatorAction, destroy: destroyLocator } =
         createLocatorAction(app);
@@ -286,6 +305,7 @@
       const { action: homeAction, destroy: homeDestroy } = setupHomeButton(app);
 
       onUnmounted(() => {
+        uiConfigListener();
         if (overviewDestroy) {
           overviewDestroy();
         }

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),
+    app.uiConfig.config.primaryColor ?? getDefaultPrimaryColor(app),
   )
     .withAlpha(opacity)
     .toCssColorString();

package/src/navigation/overviewMap.js

@@ -140,7 +140,7 @@ class OverviewMap {
     this._obliqueSelectedImageLayer = null;
 
     const primary =
-      app.uiConfig.config.value.primaryColor ?? getDefaultPrimaryColor(app);
+      app.uiConfig.config.primaryColor ?? getDefaultPrimaryColor(app);
     const fillColor = Color.fromCssColorString('#EDEDED');
 
     /**

package/src/notifier/NotifierComponent.vue

@@ -5,6 +5,7 @@
       :key="notification.id"
       v-model="notification.open"
       :timeout="notification.timeout"
+      class="vcs-notifier"
     >
       <v-icon :color="notification.type">
         {{ icon[notification.type] }}
@@ -63,21 +64,23 @@
 </script>
 
 <style lang="scss" scoped>
-  .v-snack {
-    :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;
+  .vcs-notifier {
+    opacity: 0.95;
+  }
+  :deep(.v-snackbar__content) {
+    display: grid;
+    padding: 8px 8px;
+    gap: 8px 4px;
+    grid-template-columns: 20px auto;
+    .v-icon {
+      grid-row-start: 1;
+      grid-row-end: 3;
+      align-self: start;
+      font-size: var(--v-vcs-font-size);
     }
   }
+  :deep(.v-snackbar__actions) {
+    align-self: flex-start;
+    margin-top: 4px;
+  }
 </style>

package/src/search/ResultItem.vue

@@ -1,13 +1,18 @@
 <template>
-  <v-list-item class="ma-2 d-flex flex-row align-center" v-if="item">
+  <v-list-item v-if="item" v-bind="$attrs">
     <template #prepend v-if="item.icon">
       <v-icon>
         {{ item.icon }}
       </v-icon>
     </template>
-    <div class="px-2 d-flex align-center" :title="$t('search.select')">
-      <span v-html="marked" />
-    </div>
+    <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"
@@ -21,7 +26,12 @@
 
 <script>
   import { computed } from 'vue';
-  import { VIcon, VListItem } from 'vuetify/components';
+  import {
+    VIcon,
+    VListItem,
+    VListItemTitle,
+    VTooltip,
+  } from 'vuetify/components';
   import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
 
   /**
@@ -38,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>',
         );
       });
     }
@@ -58,6 +68,8 @@
       VcsActionButtonList,
       VIcon,
       VListItem,
+      VListItemTitle,
+      VTooltip,
     },
     props: {
       query: {

package/src/search/ResultsComponent.vue

@@ -1,15 +1,16 @@
 <template>
   <v-list
-    density="compact"
     class="ma-0 overflow-y-auto vcs-search-results"
-    v-model="highlighted"
+    v-model:selected="highlighted"
   >
     <ResultItem
       :item="item"
       :query="query"
-      class="cursor-pointer px-0"
-      v-for="(item, index) in results"
+      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>
@@ -22,7 +23,7 @@
   /**
    * @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 {
@@ -42,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),
+            ];
           }
         },
       );
@@ -68,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();
             }
           },
@@ -85,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,7 +8,8 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }, {
-    highlighted: import("vue").WritableComputedRef<number>;
+    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;

package/src/search/SearchComponent.vue

@@ -1,17 +1,17 @@
 <template>
   <v-sheet>
     <span class="d-flex justify-space-between align-center mt-1 ml-2">
-      <v-icon class="pa-1"> $vcsSearch </v-icon>
+      <v-icon class="pa-1" :size="itemHeight - 8"> $vcsSearch </v-icon>
       <VcsTextField
         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" />
@@ -26,18 +26,8 @@
 </template>
 
 <style lang="scss" scoped>
-  :deep(.v-input) {
-    fieldset {
-      padding: 0 !important;
-    }
-    fieldset,
-    input {
-      border-color: transparent !important;
-    }
-  }
-  :deep(.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;
@@ -51,6 +41,7 @@
   import VcsTextField from '../components/form-inputs-controls/VcsTextField.vue';
   import ResultsComponent from './ResultsComponent.vue';
   import VcsFormButton from '../components/buttons/VcsFormButton.vue';
+  import { useItemHeight } from '../vuePlugins/vuetify.js';
 
   /**
    * @description Stylized search component providing an input field for search inputs.
@@ -103,6 +94,8 @@
         clear();
       });
 
+      const itemHeight = useItemHeight();
+
       return {
         query,
         searching,
@@ -111,6 +104,7 @@
         clear,
         search,
         zoomToAll,
+        itemHeight,
       };
     },
   };

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

@@ -6,5 +6,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     clear: () => void;
     search: () => Promise<void>;
     zoomToAll: () => void;
+    itemHeight: 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.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';
 
@@ -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,5 +1,3 @@
-@import 'vcsFont.scss';
-
 .v-application,
 .v-overlay-container {
   h1,

package/src/styles/main.scss

@@ -1,8 +1,4 @@
 @import './typography';
-@import './shades';
-@import './variables';
-@import './vcsFont';
-@import './vcsGrid';
 @import './vcsList';
 
 /* latin-ext */