498 lines
16 KiB
TypeScript
498 lines
16 KiB
TypeScript
// sigpro-ui.d.ts
|
|
|
|
declare module 'sigpro-ui' {
|
|
// Tipos básicos
|
|
type Signal<T> = {
|
|
(): T;
|
|
(value: T | ((prev: T) => T)): void;
|
|
};
|
|
|
|
type ComponentFunction<P = {}> = (props?: P, children?: any) => HTMLElement | string | null;
|
|
type ComponentChild = HTMLElement | string | number | boolean | null | undefined;
|
|
type ComponentChildren = ComponentChild | ComponentChild[];
|
|
|
|
// Utils
|
|
function val<T>(value: T | (() => T)): T;
|
|
function ui(baseClass: string, ...additional: (string | (() => string) | undefined)[]): string | (() => string);
|
|
function getIcon(icon: string | (() => string) | HTMLElement | null | undefined): HTMLElement | null;
|
|
function tt(key: 'close' | 'confirm' | 'cancel' | 'search' | 'loading' | 'nodata'): () => string;
|
|
|
|
// Props comunes
|
|
interface BaseProps {
|
|
class?: string | (() => string);
|
|
style?: string | Record<string, string> | (() => string | Record<string, string>);
|
|
id?: string | (() => string);
|
|
}
|
|
|
|
interface EventProps {
|
|
onclick?: (event: MouseEvent) => void;
|
|
oninput?: (event: Event) => void;
|
|
onchange?: (event: Event) => void;
|
|
onblur?: (event: FocusEvent) => void;
|
|
onfocus?: (event: FocusEvent) => void;
|
|
onkeydown?: (event: KeyboardEvent) => void;
|
|
onkeyup?: (event: KeyboardEvent) => void;
|
|
onmouseenter?: (event: MouseEvent) => void;
|
|
onmouseleave?: (event: MouseEvent) => void;
|
|
onsubmit?: (event: Event) => void;
|
|
ondragover?: (event: DragEvent) => void;
|
|
ondragleave?: (event: DragEvent) => void;
|
|
ondrop?: (event: DragEvent) => void;
|
|
[key: `on${string}`]: ((event: any) => void) | undefined;
|
|
}
|
|
|
|
// Accordion
|
|
interface AccordionProps extends BaseProps, EventProps {
|
|
title: string | (() => string);
|
|
name?: string;
|
|
open?: boolean | (() => boolean);
|
|
}
|
|
function Accordion(props: AccordionProps, children: ComponentChildren): HTMLElement;
|
|
|
|
// Alert
|
|
type AlertType = 'info' | 'success' | 'warning' | 'error';
|
|
interface AlertProps extends BaseProps, EventProps {
|
|
type?: AlertType;
|
|
soft?: boolean;
|
|
actions?: ComponentFunction | ComponentChildren;
|
|
message?: string | (() => string);
|
|
}
|
|
function Alert(props: AlertProps, children?: ComponentChildren): HTMLElement;
|
|
|
|
// Autocomplete
|
|
interface AutocompleteOption {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
interface AutocompleteProps extends BaseProps, EventProps {
|
|
items?: string[] | AutocompleteOption[] | (() => (string[] | AutocompleteOption[]));
|
|
value?: Signal<string> | string;
|
|
onSelect?: (option: string | AutocompleteOption) => void;
|
|
label?: string | (() => string);
|
|
placeholder?: string | (() => string);
|
|
}
|
|
function Autocomplete(props: AutocompleteProps): HTMLElement;
|
|
|
|
// Badge
|
|
interface BadgeProps extends BaseProps, EventProps {}
|
|
function Badge(props: BadgeProps, children: ComponentChildren): HTMLElement;
|
|
|
|
// Button
|
|
interface ButtonProps extends BaseProps, EventProps {
|
|
disabled?: boolean | (() => boolean);
|
|
loading?: boolean | (() => boolean);
|
|
icon?: string | (() => string) | HTMLElement;
|
|
}
|
|
function Button(props: ButtonProps, children: ComponentChildren): HTMLElement;
|
|
|
|
// Checkbox
|
|
interface CheckboxProps extends BaseProps, EventProps {
|
|
value?: Signal<boolean> | boolean;
|
|
label?: string | (() => string);
|
|
tooltip?: string | (() => string);
|
|
toggle?: boolean | (() => boolean);
|
|
}
|
|
function Checkbox(props: CheckboxProps): HTMLElement;
|
|
|
|
// Colorpicker
|
|
interface ColorpickerProps extends BaseProps, EventProps {
|
|
value?: Signal<string> | string;
|
|
label?: string | (() => string);
|
|
}
|
|
function Colorpicker(props: ColorpickerProps): HTMLElement;
|
|
|
|
// Datepicker
|
|
interface DateRange {
|
|
start: string;
|
|
end: string | null;
|
|
startHour?: number;
|
|
endHour?: number;
|
|
}
|
|
interface DatepickerProps extends BaseProps, EventProps {
|
|
value?: Signal<string | DateRange> | string | DateRange;
|
|
range?: boolean | (() => boolean);
|
|
label?: string | (() => string);
|
|
placeholder?: string | (() => string);
|
|
hour?: boolean;
|
|
}
|
|
function Datepicker(props: DatepickerProps): HTMLElement;
|
|
|
|
// Drawer
|
|
interface DrawerProps extends BaseProps, EventProps {
|
|
id?: string;
|
|
open?: Signal<boolean> | boolean;
|
|
side: ComponentFunction | ComponentChildren;
|
|
content: ComponentFunction | ComponentChildren;
|
|
}
|
|
function Drawer(props: DrawerProps, children?: ComponentChildren): HTMLElement;
|
|
|
|
// Dropdown
|
|
interface DropdownItem {
|
|
label: string | (() => string);
|
|
icon?: string | HTMLElement | (() => string | HTMLElement);
|
|
onclick?: (event: MouseEvent) => void;
|
|
class?: string;
|
|
}
|
|
interface DropdownProps extends BaseProps, EventProps {
|
|
label?: string | (() => string);
|
|
icon?: string | HTMLElement | (() => string | HTMLElement);
|
|
items?: DropdownItem[] | (() => DropdownItem[]);
|
|
}
|
|
function Dropdown(props: DropdownProps): HTMLElement;
|
|
|
|
// Fab
|
|
interface FabAction {
|
|
label?: string;
|
|
icon?: string | HTMLElement;
|
|
text?: string;
|
|
onclick?: (event: MouseEvent) => void;
|
|
class?: string;
|
|
}
|
|
interface FabProps extends BaseProps, EventProps {
|
|
icon?: string | HTMLElement;
|
|
label?: string;
|
|
actions?: FabAction[] | (() => FabAction[]);
|
|
position?: string;
|
|
}
|
|
function Fab(props: FabProps): HTMLElement;
|
|
|
|
// Fieldset
|
|
interface FieldsetProps extends BaseProps, EventProps {
|
|
legend?: string | (() => string);
|
|
}
|
|
function Fieldset(props: FieldsetProps, children: ComponentChildren): HTMLElement;
|
|
|
|
// Fileinput
|
|
interface FileinputProps extends BaseProps, EventProps {
|
|
tooltip?: string;
|
|
max?: number;
|
|
accept?: string;
|
|
onSelect?: (files: File[]) => void;
|
|
}
|
|
function Fileinput(props: FileinputProps): HTMLElement;
|
|
|
|
// Indicator
|
|
interface IndicatorProps extends BaseProps, EventProps {
|
|
value?: number | string | (() => number | string);
|
|
}
|
|
function Indicator(props: IndicatorProps, children: ComponentChildren): HTMLElement;
|
|
|
|
// Input
|
|
interface InputProps extends BaseProps, EventProps {
|
|
value?: Signal<string> | string;
|
|
type?: string;
|
|
icon?: string | HTMLElement | (() => string | HTMLElement);
|
|
placeholder?: string | (() => string);
|
|
disabled?: boolean | (() => boolean);
|
|
size?: string;
|
|
validate?: (value: string) => string | null | undefined;
|
|
label?: string | (() => string);
|
|
}
|
|
function Input(props: InputProps): HTMLElement;
|
|
|
|
// Label
|
|
interface LabelProps extends BaseProps, EventProps {
|
|
value?: string | (() => string);
|
|
floating?: boolean;
|
|
error?: string | (() => string);
|
|
required?: boolean;
|
|
}
|
|
function Label(props: LabelProps, children: ComponentChildren): HTMLElement;
|
|
|
|
// List
|
|
interface ListProps<T = any> extends BaseProps, EventProps {
|
|
items: T[] | (() => T[]);
|
|
header?: string | HTMLElement | (() => string | HTMLElement);
|
|
render: (item: T, index: number) => ComponentChild;
|
|
keyFn?: (item: T, index: number) => string | number;
|
|
}
|
|
function List<T>(props: ListProps<T>): HTMLElement;
|
|
|
|
// Menu
|
|
interface MenuItem {
|
|
label: string | (() => string);
|
|
icon?: string | HTMLElement;
|
|
onclick?: (event: MouseEvent) => void;
|
|
active?: boolean | (() => boolean);
|
|
children?: MenuItem[];
|
|
open?: boolean;
|
|
}
|
|
interface MenuProps extends BaseProps, EventProps {
|
|
items: MenuItem[] | (() => MenuItem[]);
|
|
}
|
|
function Menu(props: MenuProps): HTMLElement;
|
|
|
|
// Modal
|
|
interface ModalProps extends BaseProps, EventProps {
|
|
open?: Signal<boolean> | boolean;
|
|
title?: string | HTMLElement | (() => string | HTMLElement);
|
|
buttons?: ComponentFunction | ComponentFunction[];
|
|
}
|
|
function Modal(props: ModalProps, children: ComponentChildren): HTMLElement;
|
|
|
|
// Navbar
|
|
interface NavbarProps extends BaseProps, EventProps {}
|
|
function Navbar(props: NavbarProps, children: ComponentChildren): HTMLElement;
|
|
|
|
// Radio
|
|
interface RadioProps extends BaseProps, EventProps {
|
|
value?: Signal<any> | any;
|
|
inputValue?: any;
|
|
name?: string;
|
|
label?: string | (() => string);
|
|
tooltip?: string | (() => string);
|
|
}
|
|
function Radio(props: RadioProps): HTMLElement;
|
|
|
|
// Range
|
|
interface RangeProps extends BaseProps, EventProps {
|
|
value?: Signal<number> | number;
|
|
label?: string | (() => string);
|
|
tooltip?: string | (() => string);
|
|
min?: number;
|
|
max?: number;
|
|
step?: number;
|
|
disabled?: boolean | (() => boolean);
|
|
}
|
|
function Range(props: RangeProps): HTMLElement;
|
|
|
|
// Rating
|
|
interface RatingProps extends BaseProps, EventProps {
|
|
value?: Signal<number> | number;
|
|
count?: number | (() => number);
|
|
mask?: string;
|
|
readonly?: boolean | (() => boolean);
|
|
onchange?: (value: number) => void;
|
|
}
|
|
function Rating(props: RatingProps): HTMLElement;
|
|
|
|
// Select
|
|
interface SelectOption {
|
|
label: string;
|
|
value: string | number;
|
|
}
|
|
interface SelectProps extends BaseProps, EventProps {
|
|
label?: string | (() => string);
|
|
items?: SelectOption[] | (() => SelectOption[]);
|
|
value?: Signal<string | number> | string | number;
|
|
}
|
|
function Select(props: SelectProps): HTMLElement;
|
|
|
|
// Stack
|
|
interface StackProps extends BaseProps, EventProps {}
|
|
function Stack(props: StackProps, children: ComponentChildren): HTMLElement;
|
|
|
|
// Stat
|
|
interface StatProps extends BaseProps, EventProps {
|
|
icon?: string | HTMLElement;
|
|
label?: string | (() => string);
|
|
value?: string | number | (() => string | number);
|
|
desc?: string | (() => string);
|
|
}
|
|
function Stat(props: StatProps): HTMLElement;
|
|
|
|
// Swap
|
|
interface SwapProps extends BaseProps, EventProps {
|
|
value?: Signal<boolean> | boolean;
|
|
on: ComponentChildren;
|
|
off: ComponentChildren;
|
|
}
|
|
function Swap(props: SwapProps): HTMLElement;
|
|
|
|
// Table
|
|
interface TableColumn<T = any> {
|
|
label: string | (() => string);
|
|
key?: keyof T;
|
|
render?: (item: T, index: number) => ComponentChild;
|
|
class?: string;
|
|
}
|
|
interface TableProps<T = any> extends BaseProps, EventProps {
|
|
items: T[] | (() => T[]);
|
|
columns: TableColumn<T>[];
|
|
keyFn?: (item: T, index: number) => string | number;
|
|
zebra?: boolean | (() => boolean);
|
|
pinRows?: boolean | (() => boolean);
|
|
empty?: string | HTMLElement | (() => string | HTMLElement);
|
|
}
|
|
function Table<T>(props: TableProps<T>): HTMLElement;
|
|
|
|
// Tabs
|
|
interface TabItem {
|
|
label: string | HTMLElement | (() => string | HTMLElement);
|
|
content: ComponentFunction | ComponentChildren;
|
|
active?: boolean | (() => boolean);
|
|
disabled?: boolean | (() => boolean);
|
|
onclick?: () => void;
|
|
}
|
|
interface TabsProps extends BaseProps, EventProps {
|
|
items: TabItem[] | (() => TabItem[]);
|
|
}
|
|
function Tabs(props: TabsProps): HTMLElement;
|
|
|
|
// Timeline
|
|
interface TimelineItem {
|
|
title: string | HTMLElement | (() => string | HTMLElement);
|
|
detail: string | HTMLElement | (() => string | HTMLElement);
|
|
type?: 'info' | 'success' | 'warning' | 'error';
|
|
icon?: string | HTMLElement;
|
|
completed?: boolean | (() => boolean);
|
|
}
|
|
interface TimelineProps extends BaseProps, EventProps {
|
|
items: TimelineItem[] | (() => TimelineItem[]);
|
|
vertical?: boolean | (() => boolean);
|
|
compact?: boolean | (() => boolean);
|
|
}
|
|
function Timeline(props: TimelineProps): HTMLElement;
|
|
|
|
// Toast
|
|
type ToastType = 'alert-info' | 'alert-success' | 'alert-warning' | 'alert-error';
|
|
function Toast(
|
|
message: string | (() => string),
|
|
type?: ToastType,
|
|
duration?: number
|
|
): () => void;
|
|
|
|
// Tooltip
|
|
interface TooltipProps extends BaseProps, EventProps {
|
|
tip: string | (() => string);
|
|
ui?: string;
|
|
}
|
|
function Tooltip(props: TooltipProps, children: ComponentChildren): HTMLElement;
|
|
|
|
// Objeto principal
|
|
const SigProUI: {
|
|
Accordion: typeof Accordion;
|
|
Alert: typeof Alert;
|
|
Autocomplete: typeof Autocomplete;
|
|
Badge: typeof Badge;
|
|
Button: typeof Button;
|
|
Checkbox: typeof Checkbox;
|
|
Colorpicker: typeof Colorpicker;
|
|
Datepicker: typeof Datepicker;
|
|
Drawer: typeof Drawer;
|
|
Dropdown: typeof Dropdown;
|
|
Fab: typeof Fab;
|
|
Fieldset: typeof Fieldset;
|
|
Fileinput: typeof Fileinput;
|
|
Indicator: typeof Indicator;
|
|
Input: typeof Input;
|
|
Label: typeof Label;
|
|
List: typeof List;
|
|
Menu: typeof Menu;
|
|
Modal: typeof Modal;
|
|
Navbar: typeof Navbar;
|
|
Radio: typeof Radio;
|
|
Range: typeof Range;
|
|
Rating: typeof Rating;
|
|
Select: typeof Select;
|
|
Stack: typeof Stack;
|
|
Stat: typeof Stat;
|
|
Swap: typeof Swap;
|
|
Table: typeof Table;
|
|
Tabs: typeof Tabs;
|
|
Timeline: typeof Timeline;
|
|
Toast: typeof Toast;
|
|
Tooltip: typeof Tooltip;
|
|
Utils: {
|
|
val: typeof val;
|
|
ui: typeof ui;
|
|
getIcon: typeof getIcon;
|
|
};
|
|
tt: typeof tt;
|
|
install: (target?: Window) => void;
|
|
};
|
|
|
|
export default SigProUI;
|
|
export {
|
|
Accordion, Alert, Autocomplete, Badge, Button, Checkbox, Colorpicker,
|
|
Datepicker, Drawer, Dropdown, Fab, Fieldset, Fileinput, Indicator,
|
|
Input, Label, List, Menu, Modal, Navbar, Radio, Range, Rating,
|
|
Select, Stack, Stat, Swap, Table, Tabs, Timeline, Toast, Tooltip,
|
|
val, ui, getIcon, tt,
|
|
// Tipos
|
|
AccordionProps, AlertProps, AutocompleteProps, BadgeProps, ButtonProps,
|
|
CheckboxProps, ColorpickerProps, DatepickerProps, DrawerProps, DropdownProps,
|
|
FabProps, FieldsetProps, FileinputProps, IndicatorProps, InputProps,
|
|
LabelProps, ListProps, MenuProps, ModalProps, NavbarProps, RadioProps,
|
|
RangeProps, RatingProps, SelectProps, StackProps, StatProps, SwapProps,
|
|
TableProps, TabsProps, TimelineProps, TooltipProps,
|
|
DateRange, AutocompleteOption, DropdownItem, FabAction, MenuItem,
|
|
SelectOption, TabItem, TableColumn, TimelineItem, ToastType, AlertType
|
|
};
|
|
}
|
|
|
|
// Declaraciones globales
|
|
declare global {
|
|
const Accordion: typeof import('sigpro-ui').Accordion;
|
|
const Alert: typeof import('sigpro-ui').Alert;
|
|
const Autocomplete: typeof import('sigpro-ui').Autocomplete;
|
|
const Badge: typeof import('sigpro-ui').Badge;
|
|
const Button: typeof import('sigpro-ui').Button;
|
|
const Checkbox: typeof import('sigpro-ui').Checkbox;
|
|
const Colorpicker: typeof import('sigpro-ui').Colorpicker;
|
|
const Datepicker: typeof import('sigpro-ui').Datepicker;
|
|
const Drawer: typeof import('sigpro-ui').Drawer;
|
|
const Dropdown: typeof import('sigpro-ui').Dropdown;
|
|
const Fab: typeof import('sigpro-ui').Fab;
|
|
const Fieldset: typeof import('sigpro-ui').Fieldset;
|
|
const Fileinput: typeof import('sigpro-ui').Fileinput;
|
|
const Indicator: typeof import('sigpro-ui').Indicator;
|
|
const Input: typeof import('sigpro-ui').Input;
|
|
const Label: typeof import('sigpro-ui').Label;
|
|
const List: typeof import('sigpro-ui').List;
|
|
const Menu: typeof import('sigpro-ui').Menu;
|
|
const Modal: typeof import('sigpro-ui').Modal;
|
|
const Navbar: typeof import('sigpro-ui').Navbar;
|
|
const Radio: typeof import('sigpro-ui').Radio;
|
|
const Range: typeof import('sigpro-ui').Range;
|
|
const Rating: typeof import('sigpro-ui').Rating;
|
|
const Select: typeof import('sigpro-ui').Select;
|
|
const Stack: typeof import('sigpro-ui').Stack;
|
|
const Stat: typeof import('sigpro-ui').Stat;
|
|
const Swap: typeof import('sigpro-ui').Swap;
|
|
const Table: typeof import('sigpro-ui').Table;
|
|
const Tabs: typeof import('sigpro-ui').Tabs;
|
|
const Timeline: typeof import('sigpro-ui').Timeline;
|
|
const Toast: typeof import('sigpro-ui').Toast;
|
|
const Tooltip: typeof import('sigpro-ui').Tooltip;
|
|
const Utils: typeof import('sigpro-ui').Utils;
|
|
const tt: typeof import('sigpro-ui').tt;
|
|
|
|
interface Window {
|
|
Accordion: typeof Accordion;
|
|
Alert: typeof Alert;
|
|
Autocomplete: typeof Autocomplete;
|
|
Badge: typeof Badge;
|
|
Button: typeof Button;
|
|
Checkbox: typeof Checkbox;
|
|
Colorpicker: typeof Colorpicker;
|
|
Datepicker: typeof Datepicker;
|
|
Drawer: typeof Drawer;
|
|
Dropdown: typeof Dropdown;
|
|
Fab: typeof Fab;
|
|
Fieldset: typeof Fieldset;
|
|
Fileinput: typeof Fileinput;
|
|
Indicator: typeof Indicator;
|
|
Input: typeof Input;
|
|
Label: typeof Label;
|
|
List: typeof List;
|
|
Menu: typeof Menu;
|
|
Modal: typeof Modal;
|
|
Navbar: typeof Navbar;
|
|
Radio: typeof Radio;
|
|
Range: typeof Range;
|
|
Rating: typeof Rating;
|
|
Select: typeof Select;
|
|
Stack: typeof Stack;
|
|
Stat: typeof Stat;
|
|
Swap: typeof Swap;
|
|
Table: typeof Table;
|
|
Tabs: typeof Tabs;
|
|
Timeline: typeof Timeline;
|
|
Toast: typeof Toast;
|
|
Tooltip: typeof Tooltip;
|
|
Utils: typeof Utils;
|
|
tt: typeof tt;
|
|
SigProUI: typeof import('sigpro-ui').default;
|
|
}
|
|
} |