@next-bricks/form 0.17.19 → 0.18.0

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

@@ -1,18 +1,36 @@
 import React from "react";
 import { FormItemElementBase } from "@next-shared/form";
-import type { GeneralComplexOption, GeneralGroupOption } from "../interface.js";
+import type { GeneralComplexOption } from "../interface.js";
 import "@next-core/theme";
 import type { FormItemProps } from "../form-item/index.jsx";
+import { UseSingleBrickConf } from "@next-core/types";
+interface UseBackendConf {
+    provider: string;
+    args: any[] | ((...args: any[]) => any[]);
+    transform?: (data: any) => void;
+}
 export interface SelectProps extends FormItemProps {
     value?: any;
-    options: GeneralComplexOption[] | GeneralGroupOption[];
+    options: GeneralComplexOption[];
     placeholder?: string;
-    multiple?: boolean;
+    mode?: "tags" | "multiple";
+    tokenSeparators?: string[];
+    maxTagCount?: number;
+    groupBy?: string;
+    suffix?: UseSingleBrickConf;
+    fields?: {
+        label?: string;
+        value?: string;
+    };
+    useBackend?: UseBackendConf & {
+        onValueChangeArgs?: any[] | ((...args: any[]) => any[]);
+    };
+    debounceSearchDelay?: number;
     clearable?: boolean;
     disabled?: boolean;
     inputStyle?: React.CSSProperties;
     validateState?: string;
-    onChange?: (value: any) => void;
+    onChange?: (value: any, options: GeneralComplexOption[]) => void;
     onValueChange?: (value: any) => void;
     optionsChange?: (options: any, name: string) => void;
     onFocus?: () => void;
@@ -20,7 +38,7 @@ export interface SelectProps extends FormItemProps {
 }
 /**
  * 通用下拉选择构件
- * @author julielai
+ * @author sailorshe
  */
 declare class Select extends FormItemElementBase {
     #private;
@@ -40,7 +58,7 @@ declare class Select extends FormItemElementBase {
      * 选项列表
      * @required
      */
-    accessor options: GeneralComplexOption[] | undefined;
+    accessor options: GeneralComplexOption[];
     /**
      * 值
      */
@@ -58,19 +76,46 @@ declare class Select extends FormItemElementBase {
      */
     accessor disabled: boolean | undefined;
     /**
-     * 是否支持多选
+     * 类型
+     */
+    accessor mode: "tags" | "multiple" | undefined;
+    /**
+     * 自动分词的分隔符，仅在 mode="tags" 时生效
+     */
+    accessor tokenSeparators: string[] | undefined;
+    /**
+     * 最多显示多少个 tag, 剩余的 tag 将被隐藏
+     */
+    accessor maxTagCount: number | undefined;
+    /**
+     * 分组字段
      */
-    accessor multiple: boolean | undefined;
+    accessor groupBy: string | undefined;
+    /**
+     */
+    accessor suffix: UseSingleBrickConf | undefined;
     /**
      * 是否支持清除
      * @default true
      */
     accessor clearable: boolean | undefined;
+    /**
+     * 列表指定字段作为 label 和 value
+     */
+    accessor fields: {
+        label?: string;
+        value?: string;
+    } | undefined;
+    /**
+     * 后端搜索
+     */
+    accessor useBackend: UseBackendConf | undefined;
+    accessor debounceSearchDelay: number | undefined;
     /**
      * 输入框样式
      */
     accessor inputStyle: React.CSSProperties | undefined;
-    handleChange: (value: string | string[]) => void;
+    handleChange: (value: string | string[], options: GeneralComplexOption[]) => void;
     private _handleOptionsChange;
     handleSearch: (value: string) => void;
     handleFocus: () => void;

package/docs/eo-select.md

@@ -115,7 +115,29 @@
 - brick: eo-select
   properties:
     label: multiple
-    multiple: true
+    mode: multiple
+    value:
+      - Beijing
+      - Guangzhou
+    options:
+      - Beijing
+      - Shanghai
+      - Guangzhou
+      - Shenzhen
+```
+
+### Tags & TokenSeparators & MaxTagCount
+
+```yaml preview
+- brick: eo-select
+  properties:
+    label: tags
+    mode: tags
+    tokenSeparators:
+      - " "
+      - ";"
+      - "；"
+    maxTagCount: 3
     options:
       - Beijing
       - Shanghai
@@ -136,6 +158,124 @@
       - Shenzhen
 ```
 
+### Suffix
+
+```yaml preview
+- brick: eo-select
+  properties:
+    placeholder: This is placeholder...
+    options:
+      - label: Beijing
+        value: 1
+        color: red
+        tag: 京
+      - label: Shanghai
+        value: 2
+        color: green
+        tag: 沪
+      - label: Guangzhou
+        value: 3
+        color: blue
+        tag: 粤
+      - label: Shenzhen
+        value: 4
+        color: yellow
+        tag: 粤
+    suffix:
+      brick: eo-tag
+      properties:
+        textContent: <% DATA.tag %>
+        color: <% DATA.color %>
+```
+
+### GroupBy
+
+```yaml preview
+- brick: eo-select
+  properties:
+    placeholder: This is placeholder...
+    groupBy: tag
+    options:
+      - label: Beijing
+        value: 1
+        color: red
+        tag: 京
+      - label: Shanghai
+        value: 2
+        color: green
+        tag: 沪
+      - label: Guangzhou
+        value: 3
+        color: blue
+        tag: 粤
+      - label: Shenzhen
+        value: 4
+        color: yellow
+        tag: 粤
+```
+
+### Fields
+
+```yaml preview
+- brick: eo-select
+  properties:
+    placeholder: This is placeholder...
+    fields:
+      label: name
+      value: city
+    value: 3
+    options:
+      - name: Beijing
+        city: 1
+        color: red
+        tag: 京
+      - name: Shanghai
+        city: 2
+        color: green
+        tag: 沪
+      - name: Guangzhou
+        city: 3
+        color: blue
+        tag: 粤
+      - name: Shenzhen
+        city: 4
+        color: yellow
+        tag: 粤
+```
+
+### UseBackend
+
+```yaml preview
+- brick: eo-select
+  properties:
+    label: useBackend
+    placeholder: 后端搜索
+    value: Shenzhen
+    useBackend:
+      provider: basic.http-request
+      transform: |
+        <% (data) => data %>
+      onValueChangeArgs:
+        - |
+          <% 
+            (q) => 
+              `//api.weatherapi.com/v1/search.json?q=${q}&key=${MISC.weather_api_key}`
+          %>
+      args:
+        - |
+          <% 
+            (q) => 
+              `//api.weatherapi.com/v1/search.json?q=${q ? q : "China"}&key=${MISC.weather_api_key}`
+          %>
+    fields:
+      label: name
+      value: name
+    suffix:
+      brick: eo-tag
+      properties:
+        textContent: <% DATA.country %>
+```
+
 ### Input Style
 
 ```yaml preview

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/form",
-  "version": "0.17.19",
+  "version": "0.18.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.14.2",
     "@next-core/test-next": "^1.0.10"
   },
-  "gitHead": "b91b0ba07fd4eed0d07bfa276af9ed955874f7b0"
+  "gitHead": "6b8fa644f42e1a97c3b09c3dd029be922a5e58cc"
 }