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.
Files changed (103) hide show
  1. package/dist/app/demo/app.js +0 -73
  2. package/dist/app/demo/config.json +109 -0
  3. package/dist/app/demo/form/control/button/button.js +12 -11
  4. package/dist/app/demo/form/control/button/button.xml +6 -6
  5. package/dist/app/demo/form/control/check/check.js +14 -10
  6. package/dist/app/demo/form/control/file/file.js +15 -13
  7. package/dist/app/demo/form/control/{overflow/overflow.css → flow/flow.css} +0 -0
  8. package/dist/app/demo/form/control/flow/flow.js +64 -0
  9. package/dist/app/demo/form/control/{overflow/overflow.scss → flow/flow.scss} +0 -0
  10. package/dist/app/demo/form/control/flow/flow.xml +101 -0
  11. package/dist/app/demo/form/control/form/form.js +1 -1
  12. package/dist/app/demo/form/control/form/form.xml +3 -3
  13. package/dist/app/demo/form/control/img/img.xml +2 -2
  14. package/dist/app/demo/form/control/list/list.js +95 -75
  15. package/dist/app/demo/form/control/list/list.xml +15 -11
  16. package/dist/app/demo/form/control/marquee/marquee.js +12 -10
  17. package/dist/app/demo/form/control/menu/menu.js +10 -6
  18. package/dist/app/demo/form/control/monaco/monaco.js +50 -60
  19. package/dist/app/demo/form/control/monaco/monaco.xml +6 -5
  20. package/dist/app/demo/form/control/property/property.js +131 -127
  21. package/dist/app/demo/form/control/radio/radio.js +9 -5
  22. package/dist/app/demo/form/control/scroll/scroll.js +16 -12
  23. package/dist/app/demo/form/control/scroll/scroll.xml +10 -10
  24. package/dist/app/demo/form/control/select/select.js +132 -71
  25. package/dist/app/demo/form/control/select/select.xml +69 -67
  26. package/dist/app/demo/form/control/tab/tab.js +21 -20
  27. package/dist/app/demo/form/control/tab/tab.xml +2 -2
  28. package/dist/app/demo/form/control/text/text.js +53 -45
  29. package/dist/app/demo/form/control/text/text.xml +3 -3
  30. package/dist/app/demo/form/control/{greatview/greatview.css → vflow/vflow.css} +0 -0
  31. package/dist/app/demo/form/control/vflow/vflow.js +79 -0
  32. package/dist/app/demo/form/control/{greatview/greatview.scss → vflow/vflow.scss} +0 -0
  33. package/dist/app/demo/form/control/{greatview/greatview.xml → vflow/vflow.xml} +25 -25
  34. package/dist/app/demo/form/event/form/form.js +58 -56
  35. package/dist/app/demo/form/event/form/form.xml +3 -3
  36. package/dist/app/demo/form/event/screen/screen.js +30 -28
  37. package/dist/app/demo/form/event/screen/screen.xml +2 -2
  38. package/dist/app/demo/form/event/task/task.js +31 -31
  39. package/dist/app/demo/form/event/task/task.xml +3 -3
  40. package/dist/app/demo/form/main.js +161 -5
  41. package/dist/app/demo/form/main.xml +36 -35
  42. package/dist/app/demo/form/method/aform/aform.xml +3 -2
  43. package/dist/app/demo/form/method/core/core.js +11 -8
  44. package/dist/app/demo/form/method/core/core.xml +2 -1
  45. package/dist/app/demo/form/method/dom/dom.js +91 -99
  46. package/dist/app/demo/form/method/dom/dom.xml +6 -7
  47. package/dist/app/demo/form/method/form/form.js +8 -8
  48. package/dist/app/demo/form/method/form/form.xml +4 -4
  49. package/dist/app/demo/form/method/fs/fs.js +34 -33
  50. package/dist/app/demo/form/method/fs/fs.xml +1 -1
  51. package/dist/app/demo/form/method/fs/text.js +12 -12
  52. package/dist/app/demo/form/method/native/native.js +50 -0
  53. package/dist/app/demo/form/method/native/native.xml +12 -0
  54. package/dist/app/demo/form/method/system/system.js +50 -0
  55. package/dist/app/demo/form/method/system/system.xml +11 -0
  56. package/dist/app/demo/form/method/task/task.js +59 -61
  57. package/dist/app/demo/form/method/task/task.xml +4 -6
  58. package/dist/app/demo/form/method/theme/theme.js +14 -14
  59. package/dist/app/demo/form/method/tool/tool.js +29 -28
  60. package/dist/app/demo/form/method/tool/tool.xml +3 -3
  61. package/dist/app/demo/form/method/zip/zip.js +46 -41
  62. package/dist/app/demo/form/method/zip/zip.xml +1 -1
  63. package/dist/app/task/app.js +0 -25
  64. package/dist/app/task/config.json +29 -0
  65. package/dist/app/task/form/bar/bar.js +1 -1
  66. package/dist/app/task/form/bar/bar.xml +1 -1
  67. package/dist/clickgo.js +1 -1
  68. package/dist/clickgo.ts +1 -1
  69. package/dist/control/common.cgc +0 -0
  70. package/dist/control/form.cgc +0 -0
  71. package/dist/control/monaco.cgc +0 -0
  72. package/dist/control/property.cgc +0 -0
  73. package/dist/control/task.cgc +0 -0
  74. package/dist/global.css +1 -1
  75. package/dist/index.js +3 -3
  76. package/dist/index.ts +3 -3
  77. package/dist/lib/control.js +70 -104
  78. package/dist/lib/control.ts +97 -123
  79. package/dist/lib/core.js +108 -252
  80. package/dist/lib/core.ts +122 -268
  81. package/dist/lib/dom.js +564 -483
  82. package/dist/lib/dom.ts +703 -546
  83. package/dist/lib/form.js +146 -138
  84. package/dist/lib/form.ts +108 -86
  85. package/dist/lib/fs.js +1 -1
  86. package/dist/lib/fs.ts +1 -1
  87. package/dist/lib/native.js +135 -8
  88. package/dist/lib/native.ts +175 -11
  89. package/dist/lib/task.js +294 -158
  90. package/dist/lib/task.ts +326 -172
  91. package/dist/lib/tool.js +48 -1
  92. package/dist/lib/tool.ts +61 -0
  93. package/dist/lib/zip.ts +2 -0
  94. package/dist/theme/familiar.cgt +0 -0
  95. package/package.json +1 -1
  96. package/types/index.d.ts +23 -24
  97. package/dist/app/demo/form/control/greatview/greatview.js +0 -92
  98. package/dist/app/demo/form/control/overflow/overflow.js +0 -70
  99. package/dist/app/demo/form/control/overflow/overflow.xml +0 -98
  100. package/dist/app/demo/form/control/view/view.css +0 -1
  101. package/dist/app/demo/form/control/view/view.js +0 -73
  102. package/dist/app/demo/form/control/view/view.scss +0 -18
  103. 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, '&lt;').replace(/>/g, '&gt;');
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);
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "clickgo",
3
- "version": "3.1.2-dev11",
3
+ "version": "3.1.3-dev12",
4
4
  "description": "Background interface, software interface, mobile phone APP interface operation library.",
5
5
  "keywords": [
6
6
  "deskrt",
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
- /** --- net 模式将包含 net 属性,否则是 app 解包模式 --- */
101
- 'net'?: {
102
- 'current': string;
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 文件列表,仅 net 模式有用 --- */
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 IBindGestureOptions {
192
- 'el'?: HTMLElement;
193
- 'rect'?: DOMRect;
194
- 'dirs'?: Array<('top' | 'right' | 'bottom' | 'left')>;
195
- handler: (dir: 'top' | 'right' | 'bottom' | 'left') => void;
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'?: (ox: number, oy: number, x: number, y: number, border: TDomBorder, dir: 'top' | 'right' | 'bottom' | 'left', e: MouseEvent | TouchEvent) => void;
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
- 'ro': any;
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
- }