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

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/siteConfig.js

@@ -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/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 */

package/src/uiConfig.d.ts

@@ -88,6 +88,50 @@ export type UiConfigObject = {
      * - an optional flag whether to show the Locator in the map.
      */
     showLocator?: boolean | undefined;
+    /**
+     * - can be used to hide the default Header of the map
+     */
+    hideHeader?: boolean | undefined;
+    /**
+     * - can be used to hide the integrated Search bar
+     */
+    hideSearch?: boolean | undefined;
+    /**
+     * - can be used to hide the default Map Buttons
+     */
+    hideMapButtons?: boolean | undefined;
+    /**
+     * - can be used to hide the toolbox
+     */
+    hideToolbox?: boolean | undefined;
+    /**
+     * - can be used to hide the navigation
+     */
+    hideMapNavigation?: boolean | undefined;
+    /**
+     * - can be used to hide the footer
+     */
+    hideFooter?: boolean | undefined;
+    /**
+     * - can be used to hide the myWorkspace button
+     */
+    hideMyWorkspace?: boolean | undefined;
+    /**
+     * - can be used to hide the contentTree
+     */
+    hideContentTree?: boolean | undefined;
+    /**
+     * - can be used to hide the legend
+     */
+    hideLegend?: boolean | undefined;
+    /**
+     * - can be used to hide the settings Window
+     */
+    hideSettings?: boolean | undefined;
+    /**
+     * - can be used to activate the overviewMap on startup
+     */
+    overviewMapActiveOnStartup?: boolean | undefined;
     /**
      * - the display quality settings
      */
@@ -146,6 +190,17 @@ export type UiConfigObject = {
  * @property {string} [favicon] - the favicon to set
  * @property {string} [headerTitle] - the title to display in the tab of the browser
  * @property {boolean} [showLocator] - an optional flag whether to show the Locator in the map.
+ * @property {boolean} [hideHeader] - can be used to hide the default Header of the map
+ * @property {boolean} [hideSearch] - can be used to hide the integrated Search bar
+ * @property {boolean} [hideMapButtons] - can be used to hide the default Map Buttons
+ * @property {boolean} [hideToolbox] - can be used to hide the toolbox
+ * @property {boolean} [hideMapNavigation] - can be used to hide the navigation
+ * @property {boolean} [hideFooter] - can be used to hide the footer
+ * @property {boolean} [hideMyWorkspace] - can be used to hide the myWorkspace button
+ * @property {boolean} [hideContentTree] - can be used to hide the contentTree
+ * @property {boolean} [hideLegend] - can be used to hide the legend
+ * @property {boolean} [hideSettings] - can be used to hide the settings Window
+ * @property {boolean} [overviewMapActiveOnStartup] - can be used to activate the overviewMap on startup
  * @property {import("@vcmap/core").DisplayQualityOptions} [displayQuality] - the display quality settings
  */
 /**
@@ -157,20 +212,260 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
      */
     constructor(getDynamicModuleId: () => string);
     /**
-     * @type {import("vue").Ref<Object<string, *>>}
+     * @type {import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>}
      * @private
      */
     private _config;
+    /**
+     * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>>}
+     */
+    _readonlyConfig: import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<{
+        [x: string]: any;
+    } & UiConfigObject>>;
     /**
      * @type {Array<function():void>}
      * @private
      */
     private _listeners;
     /**
-     * @type {import("vue").Ref<Object<string, unknown>|UiConfigObject>}
+     * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>>}
      */
-    get config(): import("vue").Ref<{
-        [x: string]: unknown;
-    } | UiConfigObject>;
+    get config(): {
+        readonly [x: string]: any;
+        /**
+         * - the company logo to display. this will override any and all css overrides.
+         */
+        readonly logo?: string | undefined;
+        /**
+         * - an alternative logo to display in mobile view
+         */
+        readonly mobileLogo?: string | undefined;
+        /**
+         * - an optional title to display next to the company logo
+         */
+        readonly appTitle?: string | undefined;
+        /**
+         * - an optional primary color to use in all themes
+         */
+        readonly primaryColor?: string | undefined;
+        /**
+         * - an optional flag whether to activate feature info on startup (default active)
+         */
+        readonly startingFeatureInfo?: boolean | undefined;
+        /**
+         * - mouse event, when position display is updated. Either 'click' (default) or 'move'.
+         */
+        readonly positionDisplayEventType?: string | undefined;
+        /**
+         * - an optional URL to a help landing page
+         */
+        readonly helpBaseUrl?: string | undefined;
+        /**
+         * - an option imprint, will show a link in the footer. Default title is 'footer.imprint.title'.
+         */
+        readonly imprint?: {
+            readonly title?: string | undefined;
+            readonly url?: string | {
+                readonly hash: string;
+                readonly host: string;
+                readonly hostname: string;
+                readonly href: string;
+                readonly toString: () => string;
+                readonly origin: string;
+                readonly password: string;
+                readonly pathname: string;
+                readonly port: string;
+                readonly protocol: string;
+                readonly search: string;
+                readonly searchParams: ReadonlyMap<string, string | null>;
+                readonly username: string;
+                readonly toJSON: () => string;
+            } | undefined;
+            readonly content?: string | undefined;
+        } | undefined;
+        /**
+         * - an option dataProtection, will show a link in the footer. Default title is 'footer.dataProtection.title'.
+         */
+        readonly dataProtection?: {
+            readonly title?: string | undefined;
+            readonly url?: string | {
+                readonly hash: string;
+                readonly host: string;
+                readonly hostname: string;
+                readonly href: string;
+                readonly toString: () => string;
+                readonly origin: string;
+                readonly password: string;
+                readonly pathname: string;
+                readonly port: string;
+                readonly protocol: string;
+                readonly search: string;
+                readonly searchParams: ReadonlyMap<string, string | null>;
+                readonly username: string;
+                readonly toJSON: () => string;
+            } | undefined;
+            readonly content?: string | undefined;
+        } | undefined;
+        /**
+         * - an option splashScreen, will show a splash Screen on Map Load.
+         */
+        readonly splashScreen?: {
+            readonly title?: string | undefined;
+            readonly icon?: string | undefined;
+            readonly content?: string | undefined;
+            readonly name?: string | undefined;
+            readonly checkBoxText?: string | undefined;
+            readonly buttonTitle?: string | undefined;
+            readonly menuEntry?: boolean | undefined;
+            readonly acceptInput?: boolean | undefined;
+            readonly position?: {
+                readonly width?: string | undefined;
+                readonly height?: string | undefined;
+                readonly maxHeight?: string | undefined;
+                readonly maxWidth?: string | undefined;
+            } | undefined;
+        } | undefined;
+        /**
+         * - an option customScreen, will show a Custom Menu Point that opens a window with custom content.
+         */
+        readonly customScreen?: {
+            readonly title?: string | undefined;
+            readonly icon?: string | undefined;
+            readonly content?: string | undefined;
+            readonly name?: string | undefined;
+            readonly windowPosition?: {
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly left?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly top?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly right?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly bottom?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly width?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly height?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly maxHeight?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly maxWidth?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly minHeight?: string | number | undefined;
+                /**
+                 * Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+                 */
+                readonly minWidth?: string | number | undefined;
+            } | undefined;
+        } | undefined;
+        /**
+         * - the favicon to set
+         */
+        readonly favicon?: string | undefined;
+        /**
+         * - the title to display in the tab of the browser
+         */
+        readonly headerTitle?: string | undefined;
+        /**
+         * - an optional flag whether to show the Locator in the map.
+         */
+        readonly showLocator?: boolean | undefined;
+        /**
+         * - can be used to hide the default Header of the map
+         */
+        readonly hideHeader?: boolean | undefined;
+        /**
+         * - can be used to hide the integrated Search bar
+         */
+        readonly hideSearch?: boolean | undefined;
+        /**
+         * - can be used to hide the default Map Buttons
+         */
+        readonly hideMapButtons?: boolean | undefined;
+        /**
+         * - can be used to hide the toolbox
+         */
+        readonly hideToolbox?: boolean | undefined;
+        /**
+         * - can be used to hide the navigation
+         */
+        readonly hideMapNavigation?: boolean | undefined;
+        /**
+         * - can be used to hide the footer
+         */
+        readonly hideFooter?: boolean | undefined;
+        /**
+         * - can be used to hide the myWorkspace button
+         */
+        readonly hideMyWorkspace?: boolean | undefined;
+        /**
+         * - can be used to hide the contentTree
+         */
+        readonly hideContentTree?: boolean | undefined;
+        /**
+         * - can be used to hide the legend
+         */
+        readonly hideLegend?: boolean | undefined;
+        /**
+         * - can be used to hide the settings Window
+         */
+        readonly hideSettings?: boolean | undefined;
+        /**
+         * - can be used to activate the overviewMap on startup
+         */
+        readonly overviewMapActiveOnStartup?: boolean | undefined;
+        /**
+         * - the display quality settings
+         */
+        readonly displayQuality?: {
+            readonly startingQualityLevel?: import("@vcmap/core").DisplayQualityLevel | undefined;
+            readonly startingMobileQualityLevel?: import("@vcmap/core").DisplayQualityLevel | undefined;
+            readonly low?: {
+                readonly sse?: number | undefined;
+                readonly fxaa?: boolean | undefined;
+                readonly fogEnabled?: boolean | undefined;
+                readonly fogDensity?: number | undefined;
+                readonly fogScreenSpaceErrorFactor?: number | undefined;
+                readonly resolutionScale?: number | undefined;
+                readonly layerSSEFactor?: number | undefined;
+            } | undefined;
+            readonly medium?: {
+                readonly sse?: number | undefined;
+                readonly fxaa?: boolean | undefined;
+                readonly fogEnabled?: boolean | undefined;
+                readonly fogDensity?: number | undefined;
+                readonly fogScreenSpaceErrorFactor?: number | undefined;
+                readonly resolutionScale?: number | undefined;
+                readonly layerSSEFactor?: number | undefined;
+            } | undefined;
+            readonly high?: {
+                readonly sse?: number | undefined;
+                readonly fxaa?: boolean | undefined;
+                readonly fogEnabled?: boolean | undefined;
+                readonly fogDensity?: number | undefined;
+                readonly fogScreenSpaceErrorFactor?: number | undefined;
+                readonly resolutionScale?: number | undefined;
+                readonly layerSSEFactor?: number | undefined;
+            } | undefined;
+        } | undefined;
+    };
 }
 import { Collection } from '@vcmap/core';