clickgo 3.16.21 → 3.16.23

package/LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2024 MAIYUN.NET
+   Copyright 2007 - 2025 MAIYUN.NET
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -1,6 +1,6 @@
 # ClickGo
 
-<p align="center"><img src="dist/icon.png" width="68" height="68" alt="ClickGo"></p>
+<p align="center"><img src="./dist/icon.png" width="68" height="68" alt="ClickGo"></p>
 <p align="center">
     <a href="https://github.com/maiyun/clickgo/blob/master/LICENSE">
         <img alt="License" src="https://img.shields.io/github/license/maiyun/clickgo?color=blue" />
@@ -16,16 +16,26 @@
     </a>
 </p>
 
-Quickly and easily create a beautiful console interface.
+[简体中文](./doc/README.sc.md)
 
-## Installation
+Build web and native apps using HTML + CSS.
 
-Load the module loader first, and then load it using the module loader.
+Apps compile into a single `.cga` file — run it in the browser or locally via `ClickGo Native`. Great for image editors, DB tools, file managers, admin panels, and more.
+
+<p align="center">
+    <img src="./doc/pic3.jpg" alt="ClickGo">
+    <img src="./doc/pic.jpg" alt="ClickGo">
+    <img src="./doc/pic2.jpg" alt="ClickGo">
+</p>
+
+## Usage
+
+First, load the module loader, then load your app with it.
 
 **index.html**
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@litert/loader@3.5.8/dist/loader.min.js?path=index&npm={'clickgo':'3.16.21'}"></script>
+<script src="https://cdn.jsdelivr.net/npm/@litert/loader@3.5.8/dist/loader.min.js?path=index&npm={'clickgo':'3.16.23'}"></script>
 ```
 
 **index.js**
@@ -42,15 +52,18 @@ clickgo.launcher(new Boot());
 
 ### NPM
 
-After installing with NPM, you'll get code hints.
+Use TypeScript? Install via NPM for full IntelliSense support.
 
 ```sh
 $ npm i clickgo --save-dev
+$ npm i @litert/loader --save-dev
+$ npm i jszip --save-dev
 ```
 
-## Note
+## Notes
 
-ClickGo demand loading Vue, jszip, resize-observer, but **DO NOT** reference these JS and CSS files. ClickGo will automatically reference. You only need to import "clickgo" module.
+ClickGo auto-loads Vue, jszip, and resize-observer.
+**Don't** include them manually — just import the `ClickGo` module.
 
 ## Demo
 
@@ -58,10 +71,6 @@ Clone and visit "dist/test/index.html".
 
 [Click here to visit online.](https://maiyun.github.io/clickgo/dist/test/)
 
-## Changelog
-
-[Changelog](doc/CHANGELOG.md)
-
 ## License
 
 This library is published under [Apache-2.0](./LICENSE) license.
@@ -184,6 +193,9 @@ This library is published under [Apache-2.0](./LICENSE) license.
 
 [Question Circle SVG Vector](https://www.svgrepo.com/svg/522997/question-circle)  
 [Info Circle SVG Vector](https://www.svgrepo.com/svg/522904/info-circle)
+[Copy SVG Vector](https://www.svgrepo.com/svg/522803/copy)
+[Scissors SVG Vector](https://www.svgrepo.com/svg/523012/scissors)
+[Paste SVG Vector](https://www.svgrepo.com/svg/489767/paste)
 
 ### **LICENSE:** CC0 License **UPLOADER:** SVG Repo
 

package/dist/app/demo/app.js

@@ -52,7 +52,7 @@ class default_1 extends clickgo.core.AbstractApp {
         return __awaiter(this, void 0, void 0, function* () {
             var _a;
             this.run(yield clickgo.form.create(main_1.default, {
-                'param': (_a = data.param) !== null && _a !== void 0 ? _a : 'none'
+                'param': (_a = data.param) !== null && _a !== void 0 ? _a : 'none',
             }));
         });
     }

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

@@ -7,7 +7,7 @@
                 <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>
+                            <button v-if="index > 0 && index % 10 === 0">test</button>
                             <block v-else :style="{'height': sub && (index === 1) ? '50px' : undefined}">Line {{line}}, index: {{index}}.</block>
                         </block>
                     </block>
@@ -40,14 +40,14 @@
             <!-- button list -->
             <layout gutter="10">
                 <select v-model="lineValue" :data="[10, 50, 500, 5000]" style="flex: 1; width: 0;"></select>
-                <button @click="lineCount += parseInt(lineValue[0])" style="height: 30px;">Add lines</button>
-                <button @click="lineCount -= parseInt(lineValue[0]);if(lineCount < 0) {lineCount = 0;}" style="height: 30px;">Remove lines</button>
+                <button @click="lineCount += parseInt(lineValue[0])">Add lines</button>
+                <button @click="lineCount -= parseInt(lineValue[0]);if(lineCount < 0) {lineCount = 0;}" >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>
+                <button @click="gesture = !gesture" style="flex: 1; width: 0;">{{gesture ? '' : '!'}}gesture</button>
+                <button @click="selection = !selection" style="flex: 1; width: 0;">{{selection ? '' : '!'}}selection</button>
+                <button @click="style = !style" style="flex: 1; width: 0;">{{style ? '' : '!'}}style</button>
+                <button @click="sub = !sub" style="flex: 1; width: 0;">{{sub ? '' : '!'}}sub</button>
             </layout>
         </layout>
         <!-- 自适应 -->
@@ -55,23 +55,23 @@
             <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>
+                        <button v-if="index > 0 && index % 10 === 0" :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>
+                <button @click="lineCount += 10" style="flex: 1;">Add 10 lines</button>
+                <button @click="lineCount -= 10;if(lineCount < 0) {lineCount = 0;}" style="flex: 1;">Remove 10 lines</button>
+                <button @click="direction = !direction" style="flex: 1;">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>
+                <button @click="dir5 = (dir5 === 'h' ? 'v' : 'h')" style="flex: 1;">Change direction</button>
+                <button @click="line5 = (line5 === 10 ? 1 : 10)" style="flex: 1;">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;">

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

@@ -24,5 +24,17 @@
             <icon name="info" size="m"></icon>
             <label>info</label>
         </layout>
+        <layout gutter="20" align-v="center">
+            <icon name="copy"></icon>
+            <icon name="copy" size="m"></icon>
+            <label>copy</label>
+            <icon name="cut"></icon>
+            <icon name="cut" size="m"></icon>
+            <label>cut</label>
+        </layout>
+        <layout gutter="20" align-v="center">
+            <icon name="paste"></icon>
+            <icon name="paste" size="m"></icon>
+        </layout>
     </layout>
 </form>

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

@@ -80,11 +80,29 @@ class default_1 extends clickgo.form.AbstractForm {
             {
                 'control': 'split'
             },
+            {
+                'type': 1
+            },
+            {
+                'type': 1
+            },
+            {
+                'type': 1
+            },
+            {
+                'type': 1
+            },
+            {
+                'type': 1
+            },
+            {
+                'type': 1
+            },
             {
                 'type': 1
             }
         ];
-        this.select = [];
+        this.select = [11];
         this.select2 = ['Appraise'];
         this.label2 = [''];
         this.listData5 = [
@@ -143,6 +161,7 @@ class default_1 extends clickgo.form.AbstractForm {
         this.check = false;
         this.mode = ['default'];
         this.listDataEmpty = false;
+        this.glNone = false;
     }
     get sizes() {
         const rtn = {};
@@ -362,5 +381,7 @@ class default_1 extends clickgo.form.AbstractForm {
             resolve();
         });
     }
+    onMounted() {
+    }
 }
 exports.default = default_1;

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

@@ -3,7 +3,7 @@
     <tab v-model="ntab" :tabs="['greatlist', 'adaptation', 'beyond', 'list', 'object', '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" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" :virtual="virtual" :mode="mode[0]" @gesture="onGesture" @add="onGAdd" @Remove="onGRemove" @change="onGChange" @changed="onGChanged" :scroll="scroll" :sizes="sizes" @select="onSelect" style="line-height: 1.3; flex: 1; height: 0;">
+            <greatlist v-model="select" :data="slist" :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" :virtual="virtual" :mode="mode[0]" @gesture="onGesture" @add="onGAdd" @Remove="onGRemove" @change="onGChange" @changed="onGChanged" :scroll="scroll" :sizes="sizes" @select="onSelect" style="line-height: 1.3; flex: 1; height: 0;" :style="{'display': glNone ? 'none': undefined}">
                 <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>
@@ -12,7 +12,7 @@
                             <block style="opacity: .7;">{{data.row.path}}</block>
                         </block>
                     </layout>
-                    <template v-else>Other</template>
+                    <template v-else>Other{{data.index}}</template>
                 </template>
                 <template v-slot:pop>
                     <menulist>
@@ -28,7 +28,7 @@
             </greatlist>
             <label class="tip">Right-click (computer) or press and hold (phone) to open the universal menu.</label>
             <label class="tip">Area: {{selectionArea}}</label>
-            <button @click="select = [2]" style="margin-top: 10px;">Select [2]</button>
+            <button @click="select = [5]" style="margin-top: 10px;">Select [5]</button>
         </layout>
         <!-- 自适应 -->
         <layout v-else-if="ntab === 'adaptation'" direction="v" style="flex: 1; width: 0; padding: 10px;">

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

@@ -5,7 +5,7 @@
             <layout direction="v" style="flex: 1; width: 0;">
                 <marquee direction="top" 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>
+                        <button v-if="index > 0 && index % 10 === 0">test</button>
                         <block v-else>Line {{line}}, index: {{index}}.</block>
                     </block>
                 </marquee>
@@ -16,7 +16,7 @@
                 </marquee>
                 <marquee :direction="direction" 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>
+                        <button v-if="index > 0 && index % 10 === 0">test</button>
                         <block v-else>Line {{line}}, index: {{index}}.</block>
                     </block>
                 </marquee>
@@ -24,10 +24,10 @@
         </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>
+            <button @click="++lineCount" style="flex: 1; width: 0;">Add item</button>
+            <button @click="--lineCount;if(lineCount < 0){lineCount = 0}" style="flex: 1; width: 0;">Remove item</button>
+            <button @click="style = !style" style="flex: 1; width: 0;">Change style</button>
         </layout>
-        <button @click="changeDirection" style="height: 30px;">Right bottom: {{direction}}</button>
+        <button @click="changeDirection">Right bottom: {{direction}}</button>
     </layout>
 </form>

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

@@ -4,7 +4,7 @@
         <menulist>
             <menulist-item alt="A">Item1</menulist-item>
             <menulist-item alt="B">Item2</menulist-item>
-            <menulist-item alt="C">
+            <menulist-item>
                 <template v-slot>Radio</template>
                 <template v-slot:pop>
                     <menulist>
@@ -12,7 +12,7 @@
                         <menulist-item type="radio" alt="B" v-model="radio" label="radio2">Radio2</menulist-item>
                         <menulist-item type="radio" alt="C" v-model="radio" label="radio3" @check="onRadio">Radio3</menulist-item>
                         <menulist-split></menulist-split>
-                        <menulist-item alt="C">
+                        <menulist-item>
                             <template v-slot>Check</template>
                             <template v-slot:pop>
                                 <menulist>
@@ -26,43 +26,43 @@
                     </menulist>
                 </template>
             </menulist-item>
-            <menulist-item alt="D">
+            <menulist-item>
                 <template v-slot>Custom</template>
                 <template v-slot:pop>
                     <menulist>
-                        <menulist-item alt="A">
+                        <menulist-item>
                             <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-item alt="A"><img src="../../../res/txt.svg" style="width: 16px; height: 16px;" /><label>Txt</label></menulist-item>
+                                    <menulist-item alt="B"><img src="../../../res/sql.svg" style="width: 16px; height: 16px;" /><label>Sql</label></menulist-item>
+                                    <menulist-item alt="C"><img src="../../../res/zip.svg" style="width: 16px; height: 16px;" /><label>Zip</label></menulist-item>
                                 </menulist>
                             </template>
                         </menulist-item>
-                        <menulist-item alt="B">
+                        <menulist-item>
                             <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>
+                                        <button @click="$event.stopPropagation()" style="flex: 1; width: 0;">Button</button>
                                     </menulist-item>
                                     <menulist-item alt="B">
-                                        <scroll direction="h" @click="$event.stopPropagation()" style="height: 30px; width: 150px;"></scroll>
+                                        <scroll direction="h" @click="$event.stopPropagation()" style="width: 150px; height: 30px;"></scroll>
                                     </menulist-item>
                                     <menulist-item alt="C">
-                                        <text @click="$event.stopPropagation()" style="height: 30px; flex: 1; width: 0;"></text>
+                                        <text @click="$event.stopPropagation()" style="flex: 1; width: 0;"></text>
                                     </menulist-item>
                                 </menulist>
                             </template>
                         </menulist-item>
-                        <menulist-item alt="C">
+                        <menulist-item>
                             <template v-slot>Free</template>
                             <template v-slot:pop>
                                 <menulist>
                                     <layout>
                                         <menulist-item alt="A">Box 1</menulist-item>
-                                        <menulist-item alt="B">
+                                        <menulist-item>
                                             <template v-slot>Box 2</template>
                                             <template v-slot:pop>
                                                 <menulist>
@@ -82,7 +82,7 @@
         <label>Basic:</label>
         <menulist>
             <menulist-item alt="E">Item1</menulist-item>
-            <menulist-item alt="F">
+            <menulist-item>
                 <template v-slot>Item2</template>
                 <template v-slot:pop>
                     <menulist>

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

@@ -18,8 +18,8 @@
         <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>
+                <button @click="globalInclude">{{globali ? '' : '!'}}global</button>
+                <button @click="newInclude">{{newi ? '' : '!'}}new</button>
             </layout>
             <monaco v-if="files[file] !== undefined" 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>

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

@@ -6,7 +6,7 @@
     <label>Qs: {{qs}}</label>
     <label>rootMountData: {{rootMountData}}</label>
     <button @click="click">Hi</button>
-    <button @click="sendToRootPanel({'a':1})" style="height: 30px;">sendToRootPanel({'a':1})</button>
+    <button @click="sendToRootPanel({'a':1})">sendToRootPanel({'a':1})</button>
     <button @click="clearQss">clearQs()</button>
     <button @click="jump">Jump</button>
     <layout>

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

@@ -49,6 +49,7 @@ class default_1 extends clickgo.form.AbstractForm {
         this.v = 0;
         this.v2 = 20;
         this.v3 = 60;
+        this.v4 = ['default'];
     }
     onMounted() {
         clickgo.tool.sleep(500).then(() => __awaiter(this, void 0, void 0, function* () {

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

@@ -1,8 +1,9 @@
 <form title="Progress" width="500" height="400" min-width="300" min-height="400" padding="10">
     <layout gutter="10" direction="v" style="flex: 1; width: 0;">
-        <progress v-model="v"></progress>
-        <progress v-model="v2"></progress>
-        <progress v-model="v3" style="height: 10px;"></progress>
+        <progress v-model="v" :type="v4[0]"></progress>
+        <progress v-model="v2" :type="v4[0]"></progress>
+        <progress v-model="v3" style="height: 10px;" :type="v4[0]"></progress>
         <button @click="v3 = v3 === 20 ? 60 : 20">Set to {{v3 === 20 ? '60' : '20'}}</button>
+        <select v-model="v4" :data="['default', 'primary', 'info', 'warning', 'danger']"></select>
     </layout>
 </form>

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

@@ -9,7 +9,7 @@
             <radio v-model="value" :disabled="disabled" value="radio3" style="flex: 1; width: 0;">radio3</radio>
             <radio v-model="value" :disabled="disabled" value="radio4" @change="onChange" style="flex: 1; width: 0;">radio4 (r2n4)</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>
+        <button @click="value = 'radio2'">Set value to "radio2"</button>
+        <button @click="disabled = !disabled">{{disabled ? 'Remove' : 'Set'}} disabled</button>
     </layout>
 </form>

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

@@ -4,12 +4,12 @@
             <layout gutter="10" direction="v" style="flex: 1;">
                 <label>Offset: {{so1}}</label>
                 <layout gutter="10">
-                    <button @click="sh1 = (sh1 === 1000 ? 2000 : 1000)" style="height: 30px; flex: 1;">Set length {{sh1 === 1000 ? '2000' : '1000'}}</button>
-                    <button @click="c1 = (c1 === 100 ? 200 : 100)" style="height: 30px; flex: 1;">Set client {{c1 === 100 ? '200' : '100'}}</button>
+                    <button @click="sh1 = (sh1 === 1000 ? 2000 : 1000)" style="flex: 1;">Set length {{sh1 === 1000 ? '2000' : '1000'}}</button>
+                    <button @click="c1 = (c1 === 100 ? 200 : 100)" style="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="sh1 = 1000;c1 = 2000" style="height: 30px; flex: 1;">Set client > length</button>
+                    <button @click="disabled = !disabled" style="flex: 1;">{{disabled ? 'Remove' : 'Set'}} disabled</button>
+                    <button @click="sh1 = 1000;c1 = 2000" style="flex: 1;">Set client > length</button>
                 </layout>
             </layout>
             <scroll :length="sh1" :client="c1" v-model:offset="so1" :disabled="disabled" style="width: 20px;"></scroll>
@@ -31,8 +31,8 @@
                 <label>On the left is the flow control.</label>
                 <label>isShow: {{isShow}}</label>
             </layout>
-            <button @click="float = !float" style="height: 30px;">{{float ? 'Remove' : 'Set'}} float</button>
-            <button @click="count += 10" style="height: 30px;">Add 10 lines</button>
+            <button @click="float = !float">{{float ? 'Remove' : 'Set'}} float</button>
+            <button @click="count += 10">Add 10 lines</button>
         </layout>
     </layout>
 </form>

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

@@ -127,6 +127,7 @@ class default_1 extends clickgo.form.AbstractForm {
             '3': []
         };
         this.noValue = [];
+        this.reward = ['z'];
         this.disabledList = [];
         this.unavailableList = [];
         this.padding = ['m'];

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

@@ -1,4 +1,4 @@
-<form title="Select" width="400" height="650" min-width="300" min-height="400" padding="10">
+<form title="Select" width="450" height="650" min-width="300" min-height="400" padding="10">
     <layout gutter="10" direction="v" style="flex: 1; width: 0;">
         <tab v-model="ntab" :tabs="['greatselect', 'select', 'levelselect']" style="flex: 1; height: 0;">
             <!-- greatselect -->
@@ -89,6 +89,12 @@
                         <select v-model="noValue" :data="['0','1','2','3']" :virtual="virtual" :padding="padding[0]" search style="flex: 1;" />
                         <button @click="noValue = []">Clear</button>
                     </layout>
+                    <!-- rearward -->
+                    <label>Rearward: {{reward}}</label>
+                    <layout gutter="10">
+                        <select v-model="reward" :data="['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'z']" :virtual="virtual" :padding="padding[0]" style="flex: 1;"></select>
+                        <button @click="reward[0] = 'z'">z</button>
+                    </layout>
                 </layout>
             </flow>
             <!-- levelselect -->

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

@@ -51,6 +51,7 @@ class default_1 extends clickgo.form.AbstractForm {
         this.checked3 = false;
         this.checked4 = 0;
         this.disabled = false;
+        this.size = ['m'];
     }
     onChange(e) {
         return __awaiter(this, void 0, void 0, function* () {

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

@@ -2,21 +2,24 @@
     <layout direction="v" gutter="10" style="flex: 1; width: 0;">
         <label>Checked: {{checked1}}, {{checked2}}, {{checked3}}</label>
         <layout gutter="10" align-v="center">
-            <switch v-model="checked1" :disabled="disabled"></switch>
+            <switch v-model="checked1" :disabled="disabled" :size="size[0]"></switch>
             <label style="flex: 1;">{{checked1 ? 'on' : 'off'}}</label>
-            <switch v-model="checked2" :disabled="disabled"></switch>
+            <switch v-model="checked2" :disabled="disabled" :size="size[0]"></switch>
             <label style="flex: 1;">{{checked2 ? 'true' : 'false'}}</label>
         </layout>
         <layout gutter="10" align-v="center">
-            <switch v-model="checked3" :disabled="disabled"></switch>
+            <switch v-model="checked3" :disabled="disabled" :size="size[0]"></switch>
             <label style="flex: 1;">{{checked3 ? 'ok' : 'no'}}</label>
-            <switch :disabled="disabled" @change="onChange" />
+            <switch :disabled="disabled" @change="onChange" :size="size[0]"></switch>
             <label style="flex: 1;">not</label>
         </layout>
         <layout gutter="10" align-v="center">
-            <switch v-model="checked4" :disabled="disabled" :map="{'true':0,'false':1}"></switch>
+            <switch v-model="checked4" :disabled="disabled" :map="{'true':0,'false':1}" :size="size[0]"></switch>
             <label style="flex: 1;">{{checked4}}</label>
         </layout>
-        <button @click="disabled = !disabled">{{disabled ? 'Remove' : 'Set'}} disabled</button>
+        <layout gutter="10" align-v="center">
+            <button @click="disabled = !disabled" style="flex: 1;">{{disabled ? 'Remove' : 'Set'}} disabled</button>
+            <select v-model="size" :data="['s', 'm']" style="flex: 1;"></select>
+        </layout>
     </layout>
 </form>

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

@@ -5,7 +5,7 @@
             <!-- v -->
             <layout gutter="10" style="flex: 1; height: 0;">
                 <vflow 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, '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>
+                    <button v-if="data.index > 0 && data.index % 10 === 0">test</button>
                     <block v-else>Line {{data.row}}, index: {{data.index}}<label v-if="content" class="content">ha</label>.</block>
                 </vflow>
                 <layout class="border" style="flex: 1; width: 0;">
@@ -30,14 +30,14 @@
             <!-- button list -->
             <layout gutter="10">
                 <select v-model="lineValue" :data="[100, 500, 1000, 10000]" style="flex: 1; width: 0;"></select>
-                <button @click="lineCount += parseInt(lineValue[0])" style="height: 30px;">Add lines</button>
-                <button @click="lineCount -= parseInt(lineValue[0]);if(lineCount < 0) {lineCount = 0;}" style="height: 30px;">Remove lines</button>
+                <button @click="lineCount += parseInt(lineValue[0])">Add lines</button>
+                <button @click="lineCount -= parseInt(lineValue[0]);if(lineCount < 0) {lineCount = 0;}">Remove lines</button>
             </layout>
             <layout gutter="10">
-                <button @click="gesture = !gesture" style="flex: 1; width: 0; height: 30px;">{{gesture ? '' : '!'}}gesture</button>
-                <button @click="selection = !selection" style="flex: 1; width: 0; height: 30px;">{{selection ? '' : '!'}}selection</button>
-                <button @click="style = !style" style="flex: 1; width: 0; height: 30px;">{{style ? '' : '!'}}style</button>
-                <button @click="content = !content" style="flex: 1; width: 0; height: 30px;">{{content ? '' : '!'}}content</button>
+                <button @click="gesture = !gesture" style="flex: 1; width: 0;">{{gesture ? '' : '!'}}gesture</button>
+                <button @click="selection = !selection" style="flex: 1; width: 0;">{{selection ? '' : '!'}}selection</button>
+                <button @click="style = !style" style="flex: 1; width: 0;">{{style ? '' : '!'}}style</button>
+                <button @click="content = !content" style="flex: 1; width: 0;">{{content ? '' : '!'}}content</button>
             </layout>
         </layout>
         <!-- 自适应 -->
@@ -45,23 +45,23 @@
             <layout :direction="direction ? 'h' : 'v'" style="flex: 1; height: 0;">
                 <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>
+                        <button v-if="data.index > 0 && data.index % 10 === 0" :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>
                 </vflow>
             </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; width: 0; height: 30px;">Add 10 lines</button>
-                <button @click="lineCount -= 10;if(lineCount < 0) {lineCount = 0;}" style="flex: 1; width: 0; height: 30px;">Remove 10 lines</button>
-                <button @click="direction = !direction" style="flex: 1; height: 30px;">Direction</button>
+                <button @click="lineCount += 10" style="flex: 1; width: 0;">Add 10 lines</button>
+                <button @click="lineCount -= 10;if(lineCount < 0) {lineCount = 0;}" style="flex: 1; width: 0;">Remove 10 lines</button>
+                <button @click="direction = !direction" style="flex: 1;">Direction</button>
             </layout>
         </layout>
         <!-- 内容超出 -->
         <layout v-else-if="ntab === 'beyond'" gutter="10" direction="v" style="flex: 1; width: 0; padding: 10px;">
             <layout gutter="10" align-v="center">
-                <button @click="dir5 = (dir5 === 'h' ? 'v' : 'h')" style="flex: 1; width: 0; height: 30px;">Change direction</button>
-                <button @click="line5 = (line5 === 10 ? 1 : 10)" style="flex: 1; width: 0; height: 30px;">Change data</button>
+                <button @click="dir5 = (dir5 === 'h' ? 'v' : 'h')" style="flex: 1; width: 0;">Change direction</button>
+                <button @click="line5 = (line5 === 10 ? 1 : 10)" style="flex: 1; width: 0;">Change data</button>
                 <label>Direction: {{dir5}}</label>
             </layout>
             <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">

package/dist/app/demo/form/method/dom/dom.js

@@ -80,6 +80,9 @@ class default_1 extends clickgo.form.AbstractForm {
     get isFull() {
         return clickgo.dom.is.full;
     }
+    get isDark() {
+        return clickgo.dom.is.dark;
+    }
     setGlobalCursor(type) {
         clickgo.dom.setGlobalCursor(type);
     }