# All files / components FilterSearchbar.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

    2x

    2x

     <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>