clickgo 3.1.2-dev11 → 3.1.3-dev12

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

@@ -9,58 +9,74 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.methods = exports.computed = exports.data = void 0;
 const clickgo = require("clickgo");
-exports.data = {
-    'ntab': '',
-    'slist': [
-        {
-            'type': 0,
-            'name': 'Appraise',
-            'path': 'Bob >> folder >> Appraise',
-            'src': '/package/res/r-1.svg'
-        },
-        {
-            'type': 0,
-            'name': 'Card',
-            'path': 'Bob >> folder >> Card',
-            'src': '/package/res/r-2.svg',
-            'menu': true
-        },
-        {
-            'type': 0,
-            'name': 'Appraise2',
-            'path': 'Bob >> folder >> Appraise2',
-            'src': '/package/res/r-1.svg',
-            'disabled': true
-        },
-        {
-            'control': 'split'
-        },
-        {
-            'type': 1
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.ntab = '';
+        this.slist = [
+            {
+                'type': 0,
+                'name': 'Appraise',
+                'path': 'Bob >> folder >> Appraise',
+                'src': '/package/res/r-1.svg'
+            },
+            {
+                'type': 0,
+                'name': 'Card',
+                'path': 'Bob >> folder >> Card',
+                'src': '/package/res/r-2.svg',
+                'menu': true
+            },
+            {
+                'type': 0,
+                'name': 'Appraise2',
+                'path': 'Bob >> folder >> Appraise2',
+                'src': '/package/res/r-1.svg',
+                'disabled': true
+            },
+            {
+                'control': 'split'
+            },
+            {
+                'type': 1
+            }
+        ];
+        this.select = [];
+        this.select2 = ['Appraise'];
+        this.label2 = [''];
+        this.sub6children = [];
+        this.select3 = [0];
+        this.listData3 = [];
+        this.select4 = [];
+        this.listData4 = [];
+        this.disabled = false;
+        this.must = true;
+        this.multi = false;
+        this.ctrl = true;
+        this.selection = false;
+        this.gesture = false;
+        this.selectionArea = {};
+        this.tree = false;
+        this.async = false;
+        this.icon = false;
+        this.scroll = 'auto';
+    }
+    get sizes() {
+        const rtn = {};
+        for (let i = 0; i < this.slist.length; ++i) {
+            if (this.slist[i].control === 'split') {
+                rtn[i] = 3;
+                continue;
+            }
+            if (this.slist[i].type === 1) {
+                rtn[i] = 31;
+                continue;
+            }
         }
-    ],
-    'select': 0,
-    'select2': 'Appraise',
-    'label2': '',
-    'tree': false,
-    'async': false,
-    'icon': false,
-    'sub6children': [],
-    'select3': 0,
-    'listData3': [],
-    'select4': '',
-    'listData4': [],
-    'disabled': false,
-    'must': true,
-    'multi': false,
-    'selection': false,
-    'selectionArea': {},
-    'scroll': 'auto'
-};
-exports.computed = {
-    'adData': function () {
+        return rtn;
+    }
+    get adData() {
         const data = [];
         for (let i = 0; i < this.slist.length; ++i) {
             const item = this.slist[i];
@@ -70,8 +86,8 @@ exports.computed = {
             });
         }
         return data;
-    },
-    'listData': function () {
+    }
+    get listData() {
         const data = ['Item1', {
                 'label': 'Title1',
                 'children': [
@@ -113,23 +129,21 @@ exports.computed = {
             }
         }
         return data;
-    },
-    'listData2': function () {
+    }
+    get listData2() {
         const data = [];
         for (let k = 0; k < this.listData.length; k++) {
             data.push(k + 1);
         }
         return data;
     }
-};
-exports.methods = {
-    showIndex: function () {
+    showIndex() {
         clickgo.form.dialog('Index is ' + this.select.toString() + '.').catch((e) => { throw e; });
-    },
-    showIndex2: function () {
+    }
+    showIndex2() {
         clickgo.form.dialog('Index is ' + this.select2.toString() + '.').catch((e) => { throw e; });
-    },
-    showType: function () {
+    }
+    showType() {
         if (Array.isArray(this.select)) {
             if (this.select.length === 0) {
                 clickgo.form.dialog('There are currently no selected items.').catch((e) => { throw e; });
@@ -145,19 +159,19 @@ exports.methods = {
         else {
             clickgo.form.dialog(this.select === -1 ? 'There are currently no selected items.' : `Type is ${this.slist[this.select].type}.`).catch((e) => { throw e; });
         }
-    },
-    selectButton: function () {
+    }
+    selectButton() {
         if (this.ntab === 'list') {
-            this.select2 = 'Item1';
+            this.select2 = ['Item1'];
         }
         else {
-            this.select = 1;
+            this.select = [1];
         }
-    },
-    selectButtonList: function () {
-        this.select2 = 'Sub3';
-    },
-    onSelectLoad: function (value, resolve) {
+    }
+    selectButtonList() {
+        this.select2 = ['Sub3'];
+    }
+    onSelectLoad(value, resolve) {
         return __awaiter(this, void 0, void 0, function* () {
             if (value !== 'Sub6') {
                 yield clickgo.tool.sleep(100);
@@ -172,11 +186,11 @@ exports.methods = {
             yield clickgo.tool.sleep(300);
             this.sub6children = ['Sub7', 'Sub8'];
         });
-    },
-    onSelect: function (area) {
+    }
+    onSelect(area) {
         this.selectionArea = area;
-    },
-    scrollChange: function () {
+    }
+    scrollChange() {
         switch (this.scroll) {
             case 'auto': {
                 this.scroll = 'visible';
@@ -191,4 +205,10 @@ exports.methods = {
             }
         }
     }
-};
+    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/list/list.xml

@@ -3,11 +3,11 @@
     <tab v-model="ntab" :tabs="['greatlist', 'adaptation', 'list', 'async']" style="flex: 1; height: 0;">
         <!-- 默认 -->
         <layout v-if="ntab === 'greatlist'" direction="v" style="flex: 1; width: 0; padding: 10px;">
-            <greatlist v-model="select" :data="slist" :disabled="disabled" :must="must" :multi="multi" :selection="selection" :scroll="scroll" @select="onSelect" style="line-height: 1.3; flex: 1; height: 0;">
+            <greatlist v-model="select" :data="slist" :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :scroll="scroll" :sizes="sizes" @select="onSelect" style="line-height: 1.3; flex: 1; height: 0;">
                 <template v-slot="data">
                     <layout v-if="data.row.type === 0" align-v="center" gutter="5" style="flex: 1;">
                         <img :src="data.row.src" style="width: 32px; height: 32px;"></img>
-                        <block style="flex: 1;">
+                        <block>
                             <block>{{data.row.name}}</block>
                             <block style="opacity: .7;">{{data.row.path}}</block>
                         </block>
@@ -31,7 +31,7 @@
         </layout>
         <!-- 自适应 -->
         <layout v-else-if="ntab === 'adaptation'" direction="v" style="flex: 1; width: 0; padding: 10px;">
-            <greatlist class="adaptation" :data="adData" v-model="select" :disabled="disabled" :must="must" :multi="multi" :selection="selection" :scroll="scroll" same>
+            <greatlist :data="adData" v-model="select" :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :scroll="scroll">
                 <template v-slot="data">type: {{data.row.type}}, index: {{data.index}}. {{(data.index === 20) ? 'long test long test long test long test long test' : ''}}</template>
                 <template v-slot:itempop>
                     <menulist>
@@ -43,14 +43,14 @@
         <!-- list -->
         <layout v-else-if="ntab === 'list'" direction="v" gutter="10" style="flex: 1; width: 0; padding: 10px;">
             <label>Raw data:</label>
-            <view direction="v" style="border: solid 1px #b3b3b3; line-height: 1.5; height: 50px; padding: 5px;">{{listData}}</view>
+            <flow direction="v" style="border: solid 1px #b3b3b3; line-height: 1.5; height: 50px; padding: 5px;">{{listData}}</flow>
             <layout gutter="10" style="flex: 1; height: 0;">
-                <list v-model="select2" :disabled="disabled" :must="must" :multi="multi" :selection="selection" :scroll="scroll" :data="listData" @label="label2 = $event" style="flex: 2; width: 0;" :tree="tree" :async="async" :icon="icon" icon-default="../../../res/txt.svg" @load="onSelectLoad">
+                <list v-model="select2" :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :scroll="scroll" :data="listData" @label="label2 = $event" style="flex: 2; width: 0;" :tree="tree" :async="async" :icon="icon" icon-default="../../../res/txt.svg" @load="onSelectLoad">
                     <menulist>
                         <menulist-item alt="I" @click="showIndex2">Show select</menulist-item>
                     </menulist>
                 </list>
-                <list :disabled="disabled" :must="must" :multi="multi" :selection="selection" :scroll="scroll" :data="listData2" style="flex: 1; width: 0;"></list>
+                <list :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :scroll="scroll" :data="listData2" style="flex: 1; width: 0;"></list>
             </layout>
             <label class="tip">Right-click (computer) or press and hold (phone) to open the universal menu.</label>
         </layout>
@@ -58,15 +58,15 @@
         <layout v-else gutter="10" style="flex: 1; width: 0; padding: 10px;">
             <layout direction="v" gutter="10" style="flex: 1; width: 0;">
                 <label>greatlist: {{select3}}</label>
-                <greatlist v-model="select3" :disabled="disabled" :must="must" :multi="multi" :selection="selection" :scroll="scroll" :data="listData3" v-slot="data" style="flex: 1; height: 0;" same>
+                <greatlist v-model="select3" :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :scroll="scroll" :data="listData3" v-slot="data" style="flex: 1; height: 0;">
                     {{data.row.value ? data.row.value : data.row}}
                 </greatlist>
-                <button v-if="listData3.length === 0" @click="listData3 = [{'value': 'A', disabled: true}, 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'];select3 = 12" style="height: 30px;">Load data</button>
+                <button v-if="listData3.length === 0" @click="listData3 = [{'value': 'A', disabled: true}, 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'];select3 = [12]" style="height: 30px;">Load data</button>
             </layout>
             <layout direction="v" gutter="10" style="flex: 1; width: 0;">
                 <label>list: {{select4}}</label>
-                <list v-model="select4" :disabled="disabled" :must="must" :multi="multi" :selection="selection" :scroll="scroll" :data="listData4" style="flex: 1; height: 0;"></list>
-                <button v-if="listData4.length === 0" @click="listData4 = [{'value': 'A', disabled: true}, 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'];select4 = 'M'" style="height: 30px;">Load data</button>
+                <list v-model="select4" :disabled="disabled" :must="must" :multi="multi" :ctrl="ctrl" :selection="selection" :gesture="gesture ? ['top', 'bottom'] : []" @gesture="onGesture" :scroll="scroll" :data="listData4" style="flex: 1; height: 0;"></list>
+                <button v-if="listData4.length === 0" @click="listData4 = [{'value': 'A', disabled: true}, 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'];select4 = ['M']" style="height: 30px;">Load data</button>
             </layout>
         </layout>
     </tab>
@@ -84,8 +84,12 @@
     </layout>
     <layout class="ctr" gutter="10">
         <button @click="disabled = !disabled">{{disabled ? '' : '!'}}disabled</button>
-        <button @click="must = !must">{{must ? '' : '!'}}must</button>
         <button @click="multi = !multi">{{multi ? '' : '!'}}multi</button>
+        <button @click="ctrl = !ctrl">{{ctrl ? '' : '!'}}ctrl</button>
+    </layout>
+    <layout class="ctr" gutter="10">
+        <button @click="must = !must">{{must ? '' : '!'}}must</button>
         <button @click="selection = !selection">{{selection ? '' : '!'}}selection</button>
+        <button @click="gesture = !gesture" style="flex: 1; width: 0; height: 30px;">{{gesture ? '' : '!'}}gesture</button>
     </layout>
 </form>

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

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.methods = exports.data = void 0;
-exports.data = {
-    'lineCount': 2,
-    'style': false,
-    'direction': 'top',
-    'scroll': false
-};
-exports.methods = {
-    changeDirection: function () {
+const clickgo = require("clickgo");
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.lineCount = 2;
+        this.style = false;
+        this.direction = 'top';
+        this.scroll = false;
+    }
+    changeDirection() {
         switch (this.direction) {
             case 'top': {
                 this.direction = 'bottom';
@@ -27,4 +28,5 @@ exports.methods = {
             }
         }
     }
-};
+}
+exports.default = default_1;

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

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.data = void 0;
-exports.data = {
-    'radio': 'radio1',
-    'check1': true,
-    'check2': false
-};
+const clickgo = require("clickgo");
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.radio = 'radio1';
+        this.check1 = true;
+        this.check2 = false;
+    }
+}
+exports.default = default_1;

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

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mounted = exports.methods = exports.computed = exports.data = void 0;
 const clickgo = require("clickgo");
-exports.data = {
-    'path': '/index.html',
-    'file': '',
-    'files': {
-        '/index.html': `<html>
+class default_1 extends clickgo.form.AbstractForm {
+    constructor() {
+        super(...arguments);
+        this.npath = ['/index.html'];
+        this.file = '';
+        this.files = {
+            '/index.html': `<html>
     <head>
         <title>Monaco</title>
     </head>
@@ -14,7 +15,7 @@ exports.data = {
         Hello Monaco Editor!
     </body>
 </html>`,
-        '/index.ts': 'export' + ` let props = {
+            '/index.ts': 'export' + ` let props = {
 };\n\nexport` + ` let methods = {
     hehe: function(): string {
         return str() + ', en.';
@@ -23,47 +24,45 @@ exports.data = {
         return str2() + ', o.';
     }
 };\n`,
-        '/index.css': `.red {
+            '/index.css': `.red {
     color: red;
 }`,
-        '/index.scss': `.red {
+            '/index.scss': `.red {
     color: red;
     span {
         color: blue;
     }
 }`
-    },
-    'list': [
-        {
-            'label': 'HTML',
-            'value': '/index.html'
-        },
-        {
-            'label': 'TypeScript',
-            'value': '/index.ts'
-        },
-        {
-            'label': 'CSS',
-            'value': '/index.css'
-        },
-        {
-            'label': 'SCSS',
-            'value': '/index.scss'
-        }
-    ],
-    'theme': 'vs',
-    'themes': ['vs', 'vs-dark', 'hc-black'],
-    'language': undefined,
-    'globali': false,
-    'newi': false,
-    'readonly': false,
-    'disabled': false,
-    'size': '12px',
-    'family': false,
-    'initMonaco': false
-};
-exports.computed = {
-    'filesName': function () {
+        };
+        this.list = [
+            {
+                'label': 'HTML',
+                'value': '/index.html'
+            },
+            {
+                'label': 'TypeScript',
+                'value': '/index.ts'
+            },
+            {
+                'label': 'CSS',
+                'value': '/index.css'
+            },
+            {
+                'label': 'SCSS',
+                'value': '/index.scss'
+            }
+        ];
+        this.theme = ['vs'];
+        this.themes = ['vs', 'vs-dark', 'hc-black'];
+        this.language = '';
+        this.globali = false;
+        this.newi = false;
+        this.readonly = false;
+        this.disabled = false;
+        this.size = ['12px'];
+        this.family = false;
+    }
+    get filesName() {
         const names = [];
         for (const name in this.files) {
             if (!name.includes('.d.ts')) {
@@ -73,9 +72,7 @@ exports.computed = {
         }
         return names;
     }
-};
-exports.methods = {
-    globalInclude: function () {
+    globalInclude() {
         if (this.globali) {
             delete this.files['/global.d.ts'];
         }
@@ -83,8 +80,8 @@ exports.methods = {
             this.files['/global.d.ts'] = 'declare function str(): string;';
         }
         this.globali = !this.globali;
-    },
-    newInclude: function () {
+    }
+    newInclude() {
         if (this.newi) {
             delete this.files['/new.d.ts'];
         }
@@ -92,22 +89,15 @@ exports.methods = {
             this.files['/new.d.ts'] = 'declare function str2(): string;';
         }
         this.newi = !this.newi;
-    },
-    jump: function (input) {
+    }
+    jump(input) {
         clickgo.form.dialog({
             'content': `<block>Path: ${input.resource.path}</block><block>Line: ${input.options.selection.startLineNumber}</block>`,
             'direction': 'v'
         }).catch((e) => { throw e; });
-    },
-    pathLebel: function (label) {
-        this.language = label.toLowerCase();
     }
-};
-const mounted = function () {
-    clickgo.core.initModules('monaco').then(() => {
-        this.initMonaco = true;
-    }).catch(() => {
-        this.initMonaco = true;
-    });
-};
-exports.mounted = mounted;
+    pathLebel(label) {
+        this.language = label[0].toLowerCase();
+    }
+}
+exports.default = default_1;

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

@@ -1,9 +1,10 @@
-<form title="Monaco" width="500" height="450" padding="10" :loading="!initMonaco">
+<form title="Monaco" width="500" height="450" padding="10">
     <layout gutter="10" direction="v" style="flex: 1; width: 0;">
-        <label>File: {{path}}, Length: {{files[path].length}}</label>
+        <label>File: {{npath[0]}}, Length: {{files[npath[0]] ? files[npath[0]].length : ''}}</label>
+        <label>{{npath}}</label>
         <layout gutter="10" style="flex: 1; height: 0;">
             <text :modelValue="JSON.stringify(files, null, 4)" style="flex: 1; width: 0;" multi readonly wrap></text>
-            <monaco v-if="initMonaco" v-model="path" v-model:files="files" :readonly="readonly" :language="language" :disabled="disabled" :theme="theme" @jump="jump" style="flex: 1; wdith: 0;" :style="{'font-size': size, 'font-family': family ? 'Consolas, \'Courier New\', monospace' : undefined}"></monaco>
+            <monaco v-model="npath[0]" v-model:files="files" :readonly="readonly" :language="language" :disabled="disabled" :theme="theme[0]" @jump="jump" style="flex: 1; wdith: 0;" :style="{'font-size': size[0], 'font-family': family ? 'Consolas, \'Courier New\', monospace' : undefined}"></monaco>
         </layout>
         <layout gutter="10">
             <button @click="disabled = !disabled" style="height: 30px; flex: 1; width: 0;">{{disabled ? '' : '!'}}disabled</button>
@@ -11,7 +12,7 @@
             <button @click="family = !family" style="height: 30px; 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>
-            <select v-model="path" @label="pathLebel" :data="list" style="flex: 1; width: 0;"></select>
+            <select v-model="npath" @label="pathLebel" :data="list" style="flex: 1; width: 0;"></select>
         </layout>
         <label>Include files:</label>
         <layout gutter="10" style="flex: 1; height: 0;">
@@ -20,7 +21,7 @@
                 <button @click="globalInclude" style="height: 30px;">{{globali ? '' : '!'}}global</button>
                 <button @click="newInclude" style="height: 30px;">{{newi ? '' : '!'}}new</button>
             </layout>
-            <monaco v-if="(files[file] !== undefined) && initMonaco" v-model="files[file]" language="typescript" style="flex: 1; width: 0;"></monaco>
+            <monaco v-if="files[file] !== undefined" v-model="files[file]" language="typescript" style="flex: 1; width: 0;"></monaco>
             <layout v-else align-v="center" align-h="center" style="flex: 1; width: 0;">Please select file.</layout>
         </layout>
     </layout>