@pisell/materials 3.0.62 → 6.0.2

package/lowcode/_utils/type.ts

@@ -0,0 +1,5 @@
+import { IPublicTypeComponentMetadata, IPublicTypeFieldConfig } from "@alilc/lowcode-types";
+
+export type MetaType = IPublicTypeComponentMetadata & {
+  generalProps: IPublicTypeFieldConfig[]
+}

package/lowcode/_utils/utils.ts

@@ -1,6 +1,16 @@
+// @ts-ignore
 export { get, set, has } from 'lodash';
 
 // simple uuid
 export function uuid() {
   return ((Math.random() * 1e6) >> 0).toString(36);
 }
+
+export const omit = (obj: Record<string, any>, keys: string[]) => {
+  const shallowCopy = Object.assign({}, obj);
+  for (let i = 0; i < keys.length; i += 1) {
+    const key = keys[i];
+    delete shallowCopy[key];
+  }
+  return shallowCopy;
+};

package/lowcode/button/meta.ts

@@ -1,9 +1,8 @@
-import { ComponentMetadata, Snippet } from "@alilc/lowcode-types";
 import snippets from "./snippets";
 
-const ButtonMeta: ComponentMetadata = {
+const ButtonMeta = {
   componentName: "Button",
-  title: "Button",
+  title: "按钮",
   /** todo: category属性的多语言不生效 后续组件面板自己实现时加入 */
   category: "通用",
   docUrl: "",

package/lowcode/checkbox/meta.ts

@@ -3,7 +3,7 @@ import snippets from './snippets';
 export default {
   snippets,
   componentName: 'Checkbox',
-  title: '多选框',
+  title: '复选框',
   category: '表单',
   docUrl: "",
   screenshot: "",

package/lowcode/checkbox/snippets.ts

@@ -1,6 +1,6 @@
 export default [
   {
-    title: '多选框',
+    title: '复选框',
     screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/checkbox-1.png',
     schema: {
       componentName: 'Checkbox',
@@ -10,7 +10,7 @@ export default [
     },
   },
   {
-    title: '多选框组',
+    title: '复选框组',
     screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/checkbox-group-1.png',
     schema: {
       componentName: 'Checkbox.Group',

package/lowcode/checkbox.group/meta.ts

@@ -2,7 +2,7 @@ import { uuid } from '../_utils/utils';
 
 export default {
   componentName: 'Checkbox.Group',
-  title: '多选框组',
+  title: '复选框组',
   category: '表单',
   docUrl: "",
   screenshot: "",

package/lowcode/collapse/meta.ts

@@ -63,52 +63,12 @@ export default {
     },
     {
       name: 'ghost',
-      title: { label: '幽灵折叠面板', tip: '将折叠面板的背景变成透明' },
+      title: { label: '透明无边框', tip: '使折叠面板透明且无边框' },
       propType: 'bool',
       defaultValue: false,
       setter: 'BoolSetter',
       supportVariable: true
     },
-    {
-      title: "标题",
-      display: "block",
-      type: "group",
-      items: [
-        {
-          name: "showHeader",
-          title: { label: "标题显隐", tip: "header | 标题显示于隐藏" },
-          propType: "bool",
-          setter: "BoolSetter",
-          defaultValue: true,
-        },
-        {
-          name: "headerFontSize",
-          title: {
-            label: "字号",
-            tip: "headerFontSize | 标题字体大小",
-          },
-          propType: "string",
-          setter: "NumberSetter",
-          defaultValue: 14,
-          condition(target) {
-            return !!target.getProps().getPropValue("showHeader");
-          },
-        },
-        {
-          name: "headerColor",
-          title: {
-            label: "颜色",
-            tip: "headerColor | 标题字体颜色",
-          },
-          propType: "string",
-          setter: "ColorSetter",
-          defaultValue: "#101828",
-          condition(target) {
-            return !!target.getProps().getPropValue("showHeader");
-          },
-        }
-      ],
-    },
     {
       name: 'collapses',
       title: '折叠项',
@@ -243,50 +203,6 @@ export default {
         ],
       },
     },
-    {
-      title: "自定义面板",
-      display: "block",
-      type: "group",
-      items: [
-        {
-          name: "panelBackground",
-          title: {
-            label: "背景色",
-            tip: "panelBackground | 面板背景颜色",
-          },
-          propType: "string",
-          setter: 'ColorSetter',
-        },
-        {
-          name: "panelBorderRadius",
-          title: {
-            label: "圆角",
-            tip: "panelBorderRadius | 面板圆角大小",
-          },
-          propType: "string",
-          setter: "NumberSetter",
-          defaultValue: 0,
-        },
-        {
-          name: "panelMarginBottom",
-          title: {
-            label: "边距",
-            tip: "panelMarginBottom | 每个面板之间的间距",
-          },
-          propType: "string",
-          setter: "NumberSetter",
-          defaultValue: 0,
-        },
-        {
-          name: "expandIcon",
-          title: {
-            label: "图标",
-            tip: "expandIcon | 切换面板图标",
-          },
-          setter: ['SlotSetter'],
-        },
-      ],
-    },
   ],
   configure: {
     supports: {

package/lowcode/color-picker/meta.ts

@@ -0,0 +1,298 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'ColorPicker',
+  title: '颜色选择器',
+  category: '表单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "ColorPicker",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'allowClear',
+      title: { label: '清除', tip: '允许清除选择的颜色' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'arrow',
+      title: { label: '箭头', tip: '配置弹出的箭头' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'children',
+      title: { label: '触发器', tip: '颜色选择器的触发器' },
+      setter: 'SlotSetter',
+    },
+    {
+      name: 'defaultValue',
+      title: { label: '默认值', tip: '默认内容' },
+      propType: 'string',
+      setter: 'StringSetter',
+    },
+    {
+      name: 'defaultFormat',
+      title: { label: '格式', tip: '颜色格式默认的值' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'rgb',
+              value: 'rgb',
+            },
+            {
+              title: 'hex',
+              value: 'hex',
+            },
+            {
+              title: 'hsb',
+              value: 'hsb',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['rgb', 'hex', 'hsb'] },
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否为禁用状态' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'disabledAlpha',
+      title: { label: '禁用透明度', tip: '禁用透明度' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'disabledFormat',
+      title: { label: '禁用选择颜色格式', tip: '禁用选择颜色格式' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'destroyTooltipOnHide',
+      title: { label: '关闭后是否销毁弹窗', tip: '关闭后是否销毁弹窗' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'format',
+      title: { label: '颜色格式', tip: '颜色格式' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'rgb',
+              value: 'rgb',
+            },
+            {
+              title: 'hex',
+              value: 'hex',
+            },
+            {
+              title: 'hsb',
+              value: 'hsb',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['rgb', 'hex', 'hsb'] },
+    },
+    {
+      name: 'open',
+      title: { label: '是否显示弹出窗口', tip: '是否显示弹出窗口' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'presets',
+      title: { label: '预设的颜色', tip: '预设的颜色' },
+      setter: "JsonSetter",
+    },
+    {
+      name: 'placement',
+      title: { label: '弹出窗口的位置', tip: '弹出窗口的位置' },
+      propType: {
+        type: 'oneOf',
+        value: [
+          'top',
+          'left',
+          'right',
+          'bottom',
+          'topLeft',
+          'topRight',
+          'bottomLeft',
+          'bottomRight',
+          'leftTop',
+          'leftBottom',
+          'rightTop',
+          'rightBottom',
+        ],
+      },
+      defaultValue: 'top',
+      setter: {
+        componentName: 'SelectSetter',
+        props: {
+          options: [
+            {
+              title: '上',
+              value: 'top',
+            },
+            {
+              title: '左',
+              value: 'left',
+            },
+            {
+              title: '右',
+              value: 'right',
+            },
+            {
+              title: '下',
+              value: 'bottom',
+            },
+            {
+              title: '上左',
+              value: 'topLeft',
+            },
+            {
+              title: '上右',
+              value: 'topRight',
+            },
+            {
+              title: '下左',
+              value: 'bottomLeft',
+            },
+            {
+              title: '下右',
+              value: 'bottomRight',
+            },
+            {
+              title: '左上',
+              value: 'leftTop',
+            },
+            {
+              title: '左下',
+              value: 'leftBottom',
+            },
+            {
+              title: '右上',
+              value: 'rightTop',
+            },
+            {
+              title: '右下',
+              value: 'rightBottom',
+            },
+          ],
+        },
+      },
+    },
+    {
+      name: 'value',
+      title: { label: '当前值', tip: '当前值' },
+      propType: 'string',
+      setter: 'StringSetter'
+    },
+    {
+      name: 'showText',
+      title: { label: '是否显示弹出窗口', tip: '是否显示弹出窗口' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'size',
+      title: { label: '控件大小', tip: '控件大小' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '大',
+              value: 'large',
+            },
+            {
+              title: '中',
+              value: 'middle',
+            },
+            {
+              title: '小',
+              value: 'small',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
+      defaultValue: 'middle',
+    },
+    {
+      name: 'trigger',
+      title: { label: '触发模式', tip: '颜色选择器的触发模式' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'hover',
+              value: 'hover',
+            },
+            {
+              title: 'click',
+              value: 'click',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['hover', 'click'] },
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(event, css,${extParams}){\n// 颜色变化的回调\nconsole.log('onChange',event, css);}",
+        },
+        {
+          name: 'onChangeComplete',
+          template:
+            "onChangeComplete(event,${extParams}){\n// 颜色选择完成的回调，通过 onChangeComplete 对 value 受控时拖拽不会改变展示颜色\nconsole.log('onChangeComplete',event);}",
+        },
+        {
+          name: 'onFormatChange',
+          template: "onFormatChange(event,${extParams}){\n// 颜色格式变化的回调\nconsole.log('onFormatChange',event);}",
+        },
+        {
+          name: 'onOpenChange',
+          template:
+            "onOpenChange(event,${extParams}){\n// 当 open 被改变时的回调\nconsole.log('onOpenChange',event);}",
+        },
+        {
+          name: 'onClear',
+          template:
+            "onClear(event,${extParams}){\n// 清除的回调\nconsole.log('onClear',event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/color-picker/snippets.ts

@@ -0,0 +1,10 @@
+export default [
+  {
+    title: '颜色选择器',
+    screenshot: 'https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PpY4RYNM8UcAAAAAAAAAAAAADrJ8AQ/original',
+    schema: {
+      componentName: 'ColorPicker',
+      props: {},
+    },
+  },
+];

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

@@ -0,0 +1,96 @@
+import formItemCheckboxMeta from '../form-item-checkbox/meta';
+import formItemCheckboxGroupMeta from '../form-item-checkbox.group/meta';
+import formItemColorPickerMeta from '../form-item-color-picker/meta';
+import formItemDatePickerMeta from '../form-item-date-picker/meta';
+import formItemInputMeta from '../form-item-input/meta';
+import formItemInputNumberMeta from '../form-item-input-number/meta';
+import formItemInputEmailMeta from '../form-item-input.email/meta';
+import formItemInputJsonMeta from '../form-item-input.json/meta';
+import formItemInputPasswordMeta from '../form-item-input.password/meta';
+import formItemInputPhoneMeta from '../form-item-input.phone/meta';
+import formItemInputTextAreaMeta from '../form-item-input.text-area/meta';
+import formItemInputUrlMeta from '../form-item-input.url/meta';
+import formItemRadioMeta from '../form-item-radio/meta';
+import formItemRadioGroupMeta from '../form-item-radio.group/meta';
+import formItemSelectMeta from '../form-item-select/meta';
+import formItemTimePickerMeta from '../form-item-time-picker/meta';
+import formItemUploadMeta from '../form-item-upload/meta';
+
+export const metaAll = [
+  formItemCheckboxMeta,
+  formItemCheckboxGroupMeta,
+  formItemColorPickerMeta,
+  formItemDatePickerMeta,
+  formItemInputMeta,
+  formItemInputNumberMeta,
+  formItemInputEmailMeta,
+  formItemInputJsonMeta,
+  formItemInputPasswordMeta,
+  formItemInputPhoneMeta,
+  formItemInputTextAreaMeta,
+  formItemInputUrlMeta,
+  formItemRadioMeta,
+  formItemRadioGroupMeta,
+  formItemSelectMeta,
+  formItemTimePickerMeta,
+  formItemUploadMeta,
+]
+
+export const formItemMetaMap: Record<string, any> = metaAll.reduce((p, c) => {
+  return {
+    ...p,
+    [c.componentName]: c,
+  };
+}, {});
+
+// nocobase组件映射到pisell组件
+export const nocobaseCpt2PisellCptMap: Record<string, any> = {
+  InputNumber: 'FormItemInputNumber',
+  Percent: 'FormItemInputNumber',
+  DatePicker: 'FormItemDatePicker',
+  Input: 'FormItemInput',
+  // 整个json输入框输入
+  'Input.InputJSON': 'FormItemInput.JSON',
+  // json下自定义创建了字段
+  'Input.JSON': 'JsonWrapper',
+  'Input.URL': 'FormItemInput.URL',
+  'Input.TextArea': 'FormItemInput.TextArea',
+  'Input.Email': 'FormItemInput.Email',
+  'Input.Phone': 'FormItemInput.Phone',
+  Password: 'FormItemInput.Password',
+  Select: 'FormItemSelect',
+  Radio: 'FormItemRadio',
+  TimePicker: 'FormItemTimePicker',
+  ColorPicker: 'FormItemColorPicker',
+  Checkbox: 'FormItemCheckbox',
+  'Radio.Group': 'FormItemRadio.Group',
+  'Checkbox.Group': 'FormItemCheckbox.Group',
+  Upload: 'FormItemUpload',
+  Translation: "FormItemTranslation"
+};
+
+
+
+export const pisellCptMap: Record<string, boolean> = Object.entries(
+  nocobaseCpt2PisellCptMap
+).reduce((p, [key, value]) => {
+  return {
+    ...p,
+    [value]: true,
+  };
+}, {});
+
+// 系统字段
+export const systemFields = [
+  'created_at',
+  'updated_at',
+  'deleted_at',
+  'id',
+  'createdAt',
+  'updatedAt',
+  'deletedAt',
+  'createdBy',
+  'updatedBy',
+  'shop_id',
+  'tenant_id'
+];