@dckj-npm/dc-material 0.1.278 → 0.1.280

package/lowcode/custom-drawer/meta.ts

@@ -0,0 +1,221 @@
+
+import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
+
+const CustomDrawerMeta: IPublicTypeComponentMetadata = {
+  "componentName": "CustomDrawer",
+  "title": "CustomDrawer",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@dckj-npm/dc-material",
+    "version": "0.1.279",
+    "exportName": "CustomDrawer",
+    "main": "src\\index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    "props": [
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "title",
+            "zh-CN": "标题"
+          },
+          "tip": "title | 标题"
+        },
+        "name": "title",
+        "description": "标题",
+        "setter": {
+          "componentName": "StringSetter",
+          "isRequired": true,
+          "initialValue": ""
+        }
+      },
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "placement",
+            "zh-CN": "弹出位置"
+          },
+          "tip": "placement | 弹出位置"
+        },
+        "name": "placement",
+        "description": "弹出位置",
+        "setter": {
+          "componentName": "SelectSetter",
+          "props": {
+            "dataSource": [
+              {
+                "label": "left",
+                "value": "left"
+              },
+              {
+                "label": "right",
+                "value": "right"
+              },
+              {
+                "label": "top",
+                "value": "top"
+              },
+              {
+                "label": "bottom",
+                "value": "bottom"
+              }
+            ],
+            "options": [
+              {
+                "label": "left",
+                "value": "left"
+              },
+              {
+                "label": "right",
+                "value": "right"
+              },
+              {
+                "label": "top",
+                "value": "top"
+              },
+              {
+                "label": "bottom",
+                "value": "bottom"
+              }
+            ]
+          },
+          "isRequired": true,
+          "initialValue": "left"
+        }
+      },
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "actions",
+            "zh-CN": "操作项"
+          },
+          "tip": "actions | 操作项"
+        },
+        "name": "actions",
+        "description": "操作项",
+        "setter": {
+          "componentName": "ArraySetter",
+          "props": {
+            "itemSetter": {
+              "componentName": "ObjectSetter",
+              "props": {
+                "config": {
+                  "items": [
+                    {
+                      "title": {
+                        "label": {
+                          "type": "i18n",
+                          "en-US": "text",
+                          "zh-CN": "text"
+                        }
+                      },
+                      "name": "text",
+                      "setter": {
+                        "componentName": "StringSetter",
+                        "isRequired": true,
+                        "initialValue": ""
+                      }
+                    },
+                    {
+                      "title": {
+                        "label": {
+                          "type": "i18n",
+                          "en-US": "action",
+                          "zh-CN": "action"
+                        }
+                      },
+                      "name": "action",
+                      "setter": {
+                        "componentName": "StringSetter",
+                        "isRequired": true,
+                        "initialValue": ""
+                      }
+                    },
+                    {
+                      "title": {
+                        "label": {
+                          "type": "i18n",
+                          "en-US": "style",
+                          "zh-CN": "style"
+                        }
+                      },
+                      "name": "style",
+                      "setter": {
+                        "componentName": "RadioGroupSetter",
+                        "props": {
+                          "dataSource": [
+                            {
+                              "label": "primary",
+                              "value": "primary"
+                            },
+                            {
+                              "label": "secondary",
+                              "value": "secondary"
+                            },
+                            {
+                              "label": "normal",
+                              "value": "normal"
+                            }
+                          ],
+                          "options": [
+                            {
+                              "label": "primary",
+                              "value": "primary"
+                            },
+                            {
+                              "label": "secondary",
+                              "value": "secondary"
+                            },
+                            {
+                              "label": "normal",
+                              "value": "normal"
+                            }
+                          ]
+                        },
+                        "isRequired": true,
+                        "initialValue": "primary"
+                      }
+                    }
+                  ],
+                  "extraSetter": {
+                    "componentName": "MixedSetter",
+                    "isRequired": false,
+                    "props": {}
+                  }
+                }
+              }
+            }
+          },
+          "isRequired": true,
+          "initialValue": []
+        }
+      }
+    ],
+    "supports": {
+      "style": true
+    },
+    "component": {}
+  }
+};
+const snippets: IPublicTypeSnippet[] = [
+  {
+    "title": "CustomDrawer",
+    "screenshot": "",
+    "schema": {
+      "componentName": "CustomDrawer",
+      "props": {}
+    }
+  }
+];
+
+export default {
+  ...CustomDrawerMeta,
+  snippets
+};

package/lowcode/drawer/meta.ts

@@ -53,6 +53,7 @@ const CustomDrawerMeta: IPublicTypeComponentMetadata = {
               { label: '下', value: 'bottom' },
             ],
           },
+          initialValue: 'left',
         },
       },
       {
@@ -126,12 +127,164 @@ const CustomDrawerMeta: IPublicTypeComponentMetadata = {
       isContainer: true,
       isModal: true,
       disableBehaviors: ['copy'],
+      rootSelector: '.next-drawer',
       nestingRule: {
         parentWhitelist: (testNode, currentNode) => {
           return testNode.componentName === 'Page'
         },
       },
     },
+    advanced: {
+      callbacks: {
+        // 与 next-page 的 onNodeAdd 一模一样
+        onNodeAdd: (dragment, currentNode) => {
+          // 拖入的组件为 P、Block、Slot（把NextPage拖入到面板里时，NextPage的Slot也会触发onNodeAdd事件） 时,不进行包裹
+          // 拖入的组件 isModal为true时（例如drawer dialog 这类有单独组件树结构的），不进行包裹
+          if (
+            !dragment ||
+            ['NextP', 'NextBlock', 'Slot'].includes(dragment.componentName) ||
+            (dragment.componentMeta.isModal && dragment.componentMeta.isModal())
+          ) {
+            console.log(
+              `[${dragment.componentName}] doesn\'n need to wrap with NextBlock > NextBlockCell`,
+            )
+            return
+          }
+
+          const NextPProps = {
+            wrap: false,
+            type: 'body2',
+            verAlign: 'middle',
+            textSpacing: true,
+            align: 'left',
+          }
+
+          if (
+            [
+              'Form',
+              'ResponsiveGrid',
+              'Box',
+              'Card',
+              'List',
+              'Message',
+              'Slider',
+              'NextTable',
+            ].includes(dragment.componentName) ||
+            dragment.getPropValue('isFillContainer')
+          ) {
+            NextPProps.full = true
+          }
+          const layoutPSchema = {
+            componentName: 'NextP',
+            title: '段落',
+            props: NextPProps,
+            children: [dragment.exportSchema()],
+          }
+
+          // 为目标元素包裹一层 Block
+          const layoutBlockNode = (len) =>
+            currentNode.document.createNode({
+              componentName: 'NextBlock',
+              title: '区块',
+              props: {
+                childTotalColumns: len || 12,
+              },
+              children: [
+                {
+                  componentName: 'NextBlockCell',
+                  title: '子区块',
+                  props: {
+                    isAutoContainer: true,
+                    colSpan: 12,
+                    rowSpan: 1,
+                  },
+                  children: [layoutPSchema],
+                },
+              ],
+            })
+
+          const dropLocation = dragment.document.canvas.dropLocation
+
+          if (!dropLocation) {
+            // 没有 dropLocation 一般是 slot, slot 元素不用特殊处理 不做任何包裹
+            return
+          }
+          const dropTarget = dropLocation.target
+          const dropTargetName = dropLocation.target.componentName || ''
+
+          // 找到要拖入进去的节点 ID
+          const targetId = (dropLocation && dropLocation.target.id) || ''
+          // 找到要拖入进去的节点
+          let slotTarget =
+            currentNode.slots.length > 0 && currentNode.slots.find((item) => item.id === targetId)
+
+          const layoutPNode = currentNode.document.createNode(layoutPSchema)
+
+          // 是否为 aside slot
+          const isAsideSlot = slotTarget && ['aside'].indexOf(slotTarget._slotFor.key) > -1
+          // 是否为需要被 P 包裹的 Slot
+          const isNeedPSlot =
+            slotTarget && ['header', 'footer', 'nav'].indexOf(slotTarget._slotFor.key) > -1
+
+          const wrapWithBlock = (dragment, node, dropTargetName, blockLen) => {
+            setTimeout(() => {
+              console.log(
+                `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextBlock > NextBlockCell > NextP [from NextPage2]`,
+              )
+              const newNode = node.document.createNode(layoutBlockNode(blockLen).exportSchema())
+              node.insertBefore(newNode, dragment, false)
+              dragment.remove(false)
+              newNode.children.get(0).children.get(0).children.get(0).select()
+            }, 1)
+          }
+
+          const wrapWithP = (dragment, node, dropTargetName) => {
+            setTimeout(() => {
+              // const dragmentTarget = dropTarget;
+              // 要拖入的地方如果是 NextP 那就 不再自动包裹 P了
+              if (dropTargetName === 'NextP') {
+                console.log(
+                  `[${dragment.componentName}] to [${dropTargetName}] does't need to wrap with NextP. [from NextPage3]`,
+                )
+                return
+              }
+
+              console.log(
+                `[${dragment.componentName}] to [${dropTargetName}] need to wrap with NextP [from NextPage3]`,
+              )
+              const newNode = node.document.createNode(Object.assign(layoutPNode.exportSchema()))
+              node.insertBefore(newNode, dragment, false)
+              dragment.remove(false)
+              newNode.children.get(0).select()
+            }, 1)
+          }
+
+          // 需要包裹 Block BlockCell P 的情况：
+          // 1. 组件拖入到 NextPage，的直接子元素下(不包括slot), 此时Block宽度为12
+          if (['NextPage'].includes(dropTargetName) && currentNode.children.has(dragment)) {
+            wrapWithBlock(dragment, currentNode, dropTargetName, 12)
+
+            // 需要包裹 Block BlockCell P 的情况：
+            // 2. 组件拖入到 NextPage 的 aside slot, 的直接子元素下 （不包括slot下的进一步内容），此时Block宽度为1
+          } else if (isAsideSlot && slotTarget && slotTarget.children.has(dragment)) {
+            wrapWithBlock(dragment, slotTarget, dropTargetName, 1)
+
+            // 需要包裹 P 的情况：
+            // 1. 如果是处于，开启了自然布局模式的容器组件中 (或者Tab里)
+            // 这里的Tab主要是给纪元epoch使用的，因为他们用到了 @ali/vc-deep 的TabLayout组件，没办法在这个组件上再增加属性 isAutoContainer
+          } else if (dropTarget.getPropValue('isAutoContainer') || dropTargetName === 'Tab.Item') {
+            wrapWithP(dragment, dropTarget, dropTargetName)
+
+            // 需要包裹 P 的情况：
+            // 2. 如果是处于，Page 的 nav header footer 中
+          } else if (isNeedPSlot && slotTarget) {
+            wrapWithP(dragment, slotTarget, dropTargetName)
+          }
+
+          // 其他维持原状，不进行其他设置
+        },
+      },
+    },
   },
 }
 

package/lowcode_es/custom-drawer/meta.d.ts

@@ -0,0 +1,22 @@
+import { IPublicTypeSnippet } from '@alilc/lowcode-types';
+declare const _default: {
+    snippets: IPublicTypeSnippet[];
+    componentName: string;
+    uri?: string;
+    title?: import("@alilc/lowcode-types").IPublicTypeTitleContent;
+    icon?: import("@alilc/lowcode-types").IPublicTypeIconType;
+    tags?: string[];
+    description?: string;
+    docUrl?: string;
+    screenshot?: string;
+    devMode?: "proCode" | "lowCode";
+    npm?: import("@alilc/lowcode-types").IPublicTypeNpmInfo;
+    props?: import("@alilc/lowcode-types").IPublicTypePropConfig[];
+    configure?: import("@alilc/lowcode-types").IPublicTypeFieldConfig[] | import("@alilc/lowcode-types").IPublicTypeConfigure;
+    experimental?: import("@alilc/lowcode-types").IPublicTypeAdvanced;
+    schema?: import("@alilc/lowcode-types").IPublicTypeComponentSchema;
+    group?: string | import("@alilc/lowcode-types").IPublicTypeI18nData;
+    category?: string | import("@alilc/lowcode-types").IPublicTypeI18nData;
+    priority?: number;
+};
+export default _default;

package/lowcode_es/custom-drawer/meta.js

@@ -0,0 +1,189 @@
+import _extends from "@babel/runtime/helpers/extends";
+var CustomDrawerMeta = {
+  "componentName": "CustomDrawer",
+  "title": "CustomDrawer",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@dckj-npm/dc-material",
+    "version": "0.1.279",
+    "exportName": "CustomDrawer",
+    "main": "src\\index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    "props": [{
+      "title": {
+        "label": {
+          "type": "i18n",
+          "en-US": "title",
+          "zh-CN": "标题"
+        },
+        "tip": "title | 标题"
+      },
+      "name": "title",
+      "description": "标题",
+      "setter": {
+        "componentName": "StringSetter",
+        "isRequired": true,
+        "initialValue": ""
+      }
+    }, {
+      "title": {
+        "label": {
+          "type": "i18n",
+          "en-US": "placement",
+          "zh-CN": "弹出位置"
+        },
+        "tip": "placement | 弹出位置"
+      },
+      "name": "placement",
+      "description": "弹出位置",
+      "setter": {
+        "componentName": "SelectSetter",
+        "props": {
+          "dataSource": [{
+            "label": "left",
+            "value": "left"
+          }, {
+            "label": "right",
+            "value": "right"
+          }, {
+            "label": "top",
+            "value": "top"
+          }, {
+            "label": "bottom",
+            "value": "bottom"
+          }],
+          "options": [{
+            "label": "left",
+            "value": "left"
+          }, {
+            "label": "right",
+            "value": "right"
+          }, {
+            "label": "top",
+            "value": "top"
+          }, {
+            "label": "bottom",
+            "value": "bottom"
+          }]
+        },
+        "isRequired": true,
+        "initialValue": "left"
+      }
+    }, {
+      "title": {
+        "label": {
+          "type": "i18n",
+          "en-US": "actions",
+          "zh-CN": "操作项"
+        },
+        "tip": "actions | 操作项"
+      },
+      "name": "actions",
+      "description": "操作项",
+      "setter": {
+        "componentName": "ArraySetter",
+        "props": {
+          "itemSetter": {
+            "componentName": "ObjectSetter",
+            "props": {
+              "config": {
+                "items": [{
+                  "title": {
+                    "label": {
+                      "type": "i18n",
+                      "en-US": "text",
+                      "zh-CN": "text"
+                    }
+                  },
+                  "name": "text",
+                  "setter": {
+                    "componentName": "StringSetter",
+                    "isRequired": true,
+                    "initialValue": ""
+                  }
+                }, {
+                  "title": {
+                    "label": {
+                      "type": "i18n",
+                      "en-US": "action",
+                      "zh-CN": "action"
+                    }
+                  },
+                  "name": "action",
+                  "setter": {
+                    "componentName": "StringSetter",
+                    "isRequired": true,
+                    "initialValue": ""
+                  }
+                }, {
+                  "title": {
+                    "label": {
+                      "type": "i18n",
+                      "en-US": "style",
+                      "zh-CN": "style"
+                    }
+                  },
+                  "name": "style",
+                  "setter": {
+                    "componentName": "RadioGroupSetter",
+                    "props": {
+                      "dataSource": [{
+                        "label": "primary",
+                        "value": "primary"
+                      }, {
+                        "label": "secondary",
+                        "value": "secondary"
+                      }, {
+                        "label": "normal",
+                        "value": "normal"
+                      }],
+                      "options": [{
+                        "label": "primary",
+                        "value": "primary"
+                      }, {
+                        "label": "secondary",
+                        "value": "secondary"
+                      }, {
+                        "label": "normal",
+                        "value": "normal"
+                      }]
+                    },
+                    "isRequired": true,
+                    "initialValue": "primary"
+                  }
+                }],
+                "extraSetter": {
+                  "componentName": "MixedSetter",
+                  "isRequired": false,
+                  "props": {}
+                }
+              }
+            }
+          }
+        },
+        "isRequired": true,
+        "initialValue": []
+      }
+    }],
+    "supports": {
+      "style": true
+    },
+    "component": {}
+  }
+};
+var snippets = [{
+  "title": "CustomDrawer",
+  "screenshot": "",
+  "schema": {
+    "componentName": "CustomDrawer",
+    "props": {}
+  }
+}];
+export default _extends({}, CustomDrawerMeta, {
+  snippets: snippets
+});