clickgo 3.10.4 → 3.11.0

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.0'}"></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/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

@@ -167,6 +167,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;

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>

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());

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

@@ -1,7 +1,9 @@
-<form width="350" height="500" title="Library task" padding="10">
+<form width="350" height="600" title="Library task" padding="10">
     <layout direction="v" gutter="10" style="flex: 1;">
         <label>config:</label>
         <text v-model="config" readonly multi style="flex: 1;"></text>
+        <label>global:</label>
+        <text v-model="global" readonly multi style="flex: 1;"></text>
         <button @click="getCdn">getCdn()</button>
         <button @click="getAvailArea">getAvailArea()</button>
         <layout gutter="10">

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

@@ -1,35 +1,35 @@
 <form width="400" height="450" title="Library dom">
     <flow direction="v" style="flex: 1; padding: 10px;">
         <layout gutter="10" direction="v" style="flex: 1;">
-            <button @click="setGlobalCursor('wait')" style="height: 30px;">setGlobalCursor('wait')</button>
-            <button @click="setGlobalCursor" style="height: 30px;">setGlobalCursor()</button>
-            <button @click="hasTouchButMouse" style="height: 30px;">hasTouchButMouse()</button>
-            <button @click="getStyleCount" style="height: 30px;">getStyleCount({{taskId}}, 'form')</button>
+            <button @click="setGlobalCursor('wait')" >setGlobalCursor('wait')</button>
+            <button @click="setGlobalCursor" >setGlobalCursor()</button>
+            <button @click="hasTouchButMouse" >hasTouchButMouse()</button>
+            <button @click="getStyleCount" >getStyleCount({{taskId}}, 'form')</button>
             <layout gutter="10">
                 <button @click="watchSize" ref="watchSize" :style="{'height': (watchSizeHeight ? 30 : 50) + 'px'}" style="padding: 0 5px; flex: 1;">{{watchSizeText ? '' : '!'}}watchSize</button>
                 <button @click="watchSizeHeight = !watchSizeHeight" style="padding: 0 5px; flex: 1;">Change</button>
             </layout>
             <layout gutter="10">
-                <button style="height: 30px; flex: 1;" @click="getWatchSizeCount()">getWatchSizeCount()</button>
-                <button style="height: 30px; flex: 1;" @click="getWatchSizeCount(taskId)">getWatchSizeCount({{taskId}})</button>
+                <button style="flex: 1;" @click="getWatchSizeCount()">getWatchSizeCount()</button>
+                <button style="flex: 1;" @click="getWatchSizeCount(taskId)">getWatchSizeCount({{taskId}})</button>
             </layout>
             <layout gutter="10">
                 <layout ref="watch" align-v="center" align-h="center" style="flex: 1; background: var(--g-plain-background); border: solid 1px var(--g-plain-border-color);">{{watchInner ? 'inner' : 'Inner'}}</layout>
-                <button @click="wwatch" style="height: 30px; padding: 0 5px;">{{watchText ? '' : '!'}}watch</button>
+                <button @click="wwatch" style="padding: 0 5px;">{{watchText ? '' : '!'}}watch</button>
                 <button @click="watchInner = !watchInner" style="padding: 0 5px;">Change</button>
             </layout>
             <layout gutter="10">
-                <button style="height: 30px; flex: 1;" @click="getWatchCount()">getWatchCount()</button>
-                <button style="height: 30px; flex: 1;" @click="getWatchCount(taskId)">getWatchCount({{taskId}})</button>
+                <button style="flex: 1;" @click="getWatchCount()">getWatchCount()</button>
+                <button style="flex: 1;" @click="getWatchCount(taskId)">getWatchCount({{taskId}})</button>
             </layout>
-            <button @click="watchStyleChange = !watchStyleChange" ref="watchStyle" style="height: 30px;" :style="{'font-size': watchStyleChange ? 'inherit' : '16px'}">watchStyle(this.refs.watchStyle.$el, 'font-size', (n, v) => { ... })</button>
-            <button @click="isWatchStyle" style="height: 30px;">isWatchStyle(this.refs.watchStyle.$el)</button>
+            <button @click="watchStyleChange = !watchStyleChange" ref="watchStyle"  :style="{'font-size': watchStyleChange ? 'inherit' : '16px'}">watchStyle(this.refs.watchStyle.$el, 'font-size', (n, v) => { ... })</button>
+            <button @click="isWatchStyle" >isWatchStyle(this.refs.watchStyle.$el)</button>
             <!-- getWatchInfo -->
             <text :model-value="getWatchInfoText" readonly multi style="height: 300px;"></text>
-            <button @click="getWatchInfo" :disabled="getWatchInfoDisabled" style="height: 30px; padding: 0 10px;">getWatchInfo 20s</button>
+            <button @click="getWatchInfo" :disabled="getWatchInfoDisabled" style="padding: 0 10px;">getWatchInfo 20s</button>
             <block @mousedown="bindGesture" @touchstart="bindGesture" style="height: 50px; display: flex; justify-content: center; align-items: center; font-size: 14px; background: var(--g-plain-background); border: solid 1px var(--g-plain-border-color);">{{bindGestureText ? bindGestureText : 'bindGesture(e: Touch | Mouse, { ... })'}}</block>
             <block @wheel="bindGestureWheel" style="height: 50px; display: flex; justify-content: center; align-items: center; font-size: 14px; background: var(--g-plain-background); border: solid 1px var(--g-plain-border-color);">{{bindGestureWheelText ? bindGestureWheelText : 'bindGesture(e: Wheel, { ... })'}}</block>
-            <button @click="bindLong" ref="bindLong" @mousedown="bindLongDown" @touchstart="bindLongDown" style="height: 30px;">{{bindLongText ? 'Yeah!' : 'bindLong(e, () => { ... })'}}</button>
+            <button @click="bindLong" ref="bindLong" @mousedown="bindLongDown" @touchstart="bindLongDown" >{{bindLongText ? 'Yeah!' : 'bindLong(e, () => { ... })'}}</button>
             <block style="height: 100px; display: flex; background: var(--g-plain-background); border: solid 1px var(--g-plain-border-color);">
                 <block style="flex: 1; display: flex; justify-content: center; align-items: center;">
                     <block @mousedown="bindDragDown" @touchstart="bindDragDown" ref="bindDrag" style="width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border: solid 1px var(--g-plain-border-color);">Drag</block>
@@ -56,7 +56,7 @@
                 <label>bindMove(e, { ... })</label>
                 <block ref="move" style="background: #07c160; position: absolute;" :style="{'left': moveLeft + 'px', 'top': moveTop + 'px', 'width': moveWidth + 'px', 'height': moveHeight + 'px'}" @touchstart="moveDown" @mousedown="moveDown"></block>
             </block>
-            <button @click="fullscreen" style="height: 30px;">fullscreen()</button>
+            <button @click="fullscreen" >fullscreen()</button>
             <label>clickgo.dom.is.move: {{isMove ? 'true' : 'false'}}</label>
             <label>clickgo.dom.is.shift: {{isShift ? 'true' : 'false'}}</label>
             <label>clickgo.dom.is.ctrl: {{isCtrl ? 'true' : 'false'}}</label>