clickgo 3.1.2-dev11 → 3.1.3-dev12

package/dist/app/demo/app.js

@@ -14,79 +14,6 @@ const main_1 = require("./form/main");
 class default_1 extends clickgo.core.AbstractApp {
     main() {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.config({
-                'name': 'Clickgo Demo',
-                'ver': 1,
-                'version': '0.1',
-                'author': 'clickgo',
-                'controls': [
-                    '/clickgo/control/common',
-                    '/clickgo/control/form',
-                    '/clickgo/control/monaco',
-                    '/clickgo/control/property'
-                ],
-                'style': '/package/global',
-                'files': [
-                    '/form/control/block/block.css',
-                    '/form/control/block/block.xml',
-                    '/form/control/button/button.css',
-                    '/form/control/button/button.xml',
-                    '/form/control/check/check.xml',
-                    '/form/control/dialog/dialog.xml',
-                    '/form/control/file/file.xml',
-                    '/form/control/form/form.css',
-                    '/form/control/form/form.xml',
-                    '/form/control/greatview/greatview.css',
-                    '/form/control/greatview/greatview.xml',
-                    '/form/control/img/img.xml',
-                    '/form/control/label/label.xml',
-                    '/form/control/list/list.css',
-                    '/form/control/list/list.xml',
-                    '/form/control/loading/loading.xml',
-                    '/form/control/marquee/marquee.xml',
-                    '/form/control/menu/menu.xml',
-                    '/form/control/monaco/monaco.xml',
-                    '/form/control/overflow/overflow.css',
-                    '/form/control/overflow/overflow.xml',
-                    '/form/control/property/property.xml',
-                    '/form/control/radio/radio.xml',
-                    '/form/control/scroll/scroll.xml',
-                    '/form/control/select/select.xml',
-                    '/form/control/tab/tab.xml',
-                    '/form/control/text/text.xml',
-                    '/form/control/view/view.css',
-                    '/form/control/view/view.xml',
-                    '/form/event/form/form.css',
-                    '/form/event/form/form.xml',
-                    '/form/event/screen/screen.xml',
-                    '/form/event/task/task.xml',
-                    '/form/method/aform/aform.xml',
-                    '/form/method/aform/test.xml',
-                    '/form/method/core/core.xml',
-                    '/form/method/dom/dom.css',
-                    '/form/method/dom/dom.xml',
-                    '/form/method/form/form.css',
-                    '/form/method/form/form.xml',
-                    '/form/method/fs/fs.xml',
-                    '/form/method/fs/text.xml',
-                    '/form/method/task/locale1.json',
-                    '/form/method/task/locale2.json',
-                    '/form/method/task/task.xml',
-                    '/form/method/theme/theme.xml',
-                    '/form/method/tool/tool.xml',
-                    '/form/method/zip/zip.xml',
-                    '/form/main.css',
-                    '/form/main.xml',
-                    '/res/icon.svg',
-                    '/res/img.jpg',
-                    '/res/r-1.svg',
-                    '/res/r-2.svg',
-                    '/res/sql.svg',
-                    '/res/txt.svg',
-                    '/res/zip.svg',
-                    '/global.css'
-                ]
-            });
             this.run(yield main_1.default.create());
         });
     }

package/dist/app/demo/config.json

@@ -0,0 +1,109 @@
+{
+    "name": "Clickgo Demo",
+    "ver": 1,
+    "version": "0.1",
+    "author": "clickgo",
+
+    "controls": [
+        "/clickgo/control/common",
+        "/clickgo/control/form",
+        "/clickgo/control/monaco",
+        "/clickgo/control/property"
+    ],
+    "style": "/package/global",
+
+    "files": [
+        "/form/control/block/block.css",
+        "/form/control/block/block.xml",
+        "/form/control/button/button.css",
+        "/form/control/button/button.js",
+        "/form/control/button/button.xml",
+        "/form/control/check/check.js",
+        "/form/control/check/check.xml",
+        "/form/control/dialog/dialog.js",
+        "/form/control/dialog/dialog.xml",
+        "/form/control/file/file.js",
+        "/form/control/file/file.xml",
+        "/form/control/flow/flow.css",
+        "/form/control/flow/flow.js",
+        "/form/control/flow/flow.xml",
+        "/form/control/form/form.css",
+        "/form/control/form/form.js",
+        "/form/control/form/form.xml",
+        "/form/control/img/img.xml",
+        "/form/control/label/label.xml",
+        "/form/control/list/list.css",
+        "/form/control/list/list.js",
+        "/form/control/list/list.xml",
+        "/form/control/loading/loading.xml",
+        "/form/control/marquee/marquee.js",
+        "/form/control/marquee/marquee.xml",
+        "/form/control/menu/menu.js",
+        "/form/control/menu/menu.xml",
+        "/form/control/monaco/monaco.js",
+        "/form/control/monaco/monaco.xml",
+        "/form/control/property/property.js",
+        "/form/control/property/property.xml",
+        "/form/control/radio/radio.js",
+        "/form/control/radio/radio.xml",
+        "/form/control/scroll/scroll.js",
+        "/form/control/scroll/scroll.xml",
+        "/form/control/select/select.js",
+        "/form/control/select/select.xml",
+        "/form/control/tab/tab.js",
+        "/form/control/tab/tab.xml",
+        "/form/control/text/text.js",
+        "/form/control/text/text.xml",
+        "/form/control/vflow/vflow.css",
+        "/form/control/vflow/vflow.js",
+        "/form/control/vflow/vflow.xml",
+        "/form/event/form/form.css",
+        "/form/event/form/form.js",
+        "/form/event/form/form.xml",
+        "/form/event/screen/screen.js",
+        "/form/event/screen/screen.xml",
+        "/form/event/task/task.js",
+        "/form/event/task/task.xml",
+        "/form/method/aform/aform.js",
+        "/form/method/aform/aform.xml",
+        "/form/method/aform/test.xml",
+        "/form/method/core/core.js",
+        "/form/method/core/core.xml",
+        "/form/method/dom/dom.css",
+        "/form/method/dom/dom.js",
+        "/form/method/dom/dom.xml",
+        "/form/method/form/form.css",
+        "/form/method/form/form.js",
+        "/form/method/form/form.xml",
+        "/form/method/fs/fs.js",
+        "/form/method/fs/fs.xml",
+        "/form/method/fs/text.js",
+        "/form/method/fs/text.xml",
+        "/form/method/native/native.js",
+        "/form/method/native/native.xml",
+        "/form/method/system/system.js",
+        "/form/method/system/system.xml",
+        "/form/method/task/locale1.json",
+        "/form/method/task/locale2.json",
+        "/form/method/task/task.js",
+        "/form/method/task/task.xml",
+        "/form/method/theme/theme.js",
+        "/form/method/theme/theme.xml",
+        "/form/method/tool/tool.js",
+        "/form/method/tool/tool.xml",
+        "/form/method/zip/zip.js",
+        "/form/method/zip/zip.xml",
+        "/form/main.css",
+        "/form/main.js",
+        "/form/main.xml",
+        "/res/icon.svg",
+        "/res/img.jpg",
+        "/res/r-1.svg",
+        "/res/r-2.svg",
+        "/res/sql.svg",
+        "/res/txt.svg",
+        "/res/zip.svg",
+        "/app.js",
+        "/global.css"
+    ]
+}

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

@@ -9,19 +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 = {
-    btnChecked: false,
-    btnRadio: '0',
-    type: 'default',
-    area: 'all',
-    plain: 'not'
-};
-exports.methods = {
-    dialog: function (text) {
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.btnChecked = false;
+        this.btnRadio = '0';
+        this.type = ['default'];
+        this.area = ['all'];
+        this.plain = ['not'];
+    }
+    dialog(text) {
         return __awaiter(this, void 0, void 0, function* () {
             yield clickgo.form.dialog(text);
         });
     }
-};
+}
+exports.default = default_1;

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

@@ -1,5 +1,5 @@
 <form width="450" height="300" title="Button">
-    <overflow direction="v" style="flex: 1; width: 0;">
+    <flow direction="v" style="flex: 1; width: 0;">
         <layout direction="v" gutter="10" style="padding: 10px;">
             <label>Type:</label>
             <layout gutter="10" class="buttons">
@@ -60,7 +60,7 @@
             </layout>
             <label>Menu:</label>
             <layout gutter="10" class="buttons">
-                <button :type="type" :area="area" :plain="plain === 'plain' ? 'plain' : undefined" @click="dialog('Click!')">
+                <button :type="type[0]" :area="area[0]" :plain="plain[0] === 'plain' ? 'plain' : undefined" @click="dialog('Click!')">
                     <template v-slot>Area all</template>
                     <template v-slot:pop>
                         <menulist>
@@ -70,7 +70,7 @@
                     </template>
                 </button>
                 <select v-model="type" :data="['default', 'primary', 'info', 'warning', 'danger', 'tool']"></select>
-                <select v-model="area" :data="['all', 'arrow', 'mark']"></select>
+                <select v-model="area" :data="['all', 'split', 'mark']"></select>
                 <select v-model="plain" :data="['plain', 'not']"></select>
             </layout>
             <label>Tool buttons:</label>
@@ -99,7 +99,7 @@
                         </menulist>
                     </template>
                 </button>
-                <button type="tool" area="arrow" style="width: initial;">
+                <button type="tool" area="split" style="width: initial;">
                     <img src="../../../res/icon.svg" style="margin: 0 5px;" />
                     <template v-slot:pop>
                         <menulist>
@@ -112,7 +112,7 @@
             <label>Other:</label>
             <layout gutter="10" align-v="center">
                 <button style="padding: 30px;">Padding 30px</button>
-                <button style="padding: 15px 30px;" area="arrow">
+                <button style="padding: 15px 30px;" area="split">
                     Padding 10px 20px with pop
                     <template v-slot:pop>
                         <menulist>
@@ -122,5 +122,5 @@
                 </button>
             </layout>
         </layout>
-    </overflow>
+    </flow>
 </form>

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

@@ -1,12 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.data = void 0;
-exports.data = {
-    'checked1': false,
-    'checked2': false,
-    'checked3': false,
-    'indeterminate1': false,
-    'indeterminate2': false,
-    'indeterminate3': false,
-    'disabled': false
-};
+const clickgo = require("clickgo");
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.checked1 = false;
+        this.checked2 = false;
+        this.checked3 = false;
+        this.indeterminate1 = false;
+        this.indeterminate2 = false;
+        this.indeterminate3 = false;
+        this.disabled = false;
+    }
+}
+exports.default = default_1;

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

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.methods = exports.data = void 0;
-exports.data = {
-    'accept': 'txt',
-    'multi': 'false',
-    'dir': 'false',
-    'list': []
-};
-exports.methods = {
-    select: function () {
-        this.$refs.file.select();
-    },
-    change: function (files) {
+const clickgo = require("clickgo");
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.accept = 'txt';
+        this.multi = 'false';
+        this.dir = 'false';
+        this.list = [];
+    }
+    select() {
+        this.refs.file.select();
+    }
+    change(files) {
         this.list = [];
         if (!files) {
             return;
@@ -20,4 +21,5 @@ exports.methods = {
             this.list.push((file.webkitRelativePath || file.name) + ' (' + file.size.toString() + ')');
         }
     }
-};
+}
+exports.default = default_1;

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

@@ -0,0 +1,64 @@
+"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 = [10];
+        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.gesture = false;
+        this.style = false;
+        this.selection = false;
+        this.sub = false;
+        this.area = {};
+    }
+    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/flow/flow.xml

@@ -0,0 +1,101 @@
+<form title="Flow" 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;">
+                <flow v-model:scroll-left="sLeft1" v-model:scroll-top="sTop1" 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}" 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 :style="{'height': sub && (index === 1) ? '50px' : undefined}">Line {{line}}, index: {{index}}.</block>
+                        </block>
+                    </block>
+                </flow>
+                <layout class="border" style="flex: 1;">
+                    <flow 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}" 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 :style="{'height': sub && (index === 1) ? '50px' : undefined}">Line {{line}}, index: {{index}}.</block>
+                            </block>
+                        </block>
+                    </flow>
+                    <scroll :length="sHeight2" :client="cHeight2" v-model:offset="sTop2" style="width: 20px;"></scroll>
+                </layout>
+            </layout>
+            <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 -->
+            <flow 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}" 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>
+            </flow>
+            <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="[10, 50, 500, 5000]" style="flex: 1; width: 0;"></select>
+                <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>
+                <button @click="selection = !selection" style="flex: 1; width: 0; height: 30px;">{{selection ? '' : '!'}}selection</button>
+                <button @click="style = !style" style="flex: 1; width: 0; height: 30px;">{{style ? '' : '!'}}style</button>
+                <button @click="sub = !sub" style="flex: 1; width: 0; height: 30px;">{{sub ? '' : '!'}}sub</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;">
+                <flow 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">
+                    <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>
+                </flow>
+            </layout>
+            <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; 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>
+            <flow 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;">
+                <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>
+            </flow>
+            <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;">
+            <flow class="border" direction="v" style="flex: 1; width: 0;">
+                <template v-for="i of 100">
+                    <flow v-if="i === 30" class="border" direction="v" style="height: 50px;">
+                        <label v-for="k of 50">Line {{k}}</label>
+                    </flow>
+                    <flow v-else-if="i === 40" class="border" style="height: 50px;">
+                        <label v-for="k of 50" class="rightborder" style="width: 80px;">Line {{k}}</label>
+                    </flow>
+                    <label v-else>Line {{i}}</label>
+                </template>
+            </flow>
+        </layout>
+    </tab>
+</form>

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

@@ -19,7 +19,7 @@ class default_1 extends clickgo.form.AbstractForm {
         this.title = 'Form';
         this.min = true;
         this.max = true;
-        this.close = true;
+        this.cclose = true;
         this.stateMax = false;
         this.stateMin = false;
         this.minWidth = 200;

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

@@ -1,12 +1,12 @@
 <form v-model:width="width" v-model:height="height" :icon="icon" :title="title" :min="min" :max="max" :close="close" v-model:state-max="stateMax" v-model:state-min="stateMin" :min-width="minWidth" :min-height="minHeight" :resize="resize" :loading="loading" :border="border" direction="v">
-    <overflow direction="v">
+    <flow direction="v">
         <layout direction="v" gutter="10" style="padding: 10px;">
             <label>focus: {{formFocus}}, width: {{width}}, height: {{height}}, state-max: {{stateMax}}, state-min: {{stateMin}}.</label>
             <button @click="icon = icon ? '' : '/package/res/icon.svg'">Set icon</button>
             <button @click="title = (title === 'Form') ? 'Changed' : 'Form'">Set title</button>
             <button @click="min = min ? false : true">{{min ? 'Hide' : 'Show'}} min button</button>
             <button @click="max = max ? false : true">{{max ? 'Hide' : 'Show'}} max button</button>
-            <button @click="close = close ? false : true">{{close ? 'Hide' : 'Show'}} close button</button>
+            <button @click="cclose = cclose ? false : true">{{cclose ? 'Hide' : 'Show'}} close button</button>
             <button @click="stateMax = true">To max</button>
             <button @click="stateMin = true">To min</button>
             <button @click="minWidth = (minWidth === 200) ? 300 : 200">Set min-width to {{minWidth === 200 ? '300' : '200'}}</button>
@@ -24,5 +24,5 @@
                 <button @click="border = 'none'">None</button>
             </layout>
         </layout>
-    </overflow>
+    </flow>
 </form>

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

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