@next-bricks/form 0.5.0 → 0.7.0

package/dist-types/bootstrap.d.ts

@@ -9,3 +9,4 @@ import "./checkbox/index.js";
 import "./code-editor/index.js";
 import "./dynamic-form-item/index.js";
 import "./search/index.js";
+import "./icon-select/index.js";

package/dist-types/checkbox/index.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import "@next-core/theme";
-import { FormItemElement } from "../form-item/FormItemElement.js";
+import type { FormItemProps } from "../form-item/index.js";
+import { FormItemElementBase } from "@next-shared/form";
 export type CheckboxType = "default" | "icon";
 export declare type CheckboxValueType = string | number | boolean;
 export interface CheckboxOptionType {
@@ -19,66 +20,62 @@ export interface OptionGroup {
     key: string;
     options: CheckboxOptionType[];
 }
-export interface CheckboxProps {
+export interface CheckboxProps extends FormItemProps {
     options?: CheckboxOptionType[];
     label?: string;
     value?: CheckboxValueType[];
-    onChange?: (value: CheckboxOptionType[]) => void;
-    text?: string;
+    disabled?: boolean;
     type?: CheckboxType;
     isCustom?: boolean;
-    name?: string;
-    [propName: string]: any;
+    onChange?: (value: CheckboxOptionType[]) => void;
+    optionsChange?: (options: CheckboxOptionType[], name: string) => void;
 }
-declare class Checkbox extends FormItemElement {
+/**
+ * 表单复选框构件
+ * @author derrickma
+ */
+declare class Checkbox extends FormItemElementBase {
     #private;
     /**
-     * @kind string
-     * @required true
-     * @default -
-     * @description 多选框当前选中初始值
-     * @group basic
+     * 字段名称
      */
-    accessor value: string[] | undefined;
+    accessor name: string | undefined;
     /**
-     * @required true
-     * @default -
-     * @description 多选框选项表
-     * @group basic
+     * 字段说明
      */
-    accessor options: CheckboxOptionType[];
+    accessor label: string | undefined;
     /**
-     * @kind string
-     * @required true
-     * @default -
-     * @description 多选框字段名
-     * @group basicFormItem
+     * 值
      */
-    accessor name: string | undefined;
+    accessor value: CheckboxValueType[] | undefined;
     /**
-     * @kind string
-     * @required false
-     * @default -
-     * @description 多选框字段说明
-     * @group basic
+     * 多选框选项表
+     * @required
      */
-    accessor label: string | undefined;
+    accessor options: CheckboxOptionType[];
     /**
-     * @kind string
-     * @required false
-     * @default -
-     * @description 多选框类型
-     * @group basic
+     * 类型
+     * @default "default"
      */
     accessor type: CheckboxType;
     /**
-     * @kind boolean
-     * @required false
-     * @default -
-     * @description 多选框字段说明
-     * @group basic
+     * 是否禁用
+     */
+    accessor disabled: boolean | undefined;
+    /**
+     * 是否为自定义
+     * @default false
      */
     accessor isCustom: boolean;
+    /**
+     * 是否必填
+     */
+    accessor required: boolean | undefined;
+    /**
+     * 校验文本
+     */
+    accessor message: Record<string, string> | undefined;
+    handleCheckboxChange: (detail: CheckboxOptionType[]) => void;
     render(): JSX.Element;
 }
 export { Checkbox };

package/dist-types/code-editor/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" resolution-mode="require"/>
+/// <reference types="react" />
 import { CodeEditorProps, HighlightTokenSettings, Annotation } from "./interfaces.js";
-import { FormItemElement } from "../form-item/FormItemElement.js";
+import { FormItemElementBase } from "@next-shared/form";
 export interface Error {
     err: Annotation[];
     hasError: boolean;
@@ -13,7 +13,7 @@ export interface Error {
  * @author sailor
  * @noInheritDoc
  */
-declare class CodeEditor extends FormItemElement {
+declare class CodeEditor extends FormItemElementBase {
     #private;
     /**
      * @description

package/dist-types/dynamic-form-item/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" resolution-mode="require"/>
-import { FormItemElement } from "../form-item/FormItemElement.js";
+/// <reference types="react" />
 import { UseBrickConf } from "@next-core/types";
 import "@next-core/theme";
+import { FormItemElementBase } from "@next-shared/form";
 type DynamicFormValuesItem = Record<string, any>;
 /**
  * @id form.dynamic-form-item
@@ -11,21 +11,26 @@ type DynamicFormValuesItem = Record<string, any>;
  * @author sailor
  * @noInheritDoc
  */
-declare class DynamicFormItem extends FormItemElement {
+declare class DynamicFormItem extends FormItemElementBase {
     #private;
+    /**
+     * 字段名称
+     */
     accessor name: string | undefined;
+    /**
+     * 字段说明
+     */
     accessor label: string | undefined;
     /**
-     * @default
-     * @required
-     * @description
+     * 是否必填
      */
     accessor required: boolean | undefined;
+    /**
+     * 值
+     */
     accessor value: DynamicFormValuesItem[] | undefined;
     /**
-     * @default
-     * @required
-     * @description
+     * 动态表单子项构件列表
      */
     accessor useBrick: UseBrickConf | undefined;
     handleDynamicFormChange: (values: DynamicFormValuesItem[]) => void;

package/dist-types/form/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" resolution-mode="require"/>
+/// <reference types="react" />
 import { ReactNextElement } from "@next-core/react-element";
-import { FormStore } from "./formStore.js";
+import { AbstractForm, FormStore } from "@next-shared/form";
 import { ComponentSize, Layout } from "../interface.js";
 interface FormProps {
     values?: Record<string, any>;
@@ -18,46 +18,49 @@ export interface FormMapEvents {
     onValidateError: "validate.error";
 }
 /**
- * @id form.general-form
- * @name form.general-form
- * @docKind brick
- * @description 通用输入框构件
+ * 表单构件
  * @author sailor
- * @noInheritDoc
+ * @slot - 表单内容
  */
-declare class Form extends ReactNextElement implements FormProps {
+declare class Form extends ReactNextElement implements FormProps, AbstractForm {
     #private;
-    readonly isFormElement = true;
     formStore: FormStore;
     defaultEmitValuesChange: boolean;
     constructor();
+    get isFormElement(): true;
     set values(value: Record<string, unknown>);
     get values(): Record<string, unknown>;
+    /**
+     * 布局方式
+     */
     accessor layout: Layout | undefined;
+    /**
+     * 表单组件尺寸
+     */
     accessor size: ComponentSize | undefined;
     handleValuesChange: (values: Record<string, unknown>) => void;
     /**
-     * @description
+     * 表单校验方法
      */
     validate(): boolean | Record<string, unknown>;
     /**
-     * @description
+     * 表单设置值方法
      */
     setInitValue(values: Record<string, unknown>): void;
     /**
-     * @description
+     * 表单重置值方法
      */
     resetFields(name?: string): void;
     /**
-     * @description
+     * 获取表单值方法
      */
-    getFieldsValue(name: string): unknown;
+    getFieldsValue(name?: string): unknown;
     /**
-     * @description
+     * 校验表单字段方法
      */
     validateField(name: string): void;
     /**
-     * @description
+     * 重置表单校验状态方法
      */
     resetValidateState(): void;
     render(): JSX.Element;

package/dist-types/form-item/index.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" resolution-mode="require"/>
-import { FormItemElement } from "./FormItemElement.js";
+/// <reference types="react" />
+import { AbstractForm, FormItemElementBase, MessageBody } from "@next-shared/form";
 import type { Form } from "../form/index.jsx";
 import type { ComponentSize, Layout } from "../interface.js";
-import type { MessageBody } from "../form/formStore.js";
 import "@next-core/theme";
 type CurrentElement = HTMLElement & {
     size?: ComponentSize;
@@ -10,7 +9,7 @@ type CurrentElement = HTMLElement & {
     [key: string]: any;
 };
 export interface FormItemProps {
-    formElement?: Form;
+    formElement?: AbstractForm | null;
     curElement: CurrentElement;
     name?: string;
     label?: string;
@@ -37,7 +36,7 @@ export interface FormItemProps {
  * @author sailor
  * @noInheritDoc
  */
-declare class FormItem extends FormItemElement implements FormItemProps {
+declare class FormItem extends FormItemElementBase implements FormItemProps {
     /**
      * @default
      * @required

package/dist-types/icon-select/i18n.d.ts

@@ -0,0 +1,15 @@
+export declare enum K {
+    ICON = "ICON",
+    COLOR = "COLOR",
+    SELECT_ICON = "SELECT_ICON",
+    SEARCH_PLACEHOLDER = "SEARCH_PLACEHOLDER"
+}
+export declare const NS = "bricks/form/icon-select";
+export declare const locales: {
+    en: Locale;
+    zh: Locale;
+};
+type Locale = {
+    [key in K]: string;
+};
+export {};

package/dist-types/icon-select/index.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import { FormItemElementBase } from "@next-shared/form";
+import "@next-core/theme";
+import type { FormItemProps } from "../form-item/index.js";
+import type { GeneralIconProps } from "@next-bricks/icons/general-icon";
+type Icon = GeneralIconProps & {
+    color?: string;
+};
+export interface IconSelectProps {
+    name?: string;
+    label?: string;
+    value?: Icon;
+    disabled?: boolean;
+    required?: boolean;
+    message?: Record<string, string>;
+}
+/**
+ * 图标选择构件
+ */
+export declare class IconSelect extends FormItemElementBase implements IconSelectProps {
+    #private;
+    /**
+     * 字段名称
+     */
+    accessor name: string | undefined;
+    /**
+     * 字段说明
+     */
+    accessor label: string | undefined;
+    /**
+     * 值
+     */
+    accessor value: Icon | undefined;
+    /**
+     * 是否禁用
+     */
+    accessor disabled: boolean | undefined;
+    /**
+     * 是否必填
+     */
+    accessor required: boolean | undefined;
+    /**
+     * 是否必填
+     */
+    accessor message: Record<string, string> | undefined;
+    handleChange: (value?: Icon) => void;
+    render(): JSX.Element;
+}
+interface IconSelectComponentProps extends FormItemProps, IconSelectProps {
+    onChange?: (value?: Icon) => void;
+}
+export declare function IconSelectComponent(props: IconSelectComponentProps): JSX.Element;
+export {};

package/dist-types/icon-select/index.spec.d.ts

@@ -0,0 +1 @@
+import "./";

package/dist-types/icon-select/utils.d.ts

@@ -0,0 +1,25 @@
+export declare enum Colors {
+    green = "green",
+    red = "red",
+    blue = "blue",
+    orange = "orange",
+    cyan = "cyan",
+    purple = "purple",
+    geekblue = "geekblue",
+    gray = "gray"
+}
+export declare const COLORS_MAP: Record<Colors, {
+    color: string;
+    background: string;
+    borderColor: string;
+}>;
+/**
+ * 如果提供的颜色值是平台提供的规范颜色，则转换为使用平台规范的颜色定义，包括color、background、borderColor，不是的话则原样输出。
+ * @param color {string} 颜色值
+ * @return {color:string;background:string;borderColor:string;} 返回处理后的对应颜色值
+ */
+export declare function getColor(color?: string): {
+    color: string;
+    background: string;
+    borderColor: string;
+};

package/dist-types/input/index.d.ts

@@ -1,27 +1,98 @@
 import React from "react";
 import { ComponentSize, InputType } from "../interface.js";
+import { FormItemElementBase } from "@next-shared/form";
 import "@next-core/theme";
-import { Form } from "../form/index.js";
-interface InputProps {
-    formElement?: Form;
-    curElement: HTMLElement;
-    name?: string;
-    label?: string;
+import type { FormItemProps } from "../form-item/index.jsx";
+interface InputProps extends FormItemProps {
     value?: string;
     placeholder?: string;
     disabled?: boolean;
+    clearable?: boolean;
     type?: InputType;
     size?: ComponentSize;
     inputStyle?: React.CSSProperties;
     minLength?: number;
     maxLength?: number;
-    required?: boolean;
-    pattern?: string;
-    min?: number;
-    max?: number;
     validateState?: string;
     trigger?: string;
     onInputChange: (value: string) => void;
 }
+/**
+ * 通用输入框构件
+ * @author sailor
+ * @slot prefix - 输入框前置插槽
+ * @slot suffix - 输入框后置插槽
+ */
+declare class Input extends FormItemElementBase {
+    #private;
+    /**
+     * 字段名称
+     */
+    accessor name: string | undefined;
+    /**
+     * 标签文字
+     */
+    accessor label: string | undefined;
+    /**
+     * 输入框值
+     */
+    accessor value: string | undefined;
+    /**
+     * 占位说明
+     */
+    accessor placeholder: string | undefined;
+    /**
+     * 是否禁用
+     */
+    accessor disabled: boolean | undefined;
+    /**
+     * 是否显示清除按钮
+     */
+    accessor clearable: boolean | undefined;
+    /**
+     * 类型
+     * @default "text"
+     */
+    accessor type: InputType | undefined;
+    /**
+     * 大小
+     * @default "medium"
+     */
+    accessor size: ComponentSize | undefined;
+    /**
+     * 最小长度
+     */
+    accessor minLength: number | undefined;
+    /**
+     * 最大长度
+     */
+    accessor maxLength: number | undefined;
+    /**
+     * 是否必填
+     */
+    accessor required: boolean | undefined;
+    /**
+     * 正则校验规则
+     */
+    accessor pattern: string | undefined;
+    /**
+     * 表单校验最大长度
+     */
+    accessor max: number | undefined;
+    /**
+     * 表单校验最小长度
+     */
+    accessor min: number | undefined;
+    /**
+     * 错误时显示消息
+     */
+    accessor message: Record<string, string> | undefined;
+    /**
+     * 输入框样式
+     */
+    accessor inputStyle: React.CSSProperties | undefined;
+    handleInputChange: (value: string) => void;
+    render(): JSX.Element;
+}
 export declare function InputComponent(props: InputProps): JSX.Element;
-export {};
+export { Input };

package/dist-types/input/index.spec.d.ts

@@ -0,0 +1 @@
+import "./";

package/dist-types/radio/index.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import type { RadioType, GeneralOption, UIType, RadioGroupButtonStyle } from "../interface.js";
+import { FormItemElementBase } from "@next-shared/form";
+import type { RadioType, GeneralOption, GeneralComplexOption, UIType, RadioGroupButtonStyle, ComponentSize } from "../interface.js";
 import "@next-core/theme";
+import type { FormItemProps } from "../form-item/index.jsx";
 import { UseSingleBrickConf } from "@next-core/types";
-import { FormItemElement } from "../form-item/FormItemElement.js";
-import type { Form } from "../form/index.jsx";
 interface CustomOptions {
     url: string;
     description?: string;
@@ -14,132 +14,94 @@ interface CustomOptions {
 }
 export interface RadioProps {
     type?: RadioType;
-    curElement: HTMLElement;
-    formElement: Form;
     options: GeneralOption[] | CustomOptions[] | undefined;
     value?: any;
-    name?: string;
     disabled?: boolean;
     buttonStyle?: RadioGroupButtonStyle;
-    size?: "large" | "medium" | "small";
+    size?: ComponentSize;
     ui?: UIType;
     useBrick?: UseSingleBrickConf;
     customStyle?: React.CSSProperties;
-    label?: string;
-    trigger?: string;
-    onChange?: (value: any) => void;
-    optionsChange?: (options: any, name: string) => void;
+}
+export interface RadioEvents {
+    change: CustomEvent<GeneralComplexOption["value"]>;
+    optionsChange: CustomEvent<{
+        options: GeneralComplexOption[];
+        name: string;
+    }>;
+}
+export interface RadioEventsMapping {
+    onValueChange: "change";
+    onOptionsChange: "optionsChange";
 }
 /**
- * @id form.general-radio
- * @name form.general-radio
- * @docKind brick
- * @description 通用单选构件
+ * 通用单选构件
  * @author sailor
- * @noInheritDoc
  */
-declare class Radio extends FormItemElement {
+declare class Radio extends FormItemElementBase {
     #private;
     /**
-     * @kind string
-     * @required true
-     * @default -
-     * @description 下拉框字段名
-     * @group basicFormItem
+     * 下拉框字段名
      */
     accessor name: string | undefined;
     /**
-     * @kind string
-     * @required false
-     * @default -
-     * @description 单选框字段说明
-     * @group basic
+     * 单选框字段说明
      */
     accessor label: string | undefined;
     /**
-     * @required true
-     * @default -
-     * @description 单选框选项表，RadioType为default时，如果设置了tooltip值,可以设置tooltipIcon图标（MenuIcon 类型）,tooltipIcon颜色默认为--color-secondary-text。
-     * @group basic
+     * 单选框选项表
+     * @required
      */
     accessor options: GeneralOption[] | undefined;
     /**
-     * @kind string
-     * @required true
-     * @default -
-     * @description 单选框当前选中始值
-     * @group basic
+     * 单选框当前选中始值
      */
     accessor value: any | undefined;
     /**
-     * @kind boolean
-     * @required false
-     * @default -
-     * @description 是否必填项
-     * @group basicFormItem
+     * 是否必填
      */
     accessor required: boolean | undefined;
     /**
-     * @kind Record<string,string>
-     * @required false
-     * @default -
-     * @description 校验文本信息
-     * @group basicFormItem
+     * 校验文本信息
      */
     accessor message: Record<string, string> | undefined;
     /**
-     * @kind boolean
-     * @required false
-     * @default  false
-     * @description 是否禁用
-     * @group basic
+     * 是否禁用
      */
     accessor disabled: boolean | undefined;
     /**
-     * @kind RadioType
-     * @required false
-     * @default default
-     * @description 	单选框样式类型
-     * @enums "button"|"default"|"icon"|"icon-circle"|"icon-square"|"custom"
-     * @group basic
+     * 单选框样式类型
+     * @default "default"
      */
     accessor type: RadioType | undefined;
     /**
-     * @kind UIType
-     * @required false
-     * @default default
-     * @description Ui样式，可选择 `dashboard` 样式，默认`default`
-     * @group ui
+     * UI样式
+     * @default "default"
      */
     accessor ui: UIType | undefined;
     /**
-     * @kind "large" | "medium" | "small"
-     * @required false
-     * @default -
-     * @description 大小，只对按钮样式生效
-     * @enums "large"|"medium"|"small"
-     * @group ui
+     * 大小，只对按钮样式生效
+     * @default "medium"
      */
-    accessor size: "large" | "medium" | "small" | undefined;
+    accessor size: ComponentSize | undefined;
     /**
-     * @kind customStyle
-     * @required false
-     * @default -
-     * @description 	自定义radio的外层样式
-     * @group ui
+     * 自定义radio的外层样式
      */
     accessor customStyle: React.CSSProperties | undefined;
     /**
-     * @kind `{useBrick: UseSingleBrickConf }`
-     * @required false
-     * @default
-     * @description 自定义radio的内容
-     * @group advancedFormItem
+     * 自定义radio的内容
      */
     accessor useBrick: UseSingleBrickConf | undefined;
-    private _handleChange;
-    private _handleOptionsChange;
+    handleChange: (item: {
+        [key: string]: any;
+        label: string;
+        value: any;
+    }) => void;
     render(): JSX.Element;
 }
-export declare function RadioComponent(props: RadioProps): JSX.Element;
+interface RadioComponentProps extends RadioProps, FormItemProps {
+    onChange?: (value: any) => void;
+    optionsChange?: (options: any, name: string) => void;
+}
+export declare function RadioComponent(props: RadioComponentProps): JSX.Element;
 export { Radio };