amis 1.10.1-beta.0 → 1.10.2

package/lib/types.d.ts

@@ -75,7 +75,7 @@ export interface Definitions {
     [propName: string]: SchemaNode;
 }
 export interface Action extends Button {
-    actionType?: 'submit' | 'copy' | 'reload' | 'ajax' | 'saveAs' | 'dialog' | 'drawer' | 'jump' | 'link' | 'url' | 'email' | 'close' | 'confirm' | 'add' | 'remove' | 'delete' | 'edit' | 'cancel' | 'next' | 'prev' | 'reset' | 'validate' | 'reset-and-submit' | 'clear' | 'clear-and-submit' | 'toast' | 'goto-step' | 'goto-image' | 'expand' | 'collapse' | 'step-submit' | 'selectAll' | 'changeTabKey' | 'click';
+    actionType?: 'submit' | 'copy' | 'reload' | 'ajax' | 'saveAs' | 'dialog' | 'drawer' | 'jump' | 'link' | 'url' | 'email' | 'close' | 'confirm' | 'add' | 'remove' | 'delete' | 'edit' | 'cancel' | 'next' | 'prev' | 'reset' | 'validate' | 'reset-and-submit' | 'clear' | 'clear-and-submit' | 'toast' | 'goto-step' | 'goto-image' | 'expand' | 'collapse' | 'step-submit' | 'selectAll' | 'changeTabKey' | 'click' | 'stopAutoRefresh';
     api?: Api;
     asyncApi?: Api;
     payload?: any;

package/lib/types.js.map

@@ -8,6 +8,6 @@
     "names": [],
     "mappings": "",
     "sourcesContent": [
-        "import type {ActionSchema} from './renderers/Action';\nimport {SchemaApiObject} from './Schema';\n\nexport interface ApiObject extends SchemaApiObject {\n  config?: {\n    withCredentials?: boolean;\n    cancelExecutor?: (cancel: Function) => void;\n  };\n  graphql?: string;\n  operationName?: string;\n  body?: PlainObject;\n  query?: PlainObject;\n  adaptor?: (payload: object, response: fetcherResult, api: ApiObject) => any;\n  requestAdaptor?: (api: ApiObject) => ApiObject;\n}\nexport type ApiString = string;\nexport type Api = ApiString | ApiObject;\n\nexport interface fetcherResult {\n  data?: {\n    data: object;\n    status: number;\n    msg: string;\n    msgTimeout?: number;\n    errors?: {\n      [propName: string]: string;\n    };\n    type?: string;\n    [propName: string]: any; // 为了兼容其他返回格式\n  };\n  status: number;\n  headers: object;\n}\n\nexport interface fetchOptions {\n  method?: 'get' | 'post' | 'put' | 'patch' | 'delete' | 'jsonp';\n  successMessage?: string;\n  errorMessage?: string;\n  autoAppend?: boolean;\n  beforeSend?: (data: any) => any;\n  onSuccess?: (json: Payload) => any;\n  onFailed?: (json: Payload) => any;\n  silent?: boolean;\n  [propName: string]: any;\n}\n\nexport interface Payload {\n  ok: boolean;\n  msg: string;\n  msgTimeout?: number;\n  data: any;\n  status: number;\n  errors?: {\n    [propName: string]: string;\n  };\n}\n\nexport interface Schema {\n  type: string;\n  detectField?: string;\n  visibleOn?: string;\n  hiddenOn?: string;\n  children?: JSX.Element | ((props: any, schema?: any) => JSX.Element) | null;\n  definitions?: Definitions;\n  [propName: string]: any;\n}\n\nexport interface Button {\n  type: 'submit' | 'button' | 'reset';\n  label?: string;\n  icon?: string;\n  size?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport type SchemaNode = Schema | string | Array<Schema | string>;\nexport interface SchemaArray extends Array<SchemaNode> {}\nexport interface Definitions {\n  [propName: string]: SchemaNode;\n}\nexport interface Action extends Button {\n  actionType?:\n    | 'submit'\n    | 'copy'\n    | 'reload'\n    | 'ajax'\n    | 'saveAs'\n    | 'dialog'\n    | 'drawer'\n    | 'jump'\n    | 'link'\n    | 'url'\n    | 'email'\n    | 'close'\n    | 'confirm'\n    | 'add'\n    | 'remove'\n    | 'delete'\n    | 'edit'\n    | 'cancel'\n    | 'next'\n    | 'prev'\n    | 'reset'\n    | 'validate'\n    | 'reset-and-submit'\n    | 'clear'\n    | 'clear-and-submit'\n    | 'toast'\n    | 'goto-step'\n    | 'goto-image'\n    | 'expand'\n    | 'collapse'\n    | 'step-submit'\n    | 'selectAll'\n    | 'changeTabKey'\n    | 'click';\n  api?: Api;\n  asyncApi?: Api;\n  payload?: any;\n  dialog?: SchemaNode;\n  to?: string;\n  target?: string;\n  link?: string;\n  url?: string;\n  cc?: string;\n  bcc?: string;\n  subject?: string;\n  body?: string;\n  mergeData?: boolean;\n  reload?: string;\n  messages?: {\n    success?: string;\n    failed?: string;\n  };\n  feedback?: any;\n  required?: Array<string>;\n  [propName: string]: any;\n}\n\nexport interface Location {\n  pathname: string;\n  search: string;\n  state: any;\n  hash: string;\n  key?: string;\n  query?: any;\n}\n\nexport interface PlainObject {\n  [propsName: string]: any;\n}\n\nexport interface RendererData {\n  [propsName: string]: any;\n  __prev?: RendererDataAlias;\n  __super?: RendererData;\n}\ntype RendererDataAlias = RendererData;\n\nexport type FunctionPropertyNames<T> = {\n  [K in keyof T]: T[K] extends Function ? K : never;\n}[keyof T];\n\nexport interface JSONSchema {\n  [propsName: string]: any;\n}\n\n// export type Omit<T, K extends keyof T & any> = Pick<T, Exclude<keyof T, K>>;\n// export type Override<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;\n// export type ExtractProps<\n//   TComponentOrTProps\n// > = TComponentOrTProps extends React.ComponentType<infer P> ? P : never;\n\n/**\n * 事件跟踪的定义\n */\nexport interface EventTrack {\n  /**\n   * 事件类型，目前有以下几种\n   *\n   * api: 所有 fetcher 前调用\n   * url: 打开外部链接，组件有可能是 action 也有可能是 link\n   * link: 打开内部链接\n   * dialog: action 的弹框\n   * drawer: action 的抽出式弹框\n   * copy: action 里的复制\n   * reload: action 里的 reload\n   * email: action 里的 email\n   * prev: action 里的 prev\n   * next: action 里的 next\n   * cancel: action 里的 cancel\n   * close: action 里的 close\n   * submit: 有可能是 action 里的 submit，也有可能是表单提交\n   * confirm: action 里的 confirm\n   * add: action 里的 add\n   * reset: action 里的 reset\n   * reset-and-submit: action 里的 reset-and-submit\n   * formItemChange: 表单项内容变化\n   * formError: 表单验证失败\n   * formSubmit: 表单成功提交，在表单验证成功之后才会触发，这个可能会和 api 重合\n   * tabChange: tab 切换\n   * netError: api 报错\n   */\n  eventType:\n    | 'api'\n    | 'url'\n    | 'link'\n    | 'dialog'\n    | 'drawer'\n    | 'copy'\n    | 'reload'\n    | 'email'\n    | 'prev'\n    | 'next'\n    | 'cancel'\n    | 'close'\n    | 'submit'\n    | 'confirm'\n    | 'reset'\n    | 'reset-and-submit'\n    | 'formItemChange'\n    | 'tabChange';\n\n  /**\n   * 事件数据\n   */\n  eventData: ActionSchema | Api;\n}\n"
+        "import type {ActionSchema} from './renderers/Action';\nimport {SchemaApiObject} from './Schema';\n\nexport interface ApiObject extends SchemaApiObject {\n  config?: {\n    withCredentials?: boolean;\n    cancelExecutor?: (cancel: Function) => void;\n  };\n  graphql?: string;\n  operationName?: string;\n  body?: PlainObject;\n  query?: PlainObject;\n  adaptor?: (payload: object, response: fetcherResult, api: ApiObject) => any;\n  requestAdaptor?: (api: ApiObject) => ApiObject;\n}\nexport type ApiString = string;\nexport type Api = ApiString | ApiObject;\n\nexport interface fetcherResult {\n  data?: {\n    data: object;\n    status: number;\n    msg: string;\n    msgTimeout?: number;\n    errors?: {\n      [propName: string]: string;\n    };\n    type?: string;\n    [propName: string]: any; // 为了兼容其他返回格式\n  };\n  status: number;\n  headers: object;\n}\n\nexport interface fetchOptions {\n  method?: 'get' | 'post' | 'put' | 'patch' | 'delete' | 'jsonp';\n  successMessage?: string;\n  errorMessage?: string;\n  autoAppend?: boolean;\n  beforeSend?: (data: any) => any;\n  onSuccess?: (json: Payload) => any;\n  onFailed?: (json: Payload) => any;\n  silent?: boolean;\n  [propName: string]: any;\n}\n\nexport interface Payload {\n  ok: boolean;\n  msg: string;\n  msgTimeout?: number;\n  data: any;\n  status: number;\n  errors?: {\n    [propName: string]: string;\n  };\n}\n\nexport interface Schema {\n  type: string;\n  detectField?: string;\n  visibleOn?: string;\n  hiddenOn?: string;\n  children?: JSX.Element | ((props: any, schema?: any) => JSX.Element) | null;\n  definitions?: Definitions;\n  [propName: string]: any;\n}\n\nexport interface Button {\n  type: 'submit' | 'button' | 'reset';\n  label?: string;\n  icon?: string;\n  size?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport type SchemaNode = Schema | string | Array<Schema | string>;\nexport interface SchemaArray extends Array<SchemaNode> {}\nexport interface Definitions {\n  [propName: string]: SchemaNode;\n}\nexport interface Action extends Button {\n  actionType?:\n    | 'submit'\n    | 'copy'\n    | 'reload'\n    | 'ajax'\n    | 'saveAs'\n    | 'dialog'\n    | 'drawer'\n    | 'jump'\n    | 'link'\n    | 'url'\n    | 'email'\n    | 'close'\n    | 'confirm'\n    | 'add'\n    | 'remove'\n    | 'delete'\n    | 'edit'\n    | 'cancel'\n    | 'next'\n    | 'prev'\n    | 'reset'\n    | 'validate'\n    | 'reset-and-submit'\n    | 'clear'\n    | 'clear-and-submit'\n    | 'toast'\n    | 'goto-step'\n    | 'goto-image'\n    | 'expand'\n    | 'collapse'\n    | 'step-submit'\n    | 'selectAll'\n    | 'changeTabKey'\n    | 'click'\n    | 'stopAutoRefresh';\n  api?: Api;\n  asyncApi?: Api;\n  payload?: any;\n  dialog?: SchemaNode;\n  to?: string;\n  target?: string;\n  link?: string;\n  url?: string;\n  cc?: string;\n  bcc?: string;\n  subject?: string;\n  body?: string;\n  mergeData?: boolean;\n  reload?: string;\n  messages?: {\n    success?: string;\n    failed?: string;\n  };\n  feedback?: any;\n  required?: Array<string>;\n  [propName: string]: any;\n}\n\nexport interface Location {\n  pathname: string;\n  search: string;\n  state: any;\n  hash: string;\n  key?: string;\n  query?: any;\n}\n\nexport interface PlainObject {\n  [propsName: string]: any;\n}\n\nexport interface RendererData {\n  [propsName: string]: any;\n  __prev?: RendererDataAlias;\n  __super?: RendererData;\n}\ntype RendererDataAlias = RendererData;\n\nexport type FunctionPropertyNames<T> = {\n  [K in keyof T]: T[K] extends Function ? K : never;\n}[keyof T];\n\nexport interface JSONSchema {\n  [propsName: string]: any;\n}\n\n// export type Omit<T, K extends keyof T & any> = Pick<T, Exclude<keyof T, K>>;\n// export type Override<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;\n// export type ExtractProps<\n//   TComponentOrTProps\n// > = TComponentOrTProps extends React.ComponentType<infer P> ? P : never;\n\n/**\n * 事件跟踪的定义\n */\nexport interface EventTrack {\n  /**\n   * 事件类型，目前有以下几种\n   *\n   * api: 所有 fetcher 前调用\n   * url: 打开外部链接，组件有可能是 action 也有可能是 link\n   * link: 打开内部链接\n   * dialog: action 的弹框\n   * drawer: action 的抽出式弹框\n   * copy: action 里的复制\n   * reload: action 里的 reload\n   * email: action 里的 email\n   * prev: action 里的 prev\n   * next: action 里的 next\n   * cancel: action 里的 cancel\n   * close: action 里的 close\n   * submit: 有可能是 action 里的 submit，也有可能是表单提交\n   * confirm: action 里的 confirm\n   * add: action 里的 add\n   * reset: action 里的 reset\n   * reset-and-submit: action 里的 reset-and-submit\n   * formItemChange: 表单项内容变化\n   * formError: 表单验证失败\n   * formSubmit: 表单成功提交，在表单验证成功之后才会触发，这个可能会和 api 重合\n   * tabChange: tab 切换\n   * netError: api 报错\n   */\n  eventType:\n    | 'api'\n    | 'url'\n    | 'link'\n    | 'dialog'\n    | 'drawer'\n    | 'copy'\n    | 'reload'\n    | 'email'\n    | 'prev'\n    | 'next'\n    | 'cancel'\n    | 'close'\n    | 'submit'\n    | 'confirm'\n    | 'reset'\n    | 'reset-and-submit'\n    | 'formItemChange'\n    | 'tabChange';\n\n  /**\n   * 事件数据\n   */\n  eventData: ActionSchema | Api;\n}\n"
     ]
 }

package/lib/utils/icon.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateIcon = void 0;
 var tslib_1 = require("tslib");
 var react_1 = (0, tslib_1.__importDefault)(require("react"));
+var icons_1 = require("../components/icons");
 /**
  * 判断字符串来生成 i 或 img
  * @param icon icon 设置
@@ -13,9 +14,15 @@ var react_1 = (0, tslib_1.__importDefault)(require("react"));
  * @param classNameProp amis 配置里设置的 className
  */
 var generateIcon = function (cx, icon, className, classNameProp) {
+    if (!icon) {
+        return null;
+    }
     if (react_1.default.isValidElement(icon)) {
         return icon;
     }
+    if ((0, icons_1.getIcon)(icon)) {
+        return react_1.default.createElement(icons_1.Icon, { icon: icon, className: cx(className, icon, classNameProp) });
+    }
     var isURLIcon = (icon === null || icon === void 0 ? void 0 : icon.indexOf('.')) !== -1;
     return icon ? (isURLIcon ? (react_1.default.createElement("img", { className: cx(className, classNameProp), src: icon, key: icon })) : (react_1.default.createElement("i", { className: cx(className, icon, classNameProp), key: icon }))) : null;
 };

package/lib/utils/icon.js.map

@@ -6,8 +6,8 @@
         "/src/utils/icon.tsx"
     ],
     "names": [],
-    "mappings": ";AAAA;;GAEG;;;;AAEH,6DAA0B;AAG1B;;;;;GAKG;AACI,IAAM,YAAY,GAAG,UAC1B,EAAgB,EAChB,IAAa,EACb,SAAkB,EAClB,aAAsB;IAEtB,IAAI,eAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;QAC9B,OAAO,IAAI,CAAC;KACb;IAED,IAAM,SAAS,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,CAAC,GAAG,CAAC,MAAK,CAAC,CAAC,CAAC;IAE5C,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,SAAS,CAAC,CAAC,CAAC,CACV,uCAAK,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,GAAI,CACvE,CAAC,CAAC,CAAC,CACF,qCAAG,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,GAAI,CAChE,CACF,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAnBW,QAAA,YAAY,gBAmBvB",
+    "mappings": ";AAAA;;GAEG;;;;AAEH,6DAA0B;AAC1B,6CAAkD;AAGlD;;;;;GAKG;AACI,IAAM,YAAY,GAAG,UAC1B,EAAgB,EAChB,IAAa,EACb,SAAkB,EAClB,aAAsB;IAEtB,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;KACb;IAED,IAAI,eAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;QAC9B,OAAO,IAAI,CAAC;KACb;IAED,IAAI,IAAA,eAAO,EAAC,IAAI,CAAC,EAAE;QACjB,OAAO,8BAAC,YAAI,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,aAAa,CAAC,GAAI,CAAC;KAC5E;IAED,IAAM,SAAS,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,CAAC,GAAG,CAAC,MAAK,CAAC,CAAC,CAAC;IAE5C,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,SAAS,CAAC,CAAC,CAAC,CACV,uCAAK,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,GAAI,CACvE,CAAC,CAAC,CAAC,CACF,qCAAG,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,GAAI,CAChE,CACF,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AA3BW,QAAA,YAAY,gBA2BvB",
     "sourcesContent": [
-        "/**\n * @file 图标支持的公共方法，主要是支持自动识别地址和 icon-font\n */\n\nimport React from 'react';\nimport {ClassNamesFn} from '../theme';\n\n/**\n * 判断字符串来生成 i 或 img\n * @param icon icon 设置\n * @param className 内部用的 className\n * @param classNameProp amis 配置里设置的 className\n */\nexport const generateIcon = (\n  cx: ClassNamesFn,\n  icon?: string,\n  className?: string,\n  classNameProp?: string\n) => {\n  if (React.isValidElement(icon)) {\n    return icon;\n  }\n\n  const isURLIcon = icon?.indexOf('.') !== -1;\n\n  return icon ? (\n    isURLIcon ? (\n      <img className={cx(className, classNameProp)} src={icon} key={icon} />\n    ) : (\n      <i className={cx(className, icon, classNameProp)} key={icon} />\n    )\n  ) : null;\n};\n"
+        "/**\n * @file 图标支持的公共方法，主要是支持自动识别地址和 icon-font\n */\n\nimport React from 'react';\nimport {getIcon, Icon} from '../components/icons';\nimport {ClassNamesFn} from '../theme';\n\n/**\n * 判断字符串来生成 i 或 img\n * @param icon icon 设置\n * @param className 内部用的 className\n * @param classNameProp amis 配置里设置的 className\n */\nexport const generateIcon = (\n  cx: ClassNamesFn,\n  icon?: string,\n  className?: string,\n  classNameProp?: string\n) => {\n  if (!icon) {\n    return null;\n  }\n\n  if (React.isValidElement(icon)) {\n    return icon;\n  }\n\n  if (getIcon(icon)) {\n    return <Icon icon={icon} className={cx(className, icon, classNameProp)} />;\n  }\n\n  const isURLIcon = icon?.indexOf('.') !== -1;\n\n  return icon ? (\n    isURLIcon ? (\n      <img className={cx(className, classNameProp)} src={icon} key={icon} />\n    ) : (\n      <i className={cx(className, icon, classNameProp)} key={icon} />\n    )\n  ) : null;\n};\n"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amis",
-  "version": "1.10.1-beta.0",
+  "version": "1.10.2",
   "description": "一种MIS页面生成工具",
   "main": "lib/index.js",
   "scripts": {

package/schema.json

@@ -6382,6 +6382,7 @@
         "color",
         "container",
         "crud",
+        "crud2",
         "custom",
         "date",
         "static-date",
@@ -8206,9 +8207,7 @@
         }
       },
       "required": [
-        "btnActiveClassName",
         "btnActiveLevel",
-        "btnLevel",
         "type"
       ],
       "additionalProperties": false,
@@ -34760,13 +34759,6 @@
           "$ref": "#/definitions/ExpandableSchema",
           "description": "表格行可展开配置"
         },
-        "expandableBody": {
-          "type": "array",
-          "items": {
-            "$ref": "#/definitions/SchemaObject"
-          },
-          "description": "表格行可展开内容配置"
-        },
         "sticky": {
           "type": "boolean",
           "description": "粘性头部"
@@ -35006,6 +34998,10 @@
     "ExpandableSchema": {
       "type": "object",
       "properties": {
+        "type": {
+          "type": "string",
+          "description": "对应渲染器类型"
+        },
         "keyField": {
           "type": "string",
           "description": "对应数据源的key值"
@@ -35034,6 +35030,7 @@
         }
       },
       "required": [
+        "type",
         "keyField",
         "expandableOn",
         "expandedRowClassNameExpr",
@@ -39077,9 +39074,7 @@
         }
       },
       "required": [
-        "btnActiveClassName",
         "btnActiveLevel",
-        "btnLevel",
         "type"
       ],
       "additionalProperties": false,
@@ -42129,6 +42124,14 @@
           "$ref": "#/definitions/SchemaApi",
           "description": "远端校验表单项接口"
         },
+        "embed": {
+          "type": "boolean",
+          "description": "内嵌模式，默认为 true"
+        },
+        "pickerIcon": {
+          "$ref": "#/definitions/IconSchema",
+          "description": "非内嵌模式时 弹窗触发icon"
+        },
         "funcs": {
           "$ref": "#/definitions/Funcs",
           "description": "函数集合"
@@ -67122,7 +67125,7 @@
           "$ref": "#/definitions/TableSchemaV2",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|expandableBody|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|label|labelClassName|name|popOver|quickEdit|copyable)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|label|labelClassName|name|popOver|quickEdit|copyable)$": {}
           }
         },
         {
@@ -67276,7 +67279,7 @@
           "$ref": "#/definitions/ConditionBuilderControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|funcs|fields|config|source|builderMode|showANDOR|popOver|quickEdit|copyable)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|embed|pickerIcon|funcs|fields|config|source|builderMode|showANDOR|popOver|quickEdit|copyable)$": {}
           }
         },
         {
@@ -67958,7 +67961,7 @@
           "$ref": "#/definitions/TableSchemaV2",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|expandableBody|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|label|labelClassName|name|popOver|quickEdit|copyable)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|label|labelClassName|name|popOver|quickEdit|copyable)$": {}
           }
         },
         {
@@ -68112,7 +68115,7 @@
           "$ref": "#/definitions/ConditionBuilderControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|funcs|fields|config|source|builderMode|showANDOR|popOver|quickEdit|copyable)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|embed|pickerIcon|funcs|fields|config|source|builderMode|showANDOR|popOver|quickEdit|copyable)$": {}
           }
         },
         {
@@ -68794,7 +68797,7 @@
           "$ref": "#/definitions/TableSchemaV2",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|expandableBody|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|label|fixed|name|popOver|quickEdit|quickEditOnUpdate|copyable|sortable|searchable|toggled|width|align|classNameExpr|labelClassName|filterable|breakpoint|remark|value|unique)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|label|fixed|name|popOver|quickEdit|quickEditOnUpdate|copyable|sortable|searchable|toggled|width|align|classNameExpr|labelClassName|filterable|breakpoint|remark|value|unique)$": {}
           }
         },
         {
@@ -68948,7 +68951,7 @@
           "$ref": "#/definitions/ConditionBuilderControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|funcs|fields|config|source|builderMode|showANDOR|fixed|popOver|quickEdit|quickEditOnUpdate|copyable|sortable|searchable|toggled|width|align|classNameExpr|filterable|breakpoint|unique)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|embed|pickerIcon|funcs|fields|config|source|builderMode|showANDOR|fixed|popOver|quickEdit|quickEditOnUpdate|copyable|sortable|searchable|toggled|width|align|classNameExpr|filterable|breakpoint|unique)$": {}
           }
         },
         {
@@ -69630,7 +69633,7 @@
           "$ref": "#/definitions/TableSchemaV2",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|expandableBody|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|x|y|w|h|width|height|align|valign|gridClassName)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|x|y|w|h|width|height|align|valign|gridClassName)$": {}
           }
         },
         {
@@ -69784,7 +69787,7 @@
           "$ref": "#/definitions/ConditionBuilderControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|funcs|fields|config|source|builderMode|showANDOR|x|y|w|h|width|height|align|valign|gridClassName)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|embed|pickerIcon|funcs|fields|config|source|builderMode|showANDOR|x|y|w|h|width|height|align|valign|gridClassName)$": {}
           }
         },
         {
@@ -70466,7 +70469,7 @@
           "$ref": "#/definitions/TableSchemaV2",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|expandableBody|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|rowClassName|cellClassName)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|rowClassName|cellClassName)$": {}
           }
         },
         {
@@ -70620,7 +70623,7 @@
           "$ref": "#/definitions/ConditionBuilderControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|funcs|fields|config|source|builderMode|showANDOR|rowClassName|cellClassName)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|embed|pickerIcon|funcs|fields|config|source|builderMode|showANDOR|rowClassName|cellClassName)$": {}
           }
         },
         {
@@ -71302,7 +71305,7 @@
           "$ref": "#/definitions/TableSchemaV2",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|expandableBody|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|unique|columnClassName)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|unique|columnClassName)$": {}
           }
         },
         {
@@ -71456,7 +71459,7 @@
           "$ref": "#/definitions/ConditionBuilderControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|funcs|fields|config|source|builderMode|showANDOR|unique|columnClassName)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|embed|pickerIcon|funcs|fields|config|source|builderMode|showANDOR|unique|columnClassName)$": {}
           }
         },
         {
@@ -72138,7 +72141,7 @@
           "$ref": "#/definitions/TableSchemaV2",
           "additionalProperties": false,
           "patternProperties": {
-            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|expandableBody|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|columnClassName|columnRatio)$": {}
+            "^(type|className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|title|source|columnsTogglable|columns|rowSelection|expandable|sticky|loading|itemBadge|popOverContainer|keyField|childrenColumnName|rowClassNameExpr|lineHeight|bordered|showHeader|footer|columnClassName|columnRatio)$": {}
           }
         },
         {
@@ -72292,7 +72295,7 @@
           "$ref": "#/definitions/ConditionBuilderControlSchema",
           "additionalProperties": false,
           "patternProperties": {
-            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|funcs|fields|config|source|builderMode|showANDOR|columnClassName|columnRatio)$": {}
+            "^(className|$ref|disabled|disabledOn|hidden|hiddenOn|visible|visibleOn|id|onEvent|type|size|label|labelAlign|labelClassName|name|remark|labelRemark|hint|submitOnChange|readOnly|readOnlyOn|validateOnChange|description|desc|descriptionClassName|mode|horizontal|inline|inputClassName|placeholder|required|validationErrors|validations|value|clearValueOnHidden|validateApi|embed|pickerIcon|funcs|fields|config|source|builderMode|showANDOR|columnClassName|columnRatio)$": {}
           }
         },
         {

package/scss/_mixins.scss

@@ -340,7 +340,7 @@
   justify-content: flex-start;
 
   input {
-    flex-basis: px2rem(80px);
+    flex-basis: px2rem(30px);
     flex-grow: 1;
     outline: none;
     background: transparent;

package/scss/components/_condition-builder.scss

@@ -278,3 +278,14 @@
   display: inline-block;
   user-select: none;
 }
+
+.#{$ns}CBPicker-trigger {
+  cursor: pointer;
+  transition: transform var(--animation-duration) ease-out;
+  display: flex;
+  color: var(--Form-select-caret-iconColor);
+
+  &:hover {
+    color: var(--primary);
+  }
+}

package/scss/components/_crud.scss

@@ -67,7 +67,6 @@
   }
 
   &-toolbar-item {
-    margin-left: var(--Crud-toolbar-gap);
     margin-top: var(--Crud-toolbar-gap);
     line-height: var(--Crud-toolbar-lineHeight);
     height: var(--Crud-toolbar-height);
@@ -75,6 +74,10 @@
     display: inline-flex;
     align-items: center;
 
+    &:not(:first-child) {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+
     &--left {
       float: left;
     }
@@ -119,7 +122,6 @@
 @include media-breakpoint-up(sm) {
   .#{$ns}Crud {
     &-toolbar {
-      margin-left: calc(var(--Crud-toolbar-gap) * -1);
       margin-top: calc(var(--Crud-toolbar-gap) * -1);
       flex-basis: 0;
       flex-grow: 1;
@@ -127,11 +129,14 @@
     }
 
     &-toolbar-item {
-      margin-left: var(--Crud-toolbar-gap);
       line-height: var(--Crud-toolbar-lineHeight);
       height: var(--Crud-toolbar-height);
       vertical-align: middle;
 
+      &:not(:first-child) {
+        margin-left: var(--Crud-toolbar-gap);
+      }
+
       &--left {
         float: left;
       }

package/scss/components/_crud2.scss

@@ -0,0 +1,148 @@
+.#{$ns}Crud2 {
+  position: relative;
+
+  &-selection,
+  &-toolbar,
+  &-body {
+    margin-bottom: var(--gap-base);
+  }
+
+  &-selectionLabel {
+    display: inline-block;
+    vertical-align: top;
+    margin-top: var(--gap-xs);
+  }
+
+  &-value {
+    cursor: pointer;
+    vertical-align: middle;
+    user-select: none;
+    line-height: calc(
+      var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
+    );
+    display: inline-block;
+    font-size: var(--Form-selectValue-fontSize);
+    color: var(--Form-selectValue-color);
+    background: var(--Form-selectValue-bg);
+    border: px2rem(1px) solid var(--Form-selectValue-borderColor);
+    border-radius: 2px;
+    margin-right: var(--gap-xs);
+    margin-top: var(--gap-xs);
+
+    &:hover {
+      background: var(--Form-selectValue-onHover-bg);
+    }
+
+    &.is-disabled {
+      pointer-events: none;
+      opacity: var(--Button-onDisabled-opacity);
+    }
+  }
+
+  &-valueIcon {
+    cursor: pointer;
+    border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
+    padding: 1px 5px;
+
+    &:hover {
+      background: var(--Form-selectValue-onHover-bg);
+    }
+  }
+
+  &-valueLabel {
+    padding: 0 var(--gap-xs);
+  }
+
+  &-selectionClear {
+    display: inline-block;
+    cursor: pointer;
+    user-select: none;
+    margin-left: var(--gap-xs);
+    margin-top: var(--gap-xs);
+    vertical-align: middle;
+  }
+
+  &-toolbar-item {
+    margin-top: var(--Crud-toolbar-gap);
+    line-height: var(--Crud-toolbar-lineHeight);
+    height: var(--Crud-toolbar-height);
+    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
+
+    &:not(:first-child) {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+
+    &--left {
+      float: left;
+    }
+
+    &--right {
+      float: right;
+    }
+  }
+
+  &-actions {
+    > * + .#{$ns}Button,
+    > * + .#{$ns}ButtonGroup,
+    > * + .#{$ns}ButtonToolbar {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+  }
+
+  &-statistics {
+    line-height: var(--Crud-toolbar-height);
+    vertical-align: middle;
+  }
+
+  &-pageSwitch {
+    .#{$ns}Select {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+  }
+
+  &-pager {
+    align-self: flex-start;
+  }
+
+  &-filter {
+    margin-bottom: var(--gap-base);
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .#{$ns}Crud {
+    &-toolbar {
+      margin-top: calc(var(--Crud-toolbar-gap) * -1);
+      flex-basis: 0;
+      flex-grow: 1;
+      @include clearfix();
+    }
+
+    &-toolbar-item {
+      line-height: var(--Crud-toolbar-lineHeight);
+      height: var(--Crud-toolbar-height);
+      vertical-align: middle;
+
+      &:not(:first-child) {
+        margin-left: var(--Crud-toolbar-gap);
+      }
+
+      &--left {
+        float: left;
+      }
+
+      &--right {
+        float: right;
+      }
+    }
+
+    &-actions {
+      > * + .#{$ns}Button,
+      > * + .#{$ns}Button--disabled-wrap {
+        margin-left: var(--Crud-toolbar-gap);
+      }
+    }
+  }
+}

package/scss/components/_result-box.scss

@@ -1,17 +1,13 @@
 .#{$ns}ResultBox {
   @include input-input();
   @include input-border();
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   padding: 0 px2rem(5px);
   min-height: var(--Form-input-height);
   align-items: center;
   border-radius: 3px;
   position: relative;
 
-  &.is-clearable {
-    padding-right: px2rem(55px);
-  }
-
   &.is-error {
     border-color: var(--Form-input-onError-borderColor);
     background: var(--Form-input-onError-bg);
@@ -60,7 +56,32 @@
     padding-left: var(--gap-base);
   }
 
+  &-value-wrap {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  &-actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    > * {
+      &:first-child {
+        margin-left: px2rem(5px);
+      }
+
+      &:not(:last-child) {
+        margin-right: px2rem(5px);
+      }
+    }
+  }
+
   &-singleValue {
+    padding: 0 calc(var(--Form-input-paddingX) - #{px2rem(3px)});
+    flex-grow: 1;
     display: inline-block;
     max-width: 100%;
     overflow: hidden;
@@ -91,10 +112,7 @@
   &-clear {
     @include input-clear();
     height: 100%;
-    padding: px2rem(4px);
     margin: auto 0;
-    position: absolute;
-    right: 10px;
     background-color: unset;
 
     &-wrap {
@@ -168,6 +186,7 @@
 
   &-placeholder {
     color: var(--Form-input-placeholderColor);
+    flex-grow: 1;
     user-select: none;
   }