clickgo 3.0.0-dev

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

@@ -0,0 +1,163 @@
+"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 });
+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 () {
+        return clickgo.dom.is.move;
+    },
+    'isShift': function () {
+        return clickgo.dom.is.shift;
+    },
+    'isCtrl': function () {
+        return clickgo.dom.is.ctrl;
+    }
+};
+exports.methods = {
+    setGlobalCursor: function (type) {
+        clickgo.dom.setGlobalCursor(type);
+    },
+    hasTouchButMouse: function (e) {
+        clickgo.form.dialog(clickgo.dom.hasTouchButMouse(e) ? 'true' : 'false').catch((e) => { throw e; });
+    },
+    getStyleCount: function () {
+        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 () {
+        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; });
+            });
+        }
+        else {
+            clickgo.dom.unwatchSize(this.$refs.watchSize.$el);
+        }
+    },
+    watch: function () {
+        this.watchText = !this.watchText;
+        if (this.watchText) {
+            clickgo.dom.watch(this.$refs.watch.$el, () => {
+                clickgo.form.dialog('Changed.').catch((e) => { throw e; });
+            });
+        }
+        else {
+            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);
+                });
+            }
+        });
+    },
+    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);
+                });
+            }
+        });
+    },
+    bindLong: function () {
+        clickgo.form.dialog('Press and hold this button.').catch((e) => { throw e; });
+    },
+    bindLongDown: function (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) {
+        clickgo.dom.bindDrag(e, {
+            'el': this.$refs.bindDrag,
+            'data': 'bindDragDownTest'
+        });
+    },
+    dragEnter: function (e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            e.target.innerText = 'enter';
+            yield clickgo.tool.sleep(200);
+            e.target.innerText = '';
+        });
+    },
+    dragLeave: function (e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            e.target.innerText = 'leave';
+            yield clickgo.tool.sleep(200);
+            e.target.innerText = '';
+        });
+    },
+    drop: function (e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            e.target.innerText = 'drop';
+            yield clickgo.tool.sleep(500);
+            e.target.innerText = '';
+        });
+    },
+    bindMoveDown: function (e) {
+        clickgo.dom.bindMove(e, {
+            'areaObject': e.currentTarget,
+            'object': this.$refs.move,
+            move: (ox, oy) => {
+                this.moveLeft += ox;
+                this.moveTop += oy;
+            }
+        });
+    },
+    fullscreen: function () {
+        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;

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

@@ -0,0 +1,10 @@
+.dropLine {
+    display: flex; flex: 1; margin-bottom: 5px;
+
+    > block {
+        border: 1px solid rgba(0, 0, 0, 0.3); background-color: #FFF; flex: 1; margin-right: 5px; display: flex; justify-content: center; align-items: center;
+        &[data-cg-hover] {
+            background-color: #333; color: #FFF;
+        }
+    }
+}

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

@@ -0,0 +1,55 @@
+<form width="400" height="450" title="Library dom" padding="10">
+    <overflow direction="v" style="flex: 1;">
+        <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="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>
+            <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>
+            <block style="height: 100px; display: flex; background: #FFF;">
+                <block style="flex: 1; display: flex; justify-content: center; align-items: center;">
+                    <block @mousedown="bindDragDown" @touchstart="bindDragDown" ref="bindDrag" style="border: 1px solid rgba(0, 0, 0, 0.3); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center;">Drag</block>
+                </block>
+                <block style="margin-left: 10px; flex: 1; display: flex; flex-direction: column; padding: 5px 0 0 5px;">
+                    <block class="dropLine">
+                        <block data-cg-drop @dragenter="dragEnter" @dragleave="dragLeave" @drop="drop"></block>
+                        <block data-cg-drop @dragenter="dragEnter" @dragleave="dragLeave" @drop="drop"></block>
+                        <block data-cg-drop @dragenter="dragEnter" @dragleave="dragLeave" @drop="drop"></block>
+                    </block>
+                    <block class="dropLine">
+                        <block data-cg-drop @dragenter="dragEnter" @dragleave="dragLeave" @drop="drop"></block>
+                        <block data-cg-drop @dragenter="dragEnter" @dragleave="dragLeave" @drop="drop"></block>
+                        <block data-cg-drop @dragenter="dragEnter" @dragleave="dragLeave" @drop="drop"></block>
+                    </block>
+                    <block class="dropLine">
+                        <block data-cg-drop @dragenter="dragEnter" @dragleave="dragLeave" @drop="drop"></block>
+                        <block data-cg-drop @dragenter="dragEnter" @dragleave="dragLeave" @drop="drop"></block>
+                        <block data-cg-drop @dragenter="dragEnter" @dragleave="dragLeave" @drop="drop"></block>
+                    </block>
+                </block>
+            </block>
+            <block @mousedown="bindMoveDown" @touchstart="bindMoveDown" style="height: 50px; background: #FFF; display: flex; justify-content: center; align-items: center; color: rgba(0, 0, 0, .5); font-size: 14px; position: relative;">
+                <label>bindMove(e, { ... })</label>
+                <block ref="move" style="background: #07c160; position: absolute;" :style="{'left': moveLeft + 'px', 'top': moveTop + 'px', 'width': moveWidth + 'px', 'height': moveHeight + 'px'}" @dblclick="moveWidth = moveWidth === 25 ? 50 : 25;moveHeight = moveHeight === 25 ? 50 : 25"></block>
+            </block>
+            <button @click="fullscreen" style="height: 30px;">fullscreen()</button>
+            <label>clickgo.form.is.move: {{isMove ? 'true' : 'false'}}</label>
+            <label>clickgo.form.is.shift: {{isShift ? 'true' : 'false'}}</label>
+            <label>clickgo.form.is.ctrl: {{isCtrl ? 'true' : 'false'}}</label>
+        </layout>
+    </overflow>
+</form>

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

@@ -0,0 +1 @@
+button{height:30px}

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

@@ -0,0 +1,217 @@
+"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 });
+exports.mounted = exports.receive = exports.methods = exports.data = void 0;
+const clickgo = require("clickgo");
+exports.data = {
+    'fid': '0',
+    'sendValue': 'sendValue',
+    'tid': '0',
+    'type': 'primary',
+    'progress': 'noraml',
+    'dialogResult': '',
+    'setTopMostValue': false
+};
+exports.methods = {
+    min: function () {
+        clickgo.form.min();
+    },
+    max: function () {
+        clickgo.form.max();
+    },
+    close: function () {
+        clickgo.form.close();
+    },
+    bindResize: function (e) {
+        clickgo.form.bindResize(e, 'rb');
+    },
+    bindDrag: function (e) {
+        clickgo.form.bindDrag(e);
+    },
+    getTaskId: function () {
+        clickgo.form.dialog(clickgo.form.getTaskId(parseInt(this.fid)).toString()).catch((e) => { throw e; });
+    },
+    get: function () {
+        clickgo.form.dialog(JSON.stringify(clickgo.form.get(parseInt(this.fid)))).catch((e) => { throw e; });
+    },
+    send: function () {
+        clickgo.form.send(parseInt(this.fid), {
+            'key': this.sendValue
+        });
+    },
+    changeFocus: function () {
+        clickgo.form.changeFocus(parseInt(this.fid));
+    },
+    getList: function () {
+        let str = JSON.stringify(clickgo.form.getList(this.taskId));
+        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; });
+    },
+    getMaxZIndexID: function () {
+        const fid = clickgo.form.getMaxZIndexID();
+        clickgo.form.dialog(JSON.stringify(fid)).catch((e) => { throw e; });
+    },
+    getRectByBorder: function () {
+        const size = clickgo.form.getRectByBorder('rb');
+        clickgo.form.dialog(JSON.stringify(size)).catch((e) => { throw e; });
+    },
+    showCircular: function (e) {
+        clickgo.form.showCircular(e.clientX, e.clientY);
+    },
+    showRectangle: function (e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            clickgo.form.showRectangle(e.clientX, e.clientY, 'rb');
+            yield clickgo.tool.sleep(1000);
+            clickgo.form.hideRectangle();
+        });
+    },
+    showDrag: function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            clickgo.form.showDrag();
+            const rect = this.$refs.showDrag.$el.getBoundingClientRect();
+            clickgo.form.moveDrag({
+                'left': rect.left,
+                'top': rect.top,
+                'width': rect.width,
+                'height': rect.height
+            });
+            yield clickgo.tool.sleep(1000);
+            clickgo.form.hideDrag();
+        });
+    },
+    notify: function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            let icon = null;
+            if (this.progress === 'progress + icon') {
+                icon = yield clickgo.fs.getContent('/package/res/icon.svg');
+            }
+            if (icon instanceof Blob) {
+                icon = yield clickgo.tool.blob2DataUrl(icon);
+            }
+            const nid = clickgo.form.notify({
+                'title': 'Notify',
+                'content': 'Content',
+                'type': this.type,
+                'progress': (this.progress === 'progress + icon') ? true : false,
+                'icon': icon
+            });
+            if (this.progress === 'progress + icon') {
+                clickgo.form.notifyProgress(nid, 12);
+                yield clickgo.tool.sleep(1000);
+                clickgo.form.notifyProgress(nid, 30);
+                yield clickgo.tool.sleep(300);
+                clickgo.form.notifyProgress(nid, 50);
+                yield clickgo.tool.sleep(700);
+                clickgo.form.notifyProgress(nid, 75);
+                yield clickgo.tool.sleep(1000);
+                clickgo.form.notifyProgress(nid, 100);
+            }
+        });
+    },
+    showPop: function (e) {
+        if (!e.currentTarget) {
+            return;
+        }
+        clickgo.form.showPop(e.currentTarget, this.$refs.pop, 'v');
+    },
+    createParam: function () {
+        clickgo.form.create({
+            'layout': '<form width=\'300\' height=\'300\' title=\'normal\'></form>'
+        }).catch((e) => { throw e; });
+    },
+    createPath: function () {
+        clickgo.form.create('test').then((e) => { console.log(e); }).catch((e) => { throw e; });
+    },
+    createTop: function () {
+        clickgo.form.create({
+            'layout': '<form width=\'300\' height=\'300\' title=\'normal\'></form>',
+            'topMost': true
+        }).catch((e) => { throw e; });
+    },
+    dialog: function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.dialogResult = yield clickgo.form.dialog('Hello world!');
+        });
+    },
+    dialogLong: function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.dialogResult = yield clickgo.form.dialog('longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong');
+        });
+    },
+    dialogTitle: function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.dialogResult = yield clickgo.form.dialog({
+                'title': 'Title',
+                'content': 'Hello world!'
+            });
+        });
+    },
+    dialogButtons: function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.dialogResult = yield clickgo.form.dialog({
+                'content': 'Hello world!',
+                'buttons': ['A', 'B', 'C']
+            });
+        });
+    },
+    dialogCannot: function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.dialogResult = yield clickgo.form.dialog({
+                'content': 'Hello world!',
+                'buttons': ['Do not close', 'Close'],
+                'select': (e, button) => {
+                    if (button === 'Do not close') {
+                        e.preventDefault();
+                    }
+                }
+            });
+        });
+    },
+    confirm: function (cancel) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.dialogResult = yield clickgo.form.confirm({
+                'content': 'Hello world?',
+                'cancel': cancel
+            });
+            if (typeof this.dialogResult === 'boolean') {
+                this.dialogResult = this.dialogResult ? 'true (boolean)' : 'false (boolean)';
+            }
+            else {
+                this.dialogResult = this.dialogResult.toString() + ' (number)';
+            }
+        });
+    },
+    setTopMost: function () {
+        this.setTopMostValue = !this.setTopMostValue;
+        clickgo.form.setTopMost(this.setTopMostValue);
+    },
+    flash: function () {
+        clickgo.form.flash();
+    },
+    hide: function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            clickgo.form.hide();
+            yield clickgo.tool.sleep(1000);
+            clickgo.form.show();
+        });
+    }
+};
+const receive = function (obj) {
+    clickgo.form.dialog(JSON.stringify(obj)).catch((e) => { throw e; });
+};
+exports.receive = receive;
+const mounted = function () {
+    this.fid = this.formId;
+    this.tid = this.taskId;
+};
+exports.mounted = mounted;

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

@@ -0,0 +1,3 @@
+button {
+    height: 30px;
+}

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

@@ -0,0 +1,56 @@
+<form width="350" height="400" title="Library form" padding="10">
+    <overflow direction="v" style="flex: 1;">
+        <layout gutter="10" direction="v" style="flex: 1;">
+            <button @click="min" style="height: 30px;">min()</button>
+            <button @click="max" style="height: 30px;">max()</button>
+            <button @click="close" style="height: 30px;">close()</button>
+            <label @mousedown="bindResize" @touchstart="bindResize" style="padding: 20px; background: rgba(0, 0, 0, .1); cursor: se-resize;">bindResize(e, 'rb')</label>
+            <label @mousedown="bindDrag" @touchstart="bindDrag" style="padding: 20px; background: rgba(0, 0, 0, .1);">bindDrag(e)</label>
+            <layout gutter="10" align-v="center">
+                <label>Form ID:</label>
+                <text v-model="fid" style="flex: 1; width: 0; height: 30px;"></text>
+            </layout>
+            <button @click="getTaskId" style="height: 30px;">getTaskId({{fid}})</button>
+            <button @click="get" style="height: 30px;">get({{fid}})</button>
+            <layout gutter="10" align-v="center">
+                <label>Send: </label>
+                <text v-model="sendValue" style="flex: 1; width: 0; height: 30px;"></text>
+                <button @click="send" style="padding: 0 10px;">send({{fid}}, {'key': '{{sendValue}}'})</button>
+            </layout>
+            <button @click="changeFocus" style="height: 30px;">changeFocus({{fid}})</button>
+            <layout gutter="10" align-v="center">
+                <label>Task ID:</label>
+                <text v-model="tid" style="flex: 1; width: 0; height: 30px;"></text>
+                <button @click="getList" style="padding: 0 10px;">getList({{tid}})</button>
+            </layout>
+            <button @click="getMaxZIndexID" style="height: 30px;">getMaxZIndexID()</button>
+            <button @click="getRectByBorder" style="height: 30px;">getRectByBorder('rb')</button>
+            <button @click="showCircular" style="height: 30px;">showCircular(x, y)</button>
+            <button @click="showRectangle" style="height: 30px;">showRectangle(x, y, 'rb')</button>
+            <button @click="showDrag" ref="showDrag" style="height: 30px;">showDrag()</button>
+            <layout gutter="10">
+                <select v-model="type" :data="['primary', 'info', 'warning', 'danger']"></select>
+                <select v-model="progress" :data="['normal', 'progress + icon']" style="flex: 1; width: 0;"></select>
+                <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>
+            <button @click="createParam" style="height: 30px;">create({'layout':'xxx'})</button>
+            <button @click="createPath" style="height: 30px;">create('test')</button>
+            <button @click="createTop" style="height: 30px;">create({'layout':'xxx','topMost':true})</button>
+            <label>Dialog result: {{dialogResult}}.</label>
+            <button @click="dialog" style="height: 30px;">dialog('Hello world!')</button>
+            <button @click="dialogLong">dialog('long...')</button>
+            <button @click="dialogTitle" style="height: 30px;">dialog({'title':'Title','content':'Hello world!'})</button>
+            <button @click="dialogButtons" style="height: 30px;">dialog({'content':'Hello world!','buttons':['A','B','C']})</button>
+            <button @click="dialogCannot" style="height: 30px;">Dialog can not be close</button>
+            <button @click="confirm(false)" style="height: 30px;">confirm('confirm')</button>
+            <button @click="confirm(true)" style="height: 30px;">confirm({'content':'confirm','cancel':true})</button>
+            <button @click="setTopMost" style="height: 30px;">setTopMost({{setTopMostValue ? 'false' : 'true'}})</button>
+            <button @click="flash" style="height: 30px;">flash()</button>
+            <button @click="hide" style="height: 30px;">hide() and show()</button>
+        </layout>
+    </overflow>
+</form>

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

@@ -0,0 +1,5 @@
+<form width="200" height="200" title="From path">
+    <layout align-v="center" align-h="center" style="flex: 1; width: 0;">
+        <label>Haha!</label>
+    </layout>
+</form>

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

@@ -0,0 +1,88 @@
+"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 });
+exports.mounted = exports.methods = exports.data = void 0;
+const clickgo = require("clickgo");
+exports.data = {
+    'path': '/',
+    'list': [],
+    'val': ''
+};
+exports.methods = {
+    open: function (path) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!path.endsWith('/')) {
+                path += '/';
+            }
+            this.list = [];
+            const ls = yield clickgo.fs.readDir(path);
+            for (const item of ls) {
+                this.list.push({
+                    'label': (item.isDirectory() ? '[FOLD]' : (item.isSymbolicLink() ? '[SYMB]' : '[FILE]')) + ' ' + item.name,
+                    'value': path + item.name
+                });
+            }
+            this.path = path;
+        });
+    },
+    dblclick: function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            const r = yield clickgo.fs.isFile(this.val);
+            if (r) {
+                const extlio = this.val.lastIndexOf('.');
+                if (extlio === -1) {
+                    yield clickgo.form.dialog('This extension is not supported.');
+                    return;
+                }
+                const ext = this.val.toLowerCase().slice(extlio + 1);
+                if (['xml', 'js', 'ts', 'json', 'css', 'html', 'php'].includes(ext)) {
+                    let content = yield clickgo.fs.getContent(this.val);
+                    if (!content) {
+                        yield clickgo.form.dialog('This file cannot be opened.');
+                        return;
+                    }
+                    if (content instanceof Blob) {
+                        content = yield clickgo.tool.blob2Text(content);
+                    }
+                    const f = yield clickgo.form.create('text');
+                    if (typeof f === 'number') {
+                        return;
+                    }
+                    clickgo.form.send(f.id, {
+                        'title': this.val.slice(this.val.lastIndexOf('/') + 1),
+                        'content': content
+                    });
+                    return;
+                }
+                yield clickgo.form.dialog('This extension is not supported.');
+                return;
+            }
+            yield this.open(this.val);
+        });
+    },
+    up: function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.path === '/') {
+                return;
+            }
+            const path = this.path.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;

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

@@ -0,0 +1,8 @@
+<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>
+        <list v-model="val" :data="list" @dblclick="dblclick" style="flex: 1; height: 0;"></list>
+        <button style="height: 30px;" @click="up">Up</button>
+    </layout>
+</form>

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.receive = exports.data = void 0;
+exports.data = {
+    'title': 'Text viewer',
+    'content': ''
+};
+const receive = function (obj) {
+    if (obj.taskId !== this.taskId) {
+        return;
+    }
+    this.title = obj.title + ' - Text viewer';
+    this.content = obj.content;
+};
+exports.receive = receive;

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

@@ -0,0 +1,3 @@
+<form width="350" height="400" :title="title" padding="10">
+    <text v-model="content" style="flex: 1;" multi readonly></text>
+</form>

package/dist/app/demo/form/method/task/locale1.json

@@ -0,0 +1,3 @@
+{
+    "File name": "File name"
+}

package/dist/app/demo/form/method/task/locale2.json

@@ -0,0 +1,3 @@
+{
+    "File name": "文件名"
+}