clickgo 3.1.2-dev11 → 3.1.3-dev12

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

@@ -1,50 +1,51 @@
 <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>
             </layout>
-        </overflow>
+        </flow>
     </tab>
 </form>

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/core/core.js

@@ -9,17 +9,20 @@ 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 {
+    get config() {
+        return JSON.stringify(clickgo.core.config, null, 4).replace(/"icon": "([\s\S]+?)"/g, '"icon": "data:image/..."');
     }
-};
-exports.methods = {
-    getAvailArea: function () {
+    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()));
         });
     }
-};
+}
+exports.default = default_1;

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

@@ -1,7 +1,8 @@
 <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>
 </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>

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

@@ -9,15 +9,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mounted = exports.methods = exports.data = void 0;
 const clickgo = require("clickgo");
-exports.data = {
-    'path': '/',
-    'list': [],
-    'val': ''
-};
-exports.methods = {
-    open: function (path) {
+const text_1 = require("./text");
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.ppath = '/';
+        this.list = [];
+        this.val = [];
+    }
+    open(path) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!path.endsWith('/')) {
                 path += '/';
@@ -30,21 +31,21 @@ exports.methods = {
                     'value': path + item.name
                 });
             }
-            this.path = path;
+            this.ppath = path;
         });
-    },
-    dblclick: function () {
+    }
+    dblclick() {
         return __awaiter(this, void 0, void 0, function* () {
-            const r = yield clickgo.fs.isFile(this.val);
+            const r = yield clickgo.fs.isFile(this.val[0]);
             if (r) {
-                const extlio = this.val.lastIndexOf('.');
+                const extlio = this.val[0].lastIndexOf('.');
                 if (extlio === -1) {
                     yield clickgo.form.dialog('This extension is not supported.');
                     return;
                 }
-                const ext = this.val.toLowerCase().slice(extlio + 1);
+                const ext = this.val[0].toLowerCase().slice(extlio + 1);
                 if (['xml', 'js', 'ts', 'json', 'css', 'html', 'php'].includes(ext)) {
-                    let content = yield clickgo.fs.getContent(this.val);
+                    let content = yield clickgo.fs.getContent(this.val[0]);
                     if (!content) {
                         yield clickgo.form.dialog('This file cannot be opened.');
                         return;
@@ -52,37 +53,37 @@ exports.methods = {
                     if (content instanceof Blob) {
                         content = yield clickgo.tool.blob2Text(content);
                     }
-                    const f = yield clickgo.form.create('text');
+                    const f = yield text_1.default.create({
+                        'title': this.val[0].slice(this.val[0].lastIndexOf('/') + 1),
+                        'content': content
+                    });
                     if (typeof f === 'number') {
                         return;
                     }
-                    clickgo.form.send(f.id, {
-                        'title': this.val.slice(this.val.lastIndexOf('/') + 1),
-                        'content': content
-                    });
+                    f.show();
                     return;
                 }
-                yield clickgo.form.dialog('This extension is not supported.');
+                yield clickgo.form.dialog('The extension "' + ext + '" is not supported.');
                 return;
             }
-            yield this.open(this.val);
+            yield this.open(this.val[0]);
         });
-    },
-    up: function () {
+    }
+    up() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.path === '/') {
+            if (this.ppath === '/') {
                 return;
             }
-            const path = this.path.slice(0, -1);
+            const path = this.ppath.slice(0, -1);
             const lif = path.lastIndexOf('/');
             const npath = path.slice(0, lif + 1);
             yield this.open(npath);
         });
     }
-};
-const mounted = function () {
-    return __awaiter(this, void 0, void 0, function* () {
-        yield this.open('/');
-    });
-};
-exports.mounted = mounted;
+    onMounted() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.open('/');
+        });
+    }
+}
+exports.default = default_1;

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

@@ -1,7 +1,7 @@
 <form width="350" height="400" title="Library fs" padding="10">
     <layout gutter="10" direction="v" style="flex: 1;">
         <label>Double click the item below:</label>
-        <block style="background: #000; color: #FFF; padding: 5px;">{{path}}</block>
+        <block style="background: #000; color: #FFF; padding: 5px;">{{ppath}}</block>
         <list v-model="val" :data="list" @dblclick="dblclick" style="flex: 1; height: 0;"></list>
         <button style="height: 30px;" @click="up">Up</button>
     </layout>