@next-bricks/form 0.1.0

package/dist-types/code-editor/custom-mode/CommonExpressionLanguageYamlMode.d.ts

@@ -0,0 +1,7 @@
+import "../aceBuilds/index.js";
+export declare function getCommonExpressionLanguageYamlMode(): {
+    new (): {
+        [x: string]: any;
+    };
+    [x: string]: any;
+};

package/dist-types/code-editor/custom-mode/TerraformMode.d.ts

@@ -0,0 +1,7 @@
+import "../aceBuilds/index.js";
+export declare function getTerraformMode(): {
+    new (): {
+        [x: string]: any;
+    };
+    [x: string]: any;
+};

package/dist-types/code-editor/custom-mode/brickNextUtil.d.ts

@@ -0,0 +1,15 @@
+import { IEditorProps } from "react-ace";
+export declare const brickNextSnippet: {
+    label: string;
+    caption: string;
+    snippet: string;
+    meta: string;
+}[];
+export declare const brickNextKeywords: string[];
+export declare const brickNextCompleters: ({
+    identifierRegexps: RegExp[];
+    getCompletions(editor: IEditorProps, session: any, pos: any, prefix: string, callback: any): void;
+} | {
+    getCompletions(editor: IEditorProps, session: any, pos: any, prefix: string, callback: any): void;
+    identifierRegexps?: undefined;
+})[];

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

@@ -0,0 +1,2 @@
+import { ExtendedMarker, HighlightTokenType } from "./interfaces.js";
+export declare function getClickableMarker(e: any, clickableTypes: HighlightTokenType[], markers?: ExtendedMarker[]): ExtendedMarker | void;

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

@@ -0,0 +1,11 @@
+import { IEditorProps } from "react-ace";
+import { ExtendedMarker, HighlightTokenSettings } from "./interfaces.js";
+export declare function getHighlightMarkers({ editor, markerClassMap, highlightTokens, }: {
+    editor: IEditorProps;
+    markerClassMap: {
+        default: string;
+        warn: string;
+        error: string;
+    };
+    highlightTokens?: HighlightTokenSettings[];
+}): ExtendedMarker[];

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

@@ -0,0 +1,166 @@
+/// <reference types="react" resolution-mode="require"/>
+import { CodeEditorProps, HighlightTokenSettings, Annotation } from "./interfaces.js";
+import { FormItemElement } from "../form-item/FormItemElement.js";
+export interface Error {
+    err: Annotation[];
+    hasError: boolean;
+}
+/**
+ * @id form.code-editor
+ * @name form.code-editor
+ * @docKind brick
+ * @description 通用输入框构件
+ * @author sailor
+ * @noInheritDoc
+ */
+declare class CodeEditor extends FormItemElement {
+    #private;
+    /**
+     * @description
+     * @required -
+     * @group basic
+     */
+    accessor name: string | undefined;
+    /**
+     * @description
+     * @required -
+     * @group basic
+     */
+    accessor label: string | undefined;
+    /**
+     * @description 代码内容
+     * @group basic
+     */
+    accessor value: string;
+    /**
+     * @required false
+     * @description 选择框占位说明
+     * @group basic
+     */
+    accessor placeholder: string | undefined;
+    /**
+     * @default "monokai"
+     * @description 主题，支持 tomorrow、monokai、github
+     * @group basic
+     */
+    accessor theme: string | undefined;
+    /**
+     * @default "text"
+     * @description 语言模式，支持语言如下
+     * @group basic
+     */
+    accessor mode: string;
+    /**
+     * @default false
+     * @description 是否必填
+     * @group basic
+     */
+    accessor required: boolean | undefined;
+    /**
+     * @default false
+     * @description 是否只能读，不能编辑。如果一个页面同时需要编辑和查看，可以使用该属性，以保证代码构件的一致性。而如果一个页面只有查看的功能，建议直接使用轻量级[代码展示构件 code-bricks.code-display](developers/brick-book/brick/code-bricks.code-display)，避免代码内容过多的时候页面卡顿。
+     * @group basic
+     */
+    accessor readOnly: boolean | undefined;
+    /**
+     * @description 是否显示行号
+     * @group ui
+     */
+    accessor showLineNumbers: boolean;
+    /**
+     * @description 最大行号，超出就显示滚动条，注意应该为正数或者无穷大
+     * @group ui
+     */
+    accessor maxLines: number | "Infinity" | undefined;
+    /**
+     * @description 最小行号，即最小高度为多少行
+     * @group ui
+     */
+    accessor minLines: number;
+    /**
+     * @description 一个 tab 代表多少个空格
+     * @group other
+     */
+    accessor tabSize: number;
+    /**
+     * @required false
+     * @description 显示打印边距
+     * @group ui
+     */
+    accessor printMargin: boolean | undefined;
+    /**
+     * @description 高亮激活的行
+     * @group other
+     */
+    accessor highlightActiveLine: boolean;
+    /**
+     * @default false
+     * @description 是否显示导出按钮
+     * @group ui
+     */
+    accessor showExportButton: boolean | undefined;
+    /**
+     * @description 是否显示复制按钮
+     * @group ui
+     */
+    accessor showCopyButton: boolean;
+    /**
+     * @description 是否显示展开按钮
+     * @group ui
+     */
+    accessor showExpandButton: boolean | undefined;
+    /**
+     * @default "download.txt"
+     * @description 当 `showExportButton = true` 时， 配置导出的文件名称, 默认为 download.txt
+     * @group other
+     */
+    accessor exportFileName: string | undefined;
+    /**
+     * @description json schema，当 mode 为 json,yaml,brick_next,brick_next_yaml 时会根据该 json schema 进行校验
+     * @group other
+     */
+    accessor jsonSchema: Record<string, any> | undefined;
+    /**
+     * @description 校验 Json Schema 的模式，warning 为告警模式，仅作告警提示，不影响表单提交；error 为错误模式，将会阻止表单提交错误内容。
+     * @group other
+     */
+    accessor validateJsonSchemaMode: "warning" | "error";
+    /**
+     * @description json schema $ref，设置该属性后会验证 json schema 中对应 $ref 指向的部分片段，以 # 开头代表根节点，例如可以设置成 `#/definitions/BrickConf`
+     * @group other
+     */
+    accessor schemaRef: string | undefined;
+    /**
+     * @default false
+     * @description 是否开启自动补全
+     * @group other
+     */
+    accessor enableLiveAutocompletion: boolean | undefined;
+    /**
+     * @description 自定义自动补全，注意当`enableLiveAutocompletion:true`时才能生效
+     * @group other
+     */
+    accessor customCompleters: string[] | {
+        caption?: string;
+        value: string;
+        meta?: string;
+        score?: number;
+    }[] | undefined;
+    /**
+     * @description 是否与JSON解析行为一致，如果设为`true`，有重复key时取最后一个的value，如果设为`false`，有重复key时会抛出错误
+     * @group other
+     */
+    accessor loadYamlInJsonMode: boolean;
+    /**
+     * @description 高亮标记设置。
+     * @group other
+     */
+    accessor highlightTokens: HighlightTokenSettings[] | undefined;
+    private _handleChange;
+    private _handleBlur;
+    private _handleErrorChange;
+    private _handleHighlightTokenClick;
+    render(): JSX.Element;
+}
+export declare function CodeEditorComponent(props: CodeEditorProps): JSX.Element;
+export { CodeEditor };

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

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

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

@@ -0,0 +1,76 @@
+import { IMarker } from "react-ace";
+import type { FormItemProps } from "../form-item/index.js";
+export interface Error {
+    err: Annotation[];
+    hasError: boolean;
+}
+export interface ExtendedMarker extends IMarker {
+    highlightType: HighlightTokenType;
+    identifier: string;
+}
+export interface CodeEditorProps extends FormItemProps {
+    placeholder?: string;
+    label?: string;
+    name?: string;
+    value: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    onErrorChange?: (error: Error) => void;
+    disabled?: boolean;
+    theme?: string;
+    mode: string;
+    readOnly?: boolean;
+    showLineNumbers?: boolean;
+    maxLines?: number | "Infinity";
+    minLines: number;
+    tabSize?: number;
+    showGutter?: boolean;
+    printMargin?: boolean;
+    highlightActiveLine?: boolean;
+    onValidate?: (error: Annotation[]) => void;
+    showExportButton?: boolean;
+    showCopyButton?: boolean;
+    showExpandButton?: boolean;
+    exportFileName?: string;
+    jsonSchema?: Record<string, any>;
+    validateJsonSchemaMode?: "warning" | "error";
+    schemaRef?: string;
+    enableLiveAutocompletion?: boolean;
+    customCompleters?: string[] | {
+        caption?: string;
+        value: string;
+        meta?: string;
+        score?: number;
+    }[];
+    loadYamlInJsonMode?: boolean;
+    showPrintMargin?: boolean;
+    highlightTokens?: HighlightTokenSettings[];
+    onClickHighlightToken?: (token: {
+        type: HighlightTokenType;
+        value: string;
+    }) => void;
+}
+export interface HighlightTokenSettings {
+    type: HighlightTokenType;
+    clickable?: boolean;
+    level?: "default" | "warn" | "error";
+}
+export type HighlightTokenType = "storyboard-function" | "storyboard-context" | "storyboard-context-action" | "storyboard-state" | "storyboard-state-action" | "storyboard-tpl-var" | "storyboard-tag-name-as-target" | "storyboard-route-var" | "dashboard-DS";
+export interface AceLanguageRules {
+    [className: string]: AceLanguageRule[];
+}
+export interface AceLanguageRule {
+    token?: string | string[] | AceTokenFunction;
+    regex?: string | RegExp;
+    next?: string;
+    defaultToken?: string;
+    consumeLineEnd?: boolean;
+    onMatch?: (val?: string, state?: unknown, stack?: [string, number], line?: string) => string;
+}
+export type AceTokenFunction = (value: string) => string;
+export interface Annotation {
+    row: number;
+    column: number;
+    text: string;
+    type: string;
+}

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

@@ -0,0 +1,34 @@
+/// <reference types="react" resolution-mode="require"/>
+import { FormItemElement } from "../form-item/FormItemElement.js";
+import { UseBrickConf } from "@next-core/types";
+import "@next-core/theme";
+type DynamicFormValuesItem = Record<string, any>;
+/**
+ * @id form.dynamic-form-item
+ * @name form.dynamic-form-item
+ * @docKind brick
+ * @description 动态表单
+ * @author sailor
+ * @noInheritDoc
+ */
+declare class DynamicFormItem extends FormItemElement {
+    #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;
+    render(): JSX.Element;
+}
+export { DynamicFormItem };

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

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

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

@@ -0,0 +1,52 @@
+/// <reference types="react" resolution-mode="require"/>
+import { PubSub } from "../utils/PubSub.js";
+interface FormStoreOptions {
+    onValuesChanged?: (data: any) => void;
+}
+interface FieldDetail {
+    name: string;
+    label?: string;
+    originProps?: Record<string, any>;
+    validate: Validate;
+    [k: string]: any;
+}
+export interface MessageBody {
+    message: string;
+    type: string;
+}
+export interface WatchOptions {
+    needValidate?: boolean;
+}
+interface Validate {
+    required?: boolean;
+    pattern?: string;
+    min?: number;
+    max?: number;
+    message?: {
+        required?: string;
+        pattern?: string;
+        min?: string;
+        max?: string;
+    };
+    validator?: (value: any) => MessageBody | string;
+}
+export declare class FormStore extends PubSub {
+    #private;
+    static uid: number;
+    static instance: Map<number, FormStore>;
+    static getInstance(options?: FormStoreOptions): FormStore;
+    constructor(options?: FormStoreOptions);
+    setField(name: string, detail: FieldDetail): void;
+    getAllValues(): Record<string, unknown>;
+    setInitValue(values: Record<string, unknown>, isEmitValuseChange?: boolean): void;
+    setFieldsValueByInitData(name: string): void;
+    setFieldsValue(values: Record<string, unknown>, isEmitValuseChange?: boolean): void;
+    resetFields(name?: string): void;
+    getFieldsValue(name: string): unknown;
+    validateFields(callback: (err: boolean, value: any) => void): boolean | Record<string, unknown>;
+    validateField(field: string | FieldDetail): MessageBody | undefined;
+    getValueFromEvent(e: React.ChangeEvent): any;
+    resetValidateState(): void;
+    onWatch(name: string, event: React.ChangeEvent, callback?: (v: string) => void, options?: WatchOptions): void;
+}
+export {};

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

@@ -0,0 +1,71 @@
+/// <reference types="react" resolution-mode="require"/>
+import { ReactNextElement } from "@next-core/react-element";
+import { FormStore } from "./formStore.js";
+import { ComponentSize, Layout } from "../interface.js";
+interface FormProps {
+    values?: Record<string, any>;
+    layout?: Layout;
+    size?: ComponentSize;
+}
+export interface FormEvents {
+    valuesChange?: Event;
+    validateSuccess?: Event;
+    validateError?: Event;
+}
+export interface FormMapEvents {
+    onValuesChange: "values.change";
+    onValidateSuccess: "validate.success";
+    onValidateError: "validate.error";
+}
+/**
+ * @id form.general-form
+ * @name form.general-form
+ * @docKind brick
+ * @description 通用输入框构件
+ * @author sailor
+ * @noInheritDoc
+ */
+declare class Form extends ReactNextElement implements FormProps {
+    #private;
+    readonly isFormElement = true;
+    formStore: FormStore;
+    defaultEmitValuesChange: boolean;
+    constructor();
+    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;
+    /**
+     * @description
+     */
+    validateField(name: string): void;
+    /**
+     * @description
+     */
+    resetValidateState(): void;
+    render(): JSX.Element;
+}
+interface FormComponentProps extends FormProps {
+    onValuesChange?: (value: Record<string, any>) => void;
+    onValidateSuccess?: () => void;
+    onValidateError?: () => void;
+}
+export declare function FormComponent({ layout }: FormComponentProps): JSX.Element;
+export { Form, FormProps };

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

@@ -0,0 +1,22 @@
+import { ReactNextElement } from "@next-core/react-element";
+import type { Form } from "../form/index.jsx";
+export declare abstract class FormItemElement extends ReactNextElement {
+    #private;
+    accessor isFormItemElement: boolean;
+    set validateState(value: string);
+    get validateState(): string;
+    /**
+     * @required false
+     * @default false
+     * @description 控制该表单项是否隐藏
+     * @group ui
+     */
+    set notRender(value: boolean);
+    get notRender(): boolean;
+    get $bindFormItem(): boolean;
+    set $bindFormItem(value: boolean);
+    /**
+     * @description
+     */
+    getFormElement(): Form;
+}

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

@@ -0,0 +1,165 @@
+/// <reference types="react" resolution-mode="require"/>
+import { FormItemElement } from "./FormItemElement.js";
+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;
+    validateState?: MessageBody | string;
+    [key: string]: any;
+};
+export interface FormItemProps {
+    formElement?: Form;
+    curElement: CurrentElement;
+    name?: string;
+    label?: string;
+    current?: HTMLElement;
+    required?: boolean;
+    pattern?: string;
+    min?: number;
+    max?: number;
+    labelCol?: string;
+    wrapperCol?: string;
+    message?: Record<string, string>;
+    layout?: Layout;
+    size?: ComponentSize;
+    trigger?: string;
+    valuePropsName?: string;
+    needValidate?: boolean;
+    validator?: (value: any) => MessageBody | string;
+}
+/**
+ * @id form.general-form
+ * @name form.general-form
+ * @docKind brick
+ * @description 通用输入框构件
+ * @author sailor
+ * @noInheritDoc
+ */
+declare class FormItem extends FormItemElement implements FormItemProps {
+    /**
+     * @default
+     * @required
+     * @description
+     */
+    accessor formElement: Form | undefined;
+    /**
+     * @default
+     * @required
+     * @description
+     */
+    accessor curElement: HTMLElement;
+    /**
+     * @kind string
+     * @required false
+     * @default default
+     * @description 字段名称
+     * @enums
+     * @group basic
+     */
+    accessor name: string | undefined;
+    /**
+     * @default
+     * @required
+     * @description
+     */
+    accessor label: string | undefined;
+    /**
+     * @default
+     * @required
+     * @description
+     */
+    accessor pattern: string | undefined;
+    /**
+     * @default
+     * @required
+     * @description
+     */
+    accessor message: Record<string, string> | undefined;
+    /**
+     * @default
+     * @required
+     * @description
+     */
+    accessor max: number | undefined;
+    /**
+     * @default
+     * @required
+     * @description
+     */
+    accessor min: number | undefined;
+    /**
+     * @kind boolean
+     * @required false
+     * @default -
+     * @description 表单项是否必填
+     * @group basicFormItem
+     */
+    accessor required: boolean | undefined;
+    /**
+     * @kind string
+     * @required false
+     * @default default
+     * @description 初始值
+     * @enums
+     * @group basic
+     */
+    accessor value: string | undefined;
+    /**
+     * @required false
+     * @description 表单项 label 标签布局
+     * @group ui
+     */
+    accessor labelCol: string | undefined;
+    /**
+     * @required false
+     * @description 表单项控件布局
+     * @group ui
+     */
+    accessor wrapperCol: string | undefined;
+    /**
+     * @kind string
+     * @required false
+     * @default default
+     * @description 初始值
+     * @enums
+     * @group basic
+     */
+    accessor valuePropsName: string | undefined;
+    accessor layout: Layout;
+    /**
+     * @kind string
+     * @required false
+     * @default default
+     * @description 初始值
+     * @enums
+     * @group basic
+     */
+    accessor size: ComponentSize | undefined;
+    /**
+     * @default true
+     * @description 是否自动去除前后的空白字符
+     * @group advancedFormItem
+     */
+    accessor trim: boolean;
+    /**
+     * @default false
+     * @description 事件触发方法名
+     */
+    accessor trigger: string;
+    /**
+     * @default false
+     * @description 表单项校验方法
+     */
+    accessor validator: ((value: any) => MessageBody) | undefined;
+    /**
+     * @default
+     * @required
+     * @description 值变化时是否主动出发校验
+     */
+    accessor needValidate: boolean | undefined;
+    render(): JSX.Element;
+}
+export { FormItem };
+export declare function FormItemComponent(props: FormItemProps): JSX.Element;

package/dist-types/index.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentSize, InputType } from "../interface.js";
+import "@next-core/theme";
+import { Form } from "../form/index.js";
+interface InputProps {
+    formElement?: Form;
+    curElement: HTMLElement;
+    name?: string;
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    disabled?: 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;
+}
+export declare function InputComponent(props: InputProps): JSX.Element;
+export {};

package/dist-types/interface.d.ts

@@ -0,0 +1,15 @@
+export type Target = "_self" | "_blank" | "_parent" | "_top";
+export type UIType = "default" | "dashboard";
+export type Shape = "round" | "circle";
+export type ButtonType = "primary" | "default" | "dashed" | "ghost" | "link" | "text";
+export type ComponentSize = "large" | "middle" | "small" | "xs";
+export type InputType = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
+export type Layout = "horizontal" | "vertical" | "inline";
+export type RadioType = "button" | "default" | "icon" | "icon-circle" | "icon-square" | "custom";
+export interface GeneralComplexOption<T = string | number | boolean> {
+    label: string;
+    value: T;
+    [key: string]: any;
+}
+export declare type GeneralOption = string | number | boolean | GeneralComplexOption | Record<string, any>;
+export declare type RadioGroupButtonStyle = "outline" | "solid";