Search #

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

import { CDefaultType, CUseType } from "@agufaui/config";
import type { IASearchProps } from "../../types/basic/ASearch";

export const DASearchDefault = {
	vc: "block w-full bg-white rounded-md ring-1.5 ring-blue-3 shadow-md py-2 pl-3 pr-10 text-sm placeholder-gray-5 focus:(ring-0 text-gray-9 placeholder-gray-4 outline outline-blue-3)",
	iconc: "text-green-4 hover:text-green-5",
	icondc: "text-gray-4 hover:text-gray-5",
};

export const DASearchInlineBlock = {
	[CUseType]: CDefaultType,
	display: "inline-block",
};

export const DASearch: Readonly<Record<string, Partial<IASearchProps>>> = {
	[CDefaultType]: DASearchDefault,
	inlineblock: DASearchInlineBlock,
};

export interface IASearchProps extends IProps, IPropsIcon, IPropsForm {
	v?: string; // search text.  Not configurable
	id?: string; // html element search 'id' and 'name' value, html element label 'for' value
	display?: string; // display class for root div html element
	vc?: string; // css classes for search 'input' html element
	iconc?: string; // css classes for search icon if input is not empty
	icondc?: string; // css classes for search icon if input is empty
}

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 IASearchEmits {
	(e: "update:v", modelValue: string): void; // input event
	(e: "search", modelValue: string): void; // search event
}