From 00d114630d3f289ba9f696770dc3eed783ae82f7 Mon Sep 17 00:00:00 2001 From: natxocc Date: Sat, 4 Apr 2026 03:00:16 +0200 Subject: [PATCH] New types --- index.d.ts | 498 +++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 6 +- 2 files changed, 502 insertions(+), 2 deletions(-) create mode 100644 index.d.ts diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..8481028 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,498 @@ +// sigpro-ui.d.ts + +declare module 'sigpro-ui' { + // Tipos básicos + type Signal = { + (): T; + (value: T | ((prev: T) => T)): void; + }; + + type ComponentFunction

= (props?: P, children?: any) => HTMLElement | string | null; + type ComponentChild = HTMLElement | string | number | boolean | null | undefined; + type ComponentChildren = ComponentChild | ComponentChild[]; + + // Utils + function val(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 | Record); + 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; + 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; + label?: string | (() => string); + tooltip?: string | (() => string); + toggle?: boolean | (() => boolean); + } + function Checkbox(props: CheckboxProps): HTMLElement; + + // Colorpicker + interface ColorpickerProps extends BaseProps, EventProps { + value?: Signal | 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; + 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; + 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; + 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 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(props: ListProps): 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; + 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; + inputValue?: any; + name?: string; + label?: string | (() => string); + tooltip?: string | (() => string); + } + function Radio(props: RadioProps): HTMLElement; + + // Range + interface RangeProps extends BaseProps, EventProps { + value?: Signal | 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; + 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; + } + 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; + on: ComponentChildren; + off: ComponentChildren; + } + function Swap(props: SwapProps): HTMLElement; + + // Table + interface TableColumn { + label: string | (() => string); + key?: keyof T; + render?: (item: T, index: number) => ComponentChild; + class?: string; + } + interface TableProps extends BaseProps, EventProps { + items: T[] | (() => T[]); + columns: TableColumn[]; + keyFn?: (item: T, index: number) => string | number; + zebra?: boolean | (() => boolean); + pinRows?: boolean | (() => boolean); + empty?: string | HTMLElement | (() => string | HTMLElement); + } + function Table(props: TableProps): 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; + } +} \ No newline at end of file diff --git a/package.json b/package.json index 2d2b117..828eb51 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sigpro-ui", - "version": "1.1.1", + "version": "1.1.2", "main": "./index.js", "module": "./index.js", "devDependencies": { @@ -13,7 +13,8 @@ "exports": { ".": { "import": "./index.js", - "script": "./dist/sigpro-ui.js" + "script": "./dist/sigpro-ui.js", + "types": "./index.d.ts" }, "./css": { "import": "./css/index.js", @@ -30,6 +31,7 @@ }, "files": [ "index.js", + "index.d.ts", "dist", "css", "README.md",