Pagination #

import { Apagination } from "@agufaui/${framework name}";

import { CDefaultType, CUseType } from "@agufaui/config";
import type { IAPaginationProps } from "../../types/table/APagination";

export const DAPaginationDefault = {
	c: "px-4 sm:px-0",
	vc: "ring ring-blue-5 rounded-lg shadow-md shadow-blue !text-blue-6",
	ovc: "outline-transparent !text-gray-5 hover:!text-gray-7 hover:!outline-gray-3",
	prec: "pr-1 inline-flex items-center text-sm font-medium !text-gray-5 hover:!text-gray-7",
	pagec: "px-4 inline-flex items-center text-sm font-medium",
	markc: "outline-transparent text-gray-5 pt-4 px-4 inline-flex items-center text-sm font-medium",
	ic: "text-gray-4 text-xl",
};

export const DAPagination: Readonly<Record<string, IAPaginationProps>> = {
	[CDefaultType]: DAPaginationDefault,
};

export interface IAPaginationProps extends IProps, IPropsIcon, IPropsComposeX {
	totalPages?: number;
	numPagesShow?: number; // number pages shown, eg. for value of 3, it will show: 1 2 3 ... 8 9 10 ... 21 22 23
	currentPage?: number;
	goto?: boolean; // if display goto input
	gotoPos?: TLRPosition; // goto position
	gotoc?: string; // css classes for goto container 'div' html element
	paginationc?: string; // css classes for pagination container 'div' html element
	vc?: string; // css classes for current page element
	ovc?: string; // css classes for not-current page element
	prec?: string; // css classes for 'previous' and 'next' button
	pagec?: string; // common css classes for every page button
	markc?: string; // css classes for 'left mark' and 'right mark' sign: '...'
	lefti?: string; // left arrow icon
}

export interface IProps {
	t?: string; // user defined or AgufaUI provided component type.  Not configurable
	c?: string; // css classes for component root html element
}

export type TLRPosition = "left" | "right";

export interface IPropsIcon {
	i?: string; // icon eg. i-eos-icons:loading
	ipos?: TLRPosition; // icon position
	ic?: string; // css classes for icon element
}

export interface IAPaginationEmits {
	(e: "change", page: number): void; // change event
}