@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.25

package/src/navigation/vcsZoomButton.vue

@@ -30,24 +30,23 @@
   };
 </script>
 <style lang="scss" scoped>
-.vcs-navigation-zoom {
-  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 2px 0;
-  .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;
+  .vcs-navigation-zoom {
+    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 2px 0;
+    .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;
+        }
       }
     }
   }
-}
 </style>

package/src/notifier/notifier.js

@@ -36,22 +36,29 @@ export const NotificationType = {
  * @returns {Notification}
  */
 function createNotification(options, notifier) {
-  const {
-    type,
-    title,
-    message,
-    timeout,
-  } = options;
+  const { type, title, message, timeout } = options;
   const id = uuidv4();
   const open = ref(true);
 
   return {
-    get id() { return id; },
-    get type() { return type; },
-    get title() { return title; },
-    get message() { return message; },
-    get timeout() { return timeout ?? 5000; },
-    get open() { return open; },
+    get id() {
+      return id;
+    },
+    get type() {
+      return type;
+    },
+    get title() {
+      return title;
+    },
+    get message() {
+      return message;
+    },
+    get timeout() {
+      return timeout ?? 5000;
+    },
+    get open() {
+      return open;
+    },
     set open(value) {
       open.value = value?.value ?? value; // when used as a v-model, this is set as a boolean
       if (!open.value) {
@@ -105,7 +112,9 @@ class Notifier {
    */
   remove(notification) {
     // reassign to trigger update
-    this._notifications.value = this._notifications.value.filter(n => n !== notification);
+    this._notifications.value = this._notifications.value.filter(
+      (n) => n !== notification,
+    );
   }
 
   /**

package/src/notifier/notifierComponent.vue

@@ -2,21 +2,20 @@
   <div>
     <v-snackbar
       dark
-      v-for="(notification) in notifications"
+      v-for="notification in notifications"
       :key="notification.id"
       v-model="notification.open"
       :timeout="notification.timeout"
     >
-      <v-icon
-        :color="notification.type"
-      >
+      <v-icon :color="notification.type">
         {{ icon[notification.type] }}
       </v-icon>
-      <span class="snack-title">{{ $t(notification.title || defaultTitle[notification.type]) }}</span>
+      <span class="snack-title">{{
+        $t(notification.title || defaultTitle[notification.type])
+      }}</span>
       <template #action="{ attrs }">
         <VcsButton
           icon="mdi-close"
-          small
           v-bind="attrs"
           @click="notification.open = false"
         />
@@ -62,23 +61,23 @@
 </script>
 
 <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 {
+    ::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;
       }
-    }
-    .v-snack__action{
-      align-self: flex-start;
-      margin-top: 4px;
     }
   }
-}
 </style>

package/src/pluginHelper.js

@@ -61,7 +61,9 @@ export function getPluginAssetUrl(app, pluginName, asset) {
 export function isValidPackageName(name) {
   check(name, String);
 
-  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(name);
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
+    name,
+  );
 }
 
 /**
@@ -73,9 +75,20 @@ export async function loadPlugin(name, config) {
   let module = config.entry;
 
   if (!/^(https?:\/\/|\/)/.test(module)) {
-    module = `${window.location.origin}${window.location.pathname.replace(/\/?$/, '/')}${module}`;
+    module = `${window.location.origin}${window.location.pathname.replace(
+      /\/?$/,
+      '/',
+    )}${module}`;
   } else if (module === '_dev') {
     module = `/${name}.js`;
+  } else if (module === 'http://localhost/_test') {
+    // early escape to bypass module loading for testing, see VcsUiApp.spec.js
+    return null;
+  }
+  if (config.version) {
+    const moduleUrl = new URL(module, window.location.href);
+    moduleUrl.searchParams.set('version', config.version);
+    module = moduleUrl.toString();
   }
 
   // if (!context.security.isTrustedUrl(module)) { XXX missing pipeline security
@@ -85,13 +98,16 @@ export async function loadPlugin(name, config) {
 
   try {
     let plugin;
-    if (window.VcsPluginLoaderFunction) { // TODO PluginLoaderfunction needs to be documented.
+    if (window.VcsPluginLoaderFunction) {
+      // TODO PluginLoaderfunction needs to be documented.
       plugin = await window.VcsPluginLoaderFunction(name, module);
     } else {
       plugin = await import(/* @vite-ignore */ module);
     }
     if (plugin.default == null || typeof plugin.default !== 'function') {
-      getLogger().error(`plugin ${name} does not provide a default exported function`);
+      getLogger().error(
+        `plugin ${name} does not provide a default exported function`,
+      );
       return null;
     }
     const baseUrl = new URL(module);
@@ -128,9 +144,7 @@ export function getPluginEntry(base, pluginBase) {
   }
   const baseSubs = baseUrl.pathname.split('/');
   const pluginSubs = pluginBaseUrl.pathname.split('/');
-  return pluginSubs
-    .filter((sub, idx) => sub !== baseSubs[idx])
-    .join('/');
+  return pluginSubs.filter((sub, idx) => sub !== baseSubs[idx]).join('/');
 }
 
 /**
@@ -140,7 +154,10 @@ export function getPluginEntry(base, pluginBase) {
 export function serializePlugin(plugin) {
   const serializedPlugin = plugin.toJSON ? plugin.toJSON() : {};
   serializedPlugin.name = plugin.name;
-  serializedPlugin.entry = getPluginEntry(window.location.href, plugin[pluginBaseUrlSymbol]);
+  serializedPlugin.entry = getPluginEntry(
+    window.location.href,
+    plugin[pluginBaseUrlSymbol],
+  );
   serializedPlugin[pluginFactorySymbol] = plugin[pluginFactorySymbol];
   serializedPlugin[pluginBaseUrlSymbol] = plugin[pluginBaseUrlSymbol];
   return serializedPlugin;
@@ -151,7 +168,9 @@ export function serializePlugin(plugin) {
  * @returns {Promise<VcsPlugin>}
  */
 export async function deserializePlugin(serializedPlugin) {
-  const reincarnation = await serializedPlugin[pluginFactorySymbol](serializedPlugin);
+  const reincarnation = await serializedPlugin[pluginFactorySymbol](
+    serializedPlugin,
+  );
   reincarnation[pluginFactorySymbol] = serializedPlugin[pluginFactorySymbol];
   reincarnation[pluginBaseUrlSymbol] = serializedPlugin[pluginBaseUrlSymbol];
   return reincarnation;

package/src/search/resultItem.vue

@@ -1,17 +1,11 @@
 <template>
-  <div
-    class="ma-1 d-flex flex-row align-center"
-    v-if="item"
-  >
+  <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-icon>
         {{ item.icon }}
       </v-icon>
     </v-list-item-icon>
-    <div
-      class="px-2 d-flex align-center"
-      :title="$t('search.select')"
-    >
+    <div class="px-2 d-flex align-center" :title="$t('search.select')">
       <span v-html="marked" />
     </div>
     <VcsActionButtonList
@@ -19,7 +13,6 @@
       :actions="item.actions"
       :block-overflow="true"
       :overflow-count="2"
-      small
       right
     />
   </div>
@@ -38,11 +31,14 @@
   function markText(text, query) {
     let replacement = text;
     if (query) {
-      const partials = query.split(/[.,\s]/)
-        .filter(partial => partial.trim());
+      const partials = query
+        .split(/[.,\s]/)
+        .filter((partial) => partial.trim());
       partials.forEach((partial) => {
-        replacement = replacement
-          .replaceAll(new RegExp(`(^|[^>])(${partial})`, 'ig'), '<span class="primary--text">$2</span>');
+        replacement = replacement.replaceAll(
+          new RegExp(`(^|[^>])(${partial})`, 'ig'),
+          '<span class="primary--text">$2</span>',
+        );
       });
     }
     return replacement;
@@ -84,6 +80,4 @@
   };
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

package/src/search/resultsComponent.vue

@@ -1,22 +1,13 @@
 <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-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"
-          />
+          <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>
@@ -26,7 +17,13 @@
 
 <script>
   import { inject, onUnmounted, ref, computed } from 'vue';
-  import { VDivider, VList, VListItem, VListItemContent, VListItemGroup } from 'vuetify/lib';
+  import {
+    VDivider,
+    VList,
+    VListItem,
+    VListItemContent,
+    VListItemGroup,
+  } from 'vuetify/lib';
   import ResultItem from './resultItem.vue';
 
   /**
@@ -59,16 +56,23 @@
       const highlightedRef = ref(-1);
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
-      const selectedListener = app.featureInfo.featureChanged.addEventListener((feature) => {
-        if (highlightedRef.value >= 0) {
-          if (feature && props.results[highlightedRef.value].feature === feature) {
-            return;
+      const selectedListener = app.featureInfo.featureChanged.addEventListener(
+        (feature) => {
+          if (highlightedRef.value >= 0) {
+            if (
+              feature &&
+              props.results[highlightedRef.value].feature === feature
+            ) {
+              return;
+            }
+            highlightedRef.value = -1;
+          } else if (feature) {
+            highlightedRef.value = props.results.findIndex(
+              (r) => r.feature === feature,
+            );
           }
-          highlightedRef.value = -1;
-        } else if (feature) {
-          highlightedRef.value = props.results.findIndex(r => r.feature === feature);
-        }
-      });
+        },
+      );
 
       onUnmounted(() => {
         selectedListener();
@@ -76,7 +80,9 @@
 
       return {
         highlighted: computed({
-          get() { return highlightedRef.value; },
+          get() {
+            return highlightedRef.value;
+          },
           set(value) {
             highlightedRef.value = value;
             if (value >= 0) {

package/src/search/search.js

@@ -6,14 +6,18 @@ import {
   VcsEvent,
   vcsLayerName,
   VectorLayer,
-  VectorStyleItem, Viewpoint,
+  VectorStyleItem,
+  Viewpoint,
 } from '@vcmap/core';
 import { shallowRef } from 'vue';
 import { check } from '@vcsuite/check';
 import { Icon } from 'ol/style.js';
 import { getLogger } from '@vcsuite/logger';
 import { vcsAppSymbol } from '../pluginHelper.js';
-import { getDefaultPrimaryColor, getColorByKey } from '../vuePlugins/vuetify.js';
+import {
+  getDefaultPrimaryColor,
+  getColorByKey,
+} from '../vuePlugins/vuetify.js';
 import { getViewpointFromFeature } from '../actions/actionHelper.js';
 
 /**
@@ -27,7 +31,6 @@ import { getViewpointFromFeature } from '../actions/actionHelper.js';
  * @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.
  */
 
-
 /**
  * @interface SearchImpl
  * @property {string} name Name of the implementation. Must be the name of the plugin the SearchImpl is owned by
@@ -43,7 +46,9 @@ import { getViewpointFromFeature } from '../actions/actionHelper.js';
  */
 function getPointResultIcon(color) {
   return {
-    src: `data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' id='icon_24_poi' width='24' height='23.994' viewBox='0 0 24 23.994' sodipodi:docname='mapIcon.svg'%3E%3Cg id='Gruppe_1972' transform='translate(-571 -609.477)'%3E%3Cpath id='Pfad_773' d='M583,611a8.009,8.009,0,0,0-8,8c0,5.314,6.952,13.32,7.248,13.658a1,1,0,0,0,1.5,0c.3-.338,7.248-8.344,7.248-13.658A8.009,8.009,0,0,0,583,611Zm0,19.444c-2.18-2.685-6-8.09-6-11.444a6,6,0,0,1,12,0C589,622.354,585.18,627.759,583,630.444Z' fill='currentColor' /%3E%3Cpath id='Pfad_774' d='M583,615a4,4,0,1,0,4,4A4,4,0,0,0,583,615Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,583,621Z' fill='currentColor' /%3E%3C/g%3E%3Cpath fill='${encodeURIComponent(color)}' d='M 11.672998,20.526286 C 8.5115524,16.526958 6.4310003,12.714969 6.0702695,10.260963 6.0109099,9.8571482 6.0115821,9.1201807 6.0716855,8.7084104 6.4424582,6.1682348 8.3335069,4.1603103 10.828528,3.6575721 c 1.904966,-0.383844 3.881822,0.1903514 5.289639,1.5364231 0.993092,0.9495349 1.610829,2.1488769 1.810148,3.5144152 0.0601,0.4117703 0.06077,1.1487378 0.0014,1.5525526 -0.357076,2.429138 -2.337816,6.081898 -5.487559,10.119822 -0.224045,0.287223 -0.415188,0.530536 -0.424763,0.540696 -0.0096,0.01016 -0.16456,-0.167678 -0.344411,-0.395195 z m 0.990366,-7.047968 c 0.894914,-0.146674 1.762065,-0.627065 2.349286,-1.301476 0.86707,-0.995812 1.194989,-2.3427819 0.880571,-3.6170541 -0.379849,-1.5394474 -1.596396,-2.6842781 -3.173401,-2.9863277 -0.368703,-0.070619 -1.070937,-0.070619 -1.43964,0 C 9.7056173,5.875042 8.48604,7.0227247 8.1067793,8.5597879 7.8410265,9.6368274 8.0329903,10.787029 8.6317551,11.705317 c 0.5717674,0.876885 1.4205679,1.474277 2.4457369,1.721329 0.47704,0.114961 1.079877,0.134602 1.585872,0.05167 z' id='path1432' /%3E%3C/svg%3E`,
+    src: `data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' id='icon_24_poi' width='24' height='23.994' viewBox='0 0 24 23.994' sodipodi:docname='mapIcon.svg'%3E%3Cg id='Gruppe_1972' transform='translate(-571 -609.477)'%3E%3Cpath id='Pfad_773' d='M583,611a8.009,8.009,0,0,0-8,8c0,5.314,6.952,13.32,7.248,13.658a1,1,0,0,0,1.5,0c.3-.338,7.248-8.344,7.248-13.658A8.009,8.009,0,0,0,583,611Zm0,19.444c-2.18-2.685-6-8.09-6-11.444a6,6,0,0,1,12,0C589,622.354,585.18,627.759,583,630.444Z' fill='currentColor' /%3E%3Cpath id='Pfad_774' d='M583,615a4,4,0,1,0,4,4A4,4,0,0,0,583,615Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,583,621Z' fill='currentColor' /%3E%3C/g%3E%3Cpath fill='${encodeURIComponent(
+      color,
+    )}' d='M 11.672998,20.526286 C 8.5115524,16.526958 6.4310003,12.714969 6.0702695,10.260963 6.0109099,9.8571482 6.0115821,9.1201807 6.0716855,8.7084104 6.4424582,6.1682348 8.3335069,4.1603103 10.828528,3.6575721 c 1.904966,-0.383844 3.881822,0.1903514 5.289639,1.5364231 0.993092,0.9495349 1.610829,2.1488769 1.810148,3.5144152 0.0601,0.4117703 0.06077,1.1487378 0.0014,1.5525526 -0.357076,2.429138 -2.337816,6.081898 -5.487559,10.119822 -0.224045,0.287223 -0.415188,0.530536 -0.424763,0.540696 -0.0096,0.01016 -0.16456,-0.167678 -0.344411,-0.395195 z m 0.990366,-7.047968 c 0.894914,-0.146674 1.762065,-0.627065 2.349286,-1.301476 0.86707,-0.995812 1.194989,-2.3427819 0.880571,-3.6170541 -0.379849,-1.5394474 -1.596396,-2.6842781 -3.173401,-2.9863277 -0.368703,-0.070619 -1.070937,-0.070619 -1.43964,0 C 9.7056173,5.875042 8.48604,7.0227247 8.1067793,8.5597879 7.8410265,9.6368274 8.0329903,10.787029 8.6317551,11.705317 c 0.5717674,0.876885 1.4205679,1.474277 2.4457369,1.721329 0.47704,0.114961 1.079877,0.134602 1.585872,0.05167 z' id='path1432' /%3E%3C/svg%3E`,
     scale: 1,
     color,
   };
@@ -104,7 +109,6 @@ function setupSearchResultLayer(app) {
  */
 const searchImplOwnerSymbol = Symbol('featureInfoView');
 
-
 /**
  * Collection of SearchImpl
  * @extends {IndexedCollection<SearchImpl<ResultItem>>}
@@ -185,7 +189,9 @@ class Search extends IndexedCollection {
     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.');
+      getLogger('Search').warning(
+        'SearchImplementations must be named as the plugin they are owned by.',
+      );
     }
     item[searchImplOwnerSymbol] = owner;
     super.add(item, index);
@@ -212,8 +218,12 @@ class Search extends IndexedCollection {
    */
   async search(q) {
     this.clearResults();
-    const promises = await Promise.allSettled([...this._array].map(impl => impl.search(q)));
-    const isAborted = promises.some(r => r.status === 'rejected' && r.reason?.name === 'AbortError');
+    const promises = await Promise.allSettled(
+      [...this._array].map((impl) => impl.search(q)),
+    );
+    const isAborted = promises.some(
+      (r) => r.status === 'rejected' && r.reason?.name === 'AbortError',
+    );
     if (!isAborted) {
       const results = promises
         .map((o) => {
@@ -226,7 +236,7 @@ class Search extends IndexedCollection {
         .flat();
 
       this._currentResults.value = results
-        .filter(r => r.feature || r.clicked)
+        .filter((r) => r.feature || r.clicked)
         .map((item) => {
           if (item.feature) {
             this._resultLayer.addFeatures([item.feature]);
@@ -254,13 +264,17 @@ class Search extends IndexedCollection {
    * @returns {Promise<Array<string>>}
    */
   async suggest(q) {
-    const promises = await Promise.allSettled([...this._array].map((impl) => {
-      if (impl.suggest) {
-        return impl.suggest(q);
-      }
-      return Promise.resolve([]);
-    }));
-    const isAborted = promises.some(r => r.status === 'rejected' && r.reason?.name === 'AbortError');
+    const promises = await Promise.allSettled(
+      [...this._array].map((impl) => {
+        if (impl.suggest) {
+          return impl.suggest(q);
+        }
+        return Promise.resolve([]);
+      }),
+    );
+    const isAborted = promises.some(
+      (r) => r.status === 'rejected' && r.reason?.name === 'AbortError',
+    );
     if (isAborted) {
       return [];
     }
@@ -280,7 +294,7 @@ class Search extends IndexedCollection {
    * Aborting any ongoing request
    */
   abort() {
-    [...this._array].forEach(impl => impl.abort?.());
+    [...this._array].forEach((impl) => impl.abort?.());
   }
 
   /**
@@ -306,7 +320,10 @@ class Search extends IndexedCollection {
     }
     this._resultLayer.removeAllFeatures();
     this._resultLayer.deactivate();
-    if (this._app.featureInfo.selectedFeature?.[vcsLayerName] === this._resultLayer.name) {
+    if (
+      this._app.featureInfo.selectedFeature?.[vcsLayerName] ===
+      this._resultLayer.name
+    ) {
       this._app.featureInfo.clear();
     }
   }
@@ -315,7 +332,7 @@ class Search extends IndexedCollection {
    * @inheritDoc
    */
   destroy() {
-    [...this._array].forEach(impl => impl.destroy());
+    [...this._array].forEach((impl) => impl.destroy());
     this.resultsChanged.destroy();
     this._destroyResultLayer();
     super.destroy();

package/src/search/searchComponent.vue

@@ -1,13 +1,9 @@
 <template>
   <v-sheet>
-    <span class="d-flex justify-space-between align-center mt-1 mx-1">
-      <v-icon
-        class="mx-2"
-      >
-        $vcsSearch
-      </v-icon>
+    <span class="d-flex justify-space-between align-center mt-1 ml-2">
+      <v-icon class="pa-1"> $vcsSearch </v-icon>
       <VcsTextField
-        class="font-size-14 d-inline-block user-select-none w-full mx-2"
+        class="d-inline-block user-select-none w-full mx-1"
         autofocus
         :loading="searching"
         clearable
@@ -18,21 +14,33 @@
         @input="reset"
       />
     </span>
-    <v-divider class="mt-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" />
-    <VcsButton
-      v-if="!!results.length"
-      class="d-flex pt-1 px-1 justify-end"
-      @click="zoomToAll"
-    >
-      {{ $t('search.zoomToAll') }}
-    </VcsButton>
+    <div v-if="!!results.length" class="d-flex px-2 pt-2 pb-1 justify-end">
+      <VcsFormButton @click="zoomToAll" variant="outlined">
+        {{ $t('search.zoomToAll') }}
+      </VcsFormButton>
+    </div>
   </v-sheet>
 </template>
 
-<style>
-
+<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;
+    }
+  }
 </style>
 
 <script>
@@ -41,11 +49,11 @@
   import { VSheet, VDivider, VIcon } from 'vuetify/lib';
   import VcsTextField from '../components/form-inputs-controls/VcsTextField.vue';
   import ResultsComponent from './resultsComponent.vue';
-  import VcsButton from '../components/buttons/VcsButton.vue';
+  import VcsFormButton from '../components/buttons/VcsFormButton.vue';
 
   export default {
     components: {
-      VcsButton,
+      VcsFormButton,
       ResultsComponent,
       VcsTextField,
       VSheet,

package/src/setup.js

@@ -1,9 +1,9 @@
-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;
-
-window.CESIUM_BASE_URL = '/node_modules/@vcmap-cesium/engine/Build/';
+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;
+
+window.CESIUM_BASE_URL = '/node_modules/@vcmap-cesium/engine/Build/';