clickgo 3.6.7 → 3.8.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.0/dist/loader.min.js?path=index&npm={'clickgo':'3.6.7'}"></script>
+<script src="https://cdn.jsdelivr.net/npm/@litert/loader@3.5.0/dist/loader.min.js?path=index&npm={'clickgo':'3.8.0'}"></script>
 ```
 
 **index.js**
@@ -106,6 +106,10 @@ This library is published under [Apache-2.0](./LICENSE) license.
 
 [More Horizontal SVG Vector](https://www.svgrepo.com/svg/447028/more-horizontal)
 
+#### Arteditor
+
+[Plus SVG Vector](https://www.svgrepo.com/svg/447037/plus)
+
 ### **LICENSE:** MIT License **AUTHOR:** developmentseed
 
 #### Map
@@ -126,4 +130,11 @@ This library is published under [Apache-2.0](./LICENSE) license.
 #### Iconview
 
 [Folder SVG Vector](https://www.svgrepo.com/svg/474852/folder)
-[File SVG Vector](https://www.svgrepo.com/svg/474842/file)
+[File SVG Vector](https://www.svgrepo.com/svg/474842/file)
+
+### **LICENSE:** MIT License **AUTHOR:** instructure-ui
+
+#### Arteditor
+
+[Bold SVG Vector](https://www.svgrepo.com/svg/501109/bold)
+[Italic SVG Vector](https://www.svgrepo.com/svg/501238/italic)

package/dist/app/demo/config.json

@@ -18,7 +18,9 @@
         "/clickgo/control/iconview",
         "/clickgo/control/xterm",
         "/clickgo/control/echarts",
-        "/clickgo/control/map"
+        "/clickgo/control/map",
+        "/clickgo/control/tuieditor",
+        "/clickgo/control/arteditor"
     ],
     "style": "/package/global",
 
@@ -26,6 +28,10 @@
         "/form/control/alayout/alayout.js",
         "/form/control/alayout/alayout.css",
         "/form/control/alayout/alayout.xml",
+        "/form/control/arteditor/arteditor.js",
+        "/form/control/arteditor/arteditor.xml",
+        "/form/control/arteditor/img.js",
+        "/form/control/arteditor/img.xml",
         "/form/control/block/block.css",
         "/form/control/block/block.xml",
         "/form/control/box/box.js",
@@ -99,6 +105,8 @@
         "/form/control/table/table.xml",
         "/form/control/text/text.js",
         "/form/control/text/text.xml",
+        "/form/control/tuieditor/tuieditor.js",
+        "/form/control/tuieditor/tuieditor.xml",
         "/form/control/vflow/vflow.css",
         "/form/control/vflow/vflow.js",
         "/form/control/vflow/vflow.xml",
@@ -131,6 +139,8 @@
         "/form/method/fs/text.xml",
         "/form/method/native/native.js",
         "/form/method/native/native.xml",
+        "/form/method/storage/storage.js",
+        "/form/method/storage/storage.xml",
         "/form/method/system/system.js",
         "/form/method/system/system.xml",
         "/form/method/task/locale1.json",

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

@@ -0,0 +1,65 @@
+"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 img_1 = __importDefault(require("./img"));
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.readonly = false;
+        this.disabled = false;
+        this.size = ['12px'];
+        this.family = false;
+        this.value = [
+            {
+                'type': 'p',
+                'value': 'This is a paragraph. You can say whatever you want to say, I won\'t stop you. Just like a bird can fly in the sky as long as it likes.'
+            }
+        ];
+    }
+    imgselect(cb) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const frm = yield clickgo.form.create(img_1.default);
+            const path = yield frm.showDialog();
+            if (!path) {
+                return;
+            }
+            cb(path);
+        });
+    }
+}
+exports.default = default_1;

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

@@ -0,0 +1,12 @@
+<form title="Arteditor" width="500" height="450" padding="10">
+    <layout gutter="10" direction="v" style="flex: 1; width: 0;">
+        <label>Line: {{value.length}}</label>
+        <arteditor v-model="value" :readonly="readonly" :disabled="disabled" pre="https://cdn.jsdelivr.net/npm/clickgo@3.8.0/dist/app/demo/" style="flex: 1; height: 0;" @imgselect="imgselect" :style="{'font-size': size[0], 'font-family': family ? 'Consolas, \'Courier New\', monospace' : undefined}"></arteditor>
+        <layout gutter="10">
+            <button @click="disabled = !disabled" style="flex: 1; width: 0;">{{disabled ? '' : '!'}}disabled</button>
+            <button @click="readonly = !readonly" style="flex: 1; width: 0;">{{readonly ? '' : '!'}}readonly</button>
+            <button @click="family = !family" style="flex: 1; width: 0;">{{family ? '' : '!'}}Family CCM</button>
+            <select v-model="size" :data="['12px', '13px', '14px', '15px', '16px']" style="flex: 1; width: 0;"></select>
+        </layout>
+    </layout>
+</form>

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

@@ -0,0 +1,51 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clickgo = __importStar(require("clickgo"));
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.select = [];
+        this.list = [
+            {
+                'icon': 'https://cdn.jsdelivr.net/npm/clickgo@3.7.0/dist/app/demo/res/sql.svg'
+            },
+            {
+                'icon': 'https://cdn.jsdelivr.net/npm/clickgo@3.7.0/dist/app/demo/res/txt.svg'
+            },
+            {
+                'icon': 'https://cdn.jsdelivr.net/npm/clickgo@3.7.0/dist/app/demo/res/zip.svg'
+            },
+            {
+                'icon': 'https://cdn.jsdelivr.net/npm/clickgo@3.7.0/dist/app/demo/res/img.jpg'
+            }
+        ];
+    }
+    selectClick() {
+        this.dialogResult = this.list[this.select[0]].icon.slice(-11);
+        this.close();
+    }
+}
+exports.default = default_1;

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

@@ -0,0 +1,6 @@
+<form title="Select image" width="400" height="400" padding="10" min="false" max="false">
+    <layout gutter="10" direction="v" style="flex: 1; width: 0;">
+        <iconview :data="list" v-model="select" name="false" multi="false" selection="false" must size="64" style="flex: 1;"></iconview>
+        <button @click="selectClick">Select</button>
+    </layout>
+</form>

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

@@ -75,6 +75,10 @@ class default_1 extends clickgo.form.AbstractForm {
                 'name': 'pack.zip',
                 'time': 1676600099,
                 'icon': '/package/res/zip.svg'
+            },
+            {
+                'id': 7,
+                'icon': 'https://cdn.jsdelivr.net/npm/clickgo@3.7.0/dist/app/demo/res/img.jpg'
             }
         ];
         this.select = [];
@@ -84,6 +88,7 @@ class default_1 extends clickgo.form.AbstractForm {
         this.ctrl = true;
         this.selection = true;
         this.gesture = false;
+        this.name = true;
         this.selectionArea = {};
         this.scroll = 'auto';
         this.size = [100];

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

@@ -1,7 +1,7 @@
-<form title="Iconview" width="400" height="500" padding="10">
+<form title="Iconview" width="500" height="500" padding="10">
     <layout gutter="10" direction="v" style="flex: 1; width: 0;">
         <label>select: {{select}}</label>
-        <iconview :data="list" v-model="select" :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :scroll="scroll" :size="size[0] ? size[0] : undefined" style="flex: 1;" @drop="drop" @select="onSelect" @open="onOpen">
+        <iconview :data="list" v-model="select" :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :scroll="scroll" :size="size[0] ? size[0] : undefined" :name="name" style="flex: 1;" @drop="drop" @select="onSelect" @open="onOpen">
             <template v-slot:pop>
                 <menulist>
                     <menulist-item alt="S">Some options</menulist-item>
@@ -16,24 +16,25 @@
         </iconview>
         <label>Area: {{selectionArea}}</label>
         <layout gutter="10">
-            <button @click="add" style="padding: 10px; flex: 1;">Add</button>
-            <button @click="remove" style="padding: 10px; flex: 1;">Remove</button>
-            <button @click="scrollChange" style="padding: 10px; flex: 1;">Scroll {{scroll}}</button>
+            <button @click="add" style="flex: 1;">Add</button>
+            <button @click="remove" style="flex: 1;">Remove</button>
+            <button @click="scrollChange" style="flex: 1;">Scroll {{scroll}}</button>
         </layout>
         <layout class="ctr" gutter="10">
             <select v-model="size" :data="[32, 64, 100, 128, 256]" style="flex: 1;"></select>
-            <button @click="select=[1]" style="padding: 10px; flex: 1;">Select 2th</button>
-            <button v-if="multi" @click="select=[1,2]" style="padding: 10px; flex: 1;">Select two</button>
+            <button @click="select=[1]" style="flex: 1;">Select 2th</button>
+            <button v-if="multi" @click="select=[1,2]" style="flex: 1;">Select two</button>
         </layout>
         <layout class="ctr" gutter="10">
-            <button @click="disabled = !disabled" style="padding: 10px; flex: 1;">{{disabled ? '' : '!'}}disabled</button>
-            <button @click="multi = !multi" style="padding: 10px; flex: 1;">{{multi ? '' : '!'}}multi</button>
-            <button @click="ctrl = !ctrl" style="padding: 10px; flex: 1;">{{ctrl ? '' : '!'}}ctrl</button>
+            <button @click="disabled = !disabled" style="flex: 1;">{{disabled ? '' : '!'}}disabled</button>
+            <button @click="multi = !multi" style="flex: 1;">{{multi ? '' : '!'}}multi</button>
+            <button @click="ctrl = !ctrl" style="flex: 1;">{{ctrl ? '' : '!'}}ctrl</button>
         </layout>
         <layout class="ctr" gutter="10">
-            <button @click="must = !must" style="padding: 10px; flex: 1;">{{must ? '' : '!'}}must</button>
-            <button @click="selection = !selection" style="padding: 10px; flex: 1;">{{selection ? '' : '!'}}selection</button>
-            <button @click="gesture = !gesture" style="padding: 10px; flex: 1;">{{gesture ? '' : '!'}}gesture</button>
+            <button @click="must = !must" style="flex: 1;">{{must ? '' : '!'}}must</button>
+            <button @click="selection = !selection" style="flex: 1;">{{selection ? '' : '!'}}selection</button>
+            <button @click="gesture = !gesture" style="flex: 1;">{{gesture ? '' : '!'}}gesture</button>
+            <button @click="name = !name" style="flex: 1;">{{name ? '' : '!'}}name</button>
         </layout>
     </layout>
 </form>

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

@@ -49,6 +49,8 @@ class default_1 extends clickgo.form.AbstractForm {
         this.multi = false;
         this.disabled = false;
         this.readonly = false;
+        this.adaption = false;
+        this.scroll = true;
         this.password = false;
         this.wrap = true;
         this.menu = false;

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

@@ -1,8 +1,8 @@
-<form width="350" height="350" title="Textbox">
+<form width="350" height="550" title="Textbox">
     <layout direction="v" gutter="10" style="padding: 10px; flex: 1; width: 0;">
         <label>Text Length: {{value.length}}, Selection Start: {{selectionStart}}, Selection End: {{selectionEnd}}, Focus: {{isFocus}}</label>
         <label>Scroll Left: {{scrollLeft}}, Scroll Top: {{scrollTop}}, Scroll Height: {{scrollHeight}}, Scroll Width: {{scrollWidth}}, Client Height: {{clientHeight}}, Client Width: {{clientWidth}}</label>
-        <text v-model="value" placeholder="placeholder" :multi="multi" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :disabled="disabled" :readonly="readonly" :password="password" :wrap="wrap" v-model:scroll-left="scrollLeft" v-model:scroll-top="scrollTop" v-model:selection-start="selectionStart" v-model:selection-end="selectionEnd" @clientheight="clientHeight = $event" @clientwidth="clientWidth = $event" @scrollheight="scrollHeight = $event" @scrollwidth="scrollWidth = $event" @focus="isFocus = true" @blur="isFocus = false" :style="{'flex': multi ? '1' : undefined, 'line-height': lineHeight, 'font-size': fontSize + 'px', 'background': background, 'color': background ? '#FFF' : undefined, 'height': multi ? undefined : '30px', 'border-width': textBorder}" :class="[phcolor && ('ph-' + phcolor)]">
+        <text v-model="value" placeholder="placeholder" :multi="multi" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :disabled="disabled" :readonly="readonly" :adaption="adaption" :scroll="scroll" :password="password" :wrap="wrap" v-model:scroll-left="scrollLeft" v-model:scroll-top="scrollTop" v-model:selection-start="selectionStart" v-model:selection-end="selectionEnd" @clientheight="clientHeight = $event" @clientwidth="clientWidth = $event" @scrollheight="scrollHeight = $event" @scrollwidth="scrollWidth = $event" @focus="isFocus = true" @blur="isFocus = false" :style="{'flex': multi && (!adaption || scroll || !wrap) ? '1' : undefined, 'line-height': lineHeight, 'font-size': fontSize + 'px', 'background': background, 'color': background ? '#FFF' : undefined, 'height': multi && (!adaption || scroll || !wrap) ? '0' : undefined, 'border-width': textBorder}" :class="[phcolor && ('ph-' + phcolor)]">
             <menulist v-if="menu">
                 <menulist-item>Custom</menulist-item>
             </menulist>
@@ -12,7 +12,7 @@
             <button @click="multi = !multi" style="flex: 1;">{{multi ? '' : '!'}}multi</button>
             <button @click="disabled = !disabled" style="flex: 1;">{{disabled ? '' : '!'}}disabled</button>
             <button @click="readonly = !readonly" style="flex: 1;">{{readonly ? '' : '!'}}readonly</button>
-            <button @click="longClick" style="flex: 1;">{{long ? '' : '!'}}long</button>
+            <button @click="scroll = !scroll" style="flex: 1;">{{scroll ? '' : '!'}}scroll</button>
         </layout>
         <layout gutter="10">
             <button @click="password = !password" style="flex: 1;">{{password ? '' : '!'}}password</button>
@@ -20,10 +20,14 @@
             <button @click="menu = !menu" style="flex: 1;">{{menu ? '' : '!'}}menu</button>
             <button @click="gesture = !gesture" style="flex: 1;">{{gesture ? '' : '!'}}gesture</button>
         </layout>
+        <layout gutter="10">
+            <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="append = !append" style="flex: 1;">{{append ? '' : '!'}}append</button>
         </layout>
         <layout gutter="10">
             <button @click="border = 'solid'" style="flex: 2;">Set border solid</button>

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

@@ -0,0 +1,39 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clickgo = __importStar(require("clickgo"));
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.theme = ['light'];
+        this.themes = ['light', 'dark'];
+        this.disabled = false;
+        this.size = ['12px'];
+        this.family = false;
+        this.visual = false;
+        this.text = 'a**b**c';
+    }
+}
+exports.default = default_1;

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

@@ -0,0 +1,13 @@
+<form title="Tuieditor" width="500" height="450" padding="10">
+    <layout gutter="10" direction="v" style="flex: 1; width: 0;">
+        <label>Length: {{text.length}}</label>
+        <tuieditor v-model="text" :disabled="disabled" :theme="theme[0]" :visual="visual" style="flex: 1; height: 0;" :style="{'font-size': size[0], 'font-family': family ? 'Consolas, \'Courier New\', monospace' : undefined}"></tuieditor>
+        <layout gutter="10">
+            <button @click="disabled = !disabled" style="flex: 1; width: 0;">{{disabled ? '' : '!'}}disabled</button>
+            <button @click="family = !family" style="flex: 1; width: 0;">{{family ? '' : '!'}}Family CCM</button>
+            <select v-model="size" :data="['12px', '13px', '14px', '15px', '16px']" style="flex: 1; width: 0;"></select>
+            <select v-model="theme" :data="themes" style="flex: 1; width: 0;"></select>
+            <button @click="visual = !visual" style="flex: 1; width: 0;">{{visual ? '' : '!'}}visual</button>
+        </layout>
+    </layout>
+</form>

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

@@ -159,5 +159,12 @@ class default_1 extends clickgo.form.AbstractForm {
         this.flist[formId].title = value;
         this.pushConsole('formShowInSystemTaskChange', `taskId: ${taskId}, formId: ${formId}, value: ${value}`);
     }
+    onFormHashChange(taskId, formId, value) {
+        if (!this.flist[formId]) {
+            return;
+        }
+        this.pushConsole('formHashChange', `taskId: ${taskId}, formId: ${formId}, value: ${value}`);
+        return;
+    }
 }
 exports.default = default_1;

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

@@ -1,16 +1,16 @@
-<form width="450" height="550" title="About form" padding="10" direction="v">
-    <label>The form list:</label>
-    <layout align-h="center" align-v="center" style="margin-top: 10px; flex: 1; height: 0;">
-        <layout gutter="10" direction="v">
-            <layout align-v="center" v-for="(form, fid) of flist" gutter="5" @click="changeFocus(fid)" class="item" :class="{'flash': form.flash, 'focus': form.focus}">
-                <img v-if="form.icon" :src="form.icon" style="width: 16px; height: 16px;" /><label>{{form.title}}{{form.max ? ' (max)' : ''}}{{form.min ? ' (min)' : ''}}</label>
-            </layout>
-        </layout>
-    </layout>
-    <layout gutter="10" style="margin-top: 10px; height: 80px;">
-        <list :data="['formCreated', 'formRemoved', 'formTitleChanged', 'formIconChanged', 'formStateMinChanged', 'formStateMaxChanged', 'formShowChanged', 'formFocused', 'formBlurred', 'formFlash', 'formShowInSystemTaskChange']" style="width: 150px;"></list>
-        <vflow v-slot="data" :data="list" direction="v" style="color: #FFF; background: hsl(0, 0%, 20%); line-height: 1.5; flex: 1; width: 0; padding: 10px;" same>
-            <label>[{{data.row.time}}] {{data.row.name}}, {{data.row.text}}.</label>
-        </vflow>
-    </layout>
+<form width="550" height="550" title="About form" padding="10" direction="v">
+    <label>The form list:</label>
+    <layout align-h="center" align-v="center" style="margin-top: 10px; flex: 1; height: 0;">
+        <layout gutter="10" direction="v">
+            <layout align-v="center" v-for="(form, fid) of flist" gutter="5" @click="changeFocus(fid)" class="item" :class="{'flash': form.flash, 'focus': form.focus}">
+                <img v-if="form.icon" :src="form.icon" style="width: 16px; height: 16px;" /><label>{{form.title}}{{form.max ? ' (max)' : ''}}{{form.min ? ' (min)' : ''}}</label>
+            </layout>
+        </layout>
+    </layout>
+    <layout gutter="10" style="margin-top: 10px; height: 120px;">
+        <list :data="['formCreated', 'formRemoved', 'formTitleChanged', 'formIconChanged', 'formStateMinChanged', 'formStateMaxChanged', 'formShowChanged', 'formFocused', 'formBlurred', 'formFlash', 'formShowInSystemTaskChange', 'formHashChange']" style="width: 150px;"></list>
+        <vflow v-slot="data" :data="list" direction="v" style="color: #FFF; background: hsl(0, 0%, 20%); line-height: 1.5; flex: 1; width: 0; padding: 10px;" same>
+            <label>[{{data.row.time}}] {{data.row.name}}, {{data.row.text}}.</label>
+        </vflow>
+    </layout>
 </form>

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

@@ -70,6 +70,8 @@ const text_1 = __importDefault(require("./control/text/text"));
 const vflow_1 = __importDefault(require("./control/vflow/vflow"));
 const xterm_1 = __importDefault(require("./control/xterm/xterm"));
 const echarts_1 = __importDefault(require("./control/echarts/echarts"));
+const tuieditor_1 = __importDefault(require("./control/tuieditor/tuieditor"));
+const arteditor_1 = __importDefault(require("./control/arteditor/arteditor"));
 const form_2 = __importDefault(require("./event/form/form"));
 const other_1 = __importDefault(require("./event/other/other"));
 const screen_1 = __importDefault(require("./event/screen/screen"));
@@ -80,6 +82,7 @@ const dom_1 = __importDefault(require("./method/dom/dom"));
 const form_3 = __importDefault(require("./method/form/form"));
 const fs_1 = __importDefault(require("./method/fs/fs"));
 const native_1 = __importDefault(require("./method/native/native"));
+const storage_1 = __importDefault(require("./method/storage/storage"));
 const system_1 = __importDefault(require("./method/system/system"));
 const task_2 = __importDefault(require("./method/task/task"));
 const theme_1 = __importDefault(require("./method/theme/theme"));
@@ -249,6 +252,14 @@ class default_1 extends clickgo.form.AbstractForm {
                     frm = yield clickgo.form.create(text_1.default);
                     break;
                 }
+                case 'ctuieditor': {
+                    frm = yield clickgo.form.create(tuieditor_1.default);
+                    break;
+                }
+                case 'carteditor': {
+                    frm = yield clickgo.form.create(arteditor_1.default);
+                    break;
+                }
                 case 'eform': {
                     frm = yield clickgo.form.create(form_2.default);
                     break;
@@ -289,6 +300,10 @@ class default_1 extends clickgo.form.AbstractForm {
                     frm = yield clickgo.form.create(native_1.default);
                     break;
                 }
+                case 'mstorage': {
+                    frm = yield clickgo.form.create(storage_1.default);
+                    break;
+                }
                 case 'msystem': {
                     frm = yield clickgo.form.create(system_1.default);
                     break;

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

@@ -36,10 +36,12 @@
                 <button @click="openForm('cdesc')">Desc</button>
                 <button @click="openForm('chtml')">Html</button>
                 <button @click="openForm('ciconview')">Iconview</button>
+                <button @click="openForm('carteditor')">Arteditor</button>
                 <button @click="openForm('cmonaco')">Monaco</button>
                 <button @click="openForm('cxterm')">Xterm</button>
                 <button @click="openForm('cecharts')">Echarts</button>
                 <button @click="openForm('cmap')">Map</button>
+                <button @click="openForm('ctuieditor')">Tuieditor</button>
             </layout>
         </flow>
         <flow v-else-if="ntab === 'method'" class="inner" direction="v">
@@ -49,6 +51,7 @@
                 <button @click="openForm('mform')">Library form</button>
                 <button @click="openForm('mfs')">Library fs</button>
                 <button @click="openForm('mnative')">Library native</button>
+                <button @click="openForm('mstorage')">Library storage</button>
                 <button @click="openForm('mtask')">Library task</button>
                 <button @click="openForm('mtheme')">Library theme</button>
                 <button @click="openForm('mtool')">Library tool</button>

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

@@ -44,6 +44,7 @@ class default_1 extends clickgo.form.AbstractForm {
         this.sendValue = 'sendValue';
         this.test = 'A';
         this.dr = '';
+        this.hash = 'testhash';
     }
     ssend() {
         this.send(parseInt(this.fid), {

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

@@ -25,6 +25,16 @@
                 <text v-model="sendValue" style="flex: 1; width: 0;"></text>
                 <button @click="ssend">send({{fid}}, { 'key': '{{sendValue}}' })</button>
             </layout>
+            <layout gutter="10">
+                <label>Now Form Hash:</label>
+                <label>{{formHash}}</label>
+            </layout>
+            <button @click="formHashBack">formHashBack()</button>
+            <layout gutter="10" align-v="center">
+                <label>Form Hash:</label>
+                <text v-model="hash" style="flex: 1; width: 0;"></text>
+            </layout>
+            <button @click="formHash = hash">formHash = '{{hash}}'</button>
             <button @click="hhide">hide() and show()</button>
             <layout gutter="10" align-v="center">
                 <button @click="sshowDialog" style="flex: 1;">showDialog()</button>

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

@@ -65,6 +65,11 @@ class default_1 extends clickgo.form.AbstractForm {
             yield clickgo.form.dialog('Hash is: ' + clickgo.core.getHash());
         });
     }
+    getHost() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield clickgo.form.dialog('Host is: ' + clickgo.core.getHost());
+        });
+    }
     locatione() {
         return __awaiter(this, void 0, void 0, function* () {
             if (clickgo.core.location(this.location)) {

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

@@ -1,4 +1,4 @@
-<form width="350" height="430" title="Library task" padding="10">
+<form width="350" height="450" 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>
@@ -9,6 +9,7 @@
             <button @click="hashe">hash('{{hash}}')</button>
         </layout>
         <button @click="getHash">getHash()</button>
+        <button @click="getHost">getHost()</button>
         <layout gutter="10">
             <text v-model="location" style="flex: 1;" />
             <button @click="locatione">location('...{{location.slice(-5)}}')</button>

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

@@ -41,6 +41,7 @@ class default_1 extends clickgo.form.AbstractForm {
         this.type = ['primary'];
         this.progress = ['noraml'];
         this.dr = '';
+        this.hash = 'hash' + clickgo.tool.rand(0, 100).toString();
     }
     min() {
         clickgo.form.min(this.formId);
@@ -63,6 +64,21 @@ class default_1 extends clickgo.form.AbstractForm {
     get() {
         clickgo.form.dialog(JSON.stringify(clickgo.form.get(parseInt(this.fid)))).catch((e) => { throw e; });
     }
+    getHash() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield clickgo.form.dialog(JSON.stringify(clickgo.form.getHash(parseInt(this.fid))));
+        });
+    }
+    hashBack() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield clickgo.form.dialog(JSON.stringify(clickgo.form.hashBack(parseInt(this.fid))));
+        });
+    }
+    tohash() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield clickgo.form.dialog(JSON.stringify(clickgo.form.hash(this.hash, parseInt(this.fid))));
+        });
+    }
     getActivePanel() {
         return __awaiter(this, void 0, void 0, function* () {
             yield clickgo.form.dialog(JSON.stringify(clickgo.form.getActivePanel(parseInt(this.fid))));