Merge pull request #16 from w3geo/default-size

Menu-like behavior

Author: ahocevar

example/src/App.vue

@@ -14,7 +14,6 @@
 
 <script setup>
 import 'ol/ol.css';
-import '../../dist/style.css';
 import Map from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';

src/components/PlaceSearch.vue

@@ -1,69 +1,72 @@
 <template>
-  <v-sheet class="searchContainer">
-    <v-autocomplete
-      v-model="model"
-      v-model:search="search"
-      auto-select-first
-      class="rounded"
-      clearable
-      :custom-filter="filter"
-      density="compact"
-      hide-details
-      hide-no-data
-      item-title="properties.name"
-      :items="items"
-      label="Ort, Adresse, Flurname,..."
-      :loading="!!abortController"
-      :prepend-inner-icon="mdiMagnify"
-      return-object
-      single-line
-      variant="outlined"
-      @blur="handleInfoVisibility(false)"
-      @click:clear="clear"
-      @focus="handleInfoVisibility(true)"
-    >
-      <template #item="{ props, item }">
-        <v-list-item
-          v-bind="props"
-          :subtitle="item.raw.type"
-          :title="item.raw.properties.name"
-        ></v-list-item>
-      </template>
-    </v-autocomplete>
-    <v-expand-transition>
-      <v-card v-show="showInfo">
-        <v-card-title>
-          <v-icon :icon="mdiInformationOutline" size="small" />
-          Ortssuche
-        </v-card-title>
-        <v-card-subtitle>
-          Die Suche des
-          <a href="https://kataster.bev.gv.at" target="_blank"
-            >Österreichischen Katasters</a
-          ><br />
-          Suche nach Orten, Adressen, und mehr
-        </v-card-subtitle>
-        <v-card-text>
-          <v-timeline align="start" density="compact" line-thickness="0">
-            <v-timeline-item
-              v-for="(helpItem, key) in helpItems"
-              :key="key"
-              density="compact"
-              dot-color="success"
-              :icon="mdiTextSearchVariant"
-            >
-              <div>
-                <div class="font-weight-normal">
-                  <strong> {{ helpItem.name }}</strong>
-                </div>
-                {{ helpItem.example }}
+  <v-autocomplete
+    ref="autocompleteRef"
+    v-model="model"
+    v-model:search="search"
+    auto-select-first
+    class="rounded"
+    clearable
+    :custom-filter="filter"
+    density="compact"
+    hide-details
+    hide-no-data
+    item-title="properties.name"
+    :items="items"
+    label="Ort, Adresse, Flurname,..."
+    :loading="!!abortController"
+    min-width="280"
+    :prepend-inner-icon="mdiMagnify"
+    return-object
+    single-line
+    variant="outlined"
+    @click:clear="clear"
+    @focus="handleInfoVisibility(true)"
+  >
+    <template #item="{ props, item }">
+      <v-list-item
+        v-bind="props"
+        :id="item.raw.id"
+        :key="item.raw.id"
+        :subtitle="item.raw.type"
+        :title="item.raw.properties.name"
+        :value="item.raw.id"
+      ></v-list-item>
+    </template>
+  </v-autocomplete>
+
+  <v-menu v-model="showInfo" :target="autocompleteRef">
+    <v-card>
+      <v-card-title>
+        <v-icon :icon="mdiInformationOutline" size="small" />
+        Ortssuche
+      </v-card-title>
+      <v-card-subtitle>
+        Die Suche des
+        <a href="https://kataster.bev.gv.at" target="_blank"
+          >Österreichischen Katasters</a
+        ><br />
+        Suche nach Orten, Adressen, und mehr
+      </v-card-subtitle>
+      <v-card-text>
+        <v-timeline align="start" density="compact" line-thickness="0">
+          <v-timeline-item
+            v-for="(helpItem, key) in helpItems"
+            :key="key"
+            density="compact"
+            dot-color="success"
+            :icon="mdiTextSearchVariant"
+          >
+            <div>
+              <div class="font-weight-normal">
+                <strong> {{ helpItem.name }}</strong>
               </div>
-            </v-timeline-item>
-          </v-timeline>
-        </v-card-text>
-      </v-card>
-    </v-expand-transition>
-  </v-sheet>
+              {{ helpItem.example }}
+            </div>
+          </v-timeline-item>
+        </v-timeline>
+      </v-card-text>
+    </v-card>
+  </v-menu>
 </template>
 
 <script setup>
@@ -94,6 +97,7 @@ import {
  * @property {string} id
  */
 
+const autocompleteRef = ref(null);
 const { result } = usePlaceSearch();
 const emit = defineEmits(['result']);
 
@@ -215,9 +219,3 @@ function handleInfoVisibility(visible) {
   }
 }
 </script>
-
-<style scoped>
-.searchContainer {
-  position: relative;
-}
-</style>