logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

autosuggest.vue (1093B)

    

  1. <!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
  2. <template>
  3.   <div
  4.     v-click-outside="onClickOutside"
  5.     class="autosuggest"
  6.   >
  7.     <input
  8.       v-model="term"
  9.       :placeholder="placeholder"
  10.       class="input autosuggest-input"
  11.       @click="onInputClick"
  12.     >
  13.     <div
  14.       v-if="resultsVisible && filtered.length > 0"
  15.       class="panel autosuggest-results"
  16.     >
  17.       <slot
  18.         v-for="item in filtered"
  19.         :item="item"
  20.       />
  21.     </div>
  22.   </div>
  23. </template>
  25. <script src="./autosuggest.js"></script>
  27. <style lang="scss">
  28. .autosuggest {
  29.   position: relative;
  31.   &-input {
  32.     display: block;
  33.     width: 100%;
  34.   }
  36.   &-results {
  37.     position: absolute;
  38.     left: 0;
  39.     top: 100%;
  40.     right: 0;
  41.     max-height: 400px;
  42.     background-color: var(--bg);
  43.     border-style: solid;
  44.     border-width: 1px;
  45.     border-color: var(--border);
  46.     border-radius: var(--roundness);
  47.     border-top-left-radius: 0;
  48.     border-top-right-radius: 0;
  49.     box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
  50.     box-shadow: var(--shadow);
  51.     overflow-y: auto;
  52.     z-index: 1;
  53.   }
  54. }
  55. </style>