Select #

import { Aselect, Aselectoption } from "@agufaui/${framework name}";

import { CDefaultType, CUseType } from "@agufaui/config";
import type { IASelectProps, IASelectoptionProps } from "../../types/basic/ASelect";

export const DASelectDefault = {
	labelc: "text-gray-7",
	buttonc: "focus:(ring-blue-2 outline-blue-3)",
	ic: "text-gray-4",
	optionc: "hover:text-white hover:bg-blue-6 text-gray-9",
	selectedc: "text-white bg-blue-6",
	checkc: "text-blue-6",
};

export const DASelectGreen = {
	[CUseType]: CDefaultType,
	buttonc: "r@ focus:ring-green-2 r@ focus:outline-green-3",
	optionc: "r@ hover:bg-green-6",
	selectedc: "r@ bg-green-6",
	checkc: "r@ text-green-6",
};

export const DASelect: Readonly<Record<string, Partial<IASelectProps>>> = {
	[CDefaultType]: DASelectDefault,
	green: DASelectGreen,
};

export const DASelectoptionDefault = {
	labelc: "text-gray-7 sm:mr-2",
	vc: "pl-3 pr-10 py-2 text-base rounded-md outline outline-gray-3 focus:(outline-none ring ring-blue-5 focus:outline-blue-5)",
};

export const DASelectoption: Readonly<Record<string, Partial<IASelectoptionProps>>> = {
	[CDefaultType]: DASelectoptionDefault,
};

export type TSelectOption = {
	id: string | number;
	name: string;
	display?: string;
};

export interface IASelectProps extends IProps, IPropsIcon, IPropsForm {
	label?: string; // label.  Not configurable
	labelc?: string; // css classes for label html element
	buttonc?: string; // css classes for button
	options: TSelectOption[]; //options.  Not configurable
	v: TSelectOption; // selected option.  Not configurable
	vc?: string; // css classes for options
	id?: string; // select group id
	fullwidth?: boolean; // whether options panel full width or fit content
	displayc?: string; // css classes for option display
	optionc?: string; // css classes for option container 'div' html element
	selectedc?: string; // css classes for 'div' html element when selected
	checkc?: string; // css classes for check icon when selected
}

export interface IASelectoptionProps extends IProps, IPropsForm {
	nolabel?: boolean; // no label
	labelc?: string; // css classes for label html element
	options: TSelectOption[]; //options.  Not configurable
	v: string | number; // selected option id.  Not configurable
	vc?: string; // css classes for options
	id?: string; // select group id
	optionc?: string; // css classes for each 'option' html element
}

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 IPropsForm {
	disabled?: boolean; // disabled
}

export interface IASelectEmits {
	(e: "select", option: TSelectOption): void; // select event
}

export interface IASelectoptionEmits {
	(e: "select", id: string | number): void; // select event
}