clickgo 3.0.0-dev

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

@@ -0,0 +1,91 @@
+<form title="List" width="400" height="450" min-width="300" min-height="400" padding="10" direction="v">
+    <label>Greatlist: {{select}}, list: {{select2}}, label: {{label2}}</label>
+    <tab v-model="ntab" :tabs="['greatlist', 'adaptation', 'list', 'async']" style="flex: 1; height: 0;">
+        <!-- 默认 -->
+        <layout v-if="ntab === 'greatlist'" direction="v" style="flex: 1; width: 0; padding: 10px;">
+            <greatlist v-model="select" :data="slist" :disabled="disabled" :must="must" :multi="multi" :selection="selection" :scroll="scroll" @select="onSelect" style="line-height: 1.3; flex: 1; height: 0;">
+                <template v-slot="data">
+                    <layout v-if="data.row.type === 0" align-v="center" gutter="5" style="flex: 1;">
+                        <img :src="data.row.src" style="width: 32px; height: 32px;"></img>
+                        <block style="flex: 1;">
+                            <block>{{data.row.name}}</block>
+                            <block style="opacity: .7;">{{data.row.path}}</block>
+                        </block>
+                    </layout>
+                    <template v-else>Other</template>
+                </template>
+                <template v-slot:pop>
+                    <menulist>
+                        <menulist-item alt="I" @click="showIndex">Show index</menulist-item>
+                        <menulist-item alt="S" @click="showType">Show type</menulist-item>
+                    </menulist>
+                </template>
+                <template v-slot:itempop>
+                    <menulist>
+                        <menulist-item alt="S">Set the default</menulist-item>
+                    </menulist>
+                </template>
+            </greatlist>
+            <label class="tip">Right-click (computer) or press and hold (phone) to open the universal menu.</label>
+            <label class="tip">Area: {{selectionArea}}</label>
+        </layout>
+        <!-- 自适应 -->
+        <layout v-else-if="ntab === 'adaptation'" direction="v" style="flex: 1; width: 0; padding: 10px;">
+            <greatlist class="adaptation" :data="adData" v-model="select" :disabled="disabled" :must="must" :multi="multi" :selection="selection" :scroll="scroll" same>
+                <template v-slot="data">type: {{data.row.type}}, index: {{data.index}}. {{(data.index === 20) ? 'long test long test long test long test long test' : ''}}</template>
+                <template v-slot:itempop>
+                    <menulist>
+                        <menulist-item alt="N">None</menulist-item>
+                    </menulist>
+                </template>
+            </greatlist>
+        </layout>
+        <!-- list -->
+        <layout v-else-if="ntab === 'list'" direction="v" gutter="10" style="flex: 1; width: 0; padding: 10px;">
+            <label>Raw data:</label>
+            <view direction="v" style="border: solid 1px #b3b3b3; line-height: 1.5; height: 50px; padding: 5px;">{{listData}}</view>
+            <layout gutter="10" style="flex: 1; height: 0;">
+                <list v-model="select2" :disabled="disabled" :must="must" :multi="multi" :selection="selection" :scroll="scroll" :data="listData" @label="label2 = $event" style="flex: 2; width: 0;" :tree="tree" :async="async" :icon="icon" icon-default="../../../res/txt.svg" @load="onSelectLoad">
+                    <menulist>
+                        <menulist-item alt="I" @click="showIndex2">Show select</menulist-item>
+                    </menulist>
+                </list>
+                <list :disabled="disabled" :must="must" :multi="multi" :selection="selection" :scroll="scroll" :data="listData2" style="flex: 1; width: 0;"></list>
+            </layout>
+            <label class="tip">Right-click (computer) or press and hold (phone) to open the universal menu.</label>
+        </layout>
+        <!-- async -->
+        <layout v-else gutter="10" style="flex: 1; width: 0; padding: 10px;">
+            <layout direction="v" gutter="10" style="flex: 1; width: 0;">
+                <label>greatlist: {{select3}}</label>
+                <greatlist v-model="select3" :disabled="disabled" :must="must" :multi="multi" :selection="selection" :scroll="scroll" :data="listData3" v-slot="data" style="flex: 1; height: 0;" same>
+                    {{data.row.value ? data.row.value : data.row}}
+                </greatlist>
+                <button v-if="listData3.length === 0" @click="listData3 = [{'value': 'A', disabled: true}, 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'];select3 = 12" style="height: 30px;">Load data</button>
+            </layout>
+            <layout direction="v" gutter="10" style="flex: 1; width: 0;">
+                <label>list: {{select4}}</label>
+                <list v-model="select4" :disabled="disabled" :must="must" :multi="multi" :selection="selection" :scroll="scroll" :data="listData4" style="flex: 1; height: 0;"></list>
+                <button v-if="listData4.length === 0" @click="listData4 = [{'value': 'A', disabled: true}, 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'];select4 = 'M'" style="height: 30px;">Load data</button>
+            </layout>
+        </layout>
+    </tab>
+    <layout class="ctr" gutter="10" v-show="ntab !== 'async'">
+        <button @click="slist.splice(-2, 0, {'type': 0, 'name': 'Card' + slist.length, 'path': 'Bob >> folder >> Card', 'src': '/package/res/r-2.svg','disabled': false})">Add</button>
+        <button @click="slist.splice(-3, 1)">Remove</button>
+        <button @click="scrollChange">Scroll {{scroll}}</button>
+        <button @click="icon = !icon" v-show="ntab === 'list'">{{icon ? '' : '!'}}icon</button>
+    </layout>
+    <layout class="ctr" gutter="10" v-show="ntab !== 'async'">
+        <button @click="selectButton">Select {{ntab === 'list' ? 'item1' : 'item2'}}</button>
+        <button @click="selectButtonList" v-show="ntab === 'list'">Select Sub3</button>
+        <button @click="tree = !tree" v-show="ntab === 'list'">{{tree ? '' : '!'}}tree</button>
+        <button @click="async = !async" v-show="ntab === 'list'">{{async ? '' : '!'}}async</button>
+    </layout>
+    <layout class="ctr" gutter="10">
+        <button @click="disabled = !disabled">{{disabled ? '' : '!'}}disabled</button>
+        <button @click="must = !must">{{must ? '' : '!'}}must</button>
+        <button @click="multi = !multi">{{multi ? '' : '!'}}multi</button>
+        <button @click="selection = !selection">{{selection ? '' : '!'}}selection</button>
+    </layout>
+</form>

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

@@ -0,0 +1,8 @@
+<form width="300" height="300" title="Loading" padding="10">
+    <layout direction="v" gutter="10">
+        <loading style="width: 50px; height: 50px;"></loading>
+        <loading style="width: 40px; height: 40px;"></loading>
+        <loading style="width: 30px; height: 30px;"></loading>
+        <loading></loading>
+    </layout>
+</form>

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.methods = exports.data = void 0;
+exports.data = {
+    'lineCount': 2,
+    'style': false,
+    'direction': 'top',
+    'scroll': false
+};
+exports.methods = {
+    changeDirection: function () {
+        switch (this.direction) {
+            case 'top': {
+                this.direction = 'bottom';
+                break;
+            }
+            case 'bottom': {
+                this.direction = 'left';
+                break;
+            }
+            case 'left': {
+                this.direction = 'right';
+                break;
+            }
+            default: {
+                this.direction = 'top';
+            }
+        }
+    }
+};

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

@@ -0,0 +1,36 @@
+<form title="Marquee" width="300" height="500" padding="10">
+    <layout gutter="10" direction="v" style="flex: 1; width: 0;">
+        <!-- 左右分 -->
+        <layout gutter="10" style="flex: 1; height: 0;">
+            <layout direction="v" style="flex: 1; width: 0;">
+                <marquee direction="top" :scroll="scroll" style="border: 1px solid rgba(0, 0, 0, .1); background: #FFF;" :style="{'padding': style ? '10px' : undefined, 'line-height': style ? '1.5' : undefined}">
+                    <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>
+                </marquee>
+            </layout>
+            <layout direction="v" gutter="10" style="flex: 1; width: 0;">
+                <marquee direction="left" :scroll="scroll" style="background: #000; color: #FFF;" :style="{'padding': style ? '10px' : undefined, 'line-height': style ? '1.5' : undefined}">
+                    <block v-for="(line, index) of lineCount">Line {{line}}, index: {{index}}.</block>
+                </marquee>
+                <marquee :direction="direction" :scroll="scroll" style="flex: 1; height: 0; border: 1px solid rgba(0, 0, 0, .1); background: #FFF;" :style="{'padding': style ? '10px' : undefined, 'line-height': style ? '1.5' : undefined}">
+                    <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>
+                </marquee>
+            </layout>
+        </layout>
+        <!-- 控制按钮 -->
+        <layout gutter="10">
+            <button @click="++lineCount" style="height: 30px; flex: 1; width: 0;">Add item</button>
+            <button @click="--lineCount;if(lineCount < 0){lineCount = 0}" style="height: 30px; flex: 1; width: 0;">Remove item</button>
+            <button @click="style = !style" style="height: 30px; flex: 1; width: 0;">Change style</button>
+        </layout>
+        <layout gutter="10">
+            <button @click="changeDirection" style="height: 30px; padding: 0 10px;">Right bottom: {{direction}}</button>
+            <button @click="scroll = !scroll" style="height: 30px; flex: 1; width: 0;">{{scroll ? '' : '!'}}scroll</button>
+        </layout>
+    </layout>
+</form>

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.data = void 0;
+exports.data = {
+    'radio': 'radio1',
+    'check1': true,
+    'check2': false
+};

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

@@ -0,0 +1,122 @@
+<form title="Menu" width="300" height="500" min-width="300" min-height="400" padding="10">
+    <layout direction="v" gutter="10" style="flex: 1; width: 0;">
+        <label>Radio, Check, Split, Custom:</label>
+        <menulist>
+            <menulist-item alt="A">Item1</menulist-item>
+            <menulist-item alt="B">Item2</menulist-item>
+            <menulist-item alt="C">
+                <template v-slot>Radio</template>
+                <template v-slot:pop>
+                    <menulist>
+                        <menulist-item type="radio" alt="A" v-model="radio" label="radio1">Radio1</menulist-item>
+                        <menulist-item type="radio" alt="B" v-model="radio" label="radio2">Radio2</menulist-item>
+                        <menulist-split></menulist-split>
+                        <menulist-item alt="C">
+                            <template v-slot>Check</template>
+                            <template v-slot:pop>
+                                <menulist>
+                                    <menulist-item type="check" alt="A" v-model="check1">Check1</menulist-item>
+                                    <menulist-item type="check" alt="B" v-model="check2">Check2</menulist-item>
+                                </menulist>
+                            </template>
+                        </menulist-item>
+                    </menulist>
+                </template>
+            </menulist-item>
+            <menulist-item alt="D">
+                <template v-slot>Custom</template>
+                <template v-slot:pop>
+                    <menulist>
+                        <menulist-item alt="A">
+                            <template v-slot>Icon</template>
+                            <template v-slot:pop>
+                                <menulist>
+                                    <menulist-item alt="A"><img src="../../../res/txt.svg" style="width: 16px; height: 16px;" /><label style="margin-left: 10px;">Txt</label></menulist-item>
+                                    <menulist-item alt="B"><img src="../../../res/sql.svg" style="width: 16px; height: 16px;" /><label style="margin-left: 10px;">Sql</label></menulist-item>
+                                    <menulist-item alt="C"><img src="../../../res/zip.svg" style="width: 16px; height: 16px;" /><label style="margin-left: 10px;">Zip</label></menulist-item>
+                                </menulist>
+                            </template>
+                        </menulist-item>
+                        <menulist-item alt="B">
+                            <template v-slot>Control</template>
+                            <template v-slot:pop>
+                                <menulist>
+                                    <menulist-item alt="A">
+                                        <button @click="$event.stopPropagation()" style="height: 30px; flex: 1; width: 0;">Button</button>
+                                    </menulist-item>
+                                    <menulist-item alt="B">
+                                        <scroll direction="h" @click="$event.stopPropagation()" style="height: 30px; width: 150px;"></scroll>
+                                    </menulist-item>
+                                    <menulist-item alt="C">
+                                        <text @click="$event.stopPropagation()" style="height: 30px; flex: 1; width: 0;"></text>
+                                    </menulist-item>
+                                </menulist>
+                            </template>
+                        </menulist-item>
+                        <menulist-item alt="C">
+                            <template v-slot>Free</template>
+                            <template v-slot:pop>
+                                <menulist>
+                                    <layout>
+                                        <menulist-item alt="A" style="padding: 20px;">Box 1</menulist-item>
+                                        <menulist-item alt="B" style="padding: 20px;">
+                                            <template v-slot>Box 2</template>
+                                            <template v-slot:pop>
+                                                <menulist>
+                                                    <menulist-item alt="A">Child</menulist-item>
+                                                </menulist>
+                                            </template>
+                                        </menulist-item>
+                                    </layout>
+                                    <menulist-item alt="C">Other item</menulist-item>
+                                </menulist>
+                            </template>
+                        </menulist-item>
+                    </menulist>
+                </template>
+            </menulist-item>
+        </menulist>
+        <label>Basic:</label>
+        <menulist>
+            <menulist-item alt="E">Item1</menulist-item>
+            <menulist-item alt="F">
+                <template v-slot>Item2</template>
+                <template v-slot:pop>
+                    <menulist>
+                        <menulist-item alt="A">Item3</menulist-item>
+                        <menulist-item alt="B">Item4</menulist-item>
+                        <menulist-item alt="C" disabled>Item5</menulist-item>
+                    </menulist>
+                </template>
+            </menulist-item>
+        </menulist>
+        <label>Bar:</label>
+        <menu>
+            <menu-item alt="G">
+                <template v-slot>Item1</template>
+                <template v-slot:pop>
+                    <menulist>
+                        <menulist-item alt="A">Item4</menulist-item>
+                    </menulist>
+                </template>
+            </menu-item>
+            <menu-item alt="H">
+                <template v-slot>Item2</template>
+                <template v-slot:pop>
+                    <menulist>
+                        <menulist-item alt="A">Item6</menulist-item>
+                    </menulist>
+                </template>
+            </menu-item>
+            <menu-item alt="I" disabled>
+                <template v-slot>Item3</template>
+                <template v-slot:pop>
+                    <menulist>
+                        <menulist-item alt="A">Item5</menulist-item>
+                    </menulist>
+                </template>
+            </menu-item>
+            <menu-item alt="J">Item7</menu-item>
+        </menu>
+    </layout>
+</form>

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

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mounted = exports.methods = exports.computed = exports.data = void 0;
+const clickgo = require("clickgo");
+exports.data = {
+    'path': '/index.html',
+    'file': '',
+    'files': {
+        '/index.html': `<html>
+    <head>
+        <title>Monaco</title>
+    </head>
+    <body>
+        Hello Monaco Editor!
+    </body>
+</html>`,
+        '/index.ts': 'export' + ` let props = {
+};\n\nexport` + ` let methods = {
+    hehe: function(): string {
+        return str() + ', en.';
+    },
+    incl: function(): string {
+        return str2() + ', o.';
+    }
+};\n`,
+        '/index.css': `.red {
+    color: red;
+}`,
+        '/index.scss': `.red {
+    color: red;
+    span {
+        color: blue;
+    }
+}`
+    },
+    'list': [
+        {
+            'label': 'HTML',
+            'value': '/index.html'
+        },
+        {
+            'label': 'TypeScript',
+            'value': '/index.ts'
+        },
+        {
+            'label': 'CSS',
+            'value': '/index.css'
+        },
+        {
+            'label': 'SCSS',
+            'value': '/index.scss'
+        }
+    ],
+    'theme': 'vs',
+    'themes': ['vs', 'vs-dark', 'hc-black'],
+    'language': undefined,
+    'globali': false,
+    'newi': false,
+    'readonly': false,
+    'disabled': false,
+    'size': '12px',
+    'family': false,
+    'initMonaco': false
+};
+exports.computed = {
+    'filesName': function () {
+        const names = [];
+        for (const name in this.files) {
+            if (!name.includes('.d.ts')) {
+                continue;
+            }
+            names.push(name);
+        }
+        return names;
+    }
+};
+exports.methods = {
+    globalInclude: function () {
+        if (this.globali) {
+            delete this.files['/global.d.ts'];
+        }
+        else {
+            this.files['/global.d.ts'] = 'declare function str(): string;';
+        }
+        this.globali = !this.globali;
+    },
+    newInclude: function () {
+        if (this.newi) {
+            delete this.files['/new.d.ts'];
+        }
+        else {
+            this.files['/new.d.ts'] = 'declare function str2(): string;';
+        }
+        this.newi = !this.newi;
+    },
+    jump: function (input) {
+        clickgo.form.dialog({
+            'content': `<block>Path: ${input.resource.path}</block><block>Line: ${input.options.selection.startLineNumber}</block>`,
+            'direction': 'v'
+        }).catch((e) => { throw e; });
+    },
+    pathLebel: function (label) {
+        this.language = label.toLowerCase();
+    }
+};
+const mounted = function () {
+    clickgo.core.initModules('monaco').then(() => {
+        this.initMonaco = true;
+    }).catch(() => {
+        this.initMonaco = true;
+    });
+};
+exports.mounted = mounted;

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

@@ -0,0 +1,27 @@
+<form title="Monaco" width="500" height="450" padding="10" :loading="!initMonaco">
+    <layout gutter="10" direction="v" style="flex: 1; width: 0;">
+        <label>File: {{path}}, Length: {{files[path].length}}</label>
+        <layout gutter="10" style="flex: 1; height: 0;">
+            <text :modelValue="JSON.stringify(files, null, 4)" style="flex: 1; width: 0;" multi readonly wrap></text>
+            <monaco v-if="initMonaco" v-model="path" v-model:files="files" :readonly="readonly" :language="language" :disabled="disabled" :theme="theme" @jump="jump" style="flex: 1; wdith: 0;" :style="{'font-size': size, 'font-family': family ? 'Consolas, \'Courier New\', monospace' : undefined}"></monaco>
+        </layout>
+        <layout gutter="10">
+            <button @click="disabled = !disabled" style="height: 30px; flex: 1; width: 0;">{{disabled ? '' : '!'}}disabled</button>
+            <button @click="readonly = !readonly" style="height: 30px; flex: 1; width: 0;">{{readonly ? '' : '!'}}readonly</button>
+            <button @click="family = !family" style="height: 30px; flex: 1; width: 0;">{{family ? '' : '!'}}Family CCM</button>
+            <select v-model="size" :data="['12px', '13px', '14px', '15px', '16px']" style="flex: 1; width: 0;"></select>
+            <select v-model="theme" :data="themes" style="flex: 1; width: 0;"></select>
+            <select v-model="path" @label="pathLebel" :data="list" style="flex: 1; width: 0;"></select>
+        </layout>
+        <label>Include files:</label>
+        <layout gutter="10" style="flex: 1; height: 0;">
+            <layout direction="v" gutter="10" style="width: 100px;">
+                <list v-model="file" :data="filesName" :must="false" style="flex: 1;"></list>
+                <button @click="globalInclude" style="height: 30px;">{{globali ? '' : '!'}}global</button>
+                <button @click="newInclude" style="height: 30px;">{{newi ? '' : '!'}}new</button>
+            </layout>
+            <monaco v-if="(files[file] !== undefined) && initMonaco" v-model="files[file]" language="typescript" style="flex: 1; width: 0;"></monaco>
+            <layout v-else align-v="center" align-h="center" style="flex: 1; width: 0;">Please select file.</layout>
+        </layout>
+    </layout>
+</form>

package/dist/app/demo/form/control/overflow/overflow.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}

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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.methods = exports.data = void 0;
+const clickgo = require("clickgo");
+exports.data = {
+    'ntab': '',
+    'lineValue': 10,
+    '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,
+    'gesture': false,
+    'style': false
+};
+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/overflow/overflow.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/overflow/overflow.xml

@@ -0,0 +1,98 @@
+<form title="Overflow" 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;">
+                <overflow v-model:scroll-left="sLeft1" v-model:scroll-top="sTop1" direction="v" @resize="c1 = $event" @change="l1 = $event" @scrollborder="scrollborder($event, 'v')" :style="{'line-height': style ? '1.5' : undefined}" class="border" style="flex: 1;">
+                    <block :style="{'padding': style ? '10px' : undefined}">
+                        <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>
+                    </block>
+                </overflow>
+                <layout class="border" style="flex: 1;">
+                    <overflow v-model:scroll-left="sLeft2" v-model:scroll-top="sTop2" direction="v" @resize="c2 = $event" @change="l2 = $event" @scrollborder="scrollborder($event, 'v')" :style="{'line-height': style ? '1.5' : undefined}" style="flex: 1;">
+                        <block :style="{'padding': style ? '10px' : undefined}">
+                            <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>
+                        </block>
+                    </overflow>
+                    <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 -->
+            <overflow v-model:scroll-left="sLeft3" v-model:scroll-top="sTop3" @resize="c3 = $event" @change="l3 = $event" @scrollborder="scrollborder($event, 'h')" :style="{'line-height': style ? '1.5' : undefined}" class="border" style="flex: 1; height: 0;">
+                <layout :style="{'padding': style ? '10px' : undefined}" style="flex: 1;">
+                    <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>
+                </layout>
+            </overflow>
+            <label>Scroll Left: {{sLeft3}}, Scroll Top: {{sTop3}}, Length: {{l3}}, Client: {{c3}}.</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="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;">
+                <overflow 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>
+                </overflow>
+            </layout>
+            <label>Scroll Left: {{sLeft4}}, Scroll Top: {{sTop4}}, Length: {{l4}}, Client: {{c4}}.</label>
+            <layout gutter="10">
+                <button @click="lineCount += 10" style="flex: 1; height: 30px;">Add 10 lines</button>
+                <button @click="lineCount -= 10;if(lineCount < 0) {lineCount = 0;}" style="flex: 1; 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; height: 30px;">Change direction</button>
+                <button @click="line5 = (line5 === 10 ? 1 : 10)" style="flex: 1; height: 30px;">Change data</button>
+                <label>Direction: {{dir5}}</label>
+            </layout>
+            <overflow v-model:scroll-left="sLeft5" v-model:scroll-top="sTop5" @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>
+            </overflow>
+            <label>Scroll Left: {{sLeft5}}, Scroll Top: {{sTop5}}, Length: {{l5}}, Client: {{c5}}.</label>
+        </layout>
+        <!-- 嵌套 -->
+        <layout v-else style="flex: 1; width: 0; padding: 10px;">
+            <overflow class="border" direction="v" style="flex: 1; width: 0;">
+                <template v-for="i of 100">
+                    <overflow v-if="i === 30" class="border" direction="v" style="height: 50px;">
+                        <label v-for="k of 50">Line {{k}}</label>
+                    </overflow>
+                    <overflow v-else-if="i === 40" class="border" style="height: 50px;">
+                        <label v-for="k of 50" class="rightborder" style="width: 80px;">Line {{k}}</label>
+                    </overflow>
+                    <label v-else>Line {{i}}</label>
+                </template>
+            </overflow>
+        </layout>
+    </tab>
+</form>