@lcap/nasl 1.0.0-alpha.13 → 1.0.0-alpha.16

package/src/concepts/ViewElement__.ts

@@ -46,6 +46,7 @@ export interface ElementToVueOptions {
     getExtraParts?: (element?: ViewElement) => Array<string>;
     attrFormat?: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => string | false;
     finalCode?: boolean;
+    scopeList?: string[];
 }
 
 function transAstNodeToNaslNode(astNode: any, namespace?: string): any {
@@ -86,7 +87,8 @@ function transAstNodeToNaslNode(astNode: any, namespace?: string): any {
         }
     } else if (astNode.type === 'MemberExpression') {
         if (astNode.object?.name === '$global') {
-            node = transAstNodeToNaslNode(astNode.property, 'nasl.browser');
+            // 目前只有权限相关的
+            node = transAstNodeToNaslNode(astNode.property, 'nasl.auth');
         } else {
             node = {
                 concept: 'MemberExpression',
@@ -260,17 +262,19 @@ export class ViewElement extends BaseNode {
         super.subConstructor(source);
     }
 
+
+
     /**
      * 从父级删除该节点
      * @internal
      */
-    // _delete() {
-    //     let params: Params = null;
-    //     if (this.parentNode) {
-    //         params = (this.parentNode as any)?.__removeViewElement?.(this);
-    //     }
-    //     return params;
-    // }
+    _delete() {
+        let params: Params = null;
+        if (this.parentNode) {
+            params = (this.parentNode as any)?.__removeViewElement?.(this);
+        }
+        return params;
+    }
     /**
      * 设置页面元素名称
      */
@@ -296,7 +300,7 @@ export class ViewElement extends BaseNode {
         });
     }
 
-    getBindAttributeExistingNames(excludedList: Array<BindAttribute> = []) {
+        getBindAttributeExistingNames(excludedList: Array<BindAttribute> = []) {
         const excludedSet = new Set(excludedList);
         return (this.bindAttrs || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
     }
@@ -340,7 +344,7 @@ export class ViewElement extends BaseNode {
                 name: options,
             }, this, 'bindAttrs');
         } else if (options instanceof BindAttribute) {
-            options.delete(); // 同一实例不支持多处存在
+            options.ensureDelete(); // 同一实例不支持多处存在
             bindAttribute = options;
             Object.assign(bindAttribute, relationOptions);
         } else {
@@ -437,6 +441,7 @@ export class ViewElement extends BaseNode {
         return node;
     }
 
+
     getBindEventExistingNames(excludedList: Array<BindEvent> = []) {
         const excludedSet = new Set(excludedList);
         return (this.bindEvents || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
@@ -481,7 +486,7 @@ export class ViewElement extends BaseNode {
                 name: options,
             }, this, 'bindEvents');
         } else if (options instanceof BindEvent) {
-            options.delete(); // 同一实例不支持多处存在
+            options.ensureDelete(); // 同一实例不支持多处存在
             bindEvent = options;
             Object.assign(bindEvent, relationOptions);
         } else {
@@ -578,6 +583,7 @@ export class ViewElement extends BaseNode {
         return node;
     }
 
+
     getBindDirectiveExistingNames(excludedList: Array<BindDirective> = []) {
         const excludedSet = new Set(excludedList);
         return (this.bindDirectives || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
@@ -622,7 +628,7 @@ export class ViewElement extends BaseNode {
                 name: options,
             }, this, 'bindDirectives');
         } else if (options instanceof BindDirective) {
-            options.delete(); // 同一实例不支持多处存在
+            options.ensureDelete(); // 同一实例不支持多处存在
             bindDirective = options;
             Object.assign(bindDirective, relationOptions);
         } else {
@@ -719,6 +725,11 @@ export class ViewElement extends BaseNode {
         return node;
     }
 
+
+
+
+
+
     /**
     * 插入页面元素
     * @internal
@@ -755,7 +766,7 @@ export class ViewElement extends BaseNode {
                 name: options,
             }, this, 'children');
         } else if (options instanceof ViewElement) {
-            options.delete(); // 同一实例不支持多处存在
+            options.ensureDelete(); // 同一实例不支持多处存在
             viewElement = options;
             Object.assign(viewElement, relationOptions);
         } else {
@@ -852,6 +863,9 @@ export class ViewElement extends BaseNode {
         return node;
     }
 
+
+    
+
     /**
     * 删除元素绑定属性
     * @param name 元素绑定属性名称
@@ -900,6 +914,8 @@ export class ViewElement extends BaseNode {
         return params;
     }
 
+
+
     /**
     * 删除元素绑定事件
     * @param name 元素绑定事件名称
@@ -948,6 +964,8 @@ export class ViewElement extends BaseNode {
         return params;
     }
 
+
+
     /**
     * 删除元素指令
     * @param name 元素指令名称
@@ -996,6 +1014,8 @@ export class ViewElement extends BaseNode {
         return params;
     }
 
+
+
     /**
     * 删除页面元素
     * @param name 页面元素名称
@@ -1053,7 +1073,7 @@ export class ViewElement extends BaseNode {
     get parentAuth() {
         const _nameSpace = this.view.getNamespace();
         const mainViewName = _nameSpace.split('.')[2];
-        return this.app.views.find((item) => item.name === mainViewName)?.auth;
+        return this.view.parentNode.concept === 'App' ? this.view.auth : this.app.views.find((item) => item.name === mainViewName)?.auth;
     }
 
     getViewElementUniqueName(name = 'viewElement1') {
@@ -1092,8 +1112,9 @@ export class ViewElement extends BaseNode {
     }
 
     haveScope(node: ViewElement): boolean {
-        const dataSourcePcList = ['uGallery', 'uTableView', 'uListView', 'uGridView', 'uCalendarView', 'uListComponents', 'uSelect'];
-        const dataSourceH5List = ['vanListView', 'vanForComponents', 'lcapEchartsLine', 'lcapEchartsBar', 'lcapEchartsPie'];
+        // uGallery 没有子集不需要scope
+        const dataSourcePcList = ['uTableView', 'uListView', 'uGridView', 'uCalendarView', 'uListComponents', 'uSelect'];
+        const dataSourceH5List = ['vanRadioGroup', 'vanCheckboxGroup', 'vanListView', 'vanGridView', 'vanForComponents', 'lcapEchartsLine', 'lcapEchartsBar', 'lcapEchartsPie'];
         const dataSourceList = [...dataSourcePcList, ...dataSourceH5List];
         return dataSourceList.includes(node.toHump(node.tag));
     }
@@ -1135,7 +1156,11 @@ export class ViewElement extends BaseNode {
                         while (!haveScopeFlag && parentNode.concept !== 'View') {
                             if (this.haveScope(parentNode as ViewElement)) {
                                 // type d = nasl.ui.GetItemTypeFromDataSource<typeof listStructure>['tableRelation']
-                                const tsArr = expressionTs.split('.');
+                                const tsArr = expressionTs.replace('scope.item.', '').split('.');
+                                let itemStr = '';
+                                tsArr.forEach((item) => {
+                                    itemStr += `['${item}']`;
+                                });
                                 const parentbindAttrs = (parentNode as ViewElement).bindAttrs;
                                 if (parentbindAttrs && parentbindAttrs.length) {
                                     const parentAttr = parentbindAttrs.find((item) => item.name === 'data-source');
@@ -1143,7 +1168,7 @@ export class ViewElement extends BaseNode {
                                         let parentExpressionTs = parentAttr.expression.toEmbeddedTS(shiftState(state, code));
                                         parentExpressionTs = parentExpressionTs.replaceAll(' ', '');
                                         // 如果是逻辑就推导出逻辑类型
-                                        genericType = `nasl.ui.GetItemTypeFromDataSource<nasl.ui.GetItemTypeFromDataSource<typeof ${parentExpressionTs}>['${tsArr[tsArr.length - 1]}']>`;
+                                        genericType = `nasl.ui.GetItemTypeFromDataSource<nasl.ui.GetItemTypeFromDataSource<typeof ${parentExpressionTs}>${itemStr}>`;
                                     }
                                 }
                                 haveScopeFlag = true;
@@ -1184,7 +1209,7 @@ export class ViewElement extends BaseNode {
             hasAuth = !!this.bindDirectives.filter((directive) => directive.name === 'auth').length;
         }
         // 角色
-        if (hasAuth && Array.isArray(this.bindRoles)) {
+        if (Array.isArray(this.bindRoles) && this.bindRoles.length) {
             code += indent(state.tabSize + 2);
             code += 'roles = [\n';
             this.bindRoles.forEach((role) => {
@@ -1231,6 +1256,11 @@ export class ViewElement extends BaseNode {
                                 tabSize: state.tabSize + 2,
                             })) + ',\n';
                     }
+                    if (Array.isArray(attr.rules) && attr.rules.length) {
+                        attr.rules.forEach((item) => {
+                            code += item.toEmbeddedTS(shiftState(state, code)) + ',\n';
+                        });
+                    }
                 });
                 this.bindDirectives.forEach((directive) => {
                     if (directive.expression) {
@@ -1350,13 +1380,13 @@ export class ViewElement extends BaseNode {
             });
             astNode.children = [];
         }
-
         // 将 scopedSlots 合并到 children 中
         if (astNode.scopedSlots) {
             astNode.children = astNode.children || [];
             Object.keys(astNode.scopedSlots).forEach((key) => {
-                if (!astNode.children.find((child) => key === (child as compiler.ASTElement).slotTarget))
+                if (!astNode.children.find((child) => key === (child as compiler.ASTElement).slotTarget)) {
                     astNode.children.unshift(astNode.scopedSlots[key]);
+                }
             });
             delete astNode.scopedSlots;
         }
@@ -1377,6 +1407,12 @@ export class ViewElement extends BaseNode {
                 }
             }
             const tagName = astNode.tag.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            let newContext: any = {};
+            if (context) {
+                newContext = {
+                    ...context,
+                };
+            }
             element = new ViewElement({
                 tag: astNode.tag,
                 name: astNode.attrsMap.ref || view.getViewElementUniqueName(`${tagName}1`),
@@ -1384,45 +1420,43 @@ export class ViewElement extends BaseNode {
                 staticStyle: astNode.attrsMap.style,
                 slotTarget: astNode.slotTarget && json5.parse(astNode.slotTarget),
                 slotScope: astNode.slotScope === '_empty_' ? '' : astNode.slotScope,
-                children: astNode.children.map((item) => this._fromASTNode(item as compiler.ASTElement, context)) as unknown as Array<ViewElement>,
+                children: astNode.children.map((item) => this._fromASTNode(item as compiler.ASTElement, newContext)) as unknown as Array<ViewElement>,
             });
-
-            astNode.attrs
-                && astNode.attrs.forEach((oldAttr) => {
-                    let attr: BindAttribute;
-                    if (oldAttr.value === '""' && (oldAttr as any).end - (oldAttr as any).start === oldAttr.name.length) {
+            astNode?.attrs?.forEach((oldAttr) => {
+                let attr: BindAttribute;
+                if (oldAttr.value === '""' && (oldAttr as any).end - (oldAttr as any).start === oldAttr.name.length) {
+                    attr = new BindAttribute({
+                        type: 'static',
+                        name: oldAttr.name,
+                        value: 'true',
+                    });
+                } else {
+                    try {
+                        const tmp = json5.parse(oldAttr.value);
+                        const source: any = {
+                            type: typeof tmp === 'string' ? 'string' : 'static',
+                            name: oldAttr.name,
+                            value: typeof tmp === 'string' ? tmp : oldAttr.value,
+                        };
+                        if (oldAttr.name === 'rules') {
+                            source.rules = tmp?.split('|').map((ruleStr: string) => this._parseValidationRule(ruleStr.trim()));
+                        }
+                        attr = new BindAttribute(source);
+                    } catch (e) {
+                        const expression = <any> this._parseExpression(oldAttr.value);
                         attr = new BindAttribute({
-                            type: 'static',
+                            type: 'dynamic',
                             name: oldAttr.name,
-                            value: 'true',
+                            value: expression ? '' : oldAttr.value,
+                            expression,
                         });
-                    } else {
-                        try {
-                            const tmp = json5.parse(oldAttr.value);
-                            const source: any = {
-                                type: typeof tmp === 'string' ? 'string' : 'static',
-                                name: oldAttr.name,
-                                value: typeof tmp === 'string' ? tmp : oldAttr.value,
-                            };
-                            if (oldAttr.name === 'rules') {
-                                source.rules = tmp?.split('|').map((ruleStr: string) => this._parseValidationRule(ruleStr.trim()));
-                            }
-                            attr = new BindAttribute(source);
-                        } catch (e) {
-                            const expression = <any> this._parseExpression(oldAttr.value);
-                            attr = new BindAttribute({
-                                type: 'dynamic',
-                                name: oldAttr.name,
-                                value: expression ? '' : oldAttr.value,
-                                expression,
-                            });
-                            if (astNode.attrsMap[`:${attr.name}.sync`]) {
-                                attr.sync = true;
-                            }
+                        if (astNode.attrsMap[`:${attr.name}.sync`]) {
+                            attr.sync = true;
                         }
                     }
-                    element.addBindAttribute(attr);
-                });
+                }
+                element.addBindAttribute(attr);
+            });
 
             // compiler 处理:value.sync 时会加上update:value事件，需要过滤
             astNode.events
@@ -1438,18 +1472,17 @@ export class ViewElement extends BaseNode {
                             argsStr = matchArr[1];
                         }
                         let args: any[] = [];
-                        if (argsStr) {
-                            args = argsStr.split(',').map((argStr) => {
+                        const argStrs: string[] = argsStr.split(',');
+                        args = argStrs
+                            .filter((argStr) => !!argStr && argStr !== '_empty_')
+                            .map((argStr) => {
                                 const keyword = argStr.trim().split('.');
                                 return {
                                     concept: 'Argument',
                                     expression: genArgumentMemberExpression(keyword),
                                 };
                             });
-                        }
-                        const viewNamespace = view?.getNamespace();
-                        const viewName = `${view?.name}`;
-                        let calleeNamespace = `${viewNamespace}.${viewName}.logics`;
+                        let calleeNamespace = '';
                         if (calleeName) {
                             const namespaceArr = calleeName.split('.');
                             const start = namespaceArr.shift();
@@ -1504,15 +1537,12 @@ export class ViewElement extends BaseNode {
                 }));
             }
         } else if (astNode.type === 2) {
-            if (config.scope === 'h5') {
-                element = new ViewElement({
-                    tag: 'van-text',
-                });
-            } else {
-                element = new ViewElement({
-                    tag: 'u-text',
-                });
-            }
+            const tagName = config.scope === 'h5' ? 'van-text' : 'u-text';
+            const baseName = tagName.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            element = new ViewElement({
+                tag: tagName,
+                name: view.getViewElementUniqueName(`${baseName}1`),
+            });
             const value = astNode.text.match(/{{(.*?)}}/)[1].trim();
             const expression = <any> this._parseExpression(value);
             element.addBindAttribute(new BindAttribute({
@@ -1522,15 +1552,12 @@ export class ViewElement extends BaseNode {
                 expression,
             }));
         } else if (astNode.type === 3) {
-            if (config.scope === 'h5') {
-                element = new ViewElement({
-                    tag: 'van-text',
-                });
-            } else {
-                element = new ViewElement({
-                    tag: 'u-text',
-                });
-            }
+            const tagName = config.scope === 'h5' ? 'van-text' : 'u-text';
+            const baseName = tagName.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            element = new ViewElement({
+                tag: tagName,
+                name: view.getViewElementUniqueName(`${baseName}1`),
+            });
             element.addBindAttribute(new BindAttribute({
                 name: 'text',
                 type: 'string',
@@ -1557,24 +1584,14 @@ export class ViewElement extends BaseNode {
         let ast = compiler.compile(html, compilerOptions).ast;
         if (ast.tag === 'template' && !ast.slotTarget)
             ast = ast.children[0] as compiler.ASTElement;
-
-        let root: ViewElement;
-        utils.traverse((current) => {
-            // 处理 scopedSlots;
-            if (!current.parent)
-                root = this._fromASTNode(current.node, context);
-            else
-                (current.parent.children as any)[current.index] = this._fromASTNode(current.node, context);
-        }, { node: ast });
-        return root;
+        return this._fromASTNode(ast, context);
     }
 
     /**
      * 从模板生成规范的 ViewElement 对象
      */
     public static fromHTML(html: string, context?: ParseContext) {
-        const element = this.parse(html, context);
-        return element;
+        return this.parse(html, context);
     }
 
     /**
@@ -1602,7 +1619,7 @@ export class ViewElement extends BaseNode {
                         }
                     }
                     if ((attr as BindAttribute).type === 'dynamic' && !(element.tag === 'u-cascade-select' && attr.name === 'categories'))
-                        return defaultResult.replace(/:?(\w+)(?:.*?)="(.*)"/, (m, name, value) => {
+                        return defaultResult.replace(/:?([\w-]+)(?:.*?)="(.*)"/, (m, name, value) => {
                             try {
                                 const tempValue = json5.parse(value);
                                 if (typeof tempValue === 'boolean' || typeof tempValue === 'number') {
@@ -1613,7 +1630,12 @@ export class ViewElement extends BaseNode {
                                 if (apiOfAttr && !apiOfAttr.type.includes('string'))
                                     return '';
                             }
-                            return `${name}="{{ ${value.replace(/"/g, "'").replace(/\$utils\['(.+?)'\]/g, '$1')} }}"`;
+                            value = value
+                                .replace(/"/g, "'")
+                                .replace(/\$utils\['(.+?)'\]/g, '$1')
+                                .replace(/\$refs./g, 'elements.')
+                                .replace(/\$global./g, 'nasl.auth.');
+                            return `${name}="{{ ${value} }}"`;
                         });
                     else
                         return defaultResult;
@@ -1661,7 +1683,14 @@ export class ViewElement extends BaseNode {
      * 转换成 Vue 的模板格式
      */
     toVue(options?: ElementToVueOptions) {
-        options = Object.assign({
+        let scopeList: string[] = [];
+        if (Array.isArray(options?.scopeList)) {
+            scopeList = [...options?.scopeList];
+        }
+        if (this.slotScope) {
+            scopeList.unshift(this.slotScope);
+        }
+        const newOptions: ElementToVueOptions = Object.assign({
             indentStyle: 'space',
             tabSize: 4,
             indentLevel: 0,
@@ -1669,27 +1698,30 @@ export class ViewElement extends BaseNode {
             nodePathAttr: false,
             getExtraParts: () => [],
             attrFormat: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => defaultResult,
-        }, options);
-        const tabString = ' '.repeat(options.tabSize * options.indentLevel);
-        const insideTabString = ' '.repeat(options.tabSize * (options.indentLevel + 1));
+        }, options, {
+            scopeList,
+        });
+        const tabString = ' '.repeat(newOptions.tabSize * newOptions.indentLevel);
+        const insideTabString = ' '.repeat(newOptions.tabSize * (newOptions.indentLevel + 1));
         let shouldIndent = true;
         const content: string = !this.children ? '' : this.children
             .map((element) => {
-                const childOptions = Object.assign({}, options);
+                const childOptions = Object.assign({}, newOptions);
                 childOptions.indentLevel++;
                 return (shouldIndent ? '\n' + insideTabString : '') + element.toVue(childOptions);
             })
             .join('');
-        if (!content.length)
+        if (!content.length) {
             shouldIndent = false;
-
+        }
         const parts = [];
-        if (options.aslIdAttr) {
-            if (options.aslIdAttr === true)
-                options.aslIdAttr = 'asl-id';
-            parts.push(`${options.aslIdAttr}="${this.id}"`);
+        if (newOptions.aslIdAttr) {
+            if (newOptions.aslIdAttr === true) {
+                newOptions.aslIdAttr = 'asl-id';
+            }
+            parts.push(`${newOptions.aslIdAttr}="${this.id}"`);
         }
-        if (options.nodePathAttr) {
+        if (newOptions.nodePathAttr) {
             // 注入 asl 的 node-path
             parts.push(`vusion-node-path="${this.nodePath}"`);
         }
@@ -1700,11 +1732,10 @@ export class ViewElement extends BaseNode {
         this.staticStyle && parts.push(`style="${this.staticStyle}"`);
 
         [].concat(this.bindAttrs, this.bindDirectives, this.bindEvents).forEach((attr: BindAttribute | BindDirective | BindEvent) => {
-            const result = options.attrFormat(attr, this, attr.toVue(options));
+            const result = newOptions.attrFormat(attr, this, attr.toVue(newOptions));
             result && parts.push(result);
         });
-
-        options.getExtraParts(this).forEach((part) => parts.push(part));
+        newOptions.getExtraParts(this).forEach((part) => parts.push(part));
 
         let partsLength = 0;
         let partsString = '';
@@ -1724,22 +1755,46 @@ export class ViewElement extends BaseNode {
      * 从父级删除该节点
      * @internal
      */
-    _delete() {
-        let params: Params = null;
+    delete() {
+        super.delete();
         if (this.parentNode) {
-            params = (this.parentNode as any)?.__removeViewElement?.(this);
-            (this.view as any)?.removeExistingViewElement(this);
+            this.traverseChildren((ele: ViewElement) => {
+                (this.view as any)?.removeExistingViewElement(ele);
+            });
         }
-        return params;
     }
 
+    findElementByName(name: string): ViewElement {
+        return utils.traverse((current) => {
+            if (current.node.name === name)
+                return current.node;
+        }, { node: this });
+    }
+
+    findElementByTag(tag: string): ViewElement {
+        return utils.traverse((current) => {
+            if (current.node.tag === tag)
+                return current.node;
+        }, { node: this });
+    }
+
+    findElementByAttr(name: string, value: string): ViewElement {
+        return utils.traverse((current) => {
+            if (current.node.bindAttrs.some((attr) => attr.name === name && attr.value === value))
+                return current.node;
+        }, { node: this });
+    }
+
+    @excludedInJSON()
+    computedStyle: object = {};
+
     //================================================================================
     // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
     // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
     //================================================================================
 }
 
-classMap.ViewElement = ViewElement;
+classMap['ViewElement'] = ViewElement;
 export default ViewElement;
 //================================================================================
 // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑