@lcap/nasl 3.4.0-beta.3 → 3.4.0-beta.4

package/out/concepts/BindStyle__.js

@@ -1,364 +1,368 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-var BindStyle_1;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BindStyle = void 0;
-const translator_1 = require("../translator");
-const decorators_1 = require("../decorators");
-const utils = __importStar(require("../utils"));
-const BaseNode_1 = __importDefault(require("../common/BaseNode"));
-const LogicItem__1 = __importDefault(require("./LogicItem__"));
-/**
- * 元素绑定样式
- */
-let BindStyle = class BindStyle extends BaseNode_1.default {
-    static { BindStyle_1 = this; }
-    /** 类名 */
-    static ConceptName = 'BindStyle';
-    /**
-     * 产品概念
-     */
-    concept;
-    /**
-     * 元素绑定样式名称
-     */
-    // @ts-ignore
-    name;
-    /**
-     * 属性表达式
-     */
-    // @ts-ignore
-    expression;
-    /**
-     * 草稿态
-     */
-    playground = [];
-    /**
-     * 祖先 ViewElement
-     */
-    get viewElement() {
-        return this.getAncestor('ViewElement');
-    }
-    /**
-     * 祖先 View
-     */
-    get view() {
-        return this.getAncestor('View');
-    }
-    /**
-     * 祖先 Module
-     */
-    get module() {
-        return this.getAncestor('Module');
-    }
-    /**
-     * 祖先 App
-     */
-    get app() {
-        return this.getAncestor('App');
-    }
-    /**
-     * 祖先 Frontend
-     */
-    get frontend() {
-        return this.getAncestor('Frontend');
-    }
-    /**
-     * @param source 需要合并的部分参数
-     */
-    constructor(source) {
-        source = Object.assign({}, BindStyle_1.getDefaultOptions(), source);
-        super(source);
-        super.subConstructor(source);
-    }
-    static from(source, parentNode, parentKey) {
-        return super.from(source, parentNode, parentKey);
-    }
-    /**
-     * 从父级删除该节点
-     * @internal
-     */
-    _delete() {
-        let params = null;
-        if (this.parentNode) {
-            params = this.parentNode?.__removeBindStyle?.(this);
-        }
-        return params;
-    }
-    /**
-     * 设置属性表达式
-     */
-    setExpression(expression) {
-        expression._delete();
-        const relationOptions = { parentNode: this, parentKey: 'expression' };
-        Object.assign(expression, relationOptions);
-        const object = {
-            expression,
-        };
-        this.update({
-            ...object,
-        });
-    }
-    _insertItemInPlaygroundAt(options, index) {
-        const logicItemOptions = {};
-        const relationOptions = { parentNode: this, parentKey: 'playground' };
-        let logicItem;
-        if (options instanceof LogicItem__1.default) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            logicItem = options;
-            Object.assign(logicItem, relationOptions);
-        }
-        else {
-            logicItem = LogicItem__1.default.from({
-                ...logicItemOptions,
-                ...options,
-            }, this, 'playground');
-        }
-        this.playground.splice(index, 0, logicItem);
-        return logicItem;
-    }
-    insertItemInPlaygroundAt(options, index) {
-        const node = this._insertItemInPlaygroundAt(options, index);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'playground',
-        });
-        return node;
-    }
-    _addItemInPlayground(options) {
-        const index = this.playground.length;
-        return this._insertItemInPlaygroundAt(options, index);
-    }
-    addItemInPlayground(options) {
-        const node = this._addItemInPlayground(options);
-        const index = this.playground.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'playground',
-        });
-        return node;
-    }
-    removeExpression(options) {
-        let expression;
-        if (typeof options === 'string') {
-            expression = this.expression;
-            if (!expression) {
-                throw new Error('找不到逻辑项 ' + options);
-            }
-        }
-        else {
-            expression = options;
-        }
-        return expression.delete();
-    }
-    removeItemInPlayground(options) {
-        let logicItem = options;
-        return logicItem.delete();
-    }
-    __removeLogicItem(logicItem) {
-        const parentKey = logicItem.parentKey;
-        const params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: logicItem,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            // @ts-ignore
-            const t = this.__v_raw || this;
-            // @ts-ignore
-            const n = logicItem.__v_raw || logicItem;
-            if (Array.isArray(t[parentKey])) {
-                const index = t[parentKey].indexOf(n);
-                ~index && this[parentKey].splice(index, 1);
-                params.index = index;
-            }
-            else if (t[parentKey] === n) {
-                params.index = 0;
-                this[parentKey] = undefined;
-            }
-        }
-        return params;
-    }
-    //================================================================================
-    // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
-    // 自动生成的代码已结束。下面可以手动编写。
-    //================================================================================
-    // 属性上绑定的表达式
-    get bindExpressions() {
-        return [this.expression];
-    }
-    // 是否需要用标识符替换
-    get needReplaceWithIdentifier() {
-        let bindExpression = false;
-        if (this.expression) {
-            let rootMemberExpression;
-            let tempNode = this.expression;
-            while (tempNode?.concept === 'MemberExpression') {
-                rootMemberExpression = tempNode;
-                tempNode = tempNode?.object;
-            }
-            // 变量和变量的成员表达式不进行替换
-            if (!(this.expression?.concept === 'Identifier' ||
-                (rootMemberExpression && rootMemberExpression.object?.concept === 'Identifier'))) {
-                bindExpression = true;
-            }
-        }
-        return bindExpression;
-    }
-    // 获取表达式在页面中的名字
-    get expressionNameInView() {
-        const nameList = [];
-        let node = this;
-        while (node) {
-            nameList.unshift(node.name);
-            if (node.concept === 'ViewElement') {
-                node = null;
-            }
-            else {
-                nameList.unshift(node.parentKey);
-                node = node.parentNode;
-            }
-        }
-        return nameList.join('_').replace(/-/g, '_');
-    }
-    // 获取表达式生成器名称
-    get expressionBuilderName() {
-        let expressionInViewName = this.expressionNameInView;
-        expressionInViewName = expressionInViewName.charAt(0).toUpperCase() + expressionInViewName.slice(1);
-        return `gen${expressionInViewName}`;
-    }
-    // 获取参数列表
-    getArgsList() {
-        const viewElement = this?.getAncestor('ViewElement');
-        const argsList = [];
-        let parent = viewElement?.parentNode;
-        let index = 0;
-        while (parent && parent.concept !== 'View') {
-            if (parent.slotScope) {
-                argsList.unshift(index === 0 ? 'current' : `current${index}`);
-                index++;
-            }
-            parent = parent.parentNode;
-        }
-        return argsList;
-    }
-    // 表达式中需要被监听的变量
-    get watchedVariableMap() {
-        const map = {};
-        // 页面中表达式用到的变量需要监听，从而重新执行match表达式
-        utils.traverse((current) => {
-            const { node } = current || {};
-            const { concept } = node || {};
-            if (['Identifier'].includes(concept)) {
-                let expressionNode = node;
-                let memberExpressionNode = node?.parentNode;
-                while (memberExpressionNode?.concept === 'MemberExpression') {
-                    expressionNode = memberExpressionNode;
-                    // 为了处理MemberExpression里面存在CallLogic、CallFunction等的情况
-                    const { concept: objConcept } = memberExpressionNode.object || {};
-                    if (!['MemberExpression', 'Identifier'].includes(objConcept)) {
-                        memberExpressionNode = null;
-                        expressionNode = null;
-                    }
-                    else {
-                        memberExpressionNode = memberExpressionNode.parentNode;
-                    }
-                }
-                if (expressionNode) {
-                    map[expressionNode.toJS()] = true;
-                }
-            }
-        }, {
-            node: this,
-        }, {
-            mode: 'anyObject',
-            excludedKeySet: new Set([
-                'parentNode',
-                'sourceMap',
-                'storageJSON',
-                'tsErrorDetail',
-                'NaslAnnotatedJSON',
-                'calledFrom',
-                '_events',
-                '_collectingList',
-                '_historyList',
-            ]),
-        });
-        return map;
-    }
-    getInViewMethod(state) {
-        const argsList = this.getArgsList() || [];
-        const hasArgs = !!argsList.length;
-        let argStr = '';
-        // 容错代码
-        let ftCode = '';
-        if (hasArgs) {
-            argsList.forEach((arg) => {
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var BindStyle_1;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BindStyle = void 0;
+const translator_1 = require("../translator");
+const decorators_1 = require("../decorators");
+const utils = __importStar(require("../utils"));
+const BaseNode_1 = __importDefault(require("../common/BaseNode"));
+const LogicItem__1 = __importDefault(require("./LogicItem__"));
+/**
+ * 元素绑定样式
+ */
+let BindStyle = BindStyle_1 = 
+// @ts-ignore
+class BindStyle extends BaseNode_1.default {
+    /** 类名 */
+    static ConceptName = 'BindStyle';
+    /** 继承链 */
+    static inheritanceChain = ['BaseNode'];
+    /**
+     * 产品概念
+     */
+    concept;
+    /**
+     * 元素绑定样式名称
+     */
+    // @ts-ignore
+    name;
+    /**
+     * 属性表达式
+     */
+    // @ts-ignore
+    expression;
+    /**
+     * 草稿态
+     */
+    playground = [];
+    /**
+     * 祖先 ViewElement
+     */
+    get viewElement() {
+        return this.getAncestor('ViewElement');
+    }
+    /**
+     * 祖先 View
+     */
+    get view() {
+        return this.getAncestor('View');
+    }
+    /**
+     * 祖先 Module
+     */
+    get module() {
+        return this.getAncestor('Module');
+    }
+    /**
+     * 祖先 App
+     */
+    get app() {
+        return this.getAncestor('App');
+    }
+    /**
+     * 祖先 Frontend
+     */
+    get frontend() {
+        return this.getAncestor('Frontend');
+    }
+    /**
+     * @param source 需要合并的部分参数
+     */
+    constructor(source) {
+        source = Object.assign({}, BindStyle_1.getDefaultOptions(), source);
+        super(source);
+        super.subConstructor(source);
+    }
+    static from(source, parentNode, parentKey) {
+        return super.from(source, parentNode, parentKey);
+    }
+    /**
+     * 从父级删除该节点
+     * @internal
+     */
+    _delete() {
+        let params = null;
+        if (this.parentNode) {
+            params = this.parentNode?.__removeBindStyle?.(this);
+        }
+        return params;
+    }
+    /**
+     * 设置属性表达式
+     */
+    setExpression(expression) {
+        expression._delete();
+        const relationOptions = { parentNode: this, parentKey: 'expression' };
+        Object.assign(expression, relationOptions);
+        const object = {
+            expression,
+        };
+        this.update({
+            ...object,
+        });
+    }
+    _insertItemInPlaygroundAt(options, index) {
+        const logicItemOptions = {};
+        const relationOptions = { parentNode: this, parentKey: 'playground' };
+        let logicItem;
+        if (options instanceof LogicItem__1.default) {
+            options.ensureDelete(); // 同一实例不支持多处存在
+            logicItem = options;
+            Object.assign(logicItem, relationOptions);
+        }
+        else {
+            logicItem = LogicItem__1.default.from({
+                ...logicItemOptions,
+                ...options,
+            }, this, 'playground');
+        }
+        this.playground.splice(index, 0, logicItem);
+        return logicItem;
+    }
+    insertItemInPlaygroundAt(options, index) {
+        const node = this._insertItemInPlaygroundAt(options, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'playground',
+        });
+        return node;
+    }
+    _addItemInPlayground(options) {
+        const index = this.playground.length;
+        return this._insertItemInPlaygroundAt(options, index);
+    }
+    addItemInPlayground(options) {
+        const node = this._addItemInPlayground(options);
+        const index = this.playground.indexOf(node);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'playground',
+        });
+        return node;
+    }
+    removeExpression(options) {
+        let expression;
+        if (typeof options === 'string') {
+            expression = this.expression;
+            if (!expression) {
+                throw new Error('找不到逻辑项 ' + options);
+            }
+        }
+        else {
+            expression = options;
+        }
+        return expression.delete();
+    }
+    removeItemInPlayground(options) {
+        let logicItem = options;
+        return logicItem.delete();
+    }
+    __removeLogicItem(logicItem) {
+        const parentKey = logicItem.parentKey;
+        const params = {
+            parentNode: this,
+            parentKey,
+            index: -1,
+            object: null,
+            oldObject: logicItem,
+        };
+        if (parentKey) {
+            params.parentKey = parentKey;
+            // @ts-ignore
+            const t = this.__v_raw || this;
+            // @ts-ignore
+            const n = logicItem.__v_raw || logicItem;
+            if (Array.isArray(t[parentKey])) {
+                // @ts-ignore
+                const index = t[parentKey].findIndex((el) => (el.__v_raw || el) === n);
+                ~index && this[parentKey].splice(index, 1);
+                params.index = index;
+            }
+            else if (t[parentKey] === n) {
+                params.index = 0;
+                this[parentKey] = undefined;
+            }
+        }
+        return params;
+    }
+    //================================================================================
+    // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+    // 自动生成的代码已结束。下面可以手动编写。
+    //================================================================================
+    // 属性上绑定的表达式
+    get bindExpressions() {
+        return [this.expression];
+    }
+    // 是否需要用标识符替换
+    get needReplaceWithIdentifier() {
+        let bindExpression = false;
+        if (this.expression) {
+            let rootMemberExpression;
+            let tempNode = this.expression;
+            while (tempNode?.concept === 'MemberExpression') {
+                rootMemberExpression = tempNode;
+                tempNode = tempNode?.object;
+            }
+            // 变量和变量的成员表达式不进行替换
+            if (!(this.expression?.concept === 'Identifier' ||
+                (rootMemberExpression && rootMemberExpression.object?.concept === 'Identifier'))) {
+                bindExpression = true;
+            }
+        }
+        return bindExpression;
+    }
+    // 获取表达式在页面中的名字
+    get expressionNameInView() {
+        const nameList = [];
+        let node = this;
+        while (node) {
+            nameList.unshift(node.name);
+            if (node.concept === 'ViewElement') {
+                node = null;
+            }
+            else {
+                nameList.unshift(node.parentKey);
+                node = node.parentNode;
+            }
+        }
+        return nameList.join('_').replace(/-/g, '_');
+    }
+    // 获取表达式生成器名称
+    get expressionBuilderName() {
+        let expressionInViewName = this.expressionNameInView;
+        expressionInViewName = expressionInViewName.charAt(0).toUpperCase() + expressionInViewName.slice(1);
+        return `gen${expressionInViewName}`;
+    }
+    // 获取参数列表
+    getArgsList() {
+        const viewElement = this?.getAncestor('ViewElement');
+        const argsList = [];
+        let parent = viewElement?.parentNode;
+        let index = 0;
+        while (parent && parent.concept !== 'View') {
+            if (parent.slotScope) {
+                argsList.unshift(index === 0 ? 'current' : `current${index}`);
+                index++;
+            }
+            parent = parent.parentNode;
+        }
+        return argsList;
+    }
+    // 表达式中需要被监听的变量
+    get watchedVariableMap() {
+        const map = {};
+        // 页面中表达式用到的变量需要监听，从而重新执行match表达式
+        utils.traverse((current) => {
+            const { node } = current || {};
+            const { concept } = node || {};
+            if (['Identifier'].includes(concept)) {
+                let expressionNode = node;
+                let memberExpressionNode = node?.parentNode;
+                while (memberExpressionNode?.concept === 'MemberExpression') {
+                    expressionNode = memberExpressionNode;
+                    // 为了处理MemberExpression里面存在CallLogic、CallFunction等的情况
+                    const { concept: objConcept } = memberExpressionNode.object || {};
+                    if (!['MemberExpression', 'Identifier'].includes(objConcept)) {
+                        memberExpressionNode = null;
+                        expressionNode = null;
+                    }
+                    else {
+                        memberExpressionNode = memberExpressionNode.parentNode;
+                    }
+                }
+                if (expressionNode) {
+                    map[expressionNode.toJS()] = true;
+                }
+            }
+        }, {
+            node: this,
+        }, {
+            mode: 'anyObject',
+            excludedKeySet: new Set([
+                'parentNode',
+                'sourceMap',
+                'storageJSON',
+                'tsErrorDetail',
+                'NaslAnnotatedJSON',
+                'calledFrom',
+                '_events',
+                '_collectingList',
+                '_historyList',
+            ]),
+        });
+        return map;
+    }
+    getInViewMethod(state) {
+        const argsList = this.getArgsList() || [];
+        const hasArgs = !!argsList.length;
+        let argStr = '';
+        // 容错代码
+        let ftCode = '';
+        if (hasArgs) {
+            argsList.forEach((arg) => {
                 ftCode += `if (!this.${this.expressionNameInView}${argStr}) {
                     this.${this.expressionNameInView}${argStr} = {};
-                }\n`;
-                argStr += `[${arg}.hasOwnProperty('__nodeKey') ? ${arg}.__nodeKey : ${arg}.index]`;
-            });
-        }
+                }\n`;
+                argStr += `[${arg}.hasOwnProperty('__nodeKey') ? ${arg}.__nodeKey : ${arg}.index]`;
+            });
+        }
         ftCode += `if (!this.${this.expressionNameInView}${argStr}) {
             this.${this.expressionNameInView}${argStr} = {};
-        }`;
-        // 新的参数
-        const paramList = Object.keys(this.watchedVariableMap);
-        let newParams = `const newParams = [];`;
-        if (Array.isArray(paramList) && paramList.length) {
-            paramList.forEach((param) => {
-                newParams += `newParams.push(${param});\n`;
-            });
-        }
-        // 表达式主体
-        let expressionStr = this.expression?.toJS() || '';
-        if (this.name?.endsWith('background-image') && expressionStr)
-            expressionStr = `\`url(\${${expressionStr}})\``;
-        // 变量重新设置，为了触发重新调用
+        }`;
+        // 新的参数
+        const paramList = Object.keys(this.watchedVariableMap);
+        let newParams = `const newParams = [];`;
+        if (Array.isArray(paramList) && paramList.length) {
+            paramList.forEach((param) => {
+                newParams += `newParams.push(${param});\n`;
+            });
+        }
+        // 表达式主体
+        let expressionStr = this.expression?.toJS() || '';
+        if (this.name?.endsWith('background-image') && expressionStr)
+            expressionStr = `\`url(\${${expressionStr}})\``;
+        // 变量重新设置，为了触发重新调用
         let setVarStr = `this.${this.expressionNameInView}${argStr} = {
             ...(this.${this.expressionNameInView}${argStr} || {}),
             value: value,
-        };`;
-        if (Array.isArray(argsList) && argsList.length) {
-            setVarStr += `this.${this.expressionNameInView} = {...this.${this.expressionNameInView}};\n`;
-        }
+        };`;
+        if (Array.isArray(argsList) && argsList.length) {
+            setVarStr += `this.${this.expressionNameInView} = {...this.${this.expressionNameInView}};\n`;
+        }
         const code = `${this.expressionBuilderName} (${argsList.join(', ')}) {
         // 容错代码
         ${ftCode}
@@ -375,73 +379,70 @@ let BindStyle = class BindStyle extends BaseNode_1.default {
             }
         })();
         return this.${this.expressionNameInView}${argStr}.value;
-    }`;
-        return code;
-    }
-    /**
-     * 转换成 Vue 的模板格式
-     */
-    toVue(options) {
-        let value;
-        // 需要用标识符替换
-        // if (options?.finalCode !== false && this.needReplaceWithIdentifier) {
-        //    const argsList = this.getArgsList();
-        //    value = `${this.expressionBuilderName} (${argsList.join(', ')})`;
-        // } else {
-        value = this.expression?.toVue(options);
-        if (this.name?.endsWith('background-image') && value)
-            value = `\`url(\${${value}})\``;
-        // }
-        return value && `'${this.name}': ${value}`;
-    }
-    toEmbeddedTS(state = (0, translator_1.createCompilerState)()) {
-        let code = '()=>{';
-        if (this.expression) {
-            code += this.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: (state?.tabSize || 0) + 1 }));
-            code += ';\n';
-        }
-        this.playground?.forEach((item, index) => {
-            code += item.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: (state?.tabSize || 0) + 1 }));
-            if (index !== this.playground.length - 1)
-                code += ';\n';
-        });
-        code += '}';
-        return code;
-    }
-};
-exports.BindStyle = BindStyle;
-__decorate([
-    (0, decorators_1.property)('concept')
-    // @ts-ignore
-], BindStyle.prototype, "concept", void 0);
-__decorate([
-    (0, decorators_1.property)()
-    // @ts-ignore
-], BindStyle.prototype, "name", void 0);
-__decorate([
-    (0, decorators_1.property)({
-        objectRef: 'LogicItem',
-    })
-    // @ts-ignore
-], BindStyle.prototype, "expression", void 0);
-__decorate([
-    (0, decorators_1.property)({
-        objectRef: 'LogicItem',
-        isArray: true,
-        defaultValue: [],
-    })
-], BindStyle.prototype, "playground", void 0);
-__decorate([
-    (0, translator_1.withSourceMap)()
-], BindStyle.prototype, "toEmbeddedTS", null);
-exports.BindStyle = BindStyle = BindStyle_1 = __decorate([
-    decorators_1.className,
-    (0, decorators_1.concept)('元素绑定样式')
-    // @ts-ignore
-], BindStyle);
-exports.default = BindStyle;
-//================================================================================
-// ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
-// 自动生成的代码已结束。下面可以手动编写。
-//================================================================================
+    }`;
+        return code;
+    }
+    /**
+     * 转换成 Vue 的模板格式
+     */
+    toVue(options) {
+        let value;
+        // 需要用标识符替换
+        // if (options?.finalCode !== false && this.needReplaceWithIdentifier) {
+        //    const argsList = this.getArgsList();
+        //    value = `${this.expressionBuilderName} (${argsList.join(', ')})`;
+        // } else {
+        value = this.expression?.toVue(options);
+        if (this.name?.endsWith('background-image') && value)
+            value = `\`url(\${${value}})\``;
+        // }
+        return value && `'${this.name}': ${value}`;
+    }
+    toEmbeddedTS(state = (0, translator_1.createCompilerState)()) {
+        let code = '()=>{';
+        if (this.expression) {
+            code += this.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: (state?.tabSize || 0) + 1 }));
+            code += ';\n';
+        }
+        this.playground?.forEach((item, index) => {
+            code += item.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: (state?.tabSize || 0) + 1 }));
+            if (index !== this.playground.length - 1)
+                code += ';\n';
+        });
+        code += '}';
+        return code;
+    }
+};
+__decorate([
+    (0, decorators_1.property)('concept')
+], BindStyle.prototype, "concept", void 0);
+__decorate([
+    (0, decorators_1.property)()
+], BindStyle.prototype, "name", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        objectRef: 'LogicItem',
+    })
+], BindStyle.prototype, "expression", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        objectRef: 'LogicItem',
+        isArray: true,
+        defaultValue: [],
+    })
+], BindStyle.prototype, "playground", void 0);
+__decorate([
+    (0, translator_1.withSourceMap)()
+], BindStyle.prototype, "toEmbeddedTS", null);
+BindStyle = BindStyle_1 = __decorate([
+    decorators_1.className,
+    (0, decorators_1.concept)('元素绑定样式')
+    // @ts-ignore
+], BindStyle);
+exports.BindStyle = BindStyle;
+exports.default = BindStyle;
+//================================================================================
+// ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+// 自动生成的代码已结束。下面可以手动编写。
+//================================================================================
 //# sourceMappingURL=BindStyle__.js.map