knight-ui 1.0.0

package/component/input/AutoComplete.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+import type { ValidateStatus } from "../_types";
+export interface AutoCompleteOption {
+    value: string;
+    label?: React.ReactNode;
+    /** 附加数据，选中时随 onChange 回调传出 */
+    extra?: any;
+}
+/**
+ * 自动完成。
+ */
+export declare class AutoComplete extends AbstractUI<AutoCompleteProps, AutoCompleteState> {
+    private inputRef;
+    private dropdownRef;
+    constructor(props: AutoCompleteProps);
+    componentDidUpdate(prevProps: Readonly<AutoCompleteProps>): void;
+    componentWillUnmount(): void;
+    focus(): void;
+    protected OnRenderContent(): React.ReactElement;
+    private getFilteredData;
+    private onInputChange;
+    private openDropdown;
+    private closeDropdown;
+    private onDocClick;
+    private onKeyDown;
+    private onSelect;
+}
+export interface AutoCompleteProps extends UIProps {
+    /** 候选数据 */
+    data?: (string | AutoCompleteOption)[];
+    /** 受控值 */
+    value?: string;
+    /** 默认值 */
+    defaultValue?: string;
+    /** 搜索回调(用于异步请求) */
+    onSearch?: (inputValue: string) => void;
+    /** 选中回调 */
+    onSelect?: (option: AutoCompleteOption) => void;
+    /** 值变化回调 */
+    onChange?: (value: string, option?: AutoCompleteOption) => void;
+    /** 是否本地过滤 */
+    filter?: boolean;
+    /** 自定义渲染候选项 */
+    renderItem?: (option: AutoCompleteOption) => React.ReactNode;
+    /** 空数据提示 */
+    emptyContent?: React.ReactNode;
+    /** 加载中 */
+    loading?: boolean;
+    size?: "small" | "default" | "large";
+    placeholder?: string;
+    validateStatus?: ValidateStatus;
+}
+interface AutoCompleteState extends UIState {
+    value: string;
+    inputValue: string;
+    open: boolean;
+    activeIdx: number;
+}
+export {};

package/component/input/Cascader.d.ts

@@ -0,0 +1,77 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+export interface CascaderOption {
+    label: string;
+    value: string;
+    children?: CascaderOption[];
+    disabled?: boolean;
+}
+declare class CascaderOptionC extends AbstractUI<CascaderOptionProps, UIState> {
+    static displayName: string;
+    protected OnRenderContent(): React.ReactElement;
+}
+interface CascaderOptionProps extends UIProps {
+    label?: string;
+    value?: string;
+    disabled?: boolean;
+}
+/**
+ * 级联选择器。
+ * 支持单选/多选, 多选时以标签形式展示已选项.
+ */
+export declare class Cascader extends AbstractUI<CascaderProps, CascaderState> {
+    static Option: typeof CascaderOptionC;
+    constructor(props: CascaderProps);
+    componentDidUpdate(prevProps: Readonly<CascaderProps>): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private onClickOutside;
+    protected OnRenderContent(): React.ReactElement;
+    private getOptionsFromTree;
+    private extractOptionsFromChildren;
+    private findNode;
+    private buildColumns;
+    private searchOptions;
+    private onOptionClick;
+    private toggleMultiValue;
+    private selectValue;
+    private onSearchChange;
+    private getDisplayText;
+}
+export interface CascaderProps extends UIProps {
+    /** 级联数据(优先于 children) */
+    treeData?: CascaderOption[];
+    /** 受控值 */
+    value?: string[];
+    /** 默认值 */
+    defaultValue?: string[];
+    /** 多选模式 */
+    multiple?: boolean;
+    /** 最多显示标签数(多选时) */
+    maxTagCount?: number;
+    /** 尺寸 */
+    size?: "small" | "default" | "large";
+    /** 占位文本 */
+    placeholder?: string;
+    /** 是否可选择任意层级 */
+    changeOnSelect?: boolean;
+    /** 是否显示完整路径 */
+    displayPropagate?: boolean;
+    /** 是否显示搜索 */
+    filter?: boolean;
+    /** 展开回调 */
+    onOpen?: () => void;
+    /** 搜索回调 */
+    onSearch?: (keyword: string) => void;
+    /** 懒加载回调 */
+    onLoad?: (value: string) => void | Promise<void>;
+    /** 值变化回调 */
+    onChange?: (value: string[]) => void;
+}
+interface CascaderState extends UIState {
+    value: string[];
+    open: boolean;
+    search: string;
+    activeColumns: string[];
+}
+export {};

package/component/input/Checkbox.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+interface GroupContextValue {
+    value: any[];
+    disabled: boolean;
+    onChange: (val: any, checked: boolean) => void;
+}
+declare const CheckboxGroupContext: React.Context<GroupContextValue>;
+declare class CheckboxGroup extends AbstractUI<CheckboxGroupProps, CheckboxGroupState> {
+    static displayName: string;
+    constructor(props: CheckboxGroupProps);
+    componentDidUpdate(prevProps: Readonly<CheckboxGroupProps>): void;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface CheckboxGroupProps extends UIProps {
+    /** 受控: 选中值列表 */
+    value?: any[];
+    /** 非受控: 默认选中值列表 */
+    defaultValue?: any[];
+    /** 排列方向 */
+    direction?: "horizontal" | "vertical";
+    /** 是否整体禁用 */
+    disabled?: boolean;
+    /** 选中值变化回调 */
+    onChange?: (value: any[]) => void;
+}
+interface CheckboxGroupState extends UIState {
+    value: any[];
+}
+/**
+ * 复选框。
+ * 支持 Checkbox.Group 复合组件.
+ */
+export declare class Checkbox extends AbstractUI<CheckboxProps, CheckboxState> {
+    static Group: typeof CheckboxGroup;
+    static contextType: React.Context<GroupContextValue>;
+    context: React.ContextType<typeof CheckboxGroupContext>;
+    constructor(props: CheckboxProps);
+    componentDidUpdate(prevProps: Readonly<CheckboxProps>): void;
+    focus(): void;
+    blur(): void;
+    protected OnRenderContent(): React.ReactElement;
+    private handleClick;
+}
+export interface CheckboxProps extends UIProps {
+    /** 受控: 是否选中 */
+    checked?: boolean;
+    /** 非受控: 默认是否选中 */
+    defaultChecked?: boolean;
+    /** 半选状态 */
+    indeterminate?: boolean;
+    /** Checkbox.Group 中的值 */
+    value?: any;
+    /** 三态模式 — 点击循环: unchecked → indeterminate → checked → unchecked */
+    triState?: boolean;
+    /** 状态变化回调 — triState 时 indeterminate 态为 null */
+    onChange?: (checked: boolean | null) => void;
+}
+interface CheckboxState extends UIState {
+    checked: boolean;
+    _indeterminate: boolean;
+}
+export {};

package/component/input/ColorPicker.d.ts

@@ -0,0 +1,78 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+interface Hsva {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+interface Rgba {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+export interface ColorValue {
+    hex: string;
+    hsva: Hsva;
+    rgba: Rgba;
+}
+export declare function hexToHsva(hex: string): Hsva;
+/** ColorValue → 指定格式的字符串 */
+export declare function colorToString(value: ColorValue, format: "hex" | "rgba" | "hsva"): string;
+export declare function colorStringToValue(str: string): ColorValue | null;
+/**
+ * 颜色选择器，HSVA 颜色模型.
+ * 自定义取色面板：饱和度/明度选色区 + 色相滑条 + Alpha + 输入.
+ */
+export declare class ColorPicker extends AbstractUI<ColorPickerProps, ColorPickerState> {
+    static colorStringToValue: typeof colorStringToValue;
+    private panelRef;
+    private paletteRef;
+    private hueRef;
+    private alphaRef;
+    private dragType;
+    constructor(props: ColorPickerProps);
+    private resolveInitValue;
+    componentDidUpdate(prevProps: Readonly<ColorPickerProps>): void;
+    private openEyeDropper;
+    private startDrag;
+    private onDocMouseMove;
+    private onDocMouseUp;
+    private updateFromMouse;
+    private applyColor;
+    private commitColor;
+    protected OnRenderContent(): React.ReactElement;
+    private renderPanel;
+}
+export interface ColorPickerProps extends UIProps {
+    /** 受控颜色值 */
+    value?: ColorValue;
+    /** 非受控默认值 */
+    defaultValue?: ColorValue;
+    /** 默认显示格式 */
+    defaultFormat?: "hex" | "rgba" | "hsva";
+    /** 是否启用透明度选择 (Semi 默认 true) */
+    alpha?: boolean;
+    /** 是否显示取色器吸管 (Semi 默认 true) */
+    eyeDropper?: boolean;
+    /** 面板宽度 (Semi 默认 280) */
+    width?: number;
+    /** 面板高度 (Semi 默认 280) */
+    height?: number;
+    /** 面板顶部插槽 */
+    topSlot?: React.ReactNode;
+    /** 面板底部插槽 */
+    bottomSlot?: React.ReactNode;
+    /** 颜色变化回调 — ColorValue 包含 hex/hsva/rgba */
+    onChange?: (value: ColorValue) => void;
+}
+interface ColorPickerState extends UIState {
+    colorValue: ColorValue;
+    open: boolean;
+    hsva: Hsva;
+    inputValue: string;
+    alphaInput: string;
+    displayFormat: "hex" | "rgba" | "hsva";
+}
+export {};

package/component/input/DatePicker.d.ts

@@ -0,0 +1,113 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type DatePickerType = "date" | "dateRange" | "dateTime" | "dateTimeRange" | "month";
+type PanelView = "day" | "month" | "year";
+/**
+ * 日期选择器。
+ * 支持 date / dateRange / dateTime / dateTimeRange / month 五种模式.
+ */
+export declare class DatePicker extends AbstractUI<DatePickerProps, DatePickerState> {
+    private zIndex;
+    private clickOutsideHandler;
+    private colEls;
+    private scrollingCols;
+    constructor(props: DatePickerProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<DatePickerProps>): void;
+    componentWillUnmount(): void;
+    private handleOpen;
+    private handleClose;
+    private cleanup;
+    private colRef;
+    private animateColScroll;
+    /** Commit a selection WITHOUT closing the panel. */
+    private selectDate;
+    private handleDayClick;
+    private handleRangeDayClick;
+    private handleDateTimeRangeDayClick;
+    private handleRangeHover;
+    private confirmDateTime;
+    private goMonth;
+    private goYear;
+    private goDecade;
+    private goMonthLeft;
+    private goYearLeft;
+    private goMonthRight;
+    private goYearRight;
+    private setPanelView;
+    protected OnRenderContent(): React.ReactElement;
+    private renderHeader;
+    private renderBody;
+    /** DateTime body: header + (calendar OR time columns) + toggle blocks + footer. */
+    private renderDateTimeBody;
+    /** DateTime footer: date/time toggle blocks + confirm / now buttons. */
+    private renderDateTimeFooter;
+    private renderDayPanel;
+    private renderRangeDayPanel;
+    private renderDayCell;
+    private renderMonthPanel;
+    private renderYearPanel;
+    private renderMonthScrollColumns;
+    private scrollTimeColsToCenter;
+    private renderTimeScrollColumns;
+    private renderPresets;
+}
+export interface DatePickerPreset {
+    text: string;
+    start: Date;
+    end?: Date;
+}
+export interface DatePickerProps extends UIProps {
+    type?: DatePickerType;
+    value?: Date | Date[];
+    defaultValue?: Date | Date[];
+    format?: string;
+    placeholder?: string;
+    size?: "small" | "default" | "large";
+    showClear?: boolean;
+    presets?: DatePickerPreset[];
+    disabledDate?: (date: Date, options?: {
+        rangeEnd?: "start" | "end";
+    }) => boolean;
+    onChange?: (date: Date | Date[], dateString: string | string[]) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    zIndex?: number;
+    motion?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    startYear?: number;
+    endYear?: number;
+}
+interface DatePickerState extends UIState {
+    _value: Date | null;
+    _rangeValue: [Date, Date] | null;
+    open: boolean;
+    cursorDate: Date;
+    cursorDateLeft: Date;
+    cursorDateRight: Date;
+    panelView: PanelView;
+    _format: string;
+    selectingRangeEnd: boolean;
+    hoverRangeEnd: Date | null;
+    timePending: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    };
+    timePendingStart: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    };
+    timePendingEnd: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    };
+    dateTimePanelView: "date" | "time";
+    dateTimeLeftView: "date" | "time";
+    dateTimeRightView: "date" | "time";
+    activeRangeSide: "start" | "end";
+}
+export {};

package/component/input/Form.d.ts

@@ -0,0 +1,97 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type LabelPosition = "left" | "top";
+type LabelAlign = "left" | "right" | "center";
+export interface FormRule {
+    required?: boolean;
+    message?: string;
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: RegExp;
+    validator?: (value: any, values: Record<string, any>) => string | null | Promise<string | null>;
+}
+interface FieldMeta {
+    field: string;
+    label?: React.ReactNode;
+    rules?: FormRule[];
+    value: any;
+    error: string | null;
+}
+interface FormContextValue {
+    fields: Map<string, FieldMeta>;
+    registerField: (meta: FieldMeta) => () => void;
+    updateField: (field: string, value: any) => void;
+    labelPosition: LabelPosition;
+    labelAlign: LabelAlign;
+    labelWidth: number;
+    disabled: boolean;
+    validating: boolean;
+}
+declare class FormField extends AbstractUI<FormFieldProps, FormFieldState> {
+    static displayName: string;
+    static contextType: React.Context<FormContextValue>;
+    private unregister;
+    constructor(props: FormFieldProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private handleFieldChange;
+    protected OnRenderContent(): React.ReactElement;
+}
+interface FormFieldProps extends UIProps {
+    field?: string;
+    label?: React.ReactNode;
+    rules?: FormRule[];
+    value?: any;
+}
+interface FormFieldState extends UIState {
+    value: any;
+    error: string | null;
+}
+export interface FormApi {
+    getValues: () => Record<string, any>;
+    setValues: (values: Record<string, any>) => void;
+    validate: () => Promise<Record<string, any> | null>;
+    reset: () => void;
+    setError: (field: string, error: string | null) => void;
+}
+/**
+ * 表单。
+ */
+export declare class Form extends AbstractUI<FormProps, FormState> {
+    static Field: typeof FormField;
+    private formApi;
+    private fields;
+    private updateHandlers;
+    constructor(props: FormProps);
+    componentDidMount(): void;
+    private registerField;
+    private updateField;
+    private getValues;
+    private setValues;
+    private validate;
+    private reset;
+    private setError;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface FormProps extends UIProps {
+    /** 布局方向 */
+    layout?: "horizontal" | "vertical";
+    /** 标签位置 */
+    labelPosition?: LabelPosition;
+    /** 标签对齐 */
+    labelAlign?: LabelAlign;
+    /** 标签宽度 */
+    labelWidth?: number;
+    /** 获取表单 API */
+    getFormApi?: (api: FormApi) => void;
+    /** 提交回调(校验通过后) */
+    onSubmit?: (values: Record<string, any>) => void;
+    /** 提交失败回调 */
+    onSubmitFail?: (values: Record<string, any>) => void;
+}
+interface FormState extends UIState {
+    validating: boolean;
+}
+export {};

package/component/input/Input.d.ts

@@ -0,0 +1,56 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+import type { ValidateStatus } from "../_types";
+declare class TextArea extends AbstractUI<TextAreaProps, TextAreaState> {
+    static displayName: string;
+    private textareaRef;
+    constructor(props: TextAreaProps);
+    focus(): void;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface TextAreaProps extends UIProps {
+    defaultValue?: string;
+    placeholder?: string;
+    maxLength?: number;
+    rows?: number;
+    readonly?: boolean;
+    validateStatus?: ValidateStatus;
+    onChange?: (value: string, event?: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+interface TextAreaState extends UIState {
+    value: string;
+    focused: boolean;
+}
+/**
+ * 输入框。纯非受控，浏览器原生管理输入内容，IME 无干扰。
+ */
+export declare class Input extends AbstractUI<InputProps, InputState> {
+    static TextArea: typeof TextArea;
+    private inputRef;
+    constructor(props: InputProps);
+    focus(): void;
+    blur(): void;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface InputProps extends UIProps {
+    type?: "text" | "password";
+    defaultValue?: string;
+    placeholder?: string;
+    size?: "small" | "default" | "large";
+    showClear?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    maxLength?: number;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    validateStatus?: ValidateStatus;
+    onChange?: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
+}
+interface InputState extends UIState {
+    value: string;
+    showPassword: boolean;
+    focused: boolean;
+}
+export {};

package/component/input/InputNumber.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 数字输入框。
+ */
+export declare class InputNumber extends AbstractUI<InputNumberProps, InputNumberState> {
+    constructor(props: InputNumberProps);
+    componentDidUpdate(prevProps: Readonly<InputNumberProps>): void;
+    focus(): void;
+    protected OnRenderContent(): React.ReactElement;
+    /** 根据 step 小数位数消除浮点误差 */
+    private toPrecision;
+    private clamp;
+    private stepUp;
+    private stepDown;
+    private setValue;
+}
+export interface InputNumberProps extends UIProps {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: "small" | "default" | "large";
+    /** 输入框宽度,优先级高于 size @default 60 */
+    width?: number;
+    /** 输入框高度,优先级高于 size */
+    height?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    /** 是否隐藏内部 +/- 按钮 */
+    hideButtons?: boolean;
+    /** 步进器在输入框内部(hover 显示), false 时显示在外部 */
+    innerButtons?: boolean;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    onChange?: (value: number) => void;
+}
+interface InputNumberState extends UIState {
+    value: number | "";
+    inputHovered: boolean;
+    upHovered: boolean;
+    downHovered: boolean;
+}
+export {};

package/component/input/KeyValueEditor.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 键值编辑器 — 动态 key/value 行,支持增删. 用法: <KeyValueEditor value={obj} onChange={setObj} />
+ */
+export declare class KeyValueEditor extends AbstractUI<KeyValueEditorProps, KeyValueEditorState> {
+    private seed;
+    /** 标记内部编辑操作,阻止 componentDidUpdate 覆盖状态 */
+    private internalEdit;
+    constructor(props: KeyValueEditorProps);
+    componentDidUpdate(prevProps: Readonly<KeyValueEditorProps>): void;
+    private static rowsEqual;
+    static objectToRows(obj: Record<string, any>): KeyValueRow[];
+    private commit;
+    private onAdd;
+    private onRemove;
+    private onKeyChange;
+    private onValueChange;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface KeyValueEditorProps extends UIProps {
+    value?: Record<string, any>;
+    onChange?: (value: Record<string, string>) => void;
+}
+export interface KeyValueEditorState extends UIState {
+    rows: KeyValueRow[];
+}
+export interface KeyValueRow {
+    id: number;
+    key: string;
+    value: string;
+}

package/component/input/PinCode.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 验证码输入.
+ * format 默认 'number'(仅数字), 'mixed' 支持数字+字母.
+ * autoFocus 默认 true. focus(index)/blur(index) 支持指定槽位.
+ */
+export declare class PinCode extends AbstractUI<PinCodeProps, PinCodeState> {
+    private inputRefs;
+    constructor(props: PinCodeProps);
+    componentDidUpdate(prevProps: Readonly<PinCodeProps>): void;
+    componentDidMount(): void;
+    focus(index?: number): void;
+    blur(index?: number): void;
+    protected OnRenderContent(): React.ReactElement;
+    private matchesFormat;
+    /** 导航键处理: Backspace/Delete/方向键/Home/End */
+    private onKeyDown;
+    /** 字符输入: React 受控组件标准 onChange，e.target.value 即用户输入的新值 */
+    private onChange;
+    private onPaste;
+    private setCharAt;
+    private checkComplete;
+}
+export interface PinCodeProps extends UIProps {
+    /** 输入框个数 (Semi 默认 6) */
+    count?: number;
+    /** 受控值 */
+    value?: string;
+    /** 默认值 (非受控) */
+    defaultValue?: string;
+    /** 字符格式: 'number'仅数字 / 'mixed'数字+字母 / RegExp / 自定义函数 (Semi 默认 'number') */
+    format?: "number" | "mixed" | RegExp | ((ch: string) => boolean);
+    /** 尺寸 (Semi 默认 'default') */
+    size?: "small" | "default" | "large";
+    /** 自动聚焦第一个输入框 (Semi 默认 true) */
+    autoFocus?: boolean;
+    /** 全部输入完成回调 */
+    onComplete?: (value: string) => void;
+    /** 值变化回调 */
+    onChange?: (value: string) => void;
+}
+interface PinCodeState extends UIState {
+    value: string;
+}
+export {};