barmar/tethys.frontend
1
0
Fork 0
forked from geolba/tethys.frontend
Code Pull requests Activity

Initial test comments added. Some original commented code deleted

Browse source
This commit is contained in:
Porras-Bernardez 2024-05-07 13:54:28 +02:00
parent d75ab4f367
commit 3dbb04d737
4 changed files with 22 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/vs-input/vs-input.vue
View file

@ -1,10 +1,15 @@
<template>
<!-- Parent container with multiple rows -->
<div class="is-multiline">
<!-- <div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px"> -->
<!-- Search input wrapper -->
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
<!-- Search box -->
<div class="search-box mx-auto">
<!-- Search field -->
<div class="field has-addons main-search-from-bg">
<div class="control is-expanded">
<!-- Input field for search query -->
<input
id="search_query"
v-model="display"
@ -20,24 +25,26 @@
@keydown.tab="close"
@focus="focus"
/>
<!-- <p>Display is: {{ display }}</p> -->
<!-- v-on:input="searchChanged" -->
</div>
<!-- Search button -->
<div class="control">
<button class="button input is-medium search-button-icon" @click="search()">
<!-- <img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" /> -->
<!-- Search icon -->
<i class="fas fa-search text-white"></i>
</button>
</div>
</div>
</div>
</div>
<!-- <div class="column is-half is-offset-one-quarter"> -->
<!-- Suggestions list -->
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
<ul v-show="showResults" class="autocomplete-results pure-u-23-24">
<!-- Loading indicator -->
<li v-if="isLoading" class="loading">Loading results...</li>
<!-- Iterating over suggestions -->
<li
v-for="(result, i) in suggestions"
v-else
@ -47,6 +54,7 @@
v-bind:class="{ 'is-active': isSelected(i) }"
@click.prevent="select(result)"
>
<!-- Displaying suggestion result -->
<div class="small-label">
<label>{{ result.value }} ({{ result.type }})</label>
</div>