@lcap/nasl-concepts 4.3.0-beta.9 → 4.3.0-creator.1

package/out/concepts/ViewElement__.js

@@ -1613,7 +1613,7 @@ let ViewElement = class ViewElement extends Annotatable__1.default {
             code += event.toNaturalTS((0, nasl_translator_1.shiftState)(state, code, {
                 tabSize: state.tabSize + 1,
             }));
-            code += ',\n';
+            code += '\n';
         });
         if (this.children.find((item) => item.tag === 'template' && item.slotTarget)) {
             const defaultArr = [];
@@ -1621,7 +1621,8 @@ let ViewElement = class ViewElement extends Annotatable__1.default {
             this.children.forEach((element) => {
                 if (element.tag === 'template') {
                     if (element.children.length) {
-                        code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}slot${utils.firstUpperCase((0, utils_2.kebab2Camel)(element.slotTarget || ''))}: (${element.slotScope || ''}) => [\n`;
+                        const slotScopeName = this.getCurrentName();
+                        code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}slot${utils.firstUpperCase((0, utils_2.kebab2Camel)(element.slotTarget || ''))}: (${slotScopeName || ''}) => [\n`;
                         element.children.forEach((element) => {
                             code += element.toNaturalTS((0, nasl_translator_1.shiftState)(state, code, {
                                 tabSize: state.tabSize + 2,
@@ -1663,6 +1664,110 @@ let ViewElement = class ViewElement extends Annotatable__1.default {
         code += `${(0, nasl_translator_1.indent)(state.tabSize)}})`;
         return code;
     }
+    toNaturalTSX(state = (0, nasl_translator_1.createCompilerState)(), parentLevel) {
+        let code = '';
+        const tagName = (0, utils_2.kebab2Camel)(this.tag);
+        code += `<${tagName} ref="${this.name}"`;
+        this.bindDirectives.forEach((directive) => {
+            const subCode = directive.toNaturalTSX((0, nasl_translator_1.shiftState)(state, code, {
+                tabSize: state.tabSize + 1,
+                inline: false,
+            }));
+            if (subCode.trim())
+                code += '\n' + subCode;
+        });
+        this.bindAttrs.forEach((attr) => {
+            const subCode = attr.toNaturalTSX((0, nasl_translator_1.shiftState)(state, code, {
+                tabSize: state.tabSize + 1,
+                inline: false,
+            }));
+            if (subCode.trim())
+                code += '\n' + subCode;
+        });
+        this.bindEvents.forEach((event) => {
+            code += '\n' + event.toNaturalTSX((0, nasl_translator_1.shiftState)(state, code, {
+                tabSize: state.tabSize + 1,
+                inline: false,
+            }));
+        });
+        if (this.staticStyle) {
+            code += `\n${(0, nasl_translator_1.indent)(state.tabSize + 1)}style="${this.staticStyle}"`;
+        }
+        if (this.bindStyles && this.bindStyles.length) {
+            code += `\n${(0, nasl_translator_1.indent)(state.tabSize + 1)}$dynamicStyle={ {`;
+            this.bindStyles.forEach((style) => {
+                const subCode = style.toNaturalTS((0, nasl_translator_1.shiftState)(state, code, {
+                    tabSize: state.tabSize + 2,
+                    inline: false,
+                }));
+                if (subCode.trim())
+                    code += '\n' + subCode + ',';
+            });
+            code += code.endsWith('{') ? '' : '\n' + (0, nasl_translator_1.indent)(state.tabSize + 1);
+            code += `} }`;
+        }
+        if (this.cssRules && this.cssRules.length) {
+            code += `\n${(0, nasl_translator_1.indent)(state.tabSize + 1)}$extraStyle={\``;
+            code += this.cssRules.map((cssRule) => cssRule.toNaturalTS((0, nasl_translator_1.shiftState)(state, code, { inline: true }))).join('\n');
+            code += '`}';
+        }
+        const defaultArr = [];
+        if (this.children.find((item) => item.tag === 'template' && item.slotTarget)) {
+            // 先把插槽翻译了
+            this.children.forEach((element) => {
+                if (element.tag === 'template' && !(element.slotTarget === 'default' && !element.slotScope)) {
+                    if (element.children.length) {
+                        const slotScopeName = this.getCurrentName();
+                        code += '\n' + `${(0, nasl_translator_1.indent)(state.tabSize + 1)}slot${utils.firstUpperCase((0, utils_2.kebab2Camel)(element.slotTarget || ''))}={(${slotScopeName || ''}) => `;
+                        if (element.children.length === 1) {
+                            code += typeof element.children[0]?.toNaturalTSX === 'function' ? element.children[0].toNaturalTSX((0, nasl_translator_1.shiftState)(state, code, {
+                                tabSize: state.tabSize + 1,
+                                inline: true,
+                            })) : '';
+                        }
+                        else { // 为多个元素
+                            code += `<>\n`;
+                            element.children.forEach((element) => {
+                                code += typeof element?.toNaturalTSX === 'function' ? element.toNaturalTSX((0, nasl_translator_1.shiftState)(state, code, {
+                                    tabSize: state.tabSize + 2,
+                                    inline: false,
+                                })) : '';
+                                code += '\n';
+                            });
+                            code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}</>`;
+                        }
+                        code += `}`;
+                    }
+                }
+                else if (element.tag === 'template' && element.slotTarget === 'default') {
+                    defaultArr.push(...element.children);
+                }
+                else {
+                    defaultArr.push(element);
+                }
+            });
+        }
+        else {
+            defaultArr.push(...this.children);
+        }
+        // 翻译其余的子集
+        const umodalSpecialCase = ['u-modal', 'UModal'].includes(this.tag) && this.children.find((item) => item.tag === 'template' && item.slotTarget == 'body');
+        if (defaultArr.length && !umodalSpecialCase) {
+            code += '>\n';
+            defaultArr.forEach((element) => {
+                code += typeof element?.toNaturalTSX === 'function' ? element?.toNaturalTSX((0, nasl_translator_1.shiftState)(state, code, {
+                    tabSize: state.tabSize + 1,
+                    inline: false,
+                })) : '';
+                code += '\n';
+            });
+            code += (0, nasl_translator_1.indent)(state.tabSize) + `</${tagName}>`;
+        }
+        else {
+            code += ' />';
+        }
+        return code;
+    }
     toTextualNASL(state = (0, nasl_translator_1.createCompilerState)(), parentLevel) {
         let code = '';
         code += (0, nasl_translator_1.createDecoratorCode)(state, this, ['name']);
@@ -1684,7 +1789,8 @@ let ViewElement = class ViewElement extends Annotatable__1.default {
             // 先把插槽翻译了
             this.children.forEach((element) => {
                 if (element.tag === 'template' && element.children.length) {
-                    code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}slot${utils.firstUpperCase((0, utils_2.kebab2Camel)(element.slotTarget || ''))} = { (${element.slotScope || ''}) => [\n`;
+                    const slotScopeName = this.getCurrentName();
+                    code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}slot${utils.firstUpperCase((0, utils_2.kebab2Camel)(element.slotTarget || ''))} = { (${slotScopeName || ''}) => [\n`;
                     // code += element.toTextualNASL(
                     //   shiftState(state, code, {
                     //     tabSize: state.tabSize + 2,
@@ -2707,6 +2813,9 @@ let ViewElement = class ViewElement extends Annotatable__1.default {
             let directString = annoDirective?.toVue();
             directString && parts.push(directString);
         });
+        if (this.isProcessForm()) {
+            vIfs.push('false');
+        }
         if (vIfs.length === 1) {
             parts.push(`v-if="${vIfs[0]}"`);
         }
@@ -2871,6 +2980,9 @@ let ViewElement = class ViewElement extends Annotatable__1.default {
                 return '';
             }
         }
+        if (this.isProcessForm()) {
+            return `<div id="dynamicRenderContainer"></div>\n${htmlContent}`;
+        }
         return htmlContent;
     }
     /**
@@ -3251,6 +3363,9 @@ __decorate([
 __decorate([
     (0, nasl_translator_1.withSourceMap)()
 ], ViewElement.prototype, "toNaturalTS", null);
+__decorate([
+    (0, nasl_translator_1.withSourceMap)()
+], ViewElement.prototype, "toNaturalTSX", null);
 __decorate([
     (0, nasl_translator_1.withSourceMap)()
 ], ViewElement.prototype, "toTextualNASL", null);