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

package/out/concepts/ViewElement__.js

@@ -277,87 +277,46 @@ function transAstNodeToNaslTypeNode(astNode, namespace) {
 }
 const decorators_1 = require("../decorators");
 const utils = __importStar(require("../utils"));
-const Assert = __importStar(require("./utils/asserts"));
+const asserts = __importStar(require("./utils/asserts"));
 const uuid_1 = require("uuid");
 const BaseNode_1 = __importDefault(require("../common/BaseNode"));
 /**
  * 页面元素
  */
-let ViewElement = ViewElement_1 = 
-// @ts-ignore
-class ViewElement extends BaseNode_1.default {
-    /** 类名 */
-    static ConceptName = 'ViewElement';
-    /** 继承链 */
-    static inheritanceChain = ['BaseNode'];
+let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     /**
-     * 产品概念
-     */
-    concept;
-    /**
-     * 类型
-     */
-    // @ts-ignore
-    type;
-    /**
-     * 元素标签
-     */
-    // @ts-ignore
-    tag;
-    /**
-     * 页面元素名称
-     */
-    // @ts-ignore
-    name;
-    /**
-     * 静态 class 名
-     */
-    // @ts-ignore
-    staticClass;
-    /**
-     * 静态 style
-     */
-    // @ts-ignore
-    staticStyle;
-    /**
-     * 权限资源描述
-     */
-    // @ts-ignore
-    authDescription;
-    /**
-     * 插槽目标
-     */
-    // @ts-ignore
-    slotTarget;
-    /**
-     * 插槽 scope 表达式
-     */
-    // @ts-ignore
-    slotScope;
-    /**
-     * 元素绑定属性列表
-     */
-    bindAttrs = [];
-    /**
-     * 元素绑定事件列表
-     */
-    bindEvents = [];
-    /**
-     * 元素指令列表
-     */
-    bindDirectives = [];
-    /**
-     * 绑定的角色
-     */
-    bindRoles = [];
-    /**
-     * 元素绑定样式列表
-     */
-    bindStyles = [];
-    /**
-     * 子元素列表
+     * @param source 需要合并的部分参数
      */
-    children = [];
+    constructor(source) {
+        source = Object.assign({}, ViewElement_1.getDefaultOptions(), source);
+        super(source);
+        /**
+         * 元素绑定属性列表
+         */
+        this.bindAttrs = [];
+        /**
+         * 元素绑定事件列表
+         */
+        this.bindEvents = [];
+        /**
+         * 元素指令列表
+         */
+        this.bindDirectives = [];
+        /**
+         * 绑定的角色
+         */
+        this.bindRoles = [];
+        /**
+         * 元素绑定样式列表
+         */
+        this.bindStyles = [];
+        /**
+         * 子元素列表
+         */
+        this.children = [];
+        this.computedStyle = {};
+        super.subConstructor(source);
+    }
     /**
      * 祖先 View
      */
@@ -382,14 +341,6 @@ class ViewElement extends BaseNode_1.default {
     get frontend() {
         return this.getAncestor('Frontend');
     }
-    /**
-     * @param source 需要合并的部分参数
-     */
-    constructor(source) {
-        source = Object.assign({}, ViewElement_1.getDefaultOptions(), source);
-        super(source);
-        super.subConstructor(source);
-    }
     /**
      * 从父级删除该节点
      * @internal
@@ -461,7 +412,7 @@ class ViewElement extends BaseNode_1.default {
                 name: options,
             }, this, 'bindAttrs');
         }
-        else if (Assert.isBindAttribute(options)) {
+        else if (asserts.isBindAttribute(options)) {
             options.ensureDelete(); // 同一实例不支持多处存在
             bindAttribute = options;
             Object.assign(bindAttribute, relationOptions);
@@ -522,7 +473,7 @@ class ViewElement extends BaseNode_1.default {
                 name: options,
             }, this, 'bindEvents');
         }
-        else if (Assert.isBindEvent(options)) {
+        else if (asserts.isBindEvent(options)) {
             options.ensureDelete(); // 同一实例不支持多处存在
             bindEvent = options;
             Object.assign(bindEvent, relationOptions);
@@ -585,7 +536,7 @@ class ViewElement extends BaseNode_1.default {
                 name: options,
             }, this, 'bindDirectives');
         }
-        else if (Assert.isBindDirective(options)) {
+        else if (asserts.isBindDirective(options)) {
             options.ensureDelete(); // 同一实例不支持多处存在
             bindDirective = options;
             Object.assign(bindDirective, relationOptions);
@@ -646,7 +597,7 @@ class ViewElement extends BaseNode_1.default {
                 name: options,
             }, this, 'bindStyles');
         }
-        else if (Assert.isBindStyle(options)) {
+        else if (asserts.isBindStyle(options)) {
             options.ensureDelete(); // 同一实例不支持多处存在
             bindStyle = options;
             Object.assign(bindStyle, relationOptions);
@@ -700,7 +651,7 @@ class ViewElement extends BaseNode_1.default {
                 name: options,
             }, this, 'children');
         }
-        else if (Assert.isViewElement(options)) {
+        else if (asserts.isViewElement(options)) {
             options.ensureDelete(); // 同一实例不支持多处存在
             viewElement = options;
             Object.assign(viewElement, relationOptions);
@@ -961,6 +912,9 @@ class ViewElement extends BaseNode_1.default {
     // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
     // 自动生成的代码已结束。下面可以手动编写。
     //================================================================================
+    get likeComponent() {
+        return this.view || this?.getAncestor('BusinessComponent');
+    }
     /* 主页面有没有权限 */
     get parentAuth() {
         const _nameSpace = this.view.getNamespace();
@@ -983,12 +937,11 @@ 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 TAG_NAME_PREFIX_REG = /^([lieu]|van)[-_]/;
     static from(source, parentNode, parentKey) {
         const node = super.from(source, parentNode, parentKey);
         if (!node.name) {
@@ -1024,8 +977,10 @@ 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') {
@@ -1100,7 +1055,7 @@ class ViewElement extends BaseNode_1.default {
         code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
         let levelIndex = parentLevel || 0;
         code += `${self.name}: () => {\n`;
-        if (self.tag === 'template' && self.haveScope() && Assert.isViewElement(self.parentNode)) {
+        if (self.tag === 'template' && self.haveScope() && asserts.isViewElement(self.parentNode)) {
             const currentType = self.parentNode.tag === 'u-table-view-column-dynamic' ? 'CurrentDynamic' : 'Current';
             const _this = self.parentNode;
             let genericity = '';
@@ -1109,7 +1064,7 @@ class ViewElement extends BaseNode_1.default {
             }
             else {
                 let targetNode = _this;
-                while (!targetNode.__tsVariableDataSourceTypeName && Assert.isViewElement(targetNode?.parentNode)) {
+                while (!targetNode.__tsVariableDataSourceTypeName && asserts.isViewElement(targetNode?.parentNode)) {
                     targetNode = targetNode.parentNode;
                 }
                 genericity += `<${targetNode.__tsVariableDataSourceTypeName ?? 'any'}>`;
@@ -1122,9 +1077,9 @@ class ViewElement extends BaseNode_1.default {
         if (attr && attr.expression) {
             const datasourceName = `datasourceName${self.name}`;
             self.__tsVariableDataSourceTypeName = datasourceName;
-            if (Assert.isMemberExpression(attr.expression) ||
-                Assert.isIdentifier(attr.expression) ||
-                Assert.isCallLogic(attr.expression)) {
+            if (asserts.isMemberExpression(attr.expression) ||
+                asserts.isIdentifier(attr.expression) ||
+                asserts.isCallLogic(attr.expression)) {
                 const extraParams = {
                     tabSize: 4,
                     inline: true,
@@ -1214,9 +1169,9 @@ class ViewElement extends BaseNode_1.default {
                 if (attr && attr.expression) {
                     const datasourceName = `datasourceName${element.name}`;
                     element.__tsDataSourceTypeName = datasourceName;
-                    if (Assert.isMemberExpression(attr.expression) ||
-                        Assert.isIdentifier(attr.expression) ||
-                        Assert.isCallLogic(attr.expression)) {
+                    if (asserts.isMemberExpression(attr.expression) ||
+                        asserts.isIdentifier(attr.expression) ||
+                        asserts.isCallLogic(attr.expression)) {
                         const extraParams = {
                             tabSize: 4,
                             inline: true,
@@ -1240,9 +1195,32 @@ 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;
             // 匹配所有特殊字符都转为_
@@ -1309,8 +1287,12 @@ 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
@@ -1340,8 +1322,19 @@ 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) {
@@ -1350,7 +1343,13 @@ 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)) {
@@ -1404,7 +1403,7 @@ 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 {
@@ -1495,9 +1494,17 @@ 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) => {
@@ -1821,8 +1828,10 @@ 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) => {
@@ -1852,7 +1861,7 @@ class ViewElement extends BaseNode_1.default {
                         }
                     }
                     if (attr.name === 'text' &&
-                        Assert.isMemberExpression(attr?.expression) &&
+                        asserts.isMemberExpression(attr?.expression) &&
                         attr?.expression?.object?.namespace?.startsWith('elements.') &&
                         attr?.expression?.object?.namespace?.endsWith('.property')) {
                         return `${attr.name}="{{ ${attr.expression.toUI()} }}"`;
@@ -1943,12 +1952,15 @@ 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++;
@@ -1983,10 +1995,75 @@ 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];
@@ -2028,7 +2105,6 @@ class ViewElement extends BaseNode_1.default {
         if (!content.length) {
             shouldIndent = false;
         }
-        const parts = [];
         if (newOptions.aslIdAttr) {
             if (newOptions.aslIdAttr === true) {
                 newOptions.aslIdAttr = 'asl-id';
@@ -2055,7 +2131,7 @@ class ViewElement extends BaseNode_1.default {
             .forEach((attr) => {
             const result = newOptions.attrFormat(attr, this, attr?.toVue(newOptions));
             // v-auth v-if 都翻译成 v-if
-            if (Assert.isBindDirective(attr) && ['if', 'auth'].includes(attr.name) && result !== false) {
+            if (asserts.isBindDirective(attr) && ['if', 'auth'].includes(attr.name) && result !== false) {
                 const expr = result.replace(/v-(if|auth)="(.*)"/, (match, p1, p2) => p2);
                 if (expr)
                     vIfs.push(attr.name === 'if' ? expr : `$auth.has(${expr})`);
@@ -2110,7 +2186,7 @@ class ViewElement extends BaseNode_1.default {
         super.delete();
         if (this.parentNode) {
             this.traverseChildren((ele) => {
-                this.view?.removeExistingViewElement(ele);
+                this.likeComponent?.removeExistingViewElement(ele);
             });
         }
     }
@@ -2132,12 +2208,11 @@ class ViewElement extends BaseNode_1.default {
                 return current.node;
         }, { node: this });
     }
-    computedStyle = {};
     getCurrentName() {
         let current = 'current';
         let parent = this.parentNode;
         let index = 0;
-        while (parent && parent.concept !== 'View') {
+        while (parent && !this.isLikeComponent(parent)) {
             if (parent.slotScope) {
                 index++;
             }
@@ -2282,6 +2357,11 @@ class ViewElement extends BaseNode_1.default {
         });
     }
 };
+/** 类名 */
+ViewElement.ConceptName = 'ViewElement';
+/** 继承链 */
+ViewElement.inheritanceChain = ['BaseNode'];
+ViewElement.TAG_NAME_PREFIX_REG = /^([lieu]|van)[-_]/;
 __decorate([
     (0, decorators_1.property)('concept')
 ], ViewElement.prototype, "concept", void 0);
@@ -2370,7 +2450,6 @@ __decorate([
 ], ViewElement.prototype, "computedStyle", void 0);
 ViewElement = ViewElement_1 = __decorate([
     (0, decorators_1.concept)('页面元素')
-    // @ts-ignore
 ], ViewElement);
 exports.ViewElement = ViewElement;
 exports.default = ViewElement;