New types

2026-04-04 03:00:16 +02:00
parent ddcc960e1f
commit 00d114630d
2 changed files with 502 additions and 2 deletions
--- a/index.d.ts
+++ b/index.d.ts
@@ -0,0 +1,498 @@
+// 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;
+  }
+}