clickgo 3.1.2-dev11 → 3.1.4-dev13

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

@@ -1,74 +1,76 @@
 <form title="Select" width="400" height="450" min-width="300" min-height="400" padding="10">
-    <tab v-model="ntab" :tabs="['greatselect', 'select']" style="flex: 1; width: 0;">
-        <!-- greatselect -->
-        <layout v-if="ntab === 'greatselect'" gutter="10" direction="v" style="flex: 1; width: 0; padding: 10px;">
-            <label>Now select value is {{select}}:</label>
-            <greatselect v-model="select" :data="slist" :area="area" :disabled="disabled" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}">
-                <layout align-v="center" gutter="5" style="line-height: 1.3; flex: 1;">
-                    <img :src="slist[select].src" style="width: 32px; height: 32px;"></img>
-                    <block>
-                        <block>{{slist[select].name}}</block>
-                        <block style="opacity: .7;">{{slist[select].path}}</block>
-                    </block>
-                </layout>
-                <template v-slot:pop="data">
-                    <layout v-if="data.row.type === 0" align-v="center" gutter="5" style="flex: 1; line-height: 1.3;">
-                        <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>
+    <layout gutter="10" direction="v" style="flex: 1; width: 0;">
+        <tab v-model="ntab" :tabs="['greatselect', 'select']" style="flex: 1; height: 0;">
+            <!-- greatselect -->
+            <layout v-if="ntab === 'greatselect'" gutter="10" direction="v" style="flex: 1; width: 0; padding: 10px;">
+                <label>Now select value is {{select}}:</label>
+                <greatselect v-model="select" :data="slist" :area="area" :disabled="disabled" :multi="multi" :sizes="sizes" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}" style="line-height: 1.3;">
+                    <layout align-v="center" gutter="5" style="flex: 1;">
+                        <img :src="slist[select[0]] ? slist[select[0]].src : ''" style="width: 32px; height: 32px;"></img>
+                        <block>
+                            <block>{{slist[select[0]] ? slist[select[0]].name : 'None'}}{{select.length > 1 ? ' [multi]' : ''}}</block>
+                            <block style="opacity: .7;">{{slist[select[0]] ? slist[select[0]].path : none}}</block>
                         </block>
                     </layout>
-                    <template v-else>Other</template>
-                </template>
-                <template v-slot:itempop>
-                    <menulist>
-                        <menulist-item alt="S">Set the default</menulist-item>
-                    </menulist>
-                </template>
-            </greatselect>
-            <label>Custom pop:</label>
-            <greatselect pop="custom" :area="area" :disabled="disabled" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}">
-                <label>Pop is button.</label>
-                <template v-slot:pop>
-                    <button style="height: 30px;">Nothing</button>
-                </template>
-            </greatselect>
-            <layout gutter="10">
-                <button @click="slist.splice(-2, 0, {'type': 0, 'name': 'Card' + slist.length, 'path': 'Bob >> folder >> Card', 'src': '/package/res/r-2.svg','disabled': false})" style="flex: 1; height: 30px;">Add item</button>
-                <button @click="slist.splice(-3, 1)" style="flex: 1; height: 30px;">Remove item</button>
-            </layout>
-            <layout gutter="10">
-                <button @click="disabled = !disabled" style="flex: 1; height: 30px;">Disabled: {{disabled}}</button>
-                <button @click="area = area === 'all' ? 'arrow' : 'all'" style="flex: 1; height: 30px;">Area: {{area}}</button>
-            </layout>
-            <layout gutter="10">
-                <button @click="fontSize = !fontSize" style="flex: 1; height: 30px;">Change font size</button>
-                <button @click="padding = !padding" style="flex: 1; height: 30px;">Change padding</button>
-            </layout>
-            <layout gutter="10">
-                <button @click="background = !background" style="flex: 1; height: 30px;">Change background and color</button>
+                    <template v-slot:pop="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>
+                                <block>{{data.row.name}}</block>
+                                <block style="opacity: .7;">{{data.row.path}}</block>
+                            </block>
+                        </layout>
+                        <template v-else>Other</template>
+                    </template>
+                    <template v-slot:itempop>
+                        <menulist>
+                            <menulist-item alt="S">Set the default</menulist-item>
+                        </menulist>
+                    </template>
+                </greatselect>
+                <label>Custom pop:</label>
+                <greatselect pop="custom" :area="area" :disabled="disabled" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}">
+                    <label>Pop is button.</label>
+                    <template v-slot:pop>
+                        <button style="height: 30px;">Nothing</button>
+                    </template>
+                </greatselect>
+                <layout gutter="10">
+                    <button @click="slist.splice(-2, 0, {'type': 0, 'name': 'Card' + slist.length, 'path': 'Bob >> folder >> Card', 'src': '/package/res/r-2.svg','disabled': false})" style="flex: 1; height: 30px;">Add item</button>
+                    <button @click="slist.splice(-3, 1)" style="flex: 1; height: 30px;">Remove item</button>
+                </layout>
             </layout>
+            <!-- select -->
+            <flow v-else-if="ntab === 'select'" direction="v" style="flex: 1; width: 0;">
+                <layout gutter="10" direction="v" style="padding: 10px;">
+                    <label>Now select value is {{select2}}</label>
+                    <label>Label: {{label2}}</label>
+                    <select v-model="select2" @label="label2 = $event" :data="remote ? slist2r : slist2" :disabled="disabled" :editable="editable" :multi="multi" :tree="tree" :async="async" :remote="remote" :icon="icon" icon-default="../../../res/txt.svg" @load="onLoad" @remote="onRemote" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
+                    <label>Custom height:</label>
+                    <select :data="remote ? slist2r : ['1','2','3','4','5']" :disabled="disabled" :editable="editable" :multi="multi" :tree="tree" :async="async" :remote="remote" :icon="icon" icon-default="../../../res/txt.svg" style="height: 60px;" @load="onLoad" @remote="onRemote" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
+                    <label>Always editable:</label>
+                    <select :data="remote ? slist2r : ['1','2','3','4','5']" :disabled="disabled" editable :multi="multi" :tree="tree" :async="async" :remote="remote" :icon="icon" icon-default="../../../res/txt.svg" @load="onLoad" @remote="onRemote" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
+                    <layout gutter="10">
+                        <button @click="icon = !icon" style="flex: 1; height: 30px;">{{icon ? '' : '!'}}icon</button>
+                        <button @click="tree = !tree" style="flex: 1; height: 30px;">{{tree ? '' : '!'}}tree</button>
+                        <button @click="async = !async" style="flex: 1; height: 30px;">{{async ? '' : '!'}}async</button>
+                        <button @click="remote = !remote" style="flex: 1; height: 30px;">{{remote ? '' : '!'}}remote</button>
+                    </layout>
+                </layout>
+            </flow>
+        </tab>
+        <layout gutter="10">
+            <button @click="disabled = !disabled" style="flex: 1; height: 30px;">{{disabled ? '' : '!'}}disabled</button>
+            <button v-if="ntab === 'greatselect'" @click="area = area === 'all' ? 'arrow' : 'all'" style="flex: 1; height: 30px;">Area: {{area}}</button>
+            <button v-else @click="editable = !editable" style="flex: 1; height: 30px;">{{editable ? '' : '!'}}editable</button>
         </layout>
-        <!-- select -->
-        <layout v-else-if="ntab === 'select'" gutter="10" direction="v" style="flex: 1; width: 0; padding: 10px;">
-            <label>Now select value is {{select2}}:</label>
-            <select v-model="select2" :data="slist2" :disabled="disabled" :editable="editable" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
-            <label>Custom height:</label>
-            <select :data="['1','2','3','4','5']" :disabled="disabled" :editable="editable" style="height: 60px;" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
-            <label>Always editable:</label>
-            <select :data="['1','2','3','4','5']" :disabled="disabled" editable :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
-            <layout gutter="10">
-                <button @click="disabled = !disabled" style="flex: 1; height: 30px;">Disabled: {{disabled}}</button>
-                <button @click="editable = !editable" style="flex: 1; height: 30px;">Editable: {{editable}}</button>
-            </layout>
-            <layout gutter="10">
-                <button @click="fontSize = !fontSize" style="flex: 1; height: 30px;">Change font size</button>
-                <button @click="padding = !padding" style="flex: 1; height: 30px;">Change padding</button>
-            </layout>
-            <layout gutter="10">
-                <button @click="background = !background" style="flex: 1; height: 30px;">Change background and color</button>
-            </layout>
+        <layout gutter="10">
+            <button @click="fontSize = !fontSize" style="flex: 1; height: 30px;">Change font size</button>
+            <button @click="padding = !padding" style="flex: 1; height: 30px;">Change padding</button>
+        </layout>
+        <layout gutter="10">
+            <button @click="background = !background" style="flex: 1; height: 30px;">Change bg &amp; color</button>
+            <button @click="multi = !multi" style="flex: 1; height: 30px;">{{multi ? '' : '!'}}multi</button>
         </layout>
-    </tab>
+    </layout>
 </form>

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

@@ -9,20 +9,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.methods = exports.data = void 0;
 const clickgo = require("clickgo");
-exports.data = {
-    'ntab': '',
-    'tabs': ['tab1'],
-    'tindex': 1,
-    'tabPosition': 'top',
-    'color': undefined,
-    'size': undefined,
-    'drag': false,
-    'close': false
-};
-exports.methods = {
-    onClose: function (e, i) {
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.ntab = '';
+        this.tabs = ['tab1'];
+        this.tindex = 1;
+        this.tabPosition = 'top';
+        this.color = undefined;
+        this.size = undefined;
+        this.drag = false;
+        this.cclose = false;
+    }
+    onClose(e, i) {
         return __awaiter(this, void 0, void 0, function* () {
             if (i !== 10) {
                 return;
@@ -30,8 +30,8 @@ exports.methods = {
             e.preventDefault();
             yield clickgo.form.dialog('The tab can not be close.');
         });
-    },
-    add: function () {
+    }
+    add() {
         const len = this.tabs.length;
         const val = 'tab' + (++this.tindex).toString();
         if (len === 15) {
@@ -51,13 +51,13 @@ exports.methods = {
         else {
             this.tabs.push(val);
         }
-    },
-    remove: function () {
+    }
+    remove() {
         if (this.tabs.length > 0) {
             this.tabs.splice(this.tabs.length - 1);
         }
-    },
-    position: function () {
+    }
+    position() {
         switch (this.tabPosition) {
             case 'top':
                 this.tabPosition = 'right';
@@ -72,4 +72,5 @@ exports.methods = {
                 this.tabPosition = 'top';
         }
     }
-};
+}
+exports.default = default_1;

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

@@ -1,6 +1,6 @@
 <form title="Tab" width="400" height="450" min-width="300" min-height="400" padding="10" direction="v">
     <label>Now tab: {{ntab}}.</label>
-    <tab v-model="ntab" v-model:tabs="tabs" :tabPosition="tabPosition" :drag="drag" :close="close" @close="onClose" style="margin-top: 10px; flex: 1; height: 0;" :style="{'font-size': size, 'color': color}">
+    <tab v-model="ntab" v-model:tabs="tabs" :tabPosition="tabPosition" :drag="drag" :close="cclose" @close="onClose" style="margin-top: 10px; flex: 1; height: 0;" :style="{'font-size': size, 'color': color}">
         <!-- 默认 -->
         <layout style="padding: 10px;">
             <button v-if="ntab === 'tab2'" style="padding: 0 10px; height: 30px;">Test button</button>
@@ -17,6 +17,6 @@
         <button @click="color = color ? undefined : 'red'" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">{{color ? '' : '!'}}red</button>
         <button @click="size = size ? undefined : '18px'" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">{{size ? '' : '!'}}18px</button>
         <button @click="drag = !drag" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">{{drag ? '' : '!'}}drag</button>
-        <button @click="close = !close" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">{{close ? '' : '!'}}close</button>
+        <button @click="cclose = !cclose" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">{{cclose ? '' : '!'}}close</button>
     </layout>
 </form>

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

@@ -1,53 +1,61 @@
 "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 = {
-    'value': '',
-    'selectionStart': 0,
-    'selectionEnd': 0,
-    'multi': false,
-    'disabled': false,
-    'readonly': false,
-    'long': false,
-    'password': false,
-    'wrap': true,
-    'menu': false,
-    'gesture': false,
-    'lineHeight': 1,
-    'fontSize': 12,
-    'border': 'solid',
-    'background': undefined,
-    'scrollLeft': 0,
-    'scrollTop': 0,
-    'length': 0,
-    'clientHeight': 0,
-    'clientWidth': 0
-};
-exports.methods = {
-    longClick: function () {
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.isFocus = false;
+        this.selectionStart = 0;
+        this.selectionEnd = 0;
+        this.scrollLeft = 0;
+        this.scrollTop = 0;
+        this.clientHeight = 0;
+        this.clientWidth = 0;
+        this.scrollHeight = 0;
+        this.scrollWidth = 0;
+        this.multi = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.password = false;
+        this.wrap = true;
+        this.menu = false;
+        this.gesture = false;
+        this.long = false;
+        this.lineHeight = 1;
+        this.fontSize = 12;
+        this.border = 'solid';
+        this.background = undefined;
+    }
+    get textBorder() {
+        switch (this.border) {
+            case 'underline': {
+                return '0 0 .5px 0';
+            }
+            case 'none': {
+                return '0';
+            }
+        }
+        return undefined;
+    }
+    longClick() {
         this.value = this.long ? 'short\nshort\nshort\nshort\nshort\nshort\nshort\nshort\nshort' : 'long\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong\nlong';
         this.long = !this.long;
         this.scrollTop = 0;
-    },
-    scrollborder: function (e) {
-        if (!this.gesture) {
-            return;
-        }
-        clickgo.dom.bindGesture(e, {
-            'dirs': this.multi ? ['top', 'bottom'] : ['left', 'right'],
-            'handler': (dir) => {
-                switch (dir) {
-                    case 'left':
-                    case 'top': {
-                        this.value = this.value.slice(0, -1);
-                        break;
-                    }
-                    default: {
-                        this.value += 'A';
-                    }
-                }
-            }
+    }
+    onGesture(dir) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield clickgo.form.dialog('onGesture: ' + dir);
         });
     }
-};
+}
+exports.default = default_1;

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

@@ -1,8 +1,8 @@
 <form width="350" height="350" title="Textbox">
     <layout direction="v" gutter="10" style="padding: 10px; flex: 1; width: 0;">
-        <label>Text Length: {{value.length}}, Selection Start: {{selectionStart}}, Selection End: {{selectionEnd}}</label>
-        <label>Scroll Left: {{scrollLeft}}, Scroll Top: {{scrollTop}}, Length: {{length}}, Client Height: {{clientHeight}}, Client Width: {{clientWidth}}</label>
-        <text v-model="value" :multi="multi" :disabled="disabled" :readonly="readonly" :password="password" :wrap="wrap" :border="border" v-model:scroll-left="scrollLeft" v-model:scroll-top="scrollTop" v-model:selection-start="selectionStart" v-model:selection-end="selectionEnd" @resize="clientHeight = $event" @resizen="clientWidth = $event" @change="length = $event" @scrollborder="scrollborder" :style="{'flex': multi ? '1' : undefined, 'line-height': lineHeight, 'font-size': fontSize + 'px', 'background': background, 'color': background ? '#FFF' : undefined, 'height': multi ? undefined : '30px'}">
+        <label>Text Length: {{value.length}}, Selection Start: {{selectionStart}}, Selection End: {{selectionEnd}}, Focus: {{isFocus}}</label>
+        <label>Scroll Left: {{scrollLeft}}, Scroll Top: {{scrollTop}}, Scroll Height: {{scrollHeight}}, Scroll Width: {{scrollWidth}}, Client Height: {{clientHeight}}, Client Width: {{clientWidth}}</label>
+        <text v-model="value" :multi="multi" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :disabled="disabled" :readonly="readonly" :password="password" :wrap="wrap" v-model:scroll-left="scrollLeft" v-model:scroll-top="scrollTop" v-model:selection-start="selectionStart" v-model:selection-end="selectionEnd" @clientheight="clientHeight = $event" @clientwidth="clientWidth = $event" @scrollheight="scrollHeight = $event" @scrollwidth="scrollWidth = $event" @focus="isFocus = true" @blur="isFocus = false" :style="{'flex': multi ? '1' : undefined, 'line-height': lineHeight, 'font-size': fontSize + 'px', 'background': background, 'color': background ? '#FFF' : undefined, 'height': multi ? undefined : '30px', 'border-width': textBorder}">
             <menulist v-if="menu">
                 <menulist-item>Custom</menulist-item>
             </menulist>

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

@@ -0,0 +1,79 @@
+"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 });
+const clickgo = require("clickgo");
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.ntab = '';
+        this.lineValue = [100];
+        this.lineCount = 2;
+        this.sLeft1 = 0;
+        this.sTop1 = 0;
+        this.sWidth1 = 0;
+        this.sHeight1 = 0;
+        this.cWidth1 = 0;
+        this.cHeight1 = 0;
+        this.sLeft2 = 0;
+        this.sTop2 = 0;
+        this.sWidth2 = 0;
+        this.sHeight2 = 0;
+        this.cWidth2 = 0;
+        this.cHeight2 = 0;
+        this.sLeft3 = 0;
+        this.sTop3 = 0;
+        this.sWidth3 = 0;
+        this.sHeight3 = 0;
+        this.cWidth3 = 0;
+        this.cHeight3 = 0;
+        this.sLeft4 = 0;
+        this.sTop4 = 0;
+        this.sWidth4 = 0;
+        this.sHeight4 = 0;
+        this.cWidth4 = 0;
+        this.cHeight4 = 0;
+        this.direction = false;
+        this.dir5 = 'v';
+        this.sLeft5 = 0;
+        this.sTop5 = 0;
+        this.sWidth5 = 0;
+        this.sHeight5 = 0;
+        this.cWidth5 = 0;
+        this.cHeight5 = 0;
+        this.line5 = 10;
+        this.cWidth6 = 0;
+        this.is6 = {
+            '29': 50,
+            '39': 50
+        };
+        this.gesture = false;
+        this.style = false;
+        this.selection = false;
+        this.content = false;
+        this.area = {};
+    }
+    get is() {
+        const is = [];
+        for (let i = 0; i < this.lineCount; ++i) {
+            if (i > 0 && i % 10 === 0) {
+                is[i] = 30;
+                continue;
+            }
+        }
+        return is;
+    }
+    onGesture(dir) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield clickgo.form.dialog('onGesture: ' + dir);
+        });
+    }
+}
+exports.default = default_1;

package/dist/app/demo/form/control/{greatview/greatview.xml → vflow/vflow.xml}

@@ -1,37 +1,37 @@
-<form title="Greatview" width="450" height="450" min-width="300" min-height="400" padding="10">
+<form title="Vflow" 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>
+                <vflow v-model:scroll-left="sLeft1" v-model:scroll-top="sTop1" @update:scrollTop="stst" direction="v" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" @select="area = $event" @clientwidth="cWidth1 = $event" @clientheight="cHeight1 = $event" @scrollwidth="sWidth1 = $event" @scrollheight="sHeight1 = $event" :style="{'line-height': style ? '1.5' : undefined, 'padding': style ? '10px' : undefined}" class="border" style="flex: 1; width: 0;" :data="lineCount" v-slot="data" :sizes="is">
                     <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>
+                </vflow>
                 <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>
+                    <vflow v-model:scroll-left="sLeft2" v-model:scroll-top="sTop2" direction="v" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" @select="area = $event" @clientwidth="cWidth2 = $event" @clientheight="cHeight2 = $event" @scrollwidth="sWidth2 = $event" @scrollheight="sHeight2 = $event" :style="{'line-height': style ? '1.5' : undefined, 'padding': style ? '10px' : undefined}" style="flex: 1; width: 0;" :data="lineCount" v-slot="data" :sizes="is">
                         <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>
+                    </vflow>
+                    <scroll :length="sHeight2" :client="cHeight2" v-model: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>
+            <label>Scroll Left / Top: {{sLeft1}} / {{sTop1}}, Client Width / Height: {{cWidth1}} / {{cHeight1}}, Scroll Width / Height: {{sWidth1}} / {{sHeight1}}.</label>
+            <label>Scroll Left / Top: {{sLeft2}} / {{sTop2}}, Client Width / Height: {{cWidth2}} / {{cHeight2}}, Scroll Width / Height: {{sWidth2}} / {{sHeight2}}.</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>
+            <vflow v-model:scroll-left="sLeft3" v-model:scroll-top="sTop3" :selection="selection" :gesture="gesture ? ['left', 'right'] : []" @gesture="onGesture" @select="area = $event" @clientwidth="cWidth3 = $event" @clientheight="cHeight3 = $event" @scrollwidth="sWidth3 = $event" @scrollheight="sHeight3 = $event" :style="{'line-height': style ? '1.5' : undefined, 'padding': style ? '10px' : undefined}" class="border" style="flex: 1; height: 0;" :data="lineCount" v-slot="data">
                 <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>
+            </vflow>
+            <label>Scroll Left / Top: {{sLeft3}} / {{sTop3}}, Client Width / Height: {{cWidth3}} / {{cHeight3}}, Scroll Width / Height: {{sWidth3}} / {{sHeight3}}.</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>
+                <button @click="lineCount += lineValue[0]" style="height: 30px; padding: 0 10px;">Add lines</button>
+                <button @click="lineCount -= lineValue[0];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>
@@ -43,14 +43,14 @@
         <!-- 自适应 -->
         <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>
+                <vflow class="border" v-model:scroll-left="sLeft4" v-model:scroll-top="sTop4" :selection="selection" :gesture="gesture ? (direction ? ['left', 'right'] : ['top', 'bottom']) : []" @gesture="onGesture" :direction="direction ? 'h' : 'v'" @clientwidth="cWidth4 = $event" @clientheight="cHeight4 = $event" @scrollwidth="sWidth4 = $event" @scrollheight="sHeight4 = $event" :data="lineCount" v-slot="data" :sizes="is">
                     <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>
+                </vflow>
             </layout>
-            <label>Scroll Left: {{sLeft4}}, Scroll Top: {{sTop4}}, Length: {{l4}}, Client: {{c4}}.</label>
+            <label>Scroll Left / Top: {{sLeft4}} / {{sTop4}}, Client Width / Height: {{cWidth4}} / {{cHeight4}}, Scroll Width / Height: {{sWidth4}} / {{sHeight4}}.</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>
@@ -64,26 +64,26 @@
                 <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>
+            <vflow v-model:scroll-left="sLeft5" v-model:scroll-top="sTop5" :selection="selection" :gesture="gesture ? ['left', 'right', 'top', 'bottom'] : []" @gesture="onGesture" :direction="dir5" @clientwidth="cWidth5 = $event" @clientheight="cHeight5 = $event" @scrollwidth="sWidth5 = $event" @scrollheight="sHeight5 = $event" class="border" style="flex: 1; height: 0; padding: 10px 0 0 10px;" :data="line5" v-slot="data">
                 <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>
+            </vflow>
+            <label>Scroll Left / Top: {{sLeft5}} / {{sTop5}}, Client Width / Height: {{cWidth5}} / {{cHeight5}}, Scroll Width / Height: {{sWidth5}} / {{sHeight5}}.</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>
+            <vflow class="border" direction="v" style="flex: 1; width: 0;" :data="100" @clientwidth="cWidth6 = $event" v-slot="data" :sizes="is6">
+                <vflow v-if="data.row === 30" :data="50" v-slot="data" class="border" direction="v" style="height: 50px;">
                     <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>
+                </vflow>
+                <vflow v-else-if="data.row === 40" :data="50" v-slot="data" class="border" style="height: 50px;" :style="{'width': cWidth6 + 'px'}">
                     <label class="rightborder" style="width: 80px;">Line {{data.row}}</label>
-                </greatview>
+                </vflow>
                 <label v-else>Line {{data.row}}</label>
-            </greatview>
+            </vflow>
         </layout>
     </tab>
 </form>