clickgo 3.0.0-dev

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

@@ -0,0 +1,26 @@
+<form title="Dialog" width="400" height="400" min-width="400" min-height="400" padding="10">
+    <layout direction="v" gutter="10" style="flex: 1; width: 0;">
+        <layout align-h="center" align-v="center" style="flex: 1;">
+            <form title="Title" :min="false" :max="false" :resize="false" width="auto" height="auto" direction="v">
+                <dialog @select="btn = $event" :buttons="buttons" :direction="message === 'lines' ? 'v' : 'h'">
+                    <template v-if="message === 'message'">Message</template>
+                    <template v-else-if="message === 'buttons'"><button style="flex: 1; height: 30px;">Button1</button><button style="margin-left: 10px; flex: 1; height: 30px;">Button2</button></template>
+                    <template v-else-if="message === 'lines'"><block v-for="i of 5">Line {{i}}.</block></template>
+                    <template v-else>longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</template>
+                </dialog>
+            </form>
+        </layout>
+        <layout gutter="10">
+            <button style="flex: 1; height: 30px;" @click="buttons = ['A', 'B', 'C']">['A', 'B', 'C']</button>
+            <button style="flex: 1; height: 30px;" @click="buttons = ['Cancel', 'OK']">['Cancel', 'OK']</button>
+            <button style="flex: 1; height: 30px;" @click="buttons = ['OK']">['OK']</button>
+        </layout>
+        <layout gutter="10">
+            <button style="flex: 1; height: 30px;" @click="message = 'message'">Message</button>
+            <button style="flex: 1; height: 30px;" @click="message = 'long'">Long</button>
+            <button style="flex: 1; height: 30px;" @click="message = 'buttons'">Two buttons</button>
+            <button style="flex: 1; height: 30px;" @click="message = 'lines'">Multiple lines</button>
+        </layout>
+        <label>You click: {{btn}}.</label>
+    </layout>
+</form>

package/dist/app/demo/form/control/file/file.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.methods = exports.data = void 0;
+exports.data = {
+    'accept': 'txt',
+    'multi': 'false',
+    'dir': 'false',
+    'list': []
+};
+exports.methods = {
+    select: function () {
+        this.$refs.file.select();
+    },
+    change: function (files) {
+        this.list = [];
+        if (!files) {
+            return;
+        }
+        for (const file of files) {
+            this.list.push((file.webkitRelativePath || file.name) + ' (' + file.size.toString() + ')');
+        }
+    }
+};

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

@@ -0,0 +1,25 @@
+<form width="300" height="300" title="File" padding="10">
+    <layout direction="v" gutter="10" style="flex: 1;">
+        <label>A control that reads a local files:</label>
+        <layout gutter="10" align-v="center">
+            <label style="width: 50px;">accept:</label>
+            <radio v-model="accept" value="txt" style="flex: 1;">txt</radio>
+            <radio v-model="accept" value="jpg" style="flex: 1;">jpg</radio>
+        </layout>
+        <layout gutter="10" align-v="center">
+            <label style="width: 50px;">multi:</label>
+            <radio v-model="multi" value="true" style="flex: 1;">true</radio>
+            <radio v-model="multi" value="false" style="flex: 1;">false</radio>
+        </layout>
+        <layout gutter="10" align-v="center">
+            <label style="width: 50px;">dir:</label>
+            <radio v-model="dir" value="true" style="flex: 1;">true</radio>
+            <radio v-model="dir" value="false" style="flex: 1;">false</radio>
+        </layout>
+        <button @click="select" style="height: 30px;">
+            Select
+            <file ref="file" @change="change" :accept="[accept]" :multi="multi" :dir="dir"></file>
+        </button>
+        <list :data="list" style="flex: 1; height: 0;"></list>
+    </layout>
+</form>

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

@@ -0,0 +1 @@
+button{height:30px}.bottom button{flex:1;width:0}

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

@@ -0,0 +1,38 @@
+"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 = {
+    'width': 300,
+    'height': 520,
+    'icon': '',
+    'title': 'Form',
+    'min': true,
+    'max': true,
+    'close': true,
+    'stateMax': false,
+    'stateMin': false,
+    'minWidth': 200,
+    'minHeight': 100,
+    'resize': true,
+    'loading': false,
+    'border': 'normal'
+};
+exports.methods = {
+    showLoading: function () {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.loading = true;
+            yield clickgo.tool.sleep(1000);
+            this.loading = false;
+        });
+    }
+};

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

@@ -0,0 +1,9 @@
+button {
+    height: 30px;
+}
+
+.bottom {
+    button {
+        flex: 1; width: 0;
+    }
+}

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

@@ -0,0 +1,28 @@
+<form v-model:width="width" v-model:height="height" :icon="icon" :title="title" :min="min" :max="max" :close="close" v-model:state-max="stateMax" v-model:state-min="stateMin" :min-width="minWidth" :min-height="minHeight" :resize="resize" :loading="loading" :border="border" direction="v">
+    <overflow direction="v">
+        <layout direction="v" gutter="10" style="padding: 10px;">
+            <label>focus: {{cgFocus}}, width: {{width}}, height: {{height}}, state-max: {{stateMax}}, state-min: {{stateMin}}.</label>
+            <button @click="icon = icon ? '' : '/package/res/icon.svg'">Set icon</button>
+            <button @click="title = (title === 'Form') ? 'Changed' : 'Form'">Set title</button>
+            <button @click="min = min ? false : true">{{min ? 'Hide' : 'Show'}} min button</button>
+            <button @click="max = max ? false : true">{{max ? 'Hide' : 'Show'}} max button</button>
+            <button @click="close = close ? false : true">{{close ? 'Hide' : 'Show'}} close button</button>
+            <button @click="stateMax = true">To max</button>
+            <button @click="stateMin = true">To min</button>
+            <button @click="minWidth = (minWidth === 200) ? 300 : 200">Set min-width to {{minWidth === 200 ? '300' : '200'}}</button>
+            <button @click="minHeight = (minHeight === 100) ? 200 : 100">Set min-height to {{minHeight === 100 ? '200' : '100'}}</button>
+            <button @click="width = 350">Set width to 350</button>
+            <button @click="height = 400">Set height to 400</button>
+            <button @click="width = 'auto'">Set width to "auto"</button>
+            <button @click="height = 'auto'">Set height to "auto"</button>
+            <button @click="resize = resize ? false : true">{{resize ? 'Disabled' : 'Enabled'}} resize</button>
+            <button @click="showLoading">Show loading</button>
+            <layout class="bottom" gutter="10">
+                <button @click="border = 'normal'">Normal</button>
+                <button @click="border = 'thin'">Thin</button>
+                <button @click="border = 'plain'">Plain</button>
+                <button @click="border = 'none'">None</button>
+            </layout>
+        </layout>
+    </overflow>
+</form>

package/dist/app/demo/form/control/greatview/greatview.css

@@ -0,0 +1 @@
+.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}.content{display:inline-block;padding:5px;background:rgba(0,0,0,.1);margin-left:2px;margin-bottom:1px}

package/dist/app/demo/form/control/greatview/greatview.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.methods = exports.mounted = exports.computed = exports.data = void 0;
+const clickgo = require("clickgo");
+exports.data = {
+    'ntab': '',
+    'lineValue': 100,
+    'lineCount': 2,
+    'sLeft1': 0,
+    'sTop1': 0,
+    'l1': 0,
+    'c1': 0,
+    'sLeft2': 0,
+    'sTop2': 0,
+    'l2': 0,
+    'c2': 0,
+    'sLeft3': 0,
+    'sTop3': 0,
+    'l3': 0,
+    'c3': 0,
+    'sLeft4': 0,
+    'sTop4': 0,
+    'l4': 0,
+    'c4': 0,
+    'direction': false,
+    'dir5': 'v',
+    'sLeft5': 0,
+    'sTop5': 0,
+    'l5': 0,
+    'c5': 0,
+    'line5': 10,
+    'c6': 0,
+    'is6': [],
+    'gesture': false,
+    'style': false,
+    'selection': false,
+    'content': false,
+    'area': {}
+};
+exports.computed = {
+    'is': function () {
+        const is = [];
+        for (let i = 0; i < this.lineCount; ++i) {
+            if (i > 0 && i % 10 === 0) {
+                is[i] = 30;
+                continue;
+            }
+        }
+        return is;
+    }
+};
+const mounted = function () {
+    this.is6[29] = 50;
+    this.is6[39] = 50;
+};
+exports.mounted = mounted;
+exports.methods = {
+    scrollborder: function (e, dir) {
+        if (!this.gesture) {
+            return;
+        }
+        let dirs = [];
+        switch (dir) {
+            case 'h': {
+                dirs = ['left', 'right'];
+                break;
+            }
+            default: {
+                dirs = ['top', 'bottom'];
+                break;
+            }
+        }
+        clickgo.dom.bindGesture(e, {
+            'dirs': dirs,
+            'handler': (dir) => {
+                switch (dir) {
+                    case 'left':
+                    case 'top': {
+                        this.lineCount -= 10;
+                        if (this.lineCount < 0) {
+                            this.lineCount = 0;
+                        }
+                        break;
+                    }
+                    default: {
+                        this.lineCount += this.lineValue;
+                    }
+                }
+            }
+        });
+    }
+};

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

@@ -0,0 +1,22 @@
+.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;
+}
+
+.content {
+    display: inline-block; padding: 5px; background: rgba(0, 0, 0, .1); margin-left: 2px; margin-bottom: 1px;
+}

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

@@ -0,0 +1,89 @@
+<form title="Greatview" 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;">
+                <greatview 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;" :data="lineCount" v-slot="data" :items-size="is" same>
+                    <button v-if="data.index > 0 && data.index % 10 === 0" style="height: 30px;">test</button>
+                    <block v-else>Line {{data.row}}, index: {{data.index}}<label v-if="content" class="content">ha</label>.</block>
+                </greatview>
+                <layout class="border" style="flex: 1; width: 0;">
+                    <greatview 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;" :data="lineCount" v-slot="data" :items-size="is" same>
+                        <block v-if="data.index > 0 && data.index % 10 === 0" class="custom">Custom</block>
+                        <block v-else>Line {{data.row}}, index: {{data.index}}.</block>
+                    </greatview>
+                    <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 -->
+            <greatview 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;" :data="lineCount" v-slot="data" same>
+                <layout align-v="center" align-h="center" direction="v" class="rightborder" style="width: 80px;">
+                    <label>Col {{data.row}}.</label>
+                    <label>index: {{data.index}}.</label>
+                </layout>
+            </greatview>
+            <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="[100, 500, 1000, 10000]" 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>
+                <button @click="content = !content" style="flex: 1; width: 0; height: 30px;">{{content ? '' : '!'}}content</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;">
+                <greatview 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')" :data="lineCount" v-slot="data" :items-size="is" same>
+                    <layout align-v="center" direction="v" :class="[direction && 'rightborder']" style="flex: 1;">
+                        <button v-if="data.index > 0 && data.index % 10 === 0" style="height: 30px;" :style="{'width': direction ? '30px' : undefined}">btn</button>
+                        <block v-else :style="{'width': direction ? '80px' : undefined, 'text-align': direction ? 'center' : undefined}">Line {{data.row}}</block>
+                    </layout>
+                </greatview>
+            </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>
+            <greatview 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;" :data="line5" v-slot="data" same>
+                <layout :direction="dir5 === 'h' ? 'v' : 'h'">
+                    <layout v-for="j of 10" class="block">
+                        <block>{{data.row}}-{{j}}</block>
+                    </layout>
+                </layout>
+            </greatview>
+            <label>Scroll Left: {{sLeft5}}, Scroll Top: {{sTop5}}, Length: {{l5}}, Client: {{c5}}.</label>
+        </layout>
+        <!-- 嵌套 -->
+        <layout v-else style="flex: 1; width: 0; padding: 10px;">
+            <greatview class="border" direction="v" @resizen="c6 = $event" solo="false" style="flex: 1; width: 0;" :data="100" v-slot="data" :items-size="is6" same>
+                <greatview v-if="data.row === 30" class="border" direction="v" solo="false" style="height: 50px;" :data="50" v-slot="data" same>
+                    <label>Line {{data.row}}</label>
+                </greatview>
+                <greatview v-else-if="data.row === 40" :data="50" v-slot="data" class="border" solo="false" style="height: 50px;" :style="{'width': c6 + 'px'}" same>
+                    <label class="rightborder" style="width: 80px;">Line {{data.row}}</label>
+                </greatview>
+                <label v-else>Line {{data.row}}</label>
+            </greatview>
+        </layout>
+    </tab>
+</form>

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

@@ -0,0 +1,16 @@
+<form width="300" height="500" title="Img">
+    <overflow direction="v" style="flex: 1; width: 0;">
+        <layout direction="v" gutter="10" style="padding: 10px;">
+            <label>Load "../../../res/img.jpg":</label>
+            <img src="../../../res/img.jpg" style="width: 200px; height: 200px;" />
+            <label>Mode auto:</label>
+            <img src="../../../res/img.jpg" mode="auto" style="width: 200px; height: 200px;" />
+            <label>Mode cover:</label>
+            <img src="../../../res/img.jpg" mode="cover" style="width: 200px; height: 250px;" />
+            <label>Mode contain:</label>
+            <img src="../../../res/img.jpg" mode="contain" style="border: dotted 1px rgba(0, 0, 0, .5); width: 200px; height: 250px;" />
+            <label>You can also use http://, https:// and data: url, load "https://nodejs.org/static/images/logo.svg":</label>
+            <img src="https://nodejs.org/static/images/logo.svg" style="background-color: #333; width: 122px; height: 75px;" />
+        </layout>
+    </overflow>
+</form>

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

@@ -0,0 +1,11 @@
+<form width="300" height="300" title="Label">
+    <layout direction="v" gutter="10" style="padding: 10px; flex: 1; width: 0;">
+        <label>You can use CSS to customize the label:</label>
+        <label>Normal</label>
+        <label style="text-align: center;">Center</label>
+        <label style="color: red;">Color</label>
+        <label style="background: rgba(0, 0, 0, .1);">Background</label>
+        <label style="background: rgba(0, 0, 0, .1); padding: 10px;">Padding</label>
+        <label style="font-size: 36px;">Font size</label>
+    </layout>
+</form>

package/dist/app/demo/form/control/list/list.css

@@ -0,0 +1 @@
+tab,.tip,.ctr{margin-top:10px}.ctr button{height:30px;flex:1}

package/dist/app/demo/form/control/list/list.js

@@ -0,0 +1,194 @@
+"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 = exports.data = void 0;
+const clickgo = require("clickgo");
+exports.data = {
+    'ntab': '',
+    'slist': [
+        {
+            'type': 0,
+            'name': 'Appraise',
+            'path': 'Bob >> folder >> Appraise',
+            'src': '/package/res/r-1.svg'
+        },
+        {
+            'type': 0,
+            'name': 'Card',
+            'path': 'Bob >> folder >> Card',
+            'src': '/package/res/r-2.svg',
+            'menu': true
+        },
+        {
+            'type': 0,
+            'name': 'Appraise2',
+            'path': 'Bob >> folder >> Appraise2',
+            'src': '/package/res/r-1.svg',
+            'disabled': true
+        },
+        {
+            'control': 'split'
+        },
+        {
+            'type': 1
+        }
+    ],
+    'select': 0,
+    'select2': 'Appraise',
+    'label2': '',
+    'tree': false,
+    'async': false,
+    'icon': false,
+    'sub6children': [],
+    'select3': 0,
+    'listData3': [],
+    'select4': '',
+    'listData4': [],
+    'disabled': false,
+    'must': true,
+    'multi': false,
+    'selection': false,
+    'selectionArea': {},
+    'scroll': 'auto'
+};
+exports.computed = {
+    'adData': function () {
+        const data = [];
+        for (let i = 0; i < this.slist.length; ++i) {
+            const item = this.slist[i];
+            data.push({
+                'type': item.type === undefined ? 'split' : item.type,
+                'menu': i === 20 ? true : false
+            });
+        }
+        return data;
+    },
+    'listData': function () {
+        const data = ['Item1', {
+                'label': 'Title1',
+                'children': [
+                    'Sub1',
+                    {
+                        'label': 'Title2',
+                        'children': ['Sub2', 'Sub3'],
+                        'icon': '../../../res/zip.svg',
+                        'openicon': '../../../res/sql.svg'
+                    },
+                    'Sub4',
+                    {
+                        'label': 'Title3',
+                        'title': true,
+                        'children': ['Sub5',
+                            {
+                                'value': 'Sub6',
+                                'children': this.sub6children
+                            }
+                        ],
+                        'tree': 1
+                    }
+                ]
+            }];
+        for (let k = 0; k < this.slist.length; ++k) {
+            if (this.slist[k].name) {
+                data.push({
+                    'label': `index: ${k}, value: ${this.slist[k].name}${(k === 20 ? ' long test long test long test long test long test' : '')}`,
+                    'value': this.slist[k].name,
+                    'disabled': this.slist[k].disabled
+                });
+            }
+            else {
+                data.push({
+                    'label': `index: ${k}, value: i${k}${(k === 20 ? ' long test long test long test long test long test' : '')}`,
+                    'value': 'i' + k.toString(),
+                    'disabled': true
+                });
+            }
+        }
+        return data;
+    },
+    'listData2': function () {
+        const data = [];
+        for (let k = 0; k < this.listData.length; k++) {
+            data.push(k + 1);
+        }
+        return data;
+    }
+};
+exports.methods = {
+    showIndex: function () {
+        clickgo.form.dialog('Index is ' + this.select.toString() + '.').catch((e) => { throw e; });
+    },
+    showIndex2: function () {
+        clickgo.form.dialog('Index is ' + this.select2.toString() + '.').catch((e) => { throw e; });
+    },
+    showType: function () {
+        if (Array.isArray(this.select)) {
+            if (this.select.length === 0) {
+                clickgo.form.dialog('There are currently no selected items.').catch((e) => { throw e; });
+            }
+            else {
+                const types = [];
+                for (const item of this.select) {
+                    types.push(this.slist[item].type);
+                }
+                clickgo.form.dialog(`Type is ${types}.`).catch((e) => { throw e; });
+            }
+        }
+        else {
+            clickgo.form.dialog(this.select === -1 ? 'There are currently no selected items.' : `Type is ${this.slist[this.select].type}.`).catch((e) => { throw e; });
+        }
+    },
+    selectButton: function () {
+        if (this.ntab === 'list') {
+            this.select2 = 'Item1';
+        }
+        else {
+            this.select = 1;
+        }
+    },
+    selectButtonList: function () {
+        this.select2 = 'Sub3';
+    },
+    onSelectLoad: function (value, resolve) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (value !== 'Sub6') {
+                yield clickgo.tool.sleep(100);
+                if (value === 'Sub8') {
+                    resolve(['Sub9', 'Sub10']);
+                }
+                else {
+                    resolve();
+                }
+                return;
+            }
+            yield clickgo.tool.sleep(300);
+            this.sub6children = ['Sub7', 'Sub8'];
+        });
+    },
+    onSelect: function (area) {
+        this.selectionArea = area;
+    },
+    scrollChange: function () {
+        switch (this.scroll) {
+            case 'auto': {
+                this.scroll = 'visible';
+                break;
+            }
+            case 'visible': {
+                this.scroll = 'hidden';
+                break;
+            }
+            default: {
+                this.scroll = 'auto';
+            }
+        }
+    }
+};

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

@@ -0,0 +1,7 @@
+tab, .tip, .ctr {
+    margin-top: 10px;
+}
+
+.ctr button {
+    height: 30px; flex: 1;
+}