@pisell/materials 1.0.496 → 1.0.498

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts

@@ -16,7 +16,7 @@ interface UseTablePropsProps {
  * @returns
  */
 declare const useTableProps: (props: UseTablePropsProps) => {
-    title: number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
+    title: number | boolean | React.JSX.Element | Iterable<React.ReactNode> | (() => React.ReactNode) | null | undefined;
     pagination: {
         total: number;
         current: number;
@@ -25,7 +25,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         showSizeChanger: boolean;
     };
     columns: import("./useColumns").Column[];
-    subTitle: number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
+    subTitle: number | boolean | React.JSX.Element | Iterable<React.ReactNode> | (() => React.ReactNode) | null | undefined;
     buttons: any[] | null;
     filter: React.JSX.Element | null;
     onRow: (record: any) => any;
@@ -40,7 +40,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         width: number;
         align: "center" | "left" | "right";
         fixed: false | "left" | "right";
-        type: "button" | "link";
+        type: "link" | "button";
         items: OperationItem[];
     } | undefined;
     operationContent?: {

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.js

@@ -132,10 +132,10 @@ var useTableProps = (props) => {
             const handleClick = () => {
               if (actionType === "delete") {
                 import_antd.Modal.confirm({
-                  title: "确认删除",
-                  content: "确定要删除该条记录吗?",
-                  okText: "确定",
-                  cancelText: "取消",
+                  title: (0, import_locales.getText)("pisell-delete-confirm-title"),
+                  content: (0, import_locales.getText)("pisell-delete-confirm-content"),
+                  okText: (0, import_locales.getText)("pisell-delete-confirm-ok"),
+                  cancelText: (0, import_locales.getText)("pisell-delete-confirm-cancel"),
                   onOk: () => {
                     handleDelete(record);
                   }

package/lib/components/dataSourceComponents/fields/ColorPicker/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const ColorPicker: React.FC<import("antd").ColorPickerProps & import("../../dataSourceForm/utils").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps>;
+declare const ColorPicker: React.FC<import("./type").ColorPickerProps & import("../../dataSourceForm/utils").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps>;
 export default ColorPicker;

package/lib/components/dataSourceComponents/fields/TimePicker/WithMode.js

@@ -53,7 +53,8 @@ var TimePicker = (props) => {
     value,
     onChange,
     disabled,
-    placeholder
+    placeholder,
+    defaultValue: propsDefaultValue
   } = props;
   const normalizedValue = (0, import_react.useMemo)(() => {
     if (!value)
@@ -61,11 +62,22 @@ var TimePicker = (props) => {
     if (import_dayjs.default.isDayjs(value))
       return value;
     try {
-      return (0, import_dayjs.default)(String(value), "HH:mm:ss");
+      return (0, import_dayjs.default)(String(value), format);
     } catch {
       return void 0;
     }
   }, [value, format]);
+  const defaultValue = (0, import_react.useMemo)(() => {
+    if (!propsDefaultValue)
+      return void 0;
+    if (import_dayjs.default.isDayjs(propsDefaultValue))
+      return propsDefaultValue;
+    try {
+      return (0, import_dayjs.default)(String(propsDefaultValue), format);
+    } catch {
+      return void 0;
+    }
+  }, [propsDefaultValue, format]);
   if (config.platform === "h5") {
     const sizeClassMap = {
       large: "pisell-h5-time-picker-lg",
@@ -111,7 +123,7 @@ var TimePicker = (props) => {
         },
         timePickerProps: {
           format,
-          ...(0, import_utils2.omit)(props, ["value"]) || {}
+          ...(0, import_utils2.omit)(props, ["value", "defaultValue"]) || {}
         },
         popoverProps: {},
         timeProps: {},
@@ -119,7 +131,7 @@ var TimePicker = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.TimePicker, { ...props, value: normalizedValue });
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.TimePicker, { ...props, value: normalizedValue, defaultValue });
 };
 var TimePickerWithMode = (0, import_utils3.withMode)(TimePicker, import_ReadPretty.default);
 var WithMode_default = TimePickerWithMode;

package/lib/components/dataSourceComponents/fields/Upload/ReadPretty.js

@@ -47,7 +47,10 @@ var UploadReadPretty = (props) => {
       src: props == null ? void 0 : props.value,
       width: 100,
       height: 100,
-      fallback: import_fallback.default
+      fallback: import_fallback.default,
+      preview: {
+        maskClassName: "pisell-upload-read-pretty-mask"
+      }
     }
   );
 };

package/lib/components/dataSourceComponents/fields/Upload/ReadPretty.less

@@ -6,3 +6,6 @@
   border-radius: 10px;
   border: 1px solid var(--Gray-300, #d0d5dd);
 }
+.pisell-upload-read-pretty-mask {
+  border-radius: 10px;
+}

package/lib/components/page/index.js

@@ -79,7 +79,7 @@ var Page = (props) => {
     if (props == null ? void 0 : props.theme) {
       return {
         ...props.theme,
-        cssVar: { key: "app" },
+        // cssVar: { key: 'app' },
         token: {
           ...props.theme.token,
           // 外部透传主题时，如果没有传入colorPrimary 默认使用主项目内主题色
@@ -88,7 +88,7 @@ var Page = (props) => {
       };
     }
     return {
-      cssVar: { key: "app" },
+      // cssVar: { key: 'app' },
       components: {
         Table: {
           colorFillContent: "#EAECF0",

package/lib/locales/en-US.d.ts

@@ -162,5 +162,9 @@ declare const _default: {
     'pisellQrcode-done': string;
     'pisellQrcode-qrcode': string;
     'pisell-design-mode-action-disabled': string;
+    'pisell-delete-confirm-title': string;
+    'pisell-delete-confirm-content': string;
+    'pisell-delete-confirm-ok': string;
+    'pisell-delete-confirm-cancel': string;
 };
 export default _default;

package/lib/locales/en-US.js

@@ -202,5 +202,9 @@ var en_US_default = {
   //PisellQrcode组件
   "pisellQrcode-done": "Done",
   "pisellQrcode-qrcode": "QR code",
-  "pisell-design-mode-action-disabled": "This action cannot be performed in edit mode"
+  "pisell-design-mode-action-disabled": "This action cannot be performed in edit mode",
+  "pisell-delete-confirm-title": "Confirm Delete",
+  "pisell-delete-confirm-content": "Are you sure you want to delete this record?",
+  "pisell-delete-confirm-ok": "OK",
+  "pisell-delete-confirm-cancel": "Cancel"
 };

package/lib/locales/zh-CN.d.ts

@@ -161,6 +161,10 @@ declare const _default: {
     'walletCard-discount': string;
     'pisellQrcode-done': string;
     'pisellQrcode-qrcode': string;
+    'pisell-delete-confirm-title': string;
+    'pisell-delete-confirm-content': string;
+    'pisell-delete-confirm-ok': string;
+    'pisell-delete-confirm-cancel': string;
     'pisell-design-mode-action-disabled': string;
 };
 export default _default;

package/lib/locales/zh-CN.js

@@ -201,5 +201,9 @@ var zh_CN_default = {
   //PisellQrcode组件
   "pisellQrcode-done": "完成",
   "pisellQrcode-qrcode": "二维码",
+  "pisell-delete-confirm-title": "确认删除",
+  "pisell-delete-confirm-content": "确定要删除该条记录吗?",
+  "pisell-delete-confirm-ok": "确定",
+  "pisell-delete-confirm-cancel": "取消",
   "pisell-design-mode-action-disabled": "编辑模式下不可执行此操作"
 };

package/lib/locales/zh-TW.d.ts

@@ -161,6 +161,10 @@ declare const _default: {
     'walletCard-discount': string;
     'pisellQrcode-done': string;
     'pisellQrcode-qrcode': string;
+    'pisell-delete-confirm-title': string;
+    'pisell-delete-confirm-content': string;
+    'pisell-delete-confirm-ok': string;
+    'pisell-delete-confirm-cancel': string;
     'pisell-design-mode-action-disabled': string;
 };
 export default _default;

package/lib/locales/zh-TW.js

@@ -202,5 +202,9 @@ var zh_TW_default = {
   //PisellQrcode组件
   "pisellQrcode-done": "完成",
   "pisellQrcode-qrcode": "二維碼",
+  "pisell-delete-confirm-title": "確認刪除",
+  "pisell-delete-confirm-content": "確定要刪除該條記錄嗎?",
+  "pisell-delete-confirm-ok": "確定",
+  "pisell-delete-confirm-cancel": "取消",
   "pisell-design-mode-action-disabled": "編輯模式下不可執行此操作"
 };

package/lowcode/data-source-form/snippets.ts

@@ -1,8 +1,7 @@
 export default [
   {
     title: '表单(添加)',
-    screenshot:
-      'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/form-1.png',
+    screenshot: require('./__screenshots__/add.png'),
     schema: {
       title: '表单(添加)',
       componentName: 'DataSourceForm',
@@ -92,8 +91,8 @@ export default [
   },
   {
     title: '详情',
-    screenshot:
-      'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/form-1.png',
+    screenshot: require('./__screenshots__/detail.png'),
+
     schema: {
       title: '详情',
       componentName: 'DataSourceForm',

package/lowcode/data-source-table/meta.ts

@@ -1377,6 +1377,23 @@ const dataSourceTable = {
                           defaultValue: false,
                           isRequired: true,
                         },
+                      {
+                        name: 'other',
+                        title: {
+                          label: {
+                            type: 'i18n',
+                            'en-US': 'Other Properties',
+                            'zh-CN': '其他拓展属性'
+                          },
+                          tip: {
+                            type: 'i18n',
+                            'en-US': 'Other extended properties',
+                            'zh-CN': '其他拓展属性'
+                          }
+                        },
+                        propType: 'object',
+                        setter: 'JsonSetter'
+                      }
                       ],
                     },
                   },
@@ -1865,7 +1882,12 @@ const dataSourceTable = {
             },
             propType: 'string',
             setter: 'PisellI18nSetter',
-            defaultValue: '操作',
+            defaultValue: {
+              'en': 'Operation',
+              'zh-CN': '操作',
+              'zh-HK': '操作',
+              type: 'i18n',
+            },
             condition: {
               type: 'JSFunction',
               value:

package/lowcode/data-source-table/utils.tsx

@@ -96,7 +96,8 @@ export const fields2Columns = (fields: any[]) => {
       //   value: [createRenderSchema(field)],
       //   id: 'node_ocm49b0bm71',
       // },
-      fieldComponent: createFormItemSchema(field, 'edit').componentName,
+      fieldComponent: createFormItemSchema(field, 'edit').componentName === 'JsonWrapper' ? 'FormItemInput.JSON' : createFormItemSchema(field, 'edit').componentName,
+      // fieldProps
     }));
 };
 
@@ -178,7 +179,12 @@ export const resetTableProps = (target: any) => {
   });
   target.getProps().setPropValue('search', {
     show: false,
-    placeholder: 'Search',
+    placeholder: {
+      type: 'i18n',
+      'en': 'Search',
+      'zh-CN': '搜索',
+      'zh-HK': '搜索',
+    },
   });
   target.getProps().setPropValue('titleButtons', {
     show: false,
@@ -198,7 +204,7 @@ export const getJsSlot = () => {
 
 export const getFormContent = (target: any, mode: 'add' | 'edit' | 'view') => {
   const fields = getVariable(target, 'currentFields');
-  let childrenSchemas = fields2ChildrenSchemas(fields, mode);
+  let childrenSchemas = [createFormGroup(fields2ChildrenSchemas(fields, mode))];
   const titleMap = {
     add: '表单(添加)',
     edit: '编辑',
@@ -241,7 +247,7 @@ export const getFormContent = (target: any, mode: 'add' | 'edit' | 'view') => {
               ? genDataSourceValueKey(target, 'currentRecord')
               : undefined,
         },
-        children: createFormGroup(childrenSchemas),
+        children: childrenSchemas,
       },
     ],
   };
@@ -251,29 +257,59 @@ export const getFormContent = (target: any, mode: 'add' | 'edit' | 'view') => {
 export const setDefaultOperationAndTitleButtons = (target: any) => {
   const operation = {
     show: true,
-    title: '操作',
+    title: {
+      type: 'i18n',
+      'en': 'Operation',
+      'zh-CN': '操作',
+      'zh-HK': '操作',
+    },
     align: 'center',
     fixed: false,
     type: 'link',
     items: [
       {
-        label: '查看',
+        label: {
+          type: 'i18n',
+          'en': 'View',
+          'zh-CN': '查看',
+          'zh-HK': '查看',
+        },
         openMode: 'drawer',
         openContentSize: 'middle',
-        openTitle: '详情',
+        openTitle: {
+          type: 'i18n',
+          'en': 'Detail',
+          'zh-CN': '详情',
+          'zh-HK': '詳情',
+        },
         actionType: 'view',
         key: 'view',
       },
       {
-        label: '编辑',
+        label: {
+          type: 'i18n',
+          'en': 'Edit',
+          'zh-CN': '编辑',
+          'zh-HK': '編輯',
+        },
         openMode: 'drawer',
         openContentSize: 'middle',
-        openTitle: '编辑',
+        openTitle: {
+          type: 'i18n',
+          'en': 'Edit',
+          'zh-CN': '编辑',
+          'zh-HK': '編輯',
+        },
         actionType: 'edit',
         key: 'edit',
       },
       {
-        label: '删除',
+        label: {
+          type: 'i18n',
+          'en': 'Delete',
+          'zh-CN': '删除',
+          'zh-HK': '刪除',
+        },
         actionType: 'delete',
       },
     ],
@@ -283,15 +319,30 @@ export const setDefaultOperationAndTitleButtons = (target: any) => {
     show: true,
     items: [
       {
-        label: '添加',
+        label: {
+          type: 'i18n',
+          'en': 'Add',
+          'zh-CN': '添加',
+          'zh-HK': '添加',
+        },
         openMode: 'drawer',
         openContentSize: 'middle',
-        openTitle: '添加',
+        openTitle: {
+          type: 'i18n',
+          'en': 'Add',
+          'zh-CN': '添加',
+          'zh-HK': '添加',
+        },
         actionType: 'add',
         key: 'add',
         buttonProps: {
           type: 'primary',
-          title: '添加',
+          title: {
+            type: 'i18n',
+            'en': 'Add',
+            'zh-CN': '添加',
+            'zh-HK': '添加',
+          },
         },
       },
     ],
@@ -337,7 +388,12 @@ export const setDefaultSearchFilter = (target: any, fields: any[]) => {
 
   target.getProps().setPropValue('search', {
     show: true,
-    placeholder: 'Search',
+    placeholder: {
+      type: 'i18n',
+      'en': 'Search',
+      'zh-CN': '搜索',
+      'zh-HK': '搜索',
+    },
   });
 
   target.getProps().setPropValue('filter', {

package/lowcode/form-group/snippets.ts

@@ -1,6 +1,7 @@
 export default [
   {
     title: '分组',
+    screenshot: require('./__screenshots__/group.png'),
     schema: {
       componentName: 'FormGroup',
       title: '分组',

package/lowcode/form-item-input-number/meta.ts

@@ -32,7 +32,23 @@ export default {
       generalItemMap['extra'],
       generalItemMap['hideLabel'],
       generalItemMap['renderMode'],
-      generalItemMap['defaultValue'],
+      {
+        name: 'defaultValue',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Default value',
+            'zh-CN': '默认值',
+          },
+          tip: {
+            type: 'i18n',
+            'en-US': 'Default value',
+            'zh-CN': '默认值',
+          },
+        },
+        propType: 'string',
+        setter: 'NumberSetter',
+      },
       {
         name: 'addonAfter',
         title: {
@@ -131,49 +147,49 @@ export default {
         defaultValue: 1,
         setter: 'NumberSetter',
       },
-      {
-        name: 'previewFormatter',
-        title: {
-          label: {
-            type: 'i18n',
-            'en-US': 'Number Format',
-            'zh-CN': '数值格式化',
-          },
-          tip: {
-            type: 'i18n',
-            'en-US': 'Format the display value',
-            'zh-CN': '格式化展示值,如大数字缩写 1000 -> 1k',
-          },
-        },
-        propType: {
-          type: 'oneOf',
-          value: ['none', 'thousand', 'million', 'billion']
-        },
-        defaultValue: 'none',
-        setter: {
-          componentName: 'SelectSetter',
-          props: {
-            options: [
-              {
-                title: '无',
-                value: 'none'
-              },
-              {
-                title: '千',
-                value: 'thousand'
-              },
-              {
-                title: '百万',
-                value: 'million'
-              },
-              {
-                title: '十亿',
-                value: 'billion'
-              }
-            ]
-          }
-        }
-      },
+      // {
+      //   name: 'previewFormatter',
+      //   title: {
+      //     label: {
+      //       type: 'i18n',
+      //       'en-US': 'Number Format',
+      //       'zh-CN': '数值格式化',
+      //     },
+      //     tip: {
+      //       type: 'i18n',
+      //       'en-US': 'Format the display value',
+      //       'zh-CN': '格式化展示值,如大数字缩写 1000 -> 1k',
+      //     },
+      //   },
+      //   propType: {
+      //     type: 'oneOf',
+      //     value: ['none', 'thousand', 'million', 'billion']
+      //   },
+      //   defaultValue: 'none',
+      //   setter: {
+      //     componentName: 'SelectSetter',
+      //     props: {
+      //       options: [
+      //         {
+      //           title: '无',
+      //           value: 'none'
+      //         },
+      //         {
+      //           title: '千',
+      //           value: 'thousand'
+      //         },
+      //         {
+      //           title: '百万',
+      //           value: 'million'
+      //         },
+      //         {
+      //           title: '十亿',
+      //           value: 'billion'
+      //         }
+      //       ]
+      //     }
+      //   }
+      // },
     ]),
     getFormItemValidateGroup([
       generalItemMap['requiredobj'],

package/lowcode/form-item-input.json/snippets.ts

@@ -7,8 +7,24 @@ export default [
       componentName: 'FormItemInput.JSON',
       props: {
         autoSize: {
+          minRows: 4,
         },
         placeholder: '请输入',
+        normalize: {
+          type: 'JSExpression',
+          value:
+            '(value) => {\n  try {\n    return JSON.parse(value);\n  } catch(error) {\n    console.log(error)\n  }\n  return value\n}',
+        },
+        getValueProps: {
+          type: 'JSExpression',
+          value:
+            '(value) => {\n  try {\n   return { value: value != "" && typeof value === \'object\' ? JSON.stringify(value, null, 2) : value};\n  } catch(error) {\n    console.log(error)\n  }\n  return {value: value}\n}',
+        },
+        validator: {
+          type: 'JSExpression',
+          value:
+            "async (value) => {\n try {\n    if (typeof value === 'string' && value.trim() !== '') {\n      JSON.parse(value);\n    }\n  } catch (err) {\n    return Promise.reject(new Error(err.message));\n  }\n}",
+        }
       },
     },
   },

package/lowcode/form-item-select/snippets.ts

@@ -28,10 +28,10 @@ export default [
     },
   },
   {
-    title: '多选选择器',
+    title: '多项选择器',
     screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/select-1.png',
     schema: {
-      title: '多选选择器',
+      title: '多项选择器',
       componentName: 'FormItemSelect',
       props: {
         allowClear: true,

package/lowcode/form-item-time-picker/meta.ts

@@ -46,7 +46,7 @@ export default {
             'zh-CN': '默认值',
           },
         },
-        setter: 'TimePicker',
+        setter: 'PisellTimePickerSetter',
         defaultValue: null,
       },
       {

package/lowcode/submit-button/snippets.ts

@@ -1,6 +1,7 @@
 export default [
   {
     title: '提交按钮',
+    screenshot: require('../button/__screenshots__/button-1.png'),
     schema: {
       title: '提交按钮',
       componentName: 'SubmitButton',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.496",
+  "version": "1.0.498",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -67,8 +67,8 @@
     "react-window": "^1.8.10",
     "styled-components": "^6.0.0-rc.3",
     "libphonenumber-js": "^1.11.17",
-    "@pisell/date-picker": "1.0.114",
     "@pisell/icon": "0.0.10",
+    "@pisell/date-picker": "1.0.114",
     "@pisell/utils": "1.0.43"
   },
   "peerDependencies": {