clickgo 3.0.0-dev

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

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.data = void 0;
+exports.data = {
+    'data': [
+        {
+            'kind': 'Design',
+            'title': 'Name',
+            'desc': 'The control name.',
+            'type': 'property',
+            'control': 'text',
+            'default': 'Control1',
+            'value': 'Control1'
+        },
+        {
+            'kind': 'Design',
+            'title': 'Locked',
+            'desc': 'Locked the control.',
+            'type': 'property',
+            'control': 'check',
+            'default': 'false',
+            'value': 'false'
+        },
+        {
+            'kind': 'Layout',
+            'title': 'Like',
+            'desc': 'The like desc.',
+            'type': 'property',
+            'control': 'select',
+            'default': 'Button',
+            'value': 'Button',
+            'data': ['Button', 'Select', 'Check']
+        },
+        {
+            'kind': 'Layout',
+            'title': 'Dock',
+            'desc': 'The dock.',
+            'type': 'property',
+            'control': 'dock',
+            'default': 'none',
+            'value': 'none'
+        },
+        {
+            'kind': 'Layout',
+            'title': 'Location',
+            'desc': 'Location of parent layout.',
+            'type': 'property',
+            'control': 'text',
+            'default': '100, 1000',
+            'value': '100, 1000',
+            'sub': [
+                {
+                    'title': 'X',
+                    'desc': 'X of location.',
+                    'control': 'text'
+                },
+                {
+                    'title': 'Y',
+                    'desc': 'Y of location.',
+                    'control': 'text'
+                },
+                {
+                    'title': 'Z',
+                    'desc': 'Z of location.',
+                    'control': 'text'
+                }
+            ]
+        },
+        {
+            'kind': 'Other',
+            'title': 'Sub',
+            'desc': 'Children.',
+            'type': 'property',
+            'control': 'text',
+            'default': '',
+            'value': '',
+            'sub': [
+                {
+                    'title': 'Dock',
+                    'desc': 'Dock of sub.',
+                    'control': 'dock'
+                },
+                {
+                    'title': 'Check',
+                    'desc': 'Check of sub.',
+                    'control': 'check'
+                },
+                {
+                    'title': 'Select',
+                    'desc': 'Select of sub.',
+                    'control': 'select',
+                    'data': ['', 'A', 'B', 'C']
+                }
+            ]
+        },
+        {
+            'kind': 'Mouse',
+            'title': 'MouseDown',
+            'desc': 'On mouse down.',
+            'type': 'event',
+            'default': '',
+            'value': 'mousedown'
+        },
+        {
+            'kind': 'Mouse',
+            'title': 'MouseUp',
+            'desc': 'On mouse up.',
+            'type': 'event',
+            'default': '',
+            'value': 'mouseup'
+        },
+        {
+            'kind': 'Key',
+            'title': 'KeyDown',
+            'desc': 'On key down.',
+            'type': 'event',
+            'default': '',
+            'value': 'kedown'
+        },
+        {
+            'kind': 'Key',
+            'title': 'KeyUp',
+            'desc': 'On key up.',
+            'type': 'event',
+            'default': '',
+            'value': 'keyup'
+        }
+    ]
+};

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

@@ -0,0 +1,6 @@
+<form title="Property" width="450" height="400" min-width="300" min-height="400" padding="10">
+    <layout gutter="10" style="flex: 1; width: 0;">
+        <text :modelValue="JSON.stringify(data, null, 4)" style="flex: 1; width: 0;" multi readonly wrap></text>
+        <property v-model="data" style="flex: 1; width: 0;"></property>
+    </layout>
+</form>

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

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

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

@@ -0,0 +1,12 @@
+<form title="Radio" width="300" height="300" padding="10">
+    <layout direction="v" gutter="10" style="flex: 1; width: 1;">
+        <label>Selected value: {{value}}</label>
+        <layout gutter="10">
+            <radio v-model="value" :disabled="disabled" value="radio1" style="flex: 1; width: 0;">radio1</radio>
+            <radio v-model="value" :disabled="disabled" value="radio2" style="flex: 1; width: 0;">radio2</radio>
+            <radio v-model="value" :disabled="disabled" value="radio3" style="flex: 1; width: 0;">radio3</radio>
+        </layout>
+        <button @click="value = 'radio2'" style="height: 30px;">Set value to "radio2"</button>
+        <button @click="disabled = !disabled" style="height: 30px;">{{disabled ? 'Remove' : 'Set'}} disabled</button>
+    </layout>
+</form>

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.data = void 0;
+exports.data = {
+    'l1': 1000,
+    'c1': 100,
+    'so1': 500,
+    'l2': 0,
+    'c2': 0,
+    'so2': 0,
+    'count': 3,
+    'float': false,
+    'disabled': false
+};

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

@@ -0,0 +1,35 @@
+<form title="Scroll" width="400" min-width="300" height="400" min-height="390" padding="10" background="#FFF">
+    <layout gutter="10" direction="v" style="flex: 1; width: 0;">
+        <layout gutter="10" style="flex: 1; height: 0;">
+            <layout gutter="10" direction="v" style="flex: 1;">
+                <label>Scroll offset: {{so1}}</label>
+                <layout gutter="10">
+                    <button @click="l1 = (l1 === 1000 ? 2000 : 1000)" style="height: 30px; flex: 1;">Set length {{l1 === 1000 ? '2000' : '1000'}}</button>
+                    <button @click="c1 = (c1 === 100 ? 200 : 100)" style="height: 30px; flex: 1;">Set client {{c1 === 100 ? '200' : '100'}}</button>
+                </layout>
+                <layout gutter="10">
+                    <button @click="disabled = !disabled" style="height: 30px; flex: 1;">{{disabled ? 'Remove' : 'Set'}} disabled</button>
+                    <button @click="l1 = 1000;c1 = 2000" style="height: 30px; flex: 1;">Set client > length</button>
+                </layout>
+            </layout>
+            <scroll :length="l1" :client="c1" v-model:scroll-offset="so1" :disabled="disabled" style="width: 20px;"></scroll>
+            <scroll scroll-offset="200" :disabled="disabled" style="width: 30px;"></scroll>
+            <scroll :disabled="disabled" style="width: 30px;"></scroll>
+        </layout>
+        <scroll direction="h" :disabled="disabled" style="height: 30px;"></scroll>
+        <layout style="border: solid 1px rgba(0, 0, 0, .3); flex: 1; height: 0;">
+            <overflow v-model:scroll-top="so2" direction="v" @resize="c2 = $event" @change="l2 = $event" style="line-height: 1.5; flex: 1;">
+                <block style="padding: 10px;">
+                    <block>Length: {{l2}}, Client: {{c2}}.</block>
+                    <block v-for="line of count">Line {{line}}.</block>
+                </block>
+            </overflow>
+            <scroll :length="l2" :client="c2" v-model:scroll-offset="so2" :float="float" :disabled="disabled" style="width: 20px;"></scroll>
+        </layout>
+        <layout gutter="10" align-v="center">
+            <label style="flex: 1;">On the left is the overflow control.</label>
+            <button @click="float = !float" style="padding: 0 10px; height: 30px;">{{float ? 'Remove' : 'Set'}} float</button>
+            <button @click="count += 10" style="padding: 0 10px; height: 30px;">Add 10 lines</button>
+        </layout>
+    </layout>
+</form>

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

@@ -0,0 +1,91 @@
+"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.watch = exports.data = void 0;
+exports.data = {
+    'ntab': '',
+    'area': 'all',
+    '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,
+    'disabled': false,
+    'slist2': [
+        'haha1', 'haha2', 'haha3', 'haha4', {
+            'value': 'ha5',
+            'label': 'The value is ha5'
+        }, {
+            'value': 'ha6',
+            'label': 'Can not be selected',
+            'disabled': true
+        }, {
+            'value': 'title',
+            'children': [
+                {
+                    'label': 'sub1label'
+                }, {
+                    'label': 'sub2'
+                }, {
+                    'label': 'Sub title',
+                    'children': ['1', '2']
+                }
+            ]
+        }, {
+            'label': 'happy',
+            'children': ['xixi', 'xixida', 'gogogo']
+        }
+    ],
+    'select2': 'haha2',
+    'editable': false,
+    'padding': false,
+    'fontSize': false,
+    'background': false
+};
+exports.watch = {
+    'select': function (n, o) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.slist[n].type === 0) {
+                return;
+            }
+            yield this.$nextTick();
+            if (this.slist[o].type === 0) {
+                this.select = o;
+                return;
+            }
+            this.select = 0;
+        });
+    }
+};

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

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

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

@@ -0,0 +1,75 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.methods = exports.data = void 0;
+const clickgo = require("clickgo");
+exports.data = {
+    'ntab': '',
+    'tabs': ['tab1'],
+    'tindex': 1,
+    'tabPosition': 'top',
+    'color': undefined,
+    'size': undefined,
+    'drag': false,
+    'close': false
+};
+exports.methods = {
+    onClose: function (e, i) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (i !== 10) {
+                return;
+            }
+            e.preventDefault();
+            yield clickgo.form.dialog('The tab can not be close.');
+        });
+    },
+    add: function () {
+        const len = this.tabs.length;
+        const val = 'tab' + (++this.tindex).toString();
+        if (len === 15) {
+            this.tabs.push({
+                'value': val,
+                'drag': false,
+                'close': false
+            });
+        }
+        else if (len === 16) {
+            this.tabs.push({
+                'value': val,
+                'drag': true,
+                'close': true
+            });
+        }
+        else {
+            this.tabs.push(val);
+        }
+    },
+    remove: function () {
+        if (this.tabs.length > 0) {
+            this.tabs.splice(this.tabs.length - 1);
+        }
+    },
+    position: function () {
+        switch (this.tabPosition) {
+            case 'top':
+                this.tabPosition = 'right';
+                break;
+            case 'right':
+                this.tabPosition = 'bottom';
+                break;
+            case 'bottom':
+                this.tabPosition = 'left';
+                break;
+            default:
+                this.tabPosition = 'top';
+        }
+    }
+};

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

@@ -0,0 +1,22 @@
+<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}">
+        <!-- 默认 -->
+        <layout style="padding: 10px;">
+            <button v-if="ntab === 'tab2'" style="padding: 0 10px; height: 30px;">Test button</button>
+            <label v-else>The tab's value is "{{ntab}}";</label>
+        </layout>
+    </tab>
+    <layout gutter="10" style="margin-top: 10px;">
+        <button @click="add" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">Add</button>
+        <button @click="remove" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">Remove</button>
+        <button @click="position" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">Position</button>
+        <button @click="ntab = 'tab2'" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">Tab2</button>
+    </layout>
+    <layout gutter="10" style="margin-top: 10px;">
+        <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>
+    </layout>
+</form>

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

@@ -0,0 +1,53 @@
+"use strict";
+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 () {
+        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';
+                    }
+                }
+            }
+        });
+    }
+};

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

@@ -0,0 +1,37 @@
+<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'}">
+            <menulist v-if="menu">
+                <menulist-item>Custom</menulist-item>
+            </menulist>
+        </text>
+        <layout gutter="10">
+            <button @click="multi = !multi" style="flex: 1; height: 30px;">{{multi ? '' : '!'}}multi</button>
+            <button @click="disabled = !disabled" style="flex: 1; height: 30px;">{{disabled ? '' : '!'}}disabled</button>
+            <button @click="readonly = !readonly" style="flex: 1; height: 30px;">{{readonly ? '' : '!'}}readonly</button>
+            <button @click="longClick" style="flex: 1; height: 30px;">{{long ? '' : '!'}}long</button>
+        </layout>
+        <layout gutter="10">
+            <button @click="password = !password" style="flex: 1; height: 30px;">{{password ? '' : '!'}}password</button>
+            <button @click="wrap = !wrap" style="flex: 1; height: 30px;">{{wrap ? '' : '!'}}wrap</button>
+            <button @click="menu = !menu" style="flex: 1; height: 30px;">{{menu ? '' : '!'}}menu</button>
+            <button @click="gesture = !gesture" style="flex: 1; height: 30px;">{{gesture ? '' : '!'}}gesture</button>
+        </layout>
+        <layout gutter="10">
+            <button @click="lineHeight = lineHeight === 1 ? 1.5 : 1" style="flex: 1; height: 30px;">Set line-height {{lineHeight === 1 ? 1.5 : 1}}</button>
+            <button @click="fontSize = fontSize === 12 ? 16 : 12" style="flex: 1; height: 30px;">Set font-size {{fontSize === 12 ? 16 : 12}}</button>
+        </layout>
+        <layout gutter="10">
+            <button @click="border = 'solid'" style="flex: 2; height: 30px;">Set border solid</button>
+            <button @click="border = 'underline'" style="flex: 1; height: 30px;">Underline</button>
+            <button @click="border = 'none'" style="flex: 1; height: 30px;">None</button>
+        </layout>
+        <layout gutter="10">
+            <button @click="background = 'red'" style="flex: 2; height: 30px;">Set background red</button>
+            <button @click="background = 'green'" style="flex: 1; height: 30px;">Green</button>
+            <button @click="background = undefined" style="flex: 1; height: 30px;">Remove</button>
+        </layout>
+    </layout>
+</form>

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

@@ -0,0 +1,73 @@
+"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,
+    'c6': 0,
+    'gesture': false,
+    'style': false,
+    'selection': false,
+    'area': {}
+};
+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;
+                    }
+                }
+            }
+        });
+    }
+};