clickgo 3.0.0-dev

package/dist/app/demo/form/control/view/view.scss

@@ -0,0 +1,18 @@
+.border {
+    border: 1px solid rgba(0, 0, 0, .1);
+}
+
+.custom {
+    margin: auto; background: #07c160; width: 60%; height: 30px; color: #FFF; text-align: center; line-height: 30px;
+}
+
+.rightborder {
+    border-right: 1px solid rgba(0, 0, 0, .1);
+}
+
+.block {
+    width: 200px; height: 200px; padding: 0 10px 10px 0;
+}
+.block block {
+    background: #07c160; color: #FFF; display: flex; align-items: center; justify-content: center; flex: 1;
+}

package/dist/app/demo/form/control/view/view.xml

@@ -0,0 +1,94 @@
+<form title="View" width="450" height="450" min-width="300" min-height="400" padding="10">
+    <tab v-model="ntab" :tabs="['normal', 'adaptation', 'beyond', 'nest']" style="flex: 1; width: 0;">
+        <!-- 默认 -->
+        <layout v-if="ntab === 'normal'" gutter="10" direction="v" style="flex: 1; width: 0; padding: 10px;">
+            <!-- v -->
+            <layout gutter="10" style="flex: 1; height: 0;">
+                <view v-model:scroll-left="sLeft1" v-model:scroll-top="sTop1" direction="v" :selection="selection" @select="area = $event" @resize="c1 = $event" @change="l1 = $event" @scrollborder="scrollborder($event, 'v')" :style="{'line-height': style ? '1.5' : undefined, 'padding': style ? '10px' : undefined}" class="border" style="flex: 1; width: 0;">
+                    <block v-for="(line, index) of lineCount">
+                        <button v-if="index > 0 && index % 10 === 0" style="height: 30px;">test</button>
+                        <block v-else>Line {{line}}, index: {{index}}.</block>
+                    </block>
+                </view>
+                <layout class="border" style="flex: 1; width: 0;">
+                    <view v-model:scroll-left="sLeft2" v-model:scroll-top="sTop2" direction="v" :selection="selection" @select="area = $event" @resize="c2 = $event" @change="l2 = $event" @scrollborder="scrollborder($event, 'v')" :style="{'line-height': style ? '1.5' : undefined, 'padding': style ? '10px' : undefined}" style="flex: 1; width: 0;">
+                        <block v-for="(line, index) of lineCount">
+                            <block v-if="index > 0 && index % 10 === 0" class="custom">Custom</block>
+                            <block v-else>Line {{line}}, index: {{index}}.</block>
+                        </block>
+                    </view>
+                    <scroll :length="l2" :client="c2" v-model:scroll-offset="sTop2" style="width: 20px;"></scroll>
+                </layout>
+            </layout>
+            <label>Scroll Left: {{sLeft1}}, Scroll Top: {{sTop1}}, Length: {{l1}}, Client: {{c1}}.</label>
+            <label>Scroll Left: {{sLeft2}}, Scroll Top: {{sTop2}}, Length: {{l2}}, Client: {{c2}}.</label>
+            <!-- h -->
+            <view v-model:scroll-left="sLeft3" v-model:scroll-top="sTop3" :selection="selection" @select="area = $event" @resize="c3 = $event" @change="l3 = $event" @scrollborder="scrollborder($event, 'h')" :style="{'line-height': style ? '1.5' : undefined, 'padding': style ? '10px' : undefined}" class="border" style="flex: 1; height: 0;">
+                <layout v-for="(line, index) of lineCount" align-v="center" align-h="center" direction="v" class="rightborder" style="width: 80px;">
+                    <label>Col {{line}}.</label>
+                    <label>index: {{index}}.</label>
+                </layout>
+            </view>
+            <label>Scroll Left: {{sLeft3}}, Scroll Top: {{sTop3}}, Length: {{l3}}, Client: {{c3}}.</label>
+            <label>Selection area: {{area}}</label>
+            <!-- button list -->
+            <layout gutter="10">
+                <select v-model="lineValue" :data="[10, 50]" style="flex: 1; width: 0;"></select>
+                <button @click="lineCount += lineValue" style="height: 30px; padding: 0 10px;">Add lines</button>
+                <button @click="lineCount -= lineValue;if(lineCount < 0) {lineCount = 0;}" style="height: 30px; padding: 0 10px;">Remove lines</button>
+            </layout>
+            <layout gutter="10">
+                <button @click="gesture = !gesture" style="flex: 1; width: 0; height: 30px;">{{gesture ? '' : '!'}}gesture</button>
+                <button @click="selection = !selection" style="flex: 1; width: 0; height: 30px;">{{selection ? '' : '!'}}selection</button>
+                <button @click="style = !style" style="flex: 1; width: 0; height: 30px;">{{style ? '' : '!'}}style</button>
+            </layout>
+        </layout>
+        <!-- 自适应 -->
+        <layout v-else-if="ntab === 'adaptation'" gutter="10" direction="v" style="flex: 1; width: 0; padding: 10px;">
+            <layout :direction="direction ? 'h' : 'v'" style="flex: 1; height: 0;">
+                <view class="border" v-model:scroll-left="sLeft4" v-model:scroll-top="sTop4" :direction="direction ? 'h' : 'v'" @resize="c4 = $event" @change="l4 = $event" @scrollborder="scrollborder($event, 'v')">
+                    <layout v-for="(line, index) of lineCount" align-v="center" direction="v" :class="[direction && 'rightborder']">
+                        <button v-if="index > 0 && index % 10 === 0" style="height: 30px;" :style="{'width': direction ? '30px' : undefined}">test</button>
+                        <block v-else :style="{'width': direction ? '80px' : undefined, 'text-align': direction ? 'center' : undefined}">Line {{line}}</block>
+                    </layout>
+                </view>
+            </layout>
+            <label>Scroll Left: {{sLeft4}}, Scroll Top: {{sTop4}}, Length: {{l4}}, Client: {{c4}}.</label>
+            <layout gutter="10">
+                <button @click="lineCount += 10" style="flex: 1; width: 0; height: 30px;">Add 10 lines</button>
+                <button @click="lineCount -= 10;if(lineCount < 0) {lineCount = 0;}" style="flex: 1; width: 0; height: 30px;">Remove 10 lines</button>
+                <button @click="direction = !direction" style="flex: 1; height: 30px;">Direction</button>
+            </layout>
+        </layout>
+        <!-- 内容超出 -->
+        <layout v-else-if="ntab === 'beyond'" gutter="10" direction="v" style="flex: 1; width: 0; padding: 10px;">
+            <layout gutter="10" align-v="center">
+                <button @click="dir5 = (dir5 === 'h' ? 'v' : 'h')" style="flex: 1; width: 0; height: 30px;">Change direction</button>
+                <button @click="line5 = (line5 === 10 ? 1 : 10)" style="flex: 1; width: 0; height: 30px;">Change data</button>
+                <label>Direction: {{dir5}}</label>
+            </layout>
+            <view v-model:scroll-left="sLeft5" v-model:scroll-top="sTop5" content="max" @resize="c5 = $event" @change="l5 = $event" :direction="dir5" class="border" style="flex: 1; height: 0; padding: 10px 0 0 10px;">
+                <layout v-for="i of line5" :direction="dir5 === 'h' ? 'v' : 'h'">
+                    <layout v-for="j of 10" class="block">
+                        <block>{{i}}-{{j}}</block>
+                    </layout>
+                </layout>
+            </view>
+            <label>Scroll Left: {{sLeft5}}, Scroll Top: {{sTop5}}, Length: {{l5}}, Client: {{c5}}.</label>
+        </layout>
+        <!-- 嵌套 -->
+        <layout v-else style="flex: 1; width: 0; padding: 10px;">
+            <view class="border" direction="v" @resizen="c6 = $event" solo="false" style="flex: 1; width: 0;">
+                <template v-for="i of 100">
+                    <view v-if="i === 30" class="border" direction="v" solo="false" style="height: 50px;">
+                        <label v-for="k of 50">Line {{k}}</label>
+                    </view>
+                    <view v-else-if="i === 40" class="border" solo="false" style="height: 50px;" :style="{'width': c6 + 'px'}">
+                        <label v-for="k of 50" class="rightborder" style="width: 80px;">Line {{k}}</label>
+                    </view>
+                    <label v-else>Line {{i}}</label>
+                </template>
+            </view>
+        </layout>
+    </tab>
+</form>

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

@@ -0,0 +1 @@
+@keyframes flash{0%,50%{border:solid 1px rgba(0,0,0,.8);color:initial}51%,100%{border-color:#000;background-color:#333;color:#fff}}.item{border:solid 1px #333;padding:5px;min-height:30px;min-width:150px}.item.focus{background-color:#fff;color:#333}.item:hover{background-color:rgba(0,0,0,.1)}.item:active{background-color:#333;color:#fff}.item.flash{animation:flash .2s linear infinite}

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

@@ -0,0 +1,129 @@
+"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 = {
+    'flist': {},
+    'list': []
+};
+exports.methods = {
+    'pushConsole': function (name, text) {
+        const date = new Date();
+        this.list.unshift({
+            'time': date.getHours().toString() + ':' + date.getMinutes().toString() + ':' + date.getSeconds().toString(),
+            'name': name,
+            'text': text
+        });
+    },
+    'changeFocus': function (fid) {
+        clickgo.form.changeFocus(parseInt(fid));
+    }
+};
+const mounted = function () {
+    const list = clickgo.task.getList();
+    for (const taskId in list) {
+        const flist = clickgo.form.getList(parseInt(taskId));
+        for (const fid in flist) {
+            this.flist[fid] = {
+                'title': flist[fid].title,
+                'icon': flist[fid].icon,
+                'stateMax': flist[fid].stateMax,
+                'stateMin': flist[fid].stateMin,
+                'show': flist[fid].show,
+                'focus': flist[fid].focus,
+                'flash': false
+            };
+        }
+    }
+    clickgo.core.setSystemEventListener('formCreated', (taskId, formId, title, icon) => {
+        this.flist[formId] = {
+            'title': title,
+            'icon': icon,
+            'stateMax': false,
+            'stateMin': false,
+            'show': false,
+            'focus': false,
+            'flash': false
+        };
+        this.pushConsole('formCreated', `taskId: ${taskId}, formId: ${formId}, title: ${title}, icon: ${icon ? icon.slice(0, 10) + '...' : 'null'}`);
+    });
+    clickgo.core.setSystemEventListener('formRemoved', (taskId, formId, title, icon) => {
+        if (!this.flist[formId]) {
+            return;
+        }
+        this.flist[formId] = undefined;
+        delete this.flist[formId];
+        this.pushConsole('formRemoved', `taskId: ${taskId}, formId: ${formId}, title: ${title}, icon: ${icon ? icon.slice(0, 10) + '...' : 'null'}`);
+    });
+    clickgo.core.setSystemEventListener('formTitleChanged', (taskId, formId, title) => {
+        if (!this.flist[formId]) {
+            return;
+        }
+        this.flist[formId].title = title;
+        this.pushConsole('formTitleChanged', `taskId: ${taskId}, formId: ${formId}, title: ${title}`);
+    });
+    clickgo.core.setSystemEventListener('formIconChanged', (taskId, formId, icon) => {
+        if (!this.flist[formId]) {
+            return;
+        }
+        this.flist[formId].icon = icon;
+        this.pushConsole('formIconChanged', `taskId: ${taskId}, formId: ${formId}, icon: ${icon ? icon.slice(0, 10) + '...' : 'null'}`);
+    });
+    clickgo.core.setSystemEventListener('formStateMinChanged', (taskId, formId, state) => {
+        if (!this.flist[formId]) {
+            return;
+        }
+        this.flist[formId].min = state;
+        this.pushConsole('formStateMinChanged', `taskId: ${taskId}, formId: ${formId}, state: ${state ? 'true' : 'false'}`);
+    });
+    clickgo.core.setSystemEventListener('formStateMaxChanged', (taskId, formId, state) => {
+        if (!this.flist[formId]) {
+            return;
+        }
+        this.flist[formId].max = state;
+        this.pushConsole('formStateMaxChanged', `taskId: ${taskId}, formId: ${formId}, state: ${state ? 'true' : 'false'}`);
+    });
+    clickgo.core.setSystemEventListener('formShowChanged', (taskId, formId, state) => {
+        if (!this.flist[formId]) {
+            return;
+        }
+        this.flist[formId].show = state;
+        this.pushConsole('formShowChanged', `taskId: ${taskId}, formId: ${formId}, state: ${state ? 'true' : 'false'}`);
+    });
+    clickgo.core.setSystemEventListener('formFocused', (taskId, formId) => {
+        if (!this.flist[formId]) {
+            return;
+        }
+        this.flist[formId].focus = true;
+        this.pushConsole('formFocused', `taskId: ${taskId}, formId: ${formId}`);
+    });
+    clickgo.core.setSystemEventListener('formBlurred', (taskId, formId) => {
+        if (!this.flist[formId]) {
+            return;
+        }
+        this.flist[formId].focus = false;
+        this.pushConsole('formBlurred', `taskId: ${taskId}, formId: ${formId}`);
+    });
+    clickgo.core.setSystemEventListener('formFlash', (taskId, formId) => __awaiter(this, void 0, void 0, function* () {
+        if (!this.flist[formId]) {
+            return;
+        }
+        if (this.flist[formId].flash) {
+            clickgo.task.removeTimer(this.flist[formId].flash);
+        }
+        this.pushConsole('formFlash', `taskId: ${taskId}, formId: ${formId}`);
+        this.flist[formId].flash = true;
+        yield clickgo.tool.sleep(1000);
+        this.flist[formId].flash = false;
+    }));
+};
+exports.mounted = mounted;

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

@@ -0,0 +1,24 @@
+@keyframes flash {
+    0%, 50% {
+        border: solid 1px rgba(0, 0, 0, .8); color: initial;
+    }
+    51%, 100% {
+        border-color: rgba(0, 0, 0, 1); background-color: hsl(0, 0%, 20%); color: #FFF;
+    }
+}
+
+.item {
+    border: solid 1px hsl(0, 0%, 20%); padding: 5px; min-height: 30px; min-width: 150px;
+    &.focus {
+        background-color: #FFF; color: hsl(0, 0%, 20%);
+    }
+    &:hover {
+        background-color: rgba(0, 0, 0, .1);
+    }
+    &:active {
+        background-color: hsl(0, 0%, 20%); color: #FFF;
+    }
+    &.flash {
+        animation: flash .2s linear infinite;
+    }
+}

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

@@ -0,0 +1,16 @@
+<form width="450" height="550" title="About form" padding="10" direction="v">
+    <label>The form list:</label>
+    <layout align-h="center" align-v="center" style="margin-top: 10px; flex: 1; height: 0;">
+        <layout gutter="10" direction="v">
+            <layout align-v="center" v-for="(form, fid) of flist" gutter="5" @click="changeFocus(fid)" class="item" :class="{'flash': form.flash, 'focus': form.focus}">
+                <img v-if="form.icon" :src="form.icon" width="16" height="16" /><label>{{form.title}}{{form.max ? ' (max)' : ''}}{{form.min ? ' (min)' : ''}}</label>
+            </layout>
+        </layout>
+    </layout>
+    <layout gutter="10" style="margin-top: 10px; height: 80px;">
+        <list :data="['formCreated', 'formRemoved', 'formTitleChanged', 'formIconChanged', 'formStateMinChanged', 'formStateMaxChanged', 'formShowChanged', 'formFocused', 'formBlurred', 'formFlash']" style="width: 150px;"></list>
+        <greatview v-slot="data" :data="list" direction="v" style="color: #FFF; background: hsl(0, 0%, 20%); line-height: 1.5; flex: 1; width: 0; padding: 10px;" same>
+            <label>[{{data.row.time}}] {{data.row.name}}, {{data.row.text}}.</label>
+        </greatview>
+    </layout>
+</form>

package/dist/app/demo/form/event/screen/screen.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mounted = exports.data = void 0;
+const clickgo = require("clickgo");
+exports.data = {
+    'width': 0,
+    'height': 0,
+    'scale': 4,
+    'list': []
+};
+const mounted = function () {
+    clickgo.core.setSystemEventListener('screenResize', () => {
+        const area = clickgo.core.getAvailArea();
+        this.width = area.width;
+        this.height = area.height;
+        if (this.width > 1100 || this.height > 1100) {
+            this.scale = 5;
+        }
+        else if (this.width < 420 || this.height < 420) {
+            this.scale = 3;
+        }
+        else {
+            this.scale = 4;
+        }
+        const date = new Date();
+        this.list.unshift({
+            'time': date.getHours().toString() + ':' + date.getMinutes().toString() + ':' + date.getSeconds().toString(),
+            'width': area.width,
+            'height': area.height
+        });
+    });
+    const area = clickgo.core.getAvailArea();
+    this.width = area.width;
+    this.height = area.height;
+    if (this.width > 1100 || this.height > 1100) {
+        this.scale = 5;
+    }
+    else if (this.width < 420 || this.height < 420) {
+        this.scale = 3;
+    }
+    else {
+        this.scale = 4;
+    }
+    const date = new Date();
+    this.list.unshift({
+        'time': date.getHours().toString() + ':' + date.getMinutes().toString() + ':' + date.getSeconds().toString(),
+        'width': this.width,
+        'height': this.height
+    });
+};
+exports.mounted = mounted;

package/dist/app/demo/form/event/screen/screen.xml

@@ -0,0 +1,9 @@
+<form width="400" height="550" title="About screen" padding="10" direction="v">
+    <label>The screen size:</label>
+    <layout align-h="center" align-v="center" style="margin-top: 10px; flex: 1; height: 0;">
+        <block style="border: solid 1px hsl(0, 0%, 20%); display: flex; align-items: center; justify-content: center; font-size: 20px;" :style="{'width': width / scale + 'px', 'height': height / scale + 'px'}">{{width}} x {{height}}</block>
+    </layout>
+    <greatview v-slot="data" :data="list" direction="v" style="margin-top: 10px; color: #FFF; background: hsl(0, 0%, 20%); line-height: 1.5; height: 80px; padding: 10px;" same>
+        <label>[{{data.row.time}}] screenResize, width: {{data.row.width}}, height: {{data.row.height}}.</label>
+    </greatview>
+</form>

package/dist/app/demo/form/event/task/task.js

@@ -0,0 +1,78 @@
+"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 = {
+    'tlist': [],
+    'list': [],
+    'tid': 0
+};
+exports.methods = {
+    'pushConsole': function (name, text) {
+        const date = new Date();
+        this.list.unshift({
+            'time': date.getHours().toString() + ':' + date.getMinutes().toString() + ':' + date.getSeconds().toString(),
+            'name': name,
+            'text': text
+        });
+    },
+    'run': function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            const taskId = yield clickgo.task.run('/clickgo/app/demo/');
+            yield clickgo.form.dialog(`Successfully run, task id is: ${taskId}.`);
+        });
+    },
+    'end': function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (yield clickgo.form.confirm(`Are you sure to end Task ${this.tid}?`)) {
+                clickgo.task.end(parseInt(this.tid));
+            }
+        });
+    },
+    'runTask': function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (clickgo.task.systemTaskInfo.taskId > 0) {
+                yield clickgo.form.dialog('The Task APP is already running.');
+                return;
+            }
+            const taskId = yield clickgo.task.run('/clickgo/app/task/');
+            yield clickgo.form.dialog(`Successfully run, task id is: ${taskId}.`);
+        });
+    }
+};
+const mounted = function () {
+    const list = clickgo.task.getList();
+    for (const tid in list) {
+        this.tlist.push({
+            'label': 'Task ' + tid,
+            'value': parseInt(tid)
+        });
+    }
+    clickgo.core.setSystemEventListener('taskStarted', (taskId) => {
+        this.tlist.push({
+            'label': 'Task ' + taskId.toString(),
+            'value': taskId
+        });
+        this.pushConsole('taskStarted', `taskId: ${taskId}`);
+    });
+    clickgo.core.setSystemEventListener('taskEnded', (taskId) => {
+        for (let i = 0; i < this.tlist.length; ++i) {
+            if (this.tlist[i].value !== taskId) {
+                continue;
+            }
+            this.tlist.splice(i, 1);
+            break;
+        }
+        this.pushConsole('taskEnded', `taskId: ${taskId}`);
+    });
+};
+exports.mounted = mounted;

package/dist/app/demo/form/event/task/task.xml

@@ -0,0 +1,20 @@
+<form width="400" height="550" title="About task" padding="10" direction="v">
+    <label>The task list:</label>
+    <layout align-h="center" align-v="center" style="margin-top: 10px; flex: 1; height: 0;">
+        <layout direction="v" gutter="10">
+            <label>Select task id: {{tid}}</label>
+            <list v-model="tid" :data="tlist" style="width: 200px; height: 200px;"></list>
+            <button @click="runTask" style="height: 30px;">Run task app</button>
+            <layout gutter="10">
+                <button @click="run" style="flex: 1; width: 0; height: 30px;">Run self</button>
+                <button @click="end" style="flex: 1; width: 0; height: 30px;">End</button>
+            </layout>
+        </layout>
+    </layout>
+    <layout gutter="10" style="margin-top: 10px; height: 80px;">
+        <list :data="['taskStarted', 'taskEnded']" width="150" style="width: 150px;"></list>
+        <greatview v-slot="data" :data="list" direction="v" style="color: #FFF; background: hsl(0, 0%, 20%); line-height: 1.5; flex: 1; width: 0; padding: 10px;" same>
+            <label>[{{data.row.time}}] {{data.row.name}}, {{data.row.text}}.</label>
+        </greatview>
+    </layout>
+</form>

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

@@ -0,0 +1 @@
+.inner{padding:10px;flex:1}.buttons button{height:30px}

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

@@ -0,0 +1,25 @@
+"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.methods = exports.data = void 0;
+const clickgo = require("clickgo");
+exports.data = {
+    'ntab': ''
+};
+exports.methods = {
+    openForm: function (type, name) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield clickgo.form.create({
+                'file': `${type}/${name}/${name}`
+            });
+        });
+    }
+};

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

@@ -0,0 +1,9 @@
+.inner {
+    padding: 10px; flex: 1;
+}
+
+.buttons {
+    button {
+        height: 30px;
+    }
+}

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

@@ -0,0 +1,49 @@
+<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">
+            <layout class="buttons" gutter="10" direction="v">
+                <button @click="openForm('control', 'form')">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('control', 'dialog')">Dialog</button>
+                <button @click="openForm('control', 'file')">File</button>
+                <button @click="openForm('control', 'block')">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>
+            </layout>
+        </overflow>
+        <overflow 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('method', 'form')">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>
+            </layout>
+        </overflow>
+        <overflow 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>
+            </layout>
+        </overflow>
+    </tab>
+</form>

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

@@ -0,0 +1,25 @@
+"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.methods = exports.computed = void 0;
+const clickgo = require("clickgo");
+exports.computed = {
+    'config': function () {
+        return JSON.stringify(clickgo.core.config, null, 4);
+    }
+};
+exports.methods = {
+    getAvailArea: function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield clickgo.form.dialog(JSON.stringify(clickgo.core.getAvailArea()));
+        });
+    }
+};

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

@@ -0,0 +1,7 @@
+<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>
+    </layout>
+</form>

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

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