clickgo 3.10.4 → 3.11.1

package/README.md

@@ -28,7 +28,7 @@ Load the module loader first, and then load it using the module loader.
 **index.html**
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@litert/loader@3.5.1/dist/loader.min.js?path=index&npm={'clickgo':'3.10.4'}"></script>
+<script src="https://cdn.jsdelivr.net/npm/@litert/loader@3.5.1/dist/loader.min.js?path=index&npm={'clickgo':'3.11.1'}"></script>
 ```
 
 **index.js**
@@ -148,4 +148,11 @@ This library is published under [Apache-2.0](./LICENSE) license.
 #### Arteditor
 
 [Bold SVG Vector](https://www.svgrepo.com/svg/501109/bold)  
-[Italic SVG Vector](https://www.svgrepo.com/svg/501238/italic)
+[Italic SVG Vector](https://www.svgrepo.com/svg/501238/italic)
+
+### **LICENSE:** CC Attribution License **AUTHOR:** Dazzle UI
+
+#### Text
+
+[Eye Slash Alt SVG](https://www.svgrepo.com/svg/532463/eye-slash-alt)  
+[Eye Alt SVG Vector ](https://www.svgrepo.com/svg/532492/eye-alt)

package/dist/app/demo/config.json

@@ -105,6 +105,7 @@
         "/form/control/tab/tab.xml",
         "/form/control/table/table.js",
         "/form/control/table/table.xml",
+        "/form/control/tag/tag.xml",
         "/form/control/text/text.js",
         "/form/control/text/text.xml",
         "/form/control/tuieditor/tuieditor.js",

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

@@ -20,8 +20,8 @@
             <alayout-cell style="background:hsl(0,0%,80%);">
                 <label>1</label>
             </alayout-cell>
-            <alayout-cell style="background:hsl(0,20%,80%);">
-                <label>2</label>
+            <alayout-cell align-v="center" align-h="center" style="background:hsl(0,20%,80%);">
+                <label>2</label><label>1</label>
             </alayout-cell>
             <alayout-cell style="background:hsl(0,40%,80%);">
                 <label>3</label>

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

@@ -1 +1 @@
-.buttons button{flex:3;height:30px}.buttons select{flex:1;height:30px}.tbuttons{padding:5px;background-color:rgba(255,255,255,.1)}.tbuttons button{margin-right:2px}img{width:16px;height:16px}
+.buttons button{flex:3}.buttons select{flex:1}.tbuttons{padding:5px;background-color:rgba(255,255,255,.1)}.tbuttons button{margin-right:2px}img{width:16px;height:16px}

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

@@ -1,9 +1,9 @@
 .buttons {
     button {
-        flex: 3; height: 30px;
+        flex: 3;
     }
     select {
-        flex: 1; height: 30px;
+        flex: 1;
     }
 }
 .tbuttons {

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

@@ -10,7 +10,7 @@
             <check v-model="checked3" v-model:indeterminate="indeterminate3" :disabled="disabled" style="flex: 1;">check3</check>
             <check v-model:indeterminate="indeterminate4" :disabled="disabled" @change="onChange" style="flex: 1;">check4 (not)</check>
         </layout>
-        <button style="height: 30px;" @click="indeterminate1=true;indeterminate2=true;indeterminate3=true;indeterminate4=true">Set indeterminate</button>
-        <button style="height: 30px;" @click="disabled = !disabled">{{disabled ? 'Remove' : 'Set'}} disabled</button>
+        <button @click="indeterminate1=true;indeterminate2=true;indeterminate3=true;indeterminate4=true">Set indeterminate</button>
+        <button @click="disabled = !disabled">{{disabled ? 'Remove' : 'Set'}} disabled</button>
     </layout>
 </form>

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

@@ -4,22 +4,22 @@
             <form title="Title" :min="false" :max="false" :resize="false" width="auto" height="auto" direction="v">
                 <dialog @select="btn = $event" :buttons="buttons" :direction="message === 'lines' ? 'v' : 'h'">
                     <template v-if="message === 'message'">Message</template>
-                    <template v-else-if="message === 'buttons'"><button style="flex: 1; height: 30px;">Button1</button><button style="margin-left: 10px; flex: 1; height: 30px;">Button2</button></template>
+                    <template v-else-if="message === 'buttons'"><button style="flex: 1;">Button1</button><button style="margin-left: 10px; flex: 1;">Button2</button></template>
                     <template v-else-if="message === 'lines'"><block v-for="i of 5">Line {{i}}.</block></template>
                     <template v-else>longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</template>
                 </dialog>
             </form>
         </layout>
         <layout gutter="10">
-            <button style="flex: 1; height: 30px;" @click="buttons = ['A', 'B', 'C']">['A', 'B', 'C']</button>
-            <button style="flex: 1; height: 30px;" @click="buttons = ['Cancel', 'OK']">['Cancel', 'OK']</button>
-            <button style="flex: 1; height: 30px;" @click="buttons = ['OK']">['OK']</button>
+            <button style="flex: 1;" @click="buttons = ['A', 'B', 'C']">['A', 'B', 'C']</button>
+            <button style="flex: 1;" @click="buttons = ['Cancel', 'OK']">['Cancel', 'OK']</button>
+            <button style="flex: 1;" @click="buttons = ['OK']">['OK']</button>
         </layout>
         <layout gutter="10">
-            <button style="flex: 1; height: 30px;" @click="message = 'message'">Message</button>
-            <button style="flex: 1; height: 30px;" @click="message = 'long'">Long</button>
-            <button style="flex: 1; height: 30px;" @click="message = 'buttons'">Two buttons</button>
-            <button style="flex: 1; height: 30px;" @click="message = 'lines'">Multiple lines</button>
+            <button style="flex: 1;" @click="message = 'message'">Message</button>
+            <button style="flex: 1;" @click="message = 'long'">Long</button>
+            <button style="flex: 1;" @click="message = 'buttons'">Two buttons</button>
+            <button style="flex: 1;" @click="message = 'lines'">Multiple lines</button>
         </layout>
         <label>You click: {{btn}}.</label>
     </layout>

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

@@ -16,7 +16,7 @@
             <radio v-model="dir" value="true" style="flex: 1;">true</radio>
             <radio v-model="dir" value="false" style="flex: 1;">false</radio>
         </layout>
-        <button @click="select" style="height: 30px;">
+        <button @click="select">
             Select
             <file ref="file" @change="change" :accept="[accept]" :multi="multi" :dir="dir"></file>
         </button>

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

@@ -5,9 +5,9 @@
             <html :html="html[htmlIndex]" :css="rcss" style="background: var(--g-plain-background); border: solid 1px var(--g-plain-border-color); padding: 10px; flex: 1; width: 0;"></html>
         </layout>
         <layout gutter="10">
-            <button style="height: 30px; flex: 1;" @click="lcss = lcss ? '' : css">Left {{lcss ? 'remove' : 'add'}} css</button>
-            <button style="height: 30px; flex: 1;" @click="htmlIndex = htmlIndex ? 0 : 1">Toogle html</button>
-            <button style="height: 30px; flex: 1;" @click="rcss = rcss ? '' : css">Right {{rcss ? 'remove' : 'add'}} css</button>
+            <button style="flex: 1;" @click="lcss = lcss ? '' : css">Left {{lcss ? 'remove' : 'add'}} css</button>
+            <button style="flex: 1;" @click="htmlIndex = htmlIndex ? 0 : 1">Toogle html</button>
+            <button style="flex: 1;" @click="rcss = rcss ? '' : css">Right {{rcss ? 'remove' : 'add'}} css</button>
         </layout>
     </layout>
 </form>

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

@@ -5,7 +5,7 @@
             <block style="background: var(--success); flex: 1;" />
             <block style="flex: 1;" :style="{'background': bigColor ? 'var(--warning)' : 'var(--info)'}" />
         </layout>
-        <button @click="media = media.length ? [] : [300, 450]" style="height: 30px;">media: {{media}}</button>
+        <button @click="media = media.length ? [] : [300, 450]">media: {{media}}</button>
         <layout align-v="center" gutter="10">
             <label>gutter:</label>
             <select v-model="gutter" :data="[0, 10, 12, 30, 31, 50]" style="flex: 1;"></select>

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

@@ -1 +1 @@
-tab,.tip,.ctr{margin-top:10px}.ctr button{height:30px;flex:1}
+tab,.tip,.ctr{margin-top:10px}.ctr button{flex:1}

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

@@ -3,5 +3,5 @@ tab, .tip, .ctr {
 }
 
 .ctr button {
-    height: 30px; flex: 1;
+    flex: 1;
 }

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

@@ -74,12 +74,12 @@
                 <greatlist v-model="select3" :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :scroll="scroll" :data="listData3" v-slot="data" style="flex: 1; height: 0;">
                     {{data.row.value ? data.row.value : data.row}}
                 </greatlist>
-                <button v-if="listData3.length === 0" @click="listData3 = [{'value': 'A', disabled: true}, 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'];select3 = [12]" style="height: 30px;">Load data</button>
+                <button v-if="listData3.length === 0" @click="listData3 = [{'value': 'A', disabled: true}, 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'];select3 = [12]">Load data</button>
             </layout>
             <layout direction="v" gutter="10" style="flex: 1; width: 0;">
                 <label>list: {{select4}}</label>
                 <list v-model="select4" :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :scroll="scroll" :data="listData4" style="flex: 1; height: 0;"></list>
-                <button v-if="listData4.length === 0" @click="listData4 = [{'value': 'A', disabled: true}, 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'];select4 = ['M']" style="height: 30px;">Load data</button>
+                <button v-if="listData4.length === 0" @click="listData4 = [{'value': 'A', disabled: true}, 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'];select4 = ['M']">Load data</button>
             </layout>
         </layout>
     </tab>

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

@@ -5,21 +5,21 @@
         </layout>
         <map :akey="keyReal" :factory="factoryReal" :css="css" v-model:zoom="zoom" :zoomControl="zoomControl" v-model:lat="lat" v-model:lng="lng" v-model:markers="markers" v-model:lines="lines" v-model:polygons="polygons" v-model:overlays="overlays" @mapClick="click" @markerClick="mc" @markerUpdate="markerEvent" @lineInsert="lineEvent" @lineRemove="lineEvent" @lineUpdate="lineEvent" style="flex: 1; height: 0;"></map>
         <layout gutter="10">
-            <select v-model="factory" :data="['google', 'tianditu']" style="height: 30px;"></select>
-            <text v-model="key" placeholder="Key" style="flex: 1; height: 30px;" />
-            <button @click="load" style="height: 30px;">Load</button>
+            <select v-model="factory" :data="['google', 'tianditu']"></select>
+            <text v-model="key" placeholder="Key" style="flex: 1;" />
+            <button @click="load">Load</button>
         </layout>
         <layout gutter="10" align-v="center">
-            <label>zoom:</label><text v-model="zoom" style="height: 30px; flex: 1;" />
-            <button @click="zoomControl = !zoomControl" style="height: 30px;">zoomCtrl: {{zoomControl ? 'true' : 'false'}}</button>
+            <label>zoom:</label><text v-model="zoom" style="flex: 1;" />
+            <button @click="zoomControl = !zoomControl">zoomCtrl: {{zoomControl ? 'true' : 'false'}}</button>
         </layout>
         <layout gutter="10" align-v="center">
             <label>marker:</label>
-            <button @click="markerAdd" style="height: 30px;">Add</button>
-            <button @click="markerRemove" style="height: 30px;">Remove</button>
-            <button @click="markerDrag" style="height: 30px;">Change 2 drag</button>
-            <button @click="markerAddGaoqiao(false)" style="height: 30px;">Gaoqiao (GCJ02)</button>
-            <button @click="markerAddGaoqiao(true)" style="height: 30px;">WGS84</button>
+            <button @click="markerAdd">Add</button>
+            <button @click="markerRemove">Remove</button>
+            <button @click="markerDrag">Change 2 drag</button>
+            <button @click="markerAddGaoqiao(false)">Gaoqiao (GCJ02)</button>
+            <button @click="markerAddGaoqiao(true)">WGS84</button>
         </layout>
         <tab v-model="ntab" :tabs="['marker', 'line', 'polygon', 'overlay', 'log']">
             <flow direction="v" style="line-height: 1.5; flex: 1; height: 100px; padding: 5px;">

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

@@ -43,6 +43,7 @@ class default_1 extends clickgo.form.AbstractForm {
         this.selected = ['none'];
         this.panelv = '';
         this.parentData = 'yeah!';
+        this.plain = false;
         this.map = null;
     }
     go() {

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

@@ -5,8 +5,11 @@
         <layout gutter="10">
             <button v-if="selected[0] !== './test1'" style="flex: 1;" @click="go">Go test1 with {'type': 'show'}</button>
             <button style="flex: 1;" @click="ssend">send {'type': 'send'}</button>
+        </layout>
+        <layout gutter="10">
+            <button style="flex: 1;" @click="plain = !plain">{{plain ? '' : '!'}}plain</button>
             <button style="flex: 1;" @click="changeMap">{{map ? '' : '!'}}map</button>
         </layout>
-        <panel ref="panel" v-model="panelv" :map="map" @go="loading=true" @went="loading=false" style="flex: 1;"></panel>
+        <panel ref="panel" v-model="panelv" :plain="plain" :map="map" @go="loading=true" @went="loading=false" style="flex: 1;"></panel>
     </layout>
 </form>

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

@@ -38,6 +38,7 @@ class default_1 extends clickgo.form.AbstractPanel {
         super(...arguments);
         this.scount = 0;
         this.data = {};
+        this.rootMountData = 'none';
     }
     onShow(d) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -68,5 +69,8 @@ class default_1 extends clickgo.form.AbstractPanel {
             yield clickgo.form.dialog('Hello panel!');
         });
     }
+    onMounted() {
+        this.rootMountData = this.rootForm.mountData;
+    }
 }
 exports.default = default_1;

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

@@ -4,6 +4,7 @@
     <label>Data: {{data}}</label>
     <label>Parent data: {{rootForm.parentData}}</label>
     <label>Qs: {{qs}}</label>
+    <label>rootMountData: {{rootMountData}}</label>
     <button @click="click" style="height: 30px;">Hi</button>
     <layout>
         <button style="padding: 15px 30px;" area="split">

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

@@ -118,6 +118,7 @@ class default_1 extends clickgo.form.AbstractForm {
         this.icon = false;
         this.remote = false;
         this.remoteDelay = [0];
+        this.plain = false;
     }
     get sizes() {
         const rtn = {};

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

@@ -4,7 +4,7 @@
             <!-- greatselect -->
             <layout v-if="ntab === 'greatselect'" gutter="10" direction="v" style="flex: 1; width: 0; padding: 10px;">
                 <label>Now select value is {{select}}:</label>
-                <greatselect v-model="select" :data="slist" :area="area" :disabled="disabled" :multi="multi" :sizes="sizes" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}" style="line-height: 1.3;" @add="onGAdd" @remove="onGRemove">
+                <greatselect v-model="select" :data="slist" :area="area" :disabled="disabled" :multi="multi" :plain="plain" :sizes="sizes" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}" style="line-height: 1.3;" @add="onGAdd" @remove="onGRemove">
                     <layout align-v="center" gutter="5" style="flex: 1;">
                         <img :src="slist[select[0]] ? slist[select[0]].src : ''" style="width: 32px; height: 32px;"></img>
                         <block>
@@ -29,15 +29,15 @@
                     </template>
                 </greatselect>
                 <label>Custom pop:</label>
-                <greatselect pop="custom" :area="area" :disabled="disabled" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}">
+                <greatselect pop="custom" :area="area" :plain="plain" :disabled="disabled" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}">
                     <label>Pop is button.</label>
                     <template v-slot:pop>
                         <button>Nothing</button>
                     </template>
                 </greatselect>
                 <layout gutter="10">
-                    <button @click="slist.splice(-2, 0, {'type': 0, 'name': 'Card' + slist.length, 'path': 'Bob >> folder >> Card', 'src': '/package/res/r-2.svg','disabled': false})" style="flex: 1; height: 30px;">Add item</button>
-                    <button @click="slist.splice(-3, 1)" style="flex: 1; height: 30px;">Remove item</button>
+                    <button @click="slist.splice(-2, 0, {'type': 0, 'name': 'Card' + slist.length, 'path': 'Bob >> folder >> Card', 'src': '/package/res/r-2.svg','disabled': false})" style="flex: 1;">Add item</button>
+                    <button @click="slist.splice(-3, 1)" style="flex: 1;">Remove item</button>
                 </layout>
             </layout>
             <!-- select -->
@@ -45,13 +45,13 @@
                 <layout gutter="10" direction="v" style="padding: 10px;">
                     <label>Now select value is {{select2}}</label>
                     <label>Label: {{label2}}</label>
-                    <select v-model="select2" @label="label2 = $event" :data="slist2" :disabled="disabled" :editable="editable" :multi="multi" :tree="tree" :async="async" :search="search" :remote="remote" :remote-delay="remoteDelay[0]" :icon="icon" icon-default="../../../res/txt.svg" @load="onLoad" @remote="onRemote" @add="onAdd" @remove="onRemove" @added="onAdded" @removed="onRemoved" @tagclick="onTagclick" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
+                    <select v-model="select2" @label="label2 = $event" :data="slist2" :disabled="disabled" :editable="editable" :multi="multi" :plain="plain" :tree="tree" :async="async" :search="search" :remote="remote" :remote-delay="remoteDelay[0]" :icon="icon" icon-default="../../../res/txt.svg" @load="onLoad" @remote="onRemote" @add="onAdd" @remove="onRemove" @added="onAdded" @removed="onRemoved" @tagclick="onTagclick" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
                     <list :data="addRemoveList" style="height: 100px;"></list>
                     <label>Custom height:</label>
-                    <select :data="['1','2','3','4','5']" :disabled="disabled" :editable="editable" :multi="multi" :tree="tree" :async="async" :search="search" :remote="remote" :remote-delay="remoteDelay[0]" :icon="icon" icon-default="../../../res/txt.svg" style="height: 60px;" @load="onLoad" @remote="onRemote" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
+                    <select :data="['1','2','3','4','5']" :disabled="disabled" :editable="editable" :multi="multi" :plain="plain" :tree="tree" :async="async" :search="search" :remote="remote" :remote-delay="remoteDelay[0]" :icon="icon" icon-default="../../../res/txt.svg" style="height: 60px;" @load="onLoad" @remote="onRemote" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
                     <label>Always editable: {{aemodel}}</label>
                     <layout gutter="10">
-                        <select v-model="aemodel" :data="['1','2','3','4','5']" :disabled="disabled" editable :multi="multi" :tree="tree" :async="async" :search="search" :remote="remote" :remote-delay="remoteDelay[0]" :icon="icon" icon-default="../../../res/txt.svg" placeholder="Please enter" @load="onLoad" @remote="onRemote" style="flex: 1;" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
+                        <select v-model="aemodel" :data="['1','2','3','4','5']" :disabled="disabled" editable :multi="multi" :plain="plain" :tree="tree" :async="async" :search="search" :remote="remote" :remote-delay="remoteDelay[0]" :icon="icon" icon-default="../../../res/txt.svg" placeholder="Please enter" @load="onLoad" @remote="onRemote" style="flex: 1;" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></select>
                         <button @click="aemodel.length=0">clear</button>
                         <button @click="aemodel[0] = '4'">4</button>
                     </layout>
@@ -81,7 +81,7 @@
                     <label>Now select value is {{select3}}</label>
                     <label>Label: {{label3}}</label>
                     <label>Level: {{level3}}</label>
-                    <levelselect ref="lese" v-model="select3" @label="label3 = $event" @level="level3 = $event" :data="s3other ? slist3r : slist2" :disabled="disabled" :editable="editable" :multi="multi" :async="async" placeholder="Please enter" @load="onLoad" @loaded="onLoaded" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></levelselect>
+                    <levelselect ref="lese" v-model="select3" @label="label3 = $event" @level="level3 = $event" :data="s3other ? slist3r : slist2" :disabled="disabled" :plain="plain" :async="async" placeholder="Please enter" @load="onLoad" @loaded="onLoaded" :style="{'font-size': fontSize ? '16px' : undefined, 'padding': padding ? '15px' : undefined, 'background': background ? 'red' : undefined, 'color': background ? '#FFF' : undefined}"></levelselect>
                     <button @click="async = !async">{{async ? '' : '!'}}async</button>
                     <button @click="select3 = 'title'">Set: 'title'</button>
                     <button @click="select3 = 'haha2'">Set: 'haha2'</button>
@@ -92,6 +92,7 @@
             </flow>
         </tab>
         <layout gutter="10">
+            <button @click="plain = !plain" style="flex: 1;">{{plain ? '' : '!'}}plain</button>
             <button @click="disabled = !disabled" style="flex: 1;">{{disabled ? '' : '!'}}disabled</button>
             <button v-if="ntab === 'greatselect'" @click="changeArea" style="flex: 1;">Area: {{area}}</button>
             <button v-else-if="ntab === 'select'" @click="editable = !editable" style="flex: 1;">{{editable ? '' : '!'}}editable</button>

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

@@ -5,20 +5,20 @@
         <svg :layout="layout" :src="file" style="width: 64px; height: 64px;" />
     </layout>
     <layout gutter="10" style="margin-top: 10px;">
-        <button @click="color = undefined" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">Default</button>
-        <button @click="color = 'green'" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">Green</button>
-        <button @click="color = 'red'" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">Red</button>
+        <button @click="color = undefined" style="padding: 0 10px; flex: 1; width: 0;">Default</button>
+        <button @click="color = 'green'" style="padding: 0 10px; flex: 1; width: 0;">Green</button>
+        <button @click="color = 'red'" style="padding: 0 10px; flex: 1; width: 0;">Red</button>
     </layout>
     <layout gutter="10" style="margin-top: 10px;">
-        <button @click="i = 0" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">Shape 0</button>
-        <button @click="i = 1" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">1</button>
-        <button @click="i = 2" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">2</button>
-        <button @click="i = 3" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">None</button>
+        <button @click="i = 0" style="padding: 0 10px; flex: 1; width: 0;">Shape 0</button>
+        <button @click="i = 1" style="padding: 0 10px; flex: 1; width: 0;">1</button>
+        <button @click="i = 2" style="padding: 0 10px; flex: 1; width: 0;">2</button>
+        <button @click="i = 3" style="padding: 0 10px; flex: 1; width: 0;">None</button>
     </layout>
     <layout gutter="10" style="margin-top: 10px;">
-        <button @click="f = 0" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">File 0</button>
-        <button @click="f = 1" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">1</button>
-        <button @click="f = 2" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">2</button>
-        <button @click="f = 3" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">None</button>
+        <button @click="f = 0" style="padding: 0 10px; flex: 1; width: 0;">File 0</button>
+        <button @click="f = 1" style="padding: 0 10px; flex: 1; width: 0;">1</button>
+        <button @click="f = 2" style="padding: 0 10px; flex: 1; width: 0;">2</button>
+        <button @click="f = 3" style="padding: 0 10px; flex: 1; width: 0;">None</button>
     </layout>
 </form>

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

@@ -3,20 +3,20 @@
     <tab v-model="ntab" v-model:tabs="tabs" :tabPosition="tabPosition" :drag="drag" :close="cclose" @close="onClose" style="margin-top: 10px; flex: 1; height: 0;" :style="{'font-size': size, 'color': color}">
         <!-- 默认 -->
         <layout style="padding: 10px;">
-            <button v-if="ntab === 'tab2'" style="padding: 0 10px; height: 30px;">Test button</button>
+            <button v-if="ntab === 'tab2'" style="padding: 0 10px;">Test button</button>
             <label v-else>The tab's value is "{{ntab}}";</label>
         </layout>
     </tab>
     <layout gutter="10" style="margin-top: 10px;">
-        <button @click="add" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">Add</button>
-        <button @click="remove" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">Remove</button>
-        <button @click="position" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">Position</button>
-        <button @click="ntab = 'tab2'" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">Tab2</button>
+        <button @click="add" style="padding: 0 10px; flex: 1; width: 0;">Add</button>
+        <button @click="remove" style="padding: 0 10px; flex: 1; width: 0;">Remove</button>
+        <button @click="position" style="padding: 0 10px; flex: 1; width: 0;">Position</button>
+        <button @click="ntab = 'tab2'" style="padding: 0 10px; flex: 1; width: 0;">Tab2</button>
     </layout>
     <layout gutter="10" style="margin-top: 10px;">
-        <button @click="color = color ? undefined : 'red'" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">{{color ? '' : '!'}}red</button>
-        <button @click="size = size ? undefined : '18px'" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">{{size ? '' : '!'}}18px</button>
-        <button @click="drag = !drag" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">{{drag ? '' : '!'}}drag</button>
-        <button @click="cclose = !cclose" style="padding: 0 10px; flex: 1; width: 0; height: 30px;">{{cclose ? '' : '!'}}close</button>
+        <button @click="color = color ? undefined : 'red'" style="padding: 0 10px; flex: 1; width: 0;">{{color ? '' : '!'}}red</button>
+        <button @click="size = size ? undefined : '18px'" style="padding: 0 10px; flex: 1; width: 0;">{{size ? '' : '!'}}18px</button>
+        <button @click="drag = !drag" style="padding: 0 10px; flex: 1; width: 0;">{{drag ? '' : '!'}}drag</button>
+        <button @click="cclose = !cclose" style="padding: 0 10px; flex: 1; width: 0;">{{cclose ? '' : '!'}}close</button>
     </layout>
 </form>

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

@@ -0,0 +1,20 @@
+<form width="450" height="300" title="Tag" padding="10">
+    <layout direction="v" gutter="10">
+        <label>Default:</label>
+        <layout gutter="10">
+            <tag>Default</tag>
+            <tag type="primary">Primary</tag>
+            <tag type="info">Info</tag>
+            <tag type="warning">Warning</tag>
+            <tag type="danger">Danger</tag>
+        </layout>
+        <label>Plain:</label>
+        <layout gutter="10">
+            <tag plain>Default</tag>
+            <tag type="primary" plain>Primary</tag>
+            <tag type="info" plain>Info</tag>
+            <tag type="warning" plain>Warning</tag>
+            <tag type="danger" plain>Danger</tag>
+        </layout>
+    </layout>
+</form>

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

@@ -58,7 +58,10 @@ class default_1 extends clickgo.form.AbstractForm {
         this.long = false;
         this.lineHeight = 1;
         this.fontSize = 12;
+        this.prepend = false;
         this.append = false;
+        this.before = false;
+        this.after = false;
         this.border = 'solid';
         this.background = undefined;
         this.phcolor = undefined;

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

@@ -6,7 +6,10 @@
             <menulist v-if="menu">
                 <menulist-item>Custom</menulist-item>
             </menulist>
+            <template v-if="before" v-slot:before><select :data="['A','B','C']" plain></select></template>
+            <template v-if="prepend" v-slot:prepend>$</template>
             <template v-if="append" v-slot:append>KG</template>
+            <template v-if="after" v-slot:after><select :data="['D','E','F']" plain></select></template>
         </text>
         <layout gutter="10">
             <button @click="multi = !multi" style="flex: 1;">{{multi ? '' : '!'}}multi</button>
@@ -21,13 +24,16 @@
             <button @click="gesture = !gesture" style="flex: 1;">{{gesture ? '' : '!'}}gesture</button>
         </layout>
         <layout gutter="10">
+            <button @click="prepend = !prepend" style="flex: 1;">{{prepend ? '' : '!'}}prepend</button>
             <button @click="append = !append" style="flex: 1;">{{append ? '' : '!'}}append</button>
             <button @click="adaption = !adaption" style="flex: 1;">{{adaption ? '' : '!'}}adaption</button>
             <button @click="longClick" style="flex: 1;">{{long ? '' : '!'}}long</button>
         </layout>
         <layout gutter="10">
-            <button @click="lineHeight = lineHeight === 1 ? 1.5 : 1" style="flex: 1;">Set line {{lineHeight === 1 ? 1.5 : 1}}</button>
-            <button @click="fontSize = fontSize === 12 ? 16 : 12" style="flex: 1;">Set size {{fontSize === 12 ? 16 : 12}}</button>
+            <button @click="lineHeight = lineHeight === 1 ? 1.5 : 1" style="flex: 1;">line to {{lineHeight === 1 ? 1.5 : 1}}</button>
+            <button @click="fontSize = fontSize === 12 ? 16 : 12" style="flex: 1;">size to {{fontSize === 12 ? 16 : 12}}</button>
+            <button @click="before = !before" style="flex: 1;">{{before ? '' : '!'}}before</button>
+            <button @click="after = !after" style="flex: 1;">{{after ? '' : '!'}}after</button>
         </layout>
         <layout gutter="10">
             <button @click="border = 'solid'" style="flex: 2;">Set border solid</button>

package/dist/app/demo/form/event/task/task.xml

@@ -4,10 +4,10 @@
         <layout direction="v" gutter="10">
             <label>Select task id: {{tid[0]}}</label>
             <list v-model="tid" :data="tlist" style="width: 200px; height: 200px;"></list>
-            <button @click="runTask" style="height: 30px;">Run task app</button>
+            <button @click="runTask">Run task app</button>
             <layout gutter="10">
-                <button @click="run" style="flex: 1; width: 0; height: 30px;">Run self</button>
-                <button @click="end" style="flex: 1; width: 0; height: 30px;">End</button>
+                <button @click="run" style="flex: 1; width: 0;">Run self</button>
+                <button @click="end" style="flex: 1; width: 0;">End</button>
             </layout>
         </layout>
     </layout>

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

@@ -99,6 +99,7 @@ class default_1 extends clickgo.form.AbstractForm {
     }
     openForm(name, data) {
         return __awaiter(this, void 0, void 0, function* () {
+            this.loading = true;
             let frm;
             switch (name) {
                 case 'cblock': {
@@ -167,6 +168,10 @@ class default_1 extends clickgo.form.AbstractForm {
                     frm = yield clickgo.form.create(step_1.default);
                     break;
                 }
+                case 'ctag': {
+                    frm = yield clickgo.form.create('/form/control/tag/tag');
+                    break;
+                }
                 case 'cxterm': {
                     frm = yield clickgo.form.create(xterm_1.default);
                     break;
@@ -339,6 +344,7 @@ class default_1 extends clickgo.form.AbstractForm {
                     frm = yield clickgo.form.create(backpanel_1.default, data);
                 }
             }
+            this.loading = false;
             frm.show();
         });
     }

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

@@ -73,6 +73,7 @@
                 </layout>
                 <layout gutter="10">
                     <button @click="openForm('cstep')">Step</button>
+                    <button @click="openForm('ctag')">Tag</button>
                 </layout>
                 <layout gutter="10">
                     <button @click="openForm('cmonaco')">Monaco</button>
@@ -115,7 +116,7 @@
         <flow v-else class="inner" direction="v">
             <layout gutter="10" direction="v">
                 <button @click="openForm('sbackpanel')">Backend panel</button>
-                <button @click="openForm('sbackpanel', {'hash': 'test2?p=6'})">Backend panel with hash</button>
+                <button @click="openForm('sbackpanel', {'hash': 'test1?a=1&b=2'})">Backend panel with hash</button>
             </layout>
         </flow>
     </tab>

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

@@ -71,6 +71,29 @@ class default_1 extends clickgo.form.AbstractForm {
             this.loading = false;
         });
     }
+    toEnterStep() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const rtn = yield this.enterStep([
+                {
+                    'value': 'step1',
+                    'label': 'step1'
+                },
+                {
+                    'value': 'step2'
+                },
+                {
+                    'icon': '/package/res/marker.svg',
+                    'value': 'icon'
+                },
+                {
+                    'label': 'successful',
+                    'value': 'step3',
+                    'desc': 'qq'
+                }
+            ]);
+            yield clickgo.form.dialog('Result: ' + (rtn ? 'true' : 'false'));
+        });
+    }
     onMounted() {
         this.watch('test', () => __awaiter(this, void 0, void 0, function* () {
             yield clickgo.form.dialog('test changed.');

package/dist/app/demo/form/method/aform/aform.xml

@@ -1,4 +1,4 @@
-<form width="350" height="400" title="Abstract Form">
+<form width="550" height="400" title="Abstract Form">
     <flow direction="v" style="flex: 1; padding: 10px;">
         <layout gutter="10" direction="v" style="flex: 1;">
             <label>filename: {{filename}}</label>
@@ -42,6 +42,15 @@
                 <label>result: {{dr}}</label>
             </layout>
             <button @click="close">close()</button>
+            <label>enterStep: [ {{formHash}} ]</label>
+            <button @click="toEnterStep">enterStep</button>
+            <layout gutter="10">
+                <button @click="formHash = 'step1'" style="flex: 1;">fh = 'step1'</button>
+                <button @click="formHash = 'step2'" style="flex: 1;">step2</button>
+                <button @click="formHash = 'step3'" style="flex: 1;">step3</button>
+                <button @click="formHash = 'step4'" style="flex: 1;">step4</button>
+                <button @click="doneStep()" style="flex: 1;">done</button>
+            </layout>
         </layout>
     </flow>
 </form>

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

@@ -42,6 +42,9 @@ class default_1 extends clickgo.form.AbstractForm {
     get config() {
         return JSON.stringify(clickgo.core.config, null, 4).replace(/"icon": "([\s\S]+?)"/g, '"icon": "data:image/..."');
     }
+    get global() {
+        return JSON.stringify(clickgo.core.global, null, 4);
+    }
     getCdn() {
         return __awaiter(this, void 0, void 0, function* () {
             yield clickgo.form.dialog(clickgo.core.getCdn());