clickgo 3.2.4 → 3.2.6

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.4.9/dist/loader.min.js?path=index&npm={'clickgo':'3.2.4'}"></script>
+<script src="https://cdn.jsdelivr.net/npm/@litert/loader@3.4.9/dist/loader.min.js?path=index&npm={'clickgo':'3.2.6'}"></script>
 ```
 
 **index.js**

package/dist/app/demo/config.json

@@ -12,8 +12,10 @@
         "/clickgo/control/property",
         "/clickgo/control/table",
         "/clickgo/control/nav",
+        "/clickgo/control/page",
         "/clickgo/control/desc",
-        "/clickgo/control/html"
+        "/clickgo/control/html",
+        "/clickgo/control/iconview"
     ],
     "style": "/package/global",
 
@@ -41,6 +43,8 @@
         "/form/control/form/form.xml",
         "/form/control/html/html.js",
         "/form/control/html/html.xml",
+        "/form/control/iconview/iconview.js",
+        "/form/control/iconview/iconview.xml",
         "/form/control/img/img.xml",
         "/form/control/label/label.xml",
         "/form/control/layout/layout.xml",
@@ -59,6 +63,8 @@
         "/form/control/monaco/monaco.xml",
         "/form/control/nav/nav.js",
         "/form/control/nav/nav.xml",
+        "/form/control/page/page.js",
+        "/form/control/page/page.xml",
         "/form/control/panel/panel.js",
         "/form/control/panel/panel.xml",
         "/form/control/panel/test1.js",

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

@@ -0,0 +1,167 @@
+"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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clickgo = __importStar(require("clickgo"));
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.list = [
+            {
+                'id': '1',
+                'type': 0,
+                'name': 'Folder',
+                'time': 1676636097
+            },
+            {
+                'id': '2',
+                'type': 0,
+                'name': 'Folder2',
+                'time': 1676636097
+            },
+            {
+                'id': '3',
+                'type': 1,
+                'name': 'File1',
+                'time': 1676600096
+            },
+            {
+                'id': '4',
+                'type': 1,
+                'name': 'db.sql',
+                'time': 1676600097,
+                'icon': '/package/res/sql.svg'
+            },
+            {
+                'id': '5',
+                'type': 1,
+                'name': 'article.txt',
+                'time': 1676600098,
+                'icon': '/package/res/txt.svg'
+            },
+            {
+                'id': '6',
+                'type': 1,
+                'name': 'pack.zip',
+                'time': 1676600099,
+                'icon': '/package/res/zip.svg'
+            }
+        ];
+        this.select = [];
+        this.disabled = false;
+        this.must = false;
+        this.multi = true;
+        this.ctrl = true;
+        this.selection = true;
+        this.gesture = false;
+        this.selectionArea = {};
+        this.scroll = 'auto';
+        this.size = [100];
+    }
+    showIndex() {
+        clickgo.form.dialog('Index is ' + this.select.toString() + '.').catch((e) => { throw e; });
+    }
+    showType() {
+        if (this.select.length === 0) {
+            clickgo.form.dialog('There are currently no selected items.').catch((e) => { throw e; });
+        }
+        else {
+            const types = [];
+            for (const item of this.select) {
+                types.push(this.list[item].type);
+            }
+            clickgo.form.dialog(`Type is ${types}.`).catch((e) => { throw e; });
+        }
+    }
+    add() {
+        if (clickgo.tool.rand(0, 1)) {
+            this.list.push({
+                'id': this.list.length.toString(),
+                'type': 1,
+                'name': 'File' + this.list.length.toString(),
+                'time': Math.floor(Date.now() / 1000)
+            });
+        }
+        else {
+            this.list.unshift({
+                'id': this.list.length.toString(),
+                'type': 0,
+                'name': 'Folder' + this.list.length.toString(),
+                'time': Math.floor(Date.now() / 1000)
+            });
+        }
+    }
+    remove() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.list.length === 3) {
+                yield clickgo.form.dialog('It cannot be removed at this time.');
+                return;
+            }
+            this.list.splice(-1, 1);
+        });
+    }
+    drop(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield clickgo.form.dialog(JSON.stringify(data));
+        });
+    }
+    onSelect(area) {
+        this.selectionArea = area;
+    }
+    onOpen(v) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield clickgo.form.dialog('onOpen: ' + v.toString());
+        });
+    }
+    scrollChange() {
+        switch (this.scroll) {
+            case 'auto': {
+                this.scroll = 'visible';
+                break;
+            }
+            case 'visible': {
+                this.scroll = 'hidden';
+                break;
+            }
+            default: {
+                this.scroll = 'auto';
+            }
+        }
+    }
+    onGesture(dir) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield clickgo.form.dialog('onGesture: ' + dir);
+        });
+    }
+}
+exports.default = default_1;

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

@@ -0,0 +1,39 @@
+<form title="Iconview" width="400" 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">
+            <template v-slot:pop>
+                <menulist>
+                    <menulist-item alt="S">Some options</menulist-item>
+                </menulist>
+            </template>
+            <template v-slot:itempop>
+                <menulist>
+                    <menulist-item alt="I" @click="showIndex">Show index</menulist-item>
+                    <menulist-item alt="S" @click="showType">Show type</menulist-item>
+                </menulist>
+            </template>
+        </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>
+        </layout>
+        <layout class="ctr" gutter="10">
+            <select v-model="size" :data="[0, 32, 64, 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>
+        </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>
+        </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>
+        </layout>
+    </layout>
+</form>

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

@@ -167,20 +167,15 @@ class default_1 extends clickgo.form.AbstractForm {
         clickgo.form.dialog('Index is ' + this.select2.toString() + '.').catch((e) => { throw e; });
     }
     showType() {
-        if (Array.isArray(this.select)) {
-            if (this.select.length === 0) {
-                clickgo.form.dialog('There are currently no selected items.').catch((e) => { throw e; });
-            }
-            else {
-                const types = [];
-                for (const item of this.select) {
-                    types.push(this.slist[item].type);
-                }
-                clickgo.form.dialog(`Type is ${types}.`).catch((e) => { throw e; });
-            }
+        if (this.select.length === 0) {
+            clickgo.form.dialog('There are currently no selected items.').catch((e) => { throw e; });
         }
         else {
-            clickgo.form.dialog(this.select === -1 ? 'There are currently no selected items.' : `Type is ${this.slist[this.select].type}.`).catch((e) => { throw e; });
+            const types = [];
+            for (const item of this.select) {
+                types.push(this.slist[item].type);
+            }
+            clickgo.form.dialog(`Type is ${types}.`).catch((e) => { throw e; });
         }
     }
     selectButton() {

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

@@ -0,0 +1,36 @@
+"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.p1 = 3;
+        this.p2 = 25;
+        this.p3 = 30;
+        this.p4 = 50;
+    }
+}
+exports.default = default_1;

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

@@ -0,0 +1,9 @@
+<form width="650" height="400" title="Page">
+    <layout direction="v" gutter="10" style="flex: 1; padding: 10px;">
+        <page max="10" />
+        <page v-model="p1" max="10" />
+        <page v-model="p2" max="30" />
+        <page v-model="p3" total="1282" />
+        <page v-model="p4" total="1282" count="20" />
+    </layout>
+</form>

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

@@ -43,6 +43,7 @@ const dialog_1 = __importDefault(require("./control/dialog/dialog"));
 const file_1 = __importDefault(require("./control/file/file"));
 const form_1 = __importDefault(require("./control/form/form"));
 const html_1 = __importDefault(require("./control/html/html"));
+const iconview_1 = __importDefault(require("./control/iconview/iconview"));
 const link_1 = __importDefault(require("./control/link/link"));
 const layout_1 = __importDefault(require("./control/layout/layout"));
 const list_1 = __importDefault(require("./control/list/list"));
@@ -51,6 +52,7 @@ const menu_1 = __importDefault(require("./control/menu/menu"));
 const monaco_1 = __importDefault(require("./control/monaco/monaco"));
 const desc_1 = __importDefault(require("./control/desc/desc"));
 const nav_1 = __importDefault(require("./control/nav/nav"));
+const page_1 = __importDefault(require("./control/page/page"));
 const panel_1 = __importDefault(require("./control/panel/panel"));
 const flow_1 = __importDefault(require("./control/flow/flow"));
 const property_1 = __importDefault(require("./control/property/property"));
@@ -124,6 +126,10 @@ class default_1 extends clickgo.form.AbstractForm {
                     frm = yield clickgo.form.create(html_1.default);
                     break;
                 }
+                case 'ciconview': {
+                    frm = yield clickgo.form.create(iconview_1.default);
+                    break;
+                }
                 case 'cvflow': {
                     frm = yield clickgo.form.create(vflow_1.default);
                     break;
@@ -174,6 +180,10 @@ class default_1 extends clickgo.form.AbstractForm {
                     frm = yield clickgo.form.create(nav_1.default);
                     break;
                 }
+                case 'cpage': {
+                    frm = yield clickgo.form.create(page_1.default);
+                    break;
+                }
                 case 'cpanel': {
                     frm = yield clickgo.form.create(panel_1.default);
                     break;

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

@@ -28,10 +28,12 @@
                 <button @click="openForm('cproperty')">Property</button>
                 <button @click="openForm('ctable')">Table</button>
                 <button @click="openForm('cnav')">Nav</button>
+                <button @click="openForm('cpage')">Page</button>
                 <button @click="openForm('cbox')">Box</button>
                 <button @click="openForm('cmonaco')">Monaco</button>
                 <button @click="openForm('cdesc')">Desc</button>
                 <button @click="openForm('chtml')">Html</button>
+                <button @click="openForm('ciconview')">Iconview</button>
             </layout>
         </flow>
         <flow v-else-if="ntab === 'method'" class="inner" direction="v">

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

@@ -189,6 +189,12 @@ class default_1 extends clickgo.form.AbstractForm {
             }
         });
     }
+    moveDown(e) {
+        clickgo.dom.bindDblClick(e, () => {
+            this.moveWidth = this.moveWidth === 25 ? 50 : 25;
+            this.moveHeight = this.moveHeight === 25 ? 50 : 25;
+        });
+    }
     fullscreen() {
         clickgo.dom.fullscreen();
     }

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

@@ -54,7 +54,7 @@
             </block>
             <block @mousedown="bindMoveDown" @touchstart="bindMoveDown" style="height: 50px; display: flex; justify-content: center; align-items: center; font-size: 14px; position: relative; background: var(--g-plain-background); border: solid 1px var(--g-plain-border-color);">
                 <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'}" @dblclick="moveWidth = moveWidth === 25 ? 50 : 25;moveHeight = moveHeight === 25 ? 50 : 25"></block>
+                <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>
             <label>clickgo.form.is.move: {{isMove ? 'true' : 'false'}}</label>

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

@@ -67,8 +67,8 @@ class default_1 extends clickgo.form.AbstractForm {
             yield clickgo.form.dialog(stats ? JSON.stringify(stats) : 'null');
         });
     }
-    dblclick() {
-        return __awaiter(this, void 0, void 0, function* () {
+    dblclick(e) {
+        clickgo.dom.bindDblClick(e, () => __awaiter(this, void 0, void 0, function* () {
             const r = yield clickgo.fs.isFile(this.val[0]);
             if (r) {
                 const extlio = this.val[0].lastIndexOf('.');
@@ -100,7 +100,7 @@ class default_1 extends clickgo.form.AbstractForm {
                 return;
             }
             yield this.open(this.val[0]);
-        });
+        }));
     }
     up() {
         return __awaiter(this, void 0, void 0, function* () {

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

@@ -3,7 +3,7 @@
         <label>Double click the item below:</label>
         <block style="background: #000; color: #FFF; padding: 5px;">{{ppath}}</block>
         <label>{{val[0]}}</label>
-        <list v-model="val" :data="list" @dblclick="dblclick" style="flex: 1; height: 0;"></list>
+        <list v-model="val" :data="list" @mousedown="dblclick" @touchstart="dblclick" style="flex: 1; height: 0;"></list>
         <layout gutter="10">
             <button style="height: 30px; padding: 0 10px;" @click="open(ppath)">Refresh</button>
             <button style="height: 30px; padding: 0 10px;" @click="stats">Stats</button>

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

@@ -51,7 +51,7 @@
             <button @click="clearLocaleLang()" style="height: 30px;">clearLocaleLang()</button>
             <label>Change global locale lang:</label>
             <layout gutter="10">
-                <select v-model="select" :data="['sc', 'tc', 'en', 'ja']" style="flex: 1; width: 0;"></select>
+                <select v-model="select" :data="['en', 'sc', 'tc', 'ja', 'ko', 'th', 'es', 'de', 'fr', 'pt', 'ru', 'vi']" style="flex: 1; width: 0;"></select>
                 <button @click="changeLocaleLang" style="padding: 0 10px; height: 30px;">Change</button>
             </layout>
             <button @click="sleep" style="height: 30px;">{{sleeping ? 'Waiting...' : 'sleep(() => { ... }, 1000)'}}</button>

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

@@ -81,8 +81,8 @@ class default_1 extends clickgo.form.AbstractForm {
         }
         this.ppath = path;
     }
-    dblclick() {
-        return __awaiter(this, void 0, void 0, function* () {
+    dblclick(e) {
+        clickgo.dom.bindDblClick(e, () => __awaiter(this, void 0, void 0, function* () {
             if (!this.access.zip) {
                 return;
             }
@@ -112,7 +112,7 @@ class default_1 extends clickgo.form.AbstractForm {
                 return;
             }
             this.open(this.val[0]);
-        });
+        }));
     }
     up() {
         if (this.ppath === '/') {

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

@@ -6,7 +6,7 @@
         </button>
         <label>Double click the item below:</label>
         <block style="background: #000; color: #FFF; padding: 5px;">{{ppath}}</block>
-        <list v-model="val" :data="list" @dblclick="dblclick" style="flex: 1; height: 0;"></list>
+        <list v-model="val" :data="list" @mousedown="dblclick" @touchstart="dblclick" style="flex: 1; height: 0;"></list>
         <button style="height: 30px;" @click="up">Up</button>
     </layout>
 </form>

package/dist/app/demo/res/icon.svg

@@ -1 +1,5 @@
-<svg height="512pt" viewBox="-14 0 511 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m437 256c0-12.300781-1.199219-24.601562-3.898438-37.199219l50.097657-54.902343-40.800781-70.800782-72.597657 15.898438c-18.902343-16.5-41.101562-29.097656-64.5-37.5l-22.5-71.496094h-81.902343l-22.199219 71.5c-23.398438 8.398438-45.601563 21-64.5 37.5l-72.597657-15.898438-41.101562 70.796876 50.101562 54.902343c-2.402343 12.597657-3.601562 24.898438-3.601562 37.199219s1.199219 24.601562 3.601562 37.199219l-50.101562 54.902343 41.101562 70.796876 72.597657-15.898438c18.902343 16.5 41.101562 29.101562 64.5 37.5l22.199219 71.5h81.902343l22.5-71.5c23.398438-8.398438 45.597657-21 64.5-37.5l72.597657 15.898438 40.800781-70.796876-50.097657-54.902343c2.699219-12.597657 3.898438-24.898438 3.898438-37.199219zm-192.898438 105h-2.101562c-57.898438 0-105-47.101562-105-105s47.101562-105 105-105h2.101562c57 1.199219 102.898438 47.699219 102.898438 105s-45.898438 103.800781-102.898438 105zm0 0" fill="#dce1eb"/><path d="m433.101562 293.199219 50.097657 54.902343-40.800781 70.800782-72.597657-15.902344c-18.902343 16.5-41.101562 29.101562-64.5 37.5l-22.5 71.5h-38.699219v-151c57-1.199219 102.898438-47.699219 102.898438-105s-45.898438-103.800781-102.898438-105v-151h38.699219l22.5 71.5c23.398438 8.398438 45.597657 21 64.5 37.5l72.597657-15.898438 40.800781 70.796876-50.097657 54.902343c2.699219 12.597657 3.898438 24.898438 3.898438 37.199219s-1.199219 24.601562-3.898438 37.199219zm0 0" fill="#bec3d2"/></svg>
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M2 12.8799V11.1199C2 10.0799 2.85 9.21994 3.9 9.21994C5.71 9.21994 6.45 7.93994 5.54 6.36994C5.02 5.46994 5.33 4.29994 6.24 3.77994L7.97 2.78994C8.76 2.31994 9.78 2.59994 10.25 3.38994L10.36 3.57994C11.26 5.14994 12.74 5.14994 13.65 3.57994L13.76 3.38994C14.23 2.59994 15.25 2.31994 16.04 2.78994L17.77 3.77994C18.68 4.29994 18.99 5.46994 18.47 6.36994C17.56 7.93994 18.3 9.21994 20.11 9.21994C21.15 9.21994 22.01 10.0699 22.01 11.1199V12.8799C22.01 13.9199 21.16 14.7799 20.11 14.7799C18.3 14.7799 17.56 16.0599 18.47 17.6299C18.99 18.5399 18.68 19.6999 17.77 20.2199L16.04 21.2099C15.25 21.6799 14.23 21.3999 13.76 20.6099L13.65 20.4199C12.75 18.8499 11.27 18.8499 10.36 20.4199L10.25 20.6099C9.78 21.3999 8.76 21.6799 7.97 21.2099L6.24 20.2199C5.33 19.6999 5.02 18.5299 5.54 17.6299C6.45 16.0599 5.71 14.7799 3.9 14.7799C2.85 14.7799 2 13.9199 2 12.8799Z" fill="#292D32"/>
+<path d="M12 15.25C13.7949 15.25 15.25 13.7949 15.25 12C15.25 10.2051 13.7949 8.75 12 8.75C10.2051 8.75 8.75 10.2051 8.75 12C8.75 13.7949 10.2051 15.25 12 15.25Z" fill="#292D32"/>
+</svg>

package/dist/app/demo/res/r-1.svg

@@ -1 +1,32 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595816025497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1175" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M61.281 512a450.56 450.56 0 1 0 901.12 0 450.56 450.56 0 1 0-901.12 0z" fill="#92CEF8" p-id="1176"></path><path d="M240.803 583.997a346.64 346.64 0 1 0 693.28 0 346.64 346.64 0 1 0-693.28 0z" fill="#62B4F9" p-id="1177"></path><path d="M481.659 486.22a245.248 245.248 0 1 1 0.03 346.773 245.207 245.207 0 0 1-0.03-346.772z" fill="#3599F3" p-id="1178"></path><path d="M509.44 245.76a268.8 268.8 0 1 0 268.8 268.8 269.102 269.102 0 0 0-268.8-268.8z m0 497.664A228.864 228.864 0 1 1 738.304 514.56 229.12 229.12 0 0 1 509.44 743.424z m0.287-386.458a20.096 20.096 0 0 0-18.289 11.31l-118.103 245.51 35.994 17.315 43.008-89.39H561.05l39.628 88.868 36.475-16.266-109.476-245.514a19.968 19.968 0 0 0-17.95-11.838zM471.552 501.76l37.202-77.312 34.478 77.312h-71.68z" fill="#FFFFFF" p-id="1179"></path></svg>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 297 297" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<circle style="fill:#345065;" cx="148.5" cy="148.5" r="148.5"/>
+		</g>
+	</g>
+	<path style="fill:#2C3E50;" d="M216.895,109.734l-174.216,84.12l103.112,103.112c0.902,0.016,1.804,0.034,2.709,0.034
+		c69.329,0,127.557-47.51,143.913-111.748L216.895,109.734z"/>
+	<g>
+		<path style="fill:#CDD1D3;" d="M49,182c0-54.952,44.548-99.5,99.5-99.5S248,127.048,248,182H49z"/>
+	</g>
+	<g>
+		<path style="fill:#A3A7A8;" d="M148.5,82.5V182H248C248,127.048,203.452,82.5,148.5,82.5z"/>
+	</g>
+	<g>
+		<path style="fill:#99ABD5;" d="M54.5,198.5h188c9.941,0,18-8.059,18-18l0,0h-224l0,0C36.5,190.441,44.559,198.5,54.5,198.5z"/>
+	</g>
+	<g>
+		<circle style="fill:#99ABD5;" cx="148.5" cy="74.5" r="8.5"/>
+	</g>
+	<g>
+		<path style="fill:#8092B7;" d="M148.5,180.5v18h94c9.941,0,18-8.059,18-18H148.5z"/>
+	</g>
+	<g>
+		<path style="fill:#8092B7;" d="M157,74.5c0-4.694-3.806-8.5-8.5-8.5v17C153.194,83,157,79.194,157,74.5z"/>
+	</g>
+</g>
+</svg>

package/dist/app/demo/res/r-2.svg

@@ -1 +1,38 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1595816218557" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1307" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M61.281 512a450.56 450.56 0 1 0 901.12 0 450.56 450.56 0 1 0-901.12 0z" fill="#95ACF5" p-id="1308"></path><path d="M240.803 583.997a346.64 346.64 0 1 0 693.28 0 346.64 346.64 0 1 0-693.28 0z" fill="#7998EF" p-id="1309"></path><path d="M481.659 486.22a245.248 245.248 0 1 1 0.03 346.773 245.207 245.207 0 0 1-0.03-346.772z" fill="#5F87E9" p-id="1310"></path><path d="M752.584 737.28H271.36a41.042 41.042 0 0 1-40.96-41.011V327.71a41.042 41.042 0 0 1 40.96-40.991h481.198a41.047 41.047 0 0 1 41.042 40.99V696.27a41.042 41.042 0 0 1-41.016 41.011zM271.36 325.12a2.56 2.56 0 0 0-2.56 2.56v368.589a2.56 2.56 0 0 0 2.56 2.56h481.198a2.56 2.56 0 0 0 2.56-2.56V327.71a2.56 2.56 0 0 0-2.56-2.56H271.36z m267.571 316.959h-223.12a19.215 19.215 0 0 1-19.204-19.22v-49.066a19.226 19.226 0 0 1 10.004-16.896l57.933-31.585a64.44 64.44 0 0 1-12.62-38.175v-28.994a76.221 76.221 0 1 1 152.442 0v29.01a64.312 64.312 0 0 1-13.02 38.697l56.832 31.098a19.226 19.226 0 0 1 9.994 16.86v49.066a19.215 19.215 0 0 1-19.215 19.22z m-203.914-38.431h184.735v-18.432l-61.722-33.792a25.759 25.759 0 0 1-2.785-43.448 25.462 25.462 0 0 0 10.675-20.823v-29.01a37.806 37.806 0 1 0-75.612 0v29.01a25.544 25.544 0 0 0 10.383 20.659 25.754 25.754 0 0 1-3.072 43.238l-62.602 34.166v18.432z m141.44-85.94z m233.738-53.974H576.968v-38.426H710.2v38.436z m-38.4 72.125h-94.827v-38.425h94.817v38.435z m38.4 80.22H576.968v-38.435H710.2v38.435z" fill="#FFFFFF" p-id="1311"></path></svg>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 297 297" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<circle style="fill:#0EA6CB;" cx="148.5" cy="148.5" r="148.5"/>
+		</g>
+	</g>
+	<path style="fill:#3A6F81;" d="M296.89,143.057L231,77.167L93.736,251.474l45.212,45.212c3.159,0.201,6.342,0.314,9.552,0.314
+		c82.014,0,148.5-66.486,148.5-148.5C297,146.677,296.956,144.864,296.89,143.057z"/>
+	<g>
+		<path style="fill:#ECF0F1;" d="M105.916,256.5h86.39c8.693,0,16.039-6.446,17.168-15.065L231,77.167H66L88.765,241.56
+			C89.951,250.123,97.271,256.5,105.916,256.5z"/>
+	</g>
+	<g>
+		<path style="fill:#D2D7D8;" d="M149.667,77.167V256.5h42.639c8.693,0,16.039-6.446,17.168-15.065L231,77.167H149.667z"/>
+	</g>
+	<g>
+		<path style="fill:#CBE3E3;" d="M86.575,146l11.602,83.785c0.999,7.214,7.166,12.586,14.449,12.586h72.777
+			c7.323,0,13.511-5.43,14.463-12.691L210.832,146H86.575z"/>
+	</g>
+	<g>
+		<path style="fill:#B4CCCB;" d="M149.667,146v96.371h35.736c7.323,0,13.511-5.43,14.463-12.691L210.832,146H149.667z"/>
+	</g>
+	<g>
+		<path style="fill:#99ABD5;" d="M183.952,162.27l-19.299,4.571c-3.538,0.838-7.086-1.351-7.924-4.889l-4.571-19.299
+			c-0.838-3.538,1.351-7.086,4.889-7.924l19.299-4.571c3.538-0.838,7.086,1.351,7.924,4.889l4.571,19.299
+			C189.679,157.885,187.49,161.432,183.952,162.27z"/>
+	</g>
+	<g>
+		<path style="fill:#99ABD5;" d="M116.556,171.636l-14.412-13.626c-2.642-2.498-2.759-6.665-0.261-9.307l13.626-14.412
+			c2.498-2.642,6.665-2.759,9.307-0.261l14.412,13.626c2.642,2.498,2.759,6.665,0.261,9.307l-13.626,14.412
+			C123.365,174.017,119.198,174.134,116.556,171.636z"/>
+	</g>
+</g>
+</svg>

package/dist/app/demo/res/sql.svg

@@ -1 +1,25 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1617186269668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1010" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M704.77913 82.365217H288.50087c-31.610435 0-57.433043 25.822609-57.433044 57.433044v744.403478c0 31.610435 25.822609 57.433043 57.433044 57.433044h545.391304c31.610435 0 57.433043-25.822609 57.433043-57.433044V268.911304l-186.546087-186.546087z" fill="#FCEDE6" p-id="1011"></path><path d="M704.77913 211.478261c0 31.610435 25.822609 57.433043 57.433044 57.433043h129.113043l-186.546087-186.546087v129.113044z" fill="#FC8670" p-id="1012"></path><path d="M501.76 833.892174H164.285217c-17.363478 0-31.610435-13.356522-31.610434-29.829565V658.921739c0-16.473043 14.246957-29.829565 31.610434-29.829565h337.029566c17.363478 0 31.610435 13.356522 31.610434 29.829565v144.695652c0.445217 16.918261-13.801739 30.274783-31.165217 30.274783z" fill="#F9742B" p-id="1013"></path><path d="M228.841739 767.554783v30.274782h-28.048696v-30.274782h28.048696zM313.878261 715.01913h-32.50087v-6.67826c0-5.787826-0.445217-9.349565-0.890434-10.685218s-2.226087-2.226087-4.897392-2.226087c-2.226087 0-3.561739 0.890435-4.452174 2.226087s-1.335652 3.561739-1.335652 6.233044c0 3.561739 0.445217 6.233043 0.890435 8.013913s2.226087 3.561739 4.452174 5.787826 8.013913 4.897391 16.027826 8.904348c10.685217 5.342609 17.808696 10.24 20.925217 14.692174s4.897391 11.130435 4.897392 20.034782c0 9.794783-1.335652 17.363478-4.006957 22.26087s-6.678261 8.904348-12.911304 11.575652-13.356522 4.006957-21.815652 4.006956c-9.349565 0-17.363478-1.335652-24.04174-4.452174s-11.130435-6.678261-13.801739-12.020869-3.561739-12.466087-3.561739-22.706087v-5.787826h32.50087v7.568696c0 6.678261 0.445217 10.685217 1.335652 12.911304s2.226087 3.116522 4.897391 3.116522c2.671304 0 4.452174-0.445217 5.342609-1.78087s1.335652-4.006957 1.335652-8.45913c0-5.787826-0.890435-9.349565-2.226087-10.685218-1.335652-1.335652-8.45913-5.787826-21.370435-12.911304-10.685217-6.233043-17.363478-11.575652-20.034782-16.473044s-3.561739-10.685217-3.561739-17.808695c0-9.794783 1.335652-16.918261 4.006956-21.370435s6.678261-8.013913 12.911304-10.685217 13.356522-3.561739 21.370435-3.56174c8.013913 0 14.692174 0.890435 20.48 3.116522s9.794783 4.897391 12.911305 8.013913 4.897391 6.233043 5.342608 9.349565 0.890435 7.123478 0.890435 13.356522v7.123478zM410.490435 676.730435v138.017391h-36.953044v-26.713043c-3.561739 5.342609-6.678261 8.45913-9.794782 9.794782-3.116522 1.335652-6.678261 2.226087-11.130435 2.226087-6.233043 0-11.575652-1.335652-16.027826-4.452174s-7.123478-7.123478-8.459131-12.020869-2.226087-12.466087-2.226087-22.26087v-53.426087c0-8.013913 0.445217-14.246957 1.78087-18.253913s3.561739-7.568696 8.013913-10.685217 8.904348-4.452174 14.692174-4.452174c4.452174 0 8.904348 0.890435 12.911304 3.116522s7.568696 5.342609 10.685218 9.349565V676.730435h36.507826z m-36.953044 32.946087c0-5.342609-0.445217-8.904348-1.335652-10.685218s-2.226087-2.671304-4.452174-2.671304-3.561739 0.890435-4.006956 2.671304-0.890435 5.342609-0.890435 11.130435v53.871304c0 6.678261 0.445217 10.685217 0.890435 12.466087s2.226087 2.671304 4.452174 2.671305 3.561739-0.890435 4.452174-2.671305 0.890435-5.787826 0.890434-11.575652v-55.206956zM461.690435 650.017391v147.812174h-37.843478V650.017391h37.843478z" fill="#FFFFFF" p-id="1014"></path><path d="M492.855652 463.471304c-49.41913 0-101.064348-7.568696-130.893913-28.493913-4.006957 6.678261-5.342609 11.575652-5.342609 16.918261 0 35.172174 69.89913 51.645217 135.791305 51.645218s135.791304-16.918261 135.791304-52.98087c0-5.342609-1.335652-10.24-5.342609-16.918261-28.93913 20.925217-80.584348 29.829565-130.003478 29.829565z m0 0" fill="#FC8670" p-id="1015"></path><path d="M492.855652 404.257391c-49.41913 0-101.064348-7.568696-130.893913-28.493913-4.006957 6.678261-5.342609 11.575652-5.342609 16.918261 0 36.062609 69.89913 52.98087 135.791305 52.98087s135.791304-16.918261 135.791304-52.98087c0-5.342609-1.335652-10.24-5.342609-16.918261-28.93913 19.144348-80.584348 28.493913-130.003478 28.493913z m0 0" fill="#FC8670" p-id="1016"></path><path d="M492.855652 344.598261c-49.41913 0-101.064348-7.568696-130.893913-28.493913-4.006957 5.342609-5.342609 10.24-5.342609 15.582609 0 36.062609 69.89913 52.98087 135.791305 52.980869s135.791304-16.918261 135.791304-52.980869c0-5.342609-1.335652-10.24-5.342609-16.918261-28.93913 20.48-80.584348 29.829565-130.003478 29.829565z m0 0" fill="#FC8670" p-id="1017"></path><path d="M492.855652 219.046957c-65.892174 0-135.791304 16.918261-135.791304 52.980869 0 36.062609 69.89913 52.98087 135.791304 52.98087s135.791304-16.918261 135.791305-52.98087c0.445217-36.507826-69.453913-52.98087-135.791305-52.980869z m0 0" fill="#FC8670" p-id="1018"></path></svg>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<path style="fill:#E2E5E7;" d="M128,0c-17.6,0-32,14.4-32,32v448c0,17.6,14.4,32,32,32h320c17.6,0,32-14.4,32-32V128L352,0H128z"/>
+<path style="fill:#B0B7BD;" d="M384,128h96L352,0v96C352,113.6,366.4,128,384,128z"/>
+<polygon style="fill:#CAD1D8;" points="480,224 384,128 480,128 "/>
+<path style="fill:#F15642;" d="M416,416c0,8.8-7.2,16-16,16H48c-8.8,0-16-7.2-16-16V256c0-8.8,7.2-16,16-16h352c8.8,0,16,7.2,16,16
+	V416z"/>
+<g>
+	<path style="fill:#FFFFFF;" d="M98.128,314.672c2.944-24.832,40.416-29.296,58.064-15.728c8.704,7.024-0.496,18.16-8.192,12.528
+		c-9.456-6-30.96-8.816-33.648,4.464c-3.456,20.992,52.208,8.976,51.296,43.008c-0.896,32.496-47.968,33.248-65.632,18.672
+		c-4.224-3.456-4.096-9.072-1.776-12.544c3.312-3.312,7.024-4.464,11.376-0.88c10.496,7.152,37.488,12.528,39.408-5.648
+		C147.376,339.632,94.16,351.008,98.128,314.672z"/>
+	<path style="fill:#FFFFFF;" d="M265.488,369.424l2.048,2.416c8.432,7.68-2.56,20.224-11.136,12.16l-4.336-3.44
+		c-6.656,4.592-14.448,6.784-24.816,6.784c-22.512,0-48.24-15.504-48.24-46.976s25.584-47.456,48.24-47.456
+		c23.776,0,47.072,15.984,47.072,47.456C274.32,352.528,271.232,361.504,265.488,369.424z M257.792,340.368
+		c0-20.336-15.984-30.688-30.56-30.688c-15.728,0-31.216,10.336-31.216,30.688c0,15.504,13.168,30.208,31.216,30.208
+		c4.592,0,9.072-1.152,13.552-2.304l-14.576-13.44c-6.784-8.192,3.968-19.84,12.528-12.288l14.464,14.448
+		C256.384,352.528,257.792,347.024,257.792,340.368z"/>
+	<path style="fill:#FFFFFF;" d="M293.168,303.152c0-4.224,3.584-7.808,8.064-7.808c4.096,0,7.552,3.6,7.552,7.808v64.096h34.8
+		c12.528,0,12.8,16.752,0,16.752h-42.336c-4.48,0-8.064-3.184-8.064-7.792v-73.056H293.168z"/>
+</g>
+<path style="fill:#CAD1D8;" d="M400,432H96v16h304c8.8,0,16-7.2,16-16v-16C416,424.8,408.8,432,400,432z"/>
+</svg>