@next-bricks/form 0.5.0 → 0.7.0

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

@@ -1,8 +1,8 @@
-/// <reference types="react" resolution-mode="require"/>
+/// <reference types="react" />
 import { ReactNextElement } from "@next-core/react-element";
 import "@next-core/theme";
 export interface SearchProps {
-    value: string;
+    value?: string;
     placeholder?: string;
     autoFocus?: boolean;
     clearable?: boolean;
@@ -10,9 +10,9 @@ export interface SearchProps {
     debounceTime?: number;
 }
 export interface SearchEvents {
-    blur: Event;
-    change: Event;
-    search: Event;
+    blur: CustomEvent<string>;
+    change: CustomEvent<string>;
+    search: CustomEvent<string>;
 }
 export interface SearchEventsMap {
     onBlur: "blur";

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

@@ -1,133 +1,73 @@
 import React from "react";
+import { FormItemElementBase } from "@next-shared/form";
 import type { GeneralComplexOption } from "../interface.js";
 import "@next-core/theme";
-import { FormItemElement } from "../form-item/FormItemElement.js";
-import type { Form } from "../form/index.js";
-export interface SelectProps {
-    curElement: HTMLElement;
-    formElement: Form;
-    trigger?: string;
+import type { FormItemProps } from "../form-item/index.jsx";
+export interface SelectProps extends FormItemProps {
     value?: any;
-    name?: string;
-    label?: string;
     options: GeneralComplexOption[];
     placeholder?: string;
     multiple?: boolean;
     clearable?: boolean;
     disabled?: boolean;
-    required?: boolean;
     inputStyle?: React.CSSProperties;
-    dropdownStyle?: React.CSSProperties;
     validateState?: string;
     onChange?: (value: any) => void;
     optionsChange?: (options: any, name: string) => void;
 }
 /**
- * @id form.general-select
- * @name form.general-select
- * @docKind brick
- * @description 通用下拉构件
+ * 通用下拉选择构件
  * @author julielai
- * @noInheritDoc
  */
-declare class Select extends FormItemElement {
+declare class Select extends FormItemElementBase {
     #private;
     /**
-     * @kind string
-     * @required true
-     * @default -
-     * @description 选择框字段名
-     * @group basicFormItem
+     * 字段名称
      */
     accessor name: string | undefined;
     /**
-     * @kind string
-     * @required true
-     * @default -
-     * @description 选择框占位说明
-     * @group basic
+     * 占位说明
      */
     accessor placeholder: string | undefined;
     /**
-     * @kind string
-     * @required false
-     * @default -
-     * @description 选择框字段说明
-     * @group basic
+     * 字段文本
      */
     accessor label: string | undefined;
     /**
-     * @required true
-     * @default -
-     * @description 候选项列表
-     * @group basic
+     * 选项列表
+     * @required
      */
     accessor options: GeneralComplexOption[] | 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 boolean
-     * @required false
-     * @default  false
-     * @description 是否支持多选
-     * @group basic
+     * 是否支持多选
      */
     accessor multiple: boolean | undefined;
     /**
-     * @kind boolean
-     * @required false
-     * @default  false
-     * @description 是否支持清除
-     * @group basic
+     * 是否支持清除
+     * @default true
      */
     accessor clearable: boolean | undefined;
     /**
-     * @kind React.CSSProperties
-     * @required false
-     * @default -
-     * @description 输入框样式
-     * @group ui
+     * 输入框样式
      */
     accessor inputStyle: React.CSSProperties | undefined;
-    /**
-     * @kind React.CSSProperties
-     * @required false
-     * @default -
-     * @description 下拉框样式
-     * @group ui
-     */
-    accessor dropdownStyle: React.CSSProperties | undefined;
-    private _handleChange;
+    handleChange: (value: string | string[]) => void;
     private _handleOptionsChange;
     render(): JSX.Element;
 }

package/dist-types/submit-buttons/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
+import { FormItemElementBase } from "@next-shared/form";
 import type { ButtonType } from "../interface.js";
-import { FormItemElement } from "../form-item/FormItemElement.js";
 interface SubmitButtonsProps {
     curElement: HTMLElement;
     submitText?: string;
@@ -10,74 +10,36 @@ interface SubmitButtonsProps {
     cancelType?: ButtonType;
     onSubmitClick?: (event: React.MouseEvent) => void;
     onCancelClick?: (event: React.MouseEvent) => void;
-    showCancelButton?: boolean;
 }
 /**
- * @id form.submit-buttons
- * @name form.submit-buttons
- * @docKind brick
- * @description 用于general-forms的通用按钮，可以配置submit按钮和cancel按钮
+ * 用于general-forms的通用按钮
  * @author zhendong
- * @noInheritDoc
  */
-declare class SubmitButtons extends FormItemElement {
+declare class SubmitButtons extends FormItemElementBase {
     #private;
     /**
-     * @kind string
-     * @required false
-     * @default -
-     * @description 提交按钮的文字，不设置则不显示提交按钮
-     * @group basic
+     * 提交按钮的文字
+     * @default "提交"
      */
-    accessor submitText: string | undefined;
+    accessor submitText: string;
     /**
-     * @kind boolean
-     * @required false
-     * @default `false`
-     * @description 显示取消按钮
-     * @group basic
-     */
-    accessor showCancelButton: boolean | undefined;
-    /**
-     * @kind string
-     * @required false
-     * @default -
-     * @description 取消按钮的文字，不设置则不显示取消按钮
-     * @group basic
+     * 取消按钮的文字，不设置则不显示取消按钮
      */
     accessor cancelText: string | undefined;
     /**
-     * @kind boolean
-     * @required false
-     * @default `false`
-     * @description 点击确定按钮后自动禁用
-     * @group advanced
+     * 点击确定按钮后自动禁用
      */
     accessor disableAfterClick: boolean | undefined;
     /**
-     * @kind boolean
-     * @required false
-     * @default `false`
-     * @description 禁用提交按钮
-     * @group advanced
+     * 禁用提交按钮
      */
     accessor submitDisabled: boolean | undefined;
     /**
-     * @kind ButtonType
-     * @required false
-     * @default default
-     * @description 按钮类型
-     * @enums
-     * @group basic
+     * 提交按钮类型
      */
     accessor submitType: ButtonType | undefined;
     /**
-     * @kind ButtonType
-     * @required false
-     * @default default
-     * @description 按钮类型
-     * @enums
-     * @group basic
+     * 取消按钮类型
      */
     accessor cancelType: ButtonType | undefined;
     private _handleSubmitClick;

package/dist-types/textarea/calculateAutoSizeStyle.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 /// <reference types="react" resolution-mode="require"/>
 export default function calculateAutoSizeStyle(uiTextNode: HTMLTextAreaElement, minRows?: number | null, maxRows?: number | null): React.CSSProperties;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormItemElement } from "../form-item/FormItemElement.js";
+import { FormItemElementBase } from "@next-shared/form";
 import type { FormItemProps } from "../form-item/index.jsx";
 import "@next-core/theme";
 type AutoSize = boolean | {
@@ -19,94 +19,61 @@ interface TextareaProps extends FormItemProps {
     onInputChange: (value: string) => void;
 }
 /**
- * @id form.general-textarea
- * @name form.general-textarea
- * @docKind brick
- * @description 通用多行文本输入框构件
+ * 通用多行文本输入框构件
  * @author sailor
- * @noInheritDoc
  */
-declare class Textarea extends FormItemElement {
+declare class Textarea extends FormItemElementBase {
     #private;
     /**
-     * @kind string
-     * @required false
-     * @default default
-     * @description 字段名称
-     * @enums
-     * @group basic
+     * 字段名称
      */
     accessor name: string | undefined;
     /**
-     * @default
-     * @required
-     * @description
+     * 标签文字
      */
     accessor label: string | undefined;
     /**
-     * @kind string
-     * @required false
-     * @default default
-     * @description 初始值
-     * @enums
-     * @group basic
+     * 值
      */
     accessor value: string | undefined;
     /**
-     * @kind string
-     * @required false
-     * @default -
-     * @description 占位说明
-     * @enums
-     * @group basic
+     * 占位说明
      */
     accessor placeholder: string | undefined;
     /**
-     * @kind boolean
-     * @required false
-     * @default false
-     * @description 是否禁用
-     * @group basic
+     * 是否禁用
      */
     accessor disabled: boolean | undefined;
     /**
-     * @kind number
-     * @required false
-     * @default -
-     * @description 最小长度
-     * @group basicFormItem
+     * 最小长度
      */
     accessor minLength: number | undefined;
     /**
-     * @kind number
-     * @required false
-     * @default -
-     * @description 最大长度
-     * @group basicFormItem
+     * 最大长度
      */
     accessor maxLength: number | undefined;
     /**
-     * @kind boolean
-     * @required false
-     * @default -
-     * @description 大小子摄影
-     * @group basicFormItem
+     * 大小自适应
      */
     accessor autoSize: AutoSize | undefined;
     /**
-     * @kind boolean
-     * @required false
-     * @default -
-     * @description 表单项是否必填
-     * @group basicFormItem
+     * 是否必填
      */
     accessor required: boolean | undefined;
     /**
-     * @kind React.CSSProperties
-     * @required false
-     * @default -
-     * @description 样式
-     * @group other
+     * 表单校验最大长度
+     */
+    accessor max: number | undefined;
+    /**
+     * 表单校验最小长度
+     */
+    accessor min: number | undefined;
+    /**
+     * 校验信息
+     */
+    accessor message: Record<string, string> | undefined;
+    /**
+     * 自定义样式
      */
     accessor textareaStyle: React.CSSProperties | undefined;
     handleInputChange: (value: string) => void;

package/docs/dynamic-form-item.md

@@ -0,0 +1,89 @@
+动态表单构件。
+
+```yaml preview
+- brick: form.dynamic-form-item
+  properties:
+    useBrick:
+      - brick: form.general-input
+        properties:
+          name: input
+      - brick: form.general-select
+        properties:
+          name: select
+          options:
+            - Beijing
+            - Shanghai
+            - Guangzhou
+            - Shenzhen
+```
+
+## Examples
+
+### Label
+
+```yaml preview
+- brick: form.dynamic-form-item
+  properties:
+    label: Label
+    useBrick:
+      - brick: form.general-input
+        properties:
+          name: input
+      - brick: form.general-select
+        properties:
+          name: select
+          options:
+            - Beijing
+            - Shanghai
+            - Guangzhou
+            - Shenzhen
+```
+
+### Value
+
+```yaml preview
+- brick: form.dynamic-form-item
+  properties:
+    value:
+      - input: 北京
+        select: Beijing
+      - input: 上海
+        select: Shanghai
+    useBrick:
+      - brick: form.general-input
+        properties:
+          name: input
+      - brick: form.general-select
+        properties:
+          name: select
+          options:
+            - Beijing
+            - Shanghai
+            - Guangzhou
+            - Shenzhen
+```
+
+### Event
+
+```yaml preview
+- brick: form.dynamic-form-item
+  properties:
+    name: dynamicForm
+    useBrick:
+      - brick: form.general-input
+        properties:
+          name: input
+      - brick: form.general-select
+        properties:
+          name: select
+          options:
+            - Beijing
+            - Shanghai
+            - Guangzhou
+            - Shenzhen
+  events:
+    change:
+      - action: message.success
+        args:
+          - <% JSON.stringify(EVENT.detail) %>
+```

package/docs/general-checkbox.md

@@ -0,0 +1,221 @@
+表单复选框构件。
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    options:
+      - Beijing
+      - Shanghai
+      - Guangzhou
+      - Shenzhen
+```
+
+## Examples
+
+### Label
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    label: city
+    options:
+      - Beijing
+      - Shanghai
+      - Guangzhou
+      - Shenzhen
+```
+
+### Value
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    value:
+      - Beijing
+      - Guangzhou
+    options:
+      - Beijing
+      - Shanghai
+      - Guangzhou
+      - Shenzhen
+```
+
+### Options
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    options:
+      - Beijing
+      - Shanghai
+      - Guangzhou
+      - Shenzhen
+    value:
+      - Guangzhou
+- brick: form.general-checkbox
+  properties:
+    options:
+      - label: Beijing
+        value: 0
+      - label: Shanghai
+        value: 1
+        icon:
+          icon: "bar-chart"
+          lib: "antd"
+      - label: Guangzhou
+        value: 2
+      - label: Shenzhen
+        value: 3
+    value:
+      - 2
+      - 3
+- brick: form.general-checkbox
+  properties:
+    options:
+      - true
+      - false
+    value:
+      - true
+```
+
+### Disabled
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    options:
+      - label: Beijing
+        value: 0
+        disabled: true
+      - label: Shanghai
+        value: 1
+      - label: Guangzhou
+        value: 2
+      - label: Shenzhen
+        value: 3
+- brick: div
+  properties:
+    style:
+      height: 20px
+- brick: form.general-checkbox
+  properties:
+    disabled: true
+    options:
+      - label: Beijing
+        value: 0
+      - label: Shanghai
+        value: 1
+      - label: Guangzhou
+        value: 2
+      - label: Shenzhen
+        value: 3
+```
+
+### Type
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    label: Default
+    type: default
+    options:
+      - label: Beijing
+        value: 0
+        icon:
+          icon: "search"
+          lib: "antd"
+      - label: Shanghai
+        value: 1
+        icon:
+          icon: "plus"
+          lib: "antd"
+      - label: Guangzhou
+        value: 2
+        icon:
+          icon: "edit"
+          lib: "antd"
+      - label: Shenzhen
+        value: 3
+        icon:
+          icon: "delete"
+          lib: "antd"
+- brick: div
+  properties:
+    style:
+      height: 20px
+- brick: form.general-checkbox
+  properties:
+    label: Icon
+    type: icon
+    options:
+      - label: Beijing
+        value: 0
+        icon:
+          icon: "search"
+          lib: "antd"
+      - label: Shanghai
+        value: 1
+        icon:
+          icon: "plus"
+          lib: "antd"
+      - label: Guangzhou
+        value: 2
+        icon:
+          icon: "edit"
+          lib: "antd"
+      - label: Shenzhen
+        value: 3
+        icon:
+          icon: "delete"
+          lib: "antd"
+```
+
+### Event
+
+```yaml preview
+- brick: form.general-checkbox
+  properties:
+    id: option-checkbox
+    options:
+      - label: Beijing
+        value: 0
+      - label: Shanghai
+        value: 1
+        icon:
+          icon: "bar-chart"
+          lib: "antd"
+      - label: Guangzhou
+        value: 2
+      - label: Shenzhen
+        value: 3
+  events:
+    change:
+      - action: message.success
+        args:
+          - <% JSON.stringify(EVENT.detail) %>
+    options.change:
+      - action: message.success
+        args:
+          - <% JSON.stringify(EVENT.detail) %>
+- brick: basic.general-button
+  properties:
+    textContent: Click to Change Radio Option
+  events:
+    click:
+      - target: "#option-checkbox"
+        properties:
+          options:
+            - label: Beijing
+              value: 0
+            - label: Shanghai
+              value: 1
+              icon:
+                icon: "bar-chart"
+                lib: "antd"
+            - label: Guangzhou
+              value: 2
+            - label: Shenzhen
+              value: 3
+            - label: Hangzhou
+              value: 4
+```