clickgo 3.10.0 → 3.10.2

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.0/dist/loader.min.js?path=index&npm={'clickgo':'3.10.0'}"></script>
+<script src="https://cdn.jsdelivr.net/npm/@litert/loader@3.5.0/dist/loader.min.js?path=index&npm={'clickgo':'3.10.2'}"></script>
 ```
 
 **index.js**
@@ -117,6 +117,10 @@ This library is published under [Apache-2.0](./LICENSE) license.
 [Border Radius SVG Vector](https://www.svgrepo.com/svg/446973/border-radius)  
 [Copy SVG Vector](https://www.svgrepo.com/svg/446994/copy)
 
+#### Select
+
+[Close SVG Vector](https://www.svgrepo.com/svg/446990/close)
+
 ### **LICENSE:** MIT License **AUTHOR:** developmentseed
 
 #### Map

package/dist/app/demo/config.json

@@ -157,6 +157,8 @@
         "/form/method/tool/tool.xml",
         "/form/method/zip/zip.js",
         "/form/method/zip/zip.xml",
+        "/form/solution/backpanel/backpanel.js",
+        "/form/solution/backpanel/backpanel.xml",
         "/form/main.css",
         "/form/main.js",
         "/form/main.xml",

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

@@ -48,14 +48,14 @@ class default_1 extends clickgo.form.AbstractForm {
         this.minWidth = 200;
         this.minHeight = 100;
         this.resize = true;
-        this.loading = false;
+        this.floading = false;
         this.border = 'normal';
     }
     showLoading() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.loading = true;
+            this.floading = true;
             yield clickgo.tool.sleep(1000);
-            this.loading = false;
+            this.floading = false;
         });
     }
 }

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

@@ -1,4 +1,4 @@
-<form v-model:width="width" v-model:height="height" :icon="icon" :title="title" :min="min" :max="max" :close="close" v-model:state-max="stateMax" v-model:state-min="stateMin" :min-width="minWidth" :min-height="minHeight" :resize="resize" :loading="loading" :border="border" direction="v">
+<form v-model:width="width" v-model:height="height" :icon="icon" :title="title" :min="min" :max="max" :close="close" v-model:state-max="stateMax" v-model:state-min="stateMin" :min-width="minWidth" :min-height="minHeight" :resize="resize" :loading="floading" :border="border" direction="v">
     <flow direction="v">
         <layout direction="v" gutter="10" style="padding: 10px;">
             <label>focus: {{formFocus}}, width: {{width}}, height: {{height}}, state-max: {{stateMax}}, state-min: {{stateMin}}.</label>

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

@@ -135,17 +135,17 @@ class default_1 extends clickgo.form.AbstractForm {
             this.list.splice(-1, 1);
         });
     }
-    drop(data) {
+    drop(e) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield clickgo.form.dialog(JSON.stringify(data));
+            yield clickgo.form.dialog(JSON.stringify(e.detail));
         });
     }
-    onSelect(area) {
-        this.selectionArea = area;
+    onSelect(e) {
+        this.selectionArea = e.detail.area;
     }
-    onOpen(v) {
+    onOpen(e) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield clickgo.form.dialog('onOpen: ' + v.toString());
+            yield clickgo.form.dialog('onOpen: ' + e.detail.value.toString());
         });
     }
     scrollChange() {

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

@@ -119,6 +119,9 @@ class default_1 extends clickgo.form.AbstractForm {
     }
     get listData() {
         const data = ['Item1', {
+                'label': 'Tip',
+                'color': 'tip'
+            }, {
                 'label': 'Title1',
                 'children': [
                     'Sub1',

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

@@ -37,15 +37,16 @@ class default_1 extends clickgo.form.AbstractForm {
     constructor() {
         super(...arguments);
         this.layer = false;
+        this.qs = {};
         this.name = '';
         this.isShow = true;
-        this.loading = false;
         this.logo = '';
+        this.hash = false;
     }
-    onSelect(e, o, v) {
+    onSelect(e) {
         return __awaiter(this, void 0, void 0, function* () {
             e.preventDefault();
-            yield clickgo.form.dialog('Not nav, o: ' + o + ', v: ' + v);
+            yield clickgo.form.dialog('Not nav, selected: ' + e.detail.selected + ', name: ' + e.detail.name);
         });
     }
     onMounted() {

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

@@ -1,5 +1,5 @@
-<form width="600" height="500" title="Nav" :loading="loading">
-    <nav v-model="name" v-model:show="isShow" :logo="logo" @layer="layer = $event" style="flex: 1; width: 0;">
+<form width="600" height="500" title="Nav">
+    <nav v-model="name" default="Action1" v-model:show="isShow" :logo="logo" @layer="layer = $event" @qs="qs = $event" :hash="hash" style="flex: 1; width: 0;">
         <nav-item label="Title1">
             <nav-title>group1</nav-title>
             <nav-item label="Sub1">
@@ -39,9 +39,10 @@
         <nav-item label="Root2"></nav-item>
         <nav-item label="Root3" name="root?id=1"></nav-item>
         <nav-item label="Root4" name="root?id=2"></nav-item>
+        <nav-item label="Root5" name="root"></nav-item>
         <nav-item label="Event" @select="onSelect"></nav-item>
-        <nav-item label="Root3" icon="/package/res/icon.svg"></nav-item>
-        <nav-item label="Root4" icon="/package/res/marker.svg"></nav-item>
+        <nav-item label="Root6" name="root6" icon="/package/res/icon.svg"></nav-item>
+        <nav-item label="Root7" icon="/package/res/marker.svg"></nav-item>
         <template v-slot:header>
             <label style="flex: 1; padding-left: 10px;">Test</label>
             <menu>
@@ -78,10 +79,17 @@
                 <label>Now select: {{name}}</label>
                 <label>Show: {{isShow ? 'true' : 'false'}}</label>
                 <label>Layer: {{layer ? 'true' : 'false'}}</label>
+                <label>Qs: {{qs}}</label>
+                <label>formHash: {{formHash}}</label>
                 <button v-if="layer" @click="isShow = true">Open</button>
                 <button @click="name = 'Action11'">Select "Action11"</button>
                 <button @click="name = 'hasname'">Select "hasname"</button>
+                <button @click="name = 'root6?id=8'">Select "root6?id=8"</button>
                 <button @click="logo = logo ? '' : '/clickgo/icon.png'">{{logo ? 'Remove' : 'Set'}} logo</button>
+                <layout gutter="10">
+                    <button @click="hash = !hash" style="flex: 1;">{{hash ? '' : '!'}}hash</button>
+                    <button v-if="hash" @click="formHashBack" style="flex: 1;">hashBack</button>
+                </layout>
             </layout>
         </template>
     </nav>

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

@@ -41,8 +41,9 @@ class default_1 extends clickgo.form.AbstractForm {
     constructor() {
         super(...arguments);
         this.selected = ['none'];
+        this.panelv = '';
         this.parentData = 'yeah!';
-        this.loading = false;
+        this.map = null;
     }
     go() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -58,22 +59,41 @@ class default_1 extends clickgo.form.AbstractForm {
             'type': 'send'
         });
     }
+    changeMap() {
+        this.map = this.map ? null : {
+            'test1': test1_1.default,
+            'test2': './test2'
+        };
+    }
     onMounted() {
         this.watch('selected', () => __awaiter(this, void 0, void 0, function* () {
             switch (this.selected[0]) {
                 case 'none': {
+                    if (this.map) {
+                        this.panelv = '';
+                    }
                     break;
                 }
                 case './test1': {
-                    this.loading = true;
-                    yield this.refs.panel.go(test1_1.default);
-                    this.loading = false;
+                    if (this.map) {
+                        this.panelv = 'test1';
+                    }
+                    else {
+                        this.loading = true;
+                        yield this.refs.panel.go(test1_1.default);
+                        this.loading = false;
+                    }
                     break;
                 }
                 case './test2': {
-                    this.loading = true;
-                    yield this.refs.panel.go('./test2');
-                    this.loading = false;
+                    if (this.map) {
+                        this.panelv = 'test2';
+                    }
+                    else {
+                        this.loading = true;
+                        yield this.refs.panel.go('./test2');
+                        this.loading = false;
+                    }
                     break;
                 }
             }

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

@@ -1,11 +1,12 @@
-<form width="600" height="500" title="Panel" :loading="loading">
+<form width="600" height="500" title="Panel">
     <layout direction="v" gutter="10" style="padding: 10px; flex: 1;">
         <label>Form ID: {{formId}}</label>
         <select v-model="selected" :data="['none', './test1', './test2']"></select>
         <layout gutter="10">
-            <button v-if="selected[0] !== './test1'" style="height: 30px; flex: 1;" @click="go">Go test1 with {'type': 'show'}</button>
-            <button style="height: 30px; flex: 1;" @click="ssend">send {'type': 'send'}</button>
+            <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>
+            <button style="flex: 1;" @click="changeMap">{{map ? '' : '!'}}map</button>
         </layout>
-        <panel ref="panel" style="flex: 1;"></panel>
+        <panel ref="panel" v-model="panelv" :map="map" @go="loading=true" @went="loading=false" style="flex: 1;"></panel>
     </layout>
 </form>

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

@@ -57,6 +57,12 @@ class default_1 extends clickgo.form.AbstractPanel {
             yield clickgo.form.dialog('test1 got data.');
         });
     }
+    onQsChange() {
+        clickgo.form.notify({
+            'title': 'Test1 Panel',
+            'content': 'onQsChange: ' + Object.keys(this.qs).length.toString()
+        });
+    }
     click() {
         return __awaiter(this, void 0, void 0, function* () {
             yield clickgo.form.dialog('Hello panel!');

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

@@ -3,6 +3,7 @@
     <label>onShow count: {{scount}}</label>
     <label>Data: {{data}}</label>
     <label>Parent data: {{rootForm.parentData}}</label>
+    <label>Qs: {{qs}}</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

@@ -68,7 +68,10 @@ class default_1 extends clickgo.form.AbstractForm {
         ];
         this.select = [];
         this.slist2 = [
-            'haha1', 'haha2', 'haha3', 'haha4', {
+            'haha1', 'haha2', 'haha3', {
+                'label': 'tip',
+                'color': 'tip'
+            }, 'haha4', {
                 'value': 'ha5',
                 'label': 'The value is ha5'
             }, {
@@ -93,13 +96,14 @@ class default_1 extends clickgo.form.AbstractForm {
             }
         ];
         this.addRemoveList = [];
-        this.select2 = ['haha2'];
+        this.select2 = ['haha21111'];
         this.aemodel = [];
         this.label2 = [];
         this.asyncModel = ['1'];
         this.asyncData = [];
-        this.select3 = [];
-        this.label3 = [];
+        this.select3 = '';
+        this.label3 = '';
+        this.level3 = [];
         this.s3other = false;
         this.slist3r = ['a', 'b', 'c', 'haha3'];
         this.padding = false;
@@ -146,8 +150,10 @@ class default_1 extends clickgo.form.AbstractForm {
         });
     }
     onLoaded() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield clickgo.form.dialog('done');
+        clickgo.form.notify({
+            'type': 'info',
+            'title': 'Levelselect @loaded',
+            'content': 'Done'
         });
     }
     onRemote(value, resolve) {

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

@@ -80,11 +80,12 @@
                 <layout gutter="10" direction="v" style="padding: 10px;">
                     <label>Now select value is {{select3}}</label>
                     <label>Label: {{label3}}</label>
-                    <levelselect v-model="select3" @label="label3 = $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>
+                    <label>Level: {{level3}}</label>
+                    <levelselect 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>
                     <button @click="async = !async">{{async ? '' : '!'}}async</button>
-                    <button @click="select3 = ['title', 'sub2']">Set: ['title', 'sub2']</button>
-                    <button @click="select3 = ['haha2', '60']">Set: ['haha2', '60']</button>
-                    <button @click="select3.length = 0">Clear</button>
+                    <button @click="select3 = 'title'">Set: 'title'</button>
+                    <button @click="select3 = 'haha2'">Set: 'haha2'</button>
+                    <button @click="select3 = ''">Clear</button>
                     <button @click="s3other = !s3other">Set {{s3other ? 'this' : 'other'}} data</button>
                 </layout>
             </flow>
@@ -92,7 +93,7 @@
         <layout gutter="10">
             <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 @click="editable = !editable" style="flex: 1;">{{editable ? '' : '!'}}editable</button>
+            <button v-else-if="ntab === 'select'" @click="editable = !editable" style="flex: 1;">{{editable ? '' : '!'}}editable</button>
         </layout>
         <layout gutter="10">
             <button @click="fontSize = !fontSize" style="flex: 1;">Change font size</button>
@@ -100,7 +101,7 @@
         </layout>
         <layout gutter="10">
             <button @click="background = !background" style="flex: 1;">Change bg &amp; color</button>
-            <button @click="multi = !multi" style="flex: 1;">{{multi ? '' : '!'}}multi</button>
+            <button v-if="ntab !== 'levelselect'" @click="multi = !multi" style="flex: 1;">{{multi ? '' : '!'}}multi</button>
         </layout>
     </layout>
 </form>

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

@@ -1,43 +1,45 @@
-<form width="400" height="500" title="Table">
-    <layout direction="v" gutter="10" style="padding: 10px; flex: 1; width: 0;">
-        <label>Value: {{val}}</label>
-        <table :data="data" :style="{'flex': adaptation ? undefined : '1'}" v-model="val" :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" :split="split" @gesture="onGesture" :scroll="scroll" :sizes="sizes" :sort="sort" @select="onSelect" @sort="onSort">
-            <template v-slot="d">
-                <table-item v-if="index" label="index" width="80" sort="false">{{d.index}}</table-item>
-                <table-item label="name">{{d.row.name ?? 'name'}}</table-item>
-                <table-item label="size" width="50" align-v="center" align-h="center">{{d.row.type ?? '0'}}</table-item>
-                <table-item label="col" width="100" direction="v" gutter="5">
-                    <label>line1</label>
-                    <button>line2</button>
-                </table-item>
+<form width="400" height="500" title="Table" padding="10">
+    <flow direction="v" style="flex: 1; width: 0;">
+        <layout direction="v" gutter="10" style="flex: 1;">
+            <label>Value: {{val}}</label>
+            <table :data="data" :style="{'flex': adaptation ? undefined : '1'}" v-model="val" :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" :split="split" @gesture="onGesture" :scroll="scroll" :sizes="sizes" :sort="sort" @select="onSelect" @sort="onSort">
+                <template v-slot="d">
+                    <table-item v-if="index" label="index" width="80" sort="false">{{d.index}}</table-item>
+                    <table-item label="name">{{d.row.name ?? 'name'}}</table-item>
+                    <table-item label="size" width="50" align-v="center" align-h="center">{{d.row.type ?? '0'}}</table-item>
+                    <table-item label="col" width="100" direction="v" gutter="5">
+                        <label>line1</label>
+                        <button>line2</button>
+                    </table-item>
+                </template>
+                <template v-slot:pop>
+                    <menulist>
+                        <menulist-item alt="S" @click="showIndex">Show select</menulist-item>
+                    </menulist>
+                </template>
+            </table>
+            <template v-if="loadFirst">
+                <layout gutter="10">
+                    <button style="flex: 1;" @click="data.splice(-2, 0, {'type': 0, 'name': 'Card' + data.length, 'disabled': false});refreshSort()">Add</button>
+                    <button style="flex: 1;" @click="data.splice(-3, 1);refreshSort()">Remove</button>
+                    <button style="flex: 1;" @click="scrollChange">Scroll {{scroll}}</button>
+                    <button style="flex: 1;" @click="adaptation = !adaptation">{{adaptation ? '' : '!'}}adaptation</button>
+                </layout>
+                <layout gutter="10">
+                    <button style="flex: 1;" @click="disabled = !disabled">{{disabled ? '' : '!'}}disabled</button>
+                    <button style="flex: 1;" @click="multi = !multi">{{multi ? '' : '!'}}multi</button>
+                    <button style="flex: 1;" @click="ctrl = !ctrl">{{ctrl ? '' : '!'}}ctrl</button>
+                    <button style="flex: 1;" @click="must = !must">{{must ? '' : '!'}}must</button>
+                    <button style="flex: 1;" @click="index = !index">{{index ? '' : '!'}}index</button>
+                </layout>
+                <layout gutter="10">
+                    <button style="flex: 1;" @click="sortChange">sort {{sort ? 'true' : (sort === false ? 'false' : 'undefined')}}</button>
+                    <button style="flex: 1;" @click="selection = !selection">{{selection ? '' : '!'}}selection</button>
+                    <button style="flex: 1;" @click="gesture = !gesture">{{gesture ? '' : '!'}}gesture</button>
+                    <button style="flex: 1;" @click="split = !split">{{split ? '' : '!'}}split</button>
+                </layout>
             </template>
-            <template v-slot:pop>
-                <menulist>
-                    <menulist-item alt="S" @click="showIndex">Show select</menulist-item>
-                </menulist>
-            </template>
-        </table>
-        <template v-if="loadFirst">
-            <layout gutter="10">
-                <button style="flex: 1;" @click="data.splice(-2, 0, {'type': 0, 'name': 'Card' + data.length, 'disabled': false});refreshSort()">Add</button>
-                <button style="flex: 1;" @click="data.splice(-3, 1);refreshSort()">Remove</button>
-                <button style="flex: 1;" @click="scrollChange">Scroll {{scroll}}</button>
-                <button style="flex: 1;" @click="adaptation = !adaptation">{{adaptation ? '' : '!'}}adaptation</button>
-            </layout>
-            <layout gutter="10">
-                <button style="flex: 1;" @click="disabled = !disabled">{{disabled ? '' : '!'}}disabled</button>
-                <button style="flex: 1;" @click="multi = !multi">{{multi ? '' : '!'}}multi</button>
-                <button style="flex: 1;" @click="ctrl = !ctrl">{{ctrl ? '' : '!'}}ctrl</button>
-                <button style="flex: 1;" @click="must = !must">{{must ? '' : '!'}}must</button>
-                <button style="flex: 1;" @click="index = !index">{{index ? '' : '!'}}index</button>
-            </layout>
-            <layout gutter="10">
-                <button style="flex: 1;" @click="sortChange">sort {{sort ? 'true' : (sort === false ? 'false' : 'undefined')}}</button>
-                <button style="flex: 1;" @click="selection = !selection">{{selection ? '' : '!'}}selection</button>
-                <button style="flex: 1;" @click="gesture = !gesture">{{gesture ? '' : '!'}}gesture</button>
-                <button style="flex: 1;" @click="split = !split">{{split ? '' : '!'}}split</button>
-            </layout>
-        </template>
-        <button v-else @click="load">Load</button>
-    </layout>
+            <button v-else @click="load">Load</button>
+        </layout>
+    </flow>
 </form>

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

@@ -90,13 +90,14 @@ const task_2 = __importDefault(require("./method/task/task"));
 const theme_1 = __importDefault(require("./method/theme/theme"));
 const tool_1 = __importDefault(require("./method/tool/tool"));
 const zip_1 = __importDefault(require("./method/zip/zip"));
+const backpanel_1 = __importDefault(require("./solution/backpanel/backpanel"));
 class default_1 extends clickgo.form.AbstractForm {
     constructor() {
         super(...arguments);
         this.ntab = '';
         this.adata = {};
     }
-    openForm(name) {
+    openForm(name, data) {
         return __awaiter(this, void 0, void 0, function* () {
             let frm;
             switch (name) {
@@ -330,8 +331,12 @@ class default_1 extends clickgo.form.AbstractForm {
                     frm = yield clickgo.form.create(tool_1.default);
                     break;
                 }
-                default: {
+                case 'mzip': {
                     frm = yield clickgo.form.create(zip_1.default);
+                    break;
+                }
+                default: {
+                    frm = yield clickgo.form.create(backpanel_1.default, data);
                 }
             }
             frm.show();

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

@@ -1,5 +1,5 @@
 <form width="400" height="550" title="ClickGo demo" icon="/package/res/icon.svg">
-    <tab v-model="ntab" :tabs="['control', 'method', 'event']" style="margin: 10px; flex: 1;">
+    <tab v-model="ntab" :tabs="['control', 'method', 'event', 'solution']" style="margin: 10px; flex: 1;">
         <flow v-if="ntab === 'control'" class="inner" direction="v">
             <layout class="buttons" gutter="10" direction="v">
                 <label>App data: {{adata}}</label>
@@ -104,7 +104,7 @@
                 <button @click="openForm('msystem')">System</button>
             </layout>
         </flow>
-        <flow v-else class="inner" direction="v">
+        <flow v-else-if="ntab === 'event'" class="inner" direction="v">
             <layout gutter="10" direction="v">
                 <button @click="openForm('escreen')">About screen</button>
                 <button @click="openForm('eform')">About form</button>
@@ -112,5 +112,11 @@
                 <button @click="openForm('eother')">About other</button>
             </layout>
         </flow>
+        <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>
+            </layout>
+        </flow>
     </tab>
 </form>

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

@@ -64,6 +64,13 @@ class default_1 extends clickgo.form.AbstractForm {
             this.dr = yield frm.showDialog();
         });
     }
+    showLoading() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.loading = true;
+            yield clickgo.tool.sleep(1000);
+            this.loading = 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

@@ -30,6 +30,7 @@
                 <label>{{formHash}}</label>
             </layout>
             <button @click="formHashBack">formHashBack()</button>
+            <button @click="showLoading">Show loading</button>
             <layout gutter="10" align-v="center">
                 <label>Form Hash:</label>
                 <text v-model="hash" style="flex: 1; width: 0;"></text>

package/dist/app/demo/form/solution/backpanel/backpanel.js

@@ -0,0 +1,69 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clickgo = __importStar(require("clickgo"));
+const test1_1 = __importDefault(require("../../control/panel/test1"));
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.fh = '';
+        this.name = '';
+        this.map = {
+            'test1': test1_1.default,
+            'test2': '../../control/panel/test2'
+        };
+    }
+    onFormHashChange(taskId, formId, value) {
+        if (formId !== this.formId) {
+            return;
+        }
+        this.fh = value;
+    }
+    onSelect(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            e.preventDefault();
+            yield clickgo.form.dialog('Show form');
+        });
+    }
+    onMounted(data) {
+        if (!data.hash) {
+            return;
+        }
+        this.formHash = data.hash;
+    }
+}
+exports.default = default_1;

package/dist/app/demo/form/solution/backpanel/backpanel.xml

@@ -0,0 +1,29 @@
+<form width="800" height="500" title="Backend Panel" padding="10">
+    <layout direction="v" gutter="10" style="flex: 1;">
+        <layout gutter="10" align-v="center">
+            <label>formHash:</label>
+            <text v-model="fh" style="flex: 1;" />
+            <button @click="formHash = fh">Change</button>
+        </layout>
+        <nav v-model="name" default="list" hash style="flex: 1;">
+            <nav-item label="User">
+                <nav-item label="All list" name="list"></nav-item>
+                <nav-item label="Available" name="list?avail=1"></nav-item>
+            </nav-item>
+            <nav-item label="Goods">
+                <nav-item label="Available" name="goodslist?avail=1"></nav-item>
+                <nav-item label="Unavailable" name="goodslist?avail=0"></nav-item>
+            </nav-item>
+            <nav-item label="Form" name="form" @select="onSelect"></nav-item>
+            <nav-item label="Test1" name="test1"></nav-item>
+            <nav-item label="Test1QS" name="test1?a=1&b=2"></nav-item>
+            <nav-item label="Test2" name="test2"></nav-item>
+            <template v-slot:header>
+                <label style="flex: 1; text-align: right; padding-right: var(--g-padding);">Panel</label>
+            </template>
+            <template v-slot:content>
+                <panel :map="map" style="flex: 1;" @go="loading = true" @went="loading = false"></panel>
+            </template>
+        </nav>
+    </layout>
+</form>

package/dist/clickgo.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.zip = exports.tool = exports.theme = exports.task = exports.storage = exports.native = exports.fs = exports.form = exports.dom = exports.core = exports.control = exports.vue = exports.hasFrame = exports.isImmersion = exports.getPlatform = exports.isNative = exports.getVersion = void 0;
-const version = '3.10.0';
+const version = '3.10.2';
 function getVersion() {
     return version;
 }

package/dist/clickgo.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const version = '3.10.0';
+const version = '3.10.2';
 export function getVersion(): string {
     return version;
 }