Interface

Registry

<Registry :table :rows :filters v-slot="{ data }">
  {{data.name}} <!-- Custom Item Template--->
</Registry>

<Registry :table :rows :filters v-slot="{ data }">
  <DescriptionList :data view="template1" :columns :link/>
</Registry>

interface Registry {
  rows: any[];
  filters: FilterItem[];
  table: string;
}

interface RegistrySlots {
  default?: { data: object }; // Item Template
}

<script setup lang="ts">
// using interface
defineProps<Registry>()
defineSlots<RegistrySlots>()
</script>

FilterItem

interface FilterItem {
  type: 'text' | 'checkbox' | 'check' | 'range' | 'date' | 'tags';
  label: string;
  width: number;
  options?: ListItem[];
  placeholder?: string;
  api?: string;
  cleanable?: boolean;
}

interface ListItem {
  text: string;
  id: any;
  count?: number;
  color?: string;
  icon?: string;
}

Description List

Template Source

<DescriptionList :data view="template1" :columns :link/>

const View  = 'template1' | 'template2' | 'template3' | 'template4' | 'template5';

interface DescriptionList {
  data: object;         // object data
  columns: Column[];    // schema
  view?: View;          // overall view mode for the list
  link: string;         // link button
}

interface Column {
  meta: 'features' | 'title' | 'status' | 'category' | 'image' | 'tags' ;
  name: string;
  label: string;
  type: string;
}