clickgo 3.1.2-dev11 → 3.1.4-dev13

package/dist/app/demo/form/main.xml

@@ -1,50 +1,52 @@
 <form width="400" height="550" title="ClickGo demo" icon="/package/res/icon.svg">
     <tab v-model="ntab" :tabs="['control', 'method', 'event']" style="margin: 10px; flex: 1;">
-        <overflow v-if="ntab === 'control'" class="inner" direction="v">
+        <flow v-if="ntab === 'control'" class="inner" direction="v">
             <layout class="buttons" gutter="10" direction="v">
                 <button @click="openForm('cform')">Form</button>
-                <button @click="openForm('control', 'img')">Img</button>
-                <button @click="openForm('control', 'button')">Button</button>
-                <button @click="openForm('control', 'check')">Check</button>
-                <button @click="openForm('control', 'radio')">Radio</button>
-                <button @click="openForm('control', 'text')">Text</button>
-                <button @click="openForm('control', 'tab')">Tab</button>
-                <button @click="openForm('control', 'label')">Label</button>
-                <button @click="openForm('control', 'loading')">Loading</button>
+                <button @click="openForm('cimg')">Img</button>
+                <button @click="openForm('cbutton')">Button</button>
+                <button @click="openForm('ccheck')">Check</button>
+                <button @click="openForm('cradio')">Radio</button>
+                <button @click="openForm('ctext')">Text</button>
+                <button @click="openForm('ctab')">Tab</button>
+                <button @click="openForm('clabel')">Label</button>
+                <button @click="openForm('cloading')">Loading</button>
                 <button @click="openForm('cdialog')">Dialog</button>
-                <button @click="openForm('control', 'file')">File</button>
+                <button @click="openForm('cfile')">File</button>
                 <button @click="openForm('cblock')">Block</button>
-                <button @click="openForm('control', 'overflow')">Overflow</button>
-                <button @click="openForm('control', 'view')">View</button>
-                <button @click="openForm('control', 'greatview')">Greatview</button>
-                <button @click="openForm('control', 'marquee')">Marquee</button>
-                <button @click="openForm('control', 'scroll')">Scroll</button>
-                <button @click="openForm('control', 'menu')">Menu</button>
-                <button @click="openForm('control', 'list')">List</button>
-                <button @click="openForm('control', 'select')">Select</button>
-                <button @click="openForm('control', 'property')">Property</button>
-                <button @click="openForm('control', 'monaco')">Monaco</button>
+                <button @click="openForm('cflow')">Flow</button>
+                <button @click="openForm('cvflow')">Vflow</button>
+                <button @click="openForm('cmarquee')">Marquee</button>
+                <button @click="openForm('cscroll')">Scroll</button>
+                <button @click="openForm('cmenu')">Menu</button>
+                <button @click="openForm('clist')">List</button>
+                <button @click="openForm('cselect')">Select</button>
+                <button @click="openForm('cproperty')">Property</button>
+                <button @click="openForm('cmonaco')">Monaco</button>
             </layout>
-        </overflow>
-        <overflow v-else-if="ntab === 'method'" class="inner" direction="v">
+        </flow>
+        <flow v-else-if="ntab === 'method'" class="inner" direction="v">
             <layout class="buttons" gutter="10" direction="v">
-                <button @click="openForm('method', 'core')">Library core</button>
-                <button @click="openForm('method', 'dom')">Library dom</button>
+                <button @click="openForm('mcore')">Library core</button>
+                <button @click="openForm('mdom')">Library dom</button>
                 <button @click="openForm('mform')">Library form</button>
-                <button @click="openForm('method', 'fs')">Library fs</button>
-                <button @click="openForm('method', 'task')">Library task</button>
-                <button @click="openForm('method', 'theme')">Library theme</button>
-                <button @click="openForm('method', 'tool')">Library tool</button>
-                <button @click="openForm('method', 'zip')">Library zip</button>
+                <button @click="openForm('mfs')">Library fs</button>
+                <button @click="openForm('mnative')">Library native</button>
+                <button @click="openForm('mtask')">Library task</button>
+                <button @click="openForm('mtheme')">Library theme</button>
+                <button @click="openForm('mtool')">Library tool</button>
+                <button @click="openForm('mzip')">Library zip</button>
                 <button @click="openForm('aform')">Abstract Form</button>
+                <button @click="openForm('msystem')">System</button>
             </layout>
-        </overflow>
-        <overflow v-else class="inner" direction="v">
+        </flow>
+        <flow v-else class="inner" direction="v">
             <layout class="buttons" gutter="10" direction="v">
-                <button @click="openForm('event', 'screen')">About screen</button>
-                <button @click="openForm('event', 'form')">About form</button>
-                <button @click="openForm('event', 'task')">About task</button>
+                <button @click="openForm('escreen')">About screen</button>
+                <button @click="openForm('eform')">About form</button>
+                <button @click="openForm('etask')">About task</button>
+                <button @click="openForm('eother')">About other</button>
             </layout>
-        </overflow>
+        </flow>
     </tab>
 </form>

package/dist/app/demo/form/method/aform/aform.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const clickgo = require("clickgo");
+const sd_1 = require("./sd");
 class default_1 extends clickgo.form.AbstractForm {
     constructor() {
         super(...arguments);
@@ -41,7 +42,7 @@ class default_1 extends clickgo.form.AbstractForm {
     }
     sshowDialog() {
         return __awaiter(this, void 0, void 0, function* () {
-            const frm = yield this.createForm('test');
+            const frm = yield sd_1.default.create();
             if (typeof frm === 'number') {
                 return;
             }

package/dist/app/demo/form/method/aform/aform.xml

@@ -1,5 +1,5 @@
 <form width="350" height="400" title="Abstract Form">
-    <overflow direction="v" style="flex: 1; padding: 10px;">
+    <flow direction="v" style="flex: 1; padding: 10px;">
         <layout gutter="10" direction="v" style="flex: 1;">
             <label>filename: {{filename}}</label>
             <label>controlName: {{controlName}}</label>
@@ -29,6 +29,7 @@
                 <button @click="sshowDialog" style="height: 30px; flex: 1;">showDialog()</button>
                 <label>result: {{dr}}</label>
             </layout>
+            <button @click="close" style="height: 30px;">close()</button>
         </layout>
-    </overflow>
+    </flow>
 </form>

package/dist/app/demo/form/method/aform/sd.js

@@ -0,0 +1,28 @@
+"use strict";
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clickgo = require("clickgo");
+class Sd extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.dr = '';
+    }
+    newDialog() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const frm = yield Sd.create();
+            if (typeof frm === 'number') {
+                return;
+            }
+            this.dr = yield frm.showDialog();
+        });
+    }
+}
+exports.default = Sd;

package/dist/app/demo/form/method/aform/sd.xml

@@ -0,0 +1,7 @@
+<form width="200" height="200" title="dialog">
+    <layout align-v="center" align-h="center" direction="v" gutter="10" style="flex: 1; width: 0;">
+        <label>Haha! Result: {{dr}}</label>
+        <button @click="dialogResult = dialogResult ? '' : 'Done'" style="padding: 10px;">{{dialogResult ? 'Remove' : 'Set'}} dialogResult</button>
+        <button @click="newDialog"style="padding: 10px;">showDialog()</button>
+    </layout>
+</form>

package/dist/app/demo/form/method/aform/test.xml

@@ -1,6 +1,5 @@
-<form width="200" height="200" title="From path">
-    <layout align-v="center" align-h="center" direction="v" gutter="10" style="flex: 1; width: 0;">
-        <label>Haha!</label>
-        <button @click="dialogResult = dialogResult ? '' : 'Done'" style="padding: 10px;">{{dialogResult ? 'Remove' : 'Set'}} dialogResult</button>
-    </layout>
+<form width="200" height="200" title="From path">
+    <layout align-v="center" align-h="center" style="flex: 1; width: 0;">
+        <label>Create form path</label>
+    </layout>
 </form>

package/dist/app/demo/form/method/core/core.js

@@ -9,17 +9,32 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.methods = exports.computed = void 0;
 const clickgo = require("clickgo");
-exports.computed = {
-    'config': function () {
-        return JSON.stringify(clickgo.core.config, null, 4);
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.hash = 'test';
     }
-};
-exports.methods = {
-    getAvailArea: function () {
+    get config() {
+        return JSON.stringify(clickgo.core.config, null, 4).replace(/"icon": "([\s\S]+?)"/g, '"icon": "data:image/..."');
+    }
+    getCdn() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield clickgo.form.dialog(clickgo.core.getCdn());
+        });
+    }
+    getAvailArea() {
         return __awaiter(this, void 0, void 0, function* () {
             yield clickgo.form.dialog(JSON.stringify(clickgo.core.getAvailArea()));
         });
     }
-};
+    hashe() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (clickgo.core.hash(this.hash)) {
+                return;
+            }
+            yield clickgo.form.dialog('No permission.');
+        });
+    }
+}
+exports.default = default_1;

package/dist/app/demo/form/method/core/core.xml

@@ -1,7 +1,12 @@
 <form width="350" height="400" title="Library task" padding="10">
     <layout direction="v" gutter="10" style="flex: 1;">
-        <button @click="getAvailArea" style="height: 30px;">getAvailArea()</button>
         <label>config:</label>
         <text v-model="config" readonly multi style="flex: 1;"></text>
+        <button @click="getCdn" style="height: 30px;">getCdn()</button>
+        <button @click="getAvailArea" style="height: 30px;">getAvailArea()</button>
+        <layout gutter="10" align-v="center">
+            <text v-model="hash" style="flex: 1;" />
+            <button @click="hashe" style="height: 30px; padding: 0 10px;">hash('{{hash}}')</button>
+        </layout>
     </layout>
 </form>

package/dist/app/demo/form/method/dom/dom.js

@@ -9,155 +9,147 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mounted = exports.methods = exports.computed = exports.data = void 0;
 const clickgo = require("clickgo");
-exports.data = {
-    'watchSizeText': false,
-    'watchSizeHeight': true,
-    'watchText': false,
-    'watchInner': true,
-    'watchStyleChange': true,
-    'bindGestureText': '',
-    'bindGestureWheelText': '',
-    'bindLongText': false,
-    'moveLeft': 0,
-    'moveTop': 0,
-    'moveWidth': 25,
-    'moveHeight': 25,
-};
-exports.computed = {
-    'isMove': function () {
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.watchSizeText = false;
+        this.watchSizeHeight = true;
+        this.watchText = false;
+        this.watchInner = true;
+        this.watchStyleChange = true;
+        this.bindGestureText = '';
+        this.bindGestureWheelText = '';
+        this.bindLongText = false;
+        this.moveLeft = 0;
+        this.moveTop = 0;
+        this.moveWidth = 25;
+        this.moveHeight = 25;
+    }
+    get isMove() {
         return clickgo.dom.is.move;
-    },
-    'isShift': function () {
+    }
+    get isShift() {
         return clickgo.dom.is.shift;
-    },
-    'isCtrl': function () {
+    }
+    get isCtrl() {
         return clickgo.dom.is.ctrl;
     }
-};
-exports.methods = {
-    setGlobalCursor: function (type) {
+    setGlobalCursor(type) {
         clickgo.dom.setGlobalCursor(type);
-    },
-    hasTouchButMouse: function (e) {
+    }
+    hasTouchButMouse(e) {
         clickgo.form.dialog(clickgo.dom.hasTouchButMouse(e) ? 'true' : 'false').catch((e) => { throw e; });
-    },
-    getStyleCount: function () {
+    }
+    getStyleCount() {
         clickgo.form.dialog(clickgo.dom.getStyleCount(this.taskId, 'form').toString()).catch((e) => { throw e; });
-    },
-    getSize: function () {
-        clickgo.form.dialog(JSON.stringify(clickgo.dom.getSize(this.$refs.getSize.$el))).catch((e) => { throw e; });
-    },
-    watchSize: function () {
+    }
+    watchSize() {
         this.watchSizeText = !this.watchSizeText;
         if (this.watchSizeText) {
-            clickgo.dom.watchSize(this.$refs.watchSize.$el, (size) => {
-                clickgo.form.dialog(JSON.stringify(size)).catch((e) => { throw e; });
+            clickgo.dom.watchSize(this.refs.watchSize.$el, () => {
+                clickgo.form.dialog(JSON.stringify({
+                    'width': this.refs.watchSize.$el.offsetWidth,
+                    'height': this.refs.watchSize.$el.offsetHeight
+                })).catch((e) => { throw e; });
             });
         }
         else {
-            clickgo.dom.unwatchSize(this.$refs.watchSize.$el);
+            clickgo.dom.unwatchSize(this.refs.watchSize.$el);
         }
-    },
-    watch: function () {
+    }
+    wwatch() {
         this.watchText = !this.watchText;
         if (this.watchText) {
-            clickgo.dom.watch(this.$refs.watch.$el, () => {
+            clickgo.dom.watch(this.refs.watch.$el, () => {
                 clickgo.form.dialog('Changed.').catch((e) => { throw e; });
             });
         }
         else {
-            clickgo.dom.unwatch(this.$refs.watch.$el);
+            clickgo.dom.unwatch(this.refs.watch.$el);
         }
-    },
-    isWatchStyle: function () {
-        clickgo.form.dialog(clickgo.dom.isWatchStyle(this.$refs.watchStyle.$el) ? 'true' : 'false').catch((e) => { throw e; });
-    },
-    bindGesture: function (e) {
-        clickgo.dom.bindGesture(e, {
-            'dirs': ['top', 'bottom'],
-            handler: (dir) => {
-                this.bindGestureText = dir.slice(0, 1).toUpperCase() + dir.slice(1);
-                const handler = () => __awaiter(this, void 0, void 0, function* () {
-                    yield clickgo.tool.sleep(500);
-                    this.bindGestureText = '';
-                });
-                handler().catch((e) => {
-                    console.log(e);
-                });
+    }
+    isWatchStyle() {
+        clickgo.form.dialog(clickgo.dom.isWatchStyle(this.refs.watchStyle.$el) ? 'true' : 'false').catch((e) => { throw e; });
+    }
+    bindGesture(e) {
+        clickgo.dom.bindGesture(e, (ne, dir) => {
+            if (['top', 'bottom'].includes(dir)) {
+                return true;
             }
-        });
-    },
-    bindGestureWheel: function (e) {
-        clickgo.dom.bindGesture(e, {
-            'dirs': ['top', 'bottom', 'left', 'right'],
-            handler: (dir) => {
-                this.bindGestureWheelText = dir.slice(0, 1).toUpperCase() + dir.slice(1);
-                const handler = () => __awaiter(this, void 0, void 0, function* () {
-                    yield clickgo.tool.sleep(500);
-                    this.bindGestureWheelText = '';
-                });
-                handler().catch((e) => {
-                    console.log(e);
-                });
+            return false;
+        }, (dir) => __awaiter(this, void 0, void 0, function* () {
+            this.bindGestureText = dir.slice(0, 1).toUpperCase() + dir.slice(1);
+            yield clickgo.tool.sleep(500);
+            this.bindGestureText = '';
+        }));
+    }
+    bindGestureWheel(e) {
+        clickgo.dom.bindGesture(e, (ne, dir) => {
+            if (['top', 'bottom', 'left', 'right'].includes(dir)) {
+                return true;
             }
-        });
-    },
-    bindLong: function () {
+            return false;
+        }, (dir) => __awaiter(this, void 0, void 0, function* () {
+            this.bindGestureWheelText = dir.slice(0, 1).toUpperCase() + dir.slice(1);
+            yield clickgo.tool.sleep(500);
+            this.bindGestureWheelText = '';
+        }));
+    }
+    bindLong() {
         clickgo.form.dialog('Press and hold this button.').catch((e) => { throw e; });
-    },
-    bindLongDown: function (e) {
+    }
+    bindLongDown(e) {
         clickgo.dom.bindLong(e, () => __awaiter(this, void 0, void 0, function* () {
             this.bindLongText = true;
             yield clickgo.tool.sleep(500);
             this.bindLongText = false;
         }));
-    },
-    bindDragDown: function (e) {
+    }
+    bindDragDown(e) {
         clickgo.dom.bindDrag(e, {
-            'el': this.$refs.bindDrag,
+            'el': this.refs.bindDrag,
             'data': 'bindDragDownTest'
         });
-    },
-    dragEnter: function (e) {
+    }
+    dragEnter(e) {
         return __awaiter(this, void 0, void 0, function* () {
             e.target.innerText = 'enter';
             yield clickgo.tool.sleep(200);
             e.target.innerText = '';
         });
-    },
-    dragLeave: function (e) {
+    }
+    dragLeave(e) {
         return __awaiter(this, void 0, void 0, function* () {
             e.target.innerText = 'leave';
             yield clickgo.tool.sleep(200);
             e.target.innerText = '';
         });
-    },
-    drop: function (e) {
+    }
+    drop(e) {
         return __awaiter(this, void 0, void 0, function* () {
             e.target.innerText = 'drop';
             yield clickgo.tool.sleep(500);
             e.target.innerText = '';
         });
-    },
-    bindMoveDown: function (e) {
+    }
+    bindMoveDown(e) {
         clickgo.dom.bindMove(e, {
             'areaObject': e.currentTarget,
-            'object': this.$refs.move,
-            move: (ox, oy) => {
-                this.moveLeft += ox;
-                this.moveTop += oy;
+            'object': this.refs.move,
+            move: (e, o) => {
+                this.moveLeft += o.ox;
+                this.moveTop += o.oy;
             }
         });
-    },
-    fullscreen: function () {
+    }
+    fullscreen() {
         clickgo.dom.fullscreen();
     }
-};
-const mounted = function () {
-    clickgo.dom.watchStyle(this.$refs.watchStyle.$el, 'font-size', (n, v) => {
-        clickgo.form.dialog('name: ' + n + ', value: ' + v).catch((e) => { throw e; });
-    });
-};
-exports.mounted = mounted;
+    onMounted() {
+        clickgo.dom.watchStyle(this.refs.watchStyle.$el, 'font-size', (n, v) => {
+            clickgo.form.dialog('name: ' + n + ', value: ' + v).catch((e) => { throw e; });
+        });
+    }
+}
+exports.default = default_1;

package/dist/app/demo/form/method/dom/dom.xml

@@ -1,22 +1,21 @@
-<form width="400" height="450" title="Library dom" padding="10">
-    <overflow direction="v" style="flex: 1;">
+<form width="400" height="450" title="Library dom">
+    <flow direction="v" style="flex: 1; padding: 10px;">
         <layout gutter="10" direction="v" style="flex: 1;">
             <button @click="setGlobalCursor('wait')" style="height: 30px;">setGlobalCursor('wait')</button>
             <button @click="setGlobalCursor" style="height: 30px;">setGlobalCursor()</button>
             <button @click="hasTouchButMouse" style="height: 30px;">hasTouchButMouse()</button>
             <button @click="getStyleCount" style="height: 30px;">getStyleCount({{taskId}}, 'form')</button>
-            <button @click="getSize" ref="getSize" style="height: 30px;">getSize(this.$refs.getSize)</button>
             <layout gutter="10">
                 <button @click="watchSize" ref="watchSize" :style="{'height': (watchSizeHeight ? 30 : 50) + 'px'}" style="padding: 0 5px; flex: 1;">{{watchSizeText ? '' : '!'}}watchSize</button>
                 <button @click="watchSizeHeight = !watchSizeHeight" style="padding: 0 5px; flex: 1;">Change</button>
             </layout>
             <layout gutter="10">
                 <layout ref="watch" align-v="center" align-h="center" style="flex: 1; background: #FFF;">{{watchInner ? 'inner' : 'Inner'}}</layout>
-                <button @click="watch" style="height: 30px; padding: 0 5px;">{{watchText ? '' : '!'}}watch</button>
+                <button @click="wwatch" style="height: 30px; padding: 0 5px;">{{watchText ? '' : '!'}}watch</button>
                 <button @click="watchInner = !watchInner" style="padding: 0 5px;">Change</button>
             </layout>
-            <button @click="watchStyleChange = !watchStyleChange" ref="watchStyle" style="height: 30px;" :style="{'font-size': watchStyleChange ? 'inherit' : '16px'}">watchStyle(this.$refs.watchStyle.$el, 'font-size', (n, v) => { ... })</button>
-            <button @click="isWatchStyle" style="height: 30px;">isWatchStyle(this.$refs.watchStyle.$el)</button>
+            <button @click="watchStyleChange = !watchStyleChange" ref="watchStyle" style="height: 30px;" :style="{'font-size': watchStyleChange ? 'inherit' : '16px'}">watchStyle(this.refs.watchStyle.$el, 'font-size', (n, v) => { ... })</button>
+            <button @click="isWatchStyle" style="height: 30px;">isWatchStyle(this.refs.watchStyle.$el)</button>
             <block @mousedown="bindGesture" @touchstart="bindGesture" style="height: 50px; background: #FFF; display: flex; justify-content: center; align-items: center; color: rgba(0, 0, 0, .5); font-size: 14px;">{{bindGestureText ? bindGestureText : 'bindGesture(e: Touch | Mouse, { ... })'}}</block>
             <block @wheel="bindGestureWheel" style="height: 50px; background: #FFF; display: flex; justify-content: center; align-items: center; color: rgba(0, 0, 0, .5); font-size: 14px;">{{bindGestureWheelText ? bindGestureWheelText : 'bindGesture(e: Wheel, { ... })'}}</block>
             <button @click="bindLong" ref="bindLong" @mousedown="bindLongDown" @touchstart="bindLongDown" style="height: 30px;">{{bindLongText ? 'Yeah!' : 'bindLong(e, () => { ... })'}}</button>
@@ -51,5 +50,5 @@
             <label>clickgo.form.is.shift: {{isShift ? 'true' : 'false'}}</label>
             <label>clickgo.form.is.ctrl: {{isCtrl ? 'true' : 'false'}}</label>
         </layout>
-    </overflow>
+    </flow>
 </form>

package/dist/app/demo/form/method/form/form.js

@@ -15,8 +15,8 @@ class default_1 extends clickgo.form.AbstractForm {
         super(...arguments);
         this.fid = '0';
         this.tid = '0';
-        this.type = 'primary';
-        this.progress = 'noraml';
+        this.type = ['primary'];
+        this.progress = ['noraml'];
         this.dr = '';
         this.setTopMostValue = false;
     }
@@ -45,11 +45,11 @@ class default_1 extends clickgo.form.AbstractForm {
         clickgo.form.changeFocus(parseInt(this.fid));
     }
     getList() {
-        let str = JSON.stringify(clickgo.form.getList(this.taskId));
+        let str = JSON.stringify(clickgo.form.getList(parseInt(this.tid)));
         str = str.replace(/"icon":"(.*?)"/g, function (t, t1) {
             return `"icon":"${t1 ? (t1.slice(0, 10) + '...') : t1}"`;
         });
-        clickgo.form.dialog(`<overflow direction="v" style="width: 200px; height: 80px;">${str}</overflow>`).catch((e) => { throw e; });
+        clickgo.form.dialog(`<flow direction="v" style="width: 200px; height: 80px;">${str}</flow>`).catch((e) => { throw e; });
     }
     getMaxZIndexID() {
         const fid = clickgo.form.getMaxZIndexID();
@@ -86,7 +86,7 @@ class default_1 extends clickgo.form.AbstractForm {
     notify() {
         return __awaiter(this, void 0, void 0, function* () {
             let icon = null;
-            if (this.progress === 'progress + icon') {
+            if (this.progress[0] === 'progress + icon') {
                 icon = yield clickgo.fs.getContent('/package/res/icon.svg');
             }
             if (icon instanceof Blob) {
@@ -95,11 +95,11 @@ class default_1 extends clickgo.form.AbstractForm {
             const nid = clickgo.form.notify({
                 'title': 'Notify',
                 'content': 'Content',
-                'type': this.type,
-                'progress': (this.progress === 'progress + icon') ? true : false,
+                'type': this.type[0],
+                'progress': (this.progress[0] === 'progress + icon') ? true : false,
                 'icon': icon
             });
-            if (this.progress === 'progress + icon') {
+            if (this.progress[0] === 'progress + icon') {
                 clickgo.form.notifyProgress(nid, 12);
                 yield clickgo.tool.sleep(1000);
                 clickgo.form.notifyProgress(nid, 30);

package/dist/app/demo/form/method/form/form.xml

@@ -1,5 +1,5 @@
 <form width="350" height="400" title="Library form">
-    <overflow direction="v" style="flex: 1; padding: 10px;">
+    <flow direction="v" style="flex: 1; padding: 10px;">
         <layout gutter="10" direction="v" style="flex: 1;">
             <label>This form id: {{formId}}</label>
             <button @click="min" style="height: 30px;">min({{formId}})</button>
@@ -30,8 +30,8 @@
                 <button @click="notify" style="padding: 0 10px;">notify({ ... })</button>
             </layout>
             <button @click="showPop" style="height: 30px;">showPop(e.currentTarget, this.refs.pop)</button>
-            <teleport to="#cg-pop-list">
-                <block ref="pop" data-cg-pop style="border: solid 1px #000; background: #FFF; width: 200px; height: 100px; display: flex; justify-content: center; align-items: center;">refs.pop</block>
+            <teleport to="system">
+                <block ref="pop" style="border: solid 1px #000; background: #FFF; width: 200px; height: 100px; display: flex; justify-content: center; align-items: center;">refs.pop</block>
             </teleport>
             <label>Dialog result: {{dr}}.</label>
             <button @click="dialog" style="height: 30px;">dialog('Hello world!')</button>
@@ -44,5 +44,5 @@
             <button @click="flash" style="height: 30px;">flash({{formId}})</button>
             <button @click="showLauncher" style="height: 30px;">showLauncher()</button>
         </layout>
-    </overflow>
+    </flow>
 </form>