All files / components Searchbar.vue

100% Statements 9/9
100% Branches 0/0
100% Functions 1/1
100% Lines 9/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38      1x     1x                                                              
<template>
  <div class="d-flex justify-content-end align-items-center">
    <div 
      class="input-group" 
      style="max-width: 200px; 
      margin-bottom: 2rem;"
    >
      <input 
        type="text" 
        class="form-control rounded-pill" 
        placeholder="Filter tabs..." 
        aria-label="Search" 
        aria-describedby="button-addon2" 
        @input="handleInputChange"
      >
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const filteredTabs = ref([]);
const emits = defineEmits(['filteredTabs']);
 
const props = defineProps({
  tabs: {
      type: Array,
      default: null,
    },
});
 
const handleInputChange = (event) => {
  const searchTerm = event.target.value.toLowerCase();
  filteredTabs.value = props.tabs.filter(tab => tab.name.toLowerCase().includes(searchTerm));
  emits('filteredTabs', filteredTabs.value);
}
</script>