Vue and Nuxt quick start

products/
  shared/products.ts
  vue/product-config.ts
  vue/product-actions.ts
  vue/products.vue
  vue/main.ts

export interface Product extends Record<string, unknown> {
  active: boolean;
  id: string;
  image: string;
  name: string;
  price: number;
  /** Civil dates, inclusive at both ends: the window a batch is being restocked. */
  restockFrom: string;
  restockTo: string;
  status: "draft" | "active" | "archived";
  stock: number;
  tags: string[];
  updatedAt: string;
}

export const products: Product[] = [
  {
    id: "desk",
    name: "Oak desk",
    price: 420,
    stock: 12,
    status: "active",
    active: true,
    tags: ["office", "wood"],
    image: "https://placehold.co/640x480/png?text=Oak+desk",
    restockFrom: "2026-09-14",
    restockTo: "2026-09-18",
    updatedAt: "2026-09-01T09:00:00Z",
  },
  {
    id: "lamp",
    name: "Desk lamp",
    price: 65,
    stock: 0,
    status: "draft",
    active: false,
    tags: ["office"],
    image: "https://placehold.co/640x480/png?text=Desk+lamp",
    restockFrom: "2026-09-17",
    restockTo: "2026-09-24",
    updatedAt: "2026-09-02T09:00:00Z",
  },
  {
    id: "chair",
    name: "Studio chair",
    price: 180,
    stock: 6,
    status: "active",
    active: true,
    tags: ["office", "seating"],
    image: "https://placehold.co/640x480/png?text=Studio+chair",
    restockFrom: "2026-09-23",
    restockTo: "2026-10-02",
    updatedAt: "2026-09-03T09:00:00Z",
  },
];

import { defineTableConfig } from "@/components/ui/yayaw-table-vue";

export const productConfig = defineTableConfig({
  id: "products",
  translations: { namespace: "products", keys: {} },
  columns: {
    definitions: [
      { id: "name", header: "Name", type: "text" },
      { id: "price", header: "Price", type: "number" },
      { id: "stock", header: "Stock", type: "number" },
      {
        id: "status",
        header: "Status",
        type: "select",
        options: [
          { label: "Draft", value: "draft" },
          { label: "Active", value: "active" },
          { label: "Archived", value: "archived" },
        ],
      },
    ],
    order: ["name", "price", "stock", "status"],
    visible: ["name", "price", "stock", "status"],
    mandatory: ["name"],
    sort: [{ id: "name", desc: false }],
  },
  table: {
    allowCreate: false,
    allowEdit: false,
    allowDelete: false,
    allowDuplicate: false,
    allowBulkEdit: false,
    allowBulkDelete: false,
    enableRowSelection: false,
    enableViews: false,
    syncUrl: false,
    defaultPageSize: 10,
  },
});

export const getTableConfig = (tableType: string) =>
  tableType === "products" ? productConfig : undefined;

import type { TableActions } from "@/components/ui/yayaw-table-vue/types";
import { products } from "../shared/products";
import { listRecords } from "./list-records";

export const productActions: TableActions = {
  list: (input) => listRecords(products, input),
};
export const getTableActions = (tableType: string) =>
  tableType === "products" ? productActions : undefined;

import {
  compatibleListParams,
  matchesContractFilter,
  normalizeFilterEnvelope,
  recordValue,
} from "@/components/ui/yayaw-table-vue/table-contracts";

export function listRecords<T extends Record<string, unknown>>(
  rows: T[],
  input: unknown
) {
  const params = compatibleListParams(recordValue(input));
  const page = Number(params.page);
  const limit = Number(params.limit);
  const search = String(params.search).toLowerCase();
  const filters = Object.entries(recordValue(params.filters));
  const advanced = normalizeFilterEnvelope(params.advancedFilters).filters;
  const matching = rows.filter((product) => {
    const row: Record<string, unknown> = product;
    const matchesSearch =
      !search ||
      ["name", "reference", "price", "stock", "status", "active", "tags"].some(
        (key) => {
          const value = product[key];
          return (
            value !== null &&
            value !== undefined &&
            String(value).toLowerCase().includes(search)
          );
        }
      );
    const matchesColumns = filters.every(([id, value]) =>
      matchesContractFilter(row[id], {
        type: typeof row[id] === "number" ? "number" : "text",
        operator: Array.isArray(value) ? "isAnyOf" : "contains",
        values: Array.isArray(value) ? value : [value],
      })
    );
    const matchesRule = (rule: Record<string, unknown>) =>
      matchesContractFilter(row[String(rule.columnId)], rule);
    const matchesAdvanced =
      advanced.length === 0 ||
      (params.advancedFilterJoin === "or"
        ? advanced.some(matchesRule)
        : advanced.every(matchesRule));
    return matchesSearch && matchesColumns && matchesAdvanced;
  });
  const sorting = Object.entries(recordValue(params.orderBy));
  matching.sort((left, right) => {
    for (const [id, direction] of sorting) {
      const a = (left as Record<string, unknown>)[id];
      const b = (right as Record<string, unknown>)[id];
      const comparison =
        typeof a === "number" && typeof b === "number"
          ? a - b
          : String(a ?? "").localeCompare(String(b ?? ""));
      if (comparison !== 0) {
        return direction === "desc" ? -comparison : comparison;
      }
    }
    return String(left.id).localeCompare(String(right.id));
  });
  return Promise.resolve({
    // Model a server response: later store mutations must not alter cached rows.
    data: structuredClone(matching.slice((page - 1) * limit, page * limit)),
    meta: {
      pageCount: Math.max(1, Math.ceil(matching.length / limit)),
      totalCount: matching.length,
    },
  });
}

import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
import { createApp } from "vue";
import Products from "./products.vue";
import "@/components/ui/yayaw-table-vue/styles.css";

const app = createApp(Products);
app.use(VueQueryPlugin, { queryClient: new QueryClient() });
app.mount("#app");