@dckj-npm/dc-material 0.1.279 → 0.1.281

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: '.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)
+          }
+
+          // 其他维持原状，不进行其他设置
+        },
+      },
+    },
   },
 }
 
@@ -141,7 +294,15 @@ const snippets: IPublicTypeSnippet[] = [
     screenshot: '',
     schema: {
       componentName: 'CustomDrawer',
-      props: {},
+      props: {
+        title: '抽屉',
+        placement: 'left',
+        isAutoContainer: true,
+        actions: [
+          { text: '确定', action: 'submit', style: 'primary', type: 'submit' },
+          { text: '取消', action: 'submit', style: 'normal', type: 'cancel' },
+        ],
+      },
     },
   },
 ]

package/lowcode_es/drawer/meta.js

@@ -62,7 +62,8 @@ var CustomDrawerMeta = {
             label: '下',
             value: 'bottom'
           }]
-        }
+        },
+        initialValue: 'left'
       }
     }, {
       title: '操作项',
@@ -146,11 +147,130 @@ var CustomDrawerMeta = {
       isContainer: true,
       isModal: true,
       disableBehaviors: ['copy'],
+      rootSelector: '.drawer',
       nestingRule: {
         parentWhitelist: function parentWhitelist(testNode, currentNode) {
           return testNode.componentName === 'Page';
         }
       }
+    },
+    advanced: {
+      callbacks: {
+        // 与 next-page 的 onNodeAdd 一模一样
+        onNodeAdd: function 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;
+          }
+          var 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;
+          }
+          var layoutPSchema = {
+            componentName: 'NextP',
+            title: '段落',
+            props: NextPProps,
+            children: [dragment.exportSchema()]
+          };
+
+          // 为目标元素包裹一层 Block
+          var layoutBlockNode = function layoutBlockNode(len) {
+            return currentNode.document.createNode({
+              componentName: 'NextBlock',
+              title: '区块',
+              props: {
+                childTotalColumns: len || 12
+              },
+              children: [{
+                componentName: 'NextBlockCell',
+                title: '子区块',
+                props: {
+                  isAutoContainer: true,
+                  colSpan: 12,
+                  rowSpan: 1
+                },
+                children: [layoutPSchema]
+              }]
+            });
+          };
+          var dropLocation = dragment.document.canvas.dropLocation;
+          if (!dropLocation) {
+            // 没有 dropLocation 一般是 slot, slot 元素不用特殊处理 不做任何包裹
+            return;
+          }
+          var dropTarget = dropLocation.target;
+          var dropTargetName = dropLocation.target.componentName || '';
+
+          // 找到要拖入进去的节点 ID
+          var targetId = dropLocation && dropLocation.target.id || '';
+          // 找到要拖入进去的节点
+          var slotTarget = currentNode.slots.length > 0 && currentNode.slots.find(function (item) {
+            return item.id === targetId;
+          });
+          var layoutPNode = currentNode.document.createNode(layoutPSchema);
+
+          // 是否为 aside slot
+          var isAsideSlot = slotTarget && ['aside'].indexOf(slotTarget._slotFor.key) > -1;
+          // 是否为需要被 P 包裹的 Slot
+          var isNeedPSlot = slotTarget && ['header', 'footer', 'nav'].indexOf(slotTarget._slotFor.key) > -1;
+          var wrapWithBlock = function wrapWithBlock(dragment, node, dropTargetName, blockLen) {
+            setTimeout(function () {
+              console.log("[" + dragment.componentName + "] to [" + dropTargetName + "] need to wrap with NextBlock > NextBlockCell > NextP [from NextPage2]");
+              var 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);
+          };
+          var wrapWithP = function wrapWithP(dragment, node, dropTargetName) {
+            setTimeout(function () {
+              // 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]");
+              var 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);
+          }
+
+          // 其他维持原状，不进行其他设置
+        }
+      }
     }
   }
 };
@@ -159,7 +279,22 @@ var snippets = [{
   screenshot: '',
   schema: {
     componentName: 'CustomDrawer',
-    props: {}
+    props: {
+      title: '抽屉',
+      placement: 'left',
+      isAutoContainer: true,
+      actions: [{
+        text: '确定',
+        action: 'submit',
+        style: 'primary',
+        type: 'submit'
+      }, {
+        text: '取消',
+        action: 'submit',
+        style: 'normal',
+        type: 'cancel'
+      }]
+    }
   }
 }];
 export default _extends({}, CustomDrawerMeta, {

package/lowcode_es/meta.js

@@ -105,7 +105,7 @@ function fillRealVersion(meta, packageName, version, basicLibraryVersion) {
     packageName = '@dckj-npm/dc-material';
   }
   if (version === void 0) {
-    version = '0.1.279';
+    version = '0.1.281';
   }
   if (basicLibraryVersion === void 0) {
     basicLibraryVersion = {

package/lowcode_lib/drawer/meta.js

@@ -67,7 +67,8 @@ var CustomDrawerMeta = {
             label: '下',
             value: 'bottom'
           }]
-        }
+        },
+        initialValue: 'left'
       }
     }, {
       title: '操作项',
@@ -151,11 +152,130 @@ var CustomDrawerMeta = {
       isContainer: true,
       isModal: true,
       disableBehaviors: ['copy'],
+      rootSelector: '.drawer',
       nestingRule: {
         parentWhitelist: function parentWhitelist(testNode, currentNode) {
           return testNode.componentName === 'Page';
         }
       }
+    },
+    advanced: {
+      callbacks: {
+        // 与 next-page 的 onNodeAdd 一模一样
+        onNodeAdd: function 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;
+          }
+          var 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;
+          }
+          var layoutPSchema = {
+            componentName: 'NextP',
+            title: '段落',
+            props: NextPProps,
+            children: [dragment.exportSchema()]
+          };
+
+          // 为目标元素包裹一层 Block
+          var layoutBlockNode = function layoutBlockNode(len) {
+            return currentNode.document.createNode({
+              componentName: 'NextBlock',
+              title: '区块',
+              props: {
+                childTotalColumns: len || 12
+              },
+              children: [{
+                componentName: 'NextBlockCell',
+                title: '子区块',
+                props: {
+                  isAutoContainer: true,
+                  colSpan: 12,
+                  rowSpan: 1
+                },
+                children: [layoutPSchema]
+              }]
+            });
+          };
+          var dropLocation = dragment.document.canvas.dropLocation;
+          if (!dropLocation) {
+            // 没有 dropLocation 一般是 slot, slot 元素不用特殊处理 不做任何包裹
+            return;
+          }
+          var dropTarget = dropLocation.target;
+          var dropTargetName = dropLocation.target.componentName || '';
+
+          // 找到要拖入进去的节点 ID
+          var targetId = dropLocation && dropLocation.target.id || '';
+          // 找到要拖入进去的节点
+          var slotTarget = currentNode.slots.length > 0 && currentNode.slots.find(function (item) {
+            return item.id === targetId;
+          });
+          var layoutPNode = currentNode.document.createNode(layoutPSchema);
+
+          // 是否为 aside slot
+          var isAsideSlot = slotTarget && ['aside'].indexOf(slotTarget._slotFor.key) > -1;
+          // 是否为需要被 P 包裹的 Slot
+          var isNeedPSlot = slotTarget && ['header', 'footer', 'nav'].indexOf(slotTarget._slotFor.key) > -1;
+          var wrapWithBlock = function wrapWithBlock(dragment, node, dropTargetName, blockLen) {
+            setTimeout(function () {
+              console.log("[" + dragment.componentName + "] to [" + dropTargetName + "] need to wrap with NextBlock > NextBlockCell > NextP [from NextPage2]");
+              var 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);
+          };
+          var wrapWithP = function wrapWithP(dragment, node, dropTargetName) {
+            setTimeout(function () {
+              // 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]");
+              var 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);
+          }
+
+          // 其他维持原状，不进行其他设置
+        }
+      }
     }
   }
 };
@@ -164,7 +284,22 @@ var snippets = [{
   screenshot: '',
   schema: {
     componentName: 'CustomDrawer',
-    props: {}
+    props: {
+      title: '抽屉',
+      placement: 'left',
+      isAutoContainer: true,
+      actions: [{
+        text: '确定',
+        action: 'submit',
+        style: 'primary',
+        type: 'submit'
+      }, {
+        text: '取消',
+        action: 'submit',
+        style: 'normal',
+        type: 'cancel'
+      }]
+    }
   }
 }];
 var _default = exports["default"] = (0, _extends2["default"])({}, CustomDrawerMeta, {

package/lowcode_lib/meta.js

@@ -110,7 +110,7 @@ function fillRealVersion(meta, packageName, version, basicLibraryVersion) {
     packageName = '@dckj-npm/dc-material';
   }
   if (version === void 0) {
-    version = '0.1.279';
+    version = '0.1.281';
   }
   if (basicLibraryVersion === void 0) {
     basicLibraryVersion = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dckj-npm/dc-material",
-  "version": "0.1.279",
+  "version": "0.1.281",
   "description": "dc低代码物料",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -106,7 +106,7 @@
   },
   "componentConfig": {
     "isComponentLibrary": true,
-    "materialSchema": "https://unpkg.com/@dckj-npm/dc-material@0.1.279/build/lowcode/assets-prod.json"
+    "materialSchema": "https://unpkg.com/@dckj-npm/dc-material@0.1.281/build/lowcode/assets-prod.json"
   },
   "lcMeta": {
     "type": "component"