clickgo 3.1.4-dev13 → 3.1.6-dev15

package/dist/lib/form.js

@@ -1,4 +1,27 @@
 "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 __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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -9,18 +32,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hideLauncher = exports.showLauncher = exports.flash = exports.confirm = exports.dialog = exports.create = exports.remove = exports.doFocusAndPopEvent = exports.hidePop = exports.showPop = exports.removeFromPop = exports.appendToPop = exports.hideNotify = exports.notifyProgress = exports.notify = exports.hideDrag = exports.moveDrag = exports.showDrag = exports.hideRectangle = exports.showRectangle = exports.moveRectangle = exports.showCircular = exports.getRectByBorder = exports.getMaxZIndexID = exports.changeFocus = exports.getFocus = exports.getList = exports.send = exports.get = exports.getTaskId = exports.refreshMaxPosition = exports.bindDrag = exports.bindResize = exports.close = exports.max = exports.min = exports.superConfirm = exports.elements = exports.launcherRoot = exports.simpleSystemTaskRoot = exports.AbstractForm = void 0;
-const clickgo = require("../clickgo");
-const core = require("./core");
-const task = require("./task");
-const tool = require("./tool");
-const dom = require("./dom");
-const control = require("./control");
-const fs = require("./fs");
-const native = require("./native");
+exports.hideLauncher = exports.showLauncher = exports.flash = exports.confirm = exports.dialog = exports.create = exports.createPanel = exports.removePanel = exports.remove = exports.doFocusAndPopEvent = exports.hidePop = exports.showPop = exports.removeFromPop = exports.appendToPop = exports.hideNotify = exports.notifyProgress = exports.notify = exports.hideDrag = exports.moveDrag = exports.showDrag = exports.hideRectangle = exports.showRectangle = exports.moveRectangle = exports.showCircular = exports.getRectByBorder = exports.getMaxZIndexID = exports.changeFocus = exports.setActivePanel = exports.removeActivePanel = exports.getActivePanel = exports.activePanels = exports.getFocus = exports.getList = exports.send = exports.get = exports.getTaskId = exports.refreshMaxPosition = exports.bindDrag = exports.bindResize = exports.close = exports.max = exports.min = exports.superConfirm = exports.elements = exports.launcherRoot = exports.simpleSystemTaskRoot = exports.AbstractForm = exports.AbstractPanel = void 0;
+const clickgo = __importStar(require("../clickgo"));
+const core = __importStar(require("./core"));
+const task = __importStar(require("./task"));
+const tool = __importStar(require("./tool"));
+const dom = __importStar(require("./dom"));
+const control = __importStar(require("./control"));
+const fs = __importStar(require("./fs"));
+const native = __importStar(require("./native"));
 let focusId = null;
 const info = {
     'lastId': 0,
+    'lastPanelId': 0,
     'lastZIndex': 999,
     'topLastZIndex': 9999999,
     'locale': {
@@ -54,86 +78,7 @@ const info = {
         }
     }
 };
-class AbstractForm {
-    constructor() {
-        this.isNativeSync = false;
-        this._firstShow = true;
-        this.dialogResult = '';
-    }
-    static create(data, layout) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const frm = new this();
-            const code = {
-                'data': {},
-                'methods': {},
-                'computed': {},
-                beforeCreate: frm.onBeforeCreate,
-                created: function () {
-                    this.onCreated();
-                },
-                beforeMount: function () {
-                    this.onBeforeMount();
-                },
-                mounted: function (data) {
-                    this.onMounted(data);
-                },
-                beforeUpdate: function () {
-                    this.onBeforeUpdate();
-                },
-                updated: function () {
-                    return __awaiter(this, void 0, void 0, function* () {
-                        yield this.$nextTick();
-                        this.onUpdated();
-                    });
-                },
-                beforeUnmount: function () {
-                    this.onBeforeUnmount();
-                },
-                unmounted: function () {
-                    return __awaiter(this, void 0, void 0, function* () {
-                        yield this.$nextTick();
-                        this.onUnmounted();
-                    });
-                }
-            };
-            const cdata = Object.entries(frm);
-            for (const item of cdata) {
-                if (item[0] === 'access') {
-                    continue;
-                }
-                code.data[item[0]] = item[1];
-            }
-            if (!layout) {
-                const l = task.list[frm.taskId].app.files[frm.filename.slice(0, -2) + 'xml'];
-                if (typeof l !== 'string') {
-                    return 0;
-                }
-                layout = l;
-            }
-            const prot = tool.getClassPrototype(frm);
-            code.methods = prot.method;
-            code.computed = prot.access;
-            let style = undefined;
-            const fstyle = task.list[frm.taskId].app.files[frm.filename.slice(0, -2) + 'css'];
-            if (typeof fstyle === 'string') {
-                style = fstyle;
-            }
-            const fid = yield create({
-                'code': code,
-                'layout': layout,
-                'style': style,
-                'path': frm.filename.slice(0, frm.filename.lastIndexOf('/')),
-                'data': data,
-                'taskId': frm.taskId
-            });
-            if (fid > 0) {
-                return task.list[frm.taskId].forms[fid].vroot;
-            }
-            else {
-                return fid;
-            }
-        });
-    }
+class AbstractCommon {
     get filename() {
         return '';
     }
@@ -174,9 +119,20 @@ class AbstractForm {
         return task.list[this.taskId].locale.lang || core.config.locale;
     }
     get l() {
-        return (key) => {
+        return (key, data) => {
             var _a, _b, _c, _d;
-            return (_d = (_b = (_a = task.list[this.taskId].locale.data[this.locale]) === null || _a === void 0 ? void 0 : _a[key]) !== null && _b !== void 0 ? _b : (_c = task.list[this.taskId].locale.data['en']) === null || _c === void 0 ? void 0 : _c[key]) !== null && _d !== void 0 ? _d : 'LocaleError';
+            const loc = (_d = (_b = (_a = task.list[this.taskId].locale.data[this.locale]) === null || _a === void 0 ? void 0 : _a[key]) !== null && _b !== void 0 ? _b : (_c = task.list[this.taskId].locale.data['en']) === null || _c === void 0 ? void 0 : _c[key]) !== null && _d !== void 0 ? _d : 'LocaleError';
+            if (!data) {
+                return loc;
+            }
+            let i = -1;
+            return loc.replace(/\?/g, function () {
+                ++i;
+                if (!data[i]) {
+                    return '';
+                }
+                return data[i];
+            });
         };
     }
     get classPrepend() {
@@ -205,31 +161,63 @@ class AbstractForm {
         }
         core.trigger(name, this.taskId, this.formId, param1, param2);
     }
-    createForm(path, data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            path = tool.urlResolve(this.filename, path);
-            const taskId = this.taskId;
-            const cls = class extends AbstractForm {
-                get filename() {
-                    return path + '.js';
-                }
-                get taskId() {
-                    return taskId;
-                }
-            };
-            return cls.create(data);
-        });
+    send(fid, obj) {
+        obj.taskId = this.taskId;
+        obj.formId = this.formId;
+        send(fid, obj);
+    }
+    onBeforeCreate() {
+        return;
+    }
+    onCreated() {
+        return;
+    }
+    onBeforeMount() {
+        return;
+    }
+    onBeforeUpdate() {
+        return;
+    }
+    onUpdated() {
+        return;
+    }
+    onBeforeUnmount() {
+        return;
+    }
+    onUnmounted() {
+        return;
+    }
+}
+class AbstractPanel extends AbstractCommon {
+    get panelId() {
+        return 0;
+    }
+    onShow() {
+        return;
+    }
+    onHide() {
+        return;
+    }
+    onMounted() {
+        return;
+    }
+    onReceive() {
+        return;
+    }
+}
+exports.AbstractPanel = AbstractPanel;
+class AbstractForm extends AbstractCommon {
+    constructor() {
+        super(...arguments);
+        this.isNativeSync = false;
+        this._firstShow = true;
+        this.dialogResult = '';
     }
     get topMost() {
         return false;
     }
     set topMost(v) {
     }
-    send(fid, obj) {
-        obj.taskId = this.taskId;
-        obj.formId = this.formId;
-        send(fid, obj);
-    }
     get isMask() {
         return !task.list[this.taskId].runtime.dialogFormIds.length ||
             task.list[this.taskId].runtime.dialogFormIds[task.list[this.taskId].runtime.dialogFormIds.length - 1]
@@ -237,7 +225,6 @@ class AbstractForm {
     }
     show() {
         const v = this;
-        v.$refs.form.$data.isShow = true;
         if (this._firstShow) {
             this._firstShow = false;
             const area = core.getAvailArea();
@@ -252,6 +239,9 @@ class AbstractForm {
             v.$refs.form.$data.isShow = true;
             changeFocus(this.formId);
         }
+        else {
+            v.$refs.form.$data.isShow = true;
+        }
     }
     showDialog() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -272,30 +262,9 @@ class AbstractForm {
     close() {
         close(this.formId);
     }
-    onBeforeCreate() {
-        return;
-    }
-    onCreated() {
-        return;
-    }
-    onBeforeMount() {
-        return;
-    }
     onMounted() {
         return;
     }
-    onBeforeUpdate() {
-        return;
-    }
-    onUpdated() {
-        return;
-    }
-    onBeforeUnmount() {
-        return;
-    }
-    onUnmounted() {
-        return;
-    }
     onReceive() {
         return;
     }
@@ -817,6 +786,57 @@ function getFocus() {
     return focusId;
 }
 exports.getFocus = getFocus;
+exports.activePanels = {};
+function getActivePanel(formId) {
+    var _a;
+    return (_a = exports.activePanels[formId]) !== null && _a !== void 0 ? _a : [];
+}
+exports.getActivePanel = getActivePanel;
+function removeActivePanel(panelId, formId, taskId) {
+    if (!taskId) {
+        return false;
+    }
+    if (!task.list[taskId]) {
+        return false;
+    }
+    if (!task.list[taskId].forms[formId]) {
+        return false;
+    }
+    if (!exports.activePanels[formId]) {
+        return true;
+    }
+    const io = exports.activePanels[formId].indexOf(panelId);
+    if (io === -1) {
+        return true;
+    }
+    exports.activePanels[formId].splice(io, 1);
+    if (!exports.activePanels[formId].length) {
+        delete exports.activePanels[formId];
+    }
+    return true;
+}
+exports.removeActivePanel = removeActivePanel;
+function setActivePanel(panelId, formId, taskId) {
+    if (!taskId) {
+        return false;
+    }
+    if (!task.list[taskId]) {
+        return false;
+    }
+    if (!task.list[taskId].forms[formId]) {
+        return false;
+    }
+    if (!exports.activePanels[formId]) {
+        exports.activePanels[formId] = [];
+    }
+    const io = exports.activePanels[formId].indexOf(panelId);
+    if (io !== -1) {
+        return true;
+    }
+    exports.activePanels[formId].push(panelId);
+    return true;
+}
+exports.setActivePanel = setActivePanel;
 function changeFocus(formId = 0) {
     var _a;
     if (typeof formId !== 'number') {
@@ -1454,6 +1474,7 @@ function remove(formId) {
             dom.clearWatchStyle(formId);
             dom.clearWatchProperty(formId);
             native.clear(formId, taskId);
+            delete exports.activePanels[formId];
             if (Object.keys(task.list[taskId].forms).length === 0) {
                 task.end(taskId);
             }
@@ -1465,6 +1486,39 @@ function remove(formId) {
     }
 }
 exports.remove = remove;
+function removePanel(id, vapp, el) {
+    var _a;
+    const formWrap = dom.findParentByClass(el, 'cg-form-wrap');
+    if (!formWrap) {
+        return false;
+    }
+    const formId = formWrap.dataset.formId;
+    if (!formId) {
+        return false;
+    }
+    const taskId = formWrap.dataset.taskId;
+    if (!taskId) {
+        return false;
+    }
+    const tid = parseInt(taskId);
+    vapp.unmount();
+    vapp._container.remove();
+    (_a = el.querySelector('[data-panel-id="' + id.toString() + '"]')) === null || _a === void 0 ? void 0 : _a.remove();
+    dom.removeStyle(tid, 'form', formId, id);
+    dom.clearWatchStyle(formId, id);
+    dom.clearWatchProperty(formId, id);
+    if (exports.activePanels[formId]) {
+        const io = exports.activePanels[formId].indexOf(id);
+        if (io >= 0) {
+            exports.activePanels[formId].splice(io, 1);
+        }
+        if (!exports.activePanels[formId].length) {
+            delete exports.activePanels[formId];
+        }
+    }
+    return true;
+}
+exports.removePanel = removePanel;
 function getForm(taskId, formId) {
     const t = task.list[taskId];
     if (!t) {
@@ -1476,60 +1530,334 @@ function getForm(taskId, formId) {
     }
     return form;
 }
-function create(opt) {
-    var _a, _b, _c, _d, _e, _f;
+function createPanel(cls, el, formId, taskId) {
     return __awaiter(this, void 0, void 0, function* () {
-        if (!opt.taskId) {
-            return -1;
+        if (!taskId) {
+            const err = new Error('form.createPanel: -1');
+            core.trigger('error', 0, 0, err, err.message);
+            throw err;
+        }
+        if (el.dataset.cgControl !== 'panel') {
+            const err = new Error('form.createPanel: -2');
+            core.trigger('error', 0, 0, err, err.message);
+            throw err;
         }
-        const t = task.list[opt.taskId];
+        const t = task.list[taskId];
         if (!t) {
-            return -2;
+            const err = new Error('form.createPanel: -3');
+            core.trigger('error', 0, 0, err, err.message);
+            throw err;
+        }
+        let filename = '';
+        if (typeof cls === 'string') {
+            filename = cls + '.js';
+            cls = class extends AbstractPanel {
+                get filename() {
+                    return filename;
+                }
+                get taskId() {
+                    return t.id;
+                }
+            };
         }
-        const formId = ++info.lastId;
-        const components = control.buildComponents(t.id, formId, (_a = opt.path) !== null && _a !== void 0 ? _a : '');
+        const panelId = ++info.lastPanelId;
+        const panel = new cls();
+        if (!filename) {
+            filename = panel.filename;
+        }
+        const lio = filename.lastIndexOf('/');
+        const path = filename.slice(0, lio);
+        const l = t.app.files[filename.slice(0, -2) + 'xml'];
+        if (typeof l !== 'string') {
+            const err = new Error('form.createPanel: -4');
+            core.trigger('error', 0, 0, err, err.message);
+            throw err;
+        }
+        let layout = l;
+        let style = '';
+        let prep = '';
+        const s = t.app.files[filename.slice(0, -2) + 'css'];
+        if (typeof s === 'string') {
+            style = s;
+            const r = tool.stylePrepend(style);
+            prep = r.prep;
+            style = yield tool.styleUrl2DataUrl(path + '/', r.style, t.app.files);
+        }
+        layout = tool.purify(layout);
+        layout = tool.layoutAddTagClassAndReTagName(layout, true);
+        layout = tool.layoutInsertAttr(layout, ':form-focus=\'formFocus\'', {
+            'include': [/^cg-.+/]
+        });
+        const prepList = ['cg-task' + t.id.toString() + '_'];
+        if (prep !== '') {
+            prepList.push(prep);
+        }
+        layout = tool.layoutClassPrepend(layout, prepList);
+        layout = tool.eventsAttrWrap(layout);
+        if (layout.includes('<teleport')) {
+            layout = tool.teleportGlue(layout, formId);
+        }
+        const components = control.buildComponents(t.id, formId, path);
         if (!components) {
-            return -3;
-        }
-        let data = {};
-        let access = {};
-        let methods = undefined;
-        let computed = {};
-        let beforeCreate = undefined;
-        let created = undefined;
-        let beforeMount = undefined;
-        let mounted = undefined;
-        let beforeUpdate = undefined;
-        let updated = undefined;
-        let beforeUnmount = undefined;
-        let unmounted = undefined;
-        if (opt.code) {
-            data = (_b = opt.code.data) !== null && _b !== void 0 ? _b : {};
-            access = (_c = opt.code.access) !== null && _c !== void 0 ? _c : {};
-            methods = opt.code.methods;
-            computed = (_d = opt.code.computed) !== null && _d !== void 0 ? _d : {};
-            beforeCreate = opt.code.beforeCreate;
-            created = opt.code.created;
-            beforeMount = opt.code.beforeMount;
-            mounted = opt.code.mounted;
-            beforeUpdate = opt.code.beforeUpdate;
-            updated = opt.code.updated;
-            beforeUnmount = opt.code.beforeUnmount;
-            unmounted = opt.code.unmounted;
+            const err = new Error('form.createPanel: -5');
+            core.trigger('error', 0, 0, err, err.message);
+            throw err;
+        }
+        const idata = {};
+        const cdata = Object.entries(panel);
+        for (const item of cdata) {
+            if (item[0] === 'access') {
+                continue;
+            }
+            idata[item[0]] = item[1];
+        }
+        idata._formFocus = false;
+        const prot = tool.getClassPrototype(panel);
+        const methods = prot.method;
+        const computed = prot.access;
+        computed.formId = {
+            get: function () {
+                return formId;
+            },
+            set: function () {
+                notify({
+                    'title': 'Error',
+                    'content': `The software tries to modify the system variable "formId".\nPath: ${this.filename}`,
+                    'type': 'danger'
+                });
+                return;
+            }
+        };
+        computed.panelId = {
+            get: function () {
+                return panelId;
+            },
+            set: function () {
+                notify({
+                    'title': 'Error',
+                    'content': `The software tries to modify the system variable "panelId".\nPath: ${this.filename}`,
+                    'type': 'danger'
+                });
+                return;
+            }
+        };
+        computed.path = {
+            get: function () {
+                return path;
+            },
+            set: function () {
+                notify({
+                    'title': 'Error',
+                    'content': `The software tries to modify the system variable "path".\nPath: ${this.filename}`,
+                    'type': 'danger'
+                });
+                return;
+            }
+        };
+        computed.prep = {
+            get: function () {
+                return prep;
+            },
+            set: function () {
+                notify({
+                    'title': 'Error',
+                    'content': `The software tries to modify the system variable "cgPrep".\nPath: ${this.filename}`,
+                    'type': 'danger'
+                });
+                return;
+            }
+        };
+        el.insertAdjacentHTML('beforeend', `<div data-panel-id="${panelId.toString()}"></div>`);
+        if (style) {
+            dom.pushStyle(t.id, style, 'form', formId, panelId);
+        }
+        const mel = el.children.item(el.children.length - 1);
+        mel.style.flex = '1';
+        const rtn = yield new Promise(function (resolve) {
+            const vapp = clickgo.vue.createApp({
+                'template': layout.replace(/^<cg-panel([\s\S]+)-panel>$/, '<cg-layout$1-layout>'),
+                'data': function () {
+                    return tool.clone(idata);
+                },
+                'methods': methods,
+                'computed': computed,
+                'beforeCreate': panel.onBeforeCreate,
+                'created': function () {
+                    if (panel.access) {
+                        this.access = tool.clone(panel.access);
+                    }
+                    this.onCreated();
+                },
+                'beforeMount': function () {
+                    this.onBeforeMount();
+                },
+                'mounted': function () {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.$nextTick();
+                        mel.children.item(0).style.flex = '1';
+                        resolve({
+                            'vapp': vapp,
+                            'vroot': this
+                        });
+                    });
+                },
+                'beforeUpdate': function () {
+                    this.onBeforeUpdate();
+                },
+                'updated': function () {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.$nextTick();
+                        this.onUpdated();
+                    });
+                },
+                'beforeUnmount': function () {
+                    this.onBeforeUnmount();
+                },
+                'unmounted': function () {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.$nextTick();
+                        this.onUnmounted();
+                    });
+                }
+            });
+            vapp.config.errorHandler = function (err, vm, info) {
+                notify({
+                    'title': 'Runtime Error',
+                    'content': `Message: ${err.message}\nTask id: ${vm.taskId}\nForm id: ${vm.formId}`,
+                    'type': 'danger'
+                });
+                core.trigger('error', vm.taskId, vm.formId, err, info + '(-3,' + vm.taskId + ',' + vm.formId + ')');
+            };
+            for (const key in components) {
+                vapp.component(key, components[key]);
+            }
+            try {
+                vapp.mount(mel);
+            }
+            catch (err) {
+                notify({
+                    'title': 'Runtime Error',
+                    'content': `Message: ${err.message}\nTask id: ${t.id}\nForm id: ${formId}`,
+                    'type': 'danger'
+                });
+                core.trigger('error', t.id, formId, err, err.message);
+            }
+        });
+        yield tool.sleep(34);
+        try {
+            yield panel.onMounted.call(rtn.vroot);
+        }
+        catch (err) {
+            core.trigger('error', rtn.vroot.taskId, rtn.vroot.formId, err, 'Create panel mounted error: -6.');
+            try {
+                rtn.vapp.unmount();
+            }
+            catch (err) {
+                const msg = `Message: ${err.message}\nTask id: ${t.id}\nForm id: ${formId}\nFunction: form.createPanel, unmount.`;
+                notify({
+                    'title': 'Panel Unmount Error',
+                    'content': msg,
+                    'type': 'danger'
+                });
+                console.log('Panel Unmount Error', msg, err);
+            }
+            rtn.vapp._container.remove();
+            dom.clearWatchStyle(rtn.vroot.formId, panelId);
+            dom.clearWatchProperty(rtn.vroot.formId, panelId);
+            dom.removeStyle(rtn.vroot.taskId, 'form', rtn.vroot.formId, panelId);
+            throw err;
+        }
+        return {
+            'id': panelId,
+            'vapp': rtn.vapp,
+            'vroot': rtn.vroot
+        };
+    });
+}
+exports.createPanel = createPanel;
+function create(cls, data, opt = {}, taskId) {
+    var _a, _b;
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!taskId) {
+            const err = new Error('form.create: -1');
+            core.trigger('error', 0, 0, err, err.message);
+            throw err;
+        }
+        const t = task.list[taskId];
+        if (!t) {
+            const err = new Error('form.create: -2');
+            core.trigger('error', 0, 0, err, err.message);
+            throw err;
+        }
+        let layout = '';
+        if (opt.layout) {
+            layout = opt.layout;
         }
         let style = '';
         let prep = '';
         if (opt.style) {
-            const r = tool.stylePrepend(opt.style);
+            style = opt.style;
+        }
+        let filename = '';
+        if (typeof cls === 'string') {
+            filename = tool.urlResolve((_a = opt.path) !== null && _a !== void 0 ? _a : '/', cls);
+            if (!layout) {
+                const l = t.app.files[filename + '.xml'];
+                if (typeof l !== 'string') {
+                    const err = new Error('form.create: -3');
+                    core.trigger('error', 0, 0, err, err.message);
+                    throw err;
+                }
+                layout = l;
+            }
+            if (!style) {
+                const s = t.app.files[filename + '.css'];
+                if (typeof s === 'string') {
+                    style = s;
+                }
+            }
+            cls = class extends AbstractForm {
+                get filename() {
+                    return filename + '.js';
+                }
+                get taskId() {
+                    return t.id;
+                }
+            };
+        }
+        const formId = ++info.lastId;
+        const frm = new cls();
+        if (!filename) {
+            filename = frm.filename;
+        }
+        const lio = filename.lastIndexOf('/');
+        const path = filename.slice(0, lio);
+        if (!layout) {
+            const l = t.app.files[filename.slice(0, -2) + 'xml'];
+            if (typeof l !== 'string') {
+                const err = new Error('form.create: -4');
+                core.trigger('error', 0, 0, err, err.message);
+                throw err;
+            }
+            layout = l;
+        }
+        if (!style) {
+            const s = t.app.files[filename.slice(0, -2) + 'css'];
+            if (typeof s === 'string') {
+                style = s;
+            }
+        }
+        if (style) {
+            const r = tool.stylePrepend(style);
             prep = r.prep;
-            style = yield tool.styleUrl2DataUrl((_e = opt.path) !== null && _e !== void 0 ? _e : '/', r.style, t.app.files);
+            style = yield tool.styleUrl2DataUrl(path + '/', r.style, t.app.files);
         }
-        let layout = tool.purify(opt.layout);
+        layout = tool.purify(layout);
         layout = tool.layoutAddTagClassAndReTagName(layout, true);
         layout = tool.layoutInsertAttr(layout, ':form-focus=\'formFocus\'', {
             'include': [/^cg-.+/]
         });
-        const prepList = ['cg-task' + opt.taskId.toString() + '_'];
+        const prepList = ['cg-task' + t.id.toString() + '_'];
         if (prep !== '') {
             prepList.push(prep);
         }
@@ -1538,9 +1866,27 @@ function create(opt) {
         if (layout.includes('<teleport')) {
             layout = tool.teleportGlue(layout, formId);
         }
-        exports.elements.list.insertAdjacentHTML('beforeend', `<div class="cg-form-wrap" data-form-id="${formId.toString()}" data-task-id="${opt.taskId.toString()}"></div>`);
-        exports.elements.popList.insertAdjacentHTML('beforeend', `<div data-form-id="${formId.toString()}" data-task-id="${opt.taskId.toString()}"></div>`);
-        const el = exports.elements.list.children.item(exports.elements.list.children.length - 1);
+        const components = control.buildComponents(t.id, formId, path);
+        if (!components) {
+            const err = new Error('form.create: -5');
+            core.trigger('error', 0, 0, err, err.message);
+            throw err;
+        }
+        const idata = {};
+        const cdata = Object.entries(frm);
+        for (const item of cdata) {
+            if (item[0] === 'access') {
+                continue;
+            }
+            idata[item[0]] = item[1];
+        }
+        idata._formFocus = false;
+        if (clickgo.isNative() && (formId === 1) && !clickgo.isImmersion() && !clickgo.hasFrame()) {
+            idata.isNativeSync = true;
+        }
+        const prot = tool.getClassPrototype(frm);
+        const methods = prot.method;
+        const computed = prot.access;
         computed.formId = {
             get: function () {
                 return formId;
@@ -1554,11 +1900,9 @@ function create(opt) {
                 return;
             }
         };
-        data._formFocus = false;
         computed.path = {
             get: function () {
-                var _a;
-                return (_a = opt.path) !== null && _a !== void 0 ? _a : '';
+                return path;
             },
             set: function () {
                 notify({
@@ -1582,7 +1926,7 @@ function create(opt) {
                 return;
             }
         };
-        data._topMost = false;
+        idata._topMost = false;
         computed.topMost = {
             get: function () {
                 return this._topMost;
@@ -1608,34 +1952,35 @@ function create(opt) {
                 return;
             }
         };
-        if (clickgo.isNative() && (formId === 1) && !clickgo.isImmersion() && !clickgo.hasFrame()) {
-            data.isNativeSync = true;
-        }
+        exports.elements.list.insertAdjacentHTML('beforeend', `<div class="cg-form-wrap" data-form-id="${formId.toString()}" data-task-id="${t.id.toString()}"></div>`);
+        exports.elements.popList.insertAdjacentHTML('beforeend', `<div data-form-id="${formId.toString()}" data-task-id="${t.id.toString()}"></div>`);
         if (style) {
-            dom.pushStyle(opt.taskId, style, 'form', formId);
+            dom.pushStyle(t.id, style, 'form', formId);
         }
+        const el = exports.elements.list.children.item(exports.elements.list.children.length - 1);
         const rtn = yield new Promise(function (resolve) {
             const vapp = clickgo.vue.createApp({
                 'template': layout.replace(/^<cg-form/, '<cg-form ref="form"'),
                 'data': function () {
-                    return tool.clone(data);
+                    return tool.clone(idata);
                 },
                 'methods': methods,
                 'computed': computed,
-                'beforeCreate': beforeCreate,
+                'beforeCreate': frm.onBeforeCreate,
                 'created': function () {
-                    this.access = tool.clone(access);
-                    created === null || created === void 0 ? void 0 : created.call(this);
+                    if (frm.access) {
+                        this.access = tool.clone(frm.access);
+                    }
+                    this.onCreated();
+                },
+                'beforeMount': function () {
+                    this.onBeforeMount();
                 },
-                'beforeMount': beforeMount,
                 'mounted': function () {
                     return __awaiter(this, void 0, void 0, function* () {
                         yield this.$nextTick();
                         if (this.$refs.form.icon) {
-                            const icon = yield fs.getContent(this.$refs.form.icon, {
-                                'current': t.current,
-                                'files': t.app.files
-                            });
+                            const icon = yield fs.getContent(this.$refs.form.icon, undefined, taskId);
                             this.$refs.form.iconDataUrl = (icon instanceof Blob) ? yield tool.blob2DataUrl(icon) : '';
                         }
                         resolve({
@@ -1644,10 +1989,24 @@ function create(opt) {
                         });
                     });
                 },
-                'beforeUpdate': beforeUpdate,
-                'updated': updated,
-                'beforeUnmount': beforeUnmount,
-                'unmounted': unmounted
+                'beforeUpdate': function () {
+                    this.onBeforeUpdate();
+                },
+                'updated': function () {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.$nextTick();
+                        this.onUpdated();
+                    });
+                },
+                'beforeUnmount': function () {
+                    this.onBeforeUnmount();
+                },
+                'unmounted': function () {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield this.$nextTick();
+                        this.onUnmounted();
+                    });
+                }
             });
             vapp.config.errorHandler = function (err, vm, info) {
                 notify({
@@ -1666,10 +2025,10 @@ function create(opt) {
             catch (err) {
                 notify({
                     'title': 'Runtime Error',
-                    'content': `Message: ${err.message}\nTask id: ${opt.taskId}\nForm id: ${formId}`,
+                    'content': `Message: ${err.message}\nTask id: ${t.id}\nForm id: ${formId}`,
                     'type': 'danger'
                 });
-                core.trigger('error', opt.taskId, formId, err, err.message + '(-2)');
+                core.trigger('error', t.id, formId, err, err.message);
             }
         });
         const nform = {
@@ -1679,35 +2038,33 @@ function create(opt) {
         };
         t.forms[formId] = nform;
         yield tool.sleep(34);
-        if (mounted) {
+        try {
+            yield frm.onMounted.call(rtn.vroot, data !== null && data !== void 0 ? data : {});
+        }
+        catch (err) {
+            core.trigger('error', rtn.vroot.taskId, rtn.vroot.formId, err, 'Create form mounted error: -6.');
+            delete t.forms[formId];
             try {
-                yield mounted.call(rtn.vroot, opt.data);
+                rtn.vapp.unmount();
             }
             catch (err) {
-                core.trigger('error', rtn.vroot.taskId, rtn.vroot.formId, err, 'Create form mounted error.');
-                delete t.forms[formId];
-                try {
-                    rtn.vapp.unmount();
-                }
-                catch (err) {
-                    const msg = `Message: ${err.message}\nTask id: ${opt.taskId}\nForm id: ${formId}\nFunction: form.create, unmount.`;
-                    notify({
-                        'title': 'Form Unmount Error',
-                        'content': msg,
-                        'type': 'danger'
-                    });
-                    console.log('Form Unmount Error', msg, err);
-                }
-                rtn.vapp._container.remove();
-                (_f = exports.elements.popList.querySelector('[data-form-id="' + rtn.vroot.formId + '"]')) === null || _f === void 0 ? void 0 : _f.remove();
-                dom.clearWatchStyle(rtn.vroot.formId);
-                dom.clearWatchProperty(rtn.vroot.formId);
-                native.clear(formId, t.id);
-                dom.removeStyle(rtn.vroot.taskId, 'form', rtn.vroot.formId);
-                return -8;
+                const msg = `Message: ${err.message}\nTask id: ${t.id}\nForm id: ${formId}\nFunction: form.create, unmount.`;
+                notify({
+                    'title': 'Form Unmount Error',
+                    'content': msg,
+                    'type': 'danger'
+                });
+                console.log('Form Unmount Error', msg, err);
             }
-        }
-        core.trigger('formCreated', opt.taskId, formId, rtn.vroot.$refs.form.title, rtn.vroot.$refs.form.iconDataUrl);
+            rtn.vapp._container.remove();
+            (_b = exports.elements.popList.querySelector('[data-form-id="' + rtn.vroot.formId + '"]')) === null || _b === void 0 ? void 0 : _b.remove();
+            dom.clearWatchStyle(rtn.vroot.formId);
+            dom.clearWatchProperty(rtn.vroot.formId);
+            native.clear(formId, t.id);
+            dom.removeStyle(rtn.vroot.taskId, 'form', rtn.vroot.formId);
+            throw err;
+        }
+        core.trigger('formCreated', t.id, formId, rtn.vroot.$refs.form.title, rtn.vroot.$refs.form.iconDataUrl);
         if (rtn.vroot.isNativeSync) {
             yield native.invoke('cg-set-size', native.getToken(), rtn.vroot.$refs.form.$el.offsetWidth, rtn.vroot.$refs.form.$el.offsetHeight);
             window.addEventListener('resize', function () {
@@ -1715,18 +2072,19 @@ function create(opt) {
                 rtn.vroot.$refs.form.setPropData('height', window.innerHeight);
             });
         }
-        return formId;
+        return rtn.vroot;
     });
 }
 exports.create = create;
 function dialog(opt) {
     return new Promise(function (resolve) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (typeof opt === 'string') {
             opt = {
                 'content': opt
             };
         }
+        const filename = tool.urlResolve((_a = opt.path) !== null && _a !== void 0 ? _a : '/', './tmp' + (Math.random() * 100000000000000).toFixed() + '.js');
         const nopt = opt;
         const taskId = nopt.taskId;
         if (!taskId) {
@@ -1740,13 +2098,16 @@ function dialog(opt) {
         }
         const locale = t.locale.lang || core.config.locale;
         if (nopt.buttons === undefined) {
-            nopt.buttons = [(_b = (_a = info.locale[locale]) === null || _a === void 0 ? void 0 : _a.ok) !== null && _b !== void 0 ? _b : info.locale['en'].ok];
+            nopt.buttons = [(_c = (_b = info.locale[locale]) === null || _b === void 0 ? void 0 : _b.ok) !== null && _c !== void 0 ? _c : info.locale['en'].ok];
         }
         const cls = class extends AbstractForm {
             constructor() {
                 super(...arguments);
                 this.buttons = nopt.buttons;
             }
+            get filename() {
+                return filename;
+            }
             get taskId() {
                 return taskId;
             }
@@ -1765,7 +2126,10 @@ function dialog(opt) {
                 }
             }
         };
-        cls.create(undefined, `<form title="${(_c = nopt.title) !== null && _c !== void 0 ? _c : 'dialog'}" min="false" max="false" resize="false" height="0" width="0" border="${nopt.title ? 'normal' : 'plain'}" direction="v"><dialog :buttons="buttons" @select="select"${nopt.direction ? ` direction="${nopt.direction}"` : ''}>${nopt.content}</dialog></form>`).then((frm) => {
+        create(cls, undefined, {
+            'layout': `<form title="${(_d = nopt.title) !== null && _d !== void 0 ? _d : 'dialog'}" min="false" max="false" resize="false" height="0" width="0" border="${nopt.title ? 'normal' : 'plain'}" direction="v"><dialog :buttons="buttons" @select="select"${nopt.direction ? ` direction="${nopt.direction}"` : ''}>${nopt.content}</dialog></form>`,
+            'style': nopt.style
+        }, t.id).then((frm) => {
             if (typeof frm === 'number') {
                 resolve('');
                 return;