clickgo 3.1.2-dev11 → 3.1.3-dev12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app/demo/app.js +0 -73
- package/dist/app/demo/config.json +109 -0
- package/dist/app/demo/form/control/button/button.js +12 -11
- package/dist/app/demo/form/control/button/button.xml +6 -6
- package/dist/app/demo/form/control/check/check.js +14 -10
- package/dist/app/demo/form/control/file/file.js +15 -13
- package/dist/app/demo/form/control/{overflow/overflow.css → flow/flow.css} +0 -0
- package/dist/app/demo/form/control/flow/flow.js +64 -0
- package/dist/app/demo/form/control/{overflow/overflow.scss → flow/flow.scss} +0 -0
- package/dist/app/demo/form/control/flow/flow.xml +101 -0
- package/dist/app/demo/form/control/form/form.js +1 -1
- package/dist/app/demo/form/control/form/form.xml +3 -3
- package/dist/app/demo/form/control/img/img.xml +2 -2
- package/dist/app/demo/form/control/list/list.js +95 -75
- package/dist/app/demo/form/control/list/list.xml +15 -11
- package/dist/app/demo/form/control/marquee/marquee.js +12 -10
- package/dist/app/demo/form/control/menu/menu.js +10 -6
- package/dist/app/demo/form/control/monaco/monaco.js +50 -60
- package/dist/app/demo/form/control/monaco/monaco.xml +6 -5
- package/dist/app/demo/form/control/property/property.js +131 -127
- package/dist/app/demo/form/control/radio/radio.js +9 -5
- package/dist/app/demo/form/control/scroll/scroll.js +16 -12
- package/dist/app/demo/form/control/scroll/scroll.xml +10 -10
- package/dist/app/demo/form/control/select/select.js +132 -71
- package/dist/app/demo/form/control/select/select.xml +69 -67
- package/dist/app/demo/form/control/tab/tab.js +21 -20
- package/dist/app/demo/form/control/tab/tab.xml +2 -2
- package/dist/app/demo/form/control/text/text.js +53 -45
- package/dist/app/demo/form/control/text/text.xml +3 -3
- package/dist/app/demo/form/control/{greatview/greatview.css → vflow/vflow.css} +0 -0
- package/dist/app/demo/form/control/vflow/vflow.js +79 -0
- package/dist/app/demo/form/control/{greatview/greatview.scss → vflow/vflow.scss} +0 -0
- package/dist/app/demo/form/control/{greatview/greatview.xml → vflow/vflow.xml} +25 -25
- package/dist/app/demo/form/event/form/form.js +58 -56
- package/dist/app/demo/form/event/form/form.xml +3 -3
- package/dist/app/demo/form/event/screen/screen.js +30 -28
- package/dist/app/demo/form/event/screen/screen.xml +2 -2
- package/dist/app/demo/form/event/task/task.js +31 -31
- package/dist/app/demo/form/event/task/task.xml +3 -3
- package/dist/app/demo/form/main.js +161 -5
- package/dist/app/demo/form/main.xml +36 -35
- package/dist/app/demo/form/method/aform/aform.xml +3 -2
- package/dist/app/demo/form/method/core/core.js +11 -8
- package/dist/app/demo/form/method/core/core.xml +2 -1
- package/dist/app/demo/form/method/dom/dom.js +91 -99
- package/dist/app/demo/form/method/dom/dom.xml +6 -7
- package/dist/app/demo/form/method/form/form.js +8 -8
- package/dist/app/demo/form/method/form/form.xml +4 -4
- package/dist/app/demo/form/method/fs/fs.js +34 -33
- package/dist/app/demo/form/method/fs/fs.xml +1 -1
- package/dist/app/demo/form/method/fs/text.js +12 -12
- package/dist/app/demo/form/method/native/native.js +50 -0
- package/dist/app/demo/form/method/native/native.xml +12 -0
- package/dist/app/demo/form/method/system/system.js +50 -0
- package/dist/app/demo/form/method/system/system.xml +11 -0
- package/dist/app/demo/form/method/task/task.js +59 -61
- package/dist/app/demo/form/method/task/task.xml +4 -6
- package/dist/app/demo/form/method/theme/theme.js +14 -14
- package/dist/app/demo/form/method/tool/tool.js +29 -28
- package/dist/app/demo/form/method/tool/tool.xml +3 -3
- package/dist/app/demo/form/method/zip/zip.js +46 -41
- package/dist/app/demo/form/method/zip/zip.xml +1 -1
- package/dist/app/task/app.js +0 -25
- package/dist/app/task/config.json +29 -0
- package/dist/app/task/form/bar/bar.js +1 -1
- package/dist/app/task/form/bar/bar.xml +1 -1
- package/dist/clickgo.js +1 -1
- package/dist/clickgo.ts +1 -1
- package/dist/control/common.cgc +0 -0
- package/dist/control/form.cgc +0 -0
- package/dist/control/monaco.cgc +0 -0
- package/dist/control/property.cgc +0 -0
- package/dist/control/task.cgc +0 -0
- package/dist/global.css +1 -1
- package/dist/index.js +3 -3
- package/dist/index.ts +3 -3
- package/dist/lib/control.js +70 -104
- package/dist/lib/control.ts +97 -123
- package/dist/lib/core.js +108 -252
- package/dist/lib/core.ts +122 -268
- package/dist/lib/dom.js +564 -483
- package/dist/lib/dom.ts +703 -546
- package/dist/lib/form.js +146 -138
- package/dist/lib/form.ts +108 -86
- package/dist/lib/fs.js +1 -1
- package/dist/lib/fs.ts +1 -1
- package/dist/lib/native.js +135 -8
- package/dist/lib/native.ts +175 -11
- package/dist/lib/task.js +294 -158
- package/dist/lib/task.ts +326 -172
- package/dist/lib/tool.js +48 -1
- package/dist/lib/tool.ts +61 -0
- package/dist/lib/zip.ts +2 -0
- package/dist/theme/familiar.cgt +0 -0
- package/package.json +1 -1
- package/types/index.d.ts +23 -24
- package/dist/app/demo/form/control/greatview/greatview.js +0 -92
- package/dist/app/demo/form/control/overflow/overflow.js +0 -70
- package/dist/app/demo/form/control/overflow/overflow.xml +0 -98
- package/dist/app/demo/form/control/view/view.css +0 -1
- package/dist/app/demo/form/control/view/view.js +0 -73
- package/dist/app/demo/form/control/view/view.scss +0 -18
- package/dist/app/demo/form/control/view/view.xml +0 -94
package/dist/lib/tool.js
CHANGED
|
@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
9
9
|
});
|
|
10
10
|
};
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
exports.execCommand = exports.blob2DataUrl = exports.blob2Text = exports.urlResolve = exports.parseUrl = exports.request = exports.escapeHTML = exports.getNumber = exports.getBoolean = exports.random = exports.RANDOM_LUNS = exports.RANDOM_V = exports.RANDOM_LUN = exports.RANDOM_LU = exports.RANDOM_LN = exports.RANDOM_UN = exports.RANDOM_L = exports.RANDOM_U = exports.RANDOM_N = exports.rand = exports.getMimeByPath = exports.stylePrepend = exports.eventsAttrWrap = exports.layoutClassPrepend = exports.layoutInsertAttr = exports.layoutAddTagClassAndReTagName = exports.styleUrl2DataUrl = exports.purify = exports.sleep = exports.clone = exports.blob2ArrayBuffer = exports.getClassPrototype = void 0;
|
|
12
|
+
exports.execCommand = exports.blob2DataUrl = exports.blob2Text = exports.urlResolve = exports.parseUrl = exports.request = exports.escapeHTML = exports.getArray = exports.getNumber = exports.getBoolean = exports.random = exports.RANDOM_LUNS = exports.RANDOM_V = exports.RANDOM_LUN = exports.RANDOM_LU = exports.RANDOM_LN = exports.RANDOM_UN = exports.RANDOM_L = exports.RANDOM_U = exports.RANDOM_N = exports.rand = exports.getMimeByPath = exports.stylePrepend = exports.teleportGlue = exports.eventsAttrWrap = exports.layoutClassPrepend = exports.layoutInsertAttr = exports.layoutAddTagClassAndReTagName = exports.styleUrl2DataUrl = exports.purify = exports.sleepFrame = exports.nextFrame = exports.sleep = exports.clone = exports.blob2ArrayBuffer = exports.getClassPrototype = void 0;
|
|
13
13
|
function getClassPrototype(obj, over = [], level = 0) {
|
|
14
14
|
if (level === 0) {
|
|
15
15
|
return getClassPrototype(Object.getPrototypeOf(obj), over, level + 1);
|
|
@@ -93,6 +93,25 @@ function sleep(ms = 0) {
|
|
|
93
93
|
});
|
|
94
94
|
}
|
|
95
95
|
exports.sleep = sleep;
|
|
96
|
+
function nextFrame() {
|
|
97
|
+
return new Promise(function (resolve) {
|
|
98
|
+
requestAnimationFrame(() => {
|
|
99
|
+
resolve();
|
|
100
|
+
});
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
exports.nextFrame = nextFrame;
|
|
104
|
+
function sleepFrame(count) {
|
|
105
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
106
|
+
if (count > 10) {
|
|
107
|
+
count = 10;
|
|
108
|
+
}
|
|
109
|
+
for (let i = 0; i < count; ++i) {
|
|
110
|
+
yield nextFrame();
|
|
111
|
+
}
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
exports.sleepFrame = sleepFrame;
|
|
96
115
|
function purify(text) {
|
|
97
116
|
text = '>' + text + '<';
|
|
98
117
|
text = text.replace(/<!--([\s\S]*?)-->/g, '').replace(/>([\s\S]*?)</g, function (t, t1) {
|
|
@@ -255,6 +274,19 @@ function eventsAttrWrap(layout) {
|
|
|
255
274
|
});
|
|
256
275
|
}
|
|
257
276
|
exports.eventsAttrWrap = eventsAttrWrap;
|
|
277
|
+
function teleportGlue(layout, formId) {
|
|
278
|
+
if (typeof formId !== 'string') {
|
|
279
|
+
formId = formId.toString();
|
|
280
|
+
}
|
|
281
|
+
const fid = formId;
|
|
282
|
+
return layout.replace(/<teleport([\s\S]+?)to="(.+?)"([\s\S]+?<[\w-]+)/g, (v, v1, v2, v3) => {
|
|
283
|
+
if (v2 !== 'system') {
|
|
284
|
+
return v;
|
|
285
|
+
}
|
|
286
|
+
return '<teleport' + v1 + 'to="#cg-pop-list > [data-form-id=\'' + fid + '\']"' + v3 + ' data-cg-pop';
|
|
287
|
+
});
|
|
288
|
+
}
|
|
289
|
+
exports.teleportGlue = teleportGlue;
|
|
258
290
|
function stylePrepend(style, prep = '') {
|
|
259
291
|
if (prep === '') {
|
|
260
292
|
prep = 'cg-scope' + Math.round(Math.random() * 1000000000000000).toString() + '_';
|
|
@@ -379,6 +411,21 @@ function getNumber(param) {
|
|
|
379
411
|
return parseFloat(param);
|
|
380
412
|
}
|
|
381
413
|
exports.getNumber = getNumber;
|
|
414
|
+
function getArray(param) {
|
|
415
|
+
if (typeof param !== 'string') {
|
|
416
|
+
return param;
|
|
417
|
+
}
|
|
418
|
+
let rtn = [];
|
|
419
|
+
if (param.startsWith('[')) {
|
|
420
|
+
rtn = JSON.parse(param);
|
|
421
|
+
}
|
|
422
|
+
else {
|
|
423
|
+
param = param.replace(/ /g, '');
|
|
424
|
+
rtn = param.split(',');
|
|
425
|
+
}
|
|
426
|
+
return rtn;
|
|
427
|
+
}
|
|
428
|
+
exports.getArray = getArray;
|
|
382
429
|
function escapeHTML(html) {
|
|
383
430
|
return html.replace(/</g, '<').replace(/>/g, '>');
|
|
384
431
|
}
|
package/dist/lib/tool.ts
CHANGED
|
@@ -126,6 +126,30 @@ export function sleep(ms: number = 0): Promise<boolean> {
|
|
|
126
126
|
});
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
+
/**
|
|
130
|
+
* --- 等待浏览器帧 ---
|
|
131
|
+
*/
|
|
132
|
+
export function nextFrame(): Promise<void> {
|
|
133
|
+
return new Promise(function(resolve) {
|
|
134
|
+
requestAnimationFrame(() => {
|
|
135
|
+
resolve();
|
|
136
|
+
});
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/**
|
|
141
|
+
* --- 等待浏览器帧 ---
|
|
142
|
+
* @param count 等待帧数最高 10 帧
|
|
143
|
+
*/
|
|
144
|
+
export async function sleepFrame(count: number): Promise<void> {
|
|
145
|
+
if (count > 10) {
|
|
146
|
+
count = 10;
|
|
147
|
+
}
|
|
148
|
+
for (let i = 0; i < count; ++i) {
|
|
149
|
+
await nextFrame();
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
129
153
|
/**
|
|
130
154
|
* --- 去除 html 的空白符、换行以及注释 ---
|
|
131
155
|
* @param text 要纯净的字符串
|
|
@@ -338,6 +362,24 @@ export function eventsAttrWrap(layout: string): string {
|
|
|
338
362
|
});
|
|
339
363
|
}
|
|
340
364
|
|
|
365
|
+
/**
|
|
366
|
+
* --- 对 layout 的 teleport 做转义处理为 vue 识别的内容 ---
|
|
367
|
+
* @param layout 要处理的窗体或控件的 layout
|
|
368
|
+
* @param formId 要加入的 formId
|
|
369
|
+
*/
|
|
370
|
+
export function teleportGlue(layout: string, formId: number | string): string {
|
|
371
|
+
if (typeof formId !== 'string') {
|
|
372
|
+
formId = formId.toString();
|
|
373
|
+
}
|
|
374
|
+
const fid = formId;
|
|
375
|
+
return layout.replace(/<teleport([\s\S]+?)to="(.+?)"([\s\S]+?<[\w-]+)/g, (v, v1, v2, v3): string => {
|
|
376
|
+
if (v2 !== 'system') {
|
|
377
|
+
return v;
|
|
378
|
+
}
|
|
379
|
+
return '<teleport' + v1 + 'to="#cg-pop-list > [data-form-id=\'' + fid + '\']"' + v3 + ' data-cg-pop';
|
|
380
|
+
});
|
|
381
|
+
}
|
|
382
|
+
|
|
341
383
|
/**
|
|
342
384
|
* --- 给 class 前部增加唯一标识符 ---
|
|
343
385
|
* @param style 样式内容
|
|
@@ -504,6 +546,25 @@ export function getNumber(param: string | number): number {
|
|
|
504
546
|
return parseFloat(param);
|
|
505
547
|
}
|
|
506
548
|
|
|
549
|
+
/**
|
|
550
|
+
* --- 根据参数获取最终的数组型 ---
|
|
551
|
+
* @param param 参数
|
|
552
|
+
*/
|
|
553
|
+
export function getArray(param: string | any[]): any[] {
|
|
554
|
+
if (typeof param !== 'string') {
|
|
555
|
+
return param;
|
|
556
|
+
}
|
|
557
|
+
let rtn: any[] = [];
|
|
558
|
+
if (param.startsWith('[')) {
|
|
559
|
+
rtn = JSON.parse(param);
|
|
560
|
+
}
|
|
561
|
+
else {
|
|
562
|
+
param = param.replace(/ /g, '');
|
|
563
|
+
rtn = param.split(',');
|
|
564
|
+
}
|
|
565
|
+
return rtn;
|
|
566
|
+
}
|
|
567
|
+
|
|
507
568
|
/**
|
|
508
569
|
* --- 转义 HTML ---
|
|
509
570
|
* @param html HTML 字符
|
package/dist/lib/zip.ts
CHANGED
|
@@ -142,6 +142,7 @@ export class Zip {
|
|
|
142
142
|
return pstats;
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
+
/** --- 读取目录,hasChildren: false, hasDir: true, pathAsKey: false --- */
|
|
145
146
|
public readDir(path?: string, opt?: { 'hasChildren'?: boolean; 'hasDir'?: boolean; 'pathAsKey'?: false; }): types.IZipItem[];
|
|
146
147
|
public readDir(path?: string, opt?: { 'hasChildren'?: boolean; 'hasDir'?: boolean; 'pathAsKey': true; }): Record<string, types.IZipItem>;
|
|
147
148
|
/**
|
|
@@ -278,6 +279,7 @@ export class Zip {
|
|
|
278
279
|
*/
|
|
279
280
|
private _refreshList(): void {
|
|
280
281
|
const list: Record<string, Record<string, types.IZipItem>> = {};
|
|
282
|
+
// eslint-disable-next-line @litert/rules/disable-for-each-method
|
|
281
283
|
this._zip.forEach(function(relativePath: string, item: jszip.JSZipObject) {
|
|
282
284
|
if (relativePath.startsWith('/')) {
|
|
283
285
|
relativePath = relativePath.slice(1);
|
package/dist/theme/familiar.cgt
CHANGED
|
Binary file
|
package/package.json
CHANGED
package/types/index.d.ts
CHANGED
|
@@ -35,9 +35,6 @@ export interface IControlConfig {
|
|
|
35
35
|
'layout': string;
|
|
36
36
|
/** --- 不带扩展名,系统会在末尾添加 .css --- */
|
|
37
37
|
'style': string;
|
|
38
|
-
|
|
39
|
-
/** --- 将要加载的文件 --- */
|
|
40
|
-
'files': string[];
|
|
41
38
|
}
|
|
42
39
|
|
|
43
40
|
/** --- 控件对象 --- */
|
|
@@ -97,17 +94,13 @@ export interface ICoreFetchAppOptions {
|
|
|
97
94
|
|
|
98
95
|
/** --- 应用包解包后对象 --- */
|
|
99
96
|
export interface IApp {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
'url': string;
|
|
104
|
-
'notify'?: number;
|
|
105
|
-
'progress'?: (loaded: number, total: number) => void | Promise<void>;
|
|
106
|
-
};
|
|
107
|
-
/** --- 应用图标,net 模式下可能为空 --- */
|
|
108
|
-
'icon': string;
|
|
97
|
+
'type': 'app';
|
|
98
|
+
/** --- 控件对象配置文件 --- */
|
|
99
|
+
'config': IAppConfig;
|
|
109
100
|
/** --- 所有已加载的文件内容 --- */
|
|
110
101
|
'files': Record<string, Blob | string>;
|
|
102
|
+
/** --- 应用图标,net 模式下可能为空 --- */
|
|
103
|
+
'icon': string;
|
|
111
104
|
}
|
|
112
105
|
|
|
113
106
|
/** --- 应用文件包 config --- */
|
|
@@ -134,7 +127,7 @@ export interface IAppConfig {
|
|
|
134
127
|
/** --- 图标路径,需包含扩展名 --- */
|
|
135
128
|
'icon'?: string;
|
|
136
129
|
|
|
137
|
-
/** --- 将要加载的非 js
|
|
130
|
+
/** --- 将要加载的非 js 文件列表,打包为 cga 模式下此配置可省略 --- */
|
|
138
131
|
'files'?: string[];
|
|
139
132
|
}
|
|
140
133
|
|
|
@@ -187,12 +180,20 @@ export interface IBindDownOptions {
|
|
|
187
180
|
'end'?: (e: MouseEvent | TouchEvent) => void;
|
|
188
181
|
}
|
|
189
182
|
|
|
190
|
-
/** ---
|
|
191
|
-
export interface
|
|
192
|
-
'
|
|
193
|
-
'
|
|
194
|
-
'
|
|
195
|
-
|
|
183
|
+
/** --- 绑定拖动选项 move 回调的回调参数 --- */
|
|
184
|
+
export interface IBindMoveMoveOptions {
|
|
185
|
+
'ox': number;
|
|
186
|
+
'oy': number;
|
|
187
|
+
'x': number;
|
|
188
|
+
'y': number;
|
|
189
|
+
'border': TDomBorder;
|
|
190
|
+
'inBorder': {
|
|
191
|
+
'top': boolean;
|
|
192
|
+
'right': boolean;
|
|
193
|
+
'bottom': boolean;
|
|
194
|
+
'left': boolean;
|
|
195
|
+
};
|
|
196
|
+
'dir': 'top' | 'right' | 'bottom' | 'left';
|
|
196
197
|
}
|
|
197
198
|
|
|
198
199
|
/** --- 绑定拖动选项 --- */
|
|
@@ -213,7 +214,7 @@ export interface IBindMoveOptions {
|
|
|
213
214
|
'object'?: HTMLElement | IVue;
|
|
214
215
|
'showRect'?: boolean;
|
|
215
216
|
'start'?: (x: number, y: number) => any;
|
|
216
|
-
'move'?: (
|
|
217
|
+
'move'?: (e: MouseEvent | TouchEvent, opt: IBindMoveMoveOptions) => void;
|
|
217
218
|
'up'?: (moveTimes: Array<{ 'time': number; 'ox': number; 'oy': number; }>, e: MouseEvent | TouchEvent) => void;
|
|
218
219
|
'end'?: (moveTimes: Array<{ 'time': number; 'ox': number; 'oy': number; }>, e: MouseEvent | TouchEvent) => void;
|
|
219
220
|
'borderIn'?: (x: number, y: number, border: TDomBorder, e: MouseEvent | TouchEvent) => void;
|
|
@@ -248,7 +249,7 @@ export interface IBindResizeOptions {
|
|
|
248
249
|
/** --- 监视大小中的元素 --- */
|
|
249
250
|
export interface IWatchSizeItem {
|
|
250
251
|
'el': HTMLElement;
|
|
251
|
-
'
|
|
252
|
+
'handler': () => void | Promise<void>;
|
|
252
253
|
'taskId'?: number;
|
|
253
254
|
}
|
|
254
255
|
|
|
@@ -300,6 +301,7 @@ export interface IFormCreateOptions {
|
|
|
300
301
|
/** --- 窗体的 code 参数 --- */
|
|
301
302
|
export interface IFormCreateCode {
|
|
302
303
|
'data'?: Record<string, any>;
|
|
304
|
+
'access'?: Record<string, any>;
|
|
303
305
|
'methods'?: Record<string, any>;
|
|
304
306
|
'computed'?: Record<string, {
|
|
305
307
|
'get'?: any;
|
|
@@ -353,7 +355,6 @@ export interface ITask {
|
|
|
353
355
|
'id': number;
|
|
354
356
|
'app': IApp;
|
|
355
357
|
'class': import('../dist/lib/core').AbstractApp;
|
|
356
|
-
'config': IAppConfig;
|
|
357
358
|
'customTheme': boolean;
|
|
358
359
|
'locale': {
|
|
359
360
|
'lang': string;
|
|
@@ -385,8 +386,6 @@ export interface ITask {
|
|
|
385
386
|
}>;
|
|
386
387
|
/** --- 任务中的 timer 列表 --- */
|
|
387
388
|
'timers': Record<string, number>;
|
|
388
|
-
/** --- 用于初始化 control 时 invoke 用 --- */
|
|
389
|
-
'invoke'?: Record<string, any>;
|
|
390
389
|
}
|
|
391
390
|
|
|
392
391
|
/** --- 系统任务信息 --- */
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.methods = exports.mounted = exports.computed = exports.data = void 0;
|
|
4
|
-
const clickgo = require("clickgo");
|
|
5
|
-
exports.data = {
|
|
6
|
-
'ntab': '',
|
|
7
|
-
'lineValue': 100,
|
|
8
|
-
'lineCount': 2,
|
|
9
|
-
'sLeft1': 0,
|
|
10
|
-
'sTop1': 0,
|
|
11
|
-
'l1': 0,
|
|
12
|
-
'c1': 0,
|
|
13
|
-
'sLeft2': 0,
|
|
14
|
-
'sTop2': 0,
|
|
15
|
-
'l2': 0,
|
|
16
|
-
'c2': 0,
|
|
17
|
-
'sLeft3': 0,
|
|
18
|
-
'sTop3': 0,
|
|
19
|
-
'l3': 0,
|
|
20
|
-
'c3': 0,
|
|
21
|
-
'sLeft4': 0,
|
|
22
|
-
'sTop4': 0,
|
|
23
|
-
'l4': 0,
|
|
24
|
-
'c4': 0,
|
|
25
|
-
'direction': false,
|
|
26
|
-
'dir5': 'v',
|
|
27
|
-
'sLeft5': 0,
|
|
28
|
-
'sTop5': 0,
|
|
29
|
-
'l5': 0,
|
|
30
|
-
'c5': 0,
|
|
31
|
-
'line5': 10,
|
|
32
|
-
'c6': 0,
|
|
33
|
-
'is6': [],
|
|
34
|
-
'gesture': false,
|
|
35
|
-
'style': false,
|
|
36
|
-
'selection': false,
|
|
37
|
-
'content': false,
|
|
38
|
-
'area': {}
|
|
39
|
-
};
|
|
40
|
-
exports.computed = {
|
|
41
|
-
'is': function () {
|
|
42
|
-
const is = [];
|
|
43
|
-
for (let i = 0; i < this.lineCount; ++i) {
|
|
44
|
-
if (i > 0 && i % 10 === 0) {
|
|
45
|
-
is[i] = 30;
|
|
46
|
-
continue;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
return is;
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
const mounted = function () {
|
|
53
|
-
this.is6[29] = 50;
|
|
54
|
-
this.is6[39] = 50;
|
|
55
|
-
};
|
|
56
|
-
exports.mounted = mounted;
|
|
57
|
-
exports.methods = {
|
|
58
|
-
scrollborder: function (e, dir) {
|
|
59
|
-
if (!this.gesture) {
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
let dirs = [];
|
|
63
|
-
switch (dir) {
|
|
64
|
-
case 'h': {
|
|
65
|
-
dirs = ['left', 'right'];
|
|
66
|
-
break;
|
|
67
|
-
}
|
|
68
|
-
default: {
|
|
69
|
-
dirs = ['top', 'bottom'];
|
|
70
|
-
break;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
clickgo.dom.bindGesture(e, {
|
|
74
|
-
'dirs': dirs,
|
|
75
|
-
'handler': (dir) => {
|
|
76
|
-
switch (dir) {
|
|
77
|
-
case 'left':
|
|
78
|
-
case 'top': {
|
|
79
|
-
this.lineCount -= 10;
|
|
80
|
-
if (this.lineCount < 0) {
|
|
81
|
-
this.lineCount = 0;
|
|
82
|
-
}
|
|
83
|
-
break;
|
|
84
|
-
}
|
|
85
|
-
default: {
|
|
86
|
-
this.lineCount += this.lineValue;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
};
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.methods = exports.data = void 0;
|
|
4
|
-
const clickgo = require("clickgo");
|
|
5
|
-
exports.data = {
|
|
6
|
-
'ntab': '',
|
|
7
|
-
'lineValue': 10,
|
|
8
|
-
'lineCount': 2,
|
|
9
|
-
'sLeft1': 0,
|
|
10
|
-
'sTop1': 0,
|
|
11
|
-
'l1': 0,
|
|
12
|
-
'c1': 0,
|
|
13
|
-
'sLeft2': 0,
|
|
14
|
-
'sTop2': 0,
|
|
15
|
-
'l2': 0,
|
|
16
|
-
'c2': 0,
|
|
17
|
-
'sLeft3': 0,
|
|
18
|
-
'sTop3': 0,
|
|
19
|
-
'l3': 0,
|
|
20
|
-
'c3': 0,
|
|
21
|
-
'sLeft4': 0,
|
|
22
|
-
'sTop4': 0,
|
|
23
|
-
'l4': 0,
|
|
24
|
-
'c4': 0,
|
|
25
|
-
'direction': false,
|
|
26
|
-
'dir5': 'v',
|
|
27
|
-
'sLeft5': 0,
|
|
28
|
-
'sTop5': 0,
|
|
29
|
-
'l5': 0,
|
|
30
|
-
'c5': 0,
|
|
31
|
-
'line5': 10,
|
|
32
|
-
'gesture': false,
|
|
33
|
-
'style': false
|
|
34
|
-
};
|
|
35
|
-
exports.methods = {
|
|
36
|
-
scrollborder: function (e, dir) {
|
|
37
|
-
if (!this.gesture) {
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
let dirs = [];
|
|
41
|
-
switch (dir) {
|
|
42
|
-
case 'h': {
|
|
43
|
-
dirs = ['left', 'right'];
|
|
44
|
-
break;
|
|
45
|
-
}
|
|
46
|
-
default: {
|
|
47
|
-
dirs = ['top', 'bottom'];
|
|
48
|
-
break;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
clickgo.dom.bindGesture(e, {
|
|
52
|
-
'dirs': dirs,
|
|
53
|
-
'handler': (dir) => {
|
|
54
|
-
switch (dir) {
|
|
55
|
-
case 'left':
|
|
56
|
-
case 'top': {
|
|
57
|
-
this.lineCount -= 10;
|
|
58
|
-
if (this.lineCount < 0) {
|
|
59
|
-
this.lineCount = 0;
|
|
60
|
-
}
|
|
61
|
-
break;
|
|
62
|
-
}
|
|
63
|
-
default: {
|
|
64
|
-
this.lineCount += this.lineValue;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
};
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
<form title="Overflow" width="450" height="450" min-width="300" min-height="400" padding="10">
|
|
2
|
-
<tab v-model="ntab" :tabs="['normal', 'adaptation', 'beyond', 'nest']" style="flex: 1; width: 0;">
|
|
3
|
-
<!-- 默认 -->
|
|
4
|
-
<layout v-if="ntab === 'normal'" gutter="10" direction="v" style="flex: 1; width: 0; padding: 10px;">
|
|
5
|
-
<!-- v -->
|
|
6
|
-
<layout gutter="10" style="flex: 1; height: 0;">
|
|
7
|
-
<overflow v-model:scroll-left="sLeft1" v-model:scroll-top="sTop1" direction="v" @resize="c1 = $event" @change="l1 = $event" @scrollborder="scrollborder($event, 'v')" :style="{'line-height': style ? '1.5' : undefined}" class="border" style="flex: 1;">
|
|
8
|
-
<block :style="{'padding': style ? '10px' : undefined}">
|
|
9
|
-
<block v-for="(line, index) of lineCount">
|
|
10
|
-
<button v-if="index > 0 && index % 10 === 0" style="height: 30px;">test</button>
|
|
11
|
-
<block v-else>Line {{line}}, index: {{index}}.</block>
|
|
12
|
-
</block>
|
|
13
|
-
</block>
|
|
14
|
-
</overflow>
|
|
15
|
-
<layout class="border" style="flex: 1;">
|
|
16
|
-
<overflow v-model:scroll-left="sLeft2" v-model:scroll-top="sTop2" direction="v" @resize="c2 = $event" @change="l2 = $event" @scrollborder="scrollborder($event, 'v')" :style="{'line-height': style ? '1.5' : undefined}" style="flex: 1;">
|
|
17
|
-
<block :style="{'padding': style ? '10px' : undefined}">
|
|
18
|
-
<block v-for="(line, index) of lineCount">
|
|
19
|
-
<block v-if="index > 0 && index % 10 === 0" class="custom">Custom</block>
|
|
20
|
-
<block v-else>Line {{line}}, index: {{index}}.</block>
|
|
21
|
-
</block>
|
|
22
|
-
</block>
|
|
23
|
-
</overflow>
|
|
24
|
-
<scroll :length="l2" :client="c2" v-model:scroll-offset="sTop2" style="width: 20px;"></scroll>
|
|
25
|
-
</layout>
|
|
26
|
-
</layout>
|
|
27
|
-
<label>Scroll Left: {{sLeft1}}, Scroll Top: {{sTop1}}, Length: {{l1}}, Client: {{c1}}.</label>
|
|
28
|
-
<label>Scroll Left: {{sLeft2}}, Scroll Top: {{sTop2}}, Length: {{l2}}, Client: {{c2}}.</label>
|
|
29
|
-
<!-- h -->
|
|
30
|
-
<overflow v-model:scroll-left="sLeft3" v-model:scroll-top="sTop3" @resize="c3 = $event" @change="l3 = $event" @scrollborder="scrollborder($event, 'h')" :style="{'line-height': style ? '1.5' : undefined}" class="border" style="flex: 1; height: 0;">
|
|
31
|
-
<layout :style="{'padding': style ? '10px' : undefined}" style="flex: 1;">
|
|
32
|
-
<layout v-for="(line, index) of lineCount" align-v="center" align-h="center" direction="v" class="rightborder" style="width: 80px;">
|
|
33
|
-
<label>Col {{line}}.</label>
|
|
34
|
-
<label>index: {{index}}.</label>
|
|
35
|
-
</layout>
|
|
36
|
-
</layout>
|
|
37
|
-
</overflow>
|
|
38
|
-
<label>Scroll Left: {{sLeft3}}, Scroll Top: {{sTop3}}, Length: {{l3}}, Client: {{c3}}.</label>
|
|
39
|
-
<!-- button list -->
|
|
40
|
-
<layout gutter="10">
|
|
41
|
-
<select v-model="lineValue" :data="[10, 50]" style="flex: 1; width: 0;"></select>
|
|
42
|
-
<button @click="lineCount += lineValue" style="height: 30px;padding: 0 10px;">Add lines</button>
|
|
43
|
-
<button @click="lineCount += lineValue;if(lineCount < 0) {lineCount = 0;}" style="height: 30px; padding: 0 10px;">Remove lines</button>
|
|
44
|
-
</layout>
|
|
45
|
-
<layout gutter="10">
|
|
46
|
-
<button @click="gesture = !gesture" style="flex: 1; width: 0; height: 30px;">{{gesture ? '' : '!'}}gesture</button>
|
|
47
|
-
<button @click="style = !style" style="flex: 1; width: 0; height: 30px;">{{style ? '' : '!'}}style</button>
|
|
48
|
-
</layout>
|
|
49
|
-
</layout>
|
|
50
|
-
<!-- 自适应 -->
|
|
51
|
-
<layout v-else-if="ntab === 'adaptation'" gutter="10" direction="v" style="flex: 1; width: 0; padding: 10px;">
|
|
52
|
-
<layout :direction="direction ? 'h' : 'v'" style="flex: 1; height: 0;">
|
|
53
|
-
<overflow class="border" v-model:scroll-left="sLeft4" v-model:scroll-top="sTop4" :direction="direction ? 'h' : 'v'" @resize="c4 = $event" @change="l4 = $event" @scrollborder="scrollborder($event, 'v')">
|
|
54
|
-
<layout v-for="(line, index) of lineCount" align-v="center" direction="v" :class="[direction && 'rightborder']">
|
|
55
|
-
<button v-if="index > 0 && index % 10 === 0" style="height: 30px;" :style="{'width': direction ? '30px' : undefined}">test</button>
|
|
56
|
-
<block v-else :style="{'width': direction ? '80px' : undefined, 'text-align': direction ? 'center' : undefined}">Line {{line}}</block>
|
|
57
|
-
</layout>
|
|
58
|
-
</overflow>
|
|
59
|
-
</layout>
|
|
60
|
-
<label>Scroll Left: {{sLeft4}}, Scroll Top: {{sTop4}}, Length: {{l4}}, Client: {{c4}}.</label>
|
|
61
|
-
<layout gutter="10">
|
|
62
|
-
<button @click="lineCount += 10" style="flex: 1; height: 30px;">Add 10 lines</button>
|
|
63
|
-
<button @click="lineCount -= 10;if(lineCount < 0) {lineCount = 0;}" style="flex: 1; height: 30px;">Remove 10 lines</button>
|
|
64
|
-
<button @click="direction = !direction" style="flex: 1; height: 30px;">Direction</button>
|
|
65
|
-
</layout>
|
|
66
|
-
</layout>
|
|
67
|
-
<!-- 内容超出 -->
|
|
68
|
-
<layout v-else-if="ntab === 'beyond'" gutter="10" direction="v" style="flex: 1; width: 0; padding: 10px;">
|
|
69
|
-
<layout gutter="10" align-v="center">
|
|
70
|
-
<button @click="dir5 = (dir5 === 'h' ? 'v' : 'h')" style="flex: 1; height: 30px;">Change direction</button>
|
|
71
|
-
<button @click="line5 = (line5 === 10 ? 1 : 10)" style="flex: 1; height: 30px;">Change data</button>
|
|
72
|
-
<label>Direction: {{dir5}}</label>
|
|
73
|
-
</layout>
|
|
74
|
-
<overflow v-model:scroll-left="sLeft5" v-model:scroll-top="sTop5" @resize="c5 = $event" @change="l5 = $event" :direction="dir5" class="border" style="flex: 1; height: 0; padding: 10px 0 0 10px;">
|
|
75
|
-
<layout v-for="i of line5" :direction="dir5 === 'h' ? 'v' : 'h'">
|
|
76
|
-
<layout v-for="j of 10" class="block">
|
|
77
|
-
<block>{{i}}-{{j}}</block>
|
|
78
|
-
</layout>
|
|
79
|
-
</layout>
|
|
80
|
-
</overflow>
|
|
81
|
-
<label>Scroll Left: {{sLeft5}}, Scroll Top: {{sTop5}}, Length: {{l5}}, Client: {{c5}}.</label>
|
|
82
|
-
</layout>
|
|
83
|
-
<!-- 嵌套 -->
|
|
84
|
-
<layout v-else style="flex: 1; width: 0; padding: 10px;">
|
|
85
|
-
<overflow class="border" direction="v" style="flex: 1; width: 0;">
|
|
86
|
-
<template v-for="i of 100">
|
|
87
|
-
<overflow v-if="i === 30" class="border" direction="v" style="height: 50px;">
|
|
88
|
-
<label v-for="k of 50">Line {{k}}</label>
|
|
89
|
-
</overflow>
|
|
90
|
-
<overflow v-else-if="i === 40" class="border" style="height: 50px;">
|
|
91
|
-
<label v-for="k of 50" class="rightborder" style="width: 80px;">Line {{k}}</label>
|
|
92
|
-
</overflow>
|
|
93
|
-
<label v-else>Line {{i}}</label>
|
|
94
|
-
</template>
|
|
95
|
-
</overflow>
|
|
96
|
-
</layout>
|
|
97
|
-
</tab>
|
|
98
|
-
</form>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.border{border:1px solid rgba(0,0,0,.1)}.custom{margin:auto;background:#07c160;width:60%;height:30px;color:#fff;text-align:center;line-height:30px}.rightborder{border-right:1px solid rgba(0,0,0,.1)}.block{width:200px;height:200px;padding:0 10px 10px 0}.block block{background:#07c160;color:#fff;display:flex;align-items:center;justify-content:center;flex:1}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.methods = exports.data = void 0;
|
|
4
|
-
const clickgo = require("clickgo");
|
|
5
|
-
exports.data = {
|
|
6
|
-
'ntab': '',
|
|
7
|
-
'lineValue': 10,
|
|
8
|
-
'lineCount': 2,
|
|
9
|
-
'sLeft1': 0,
|
|
10
|
-
'sTop1': 0,
|
|
11
|
-
'l1': 0,
|
|
12
|
-
'c1': 0,
|
|
13
|
-
'sLeft2': 0,
|
|
14
|
-
'sTop2': 0,
|
|
15
|
-
'l2': 0,
|
|
16
|
-
'c2': 0,
|
|
17
|
-
'sLeft3': 0,
|
|
18
|
-
'sTop3': 0,
|
|
19
|
-
'l3': 0,
|
|
20
|
-
'c3': 0,
|
|
21
|
-
'sLeft4': 0,
|
|
22
|
-
'sTop4': 0,
|
|
23
|
-
'l4': 0,
|
|
24
|
-
'c4': 0,
|
|
25
|
-
'direction': false,
|
|
26
|
-
'dir5': 'v',
|
|
27
|
-
'sLeft5': 0,
|
|
28
|
-
'sTop5': 0,
|
|
29
|
-
'l5': 0,
|
|
30
|
-
'c5': 0,
|
|
31
|
-
'line5': 10,
|
|
32
|
-
'c6': 0,
|
|
33
|
-
'gesture': false,
|
|
34
|
-
'style': false,
|
|
35
|
-
'selection': false,
|
|
36
|
-
'area': {}
|
|
37
|
-
};
|
|
38
|
-
exports.methods = {
|
|
39
|
-
scrollborder: function (e, dir) {
|
|
40
|
-
if (!this.gesture) {
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
let dirs = [];
|
|
44
|
-
switch (dir) {
|
|
45
|
-
case 'h': {
|
|
46
|
-
dirs = ['left', 'right'];
|
|
47
|
-
break;
|
|
48
|
-
}
|
|
49
|
-
default: {
|
|
50
|
-
dirs = ['top', 'bottom'];
|
|
51
|
-
break;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
clickgo.dom.bindGesture(e, {
|
|
55
|
-
'dirs': dirs,
|
|
56
|
-
'handler': (dir) => {
|
|
57
|
-
switch (dir) {
|
|
58
|
-
case 'left':
|
|
59
|
-
case 'top': {
|
|
60
|
-
this.lineCount -= 10;
|
|
61
|
-
if (this.lineCount < 0) {
|
|
62
|
-
this.lineCount = 0;
|
|
63
|
-
}
|
|
64
|
-
break;
|
|
65
|
-
}
|
|
66
|
-
default: {
|
|
67
|
-
this.lineCount += this.lineValue;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
.border {
|
|
2
|
-
border: 1px solid rgba(0, 0, 0, .1);
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.custom {
|
|
6
|
-
margin: auto; background: #07c160; width: 60%; height: 30px; color: #FFF; text-align: center; line-height: 30px;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.rightborder {
|
|
10
|
-
border-right: 1px solid rgba(0, 0, 0, .1);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.block {
|
|
14
|
-
width: 200px; height: 200px; padding: 0 10px 10px 0;
|
|
15
|
-
}
|
|
16
|
-
.block block {
|
|
17
|
-
background: #07c160; color: #FFF; display: flex; align-items: center; justify-content: center; flex: 1;
|
|
18
|
-
}
|