knight-ui 1.0.0

package/component/input/Radio.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+interface RadioGroupContextValue {
+    value: any;
+    disabled: boolean;
+    onChange: (val: any) => void;
+}
+declare const RadioGroupContext: React.Context<RadioGroupContextValue>;
+declare class RadioGroup extends AbstractUI<RadioGroupProps, RadioGroupState> {
+    static displayName: string;
+    constructor(props: RadioGroupProps);
+    componentDidUpdate(prevProps: Readonly<RadioGroupProps>): void;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface RadioGroupProps extends UIProps {
+    /** 受控: 选中值 */
+    value?: any;
+    /** 非受控: 默认选中值 */
+    defaultValue?: any;
+    /** 排列方向 */
+    direction?: "horizontal" | "vertical";
+    /** Radio 类型 */
+    type?: "default" | "button" | "card";
+    /** 是否整体禁用 */
+    disabled?: boolean;
+    /** 选中值变化回调 */
+    onChange?: (value: any) => void;
+}
+interface RadioGroupState extends UIState {
+    value: any;
+}
+/**
+ * 单选框。
+ * 支持 RadioGroup 复合组件.
+ */
+export declare class Radio extends AbstractUI<RadioProps, RadioState> {
+    static Group: typeof RadioGroup;
+    static contextType: React.Context<RadioGroupContextValue>;
+    context: React.ContextType<typeof RadioGroupContext>;
+    constructor(props: RadioProps);
+    componentDidUpdate(prevProps: Readonly<RadioProps>): void;
+    focus(): void;
+    blur(): void;
+    protected OnRenderContent(): React.ReactElement;
+    private renderButton;
+}
+export interface RadioProps extends UIProps {
+    /** 受控: 是否选中 */
+    checked?: boolean;
+    /** RadioGroup 中的值 */
+    value?: any;
+    /** Radio 类型 */
+    type?: "default" | "button" | "card";
+    /** 状态变化回调 */
+    onChange?: (checked: boolean) => void;
+}
+interface RadioState extends UIState {
+    checked: boolean;
+}
+export {};

package/component/input/Rating.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 评分。
+ */
+export declare class Rating extends AbstractUI<RatingProps, RatingState> {
+    constructor(props: RatingProps);
+    componentDidUpdate(prevProps: Readonly<RatingProps>): void;
+    protected OnRenderContent(): React.ReactElement;
+    private starStyle;
+    private setValue;
+}
+export interface RatingProps extends UIProps {
+    /** 受控: 当前分值 */
+    value?: number;
+    /** 非受控: 默认分值 */
+    defaultValue?: number;
+    /** 星数 */
+    count?: number;
+    /** 是否允许半星 */
+    allowHalf?: boolean;
+    /** 尺寸 */
+    size?: "small" | "default" | "large";
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否显示数值 */
+    showInfo?: boolean;
+    /** 自定义字符 */
+    character?: React.ReactNode;
+    /** 提示文字数组 */
+    tooltips?: string[];
+    /** 值变化回调 */
+    onChange?: (value: number) => void;
+}
+interface RatingState extends UIState {
+    value: number;
+    hoverValue: number;
+}
+export {};

package/component/input/Select.d.ts

@@ -0,0 +1,80 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+export interface SelectOption {
+    label: React.ReactNode;
+    value: string;
+    disabled?: boolean;
+}
+declare class SelectOptionC extends AbstractUI<SelectOptionProps, UIState> {
+    static displayName: string;
+    protected OnRenderContent(): React.ReactElement;
+}
+interface SelectOptionProps extends UIProps {
+    label?: React.ReactNode;
+    value?: string;
+    disabled?: boolean;
+}
+declare class SelectOptGroup extends AbstractUI<SelectOptGroupProps, UIState> {
+    static displayName: string;
+    protected OnRenderContent(): React.ReactElement;
+}
+interface SelectOptGroupProps extends UIProps {
+    label?: React.ReactNode;
+}
+/**
+ * 选择器。
+ */
+export declare class Select extends AbstractUI<SelectProps, SelectState> {
+    static Option: typeof SelectOptionC;
+    static OptGroup: typeof SelectOptGroup;
+    constructor(props: SelectProps);
+    componentDidUpdate(prevProps: Readonly<SelectProps>): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private onClickOutside;
+    protected OnRenderContent(): React.ReactElement;
+    private buildOptions;
+    private getSelectedLabels;
+    private toggleOption;
+}
+export interface SelectProps extends UIProps {
+    /** 选项列表(优先于 children) */
+    optionList?: SelectOption[];
+    /** 受控值 */
+    value?: string | string[];
+    /** 默认值 */
+    defaultValue?: string | string[];
+    /** 多选模式 */
+    multiple?: boolean;
+    /** 本地搜索过滤 */
+    filter?: boolean;
+    /** 最大选择数(多选) */
+    max?: number;
+    /** 最多显示标签数(多选) */
+    maxTagCount?: number;
+    /** 自定义渲染选项 */
+    renderOptionItem?: (option: SelectOption) => React.ReactNode;
+    /** 自定义渲染触发器 */
+    triggerRender?: (props: {
+        value: string | string[];
+        placeholder?: string;
+    }) => React.ReactNode;
+    /** 空数据内容 */
+    emptyContent?: React.ReactNode;
+    /** 加载中 */
+    loading?: boolean;
+    /** 占位文本 */
+    placeholder?: string;
+    /** 尺寸 */
+    size?: "small" | "default" | "large";
+    /** 展开回调 */
+    onOpen?: () => void;
+    /** 值变化回调 */
+    onChange?: (value: string | string[]) => void;
+}
+interface SelectState extends UIState {
+    value: string | string[];
+    open: boolean;
+    search: string;
+}
+export {};

package/component/input/Slider.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 滑块。
+ */
+export declare class Slider extends AbstractUI<SliderProps, SliderState> {
+    private readonly thumbSize;
+    private trackRef;
+    private trackBarRef;
+    private dragging;
+    constructor(props: SliderProps);
+    componentDidUpdate(prevProps: Readonly<SliderProps>): void;
+    protected OnRenderContent(): React.ReactElement;
+    private getTrackBounds;
+    private onTrackClick;
+    private onThumbDown;
+    private clamp;
+    private setValue;
+}
+export interface SliderProps extends UIProps {
+    value?: number | [number, number];
+    defaultValue?: number | [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    range?: boolean;
+    disabled?: boolean;
+    marks?: Record<number, string>;
+    tooltipVisible?: boolean;
+    /** 是否显示最小/最大值标签 */
+    showMinMax?: boolean;
+    onChange?: (value: number | [number, number]) => void;
+}
+interface SliderState extends UIState {
+    value: number;
+    rangeValue: [number, number];
+    thumb0Hovered: boolean;
+    thumb1Hovered: boolean;
+}
+export {};

package/component/input/Switch.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 开关。
+ */
+export declare class Switch extends AbstractUI<SwitchProps, SwitchState> {
+    constructor(props: SwitchProps);
+    componentDidUpdate(prevProps: Readonly<SwitchProps>): void;
+    focus(): void;
+    blur(): void;
+    protected OnRenderContent(): React.ReactElement;
+    private toggle;
+}
+export interface SwitchProps extends UIProps {
+    /** 受控: 是否打开 */
+    checked?: boolean;
+    /** 非受控: 默认是否打开 */
+    defaultChecked?: boolean;
+    /** 尺寸 */
+    size?: "small" | "default" | "large";
+    /** 加载中 */
+    loading?: boolean;
+    /** 选中时文本 */
+    checkedText?: React.ReactNode;
+    /** 未选中时文本 */
+    uncheckedText?: React.ReactNode;
+    /** 状态变化回调 */
+    onChange?: (checked: boolean) => void;
+}
+interface SwitchState extends UIState {
+    checked: boolean;
+}
+export {};

package/component/input/TagInput.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 标签输入。
+ * 输入文本后按回车或分隔符生成标签.
+ */
+export declare class TagInput extends AbstractUI<TagInputProps, TagInputState> {
+    private inputRef;
+    constructor(props: TagInputProps);
+    componentDidUpdate(prevProps: Readonly<TagInputProps>): void;
+    focus(): void;
+    protected OnRenderContent(): React.ReactElement;
+    private addTag;
+    private removeTag;
+}
+export interface TagInputProps extends UIProps {
+    /** 受控: 标签列表 */
+    value?: string[];
+    /** 非受控: 默认标签列表 */
+    defaultValue?: string[];
+    /** 占位符 */
+    placeholder?: string;
+    /** 尺寸 */
+    size?: "small" | "default" | "large";
+    /** 最大标签数 */
+    max?: number;
+    /** 最多显示标签数 */
+    maxTagCount?: number;
+    /** 分隔符(自动分割粘贴内容) */
+    separator?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 自定义标签渲染 */
+    renderTagItem?: (tag: string, index: number) => React.ReactNode;
+    /** 标签变化回调 */
+    onChange?: (value: string[]) => void;
+    /** 标签移除回调 */
+    onRemove?: (tag: string, index: number) => void;
+}
+interface TagInputState extends UIState {
+    value: string[];
+    inputValue: string;
+}
+export {};

package/component/input/TimePicker.d.ts

@@ -0,0 +1,74 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 时间选择器。
+ * 自定义滚动列面板: 时 / 分 / 秒.
+ */
+export declare class TimePicker extends AbstractUI<TimePickerProps, TimePickerState> {
+    private panelEl;
+    private onPanelRef;
+    private onPanelWheel;
+    private hoursColRef;
+    private minutesColRef;
+    private secondsColRef;
+    private scrollingCols;
+    private readonly ITEM_H;
+    private readonly COL_H;
+    private readonly ANIM_MS;
+    constructor(props: TimePickerProps);
+    componentDidUpdate(prevProps: Readonly<TimePickerProps>): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private onClickOutside;
+    focus(): void;
+    blur(): void;
+    private parseTime;
+    private formatTime;
+    protected OnRenderContent(): React.ReactElement;
+    private setPending;
+    private commitTime;
+    private getColRef;
+    private getColStep;
+    private getColValue;
+    /** 平滑动画滚动列到目标居中位置，动画期间忽略同列的后续调用 */
+    private animateScrollTo;
+    private scrollAllToCenter;
+}
+export interface TimePickerProps extends UIProps {
+    /** 受控值 (HH:mm 或 HH:mm:ss) */
+    value?: string;
+    /** 默认值 */
+    defaultValue?: string;
+    /** 显示格式 */
+    format?: "HH:mm" | "HH:mm:ss";
+    /** 小时步长 */
+    hourStep?: number;
+    /** 分钟步长 */
+    minuteStep?: number;
+    /** 秒步长 */
+    secondStep?: number;
+    /** 是否显示清除按钮 */
+    showClear?: boolean;
+    /** 占位文本 */
+    placeholder?: string;
+    /** 尺寸 */
+    size?: "small" | "default" | "large";
+    /** 禁用时间校验 */
+    disabledTime?: (time: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    }) => boolean;
+    /** 值变化回调 */
+    onChange?: (value: string) => void;
+}
+interface TimePickerState extends UIState {
+    value: string;
+    open: boolean;
+    pending: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    };
+}
+export {};

package/component/input/Transfer.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+export interface TransferItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+/**
+ * 穿梭框。
+ */
+export declare class Transfer extends AbstractUI<TransferProps, TransferState> {
+    constructor(props: TransferProps);
+    componentDidUpdate(prevProps: Readonly<TransferProps>): void;
+    protected OnRenderContent(): React.ReactElement;
+    private renderPanel;
+    private btnStyle;
+    private toggleSelect;
+    private moveRight;
+    private moveLeft;
+    private finalMove;
+}
+export interface TransferProps extends UIProps {
+    /** 数据源 */
+    dataSource?: TransferItem[];
+    /** 受控: 右侧 key 值数组 */
+    value?: string[];
+    /** 默认右侧 key 值 */
+    defaultValue?: string[];
+    /** 面板标题 [源标题, 目标标题] */
+    titles?: [string, string];
+    /** 是否显示搜索 */
+    filter?: boolean;
+    /** 自定义源列表项渲染 */
+    renderSourceItem?: (item: TransferItem) => React.ReactNode;
+    /** 自定义目标列表项渲染 */
+    renderTargetItem?: (item: TransferItem) => React.ReactNode;
+    /** 空数据占位 */
+    emptyContent?: React.ReactNode;
+    /** 变化回调 */
+    onChange?: (targetKeys: string[]) => void;
+}
+interface TransferState extends UIState {
+    targetKeys: string[];
+    sourceFilter: string;
+    targetFilter: string;
+    sourceSelected: string[];
+    targetSelected: string[];
+}
+export {};

package/component/input/TreeSelect.d.ts

@@ -0,0 +1,68 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+export interface TreeSelectNode {
+    label: string;
+    value: string;
+    children?: TreeSelectNode[];
+    disabled?: boolean;
+}
+declare class TreeSelectOption extends AbstractUI<TreeSelectOptionProps, UIState> {
+    static displayName: string;
+    protected OnRenderContent(): React.ReactElement;
+}
+interface TreeSelectOptionProps extends UIProps {
+    label?: string;
+    value?: string;
+    disabled?: boolean;
+}
+/**
+ * 树选择器。
+ */
+export declare class TreeSelect extends AbstractUI<TreeSelectProps, TreeSelectState> {
+    static Option: typeof TreeSelectOption;
+    constructor(props: TreeSelectProps);
+    componentDidUpdate(prevProps: Readonly<TreeSelectProps>): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private onClickOutside;
+    protected OnRenderContent(): React.ReactElement;
+    private flatItemStyle;
+    private renderCheckbox;
+    private renderTreeNode;
+    private buildTree;
+    private searchNodes;
+    private isSelected;
+    private toggleExpand;
+    private toggleNode;
+    private getSelectedLabels;
+    private findNode;
+}
+export interface TreeSelectProps extends UIProps {
+    /** 树数据(优先于 children) */
+    treeData?: TreeSelectNode[];
+    /** 受控值 */
+    value?: string | string[];
+    /** 默认值 */
+    defaultValue?: string | string[];
+    /** 多选模式 */
+    multiple?: boolean;
+    /** 是否显示过滤搜索 */
+    filter?: boolean;
+    /** 最多显示标签数(多选) */
+    maxTagCount?: number;
+    /** 空数据占位 */
+    emptyContent?: React.ReactNode;
+    /** 占位文本 */
+    placeholder?: string;
+    /** 尺寸 */
+    size?: "small" | "default" | "large";
+    /** 值变化回调 */
+    onChange?: (value: string | string[]) => void;
+}
+interface TreeSelectState extends UIState {
+    value: string | string[];
+    open: boolean;
+    expandedKeys: string[];
+    search: string;
+}
+export {};

package/component/input/Upload.d.ts

@@ -0,0 +1,95 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type UploadStatus = "uploading" | "success" | "error";
+type ListType = "picture" | "list" | "pictureCard";
+export interface UploadFileItem {
+    uid: string;
+    name: string;
+    size?: number;
+    status: UploadStatus;
+    url?: string | ArrayBuffer | null;
+    percent?: number;
+    file?: File;
+    error?: string;
+}
+/**
+ * 上传。
+ * 合并旧 ImageUpload + FilePicker 功能.
+ */
+export declare class Upload extends AbstractUI<UploadProps, UploadState> {
+    private fileInputRef;
+    /** 拖拽进入计数器 — 处理子元素冒泡导致的 dragEnter/dragLeave 反复触发 */
+    private dragCounter;
+    /** 当前拖拽文件是否匹配 accept — 用于拖拽时红色警示 */
+    private dragValid;
+    constructor(props: UploadProps);
+    componentDidUpdate(prevProps: Readonly<UploadProps>): void;
+    private static isSameFileList;
+    private onDragEnter;
+    private onDragOver;
+    private onDragLeave;
+    private onDrop;
+    /** 检查拖拽中的文件是否匹配 accept — 优先用 getAsFile().name 做扩展名匹配,回退 MIME */
+    private checkDragValid;
+    /** 用文件扩展名匹配 accept 规则 */
+    private matchAcceptName;
+    /** 扩展名→MIME 映射(反向查表用) */
+    private static readonly EXT_MIME;
+    /** 用 MIME 类型匹配 accept 字符串(image/*, image/png, 以及扩展名的 MIME 反查) */
+    private matchAcceptMime;
+    protected OnRenderContent(): React.ReactElement;
+    private renderFileItem;
+    private urlToString;
+    /** 检查文件是否匹配 accept 规则 */
+    private matchAccept;
+    private handleFiles;
+    private uploadFile;
+    private updateItem;
+    private removeFile;
+}
+export interface UploadCustomRequestOptions {
+    file: File;
+    onProgress: (percent: number) => void;
+    onSuccess: (url?: string) => void;
+    onError: (error?: string) => void;
+}
+export interface UploadProps extends UIProps {
+    /** 上传地址 */
+    action?: string;
+    /** 接受的文件类型 */
+    accept?: string;
+    /** 文件列表展示类型 */
+    listType?: ListType;
+    /** 最大文件数 */
+    limit?: number;
+    /** 是否多选 */
+    multiple?: boolean;
+    /** 是否显示上传列表 */
+    showUploadList?: boolean;
+    /** 上传字段名 */
+    name?: string;
+    /** 自定义请求头 */
+    headers?: Record<string, string>;
+    /** 额外上传数据 */
+    data?: Record<string, any> | ((file: File) => Record<string, any>);
+    /** 自定义上传方法 */
+    customRequest?: (options: UploadCustomRequestOptions) => Promise<void>;
+    /** 上传前校验 — 返回 false 或 rejected Promise 拦截上传 */
+    beforeUpload?: (file: File) => boolean | Promise<boolean>;
+    /** 文件列表(受控) */
+    fileList?: UploadFileItem[];
+    /** 默认文件列表 */
+    defaultFileList?: UploadFileItem[];
+    /** 自定义触发节点 */
+    children?: React.ReactNode;
+    /** 拖拽区域提示内容 */
+    dragContent?: React.ReactNode;
+    /** 辅助提示文本 */
+    prompt?: React.ReactNode;
+    /** 变化回调 */
+    onChange?: (fileList: UploadFileItem[]) => void;
+}
+interface UploadState extends UIState {
+    fileList: UploadFileItem[];
+}
+export {};

package/component/input/index.d.ts

@@ -0,0 +1,40 @@
+export { AutoComplete } from "./AutoComplete";
+export type { AutoCompleteProps } from "./AutoComplete";
+export { Cascader } from "./Cascader";
+export type { CascaderProps, CascaderOption } from "./Cascader";
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps, CheckboxGroupProps } from "./Checkbox";
+export { ColorPicker, colorStringToValue } from "./ColorPicker";
+export type { ColorPickerProps, ColorValue } from "./ColorPicker";
+export { DatePicker } from "./DatePicker";
+export type { DatePickerProps } from "./DatePicker";
+export { Form } from "./Form";
+export type { FormProps } from "./Form";
+export { KeyValueEditor } from "./KeyValueEditor";
+export type { KeyValueEditorProps, KeyValueRow } from "./KeyValueEditor";
+export { Input } from "./Input";
+export type { InputProps, TextAreaProps } from "./Input";
+export { InputNumber } from "./InputNumber";
+export type { InputNumberProps } from "./InputNumber";
+export { PinCode } from "./PinCode";
+export type { PinCodeProps } from "./PinCode";
+export { Radio } from "./Radio";
+export type { RadioProps, RadioGroupProps } from "./Radio";
+export { Rating } from "./Rating";
+export type { RatingProps } from "./Rating";
+export { Select } from "./Select";
+export type { SelectProps } from "./Select";
+export { Slider } from "./Slider";
+export type { SliderProps } from "./Slider";
+export { Switch } from "./Switch";
+export type { SwitchProps } from "./Switch";
+export { TagInput } from "./TagInput";
+export type { TagInputProps } from "./TagInput";
+export { TimePicker } from "./TimePicker";
+export type { TimePickerProps } from "./TimePicker";
+export { Transfer } from "./Transfer";
+export type { TransferProps } from "./Transfer";
+export { TreeSelect } from "./TreeSelect";
+export type { TreeSelectNode, TreeSelectProps } from "./TreeSelect";
+export { Upload } from "./Upload";
+export type { UploadProps, UploadFileItem } from "./Upload";

package/component/navigation/Anchor.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+interface AnchorContextValue {
+    activeKey: string;
+    onClick: (key: string, href: string) => void;
+}
+declare const AnchorContext: React.Context<AnchorContextValue>;
+declare class AnchorLink extends AbstractUI<AnchorLinkProps, UIState> {
+    static displayName: string;
+    static contextType: React.Context<AnchorContextValue>;
+    context: React.ContextType<typeof AnchorContext>;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface AnchorLinkProps extends UIProps {
+    href: string;
+    title?: string;
+}
+/**
+ * 锚点导航。
+ */
+export declare class Anchor extends AbstractUI<AnchorProps, AnchorState> {
+    static Link: typeof AnchorLink;
+    constructor(props: AnchorProps);
+    componentDidUpdate(prevProps: Readonly<AnchorProps>): void;
+    protected OnRenderContent(): React.ReactElement;
+    private scrollTo;
+    private findScrollableParent;
+}
+export interface AnchorProps extends UIProps {
+    /** 锚点偏移量，默认 0 */
+    offsetTop?: number;
+    /** 当前激活的链接 key */
+    activeKey?: string;
+    /** 激活变化回调 */
+    onChange?: (key: string, href: string) => void;
+}
+interface AnchorState extends UIState {
+    activeKey: string;
+}
+export {};