Models Package

Models Package

The packages/models directory contains shared TypeScript interfaces for API responses, particularly for Laravel-style paginated responses.

---

LaravelResponse<T>

The main response wrapper for paginated API responses.

export interface LaravelResponse<T> {
  data?: Array<T>;
  meta?: Meta;
}

Usage

import type { LaravelResponse } from '@ion-components/packages/models/api.model';

interface Product {
  id: number;
  name: string;
  price: number;
}

// API response type
type ProductsResponse = LaravelResponse<Product>;

// Usage with Axios
async function fetchProducts(): Promise<Product[]> {
  const response = await axios.get<ProductsResponse>('/api/products');
  return response.data.data ?? [];
}

---

Meta

Pagination and filtering metadata.

export interface Meta {
  filter: string;
  search: string | null;
  sort_by: string;
  sort_order: string;
  count: number;
  total_pages: number;
  current_page: number;
  from: number;
  last_page: number;
  links: Link[];
  path: string;
  per_page: number;
  to: number;
  total: number;
}

Meta Properties

Property	Type	Description
filter	string	Current filter applied
search	string | null	Search query if any
sort_by	string	Field being sorted by
sort_order	string	Sort direction (asc or desc)
count	number	Items in current page
total_pages	number	Total number of pages
current_page	number	Current page number
from	number	First item index on page
to	number	Last item index on page
last_page	number	Last page number
per_page	number	Items per page
total	number	Total items across all pages
path	string	Base API path
links	Link[]	Pagination links

---

Link

Pagination link structure.

export interface Link {
  url?: null | string;
  label?: string;
  active?: boolean;
}

Link Properties

Property	Type	Description
url	string | null	URL for this page (null if not available)
label	string	Display label (number or “Previous”/“Next”)
active	boolean	Whether this is the current page

---

Complete Example

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import type { LaravelResponse, Meta } from '@ion-components/packages/models/api.model';
import axios from 'axios';

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}

const users = ref<User[]>([]);
const meta = ref<Meta | null>(null);
const currentPage = ref(1);
const perPage = ref(10);
const loading = ref(false);

const totalPages = computed(() => meta.value?.total_pages ?? 0);
const showing = computed(() => {
  if (!meta.value) return '';
  return `Showing ${meta.value.from} to ${meta.value.to} of ${meta.value.total}`;
});

async function fetchUsers(page = 1) {
  loading.value = true;

  try {
    const response = await axios.get<LaravelResponse<User>>('/api/users', {
      params: {
        page,
        per_page: perPage.value,
      },
    });

    users.value = response.data.data ?? [];
    meta.value = response.data.meta ?? null;
    currentPage.value = meta.value?.current_page ?? 1;

  } finally {
    loading.value = false;
  }
}

function goToPage(page: number) {
  if (page >= 1 && page <= totalPages.value) {
    fetchUsers(page);
  }
}

onMounted(() => fetchUsers());
</script>

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Role</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role }}</td>
        </tr>
      </tbody>
    </table>

    <!-- Pagination -->
    <div class="pagination">
      <span>{{ showing }}</span>

      <div class="pagination-controls">
        <button
          @click="goToPage(currentPage - 1)"
          :disabled="currentPage <= 1"
        >
          Previous
        </button>

        <template v-for="link in meta?.links" :key="link.label">
          <button
            v-if="link.url !== null"
            @click="goToPage(Number(link.label))"
            :class="{ active: link.active }"
          >
            {{ link.label }}
          </button>
        </template>

        <button
          @click="goToPage(currentPage + 1)"
          :disabled="currentPage >= totalPages"
        >
          Next
        </button>
      </div>
    </div>
  </div>
</template>

---

Source Code

packages/models/api.model.ts

export interface LaravelResponse<T> {
  data?: Array<T>;
  meta?: Meta;
}

export interface Meta {
  filter: string;
  search: string | null;
  sort_by: string;
  sort_order: string;
  count: number;
  total_pages: number;
  current_page: number;
  from: number;
  last_page: number;
  links: Link[];
  path: string;
  per_page: number;
  to: number;
  total: number;
}

export interface Link {
  url?: null | string;
  label?: string;
  active?: boolean;
}

---

See Also

• API Service