@next-bricks/form 1.3.4 → 1.5.0

package/dist/types.json

@@ -343,6 +343,161 @@
     ],
     "methods": []
   },
+  "eo-color-picker": {
+    "properties": [
+      {
+        "name": "name",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "label",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "value",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "defaultValue",
+        "annotation": {
+          "type": "union",
+          "types": [
+            {
+              "type": "keyword",
+              "value": "string"
+            },
+            {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "Color"
+              }
+            }
+          ]
+        }
+      },
+      {
+        "name": "required",
+        "annotation": {
+          "type": "keyword",
+          "value": "boolean"
+        }
+      },
+      {
+        "name": "allowClear",
+        "annotation": {
+          "type": "keyword",
+          "value": "boolean"
+        }
+      },
+      {
+        "name": "size",
+        "annotation": {
+          "type": "union",
+          "types": [
+            {
+              "type": "jsLiteral",
+              "value": "small"
+            },
+            {
+              "type": "jsLiteral",
+              "value": "middle"
+            },
+            {
+              "type": "jsLiteral",
+              "value": "large"
+            }
+          ]
+        }
+      },
+      {
+        "name": "showText",
+        "annotation": {
+          "type": "keyword",
+          "value": "boolean"
+        }
+      },
+      {
+        "name": "disabled",
+        "annotation": {
+          "type": "keyword",
+          "value": "boolean"
+        }
+      },
+      {
+        "name": "format",
+        "annotation": {
+          "type": "union",
+          "types": [
+            {
+              "type": "jsLiteral",
+              "value": "rgb"
+            },
+            {
+              "type": "jsLiteral",
+              "value": "hex"
+            },
+            {
+              "type": "jsLiteral",
+              "value": "hsb"
+            }
+          ]
+        }
+      },
+      {
+        "name": "configProps",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "identifier",
+            "name": "Partial"
+          },
+          "typeParameters": {
+            "type": "typeParameterInstantiation",
+            "params": [
+              {
+                "type": "reference",
+                "typeName": {
+                  "type": "identifier",
+                  "name": "ColorPickerProps"
+                }
+              }
+            ]
+          }
+        }
+      }
+    ],
+    "events": [
+      {
+        "name": "change",
+        "detail": {
+          "annotation": {
+            "type": "union",
+            "types": [
+              {
+                "type": "keyword",
+                "value": "string"
+              },
+              {
+                "type": "keyword",
+                "value": "undefined"
+              }
+            ]
+          }
+        }
+      }
+    ],
+    "methods": []
+  },
   "eo-form": {
     "properties": [
       {

package/dist-types/auto-complete/index.d.ts

@@ -2,15 +2,22 @@ import React from "react";
 import "@next-core/theme";
 import { FormItemElementBase, MessageBody } from "@next-shared/form";
 import type { FormItemProps } from "../form-item/index.jsx";
-interface EoAutoCompleteComponentProps extends FormItemProps {
+export interface AutoCompleteProps extends FormItemProps {
     curElement?: HTMLElement;
-    value?: any;
+    value?: string;
     options?: string[] | OptionType[];
     placeholder?: string;
     inputStyle?: React.CSSProperties;
     disabled?: boolean;
     filterByCaption?: boolean;
-    onChange?: (value: any) => void;
+    validateState?: string;
+    onChange?: (v: any) => void;
+}
+export interface AutoCompleteEvents {
+    change: CustomEvent<string>;
+}
+export interface AutoCompleteEventsMap {
+    onChange: "change";
 }
 export interface Option {
     label: string;
@@ -28,7 +35,7 @@ export type OptionType = Option | OptionGroup;
  *
  * @category form-input-basic
  */
-export declare class EoAutoComplete extends FormItemElementBase {
+export declare class AutoComplete extends FormItemElementBase {
     #private;
     /**
      * 字段名称
@@ -79,5 +86,4 @@ export declare class EoAutoComplete extends FormItemElementBase {
     handleInputChange: (value: string) => void;
     render(): React.JSX.Element;
 }
-export declare function EoAutoCompleteComponent(props: EoAutoCompleteComponentProps): React.JSX.Element;
-export {};
+export declare function EoAutoCompleteComponent(props: AutoCompleteProps): React.JSX.Element;

package/dist-types/bootstrap.d.ts

@@ -16,3 +16,4 @@ import "./auto-complete/index.js";
 import "./time-picker/index.js";
 import "./date-picker/index.js";
 import "./time-range-picker/index.js";
+import "./color-picker/index.js";

package/dist-types/color-picker/index.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+import "@next-core/theme";
+import { ColorPickerProps, Color } from "antd/lib/color-picker";
+import { FormItemElementBase } from "@next-shared/form";
+export interface EoColorPickerProps extends Pick<ColorPickerProps, "allowClear" | "disabled" | "showText" | "format" | "size" | "defaultValue"> {
+    shadowRoot: ShadowRoot | null;
+    configProps?: Partial<ColorPickerProps>;
+    onChange?: (value?: string) => void;
+    value?: string;
+}
+/**
+ * 构件 `eo-color-picker`
+ * @author astrid
+ */
+export declare class EoColorPicker extends FormItemElementBase implements EoColorPickerProps {
+    #private;
+    /**
+     * 字段名称
+     */
+    accessor name: string | undefined;
+    /**
+     * 字段说明
+     */
+    accessor label: string | undefined;
+    /**
+     * 值
+     */
+    accessor value: string | undefined;
+    /**
+     * 颜色默认的值
+     */
+    accessor defaultValue: string | Color | undefined;
+    /**
+     * 是否必填
+     */
+    accessor required: boolean | undefined;
+    /**
+     * 允许清除选择的颜色
+     */
+    accessor allowClear: boolean | undefined;
+    /**
+     * 设置触发器大小
+     * @default middle
+     */
+    accessor size: "small" | "middle" | "large" | undefined;
+    /**
+     * 显示颜色文本
+     */
+    accessor showText: boolean | undefined;
+    /**
+     * 是否禁用
+     */
+    accessor disabled: boolean | undefined;
+    /**
+     * 颜色格式
+     * @default hex
+     */
+    accessor format: "rgb" | "hex" | "hsb" | undefined;
+    /**
+     * 透传 antd ColorPicker 属性 [ColorPickerProps](https://ant.design/components/color-picker-cn#api)
+     */
+    accessor configProps: Partial<ColorPickerProps> | undefined;
+    handleChange: (value?: string) => void;
+    render(): React.JSX.Element;
+}
+export declare function EoColorPickerComponent(props: EoColorPickerProps): React.ReactElement;

package/dist-types/color-picker/index.spec.d.ts

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

package/docs/eo-color-picker.md

@@ -0,0 +1,109 @@
+构件 `eo-color-picker`
+
+## Examples
+
+### Basic
+
+```yaml preview
+brick: eo-color-picker
+events:
+  change:
+    action: console.log
+```
+
+### Size
+
+```yaml preview
+- brick: eo-flex-layout
+  properties:
+    justifyContent: start
+    gap: 20px
+  slots:
+    "":
+      bricks:
+        - brick: eo-color-picker
+          properties:
+            size: small
+            value: red
+        - brick: eo-color-picker
+          properties:
+            size: medium
+            value: "#36b545"
+        - brick: eo-color-picker
+          properties:
+            size: large
+            value: rgb(59, 52, 255)
+```
+
+### ShowText
+
+```yaml preview
+- brick: eo-color-picker
+  properties:
+    showText: true
+  events:
+    change:
+      action: console.log
+```
+
+### AllowClear
+
+```yaml preview
+- brick: eo-color-picker
+  properties:
+    allowClear: true
+    defaultValue: "#f5a623"
+  events:
+    change:
+      action: console.log
+```
+
+### Formats
+
+```yaml preview
+- brick: eo-flex-layout
+  properties:
+    justifyContent: start
+    gap: 20px
+  slots:
+    "":
+      bricks:
+        - brick: eo-color-picker
+          properties:
+            format: hex
+            value: "#FCFA0E"
+        - brick: eo-color-picker
+          properties:
+            format: rgb
+            value: rgb(80, 227, 194)
+        - brick: eo-color-picker
+          properties:
+            format: hsb
+            value: hsb(215, 91%, 100%)
+```
+
+### With Form
+
+```yaml preview
+- brick: form.general-form
+  events:
+    validate.success:
+      - action: console.log
+    validate.error:
+      - action: console.log
+  slots:
+    "":
+      type: bricks
+      bricks:
+        - brick: eo-color-picker
+          properties:
+            name: color
+            label: 颜色
+            required: true
+            defaultValue: "#1677FF"
+            showText: true
+          events:
+            change:
+              action: console.log
+        - brick: eo-submit-buttons
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/form",
-  "version": "1.3.4",
+  "version": "1.5.0",
   "homepage": "https://github.com/easyops-cn/next-bricks/tree/master/bricks/form",
   "repository": {
     "type": "git",
@@ -43,5 +43,5 @@
     "@next-bricks/icons": "*",
     "@next-bricks/illustrations": "*"
   },
-  "gitHead": "09415fcd0835128e373204d9b3c54a23cfd61f16"
+  "gitHead": "fe516f9a8844e037bceeb514ef042d082512a0b1"
 }