<script setup>
import { ref, computed } from "vue";
import { q } from "#imports";
const { system } = await q({
  system: {
    package: true
  }
});
const filter = ref("");
const filtered = computed(() => {
  if (!filter.value) return system.package;
  return system.package.filter((row) => {
    return Object.values(row).some((val) => {
      return String(val).toLowerCase().includes(filter.value.toLowerCase());
    });
  });
});
</script>

<template>
    <l-page title="System package">
        <q-table dense :rows="filtered" :rows-per-page-options="[0]" hide-pagination flat bordered separator="cell">
            <template v-slot:top-right>
                <q-input outlined dense debounce="300" v-model="filter" placeholder="Search">
                    <template v-slot:append>
                        <q-icon name="sym_o_search" />
                    </template>
                </q-input>
            </template>
        </q-table>
    </l-page>
</template>
