<script setup>
import { ref } from 'vue';
import AisTable from '@/components/table/AisTable.vue'

const fields = ref([
  { key: 'event', label: 'Event', class: 'whitespace-nowrap' },
  { key: 'args', label: 'Arguments' },
  { key: 'descr', label: 'Description'},
])
const items = ref([
  { event: 'filtered', args: 'filter', descr: 'Emitted when local filtering causes a change in the number of items' },
  { event: 'head-clicked', args: 'head', descr: 'Emitted when a header or footer cell is clicked' },
  { event: 'row-clicked', args: 'row', descr: 'Emitted when a row is clicked' },
  { event: 'row-contextmenu', args: 'row', descr: 'Emitted when a row is right clicked' },
  { event: 'row-dblclicked', args: 'row', descr: 'Emitted when a row is double clicked' },
  { event: 'row-hovered', args: 'row', descr: 'Emitted when a row is hovered' },
  { event: 'row-unhovered', args: 'row', descr: 'Emitted when a row is unhovered' },
  { event: 'sort-changed', args: 'sort', descr: 'Emitted when the sorting on the table has changed' },
])
</script>


<template>
  <div>
    <AisTable
        bordered striped sticky-headers
        :fields="fields"
        :items="items"
        table-class="mt-0"
        sticky-top="top-[57px]"
    >
      <template #body(args)="{ value }">
        <ul class="m-0 ml-5">
          <li v-if="value === 'filter'"><span class="text-info">filteredItems</span> -  Array of items after filtering (before local pagination occurs)</li>
          <li v-if="value === 'head'"><span class="text-info">key</span> -  Column key clicked (field name)</li>
          <li v-if="value === 'head'"><span class="text-info">field</span> -  Field definition object</li>
          <li v-if="value === 'head'"><span class="text-info">event</span> -  Native event object</li>
          <li v-if="value === 'head'"><span class="text-info">isFooter</span> -  'True' if this event originated from clicking on the footer cell</li>
          <li v-if="value === 'row'"><span class="text-info">item</span> -  Item data of the row being clicked</li>
          <li v-if="value === 'row'"><span class="text-info">index</span> -  Index of the row being clicked</li>
          <li v-if="value === 'row'"><span class="text-info">event</span> -  Native event object</li>
          <li v-if="value === 'sort'"><span class="text-info">item</span> -  The array representing the new sort order</li>
        </ul>
      </template>
    </AisTable>
  </div>
</template>
