@next-bricks/form 0.6.0 → 0.8.0

package/dist/manifest.json

@@ -288,6 +288,99 @@
       ],
       "description": "表单构件"
     },
+    {
+      "name": "form.general-radio",
+      "properties": [
+        {
+          "name": "name",
+          "description": "下拉框字段名",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "单选框字段说明",
+          "type": "string"
+        },
+        {
+          "name": "options",
+          "description": "单选框选项表",
+          "required": true,
+          "attribute": false,
+          "type": "GeneralOption[]"
+        },
+        {
+          "name": "value",
+          "description": "单选框当前选中始值",
+          "attribute": false,
+          "type": "any"
+        },
+        {
+          "name": "required",
+          "description": "是否必填",
+          "type": "boolean"
+        },
+        {
+          "name": "message",
+          "description": "校验文本信息",
+          "attribute": false,
+          "type": "Record<string, string>"
+        },
+        {
+          "name": "disabled",
+          "description": "是否禁用",
+          "type": "boolean"
+        },
+        {
+          "name": "type",
+          "description": "单选框样式类型",
+          "default": "\"default\"",
+          "type": "RadioType"
+        },
+        {
+          "name": "ui",
+          "description": "UI样式",
+          "default": "\"default\"",
+          "type": "UIType"
+        },
+        {
+          "name": "size",
+          "description": "大小，只对按钮样式生效",
+          "default": "\"medium\"",
+          "type": "ComponentSize"
+        },
+        {
+          "name": "customStyle",
+          "description": "自定义radio的外层样式",
+          "attribute": false,
+          "type": "React.CSSProperties"
+        },
+        {
+          "name": "useBrick",
+          "description": "自定义radio的内容",
+          "attribute": false,
+          "type": "UseSingleBrickConf"
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "description": "值变化事件",
+          "detail": {
+            "type": "{\n    label: string;\n    value: any;\n    [key: string]: any;\n  }"
+          }
+        },
+        {
+          "name": "options.change",
+          "description": "选项列表变化事件",
+          "detail": {
+            "type": "{\n    options: {\n      label: string;\n      value: any;\n      [key: string]: any;\n    };\n    name: string;\n  }"
+          }
+        }
+      ],
+      "slots": [],
+      "methods": [],
+      "description": "通用单选构件"
+    },
     {
       "name": "form.general-form-item",
       "properties": [
@@ -416,99 +509,6 @@
       "methods": [],
       "description": ""
     },
-    {
-      "name": "form.general-radio",
-      "properties": [
-        {
-          "name": "name",
-          "description": "下拉框字段名",
-          "type": "string"
-        },
-        {
-          "name": "label",
-          "description": "单选框字段说明",
-          "type": "string"
-        },
-        {
-          "name": "options",
-          "description": "单选框选项表",
-          "required": true,
-          "attribute": false,
-          "type": "GeneralOption[]"
-        },
-        {
-          "name": "value",
-          "description": "单选框当前选中始值",
-          "attribute": false,
-          "type": "any"
-        },
-        {
-          "name": "required",
-          "description": "是否必填",
-          "type": "boolean"
-        },
-        {
-          "name": "message",
-          "description": "校验文本信息",
-          "attribute": false,
-          "type": "Record<string, string>"
-        },
-        {
-          "name": "disabled",
-          "description": "是否禁用",
-          "type": "boolean"
-        },
-        {
-          "name": "type",
-          "description": "单选框样式类型",
-          "default": "\"default\"",
-          "type": "RadioType"
-        },
-        {
-          "name": "ui",
-          "description": "UI样式",
-          "default": "\"default\"",
-          "type": "UIType"
-        },
-        {
-          "name": "size",
-          "description": "大小，只对按钮样式生效",
-          "default": "\"medium\"",
-          "type": "ComponentSize"
-        },
-        {
-          "name": "customStyle",
-          "description": "自定义radio的外层样式",
-          "attribute": false,
-          "type": "React.CSSProperties"
-        },
-        {
-          "name": "useBrick",
-          "description": "自定义radio的内容",
-          "attribute": false,
-          "type": "UseSingleBrickConf"
-        }
-      ],
-      "events": [
-        {
-          "name": "change",
-          "description": "值变化事件",
-          "detail": {
-            "type": "{\n    label: string;\n    value: any;\n    [key: string]: any;\n  }"
-          }
-        },
-        {
-          "name": "options.change",
-          "description": "选项列表变化事件",
-          "detail": {
-            "type": "{\n    options: {\n      label: string;\n      value: any;\n      [key: string]: any;\n    };\n    name: string;\n  }"
-          }
-        }
-      ],
-      "slots": [],
-      "methods": [],
-      "description": "通用单选构件"
-    },
     {
       "name": "form.general-select",
       "properties": [
@@ -1060,6 +1060,60 @@
       "slots": [],
       "methods": [],
       "description": "图标选择构件"
+    },
+    {
+      "name": "form.upload-image",
+      "properties": [
+        {
+          "name": "name",
+          "description": "字段名称",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "字段说明",
+          "type": "string"
+        },
+        {
+          "name": "value",
+          "description": "值",
+          "attribute": false,
+          "type": "FileData[]"
+        },
+        {
+          "name": "bucketName",
+          "description": "对象存储桶名字",
+          "type": "string"
+        },
+        {
+          "name": "multiple",
+          "description": "是否支持选定的多张图片",
+          "type": "boolean"
+        },
+        {
+          "name": "required",
+          "description": "是否必填",
+          "type": "boolean"
+        },
+        {
+          "name": "message",
+          "description": "校验文本信息",
+          "attribute": false,
+          "type": "Record<string, string>"
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "description": "值变化时触发",
+          "detail": {
+            "type": "FileData[]"
+          }
+        }
+      ],
+      "slots": [],
+      "methods": [],
+      "description": "上传图片构件"
     }
   ]
 }

package/dist-types/bootstrap.d.ts

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

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

@@ -1,7 +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 {
@@ -34,7 +34,7 @@ export interface CheckboxProps extends FormItemProps {
  * 表单复选框构件
  * @author derrickma
  */
-declare class Checkbox extends FormItemElement {
+declare class Checkbox extends FormItemElementBase {
     #private;
     /**
      * 字段名称

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

@@ -1,6 +1,6 @@
 /// <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" />
-import { FormItemElement } from "../form-item/FormItemElement.js";
 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,7 +11,7 @@ type DynamicFormValuesItem = Record<string, any>;
  * @author sailor
  * @noInheritDoc
  */
-declare class DynamicFormItem extends FormItemElement {
+declare class DynamicFormItem extends FormItemElementBase {
     #private;
     /**
      * 字段名称

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

@@ -1,6 +1,6 @@
 /// <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>;
@@ -22,12 +22,12 @@ export interface FormMapEvents {
  * @author sailor
  * @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>;
     /**

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-import { FormItemElement } from "./FormItemElement.js";
+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/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FormItemElement } from "../form-item/FormItemElement.js";
+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";
@@ -17,7 +17,7 @@ export interface IconSelectProps {
 /**
  * 图标选择构件
  */
-export declare class IconSelect extends FormItemElement implements IconSelectProps {
+export declare class IconSelect extends FormItemElementBase implements IconSelectProps {
     #private;
     /**
      * 字段名称

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { ComponentSize, InputType } from "../interface.js";
+import { FormItemElementBase } from "@next-shared/form";
 import "@next-core/theme";
-import { FormItemElement } from "../form-item/FormItemElement.js";
 import type { FormItemProps } from "../form-item/index.jsx";
 interface InputProps extends FormItemProps {
     value?: string;
@@ -23,7 +23,7 @@ interface InputProps extends FormItemProps {
  * @slot prefix - 输入框前置插槽
  * @slot suffix - 输入框后置插槽
  */
-declare class Input extends FormItemElement {
+declare class Input extends FormItemElementBase {
     #private;
     /**
      * 字段名称

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

@@ -1,9 +1,9 @@
 import React from "react";
+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";
 interface CustomOptions {
     url: string;
     description?: string;
@@ -38,7 +38,7 @@ export interface RadioEventsMapping {
  * 通用单选构件
  * @author sailor
  */
-declare class Radio extends FormItemElement {
+declare class Radio extends FormItemElementBase {
     #private;
     /**
      * 下拉框字段名

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

@@ -1,8 +1,8 @@
 import React from "react";
+import { FormItemElementBase } from "@next-shared/form";
 import type { GeneralComplexOption } from "../interface.js";
 import "@next-core/theme";
 import type { FormItemProps } from "../form-item/index.jsx";
-import { FormItemElement } from "../form-item/FormItemElement.js";
 export interface SelectProps extends FormItemProps {
     value?: any;
     options: GeneralComplexOption[];
@@ -19,7 +19,7 @@ export interface SelectProps extends FormItemProps {
  * 通用下拉选择构件
  * @author julielai
  */
-declare class Select extends FormItemElement {
+declare class Select extends FormItemElementBase {
     #private;
     /**
      * 字段名称

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;
@@ -15,7 +15,7 @@ interface SubmitButtonsProps {
  * 用于general-forms的通用按钮
  * @author zhendong
  */
-declare class SubmitButtons extends FormItemElement {
+declare class SubmitButtons extends FormItemElementBase {
     #private;
     /**
      * 提交按钮的文字

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 | {
@@ -22,7 +22,7 @@ interface TextareaProps extends FormItemProps {
  * 通用多行文本输入框构件
  * @author sailor
  */
-declare class Textarea extends FormItemElement {
+declare class Textarea extends FormItemElementBase {
     #private;
     /**
      * 字段名称

package/dist-types/upload/Upload.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import "@next-core/theme";
+import { type FileData } from "./utils.js";
+export interface UploadActions {
+    upload: () => void;
+}
+export interface ItemActions {
+    remove: () => void;
+}
+export interface UploadProps {
+    uploadRender: (fileDataList: FileData[], actions: UploadActions) => React.ReactElement;
+    itemRender: (fileData: FileData, fileDataList: FileData[], actions: ItemActions) => React.ReactElement;
+    fileList?: FileData[];
+    autoUpload?: boolean;
+    uploadName?: string;
+    action?: string;
+    method?: string;
+    accept?: string;
+    multiple?: boolean;
+    onChange?: (fileDataList: FileData[]) => void;
+}
+export declare function Upload(props: UploadProps): JSX.Element;

package/dist-types/upload/Upload.spec.d.ts

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

package/dist-types/upload/upload-image/i18n.d.ts

@@ -0,0 +1,13 @@
+export declare enum K {
+    UPLOAD = "UPLOAD",
+    FILE_UPLOADING = "FILE_UPLOADING"
+}
+export declare const NS = "bricks/form/upload-image";
+export declare const locales: {
+    en: Locale;
+    zh: Locale;
+};
+type Locale = {
+    [key in K]: string;
+};
+export {};

package/dist-types/upload/upload-image/index.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+import "@next-core/theme";
+import { FormItemElementBase } from "@next-shared/form";
+import type { FormItemProps } from "../../form-item/index.js";
+import { type FileData } from "../utils.js";
+export interface UploadImageProps {
+    label?: string;
+    name?: string;
+    required?: boolean;
+    message?: Record<string, string>;
+    value?: FileData[];
+    bucketName: string;
+    multiple?: boolean;
+}
+/**
+ * 上传图片构件
+ */
+export declare class UploadImage extends FormItemElementBase implements UploadImageProps {
+    #private;
+    /**
+     * 字段名称
+     */
+    accessor name: string | undefined;
+    /**
+     * 字段说明
+     */
+    accessor label: string | undefined;
+    /**
+     * 值
+     */
+    accessor value: FileData[] | undefined;
+    /**
+     * 对象存储桶名字
+     */
+    accessor bucketName: string;
+    /**
+     * 是否支持选定的多张图片
+     */
+    accessor multiple: boolean | undefined;
+    /**
+     * 是否必填
+     */
+    accessor required: boolean | undefined;
+    /**
+     * 校验文本信息
+     */
+    accessor message: Record<string, string> | undefined;
+    handleChange: (fileDataList: FileData[]) => void;
+    render(): JSX.Element;
+}
+interface UploadImageComponentProps extends UploadImageProps, FormItemProps {
+    onChange?: (fileDataList: FileData[]) => void;
+}
+export declare function UploadImageComponent(props: UploadImageComponentProps): JSX.Element;
+export {};

package/dist-types/upload/upload-image/index.spec.d.ts

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

package/dist-types/upload/utils.d.ts

@@ -0,0 +1,27 @@
+export declare const symbolForAbortController: unique symbol;
+export declare const LIST_IGNORE: unique symbol;
+export declare const getUid: () => string;
+export declare const getImage: (file: string | File, revokeUrl?: boolean) => Promise<HTMLImageElement>;
+export declare const acceptValidator: (file: File, accepts?: string | string[]) => boolean;
+export declare const sizeValidator: (file: File, limitSize?: number) => Promise<unknown>;
+export declare const imageValidator: (file: File, limit?: {
+    width?: number;
+    height?: number;
+}) => Promise<unknown>;
+export declare const getUserData: (file: File) => Promise<{
+    url: string;
+    naturalWidth: number;
+    naturalHeight: number;
+}>;
+export type UploadStatus = "uploading" | "done" | "error";
+export interface FileData {
+    uid?: string;
+    file?: File & {
+        uid?: string;
+    };
+    response?: any;
+    userData?: any;
+    status?: UploadStatus;
+    errors?: Error[];
+    [symbolForAbortController]?: AbortController;
+}

package/docs/upload-image.md

@@ -0,0 +1,14 @@
+上传图片构件
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: form.upload-image
+  events:
+    change:
+      action: console.log
+      args:
+        - "<% EVENT.detail %>"
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/form",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "homepage": "https://github.com/easyops-cn/next-bricks/tree/master/bricks/form",
   "repository": {
     "type": "git",
@@ -37,5 +37,5 @@
     "@next-core/build-next-bricks": "^1.7.2",
     "@next-core/test-next": "^1.0.6"
   },
-  "gitHead": "8d1311247a4b4cfe6a06e269c1acc358e06b4cd0"
+  "gitHead": "48d2da6ad924e806a65ec2907f03e9d161ded64f"
 }