knight-ui 1.0.0

package/component/display/Carousel.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 轮播。
+ */
+export declare class Carousel extends AbstractUI<CarouselProps, CarouselState> {
+    private timer;
+    constructor(props: CarouselProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<CarouselProps>): void;
+    componentWillUnmount(): void;
+    private startAutoPlay;
+    private stopAutoPlay;
+    private next;
+    private goTo;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface CarouselProps extends UIProps {
+    activeIndex?: number;
+    defaultActiveIndex?: number;
+    autoPlay?: boolean;
+    interval?: number;
+    effect?: "slide" | "fade";
+    theme?: "dark" | "light";
+    showDots?: boolean;
+    showArrow?: boolean;
+    onChange?: (index: number) => void;
+}
+interface CarouselState extends UIState {
+    activeIndex: number;
+}
+export {};

package/component/display/Collapse.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+declare class CollapsePanel extends AbstractUI<CollapsePanelProps, UIState> {
+    static displayName: string;
+    protected OnRenderContent(): React.ReactElement;
+}
+interface CollapsePanelProps extends UIProps {
+    header?: React.ReactNode;
+    extra?: React.ReactNode;
+    disabled?: boolean;
+    itemKey: string;
+}
+/**
+ * 折叠面板。
+ * <Collapse accordion activeKey="1" onChange={...}>
+ *   <Collapse.Panel header="标题1" itemKey="1">内容1</Collapse.Panel>
+ * </Collapse>
+ */
+export declare class Collapse extends AbstractUI<CollapseProps, CollapseState> {
+    static Panel: typeof CollapsePanel;
+    constructor(props: CollapseProps);
+    componentDidUpdate(prevProps: Readonly<CollapseProps>): void;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface CollapseProps extends UIProps {
+    activeKey?: string | string[];
+    defaultActiveKey?: string | string[];
+    accordion?: boolean;
+    onChange?: (activeKey: string | string[]) => void;
+}
+interface CollapseState extends UIState {
+    _activeKeys: string[];
+}
+export {};

package/component/display/Collapsible.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type AnimPhase = "idle" | "collapsing" | "expanding";
+/**
+ * 轻量折叠容器。
+ * 通过 collapsed 控制显示/隐藏, CSS transition 实现动画过渡.
+ */
+export declare class Collapsible extends AbstractUI<CollapsibleProps, CollapsibleState> {
+    private innerRef;
+    private animTimer;
+    constructor(props: CollapsibleProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<CollapsibleProps>): void;
+    private measureHeight;
+    private setCollapsed;
+    componentWillUnmount(): void;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface CollapsibleProps extends UIProps {
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    motion?: boolean;
+    keepDOM?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
+}
+interface CollapsibleState extends UIState {
+    _collapsed: boolean;
+    _contentHeight: number;
+    _animPhase: AnimPhase;
+}
+export {};

package/component/display/Cropper.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type CropShape = "rect" | "round";
+/** 图片裁切。 8 手柄拖拽调整裁剪区域. 内部使用百分比坐标 (0~1). */
+export declare class Cropper extends AbstractUI<CropperProps, CropperState> {
+    private imgRef;
+    private naturalW;
+    private naturalH;
+    private resizing;
+    private startPos;
+    private startCrop;
+    constructor(props: CropperProps);
+    private onImageLoad;
+    private getDisplaySize;
+    protected OnRenderContent(): React.ReactElement;
+    private handleConfirm;
+    private rafId;
+    private _dx;
+    private _dy;
+    private onHandleDown;
+}
+export interface CropResult {
+    /** 裁剪区域百分比坐标 (0~1) */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** 原始图片像素坐标 */
+    naturalX: number;
+    naturalY: number;
+    naturalWidth: number;
+    naturalHeight: number;
+    src?: string;
+}
+export interface CropperProps extends UIProps {
+    src?: string;
+    cropShape?: CropShape;
+    aspectRatio?: number;
+    onCrop?: (result: CropResult) => void;
+}
+interface CropperState extends UIState {
+    _cropX: number;
+    _cropY: number;
+    _cropW: number;
+    _cropH: number;
+}
+export {};

package/component/display/Descriptions.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type DescAlign = "center" | "justify" | "left" | "plain";
+type DescLayout = "horizontal" | "vertical";
+type DescSize = "small" | "medium" | "large";
+declare class DescriptionsItem extends AbstractUI<DescriptionsItemProps, UIState> {
+    static displayName: string;
+    protected OnRenderContent(): React.ReactElement;
+}
+interface DescriptionsItemProps extends UIProps {
+    itemKey?: React.ReactNode;
+    span?: number;
+    hidden?: boolean;
+    keyStyle?: React.CSSProperties;
+}
+/**
+ * 描述列表。
+ */
+export declare class Descriptions extends AbstractUI<DescriptionsProps, DescriptionsState> {
+    static Item: typeof DescriptionsItem;
+    constructor(props: DescriptionsProps);
+    protected OnRenderContent(): React.ReactElement;
+    private buildItems;
+    private renderGridMode;
+    private renderRowMode;
+    private alignItems;
+}
+export interface DescriptionsData {
+    key: React.ReactNode;
+    value: React.ReactNode | (() => React.ReactNode);
+    span?: number;
+    hidden?: boolean;
+    keyStyle?: React.CSSProperties;
+}
+export interface DescriptionsProps extends UIProps {
+    layout?: DescLayout;
+    align?: DescAlign;
+    column?: number;
+    size?: DescSize;
+    row?: boolean;
+    bordered?: boolean;
+    data?: DescriptionsData[];
+}
+interface DescriptionsState extends UIState {
+}
+export {};

package/component/display/Dropdown.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+export interface DropdownItem {
+    key: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    danger?: boolean;
+    divider?: boolean;
+    children?: DropdownItem[];
+}
+declare class DropdownMenu extends AbstractUI<DropdownMenuProps, UIState> {
+    static displayName: string;
+    protected OnRenderContent(): React.ReactElement;
+}
+interface DropdownMenuProps extends UIProps {
+}
+declare class DropdownItemC extends AbstractUI<DropdownItemProps, UIState> {
+    static displayName: string;
+    protected OnRenderContent(): React.ReactElement;
+}
+interface DropdownItemProps extends UIProps {
+    disabled?: boolean;
+    danger?: boolean;
+    icon?: React.ReactNode;
+}
+/**
+ * 下拉菜单。
+ */
+export declare class Dropdown extends AbstractUI<DropdownProps, DropdownState> {
+    static Menu: typeof DropdownMenu;
+    static Item: typeof DropdownItemC;
+    private zIndex;
+    private clickOutsideHandler;
+    constructor(props: DropdownProps);
+    componentDidUpdate(prevProps: Readonly<DropdownProps>): void;
+    componentWillUnmount(): void;
+    private open;
+    private close;
+    private cleanup;
+    private toggle;
+    protected OnRenderContent(): React.ReactElement;
+    private renderItem;
+}
+export interface DropdownProps extends UIProps {
+    visible?: boolean;
+    defaultVisible?: boolean;
+    menu?: DropdownItem[];
+    position?: "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom";
+    trigger?: "click" | "hover";
+    onClickItem?: (key: string) => void;
+    onVisibleChange?: (visible: boolean) => void;
+}
+interface DropdownState extends UIState {
+    open: boolean;
+}
+export {};

package/component/display/Empty.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 空状态。
+ */
+export declare class Empty extends AbstractUI<EmptyProps, EmptyState> {
+    constructor(props: EmptyProps);
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface EmptyProps extends UIProps {
+    image?: React.ReactNode;
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+    dark?: boolean;
+}
+interface EmptyState extends UIState {
+}
+export {};

package/component/display/Highlight.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 高亮文本。
+ * 在 sourceString 中高亮匹配 searchWords 的子串.
+ */
+export declare class Highlight extends AbstractUI<HighlightProps, HighlightState> {
+    constructor(props: HighlightProps);
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface HighlightProps extends UIProps {
+    sourceString?: string;
+    searchWords?: string[];
+    highlightStyle?: React.CSSProperties;
+    caseSensitive?: boolean;
+    component?: string;
+}
+interface HighlightState extends UIState {
+}
+export {};

package/component/display/Image.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+declare class ImagePreview extends AbstractUI<ImagePreviewProps, UIState> {
+    static displayName: string;
+    protected OnRenderContent(): React.ReactElement;
+}
+interface ImagePreviewProps extends UIProps {
+    src?: string;
+    onClose?: () => void;
+}
+/**
+ * 图片。
+ * 支持加载失败回退、懒加载、点击预览.
+ */
+export declare class Image extends AbstractUI<ImageProps, ImageState> {
+    static Preview: typeof ImagePreview;
+    constructor(props: ImageProps);
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface ImageProps extends UIProps {
+    src?: string;
+    alt?: string;
+    preview?: boolean;
+    fallback?: string;
+    lazy?: boolean;
+    width?: number | string;
+    height?: number | string;
+}
+interface ImageState extends UIState {
+    _error: boolean;
+    _previewVisible: boolean;
+}
+export {};

package/component/display/List.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 列表。
+ * <List dataSource={data} renderItem={(item, i) => <div>{item}</div>} header="列表头" />
+ */
+export declare class List extends AbstractUI<ListProps, ListState> {
+    constructor(props: ListProps);
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface ListProps extends UIProps {
+    dataSource?: any[];
+    renderItem?: (item: any, index: number) => React.ReactNode;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    loading?: boolean;
+    empty?: React.ReactNode;
+    split?: boolean;
+    bordered?: boolean;
+}
+interface ListState extends UIState {
+}
+export {};

package/component/display/Modal.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 模态对话框。
+ */
+export declare class Modal extends AbstractUI<ModalProps, ModalState> {
+    private zIndex;
+    private animTimer;
+    private escHandler;
+    constructor(props: ModalProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<ModalProps>): void;
+    componentWillUnmount(): void;
+    private enter;
+    private exit;
+    private cleanup;
+    private handleClose;
+    private handleOk;
+    protected OnRenderContent(): React.ReactElement;
+}
+type ModalAnimPhase = "entering" | "entered" | "leaving" | "exited";
+export interface ModalProps extends UIProps {
+    visible?: boolean;
+    defaultVisible?: boolean;
+    title?: React.ReactNode;
+    footer?: React.ReactNode;
+    okText?: string;
+    cancelText?: string;
+    hideCancel?: boolean;
+    hideFooter?: boolean;
+    mask?: boolean;
+    maskClosable?: boolean;
+    closeOnEsc?: boolean;
+    centered?: boolean;
+    size?: "small" | "medium" | "large";
+    onOk?: () => void | Promise<void>;
+    onCancel?: () => void;
+}
+interface ModalState extends UIState {
+    animPhase: ModalAnimPhase;
+    confirmLoading: boolean;
+}
+export {};

package/component/display/OverflowList.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 溢出折叠列表。
+ */
+export declare class OverflowList extends AbstractUI<OverflowListProps, OverflowListState> {
+    private containerRef;
+    private resizeObserver;
+    constructor(props: OverflowListProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<OverflowListProps>): void;
+    componentWillUnmount(): void;
+    private measureOverflow;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface OverflowListProps extends UIProps {
+    items?: any[];
+    collapseFrom?: "start" | "end";
+    minVisibleItems?: number;
+    overflowRender?: (overflowItems: any[]) => React.ReactNode;
+    renderOverflow?: (overflowItems: any[]) => React.ReactNode;
+    renderItem?: (item: any, index: number) => React.ReactNode;
+}
+interface OverflowListState extends UIState {
+    collapseFrom: string;
+    visibleCount: number;
+}
+export {};

package/component/display/Popover.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 气泡卡片。
+ * 包裹 children 作为触发元素, 自动管理 hover/click 事件和浮层显隐.
+ */
+export declare class Popover extends AbstractUI<PopoverProps, PopoverState> {
+    private zIndex;
+    private wrapperRef;
+    private animTimer;
+    private leaveTimer;
+    private enterTimer;
+    constructor(props: PopoverProps);
+    componentWillUnmount(): void;
+    private enter;
+    private exit;
+    private handleClick;
+    private cleanup;
+    protected OnRenderContent(): React.ReactElement;
+    private renderArrow;
+    private calcPosition;
+}
+type PopoverAnimPhase = "entering" | "entered" | "leaving" | "exited";
+export interface PopoverProps extends UIProps {
+    visible?: boolean;
+    open?: boolean;
+    content?: React.ReactNode;
+    title?: React.ReactNode;
+    position?: "top" | "bottom" | "left" | "right";
+    trigger?: "hover" | "click" | "focus" | "custom";
+    offset?: number;
+    showArrow?: boolean;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    onVisibleChange?: (visible: boolean) => void;
+}
+interface PopoverState extends UIState {
+    animPhase: PopoverAnimPhase;
+}
+export {};

package/component/display/ScrollList.d.ts

@@ -0,0 +1,70 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type ScrollItemMode = "normal" | "wheel";
+interface ItemData {
+    value?: any;
+    text?: string;
+    disabled?: boolean;
+    transform?: (value: any, text: string) => string;
+}
+/**
+ * 单列滚动选择器。
+ */
+declare class ScrollItem extends AbstractUI<ScrollItemProps, ScrollItemState> {
+    static displayName: string;
+    private listRef;
+    private itemEls;
+    private prevVisualIdx;
+    private scrollTimer;
+    constructor(props: ScrollItemProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<ScrollItemProps>): void;
+    componentWillUnmount(): void;
+    private wheelEl;
+    private boundWheelHandler;
+    private attachWheelListener;
+    private detachWheelListener;
+    private getScrollTop;
+    private setScrollTop;
+    private idxToScrollTop;
+    private scrollTopToIdx;
+    private scrollToSelected;
+    /** Called by native wheel event listener. */
+    private handleWheelDelta;
+    private handleScroll;
+    private applyVisualHighlight;
+    private setItemDOMStyle;
+    private handleSnapEnd;
+    private selectIndex;
+    private setItemRef;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface ScrollItemProps extends UIProps {
+    list?: ItemData[];
+    mode?: ScrollItemMode;
+    cycled?: boolean;
+    selectedIndex?: number;
+    motion?: boolean;
+    transform?: (value: any, text: string) => string;
+    onSelect?: (data: ItemData) => void;
+}
+interface ScrollItemState extends UIState {
+    selectedIndex: number;
+    visualIndex: number;
+}
+/**
+ * 滚动列表 — 包含 header/footer 的列表容器。
+ */
+export declare class ScrollList extends AbstractUI<ScrollListProps, ScrollListState> {
+    static Item: typeof ScrollItem;
+    constructor(props: ScrollListProps);
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface ScrollListProps extends UIProps {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    bodyHeight?: number | string;
+}
+interface ScrollListState extends UIState {
+}
+export {};

package/component/display/SideSheet.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 侧边抽屉。
+ * 简洁面板: 标题 + 关闭按钮 + 内容区, 无默认 footer/分割线.
+ */
+export declare class SideSheet extends AbstractUI<SideSheetProps, SideSheetState> {
+    private zIndex;
+    private animTimer;
+    private escHandler;
+    constructor(props: SideSheetProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<SideSheetProps>): void;
+    componentWillUnmount(): void;
+    private enter;
+    private exit;
+    private cleanup;
+    private handleClose;
+    protected OnRenderContent(): React.ReactElement;
+}
+type SideSheetAnimPhase = "entering" | "entered" | "leaving" | "exited";
+export interface SideSheetProps extends UIProps {
+    visible?: boolean;
+    defaultVisible?: boolean;
+    title?: React.ReactNode;
+    placement?: "left" | "right";
+    size?: "small" | "medium" | "large";
+    mask?: boolean;
+    maskClosable?: boolean;
+    closeOnEsc?: boolean;
+    footer?: React.ReactNode;
+    onCancel?: () => void;
+    afterClose?: () => void;
+    keepDOM?: boolean;
+    getPopupContainer?: () => HTMLElement;
+}
+interface SideSheetState extends UIState {
+    animPhase: SideSheetAnimPhase;
+}
+export {};

package/component/display/Table.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+export interface TableColumn {
+    key: string;
+    title: React.ReactNode;
+    dataIndex?: string;
+    width?: number;
+    render?: (value: any, record: Record<string, any>, index: number) => React.ReactNode;
+    sorter?: (a: any, b: any) => number;
+    filters?: {
+        text: string;
+        value: string;
+    }[];
+    onFilter?: (value: string, record: Record<string, any>) => boolean;
+}
+/**
+ * 数据表格。
+ */
+export declare class Table extends AbstractUI<TableProps, TableState> {
+    private scrollEl;
+    constructor(props: TableProps);
+    private onScrollRef;
+    private onScrollWheel;
+    componentDidUpdate(prevProps: Readonly<TableProps>): void;
+    protected OnRenderContent(): React.ReactElement;
+    private sortData;
+    private toggleSort;
+    private toggleSelectAll;
+    private toggleSelectRow;
+}
+export interface TableProps extends UIProps {
+    columns?: TableColumn[];
+    dataSource?: Record<string, any>[];
+    rowKey?: string;
+    pagination?: boolean | {
+        current?: number;
+        pageSize?: number;
+        total?: number;
+        onChange?: (page: number) => void;
+    };
+    loading?: boolean;
+    empty?: React.ReactNode;
+    scroll?: {
+        x?: number;
+        y?: number;
+    };
+    bordered?: boolean;
+    striped?: boolean;
+    rowSelection?: boolean;
+    selectedRowKeys?: (string | number)[];
+    defaultSelectedRowKeys?: (string | number)[];
+    onRowSelectionChange?: (selectedRowKeys: (string | number)[]) => void;
+}
+interface TableState extends UIState {
+    sortKey: string | null;
+    sortOrder: string | null;
+    selectedRowKeys: (string | number)[];
+}
+export {};

package/component/display/Tag.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type TagType = "ghost" | "solid" | "light";
+type TagSize = "small" | "default" | "large";
+/**
+ * 标签。
+ * 仅传 color 不传 type 时, 使用彩色填充风格(与显式 type="light" 区分).
+ */
+export declare class Tag extends AbstractUI<TagProps, TagState> {
+    constructor(props: TagProps);
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface TagProps extends UIProps {
+    type?: TagType;
+    color?: string;
+    size?: TagSize;
+    closable?: boolean;
+    avatar?: React.ReactNode;
+    visible?: boolean;
+    onClose?: () => void;
+}
+interface TagState extends UIState {
+}
+export {};