@lcap/nasl 3.5.0-alpha.1 → 3.5.0-beta.2

package/out/concepts/ViewElement__.js

@@ -912,6 +912,9 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
     // 自动生成的代码已结束。下面可以手动编写。
     //================================================================================
+    get likeComponent() {
+        return this.view || this?.getAncestor('BusinessComponent');
+    }
     /* 主页面有没有权限 */
     get parentAuth() {
         const _nameSpace = this.view.getNamespace();
@@ -934,10 +937,10 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         return this.bindDirectives.find((directive) => directive.name === 'auth');
     }
     getViewElementUniqueName(name = 'viewElement1') {
-        return this.view?.getViewElementUniqueName(name);
+        return this.likeComponent?.getViewElementUniqueName(name);
     }
     getViewElementUniqueNameOld(name = 'viewElement1') {
-        return this.view?.getViewElementUniqueNameOld(name);
+        return this.likeComponent?.getViewElementUniqueNameOld(name);
     }
     static from(source, parentNode, parentKey) {
         const node = super.from(source, parentNode, parentKey);
@@ -974,8 +977,10 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         const self = this;
         let code = '';
         code += (0, translator_1.indent)((state?.tabSize || 0) + 1);
-        // 登录组件不翻译
-        if (self.toHump(self.tag) === 'lcapLogin' || self.staticClass === 'login-form') {
+        if (self.isCorrespondingBusinessComponent) {
+            code += `${self.name}: ${self.correspondingBusinessComponentNamespace}.${self.tag.replace('bs-', '')};\n`;
+        }
+        else if (self.toHump(self.tag) === 'lcapLogin' || self.staticClass === 'login-form') { // 登录组件不翻译
             code += `${self.name}: nasl.ui.div<any>;\n`;
         }
         else if (self.tag === 'u-table-view-column-dynamic') {
@@ -1190,9 +1195,32 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
         return code;
     }
+    // 获取端类型
+    get frontendType() {
+        return this.getAncestor('FrontendType');
+    }
+    // 对应业务组件
+    get isCorrespondingBusinessComponent() {
+        return this.tag.startsWith('bs-');
+    }
+    // 对应的业务组件的Namespace
+    get correspondingBusinessComponentNamespace() {
+        return `${this.frontendType?.getNamespace()}.${this.frontendType?.name}.businessComponents`;
+    }
+    // 获取对应的业务组件
+    get correspondingBusinessComponent() {
+        if (this.isCorrespondingBusinessComponent) {
+            // 端下的业务组件
+            const businessComponents = this.frontendType?.businessComponents;
+            const businessComponent = businessComponents.find((businessComponent) => {
+                return `bs-${businessComponent?.name}` === this.tag;
+            });
+            return businessComponent;
+        }
+    }
     *toEmbeddedTS(state = (0, translator_1.createCompilerState)(), parentLevel) {
         const self = this;
-        const { parentNode, app, tag, staticClass, name, bindDirectives, bindRoles, bindEvents, children } = self;
+        const { parentNode, app, tag, staticClass, name, bindRoles, bindEvents, children } = self;
         const chineseTsName = (name) => {
             let tsName = name;
             // 匹配所有特殊字符都转为_
@@ -1259,8 +1287,12 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             code += '},\n';
             return code;
         }
+        let namespace = `nasl.ui.${self.toHump(tag)}`;
+        if (self.isCorrespondingBusinessComponent) {
+            namespace = `${self.correspondingBusinessComponentNamespace}.${self.tag.replace('bs-', '')}`;
+        }
         // 后面那个name是为了查找引用的时候用的
-        let code = `new nasl.ui.${self.toHump(tag)}${self.getTypeArgmentsStr(state)}({name: __elements.${name},\n`;
+        let code = `new ${namespace}${self.getTypeArgmentsStr(state)}({name: __elements.${name},\n`;
         // 是否开启权限
         // const hasAuth = Array.isArray(bindDirectives)
         //     ? !!bindDirectives.filter((directive) => directive.name === 'auth').length
@@ -1290,8 +1322,19 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         if (Array.isArray(children)) {
             code += (0, translator_1.indent)((state?.tabSize || 0) + 1);
             if (Array.isArray(self.bindAttrs)) {
-                code += `bindAttr: () => [\n`;
+                code += `bindAttr: `;
+                if (self.isCorrespondingBusinessComponent) {
+                    code += `{\n`;
+                }
+                else {
+                    code += `() => [\n`;
+                }
                 yield* (0, time_slicing_1.wrapForEachToGenerator)(self.bindAttrs, function* warpForEachGenerator(attr) {
+                    // 过滤自由布局的key
+                    const shouldFilter = self.isCorrespondingBusinessComponent && !(name === 'key' && !attr.expression);
+                    if (shouldFilter) {
+                        return;
+                    }
                     code += (yield* attr.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 }))) + ',\n';
                 });
                 yield* (0, time_slicing_1.wrapForEachToGenerator)(self.bindDirectives, function* warpForEachGenerator(directive) {
@@ -1300,7 +1343,13 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 yield* (0, time_slicing_1.wrapForEachToGenerator)(self.bindStyles, function* warpForEachGenerator(bindStyle) {
                     code += (yield* bindStyle.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 }))) + ',\n';
                 });
-                code += (0, translator_1.indent)((state?.tabSize || 0) + 2) + '],\n';
+                code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
+                if (self.isCorrespondingBusinessComponent) {
+                    code += '},\n';
+                }
+                else {
+                    code += '],\n';
+                }
             }
             // 如果子集中有插槽的就
             if (children.find((item) => item.tag === 'template' && item.slotTarget)) {
@@ -1354,7 +1403,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         code += (0, translator_1.indent)(state?.tabSize || 0) + '})';
         // 顶层元素是单独的表达式
-        if (parentNode.concept === 'View') {
+        if (parentNode.concept === 'View' || asserts.isBusinessComponent(parentNode)) {
             code += ';\n';
         }
         else {
@@ -1445,9 +1494,17 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 delete node.i18nKey;
             }
         }, { node: element }, { mode: 'anyObject', excludedKeySet: element.JSON_EXCLUDED_KEYS });
-        this.view.existingViewElement.clear();
+        this.likeComponent?.existingViewElement.clear();
         return element;
     }
+    setTag(tag) {
+        const object = {
+            tag,
+        };
+        this.update({
+            ...object,
+        });
+    }
     // 递归遍历组件
     traverseChildren(cb) {
         utils.traverse((current) => {
@@ -1771,8 +1828,10 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
      * 转换成设计器中使用的 Vue 文件
      * @param options
      */
-    toDesignerVue() {
+    toDesignerVue(options) {
         return this.toVue({
+            isRoot: options?.isRoot,
+            asCompontent: options?.asCompontent,
             finalCode: false,
             nodePathAttr: true,
             attrFormat: (attr, element, defaultResult) => {
@@ -1893,12 +1952,15 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             },
         });
     }
+    isLikeComponent(node) {
+        return ['View', 'BusinessComponent'].includes(node?.concept);
+    }
     // 获取currentList
     getCurrentList() {
         const argsList = [];
         let parent = this.parentNode;
         let index = 0;
-        while (parent && parent.concept !== 'View') {
+        while (parent && !this.isLikeComponent(parent)) {
             if (parent.slotScope) {
                 argsList.push(index === 0 ? 'current' : 'current' + index);
                 index++;
@@ -1933,10 +1995,75 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         return null;
     }
+    get businessComponent() {
+        return this.getAncestor('BusinessComponent');
+    }
     /**
      * 转换成 Vue 的模板格式
      */
     toVue(options) {
+        const { finalCode, asCompontent } = options || {};
+        const parts = [];
+        if (finalCode === false) {
+            if (this.tag === 'slot') {
+                if (asCompontent) {
+                    return `<div vusion-slot-name="${this.name}">
+            <slot name="${this.name}">
+              <div s-empty="true" style="background: #f7f8fa;
+                border: 1px dashed #c3c3c3;
+                text-align: center;
+                color: #999;
+                min-height: 32px;
+                min-width: 32px;
+                width: 100%;
+                align-items: center;
+                display: inline-flex;
+                justify-content: center;">
+                +
+              </div>
+            </slot>
+          </div>`;
+                }
+                else {
+                    return `<div vusion-node-path="${this.nodePath}"
+            style="background: linear-gradient(-45deg,#fff 25%,#f3f5fa 0,#f3f5fa 50%,#fff 0,#fff 75%,#f3f5fa 0);
+            background-size: 45px 45px;
+            background-repeat: repeat;
+            line-height: 32px;
+            min-height: 32px;
+            color: var(--font-second-color);
+            text-align: center;">
+            组件占位，可在使用业务组件时插入任意组件
+          </div>`;
+                }
+            }
+            else if (this.businessComponent?.name === this.tag) {
+                // 组件内部使用自身的情况
+                return `<div vusion-node-path="${this.nodePath}"
+          style="background: linear-gradient(-45deg,#fff 25%,#f3f5fa 0,#f3f5fa 50%,#fff 0,#fff 75%,#f3f5fa 0);
+          background-size: 45px 45px;
+          background-repeat: repeat;
+          line-height: 32px;
+          min-height: 32px;
+          color: var(--font-second-color);
+          text-align: center;">
+          在组件内部使用自身可能会导致循环引用，请谨慎使用
+        </div>`;
+            }
+            const isRoot = options.isRoot;
+            if (isRoot && !options?.asCompontent) {
+                parts.push('type="root"');
+                if (this.frontendType?.kind === 'h5') {
+                    parts.push('class="l-root-h5"');
+                }
+                else {
+                    parts.push('style="height:100%; --custom-start: auto; min-height: 200px;"');
+                }
+            }
+        }
+        if (options) {
+            options.isRoot = false;
+        }
         let currentList = [];
         if (Array.isArray(options?.currentList)) {
             currentList = [...options?.currentList];
@@ -1978,7 +2105,6 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         if (!content.length) {
             shouldIndent = false;
         }
-        const parts = [];
         if (newOptions.aslIdAttr) {
             if (newOptions.aslIdAttr === true) {
                 newOptions.aslIdAttr = 'asl-id';
@@ -2060,7 +2186,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         super.delete();
         if (this.parentNode) {
             this.traverseChildren((ele) => {
-                this.view?.removeExistingViewElement(ele);
+                this.likeComponent?.removeExistingViewElement(ele);
             });
         }
     }
@@ -2086,7 +2212,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         let current = 'current';
         let parent = this.parentNode;
         let index = 0;
-        while (parent && parent.concept !== 'View') {
+        while (parent && !this.isLikeComponent(parent)) {
             if (parent.slotScope) {
                 index++;
             }