clickgo 3.16.20 → 3.16.22

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.20'}"></script>
+<script src="https://cdn.jsdelivr.net/npm/@litert/loader@3.5.8/dist/loader.min.js?path=index&npm={'clickgo':'3.16.22'}"></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/config.json

@@ -48,6 +48,8 @@
         "/form/control/button/button.css",
         "/form/control/button/button.js",
         "/form/control/button/button.xml",
+        "/form/control/calendar/calendar.js",
+        "/form/control/calendar/calendar.xml",
         "/form/control/captcha/captcha.js",
         "/form/control/captcha/captcha.xml",
         "/form/control/check/check.js",

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

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const clickgo = __importStar(require("clickgo"));
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.mv = [];
+        this.ym = '';
+        this.bottom = false;
+        this.left = false;
+        this.disabled = false;
+        this.plain = false;
+        this.start = false;
+        this.end = false;
+        this.dlist = false;
+        this.selected = '';
+    }
+    onChanged() {
+        console.log('onChanged', JSON.stringify(this.mv));
+    }
+    onSelected(e) {
+        this.selected = e.detail.value;
+    }
+}
+exports.default = default_1;

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

@@ -0,0 +1,31 @@
+<form width="600" height="750" title="Calendar">
+    <layout direction="v" gutter="10" style="padding: 10px; flex: 1;">
+        <label>modelValue: {{mv}}</label>
+        <label>yearmonth: {{ym}}</label>
+        <label>selected: {{selected}}</label>
+        <label>dlist: {{dlist ? ['20240101'] : undefined}}</label>
+        <calendar v-model="mv" v-model:yearmonth="ym" :disabled="disabled" :plain="plain" :start="start ? '20240305' : undefined" :end="end ? '20280306' : undefined" :disabledList="dlist ? ['20240101'] : undefined" @changed="onChanged" @selected="onSelected" style="flex: 1;">
+            <template v-if="bottom" v-slot="d">
+                <layout style="flex: 1;" align-h="center">{{d.year}}</layout>
+            </template>
+            <template v-if="left" v-slot:left="d">
+                <block style="text-align: center;">Year{{d.index}}</block>
+            </template>
+        </calendar>
+        <layout gutter="10">
+            <button @click="disabled = !disabled" style="flex: 1;">{{disabled ? '' : '!'}}disabled</button>
+            <button @click="plain = !plain" style="flex: 1;">{{plain ? '' : '!'}}plain</button>
+            <button @click="bottom = !bottom" style="flex: 1;">{{bottom ? '' : '!'}}bottom</button>
+        </layout>
+        <layout gutter="10">
+            <button @click="settime" style="flex: 1;">Set time</button>
+            <button @click="start = !start" style="flex: 1;">{{start ? '' : '!'}}start</button>
+            <button @click="end = !end" style="flex: 1;">{{end ? '' : '!'}}end</button>
+        </layout>
+        <layout gutter="10" align-v="center">
+            <button @click="ym = '200708'" style="flex: 1;">Set yearmonth</button>
+            <button @click="dlist = !dlist" style="flex: 1;">{{dlist ? '' : '!'}}disabledList</button>
+            <button @click="left = !left" style="flex: 1;">{{left ? '' : '!'}}left</button>
+        </layout>
+    </layout>
+</form>

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

@@ -34,9 +34,9 @@
                             <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>
@@ -45,13 +45,13 @@
                             <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>

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,9 +127,10 @@ class default_1 extends clickgo.form.AbstractForm {
             '3': []
         };
         this.noValue = [];
+        this.reward = ['z'];
         this.disabledList = [];
         this.unavailableList = [];
-        this.padding = false;
+        this.padding = ['m'];
         this.fontSize = false;
         this.background = false;
         this.disabled = false;