Table Panel #

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

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

export const DATpanelDefault = {
	multiSelectc: "py-2 px-3 border-b-2 border-gray-200 bg-gray-100",
	headingc:
		"px-5 py-3 text-left border-b-2 select-none cursor-pointer border-gray-2 bg-gray-1 text-xs font-semibold text-gray-6 uppercase tracking-wider hover:bg-gray-3",
	actionsc:
		"relative px-5 py-3 sticky border-b-2 border-gray-2 bg-gray-1 text-left text-xs font-semibold text-gray-6 uppercase tracking-wider",
	dirc: "text-blue-6",
	desc: "h-4 w-4",
	ic: "h-4 w-4",
	loadc: "text-blue h-10 w-10",
	emptyc: "text-gray-7",
	selectc: "border-dashed border-t border-gray-2 px-3 text-center",
	objectsc:
		"border-dashed border-t border-gray-2 px-5 py-4 whitespace-nowrap text-sm font-medium text-gray-9",
	objectEventc: "text-blue-6 active:text-indigo-6 underline cursor-pointer",
	objectLinkc: "text-blue-6 active:text-indigo-6 underline",
	nonObjectsc:
		"border-dashed border-t border-gray-2 px-5 py-4 whitespace-nowrap text-sm font-medium text-gray-9",
	actionc:
		"border-dashed border-t border-gray-2 px-5 py-4 whitespace-nowrap text-right text-sm font-medium",
};

export const DATpanel: Readonly<Record<string, IATpanelProps>> = {
	[CDefaultType]: DATpanelDefault,
};

export type TTableHeadingObjectType = "link" | "event";

export type TTableHeading = {
	key: string; // object key, eg. 'id', 'name' in { id: 1, name: "john" }
	display: string; // display
	field?: string; // database field name
	direction?: string; // arrow icon direction, desc or asc
	// for object array
	type?: TTableHeadingObjectType;
	href?: string; // href url for type "Link"
	event?: string; // event to fire
};

export interface IATpanelProps extends IProps, IPropsLoading {
	multiSelect?: boolean; // if multiple select
	multiSelectc?: string; // css classes for multiSelect 'th' html element
	selectAll?: boolean; // if select all rows
	headings?: TTableHeading[]; // headings
	headingc?: string; // css classes for headings 'th' html element
	actionsc?: string; // css classes for actions 'th' html element
	dirc?: string; // common css classes for heading direction icons
	desci?: string; // descending icon
	descc?: string; // css classes for desc icon
	loadi?: string; // loading icon
	loadc?: string; // css classes for loading icon
	items?: any[]; // items
	emptyc?: string; // css classes for 'td' html element when table is empty
	selectc?: string; // css classes for select 'td' html element for each row
	isScalarArray?: boolean; // if it's an array of objects
	objectsc?: string; // css classes for object row
	objectEventc?: string; // css classes for event
	objectLinkc?: string; // css classes for link
	nonObjectsc?: string; // // css classes for non-object row
	actionc?: string; // css classes for action cell
	actions?: IADropdownButtonProps; // table row actions, eg. edit, delete
	refItem?: string | [] | object; // ref to the item row
}

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 IPropsLoading extends IPropsIcon {
	loading?: boolean; // loading
}

export type TTpanelEmit = {
	type: string;
	value: any;
};

export interface IATpanelEmits {
	(e: "action", value: TTpanelEmit): void; // action event
	(e: "ope", value: TTpanelEmit): void; // operation event
}