ts-glitter 13.4.6 → 13.4.7

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 (7) hide show
  1. package/lowcode/Entry.js +1 -1
  2. package/lowcode/Entry.ts +1 -1
  3. package/lowcode/glitterBundle/plugins/editor-elem.js +726 -592
  4. package/lowcode/glitterBundle/plugins/editor-elem.ts +1533 -1277
  5. package/lowcode/official_view_component/official/component.js +5 -0
  6. package/lowcode/official_view_component/official/component.ts +5 -0
  7. package/package.json +1 -1
package/lowcode/glitterBundle/plugins/editor-elem.ts CHANGED
@@ -1,9 +1,9 @@
1
- import { ShareDialog } from '../dialog/ShareDialog.js';
2
- import { GVC } from '../GVController.js';
1
+ import {ShareDialog} from '../dialog/ShareDialog.js';
2
+ import {GVC} from '../GVController.js';
3
3
  //@ts-ignore
4
4
  import autosize from './autosize.js';
5
- import { BaseApi } from '../api/base.js';
6
- import { NormalPageEditor } from '../../editor/normal-page-editor.js';
5
+ import {BaseApi} from '../api/base.js';
6
+ import {NormalPageEditor} from '../../editor/normal-page-editor.js';
7
7
 
8
8
  const html = String.raw;
9
9
 
@@ -26,16 +26,16 @@ export class EditorElem {
26
26
  onchange="${obj.gvc.event((e: any) => {
27
27
  obj.callback(e.value);
28
28
  })}"
29
- />
30
- <div class="" style="width: 1px;height: 25px;background-color: white;"></div>
31
- <i
29
+ />
30
+ <div class="" style="width: 1px;height: 25px;background-color: white;"></div>
31
+ <i
32
32
  class="fa-regular fa-eye text-black ms-2"
33
33
  style="cursor: pointer;"
34
34
  onclick="${obj.gvc.event(() => {
35
35
  glitter.openDiaLog(new URL('../../dialog/image-preview.js', import.meta.url).href, 'preview', obj.def);
36
36
  })}"
37
- ></i>
38
- <i
37
+ ></i>
38
+ <i
39
39
  class="fa-regular fa-upload ms-2 text-black"
40
40
  style="cursor: pointer;"
41
41
  onclick="${obj.gvc.event(() => {
@@ -45,12 +45,12 @@ export class EditorElem {
45
45
  callback(data: any) {
46
46
  const saasConfig: { config: any; api: any } = (window as any).saasConfig;
47
47
  const dialog = new ShareDialog(obj.gvc.glitter);
48
- dialog.dataLoading({ visible: true });
48
+ dialog.dataLoading({visible: true});
49
49
  const file = data[0].file;
50
50
  saasConfig.api.uploadFile(file.name).then((data: any) => {
51
- dialog.dataLoading({ visible: false });
51
+ dialog.dataLoading({visible: false});
52
52
  const data1 = data.response;
53
- dialog.dataLoading({ visible: true });
53
+ dialog.dataLoading({visible: true});
54
54
  BaseApi.create({
55
55
  url: data1.url,
56
56
  type: 'put',
@@ -60,20 +60,20 @@ export class EditorElem {
60
60
  },
61
61
  }).then((res) => {
62
62
  if (res.result) {
63
- dialog.dataLoading({ visible: false });
63
+ dialog.dataLoading({visible: false});
64
64
  obj.callback(data1.fullUrl);
65
65
  obj.def = data1.fullUrl;
66
66
  obj.gvc.notifyDataChange(id);
67
67
  } else {
68
- dialog.dataLoading({ visible: false });
69
- dialog.errorMessage({ text: '上傳失敗' });
68
+ dialog.dataLoading({visible: false});
69
+ dialog.errorMessage({text: '上傳失敗'});
70
70
  }
71
71
  });
72
72
  });
73
73
  },
74
74
  });
75
75
  })}"
76
- ></i>`;
76
+ ></i>`;
77
77
  },
78
78
  divCreate: {
79
79
  class: `d-flex align-items-center mb-2`,
@@ -82,7 +82,12 @@ export class EditorElem {
82
82
  })} `;
83
83
  }
84
84
 
85
- public static uploadImageContainer(obj: { title: string; gvc: GVC; def: string; callback: (data: string) => void }) {
85
+ public static uploadImageContainer(obj: {
86
+ title: string;
87
+ gvc: GVC;
88
+ def: string;
89
+ callback: (data: string) => void
90
+ }) {
86
91
  const gvc = obj.gvc;
87
92
  const glitter = gvc.glitter;
88
93
 
@@ -93,74 +98,76 @@ export class EditorElem {
93
98
  bind: id,
94
99
  view: () => {
95
100
  if (obj.def && obj.def.length > 0) {
96
- return html` <div class="uimg-container">
97
- <img class="uimg-image" src="${obj.def}" />
98
- <div
99
- class="uimg-shadow"
100
- onmouseover="${gvc.event((e) => {
101
- e.style.opacity = '1';
102
- })}"
103
- onmouseout="${gvc.event((e) => {
104
- e.style.opacity = '0';
105
- })}"
106
- >
107
- <i
108
- class="fa-regular fa-trash mx-auto fs-1 uimg-trash"
101
+ return html`
102
+ <div class="uimg-container">
103
+ <img class="uimg-image" src="${obj.def}"/>
104
+ <div
105
+ class="uimg-shadow"
106
+ onmouseover="${gvc.event((e) => {
107
+ e.style.opacity = '1';
108
+ })}"
109
+ onmouseout="${gvc.event((e) => {
110
+ e.style.opacity = '0';
111
+ })}"
112
+ >
113
+ <i
114
+ class="fa-regular fa-trash mx-auto fs-1 uimg-trash"
115
+ onclick="${gvc.event(() => {
116
+ obj.def = '';
117
+ obj.callback(obj.def);
118
+ gvc.notifyDataChange(id);
119
+ })}"
120
+ ></i>
121
+ </div>
122
+ </div>`;
123
+ }
124
+ return html`
125
+ <div class="uimg-container">
126
+ <button
127
+ class="btn btn-gray"
128
+ type="button"
109
129
  onclick="${gvc.event(() => {
110
- obj.def = '';
111
- obj.callback(obj.def);
112
- gvc.notifyDataChange(id);
130
+ glitter.ut.chooseMediaCallback({
131
+ single: true,
132
+ accept: 'json,image/*',
133
+ callback(data: any) {
134
+ const saasConfig: {
135
+ config: any;
136
+ api: any;
137
+ } = (window as any).saasConfig;
138
+ const dialog = new ShareDialog(gvc.glitter);
139
+ dialog.dataLoading({visible: true});
140
+ const file = data[0].file;
141
+ saasConfig.api.uploadFile(file.name).then((data: any) => {
142
+ dialog.dataLoading({visible: false});
143
+ const data1 = data.response;
144
+ dialog.dataLoading({visible: true});
145
+ BaseApi.create({
146
+ url: data1.url,
147
+ type: 'put',
148
+ data: file,
149
+ headers: {
150
+ 'Content-Type': data1.type,
151
+ },
152
+ }).then((res) => {
153
+ if (res.result) {
154
+ dialog.dataLoading({visible: false});
155
+ obj.callback(data1.fullUrl);
156
+ obj.def = data1.fullUrl;
157
+ gvc.notifyDataChange(id);
158
+ } else {
159
+ dialog.dataLoading({visible: false});
160
+ dialog.errorMessage({text: '上傳失敗'});
161
+ }
162
+ });
163
+ });
164
+ },
165
+ });
113
166
  })}"
114
- ></i>
115
- </div>
167
+ >
168
+ <span class="tx_700">新增圖片</span>
169
+ </button>
116
170
  </div>`;
117
- }
118
- return html` <div class="uimg-container">
119
- <button
120
- class="btn btn-gray"
121
- type="button"
122
- onclick="${gvc.event(() => {
123
- glitter.ut.chooseMediaCallback({
124
- single: true,
125
- accept: 'json,image/*',
126
- callback(data: any) {
127
- const saasConfig: {
128
- config: any;
129
- api: any;
130
- } = (window as any).saasConfig;
131
- const dialog = new ShareDialog(gvc.glitter);
132
- dialog.dataLoading({ visible: true });
133
- const file = data[0].file;
134
- saasConfig.api.uploadFile(file.name).then((data: any) => {
135
- dialog.dataLoading({ visible: false });
136
- const data1 = data.response;
137
- dialog.dataLoading({ visible: true });
138
- BaseApi.create({
139
- url: data1.url,
140
- type: 'put',
141
- data: file,
142
- headers: {
143
- 'Content-Type': data1.type,
144
- },
145
- }).then((res) => {
146
- if (res.result) {
147
- dialog.dataLoading({ visible: false });
148
- obj.callback(data1.fullUrl);
149
- obj.def = data1.fullUrl;
150
- gvc.notifyDataChange(id);
151
- } else {
152
- dialog.dataLoading({ visible: false });
153
- dialog.errorMessage({ text: '上傳失敗' });
154
- }
155
- });
156
- });
157
- },
158
- });
159
- })}"
160
- >
161
- <span class="tx_700">新增圖片</span>
162
- </button>
163
- </div>`;
164
171
  },
165
172
  };
166
173
  })}`;
@@ -174,12 +181,12 @@ export class EditorElem {
174
181
  callback(data: any) {
175
182
  const saasConfig: { config: any; api: any } = (window as any).saasConfig;
176
183
  const dialog = new ShareDialog(glitter);
177
- dialog.dataLoading({ visible: true });
184
+ dialog.dataLoading({visible: true});
178
185
  const file = data[0].file;
179
186
  saasConfig.api.uploadFile(file.name).then((data: any) => {
180
- dialog.dataLoading({ visible: false });
187
+ dialog.dataLoading({visible: false});
181
188
  const data1 = data.response;
182
- dialog.dataLoading({ visible: true });
189
+ dialog.dataLoading({visible: true});
183
190
  BaseApi.create({
184
191
  url: data1.url,
185
192
  type: 'put',
@@ -189,11 +196,11 @@ export class EditorElem {
189
196
  },
190
197
  }).then((res) => {
191
198
  if (res.result) {
192
- dialog.dataLoading({ visible: false });
199
+ dialog.dataLoading({visible: false});
193
200
  callback(data1.fullUrl);
194
201
  } else {
195
- dialog.dataLoading({ visible: false });
196
- dialog.errorMessage({ text: '上傳失敗' });
202
+ dialog.dataLoading({visible: false});
203
+ dialog.errorMessage({text: '上傳失敗'});
197
204
  }
198
205
  });
199
206
  });
@@ -215,8 +222,10 @@ export class EditorElem {
215
222
  src: `https://raw.githack.com/SortableJS/Sortable/master/Sortable.js`,
216
223
  },
217
224
  ],
218
- () => {},
219
- () => {}
225
+ () => {
226
+ },
227
+ () => {
228
+ }
220
229
  );
221
230
  const id = obj.gvc.glitter.getUUID();
222
231
  const bid = obj.gvc.glitter.getUUID();
@@ -224,44 +233,48 @@ export class EditorElem {
224
233
  bind: id,
225
234
  view: () => {
226
235
  if (data.length === 0) {
227
- return html` <div class="w-100 d-flex align-items-center justify-content-center fw-bold fs-6 alert m-0 bgf6">尚未新增任何檔案...</div>`;
236
+ return html`
237
+ <div class="w-100 d-flex align-items-center justify-content-center fw-bold fs-6 alert m-0 bgf6">
238
+ 尚未新增任何檔案...
239
+ </div>`;
228
240
  }
229
241
  return html`
230
242
  <div class="" style="gap:10px; ">
231
243
  <ul id="${bid}" class="d-flex " style="gap:10px;overflow-x: auto;">
232
244
  ${data
233
- .map((dd, index) => {
234
- return html` <li
235
- class="d-flex align-items-center justify-content-center rounded-3 shadow"
236
- index="${index}"
237
- style="min-width:135px;135px;height:135px;cursor:pointer;background: 50%/cover url('${dd}');"
238
- >
239
- <div
240
- class="w-100 h-100 d-flex align-items-center justify-content-center rounded-3 p-hover-image"
241
- style="opacity:0;background: rgba(0,0,0,0.5);gap:20px;color:white;font-size:22px;"
242
- >
243
- <i
244
- class="fa-regular fa-eye"
245
- onclick="${obj.gvc.event(() => {
246
- (window.parent as any).glitter.openDiaLog(new URL('../../dialog/image-preview.js', import.meta.url).href, 'preview', dd);
247
- })}"
248
- ></i>
249
- <i
250
- class="fa-regular fa-trash"
251
- onclick="${obj.gvc.event(() => {
252
- data.splice(index, 1);
253
- obj.gvc.notifyDataChange(id);
254
- })}"
255
- ></i>
256
- </div>
257
- </li>`;
258
- })
259
- .join('')}
245
+ .map((dd, index) => {
246
+ return html`
247
+ <li
248
+ class="d-flex align-items-center justify-content-center rounded-3 shadow"
249
+ index="${index}"
250
+ style="min-width:135px;135px;height:135px;cursor:pointer;background: 50%/cover url('${dd}');"
251
+ >
252
+ <div
253
+ class="w-100 h-100 d-flex align-items-center justify-content-center rounded-3 p-hover-image"
254
+ style="opacity:0;background: rgba(0,0,0,0.5);gap:20px;color:white;font-size:22px;"
255
+ >
256
+ <i
257
+ class="fa-regular fa-eye"
258
+ onclick="${obj.gvc.event(() => {
259
+ (window.parent as any).glitter.openDiaLog(new URL('../../dialog/image-preview.js', import.meta.url).href, 'preview', dd);
260
+ })}"
261
+ ></i>
262
+ <i
263
+ class="fa-regular fa-trash"
264
+ onclick="${obj.gvc.event(() => {
265
+ data.splice(index, 1);
266
+ obj.gvc.notifyDataChange(id);
267
+ })}"
268
+ ></i>
269
+ </div>
270
+ </li>`;
271
+ })
272
+ .join('')}
260
273
  </ul>
261
274
  </div>
262
275
  `;
263
276
  },
264
- divCreate: { class: `w-100`, style: `overflow-x: auto;display: inline-block;white-space: nowrap; ` },
277
+ divCreate: {class: `w-100`, style: `overflow-x: auto;display: inline-block;white-space: nowrap; `},
265
278
  onCreate: () => {
266
279
  const interval = setInterval(() => {
267
280
  if ((window as any).Sortable) {
@@ -293,7 +306,8 @@ export class EditorElem {
293
306
  startIndex = evt.oldIndex;
294
307
  },
295
308
  });
296
- } catch (e) {}
309
+ } catch (e) {
310
+ }
297
311
  clearInterval(interval);
298
312
  }
299
313
  }, 100);
@@ -316,8 +330,10 @@ export class EditorElem {
316
330
  src: `https://raw.githack.com/SortableJS/Sortable/master/Sortable.js`,
317
331
  },
318
332
  ],
319
- () => {},
320
- () => {}
333
+ () => {
334
+ },
335
+ () => {
336
+ }
321
337
  );
322
338
  const id = obj.gvc.glitter.getUUID();
323
339
  const bid = obj.gvc.glitter.getUUID();
@@ -329,44 +345,49 @@ export class EditorElem {
329
345
  return '';
330
346
  }
331
347
  if (data.length === 0) {
332
- return html` <div class="w-100 d-flex align-items-center justify-content-center fw-bold fs-6 alert m-0 bgf6">尚未新增任何檔案...</div>`;
348
+ return html`
349
+ <div class="w-100 d-flex align-items-center justify-content-center fw-bold fs-6 alert m-0 bgf6">
350
+ 尚未新增任何檔案...
351
+ </div>`;
333
352
  }
334
353
  return html`
335
354
  <ul id="${bid}" class="d-flex" style="gap:10px;overflow-x: auto;max-width: 700px;">
336
355
  ${data
337
- .map((dd, index) => {
338
- return html` <li
339
- class="d-flex align-items-center justify-content-center rounded-3 shadow"
340
- index="${index}"
341
- style="min-width:135px;135px;height:135px;cursor:pointer;background: 50%/cover url('${dd}');"
342
- >
343
- <div
344
- class="w-100 h-100 d-flex align-items-center justify-content-center rounded-3 p-hover-image position-relative"
345
- style="opacity:0;background: rgba(0,0,0,0.5);gap:20px;color:white;font-size:22px;"
346
- >
347
- <i class="fa-solid fa-grip-dots dragItem position-absolute" style="top:5px;left:5px;"></i>
348
- <i
349
- class="fa-regular fa-eye"
350
- onclick="${obj.gvc.event(() => {
351
- (window.parent as any).glitter.openDiaLog(new URL('../../dialog/image-preview.js', import.meta.url).href, 'preview', dd);
352
- // obj.gvc.glitter.openDiaLog(new URL('../../dialog/image-preview.js', import.meta.url).href, 'preview', dd);
353
- })}"
354
- ></i>
355
- <i
356
- class="fa-regular fa-trash"
357
- onclick="${obj.gvc.event(() => {
358
- data.splice(index, 1);
359
- obj.gvc.notifyDataChange(id);
360
- })}"
361
- ></i>
362
- </div>
363
- </li>`;
364
- })
365
- .join('')}
356
+ .map((dd, index) => {
357
+ return html`
358
+ <li
359
+ class="d-flex align-items-center justify-content-center rounded-3 shadow"
360
+ index="${index}"
361
+ style="min-width:135px;135px;height:135px;cursor:pointer;background: 50%/cover url('${dd}');"
362
+ >
363
+ <div
364
+ class="w-100 h-100 d-flex align-items-center justify-content-center rounded-3 p-hover-image position-relative"
365
+ style="opacity:0;background: rgba(0,0,0,0.5);gap:20px;color:white;font-size:22px;"
366
+ >
367
+ <i class="fa-solid fa-grip-dots dragItem position-absolute"
368
+ style="top:5px;left:5px;"></i>
369
+ <i
370
+ class="fa-regular fa-eye"
371
+ onclick="${obj.gvc.event(() => {
372
+ (window.parent as any).glitter.openDiaLog(new URL('../../dialog/image-preview.js', import.meta.url).href, 'preview', dd);
373
+ // obj.gvc.glitter.openDiaLog(new URL('../../dialog/image-preview.js', import.meta.url).href, 'preview', dd);
374
+ })}"
375
+ ></i>
376
+ <i
377
+ class="fa-regular fa-trash"
378
+ onclick="${obj.gvc.event(() => {
379
+ data.splice(index, 1);
380
+ obj.gvc.notifyDataChange(id);
381
+ })}"
382
+ ></i>
383
+ </div>
384
+ </li>`;
385
+ })
386
+ .join('')}
366
387
  </ul>
367
388
  `;
368
389
  },
369
- divCreate: { class: `w-100`, style: `gap:10px;overflow-x: auto;display: flex;white-space: nowrap; ` },
390
+ divCreate: {class: `w-100`, style: `gap:10px;overflow-x: auto;display: flex;white-space: nowrap; `},
370
391
  onCreate: () => {
371
392
  if (loading) {
372
393
  let n = 0;
@@ -422,7 +443,8 @@ export class EditorElem {
422
443
  startIndex = evt.oldIndex;
423
444
  },
424
445
  });
425
- } catch (e) {}
446
+ } catch (e) {
447
+ }
426
448
  clearInterval(interval);
427
449
  }
428
450
  }, 100);
@@ -431,7 +453,14 @@ export class EditorElem {
431
453
  });
432
454
  }
433
455
 
434
- public static editeText(obj: { gvc: GVC; title: string; default: string; placeHolder: string; callback: (text: string) => void; readonly?: boolean }) {
456
+ public static editeText(obj: {
457
+ gvc: GVC;
458
+ title: string;
459
+ default: string;
460
+ placeHolder: string;
461
+ callback: (text: string) => void;
462
+ readonly?: boolean
463
+ }) {
435
464
  obj.title = obj.title ?? '';
436
465
  const id = obj.gvc.glitter.getUUID();
437
466
  return html`${EditorElem.h3(obj.title)}
@@ -445,7 +474,7 @@ export class EditorElem {
445
474
  style: `max-height:400px!important;min-height:100px;`,
446
475
  class: `form-control`,
447
476
  option: [
448
- { key: 'placeholder', value: obj.placeHolder },
477
+ {key: 'placeholder', value: obj.placeHolder},
449
478
  {
450
479
  key: 'onchange',
451
480
  value: obj.gvc.event((e) => {
@@ -461,7 +490,14 @@ export class EditorElem {
461
490
  })}`;
462
491
  }
463
492
 
464
- public static styleEditor(obj: { gvc: GVC; height: number; initial: string; title: string; dontRefactor?: boolean; callback: (data: string) => void }) {
493
+ public static styleEditor(obj: {
494
+ gvc: GVC;
495
+ height: number;
496
+ initial: string;
497
+ title: string;
498
+ dontRefactor?: boolean;
499
+ callback: (data: string) => void
500
+ }) {
465
501
  let idlist: any = [];
466
502
 
467
503
  function getComponent(gvc: GVC, height: number) {
@@ -513,13 +549,14 @@ export class EditorElem {
513
549
  return {
514
550
  bind: id,
515
551
  view: () => {
516
- return html` <iframe
517
- id="${frameID}"
518
- class="w-100 h-100 border rounded-3"
519
- src="${domain}/browser-amd-editor/component.html?height=${height}&link=${location.origin}&callbackID=${id}"
520
- ></iframe>`;
552
+ return html`
553
+ <iframe
554
+ id="${frameID}"
555
+ class="w-100 h-100 border rounded-3"
556
+ src="${domain}/browser-amd-editor/component.html?height=${height}&link=${location.origin}&callbackID=${id}"
557
+ ></iframe>`;
521
558
  },
522
- divCreate: { class: `w-100 `, style: `height:${height}px;` },
559
+ divCreate: {class: `w-100 `, style: `height:${height}px;`},
523
560
  onDestroy: () => {
524
561
  gvc.glitter.share.postMessageCallback = gvc.glitter.share.postMessageCallback.filter((dd: any) => {
525
562
  return dd.id === frameID;
@@ -543,19 +580,19 @@ export class EditorElem {
543
580
  <div class="d-flex">
544
581
  ${obj.title ? EditorElem.h3(obj.title) : ''}
545
582
  <div
546
- class="d-flex align-items-center justify-content-center"
547
- style="height:36px;width:36px;border-radius:10px;cursor:pointer;color:#151515;"
548
- onclick="${obj.gvc.event(() => {
549
- EditorElem.openEditorDialog(
550
- obj.gvc,
551
- (gvc: GVC) => {
552
- return getComponent(gvc, window.innerHeight - 100);
553
- },
554
- () => {
555
- obj.gvc.notifyDataChange(idlist);
556
- }
557
- );
558
- })}"
583
+ class="d-flex align-items-center justify-content-center"
584
+ style="height:36px;width:36px;border-radius:10px;cursor:pointer;color:#151515;"
585
+ onclick="${obj.gvc.event(() => {
586
+ EditorElem.openEditorDialog(
587
+ obj.gvc,
588
+ (gvc: GVC) => {
589
+ return getComponent(gvc, window.innerHeight - 100);
590
+ },
591
+ () => {
592
+ obj.gvc.notifyDataChange(idlist);
593
+ }
594
+ );
595
+ })}"
559
596
  >
560
597
  <i class="fa-solid fa-expand"></i>
561
598
  </div>
@@ -564,7 +601,14 @@ export class EditorElem {
564
601
  );
565
602
  }
566
603
 
567
- public static htmlEditor(obj: { gvc: GVC; height: number; initial: string; title: string; dontRefactor?: boolean; callback: (data: string) => void }) {
604
+ public static htmlEditor(obj: {
605
+ gvc: GVC;
606
+ height: number;
607
+ initial: string;
608
+ title: string;
609
+ dontRefactor?: boolean;
610
+ callback: (data: string) => void
611
+ }) {
568
612
  let idlist: any = [];
569
613
 
570
614
  function getComponent(gvc: GVC, height: number) {
@@ -595,13 +639,13 @@ export class EditorElem {
595
639
  view: () => {
596
640
  return html`
597
641
  <iframe
598
- id="${frameID}"
599
- class="w-100 h-100 border rounded-3"
600
- src="${domain}/browser-amd-editor/component.html?height=${height}&link=${location.origin}&callbackID=${id}"
642
+ id="${frameID}"
643
+ class="w-100 h-100 border rounded-3"
644
+ src="${domain}/browser-amd-editor/component.html?height=${height}&link=${location.origin}&callbackID=${id}"
601
645
  ></iframe>
602
646
  `;
603
647
  },
604
- divCreate: { class: `w-100 `, style: `height:${height}px;` },
648
+ divCreate: {class: `w-100 `, style: `height:${height}px;`},
605
649
  onDestroy: () => {
606
650
  gvc.glitter.share.postMessageCallback = gvc.glitter.share.postMessageCallback.filter((dd: any) => {
607
651
  return dd.id === frameID;
@@ -625,19 +669,19 @@ export class EditorElem {
625
669
  <div class="d-flex">
626
670
  ${obj.title ? EditorElem.h3(obj.title) : ''}
627
671
  <div
628
- class="d-flex align-items-center justify-content-center"
629
- style="height:36px;width:36px;border-radius:10px;cursor:pointer;color:#151515;"
630
- onclick="${obj.gvc.event(() => {
631
- EditorElem.openEditorDialog(
632
- obj.gvc,
633
- (gvc: GVC) => {
634
- return getComponent(gvc, window.innerHeight - 100);
635
- },
636
- () => {
637
- obj.gvc.notifyDataChange(idlist);
638
- }
639
- );
640
- })}"
672
+ class="d-flex align-items-center justify-content-center"
673
+ style="height:36px;width:36px;border-radius:10px;cursor:pointer;color:#151515;"
674
+ onclick="${obj.gvc.event(() => {
675
+ EditorElem.openEditorDialog(
676
+ obj.gvc,
677
+ (gvc: GVC) => {
678
+ return getComponent(gvc, window.innerHeight - 100);
679
+ },
680
+ () => {
681
+ obj.gvc.notifyDataChange(idlist);
682
+ }
683
+ );
684
+ })}"
641
685
  >
642
686
  <i class="fa-solid fa-expand"></i>
643
687
  </div>
@@ -646,7 +690,12 @@ export class EditorElem {
646
690
  );
647
691
  }
648
692
 
649
- public static pageEditor(cf: { page: string; width: number; height: number; par: { key: string; value: string }[] }) {
693
+ public static pageEditor(cf: {
694
+ page: string;
695
+ width: number;
696
+ height: number;
697
+ par: { key: string; value: string }[]
698
+ }) {
650
699
  const href = new URL(location.href);
651
700
  href.searchParams.set('page', cf.page);
652
701
  href.searchParams.set('type', 'editor');
@@ -660,7 +709,12 @@ export class EditorElem {
660
709
  ${href.href}" style="border: none;width:${cf.width}px;height:${cf.height}px;"></iframe>`;
661
710
  }
662
711
 
663
- public static iframeComponent(cf: { page: string; width: number; height: number; par: { key: string; value: string }[] }) {
712
+ public static iframeComponent(cf: {
713
+ page: string;
714
+ width: number;
715
+ height: number;
716
+ par: { key: string; value: string }[]
717
+ }) {
664
718
  const href = new URL(location.href);
665
719
  href.searchParams.set('page', cf.page);
666
720
  href.searchParams.delete('type');
@@ -673,7 +727,15 @@ export class EditorElem {
673
727
  ${href.href}" style="border: none;width:${cf.width}px;height:${cf.height}px;"></iframe>`;
674
728
  }
675
729
 
676
- public static codeEditor(obj: { gvc: GVC; height: number; initial: string; title: string; callback: (data: string) => void; structStart?: string; structEnd?: string }) {
730
+ public static codeEditor(obj: {
731
+ gvc: GVC;
732
+ height: number;
733
+ initial: string;
734
+ title: string;
735
+ callback: (data: string) => void;
736
+ structStart?: string;
737
+ structEnd?: string
738
+ }) {
677
739
  const codeID = obj.gvc.glitter.getUUID();
678
740
 
679
741
  function getComponent(gvc: GVC, height: number) {
@@ -713,13 +775,13 @@ ${obj.structEnd ? obj.structEnd : '})()'}`,
713
775
  view: () => {
714
776
  return html`
715
777
  <iframe
716
- id="${frameID}"
717
- class="w-100 h-100 border rounded-3"
718
- src="${domain}/browser-amd-editor/component.html?height=${height}&link=${location.origin}&callbackID=${id}"
778
+ id="${frameID}"
779
+ class="w-100 h-100 border rounded-3"
780
+ src="${domain}/browser-amd-editor/component.html?height=${height}&link=${location.origin}&callbackID=${id}"
719
781
  ></iframe>
720
782
  `;
721
783
  },
722
- divCreate: { class: `w-100 `, style: `height:${height}px;` },
784
+ divCreate: {class: `w-100 `, style: `height:${height}px;`},
723
785
  onDestroy: () => {
724
786
  gvc.glitter.share.postMessageCallback = gvc.glitter.share.postMessageCallback.filter((dd: any) => {
725
787
  return dd.id === frameID;
@@ -743,33 +805,41 @@ ${obj.structEnd ? obj.structEnd : '})()'}`,
743
805
  bind: codeID,
744
806
  view: () => {
745
807
  return (
746
- html` <div class="d-flex">
747
- ${obj.title ? EditorElem.h3(obj.title) : ''}
748
- <div
749
- class="d-flex align-items-center justify-content-center"
750
- style="height:36px;width:36px;border-radius:10px;cursor:pointer;color:#151515;"
751
- onclick="${obj.gvc.event(() => {
752
- EditorElem.openEditorDialog(
753
- obj.gvc,
754
- (gvc: GVC) => {
755
- return getComponent(gvc, window.innerHeight - 100);
756
- },
757
- () => {
758
- obj.gvc.notifyDataChange(codeID);
759
- }
760
- );
761
- })}"
762
- >
763
- <i class="fa-solid fa-expand"></i>
764
- </div>
765
- </div>` + getComponent(obj.gvc, obj.height)
808
+ html`
809
+ <div class="d-flex">
810
+ ${obj.title ? EditorElem.h3(obj.title) : ''}
811
+ <div
812
+ class="d-flex align-items-center justify-content-center"
813
+ style="height:36px;width:36px;border-radius:10px;cursor:pointer;color:#151515;"
814
+ onclick="${obj.gvc.event(() => {
815
+ EditorElem.openEditorDialog(
816
+ obj.gvc,
817
+ (gvc: GVC) => {
818
+ return getComponent(gvc, window.innerHeight - 100);
819
+ },
820
+ () => {
821
+ obj.gvc.notifyDataChange(codeID);
822
+ }
823
+ );
824
+ })}"
825
+ >
826
+ <i class="fa-solid fa-expand"></i>
827
+ </div>
828
+ </div>` + getComponent(obj.gvc, obj.height)
766
829
  );
767
830
  },
768
831
  };
769
832
  });
770
833
  }
771
834
 
772
- public static customCodeEditor(obj: { gvc: GVC; height: number; initial: string; language: string; title: string; callback: (data: string) => void }) {
835
+ public static customCodeEditor(obj: {
836
+ gvc: GVC;
837
+ height: number;
838
+ initial: string;
839
+ language: string;
840
+ title: string;
841
+ callback: (data: string) => void
842
+ }) {
773
843
  let idlist: any = [];
774
844
 
775
845
  function getComponent(gvc: GVC, height: number) {
@@ -783,13 +853,13 @@ ${obj.structEnd ? obj.structEnd : '})()'}`,
783
853
  view: () => {
784
854
  return html`
785
855
  <iframe
786
- id="${frameID}"
787
- class="w-100 h-100 border rounded-3"
788
- src="${domain}/browser-amd-editor/component.html?height=${height}&link=${location.origin}&callbackID=${id}"
856
+ id="${frameID}"
857
+ class="w-100 h-100 border rounded-3"
858
+ src="${domain}/browser-amd-editor/component.html?height=${height}&link=${location.origin}&callbackID=${id}"
789
859
  ></iframe>
790
860
  `;
791
861
  },
792
- divCreate: { class: `w-100 `, style: `height:${height}px;` },
862
+ divCreate: {class: `w-100 `, style: `height:${height}px;`},
793
863
  onDestroy: () => {
794
864
  gvc.glitter.share.postMessageCallback = gvc.glitter.share.postMessageCallback.filter((dd: any) => {
795
865
  return dd.id === frameID;
@@ -831,19 +901,19 @@ ${obj.structEnd ? obj.structEnd : '})()'}`,
831
901
  <div class="d-flex">
832
902
  ${obj.title ? EditorElem.h3(obj.title) : ''}
833
903
  <div
834
- class="d-flex align-items-center justify-content-center"
835
- style="height:36px;width:36px;border-radius:10px;cursor:pointer;color:#151515;"
836
- onclick="${obj.gvc.event(() => {
837
- EditorElem.openEditorDialog(
838
- obj.gvc,
839
- (gvc: GVC) => {
840
- return getComponent(gvc, window.innerHeight - 100);
841
- },
842
- () => {
843
- obj.gvc.notifyDataChange(idlist);
844
- }
845
- );
846
- })}"
904
+ class="d-flex align-items-center justify-content-center"
905
+ style="height:36px;width:36px;border-radius:10px;cursor:pointer;color:#151515;"
906
+ onclick="${obj.gvc.event(() => {
907
+ EditorElem.openEditorDialog(
908
+ obj.gvc,
909
+ (gvc: GVC) => {
910
+ return getComponent(gvc, window.innerHeight - 100);
911
+ },
912
+ () => {
913
+ obj.gvc.notifyDataChange(idlist);
914
+ }
915
+ );
916
+ })}"
847
917
  >
848
918
  <i class="fa-solid fa-expand"></i>
849
919
  </div>
@@ -852,7 +922,13 @@ ${obj.structEnd ? obj.structEnd : '})()'}`,
852
922
  );
853
923
  }
854
924
 
855
- public static richText(obj: { gvc: GVC; def: string; callback: (text: string) => void; style?: string; readonly?: boolean }) {
925
+ public static richText(obj: {
926
+ gvc: GVC;
927
+ def: string;
928
+ callback: (text: string) => void;
929
+ style?: string;
930
+ readonly?: boolean
931
+ }) {
856
932
  const gvc = obj.gvc;
857
933
  const glitter = gvc.glitter;
858
934
  return gvc.bindView(() => {
@@ -896,10 +972,12 @@ ${obj.structEnd ? obj.structEnd : '})()'}`,
896
972
  `plugins/special_characters.min.js`,
897
973
  `languages/zh_tw.js`,
898
974
  ].map((dd) => {
899
- return { src: dd.includes('http') ? dd : new URL(`../../jslib/froala/` + dd, import.meta.url).href };
975
+ return {src: dd.includes('http') ? dd : new URL(`../../jslib/froala/` + dd, import.meta.url).href};
900
976
  }),
901
- () => {},
902
- () => {}
977
+ () => {
978
+ },
979
+ () => {
980
+ }
903
981
  );
904
982
 
905
983
  gvc.addStyleLink([
@@ -910,7 +988,8 @@ ${obj.structEnd ? obj.structEnd : '})()'}`,
910
988
  return {
911
989
  bind: id,
912
990
  view: () => {
913
- return html` <div class="w-100 d-flex align-items-center justify-content-center p-3 ${richID}-loading">
991
+ return html`
992
+ <div class="w-100 d-flex align-items-center justify-content-center p-3 ${richID}-loading">
914
993
  <div class="spinner-border" style=""></div>
915
994
  </div>
916
995
  <div id="${richID}">${obj.def}</div>`;
@@ -971,21 +1050,22 @@ ${obj.structEnd ? obj.structEnd : '})()'}`,
971
1050
 
972
1051
  var byteArray = new Uint8Array(byteNumbers);
973
1052
 
974
- return new Blob([byteArray], { type: mimeType });
1053
+ return new Blob([byteArray], {type: mimeType});
975
1054
  }
1055
+
976
1056
  const mimeType = 'image/jpeg';
977
1057
  const blob = base64ToBlob(e.src.split(',')[1], mimeType);
978
1058
  const saasConfig: { config: any; api: any } = (window as any).saasConfig;
979
1059
 
980
1060
  glitter.share.wait_up_f = glitter.share.wait_up_f ?? [];
981
1061
  glitter.share.wait_up_f.push({
982
- file: new File([blob], gvc.glitter.getUUID() + '.jpeg', { type: mimeType }),
1062
+ file: new File([blob], gvc.glitter.getUUID() + '.jpeg', {type: mimeType}),
983
1063
  element: e,
984
1064
  });
985
1065
  clearInterval(glitter.share.wait_up_f_timer);
986
1066
  glitter.share.wait_up_f_timer = setTimeout(() => {
987
1067
  const dialog = new ShareDialog(obj.gvc.glitter);
988
- dialog.dataLoading({ visible: true });
1068
+ dialog.dataLoading({visible: true});
989
1069
  saasConfig.api
990
1070
  .uploadFileAll(
991
1071
  glitter.share.wait_up_f.map((dd: any) => {
@@ -993,7 +1073,7 @@ ${obj.structEnd ? obj.structEnd : '})()'}`,
993
1073
  })
994
1074
  )
995
1075
  .then((res: { result: boolean; links: string[] }) => {
996
- dialog.dataLoading({ visible: false });
1076
+ dialog.dataLoading({visible: false});
997
1077
  glitter.share.wait_up_f.map((dd: any, index: number) => {
998
1078
  dd.element.src = res.links[index];
999
1079
  });
@@ -1022,54 +1102,56 @@ ${obj.structEnd ? obj.structEnd : '})()'}`,
1022
1102
  }
1023
1103
  setTimeout(() => {
1024
1104
  const target: any = glitter.document.querySelector(`[data-cmd="insertImage"]`);
1025
- target.outerHTML = html` <button
1026
- id="insertImage-replace"
1027
- type="button"
1028
- tabindex="-1"
1029
- role="button"
1030
- class="fr-command fr-btn "
1031
- data-title="插入圖片 (⌘P)"
1032
- onclick="${obj.gvc.event(() => {
1033
- glitter.ut.chooseMediaCallback({
1034
- single: true,
1035
- accept: 'image/*',
1036
- callback(data) {
1037
- const saasConfig = (window as any).saasConfig;
1038
- const dialog = new ShareDialog(glitter);
1039
- dialog.dataLoading({ visible: true });
1040
- const file = data[0].file;
1041
- saasConfig.api.uploadFile(file.name).then((data: any) => {
1042
- dialog.dataLoading({ visible: false });
1043
- const data1 = data.response;
1044
- dialog.dataLoading({ visible: true });
1045
- BaseApi.create({
1046
- url: data1.url,
1047
- type: 'put',
1048
- data: file,
1049
- headers: {
1050
- 'Content-Type': data1.type,
1051
- },
1052
- }).then((res) => {
1053
- dialog.dataLoading({ visible: false });
1054
- if (res.result) {
1055
- editor.html.insert(`<img src="${data1.fullUrl}" style="max-width: 100%;">`);
1056
- editor.undo.saveStep();
1057
- } else {
1058
- dialog.errorMessage({ text: '上傳失敗' });
1059
- }
1060
- });
1105
+ target.outerHTML = html`
1106
+ <button
1107
+ id="insertImage-replace"
1108
+ type="button"
1109
+ tabindex="-1"
1110
+ role="button"
1111
+ class="fr-command fr-btn "
1112
+ data-title="插入圖片 (⌘P)"
1113
+ onclick="${obj.gvc.event(() => {
1114
+ glitter.ut.chooseMediaCallback({
1115
+ single: true,
1116
+ accept: 'image/*',
1117
+ callback(data) {
1118
+ const saasConfig = (window as any).saasConfig;
1119
+ const dialog = new ShareDialog(glitter);
1120
+ dialog.dataLoading({visible: true});
1121
+ const file = data[0].file;
1122
+ saasConfig.api.uploadFile(file.name).then((data: any) => {
1123
+ dialog.dataLoading({visible: false});
1124
+ const data1 = data.response;
1125
+ dialog.dataLoading({visible: true});
1126
+ BaseApi.create({
1127
+ url: data1.url,
1128
+ type: 'put',
1129
+ data: file,
1130
+ headers: {
1131
+ 'Content-Type': data1.type,
1132
+ },
1133
+ }).then((res) => {
1134
+ dialog.dataLoading({visible: false});
1135
+ if (res.result) {
1136
+ editor.html.insert(`<img src="${data1.fullUrl}" style="max-width: 100%;">`);
1137
+ editor.undo.saveStep();
1138
+ } else {
1139
+ dialog.errorMessage({text: '上傳失敗'});
1140
+ }
1141
+ });
1142
+ });
1143
+ },
1061
1144
  });
1062
- },
1063
- });
1064
- })}"
1065
- >
1066
- <svg class="fr-svg" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
1067
- <path
1068
- d="M14.2,11l3.8,5H6l3-3.9l2.1,2.7L14,11H14.2z M8.5,11c0.8,0,1.5-0.7,1.5-1.5S9.3,8,8.5,8S7,8.7,7,9.5C7,10.3,7.7,11,8.5,11z M22,6v12c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V6c0-1.1,0.9-2,2-2h16C21.1,4,22,4.9,22,6z M20,8.8V6H4v12h16V8.8z"
1069
- ></path>
1070
- </svg>
1071
- <span class="fr-sr-only">插入圖片</span>
1072
- </button>`;
1145
+ })}"
1146
+ >
1147
+ <svg class="fr-svg" focusable="false" viewBox="0 0 24 24"
1148
+ xmlns="http://www.w3.org/2000/svg">
1149
+ <path
1150
+ d="M14.2,11l3.8,5H6l3-3.9l2.1,2.7L14,11H14.2z M8.5,11c0.8,0,1.5-0.7,1.5-1.5S9.3,8,8.5,8S7,8.7,7,9.5C7,10.3,7.7,11,8.5,11z M22,6v12c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V6c0-1.1,0.9-2,2-2h16C21.1,4,22,4.9,22,6z M20,8.8V6H4v12h16V8.8z"
1151
+ ></path>
1152
+ </svg>
1153
+ <span class="fr-sr-only">插入圖片</span>
1154
+ </button>`;
1073
1155
  if (obj.readonly) {
1074
1156
  editor.edit.off();
1075
1157
  editor.toolbar.disable();
@@ -1084,7 +1166,13 @@ ${obj.structEnd ? obj.structEnd : '})()'}`,
1084
1166
  });
1085
1167
  }
1086
1168
 
1087
- public static richTextBtn(obj: { gvc: GVC; def: string; title: string; callback: (text: string) => void; style?: string }) {
1169
+ public static richTextBtn(obj: {
1170
+ gvc: GVC;
1171
+ def: string;
1172
+ title: string;
1173
+ callback: (text: string) => void;
1174
+ style?: string
1175
+ }) {
1088
1176
  return `
1089
1177
  <div class="fw-normal mt-2 fs-6" style="color: black;
1090
1178
  margin-bottom: 5px;
@@ -1094,18 +1182,20 @@ white-space: normal;" >${obj.title}</div>
1094
1182
  EditorElem.openEditorDialog(
1095
1183
  obj.gvc,
1096
1184
  () => {
1097
- return html` <div class="p-3" style="overflow: hidden;">
1098
- ${EditorElem.richText({
1099
- gvc: obj.gvc,
1100
- def: obj.def,
1101
- callback: (text) => {
1102
- obj.def = text;
1103
- obj.callback(text);
1104
- },
1105
- })}
1106
- </div>`;
1185
+ return html`
1186
+ <div class="p-3" style="overflow: hidden;">
1187
+ ${EditorElem.richText({
1188
+ gvc: obj.gvc,
1189
+ def: obj.def,
1190
+ callback: (text) => {
1191
+ obj.def = text;
1192
+ obj.callback(text);
1193
+ },
1194
+ })}
1195
+ </div>`;
1196
+ },
1197
+ () => {
1107
1198
  },
1108
- () => {},
1109
1199
  800,
1110
1200
  obj.title
1111
1201
  );
@@ -1191,88 +1281,101 @@ white-space: normal;" >${obj.title}</div>
1191
1281
  });
1192
1282
  }
1193
1283
 
1194
- public static uploadFile(obj: { title: string; gvc: any; def: string; callback: (data: string) => void; readonly?: boolean }) {
1284
+ public static uploadFile(obj: {
1285
+ title: string;
1286
+ gvc: any;
1287
+ def: string;
1288
+ callback: (data: string) => void;
1289
+ readonly?: boolean
1290
+ }) {
1195
1291
  const glitter = (window as any).glitter;
1196
1292
  const $ = glitter.$;
1197
1293
 
1198
1294
  return `${EditorElem.h3(obj.title)}
1199
1295
  ${obj.gvc.bindView(() => {
1200
- const id = glitter.getUUID();
1201
- return {
1202
- bind: id,
1203
- view: () => {
1204
- return html`<input
1205
- class="flex-fill form-control "
1206
- placeholder="請輸入檔案連結"
1207
- value="${obj.def ?? ''}"
1208
- onchange="${obj.gvc.event((e: any) => {
1209
- obj.callback(e.value);
1210
- })}"
1211
- ${obj.readonly ? `readonly` : ``}
1212
- />
1213
- <div class="" style="width: 1px;height: 25px;background-color: white;"></div>
1214
- ${!obj.readonly
1215
- ? html`<i
1216
- class="fa-regular fa-upload ms-2 fs-5"
1217
- style="cursor: pointer;color:black;"
1218
- onclick="${obj.gvc.event(() => {
1219
- glitter.ut.chooseMediaCallback({
1220
- single: true,
1221
- accept: '*',
1222
- callback(data: any) {
1223
- const saasConfig: {
1224
- config: any;
1225
- api: any;
1226
- } = (window as any).saasConfig;
1227
- const dialog = new ShareDialog(obj.gvc.glitter);
1228
- dialog.dataLoading({ visible: true });
1229
- const file = data[0].file;
1230
- saasConfig.api.uploadFile(file.name).then((data: any) => {
1231
- dialog.dataLoading({ visible: false });
1232
- const data1 = data.response;
1233
- dialog.dataLoading({ visible: true });
1234
- BaseApi.create({
1235
- url: data1.url,
1236
- type: 'put',
1237
- data: file,
1238
- headers: {
1239
- 'Content-Type': data1.type,
1240
- },
1241
- }).then((res) => {
1242
- if (res.result) {
1243
- dialog.dataLoading({ visible: false });
1244
- obj.def = data1.fullUrl;
1245
- obj.callback(data1.fullUrl);
1246
- obj.gvc.notifyDataChange(id);
1247
- } else {
1248
- dialog.dataLoading({ visible: false });
1249
- dialog.errorMessage({ text: '上傳失敗' });
1250
- }
1251
- });
1252
- });
1253
- },
1254
- });
1255
- })}"
1256
- ></i>`
1257
- : ``} `;
1258
- },
1259
- divCreate: {
1260
- class: `d-flex align-items-center mb-2`,
1261
- },
1262
- };
1263
- })}
1296
+ const id = glitter.getUUID();
1297
+ return {
1298
+ bind: id,
1299
+ view: () => {
1300
+ return html`<input
1301
+ class="flex-fill form-control "
1302
+ placeholder="請輸入檔案連結"
1303
+ value="${obj.def ?? ''}"
1304
+ onchange="${obj.gvc.event((e: any) => {
1305
+ obj.callback(e.value);
1306
+ })}"
1307
+ ${obj.readonly ? `readonly` : ``}
1308
+ />
1309
+ <div class="" style="width: 1px;height: 25px;background-color: white;"></div>
1310
+ ${!obj.readonly
1311
+ ? html`<i
1312
+ class="fa-regular fa-upload ms-2 fs-5"
1313
+ style="cursor: pointer;color:black;"
1314
+ onclick="${obj.gvc.event(() => {
1315
+ glitter.ut.chooseMediaCallback({
1316
+ single: true,
1317
+ accept: '*',
1318
+ callback(data: any) {
1319
+ const saasConfig: {
1320
+ config: any;
1321
+ api: any;
1322
+ } = (window as any).saasConfig;
1323
+ const dialog = new ShareDialog(obj.gvc.glitter);
1324
+ dialog.dataLoading({visible: true});
1325
+ const file = data[0].file;
1326
+ saasConfig.api.uploadFile(file.name).then((data: any) => {
1327
+ dialog.dataLoading({visible: false});
1328
+ const data1 = data.response;
1329
+ dialog.dataLoading({visible: true});
1330
+ BaseApi.create({
1331
+ url: data1.url,
1332
+ type: 'put',
1333
+ data: file,
1334
+ headers: {
1335
+ 'Content-Type': data1.type,
1336
+ },
1337
+ }).then((res) => {
1338
+ if (res.result) {
1339
+ dialog.dataLoading({visible: false});
1340
+ obj.def = data1.fullUrl;
1341
+ obj.callback(data1.fullUrl);
1342
+ obj.gvc.notifyDataChange(id);
1343
+ } else {
1344
+ dialog.dataLoading({visible: false});
1345
+ dialog.errorMessage({text: '上傳失敗'});
1346
+ }
1347
+ });
1348
+ });
1349
+ },
1350
+ });
1351
+ })}"
1352
+ ></i>`
1353
+ : ``} `;
1354
+ },
1355
+ divCreate: {
1356
+ class: `d-flex align-items-center mb-2`,
1357
+ },
1358
+ };
1359
+ })}
1264
1360
  `;
1265
1361
  }
1266
1362
 
1267
- public static uploadFileFunction(obj: { gvc: GVC; callback: (text: string) => void; type?: string; file?: File; multiple?: boolean; return_array?: boolean }) {
1363
+ public static uploadFileFunction(obj: {
1364
+ gvc: GVC;
1365
+ callback: (text: string) => void;
1366
+ type?: string;
1367
+ file?: File;
1368
+ multiple?: boolean;
1369
+ return_array?: boolean
1370
+ }) {
1268
1371
  const glitter = (window as any).glitter;
1269
1372
  const saasConfig: { config: any; api: any } = (window as any).saasConfig;
1270
1373
 
1271
1374
  function upload(file: any) {
1272
1375
  const dialog = new ShareDialog(obj.gvc.glitter);
1273
- dialog.dataLoading({ visible: true });
1376
+ dialog.dataLoading({visible: true});
1274
1377
  saasConfig.api.uploadFileAll(file).then((res: { result: boolean; links: string[] }) => {
1275
- dialog.dataLoading({ visible: false });
1378
+ dialog.dataLoading({visible: false});
1276
1379
  if (res.result) {
1277
1380
  if (obj.return_array) {
1278
1381
  obj.callback(res.links as any);
@@ -1282,7 +1385,7 @@ ${obj.gvc.bindView(() => {
1282
1385
  });
1283
1386
  }
1284
1387
  } else {
1285
- dialog.errorMessage({ text: '上傳失敗' });
1388
+ dialog.errorMessage({text: '上傳失敗'});
1286
1389
  }
1287
1390
  });
1288
1391
  }
@@ -1308,17 +1411,17 @@ ${obj.gvc.bindView(() => {
1308
1411
  const glitter = (window as any).glitter;
1309
1412
  const $ = glitter.$;
1310
1413
  return html`<h3 style="color: white;font-size: 16px;margin-bottom: 10px;" class="mt-2">${obj.title}</h3>
1311
- <div class="d-flex align-items-center mb-3">
1312
- <input
1414
+ <div class="d-flex align-items-center mb-3">
1415
+ <input
1313
1416
  class="flex-fill form-control "
1314
1417
  placeholder="請輸入圖片連結"
1315
1418
  value="${obj.def}"
1316
1419
  onchange="${obj.gvc.event((e: any) => {
1317
1420
  obj.callback(e.value);
1318
1421
  })}"
1319
- />
1320
- <div class="" style="width: 1px;height: 25px;background-color: white;"></div>
1321
- <i
1422
+ />
1423
+ <div class="" style="width: 1px;height: 25px;background-color: white;"></div>
1424
+ <i
1322
1425
  class="fa-regular fa-upload text-white ms-2"
1323
1426
  style="cursor: pointer;"
1324
1427
  onclick="${obj.gvc.event(() => {
@@ -1331,12 +1434,12 @@ ${obj.gvc.bindView(() => {
1331
1434
  api: any;
1332
1435
  } = (window as any).saasConfig;
1333
1436
  const dialog = new ShareDialog(obj.gvc.glitter);
1334
- dialog.dataLoading({ visible: true });
1437
+ dialog.dataLoading({visible: true});
1335
1438
  const file = data[0].file;
1336
1439
  saasConfig.api.uploadFile(file.name).then((data: any) => {
1337
- dialog.dataLoading({ visible: false });
1440
+ dialog.dataLoading({visible: false});
1338
1441
  const data1 = data.response;
1339
- dialog.dataLoading({ visible: true });
1442
+ dialog.dataLoading({visible: true});
1340
1443
  BaseApi.create({
1341
1444
  url: data1.url,
1342
1445
  type: 'put',
@@ -1346,40 +1449,42 @@ ${obj.gvc.bindView(() => {
1346
1449
  },
1347
1450
  }).then((res) => {
1348
1451
  if (res.result) {
1349
- dialog.dataLoading({ visible: false });
1452
+ dialog.dataLoading({visible: false});
1350
1453
  obj.callback(data1.fullUrl);
1351
1454
  } else {
1352
- dialog.dataLoading({ visible: false });
1353
- dialog.errorMessage({ text: '上傳失敗' });
1455
+ dialog.dataLoading({visible: false});
1456
+ dialog.errorMessage({text: '上傳失敗'});
1354
1457
  }
1355
1458
  });
1356
1459
  });
1357
1460
  },
1358
1461
  });
1359
1462
  })}"
1360
- ></i>
1361
- </div>`;
1463
+ ></i>
1464
+ </div>`;
1362
1465
  }
1363
1466
 
1364
1467
  public static uploadLottie(obj: { title: string; gvc: any; def: string; callback: (data: string) => void }) {
1365
1468
  const glitter = (window as any).glitter;
1366
1469
  const $ = glitter.$;
1367
1470
  return html`<h3 style="color: white;font-size: 16px;margin-bottom: 10px;" class="mt-2">${obj.title}</h3>
1368
- <div class="alert alert-dark alert-dismissible fade show" role="alert" style="white-space: normal;word-break: break-word;">
1369
- <a onclick="${obj.gvc.event(() => glitter.openNewTab(`https://lottiefiles.com/`))}" class="fw text-white" style="cursor: pointer;">Lottie</a>
1370
- 是開放且免費的動畫平台，可以前往下載動畫檔後進行上傳．
1371
- </div>
1372
- <div class="d-flex align-items-center mb-3">
1373
- <input
1471
+ <div class="alert alert-dark alert-dismissible fade show" role="alert"
1472
+ style="white-space: normal;word-break: break-word;">
1473
+ <a onclick="${obj.gvc.event(() => glitter.openNewTab(`https://lottiefiles.com/`))}" class="fw text-white"
1474
+ style="cursor: pointer;">Lottie</a>
1475
+ 是開放且免費的動畫平台，可以前往下載動畫檔後進行上傳．
1476
+ </div>
1477
+ <div class="d-flex align-items-center mb-3">
1478
+ <input
1374
1479
  class="flex-fill form-control "
1375
1480
  placeholder="請輸入圖片連結"
1376
1481
  value="${obj.def}"
1377
1482
  onchange="${obj.gvc.event((e: any) => {
1378
1483
  obj.callback(e.value);
1379
1484
  })}"
1380
- />
1381
- <div class="" style="width: 1px;height: 25px;background-color: white;"></div>
1382
- <i
1485
+ />
1486
+ <div class="" style="width: 1px;height: 25px;background-color: white;"></div>
1487
+ <i
1383
1488
  class="fa-regular fa-upload text-white ms-2"
1384
1489
  style="cursor: pointer;"
1385
1490
  onclick="${obj.gvc.event(() => {
@@ -1389,12 +1494,12 @@ ${obj.gvc.bindView(() => {
1389
1494
  callback(data: any) {
1390
1495
  const saasConfig: { config: any; api: any } = (window as any).saasConfig;
1391
1496
  const dialog = new ShareDialog(obj.gvc.glitter);
1392
- dialog.dataLoading({ visible: true });
1497
+ dialog.dataLoading({visible: true});
1393
1498
  const file = data[0].file;
1394
1499
  saasConfig.api.uploadFile(file.name).then((data: any) => {
1395
- dialog.dataLoading({ visible: false });
1500
+ dialog.dataLoading({visible: false});
1396
1501
  const data1 = data.response;
1397
- dialog.dataLoading({ visible: true });
1502
+ dialog.dataLoading({visible: true});
1398
1503
  BaseApi.create({
1399
1504
  url: data1.url,
1400
1505
  type: 'put',
@@ -1404,19 +1509,19 @@ ${obj.gvc.bindView(() => {
1404
1509
  },
1405
1510
  }).then((res) => {
1406
1511
  if (res.result) {
1407
- dialog.dataLoading({ visible: false });
1512
+ dialog.dataLoading({visible: false});
1408
1513
  obj.callback(data1.fullUrl);
1409
1514
  } else {
1410
- dialog.dataLoading({ visible: false });
1411
- dialog.errorMessage({ text: '上傳失敗' });
1515
+ dialog.dataLoading({visible: false});
1516
+ dialog.errorMessage({text: '上傳失敗'});
1412
1517
  }
1413
1518
  });
1414
1519
  });
1415
1520
  },
1416
1521
  });
1417
1522
  })}"
1418
- ></i>
1419
- </div>`;
1523
+ ></i>
1524
+ </div>`;
1420
1525
  }
1421
1526
 
1422
1527
  public static h3(title: string) {
@@ -1424,8 +1529,10 @@ ${obj.gvc.bindView(() => {
1424
1529
  }
1425
1530
 
1426
1531
  public static plusBtn(title: string, event: any) {
1427
- return html` <div class="w-100 my-3" style="background: black;height: 1px;"></div>
1428
- <div class="fw-500 text-dark align-items-center justify-content-center d-flex p-1 rounded mt-1 hoverBtn" style="border: 1px solid #151515;color:#151515;" onclick="${event}">
1532
+ return html`
1533
+ <div class="w-100 my-3" style="background: black;height: 1px;"></div>
1534
+ <div class="fw-500 text-dark align-items-center justify-content-center d-flex p-1 rounded mt-1 hoverBtn"
1535
+ style="border: 1px solid #151515;color:#151515;" onclick="${event}">
1429
1536
  ${title}
1430
1537
  </div>`;
1431
1538
  }
@@ -1435,10 +1542,13 @@ ${obj.gvc.bindView(() => {
1435
1542
  return (
1436
1543
  html`
1437
1544
  ${EditorElem.h3(obj.title)}
1438
- <div class="alert alert-info fade show p-2" role="alert" style="white-space: normal;word-break: break-all;">
1439
- <a onclick="${obj.gvc.event(() => glitter.openNewTab('https://fontawesome.com/search'))}" class="fw fw-bold" style="cursor: pointer;">fontawesome</a>
1545
+ <div class="alert alert-info fade show p-2" role="alert"
1546
+ style="white-space: normal;word-break: break-all;">
1547
+ <a onclick="${obj.gvc.event(() => glitter.openNewTab('https://fontawesome.com/search'))}"
1548
+ class="fw fw-bold" style="cursor: pointer;">fontawesome</a>
1440
1549
  與
1441
- <a onclick="${obj.gvc.event(() => glitter.openNewTab('https://boxicons.com/'))}" class="fw fw-bold" style="cursor: pointer;">box-icon</a>
1550
+ <a onclick="${obj.gvc.event(() => glitter.openNewTab('https://boxicons.com/'))}" class="fw fw-bold"
1551
+ style="cursor: pointer;">box-icon</a>
1442
1552
  是開放且免費的icon提供平台，可以前往挑選合適標籤進行設定.
1443
1553
  </div>
1444
1554
  ` +
@@ -1454,7 +1564,13 @@ ${obj.gvc.bindView(() => {
1454
1564
  );
1455
1565
  }
1456
1566
 
1457
- public static toggleExpand(obj: { gvc: any; title: string; data: any; innerText: string | (() => string); color?: string }) {
1567
+ public static toggleExpand(obj: {
1568
+ gvc: any;
1569
+ title: string;
1570
+ data: any;
1571
+ innerText: string | (() => string);
1572
+ color?: string
1573
+ }) {
1458
1574
  const color = obj.color ?? `#4144b0;`;
1459
1575
  const glitter = (window as any).glitter;
1460
1576
  return html`${obj.gvc.bindView(() => {
@@ -1463,44 +1579,50 @@ ${obj.gvc.bindView(() => {
1463
1579
  bind: id,
1464
1580
  view: () => {
1465
1581
  if (obj.data.expand) {
1466
- return html` <div
1467
- class="toggleInner mb-2 p-2"
1468
- style="width:calc(100%);border-radius:8px;
1469
- min-height:45px;background:#d9f1ff;border: 1px solid #151515;color:#151515;"
1470
- >
1582
+ return html`
1471
1583
  <div
1472
- class="d-flex p-0 align-items-center mb-2 w-100"
1473
- onclick="${obj.gvc.event(() => {
1474
- obj.data.expand = !obj.data.expand;
1475
- obj.gvc.notifyDataChange(id);
1476
- })}"
1477
- style="cursor: pointer;"
1478
- >
1479
- <h3 style="font-size: 16px;color: black;width: calc(100% - 60px);" class="m-0 p-0">${obj.title}</h3>
1480
- <div class="flex-fill"></div>
1481
- <div class="text-dark fw-bold" style="cursor: pointer;">收合<i class="fa-solid fa-up ms-2 text-dark"></i></div>
1482
- </div>
1483
- ${typeof obj.innerText === 'string' ? obj.innerText : obj.innerText()}
1484
- </div>`;
1485
- }
1486
- return html` <div
1487
- class="toggleInner mb-2 p-2"
1488
- style="width:calc(100%);border-radius:8px;
1584
+ class="toggleInner mb-2 p-2"
1585
+ style="width:calc(100%);border-radius:8px;
1586
+ min-height:45px;background:#d9f1ff;border: 1px solid #151515;color:#151515;"
1587
+ >
1588
+ <div
1589
+ class="d-flex p-0 align-items-center mb-2 w-100"
1590
+ onclick="${obj.gvc.event(() => {
1591
+ obj.data.expand = !obj.data.expand;
1592
+ obj.gvc.notifyDataChange(id);
1593
+ })}"
1594
+ style="cursor: pointer;"
1595
+ >
1596
+ <h3 style="font-size: 16px;color: black;width: calc(100% - 60px);" class="m-0 p-0">
1597
+ ${obj.title}</h3>
1598
+ <div class="flex-fill"></div>
1599
+ <div class="text-dark fw-bold" style="cursor: pointer;">收合<i
1600
+ class="fa-solid fa-up ms-2 text-dark"></i></div>
1601
+ </div>
1602
+ ${typeof obj.innerText === 'string' ? obj.innerText : obj.innerText()}
1603
+ </div>`;
1604
+ }
1605
+ return html`
1606
+ <div
1607
+ class="toggleInner mb-2 p-2"
1608
+ style="width:calc(100%);border-radius:8px;
1489
1609
  min-height:45px;background:#d9f1ff;border: 1px solid #151515;color:#151515;"
1490
- >
1491
- <div
1492
- class="w-100 d-flex p-0 align-items-center"
1493
- onclick="${obj.gvc.event(() => {
1494
- obj.data.expand = !obj.data.expand;
1495
- obj.gvc.notifyDataChange(id);
1496
- })}"
1497
- style="cursor: pointer;"
1498
1610
  >
1499
- <h3 style="font-size: 16px;color: black;width: calc(100% - 60px);" class="m-0 p-0">${obj.title}</h3>
1500
- <div class="flex-fill"></div>
1501
- <span class="text-dark fw-bold" style="cursor: pointer;">展開<i class="fa-solid fa-down ms-2 text-dark"></i></span>
1502
- </div>
1503
- </div>`;
1611
+ <div
1612
+ class="w-100 d-flex p-0 align-items-center"
1613
+ onclick="${obj.gvc.event(() => {
1614
+ obj.data.expand = !obj.data.expand;
1615
+ obj.gvc.notifyDataChange(id);
1616
+ })}"
1617
+ style="cursor: pointer;"
1618
+ >
1619
+ <h3 style="font-size: 16px;color: black;width: calc(100% - 60px);" class="m-0 p-0">
1620
+ ${obj.title}</h3>
1621
+ <div class="flex-fill"></div>
1622
+ <span class="text-dark fw-bold" style="cursor: pointer;">展開<i
1623
+ class="fa-solid fa-down ms-2 text-dark"></i></span>
1624
+ </div>
1625
+ </div>`;
1504
1626
  },
1505
1627
  divCreate: {},
1506
1628
  };
@@ -1508,13 +1630,22 @@ ${obj.gvc.bindView(() => {
1508
1630
  }
1509
1631
 
1510
1632
  public static minusTitle(title: string, event: string) {
1511
- return html` <div class="d-flex align-items-center">
1512
- <i class="fa-regular fa-circle-minus text-danger me-2" style="font-size: 20px;cursor: pointer;" onclick="${event}"></i>
1513
- <h3 style="color: black;font-size: 16px;" class="m-0">${title}</h3>
1514
- </div>`;
1633
+ return html`
1634
+ <div class="d-flex align-items-center">
1635
+ <i class="fa-regular fa-circle-minus text-danger me-2" style="font-size: 20px;cursor: pointer;"
1636
+ onclick="${event}"></i>
1637
+ <h3 style="color: black;font-size: 16px;" class="m-0">${title}</h3>
1638
+ </div>`;
1515
1639
  }
1516
1640
 
1517
- public static searchInput(obj: { title: string; gvc: any; def: string; array: string[]; callback: (text: string) => void; placeHolder: string }) {
1641
+ public static searchInput(obj: {
1642
+ title: string;
1643
+ gvc: any;
1644
+ def: string;
1645
+ array: string[];
1646
+ callback: (text: string) => void;
1647
+ placeHolder: string
1648
+ }) {
1518
1649
  obj.def = obj.def || '';
1519
1650
  const glitter = (window as any).glitter;
1520
1651
  const gvc = obj.gvc;
@@ -1532,33 +1663,34 @@ ${obj.gvc.bindView(() => {
1532
1663
  bind: id2,
1533
1664
  view: () => {
1534
1665
  return html`<input
1535
- class="form-control w-100"
1536
- style="height: 40px;"
1537
- placeholder="${obj.placeHolder}"
1538
- onfocus="${obj.gvc.event(() => {
1539
- gvc.getBindViewElem(id).addClass(`show`);
1540
- })}"
1541
- onblur="${gvc.event(() => {})}"
1542
- oninput="${gvc.event((e: any) => {
1543
- obj.def = e.value;
1544
- gvc.notifyDataChange(id);
1545
- setTimeout(() => {
1666
+ class="form-control w-100"
1667
+ style="height: 40px;"
1668
+ placeholder="${obj.placeHolder}"
1669
+ onfocus="${obj.gvc.event(() => {
1546
1670
  gvc.getBindViewElem(id).addClass(`show`);
1547
- }, 100);
1548
- })}"
1549
- value="${obj.def.replace(/"/g, "'")}"
1550
- onchange="${gvc.event((e: any) => {
1551
- changeInterval = setTimeout(() => {
1671
+ })}"
1672
+ onblur="${gvc.event(() => {
1673
+ })}"
1674
+ oninput="${gvc.event((e: any) => {
1552
1675
  obj.def = e.value;
1553
- obj.callback(obj.def);
1676
+ gvc.notifyDataChange(id);
1554
1677
  setTimeout(() => {
1555
- gvc.getBindViewElem(id).removeClass(`show`);
1678
+ gvc.getBindViewElem(id).addClass(`show`);
1556
1679
  }, 100);
1557
- }, 200);
1558
- })}"
1680
+ })}"
1681
+ value="${obj.def.replace(/"/g, "'")}"
1682
+ onchange="${gvc.event((e: any) => {
1683
+ changeInterval = setTimeout(() => {
1684
+ obj.def = e.value;
1685
+ obj.callback(obj.def);
1686
+ setTimeout(() => {
1687
+ gvc.getBindViewElem(id).removeClass(`show`);
1688
+ }, 100);
1689
+ }, 200);
1690
+ })}"
1559
1691
  />`;
1560
1692
  },
1561
- divCreate: { class: `w-100` },
1693
+ divCreate: {class: `w-100`},
1562
1694
  };
1563
1695
  })}
1564
1696
  ${obj.gvc.bindView(() => {
@@ -1566,26 +1698,27 @@ ${obj.gvc.bindView(() => {
1566
1698
  bind: id,
1567
1699
  view: () => {
1568
1700
  return obj.array
1569
- .filter((d2: any) => {
1570
- return d2.toUpperCase().indexOf(obj.def.toUpperCase()) !== -1;
1571
- })
1572
- .map((d3) => {
1573
- return html` <button
1574
- class="dropdown-item"
1575
- onclick="${gvc.event(() => {
1576
- clearInterval(changeInterval);
1577
- obj.def = d3;
1578
- gvc.notifyDataChange(id2);
1579
- obj.callback(obj.def);
1580
- setTimeout(() => {
1581
- gvc.getBindViewElem(id).removeClass(`show`);
1582
- }, 100);
1583
- })}"
1584
- >
1585
- ${d3}
1586
- </button>`;
1587
- })
1588
- .join('');
1701
+ .filter((d2: any) => {
1702
+ return d2.toUpperCase().indexOf(obj.def.toUpperCase()) !== -1;
1703
+ })
1704
+ .map((d3) => {
1705
+ return html`
1706
+ <button
1707
+ class="dropdown-item"
1708
+ onclick="${gvc.event(() => {
1709
+ clearInterval(changeInterval);
1710
+ obj.def = d3;
1711
+ gvc.notifyDataChange(id2);
1712
+ obj.callback(obj.def);
1713
+ setTimeout(() => {
1714
+ gvc.getBindViewElem(id).removeClass(`show`);
1715
+ }, 100);
1716
+ })}"
1717
+ >
1718
+ ${d3}
1719
+ </button>`;
1720
+ })
1721
+ .join('');
1589
1722
  },
1590
1723
  divCreate: {
1591
1724
  class: `dropdown-menu`,
@@ -1632,7 +1765,8 @@ ${obj.gvc.bindView(() => {
1632
1765
  setTimeout(() => {
1633
1766
  gvc.getBindViewElem(id).addClass(`show`);
1634
1767
  }, 100);
1635
- } catch (e) {}
1768
+ } catch (e) {
1769
+ }
1636
1770
  });
1637
1771
  }
1638
1772
 
@@ -1642,48 +1776,51 @@ ${obj.gvc.bindView(() => {
1642
1776
  return {
1643
1777
  bind: id2,
1644
1778
  view: () => {
1645
- return html` <div class="" style="position: absolute;transform: translateY(-50%);top:50%;left:20px;">
1646
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
1779
+ return html`
1780
+ <div class=""
1781
+ style="position: absolute;transform: translateY(-50%);top:50%;left:20px;">
1782
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
1783
+ viewBox="0 0 20 20" fill="none">
1647
1784
  <g clip-path="url(#clip0_12704_238948)">
1648
1785
  <path
1649
- d="M14.375 8.125C14.375 6.4674 13.7165 4.87769 12.5444 3.70558C11.3723 2.53348 9.7826 1.875 8.125 1.875C6.4674 1.875 4.87769 2.53348 3.70558 3.70558C2.53348 4.87769 1.875 6.4674 1.875 8.125C1.875 9.7826 2.53348 11.3723 3.70558 12.5444C4.87769 13.7165 6.4674 14.375 8.125 14.375C9.7826 14.375 11.3723 13.7165 12.5444 12.5444C13.7165 11.3723 14.375 9.7826 14.375 8.125ZM13.168 14.4961C11.7852 15.5938 10.0312 16.25 8.125 16.25C3.63672 16.25 0 12.6133 0 8.125C0 3.63672 3.63672 0 8.125 0C12.6133 0 16.25 3.63672 16.25 8.125C16.25 10.0312 15.5938 11.7852 14.4961 13.168L19.7266 18.3984C20.0938 18.7656 20.0938 19.3594 19.7266 19.7227C19.3594 20.0859 18.7656 20.0898 18.4023 19.7227L13.168 14.4961Z"
1650
- fill="#8D8D8D"
1786
+ d="M14.375 8.125C14.375 6.4674 13.7165 4.87769 12.5444 3.70558C11.3723 2.53348 9.7826 1.875 8.125 1.875C6.4674 1.875 4.87769 2.53348 3.70558 3.70558C2.53348 4.87769 1.875 6.4674 1.875 8.125C1.875 9.7826 2.53348 11.3723 3.70558 12.5444C4.87769 13.7165 6.4674 14.375 8.125 14.375C9.7826 14.375 11.3723 13.7165 12.5444 12.5444C13.7165 11.3723 14.375 9.7826 14.375 8.125ZM13.168 14.4961C11.7852 15.5938 10.0312 16.25 8.125 16.25C3.63672 16.25 0 12.6133 0 8.125C0 3.63672 3.63672 0 8.125 0C12.6133 0 16.25 3.63672 16.25 8.125C16.25 10.0312 15.5938 11.7852 14.4961 13.168L19.7266 18.3984C20.0938 18.7656 20.0938 19.3594 19.7266 19.7227C19.3594 20.0859 18.7656 20.0898 18.4023 19.7227L13.168 14.4961Z"
1787
+ fill="#8D8D8D"
1651
1788
  />
1652
1789
  </g>
1653
1790
  <defs>
1654
1791
  <clipPath id="clip0_12704_238948">
1655
- <rect width="20" height="20" fill="white" />
1792
+ <rect width="20" height="20" fill="white"/>
1656
1793
  </clipPath>
1657
1794
  </defs>
1658
1795
  </svg>
1659
1796
  </div>
1660
1797
  <input
1661
- class="form-control w-100"
1662
- style="height: 44px;max-height:100%;padding-left:50px;"
1663
- placeholder="${obj.placeHolder}"
1664
- onfocus="${obj.gvc.event(() => {
1665
- gvc.getBindViewElem(id).addClass(`show`);
1666
- refreshData();
1667
- })}"
1668
- onblur="${gvc.event(() => {
1669
- setTimeout(() => {
1670
- gvc.getBindViewElem(id).removeClass(`show`);
1671
- }, 300);
1672
- })}"
1673
- oninput="${gvc.event((e: any) => {
1674
- obj.def = e.value;
1675
- refreshData();
1676
- })}"
1677
- value="${obj.def}"
1678
- onchange="${gvc.event((e: any) => {
1679
- obj.def = e.value;
1680
- setTimeout(() => {
1681
- obj.callback(obj.def);
1682
- }, 500);
1683
- })}"
1798
+ class="form-control w-100"
1799
+ style="height: 44px;max-height:100%;padding-left:50px;"
1800
+ placeholder="${obj.placeHolder}"
1801
+ onfocus="${obj.gvc.event(() => {
1802
+ gvc.getBindViewElem(id).addClass(`show`);
1803
+ refreshData();
1804
+ })}"
1805
+ onblur="${gvc.event(() => {
1806
+ setTimeout(() => {
1807
+ gvc.getBindViewElem(id).removeClass(`show`);
1808
+ }, 300);
1809
+ })}"
1810
+ oninput="${gvc.event((e: any) => {
1811
+ obj.def = e.value;
1812
+ refreshData();
1813
+ })}"
1814
+ value="${obj.def}"
1815
+ onchange="${gvc.event((e: any) => {
1816
+ obj.def = e.value;
1817
+ setTimeout(() => {
1818
+ obj.callback(obj.def);
1819
+ }, 500);
1820
+ })}"
1684
1821
  />`;
1685
1822
  },
1686
- divCreate: { class: `w-100`, style: 'position:relative;' },
1823
+ divCreate: {class: `w-100`, style: 'position:relative;'},
1687
1824
  };
1688
1825
  })}
1689
1826
  ${obj.gvc.bindView(() => {
@@ -1691,22 +1828,23 @@ ${obj.gvc.bindView(() => {
1691
1828
  bind: id,
1692
1829
  view: () => {
1693
1830
  return array
1694
- .filter((d2: any) => {
1695
- return d2.toUpperCase().indexOf(obj.def.toUpperCase()) !== -1;
1696
- })
1697
- .map((d3) => {
1698
- return html` <button
1699
- class="dropdown-item"
1700
- onclick="${gvc.event(() => {
1701
- obj.def = d3;
1702
- gvc.notifyDataChange(id2);
1703
- obj.callback(obj.def);
1704
- })}"
1705
- >
1706
- ${d3}
1707
- </button>`;
1708
- })
1709
- .join('');
1831
+ .filter((d2: any) => {
1832
+ return d2.toUpperCase().indexOf(obj.def.toUpperCase()) !== -1;
1833
+ })
1834
+ .map((d3) => {
1835
+ return html`
1836
+ <button
1837
+ class="dropdown-item"
1838
+ onclick="${gvc.event(() => {
1839
+ obj.def = d3;
1840
+ gvc.notifyDataChange(id2);
1841
+ obj.callback(obj.def);
1842
+ })}"
1843
+ >
1844
+ ${d3}
1845
+ </button>`;
1846
+ })
1847
+ .join('');
1710
1848
  },
1711
1849
  divCreate: {
1712
1850
  class: `dropdown-menu`,
@@ -1749,7 +1887,8 @@ ${obj.gvc.bindView(() => {
1749
1887
  gvc.getBindViewElem(id).addClass(`position-fixed`);
1750
1888
  gvc.getBindViewElem(id).addClass(`show`);
1751
1889
  }, 100);
1752
- } catch (e) {}
1890
+ } catch (e) {
1891
+ }
1753
1892
  });
1754
1893
  }
1755
1894
 
@@ -1759,48 +1898,51 @@ ${obj.gvc.bindView(() => {
1759
1898
  return {
1760
1899
  bind: id2,
1761
1900
  view: () => {
1762
- return html` <div class="" style="position: absolute;transform: translateY(-50%);top:50%;left:20px;">
1763
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
1901
+ return html`
1902
+ <div class=""
1903
+ style="position: absolute;transform: translateY(-50%);top:50%;left:20px;">
1904
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
1905
+ viewBox="0 0 20 20" fill="none">
1764
1906
  <g clip-path="url(#clip0_12704_238948)">
1765
1907
  <path
1766
- d="M14.375 8.125C14.375 6.4674 13.7165 4.87769 12.5444 3.70558C11.3723 2.53348 9.7826 1.875 8.125 1.875C6.4674 1.875 4.87769 2.53348 3.70558 3.70558C2.53348 4.87769 1.875 6.4674 1.875 8.125C1.875 9.7826 2.53348 11.3723 3.70558 12.5444C4.87769 13.7165 6.4674 14.375 8.125 14.375C9.7826 14.375 11.3723 13.7165 12.5444 12.5444C13.7165 11.3723 14.375 9.7826 14.375 8.125ZM13.168 14.4961C11.7852 15.5938 10.0312 16.25 8.125 16.25C3.63672 16.25 0 12.6133 0 8.125C0 3.63672 3.63672 0 8.125 0C12.6133 0 16.25 3.63672 16.25 8.125C16.25 10.0312 15.5938 11.7852 14.4961 13.168L19.7266 18.3984C20.0938 18.7656 20.0938 19.3594 19.7266 19.7227C19.3594 20.0859 18.7656 20.0898 18.4023 19.7227L13.168 14.4961Z"
1767
- fill="#8D8D8D"
1908
+ d="M14.375 8.125C14.375 6.4674 13.7165 4.87769 12.5444 3.70558C11.3723 2.53348 9.7826 1.875 8.125 1.875C6.4674 1.875 4.87769 2.53348 3.70558 3.70558C2.53348 4.87769 1.875 6.4674 1.875 8.125C1.875 9.7826 2.53348 11.3723 3.70558 12.5444C4.87769 13.7165 6.4674 14.375 8.125 14.375C9.7826 14.375 11.3723 13.7165 12.5444 12.5444C13.7165 11.3723 14.375 9.7826 14.375 8.125ZM13.168 14.4961C11.7852 15.5938 10.0312 16.25 8.125 16.25C3.63672 16.25 0 12.6133 0 8.125C0 3.63672 3.63672 0 8.125 0C12.6133 0 16.25 3.63672 16.25 8.125C16.25 10.0312 15.5938 11.7852 14.4961 13.168L19.7266 18.3984C20.0938 18.7656 20.0938 19.3594 19.7266 19.7227C19.3594 20.0859 18.7656 20.0898 18.4023 19.7227L13.168 14.4961Z"
1909
+ fill="#8D8D8D"
1768
1910
  />
1769
1911
  </g>
1770
1912
  <defs>
1771
1913
  <clipPath id="clip0_12704_238948">
1772
- <rect width="20" height="20" fill="white" />
1914
+ <rect width="20" height="20" fill="white"/>
1773
1915
  </clipPath>
1774
1916
  </defs>
1775
1917
  </svg>
1776
1918
  </div>
1777
1919
  <input
1778
- class="form-control w-100"
1779
- style="height: 44px;max-height:100%;padding-left:50px;"
1780
- placeholder="${obj.placeHolder}"
1781
- onfocus="${obj.gvc.event(() => {
1782
- gvc.getBindViewElem(id).addClass(`show`);
1783
- refreshData();
1784
- })}"
1785
- onblur="${gvc.event(() => {
1786
- setTimeout(() => {
1787
- gvc.getBindViewElem(id).removeClass(`show`);
1788
- }, 300);
1789
- })}"
1790
- oninput="${gvc.event((e: any) => {
1791
- obj.def = e.value;
1792
- refreshData();
1793
- })}"
1794
- value="${obj.def}"
1795
- onchange="${gvc.event((e: any) => {
1796
- obj.def = e.value;
1797
- setTimeout(() => {
1798
- obj.callback(obj.def);
1799
- }, 500);
1800
- })}"
1920
+ class="form-control w-100"
1921
+ style="height: 44px;max-height:100%;padding-left:50px;"
1922
+ placeholder="${obj.placeHolder}"
1923
+ onfocus="${obj.gvc.event(() => {
1924
+ gvc.getBindViewElem(id).addClass(`show`);
1925
+ refreshData();
1926
+ })}"
1927
+ onblur="${gvc.event(() => {
1928
+ setTimeout(() => {
1929
+ gvc.getBindViewElem(id).removeClass(`show`);
1930
+ }, 300);
1931
+ })}"
1932
+ oninput="${gvc.event((e: any) => {
1933
+ obj.def = e.value;
1934
+ refreshData();
1935
+ })}"
1936
+ value="${obj.def}"
1937
+ onchange="${gvc.event((e: any) => {
1938
+ obj.def = e.value;
1939
+ setTimeout(() => {
1940
+ obj.callback(obj.def);
1941
+ }, 500);
1942
+ })}"
1801
1943
  />`;
1802
1944
  },
1803
- divCreate: { class: `w-100`, style: 'position:relative;' },
1945
+ divCreate: {class: `w-100`, style: 'position:relative;'},
1804
1946
  };
1805
1947
  })}
1806
1948
  ${obj.gvc.bindView(() => {
@@ -1808,22 +1950,23 @@ ${obj.gvc.bindView(() => {
1808
1950
  bind: id,
1809
1951
  view: () => {
1810
1952
  return array
1811
- .filter((d2: any) => {
1812
- return d2.toUpperCase().indexOf(obj.def.toUpperCase()) !== -1;
1813
- })
1814
- .map((d3) => {
1815
- return html` <button
1816
- class="dropdown-item"
1817
- onclick="${gvc.event(() => {
1818
- obj.def = d3;
1819
- gvc.notifyDataChange(id2);
1820
- obj.callback(obj.def);
1821
- })}"
1822
- >
1823
- ${d3}
1824
- </button>`;
1825
- })
1826
- .join('');
1953
+ .filter((d2: any) => {
1954
+ return d2.toUpperCase().indexOf(obj.def.toUpperCase()) !== -1;
1955
+ })
1956
+ .map((d3) => {
1957
+ return html`
1958
+ <button
1959
+ class="dropdown-item"
1960
+ onclick="${gvc.event(() => {
1961
+ obj.def = d3;
1962
+ gvc.notifyDataChange(id2);
1963
+ obj.callback(obj.def);
1964
+ })}"
1965
+ >
1966
+ ${d3}
1967
+ </button>`;
1968
+ })
1969
+ .join('');
1827
1970
  },
1828
1971
  divCreate: {
1829
1972
  class: `dropdown-menu`,
@@ -1851,8 +1994,8 @@ ${obj.gvc.bindView(() => {
1851
1994
  }) {
1852
1995
  obj.title = obj.title ?? '';
1853
1996
  return html`${obj.title ? EditorElem.h3(obj.title) : ``}
1854
- <div class="d-flex align-items-center">
1855
- <input
1997
+ <div class="d-flex align-items-center">
1998
+ <input
1856
1999
  class="form-control"
1857
2000
  style="${obj.style ?? ''}"
1858
2001
  type="${obj.type ?? 'text'}"
@@ -1873,14 +2016,16 @@ ${obj.gvc.bindView(() => {
1873
2016
  })}"
1874
2017
  value="${obj.default ?? ''}"
1875
2018
  ${obj.readonly ? `readonly` : ``}
1876
- />
1877
- ${obj.unit ? html` <div class="p-2">${obj.unit}</div>` : ''}
1878
- </div> `;
2019
+ />
2020
+ ${obj.unit ? html`
2021
+ <div class="p-2">${obj.unit}</div>` : ''}
2022
+ </div> `;
1879
2023
  }
1880
2024
 
1881
2025
  public static container(array: string[]) {
1882
2026
  return array.join(`<div class="my-2"></div>`);
1883
2027
  }
2028
+
1884
2029
  public static numberInput(obj: {
1885
2030
  gvc: GVC;
1886
2031
  title: string;
@@ -1894,13 +2039,13 @@ ${obj.gvc.bindView(() => {
1894
2039
  readonly?: boolean;
1895
2040
  }) {
1896
2041
  const viewId = obj.gvc.glitter.getUUID();
1897
- const def = () => ({ num: obj.default, min: obj.min, max: obj.max });
2042
+ const def = () => ({num: obj.default, min: obj.min, max: obj.max});
1898
2043
  return html`${obj.title ? EditorElem.h3(obj.title) : ``}
1899
- <div class="d-flex align-items-center">
1900
- ${obj.gvc.bindView({
1901
- bind: viewId,
1902
- view: () => {
1903
- return html`<input
2044
+ <div class="d-flex align-items-center">
2045
+ ${obj.gvc.bindView({
2046
+ bind: viewId,
2047
+ view: () => {
2048
+ return html`<input
1904
2049
  class="form-control"
1905
2050
  style="${obj.style ?? ''}"
1906
2051
  type="number"
@@ -1916,18 +2061,20 @@ ${obj.gvc.bindView(() => {
1916
2061
  })}"
1917
2062
  value="${obj.default !== undefined ? this.numberInterval(def()) : ''}"
1918
2063
  ${obj.readonly ? `readonly` : ``}
1919
- />`;
1920
- },
1921
- divCreate: { class: 'w-100' },
1922
- onCreate: () => {
1923
- if (!this.checkNumberMinMax(def())) {
1924
- obj.callback(this.numberInterval(def()));
1925
- }
1926
- },
1927
- })}
1928
- ${obj.unit ? html` <div class="p-2">${obj.unit}</div>` : ''}
1929
- </div> `;
2064
+ />`;
2065
+ },
2066
+ divCreate: {class: 'w-100'},
2067
+ onCreate: () => {
2068
+ if (!this.checkNumberMinMax(def())) {
2069
+ obj.callback(this.numberInterval(def()));
2070
+ }
2071
+ },
2072
+ })}
2073
+ ${obj.unit ? html`
2074
+ <div class="p-2">${obj.unit}</div>` : ''}
2075
+ </div> `;
1930
2076
  }
2077
+
1931
2078
  public static numberInterval(obj: { num: number | string; min?: number; max?: number }): number {
1932
2079
  const n = parseInt(`${obj.num}`, 10);
1933
2080
  if (obj.max !== undefined && n > obj.max) {
@@ -1938,6 +2085,7 @@ ${obj.gvc.bindView(() => {
1938
2085
  }
1939
2086
  return n;
1940
2087
  }
2088
+
1941
2089
  public static checkNumberMinMax(obj: { num: number | string; min?: number; max?: number }): boolean {
1942
2090
  const n = parseInt(`${obj.num}`, 10);
1943
2091
  if (obj.max !== undefined && n > obj.max) {
@@ -1948,7 +2096,16 @@ ${obj.gvc.bindView(() => {
1948
2096
  }
1949
2097
  return true;
1950
2098
  }
1951
- public static colorSelect(obj: { title: string; gvc: GVC; def: string; callback: (text: string) => void; style?: string; class?: string; readonly?: boolean }) {
2099
+
2100
+ public static colorSelect(obj: {
2101
+ title: string;
2102
+ gvc: GVC;
2103
+ def: string;
2104
+ callback: (text: string) => void;
2105
+ style?: string;
2106
+ class?: string;
2107
+ readonly?: boolean
2108
+ }) {
1952
2109
  obj.def = obj.def || '#FFFFFF';
1953
2110
  return html`${obj.title ? `<div class="t_39_16">${obj.title}</div>` : ``}
1954
2111
  ${obj.gvc.bindView(() => {
@@ -1958,16 +2115,20 @@ ${obj.gvc.bindView(() => {
1958
2115
  view: () => {
1959
2116
  return `
1960
2117
  ${EditorElem.colorBtn({
1961
- gvc: obj.gvc,
1962
- def: obj.def,
1963
- callback: (value) => {
1964
- obj.callback(value);
1965
- obj.gvc.notifyDataChange(id);
1966
- },
1967
- })}
2118
+ gvc: obj.gvc,
2119
+ def: obj.def,
2120
+ callback: (value) => {
2121
+ obj.callback(value);
2122
+ obj.gvc.notifyDataChange(id);
2123
+ },
2124
+ })}
1968
2125
 
1969
2126
  <input class="flex-fill ms-2" value="${obj.def}" placeholder="" style="border:none;width:100px;" onclick="${obj.gvc.event((e, event) => {
1970
2127
  (document.querySelector(`[gvc-id='${obj.gvc.id(id)}'] .pcr-button`) as any).click();
2128
+ })}" onchange="${obj.gvc.event((e, event) => {
2129
+ obj.callback(e.value);
2130
+ obj.gvc.notifyDataChange(id);
2131
+ (document.querySelector('.pcr-app.visible') as any).classList.remove('visible');
1971
2132
  })}">`;
1972
2133
  },
1973
2134
  divCreate: {
@@ -1990,9 +2151,11 @@ ${obj.gvc.bindView(() => {
1990
2151
  padding: 0px !important;
1991
2152
  border: 1px solid #e2e5f1;
1992
2153
  }
2154
+
1993
2155
  .pcr-app {
1994
2156
  z-index: 99999;
1995
2157
  }
2158
+
1996
2159
  .pickr {
1997
2160
  width: 19px !important;
1998
2161
  height: 19px !important;
@@ -2008,7 +2171,7 @@ ${obj.gvc.bindView(() => {
2008
2171
  return ``;
2009
2172
  },
2010
2173
  divCreate: {
2011
- option: [{ key: 'id', value: classic }],
2174
+ option: [{key: 'id', value: classic}],
2012
2175
  style: obj.style || '',
2013
2176
  },
2014
2177
  onCreate: () => {
@@ -2071,33 +2234,36 @@ ${obj.gvc.bindView(() => {
2071
2234
  return html`
2072
2235
  ${obj.title ? EditorElem.h3(obj.title) : ``}
2073
2236
  <select
2074
- class="form-select ${obj.class ?? ''}"
2075
- style="max-height:100%; ${obj.style ?? ''};"
2076
- onchange="${obj.gvc.event((e: any) => {
2077
- obj.callback(e.value);
2078
- })}"
2079
- ${obj.readonly ? `disabled` : ``}
2080
- onclick="${obj.gvc.event((e: any, event: any) => {
2081
- if (obj.readonly) {
2082
- event.stopPropagation();
2083
- event.preventDefault();
2084
- }
2085
- })}"
2237
+ class="form-select ${obj.class ?? ''}"
2238
+ style="max-height:100%; ${obj.style ?? ''};"
2239
+ onchange="${obj.gvc.event((e: any) => {
2240
+ obj.callback(e.value);
2241
+ })}"
2242
+ ${obj.readonly ? `disabled` : ``}
2243
+ onclick="${obj.gvc.event((e: any, event: any) => {
2244
+ if (obj.readonly) {
2245
+ event.stopPropagation();
2246
+ event.preventDefault();
2247
+ }
2248
+ })}"
2086
2249
  >
2087
2250
  ${obj.array
2088
- .map((dd) => {
2089
- if (typeof dd === 'object') {
2090
- return html` <option value="${dd.value}" ${dd.value === obj.def ? `selected` : ``}>${dd.title}</option>`;
2091
- } else {
2092
- return html` <option value="${dd}" ${dd === obj.def ? `selected` : ``}>${dd}</option>`;
2093
- }
2094
- })
2095
- .join('')}
2251
+ .map((dd) => {
2252
+ if (typeof dd === 'object') {
2253
+ return html`
2254
+ <option value="${dd.value}" ${dd.value === obj.def ? `selected` : ``}>${dd.title}
2255
+ </option>`;
2256
+ } else {
2257
+ return html`
2258
+ <option value="${dd}" ${dd === obj.def ? `selected` : ``}>${dd}</option>`;
2259
+ }
2260
+ })
2261
+ .join('')}
2096
2262
  ${(obj.array as any).find((dd: any) => {
2097
2263
  return dd.value === obj.def;
2098
2264
  })
2099
- ? ``
2100
- : `<option class="d-none" selected>${obj.place_holger || `請選擇項目`}</option>`}
2265
+ ? ``
2266
+ : `<option class="d-none" selected>${obj.place_holger || `請選擇項目`}</option>`}
2101
2267
  </select>
2102
2268
  `;
2103
2269
  }
@@ -2120,48 +2286,49 @@ ${obj.gvc.bindView(() => {
2120
2286
  bind: id,
2121
2287
  view: () => {
2122
2288
  return obj.array
2123
- .map((dd: any) => {
2124
- function isSelect() {
2125
- if (obj.type === 'multiple') {
2126
- return (obj.def as any).find((d2: any) => {
2127
- return d2 === dd.value;
2128
- });
2129
- } else {
2130
- return obj.def === dd.value;
2289
+ .map((dd: any) => {
2290
+ function isSelect() {
2291
+ if (obj.type === 'multiple') {
2292
+ return (obj.def as any).find((d2: any) => {
2293
+ return d2 === dd.value;
2294
+ });
2295
+ } else {
2296
+ return obj.def === dd.value;
2297
+ }
2131
2298
  }
2132
- }
2133
2299
 
2134
- return html`
2135
- <div
2136
- class="d-flex align-items-center"
2137
- onclick="${obj.gvc.event(() => {
2138
- if (obj.type === 'multiple') {
2139
- if (
2140
- (obj.def as any).find((d2: any) => {
2141
- return d2 === dd.value;
2142
- })
2143
- ) {
2144
- obj.def = (obj.def as any).filter((d2: any) => {
2145
- return d2 !== dd.value;
2146
- });
2147
- } else {
2148
- (obj.def as any).push(dd.value);
2149
- }
2150
- obj.callback(obj.def as any);
2151
- } else {
2152
- obj.def = dd.value;
2153
- obj.callback(dd.value);
2154
- }
2155
- gvc.notifyDataChange(id);
2156
- })}"
2157
- >
2158
- <i class="${isSelect() ? `fa-solid fa-square-check` : `fa-regular fa-square`} me-2" style="${isSelect() ? `color:#295ed1;` : `color:black;`}"></i>
2159
- <span style="font-size:0.85rem;">${dd.title}</span>
2160
- </div>
2161
- ${obj.def === dd.value && dd.innerHtml ? `<div class="mt-1">${dd.innerHtml}</div>` : ``}
2162
- `;
2163
- })
2164
- .join('<div class="my-2"></div>');
2300
+ return html`
2301
+ <div
2302
+ class="d-flex align-items-center"
2303
+ onclick="${obj.gvc.event(() => {
2304
+ if (obj.type === 'multiple') {
2305
+ if (
2306
+ (obj.def as any).find((d2: any) => {
2307
+ return d2 === dd.value;
2308
+ })
2309
+ ) {
2310
+ obj.def = (obj.def as any).filter((d2: any) => {
2311
+ return d2 !== dd.value;
2312
+ });
2313
+ } else {
2314
+ (obj.def as any).push(dd.value);
2315
+ }
2316
+ obj.callback(obj.def as any);
2317
+ } else {
2318
+ obj.def = dd.value;
2319
+ obj.callback(dd.value);
2320
+ }
2321
+ gvc.notifyDataChange(id);
2322
+ })}"
2323
+ >
2324
+ <i class="${isSelect() ? `fa-solid fa-square-check` : `fa-regular fa-square`} me-2"
2325
+ style="${isSelect() ? `color:#295ed1;` : `color:black;`}"></i>
2326
+ <span style="font-size:0.85rem;">${dd.title}</span>
2327
+ </div>
2328
+ ${obj.def === dd.value && dd.innerHtml ? `<div class="mt-1">${dd.innerHtml}</div>` : ``}
2329
+ `;
2330
+ })
2331
+ .join('<div class="my-2"></div>');
2165
2332
  },
2166
2333
  divCreate: {
2167
2334
  class: `ps-1`,
@@ -2171,13 +2338,20 @@ ${obj.gvc.bindView(() => {
2171
2338
  `;
2172
2339
  }
2173
2340
 
2174
- public static checkBoxOnly(obj: { gvc: GVC; def: boolean; callback: (result: boolean) => void; style?: string; stopChangeView?: boolean }) {
2341
+ public static checkBoxOnly(obj: {
2342
+ gvc: GVC;
2343
+ def: boolean;
2344
+ callback: (result: boolean) => void;
2345
+ style?: string;
2346
+ stopChangeView?: boolean
2347
+ }) {
2175
2348
  return obj.gvc.bindView(() => {
2176
2349
  const id = obj.gvc.glitter.getUUID();
2177
2350
  return {
2178
2351
  bind: id,
2179
2352
  view: () => {
2180
- return html`<i class="${obj.def ? `fa-solid fa-square-check` : `fa-regular fa-square`} " style="color: #393939;"></i>`;
2353
+ return html`<i class="${obj.def ? `fa-solid fa-square-check` : `fa-regular fa-square`} "
2354
+ style="color: #393939;"></i>`;
2181
2355
  },
2182
2356
  divCreate: {
2183
2357
  option: [
@@ -2214,58 +2388,61 @@ ${obj.gvc.bindView(() => {
2214
2388
  obj.type = obj.type ?? 'single';
2215
2389
  const gvc = obj.gvc;
2216
2390
  return html`
2217
- ${obj.title ? html` <div class="tx_700" style="margin-bottom: 18px">${obj.title}</div>` : ``}
2391
+ ${obj.title ? html`
2392
+ <div class="tx_700" style="margin-bottom: 18px">${obj.title}</div>` : ``}
2218
2393
  ${obj.gvc.bindView(() => {
2219
2394
  const id = obj.gvc.glitter.getUUID();
2220
2395
  return {
2221
2396
  bind: id,
2222
2397
  view: () => {
2223
2398
  return obj.array
2224
- .map((dd: any) => {
2225
- function isSelect() {
2226
- if (obj.type === 'multiple') {
2227
- return (obj.def as any).find((d2: any) => {
2228
- return d2 === dd.value;
2229
- });
2230
- } else {
2231
- return obj.def === dd.value;
2399
+ .map((dd: any) => {
2400
+ function isSelect() {
2401
+ if (obj.type === 'multiple') {
2402
+ return (obj.def as any).find((d2: any) => {
2403
+ return d2 === dd.value;
2404
+ });
2405
+ } else {
2406
+ return obj.def === dd.value;
2407
+ }
2232
2408
  }
2233
- }
2234
2409
 
2235
- return html`
2236
- <div
2237
- class="d-flex align-items-center"
2238
- onclick="${obj.gvc.event(() => {
2239
- if (obj.readonly) {
2240
- return;
2241
- }
2242
- if (obj.type === 'multiple') {
2243
- if (
2244
- (obj.def as any).find((d2: any) => {
2245
- return d2 === dd.value;
2246
- })
2247
- ) {
2248
- obj.def = (obj.def as any).filter((d2: any) => {
2249
- return d2 !== dd.value;
2250
- });
2251
- } else {
2252
- (obj.def as any).push(dd.value);
2253
- }
2254
- obj.callback(obj.def as any);
2255
- } else {
2256
- obj.def = dd.value;
2257
- obj.callback(dd.value);
2258
- }
2259
- gvc.notifyDataChange(id);
2260
- })}"
2261
- >
2262
- <i class="${isSelect() ? `fa-solid fa-circle-dot` : `fa-regular fa-circle`} me-2" style="color: ${obj.readonly ? '#808080' : '#393939'}"></i>
2263
- <span style="font-size: 16px; cursor: pointer;">${dd.title}</span>
2264
- </div>
2265
- ${obj.def === dd.value && dd.innerHtml ? `<div style="margin-top: 8px;">${dd.innerHtml}</div>` : ``}
2266
- `;
2267
- })
2268
- .join(html` <div style="margin-top: 12px;"></div>`);
2410
+ return html`
2411
+ <div
2412
+ class="d-flex align-items-center"
2413
+ onclick="${obj.gvc.event(() => {
2414
+ if (obj.readonly) {
2415
+ return;
2416
+ }
2417
+ if (obj.type === 'multiple') {
2418
+ if (
2419
+ (obj.def as any).find((d2: any) => {
2420
+ return d2 === dd.value;
2421
+ })
2422
+ ) {
2423
+ obj.def = (obj.def as any).filter((d2: any) => {
2424
+ return d2 !== dd.value;
2425
+ });
2426
+ } else {
2427
+ (obj.def as any).push(dd.value);
2428
+ }
2429
+ obj.callback(obj.def as any);
2430
+ } else {
2431
+ obj.def = dd.value;
2432
+ obj.callback(dd.value);
2433
+ }
2434
+ gvc.notifyDataChange(id);
2435
+ })}"
2436
+ >
2437
+ <i class="${isSelect() ? `fa-solid fa-circle-dot` : `fa-regular fa-circle`} me-2"
2438
+ style="color: ${obj.readonly ? '#808080' : '#393939'}"></i>
2439
+ <span style="font-size: 16px; cursor: pointer;">${dd.title}</span>
2440
+ </div>
2441
+ ${obj.def === dd.value && dd.innerHtml ? `<div style="margin-top: 8px;">${dd.innerHtml}</div>` : ``}
2442
+ `;
2443
+ })
2444
+ .join(html`
2445
+ <div style="margin-top: 12px;"></div>`);
2269
2446
  },
2270
2447
  divCreate: {
2271
2448
  class: `${obj.oneLine ? 'd-flex gap-2' : ''} ps-1`,
@@ -2275,27 +2452,34 @@ ${obj.gvc.bindView(() => {
2275
2452
  `;
2276
2453
  }
2277
2454
 
2278
- public static editerDialog(par: { gvc: GVC; dialog: (gvc: GVC) => string; width?: string; editTitle?: string; callback?: () => void }) {
2279
- return html` <button
2280
- type="button"
2281
- class="btn btn-primary-c w-100"
2282
- style=""
2283
- onclick="${par.gvc.event(() => {
2284
- const gvc = par.gvc;
2285
- NormalPageEditor.toggle({
2286
- visible: true,
2287
- view: `
2455
+ public static editerDialog(par: {
2456
+ gvc: GVC;
2457
+ dialog: (gvc: GVC) => string;
2458
+ width?: string;
2459
+ editTitle?: string;
2460
+ callback?: () => void
2461
+ }) {
2462
+ return html`
2463
+ <button
2464
+ type="button"
2465
+ class="btn btn-primary-c w-100"
2466
+ style=""
2467
+ onclick="${par.gvc.event(() => {
2468
+ const gvc = par.gvc;
2469
+ NormalPageEditor.toggle({
2470
+ visible: true,
2471
+ view: `
2288
2472
  <div class="p-2"
2289
2473
  style="overflow-y:auto;">
2290
2474
  ${par.dialog(gvc)}
2291
2475
  </div>`,
2292
- title: par.editTitle || '',
2293
- });
2294
- par.callback && (NormalPageEditor.closeEvent = par.callback);
2295
- })}"
2296
- >
2297
- ${par.editTitle}
2298
- </button>`;
2476
+ title: par.editTitle || '',
2477
+ });
2478
+ par.callback && (NormalPageEditor.closeEvent = par.callback);
2479
+ })}"
2480
+ >
2481
+ ${par.editTitle}
2482
+ </button>`;
2299
2483
  }
2300
2484
 
2301
2485
  public static folderLineItems(obj: {
@@ -2318,8 +2502,10 @@ ${obj.gvc.bindView(() => {
2318
2502
  src: `https://raw.githack.com/SortableJS/Sortable/master/Sortable.js`,
2319
2503
  },
2320
2504
  ],
2321
- () => {},
2322
- () => {}
2505
+ () => {
2506
+ },
2507
+ () => {
2508
+ }
2323
2509
  );
2324
2510
  return {
2325
2511
  bind: parId,
@@ -2340,60 +2526,66 @@ ${obj.gvc.bindView(() => {
2340
2526
 
2341
2527
  const childSelect = dd.type === 'container' ? checkChildSelect(dd.dataList) : false;
2342
2528
 
2343
- return html` <li class="btn-group d-flex flex-column" style="margin-top:1px;margin-bottom:1px;">
2344
- <div
2345
- class="editor_item d-flex px-2 my-0 hi me-n1 ${dd.toggle || childSelect || obj.isOptionSelected(dd) ? `active` : ``}"
2346
- style=""
2347
- onclick="${gvc.event(() => {
2348
- if (dd.type === 'container') {
2349
- dd.toggle = !dd.toggle;
2529
+ return html`
2530
+ <li class="btn-group d-flex flex-column" style="margin-top:1px;margin-bottom:1px;">
2531
+ <div
2532
+ class="editor_item d-flex px-2 my-0 hi me-n1 ${dd.toggle || childSelect || obj.isOptionSelected(dd) ? `active` : ``}"
2533
+ style=""
2534
+ onclick="${gvc.event(() => {
2535
+ if (dd.type === 'container') {
2536
+ dd.toggle = !dd.toggle;
2537
+ }
2538
+ obj.onOptionSelected(dd);
2539
+ gvc.notifyDataChange(parId);
2540
+ })}"
2541
+ >
2542
+ ${dd.type === 'container'
2543
+ ? html`
2544
+ <div
2545
+ class="subBt ps-0 ms-n2"
2546
+ onclick="${gvc.event((e, event) => {
2547
+ dd.toggle = !dd.toggle;
2548
+ gvc.notifyDataChange(parId);
2549
+ event.stopPropagation();
2550
+ event.preventDefault();
2551
+ })}"
2552
+ >
2553
+ ${dd.toggle ? html`<i
2554
+ class="fa-regular fa-angle-down hoverBtn "></i>` : html`
2555
+ <i class="fa-regular fa-angle-right hoverBtn "></i> `}
2556
+ </div>`
2557
+ : ``}
2558
+ ${dd.label}
2559
+ <div class="flex-fill"></div>
2560
+ </div>
2561
+ ${(() => {
2562
+ if (dd.type !== 'container' || dd.dataList.length === 0) {
2563
+ return '' as string;
2564
+ } else {
2565
+ return html`
2566
+ <div class="${dd.toggle || (dd.toggle === undefined && checkChildSelect(dd.dataList)) ? `` : `d-none`}"
2567
+ style="padding-left:5px;">
2568
+ ${this.folderLineItems({
2569
+ gvc: obj.gvc,
2570
+ viewArray: dd.dataList.map((dd: any, index: number) => {
2571
+ dd.index = index;
2572
+ return dd;
2573
+ }),
2574
+ originalArray: dd.dataList,
2575
+ isOptionSelected: obj.isOptionSelected,
2576
+ onOptionSelected: obj.onOptionSelected,
2577
+ })}
2578
+ </div>` as string;
2350
2579
  }
2351
- obj.onOptionSelected(dd);
2352
- gvc.notifyDataChange(parId);
2353
- })}"
2354
- >
2355
- ${dd.type === 'container'
2356
- ? html` <div
2357
- class="subBt ps-0 ms-n2"
2358
- onclick="${gvc.event((e, event) => {
2359
- dd.toggle = !dd.toggle;
2360
- gvc.notifyDataChange(parId);
2361
- event.stopPropagation();
2362
- event.preventDefault();
2363
- })}"
2364
- >
2365
- ${dd.toggle ? html`<i class="fa-regular fa-angle-down hoverBtn "></i>` : html` <i class="fa-regular fa-angle-right hoverBtn "></i> `}
2366
- </div>`
2367
- : ``}
2368
- ${dd.label}
2369
- <div class="flex-fill"></div>
2370
- </div>
2371
- ${(() => {
2372
- if (dd.type !== 'container' || dd.dataList.length === 0) {
2373
- return '' as string;
2374
- } else {
2375
- return html` <div class="${dd.toggle || (dd.toggle === undefined && checkChildSelect(dd.dataList)) ? `` : `d-none`}" style="padding-left:5px;">
2376
- ${this.folderLineItems({
2377
- gvc: obj.gvc,
2378
- viewArray: dd.dataList.map((dd: any, index: number) => {
2379
- dd.index = index;
2380
- return dd;
2381
- }),
2382
- originalArray: dd.dataList,
2383
- isOptionSelected: obj.isOptionSelected,
2384
- onOptionSelected: obj.onOptionSelected,
2385
- })}
2386
- </div>` as string;
2387
- }
2388
- })()}
2389
- </li>`;
2580
+ })()}
2581
+ </li>`;
2390
2582
  })
2391
2583
  .join('');
2392
2584
  },
2393
2585
  divCreate: {
2394
2586
  class: `d-flex flex-column position-relative border-bottom position-relative ps-0 m-0`,
2395
2587
  elem: 'ul',
2396
- option: [{ key: 'id', value: parId }],
2588
+ option: [{key: 'id', value: parId}],
2397
2589
  },
2398
2590
  onCreate: () => {
2399
2591
  const interval = setInterval(() => {
@@ -2428,7 +2620,8 @@ ${obj.gvc.bindView(() => {
2428
2620
  startIndex = evt.oldIndex;
2429
2621
  },
2430
2622
  });
2431
- } catch (e) {}
2623
+ } catch (e) {
2624
+ }
2432
2625
  clearInterval(interval);
2433
2626
  }
2434
2627
  }, 100);
@@ -2480,8 +2673,10 @@ ${obj.gvc.bindView(() => {
2480
2673
  src: `https://raw.githack.com/SortableJS/Sortable/master/Sortable.js`,
2481
2674
  },
2482
2675
  ],
2483
- () => {},
2484
- () => {}
2676
+ () => {
2677
+ },
2678
+ () => {
2679
+ }
2485
2680
  );
2486
2681
  if (obj.hoverGray) {
2487
2682
  gvc.addStyle(`
@@ -2508,94 +2703,103 @@ ${obj.gvc.bindView(() => {
2508
2703
  event.stopPropagation();
2509
2704
  });
2510
2705
  return html`
2511
- <li class="btn-group" style="margin-top:1px;margin-bottom:1px;${obj.hr ? `border-bottom: 1px solid #f6f6f6; ` : ``};">
2706
+ <li class="btn-group"
2707
+ style="margin-top:1px;margin-bottom:1px;${obj.hr ? `border-bottom: 1px solid #f6f6f6; ` : ``};">
2512
2708
  <div
2513
- class="h-auto align-items-center px-2 my-0 hi me-n1 ${dd.isSelect ? `bgf6 border` : ``}"
2514
- style="cursor: pointer;min-height:36px;width: calc(100% - 10px);display: flex;font-size: 14px;line-height: 20px;font-weight: 500;text-rendering: optimizelegibility;user-select: none;margin: 5px 10px;"
2515
- onclick="${gvc.event(() => {
2516
- if (!dd.innerHtml) {
2517
- return;
2518
- }
2519
- if (obj.customEditor) {
2520
- dd.innerHtml(gvc);
2521
- } else if (original[index]) {
2522
- const originalData = JSON.parse(JSON.stringify(original[index]));
2523
- gvc.glitter.innerDialog((gvc: GVC) => {
2524
- return html` <div
2525
- class="dropdown-menu mx-0 position-fixed pb-0 border p-0 show"
2526
- style="z-index:999999;${dd.width ? `width:${dd.width + ';'}` : ``}"
2527
- onclick="${gvc.event((e: any, event: any) => {
2528
- event.preventDefault();
2529
- event.stopPropagation();
2530
- })}"
2531
- >
2532
- <div class="d-flex align-items-center px-2 border-bottom" style="height:50px;min-width:400px;">
2533
- <h3 style="font-size:15px;font-weight:500;" class="m-0">${dd.editTitle ? dd.editTitle : `編輯項目「${dd.title}」`}</h3>
2534
- <div class="flex-fill"></div>
2535
- <div
2536
- class="hoverBtn p-2"
2537
- data-bs-toggle="dropdown"
2538
- aria-haspopup="true"
2539
- aria-expanded="false"
2540
- style="color:black;font-size:20px;"
2541
- onclick="${gvc.event((e: any, event: any) => {
2542
- original[index] = originalData;
2543
- gvc.closeDialog();
2544
- obj.refreshComponent();
2545
- })}"
2546
- >
2547
- <i class="fa-sharp fa-regular fa-circle-xmark"></i>
2548
- </div>
2549
- </div>
2550
- <div class="px-2" style="max-height:calc(100vh - 150px);overflow-y:auto;">${dd.innerHtml(gvc)}</div>
2551
- <div class="d-flex w-100 p-2 border-top ${dd.saveAble === false ? `d-none` : ``}">
2552
- <div class="flex-fill"></div>
2553
- <div
2554
- class="btn btn-secondary"
2555
- style="height:40px;width:80px;"
2556
- onclick="${gvc.event(() => {
2557
- original[index] = originalData;
2558
- gvc.closeDialog();
2559
- obj.refreshComponent();
2560
- })}"
2561
- >
2562
- 取消
2563
- </div>
2709
+ class="h-auto align-items-center px-2 my-0 hi me-n1 ${dd.isSelect ? `bgf6 border` : ``}"
2710
+ style="cursor: pointer;min-height:36px;width: calc(100% - 10px);display: flex;font-size: 14px;line-height: 20px;font-weight: 500;text-rendering: optimizelegibility;user-select: none;margin: 5px 10px;"
2711
+ onclick="${gvc.event(() => {
2712
+ if (!dd.innerHtml) {
2713
+ return;
2714
+ }
2715
+ if (obj.customEditor) {
2716
+ dd.innerHtml(gvc);
2717
+ } else if (original[index]) {
2718
+ const originalData = JSON.parse(JSON.stringify(original[index]));
2719
+ gvc.glitter.innerDialog((gvc: GVC) => {
2720
+ return html`
2564
2721
  <div
2565
- class="btn btn-primary-c ms-2"
2566
- style="height:40px;width:80px;"
2567
- onclick="${gvc.event(() => {
2568
- gvc.closeDialog();
2569
- (dd.saveEvent && dd.saveEvent()) || obj.refreshComponent();
2570
- })}"
2722
+ class="dropdown-menu mx-0 position-fixed pb-0 border p-0 show"
2723
+ style="z-index:999999;${dd.width ? `width:${dd.width + ';'}` : ``}"
2724
+ onclick="${gvc.event((e: any, event: any) => {
2725
+ event.preventDefault();
2726
+ event.stopPropagation();
2727
+ })}"
2571
2728
  >
2572
- <i class="fa-solid fa-floppy-disk me-2"></i>儲存
2573
- </div>
2574
- </div>
2575
- </div>`;
2576
- }, glitter.getUUID());
2577
- }
2578
- })}"
2579
- >
2580
- <div
2581
- class="subBt ms-n2 ${obj.minus === false ? `d-none` : ``}"
2582
- onclick="${gvc.event((e: any, event: any) => {
2583
- if (obj.minusEvent) {
2584
- obj.minusEvent(obj.originalArray, index);
2585
- } else {
2586
- obj.originalArray.splice(index, 1);
2587
- obj.refreshComponent();
2729
+ <div class="d-flex align-items-center px-2 border-bottom"
2730
+ style="height:50px;min-width:400px;">
2731
+ <h3 style="font-size:15px;font-weight:500;"
2732
+ class="m-0">
2733
+ ${dd.editTitle ? dd.editTitle : `編輯項目「${dd.title}」`}</h3>
2734
+ <div class="flex-fill"></div>
2735
+ <div
2736
+ class="hoverBtn p-2"
2737
+ data-bs-toggle="dropdown"
2738
+ aria-haspopup="true"
2739
+ aria-expanded="false"
2740
+ style="color:black;font-size:20px;"
2741
+ onclick="${gvc.event((e: any, event: any) => {
2742
+ original[index] = originalData;
2743
+ gvc.closeDialog();
2744
+ obj.refreshComponent();
2745
+ })}"
2746
+ >
2747
+ <i class="fa-sharp fa-regular fa-circle-xmark"></i>
2748
+ </div>
2749
+ </div>
2750
+ <div class="px-2"
2751
+ style="max-height:calc(100vh - 150px);overflow-y:auto;">
2752
+ ${dd.innerHtml(gvc)}
2753
+ </div>
2754
+ <div class="d-flex w-100 p-2 border-top ${dd.saveAble === false ? `d-none` : ``}">
2755
+ <div class="flex-fill"></div>
2756
+ <div
2757
+ class="btn btn-secondary"
2758
+ style="height:40px;width:80px;"
2759
+ onclick="${gvc.event(() => {
2760
+ original[index] = originalData;
2761
+ gvc.closeDialog();
2762
+ obj.refreshComponent();
2763
+ })}"
2764
+ >
2765
+ 取消
2766
+ </div>
2767
+ <div
2768
+ class="btn btn-primary-c ms-2"
2769
+ style="height:40px;width:80px;"
2770
+ onclick="${gvc.event(() => {
2771
+ gvc.closeDialog();
2772
+ (dd.saveEvent && dd.saveEvent()) || obj.refreshComponent();
2773
+ })}"
2774
+ >
2775
+ <i class="fa-solid fa-floppy-disk me-2"></i>儲存
2776
+ </div>
2777
+ </div>
2778
+ </div>`;
2779
+ }, glitter.getUUID());
2588
2780
  }
2589
- gvc.notifyDataChange(viewId);
2590
- event.stopPropagation();
2591
2781
  })}"
2782
+ >
2783
+ <div
2784
+ class="subBt ms-n2 ${obj.minus === false ? `d-none` : ``}"
2785
+ onclick="${gvc.event((e: any, event: any) => {
2786
+ if (obj.minusEvent) {
2787
+ obj.minusEvent(obj.originalArray, index);
2788
+ } else {
2789
+ obj.originalArray.splice(index, 1);
2790
+ obj.refreshComponent();
2791
+ }
2792
+ gvc.notifyDataChange(viewId);
2793
+ event.stopPropagation();
2794
+ })}"
2592
2795
  >
2593
- <i class="fa-regular fa-circle-minus d-flex align-items-center justify-content-center subBt " style="width:15px;height:15px;color:red;"></i>
2796
+ <i class="fa-regular fa-circle-minus d-flex align-items-center justify-content-center subBt "
2797
+ style="width:15px;height:15px;color:red;"></i>
2594
2798
  </div>
2595
2799
  <div class="subBt ${obj.draggable === false || dd.draggable === false ? `d-none` : ``} ${obj.position ? `` : `d-none`}">
2596
2800
  <i
2597
- class="dragItem fa-solid fa-grip-dots-vertical d-flex align-items-center justify-content-center "
2598
- style="width:15px;height:15px;padding-right: 14px;"
2801
+ class="dragItem fa-solid fa-grip-dots-vertical d-flex align-items-center justify-content-center "
2802
+ style="width:15px;height:15px;padding-right: 14px;"
2599
2803
  ></i>
2600
2804
  </div>
2601
2805
  ${dd.title}
@@ -2615,61 +2819,65 @@ ${obj.gvc.bindView(() => {
2615
2819
  }
2616
2820
 
2617
2821
  let toggle = false;
2618
- return html` <div
2619
- class="btn-group dropend subBt"
2620
- style="position: relative;"
2621
- onclick="${gvc.event((e, event) => {
2622
- toggle = !toggle;
2623
- if (toggle) {
2624
- ($(e).children('.bt') as any).dropdown('show');
2625
- $(e).children('.dropdown-menu').css('top', `${0}px`);
2626
- } else {
2627
- ($(e).children('.bt') as any).dropdown('hide');
2628
- }
2629
- event.stopPropagation();
2630
- })}"
2631
- >
2632
- <div type="button" class="bt" style="background:none;" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
2633
- <i class="fa-sharp fa-regular fa-scissors"></i>
2634
- </div>
2822
+ return html`
2635
2823
  <div
2636
- class="dropdown-menu mx-1 "
2637
- style="height: 135px;"
2638
- onclick="${gvc.event((e, event) => {
2639
- toggle = false;
2640
- event.stopPropagation();
2641
- })}"
2642
- >
2643
- <a
2644
- class="dropdown-item"
2824
+ class="btn-group dropend subBt"
2825
+ style="position: relative;"
2645
2826
  onclick="${gvc.event((e, event) => {
2646
- addIt(0, event);
2827
+ toggle = !toggle;
2828
+ if (toggle) {
2829
+ ($(e).children('.bt') as any).dropdown('show');
2830
+ $(e).children('.dropdown-menu').css('top', `${0}px`);
2831
+ } else {
2832
+ ($(e).children('.bt') as any).dropdown('hide');
2833
+ }
2834
+ event.stopPropagation();
2647
2835
  })}"
2648
- >向上複製</a
2836
+ >
2837
+ <div type="button" class="bt" style="background:none;"
2838
+ data-bs-toggle="dropdown" aria-haspopup="true"
2839
+ aria-expanded="false">
2840
+ <i class="fa-sharp fa-regular fa-scissors"></i>
2841
+ </div>
2842
+ <div
2843
+ class="dropdown-menu mx-1 "
2844
+ style="height: 135px;"
2845
+ onclick="${gvc.event((e, event) => {
2846
+ toggle = false;
2847
+ event.stopPropagation();
2848
+ })}"
2649
2849
  >
2650
- <hr class="dropdown-divider" />
2651
- <a
2652
- class="dropdown-item"
2653
- onclick="${gvc.event((e, event) => {
2654
- ($(e).parent().parent().children('.bt') as any).dropdown('hide');
2655
- navigator.clipboard.writeText(JSON.stringify(original[index]));
2656
- })}"
2850
+ <a
2851
+ class="dropdown-item"
2852
+ onclick="${gvc.event((e, event) => {
2853
+ addIt(0, event);
2854
+ })}"
2855
+ >向上複製</a
2856
+ >
2857
+ <hr class="dropdown-divider"/>
2858
+ <a
2859
+ class="dropdown-item"
2860
+ onclick="${gvc.event((e, event) => {
2861
+ ($(e).parent().parent().children('.bt') as any).dropdown('hide');
2862
+ navigator.clipboard.writeText(JSON.stringify(original[index]));
2863
+ })}"
2657
2864
  >複製到剪貼簿</a
2658
- >
2659
- <hr class="dropdown-divider" />
2660
- <a
2661
- class="dropdown-item"
2662
- onclick="${gvc.event((e, event) => {
2663
- ($(e).parent().parent().children('.bt') as any).dropdown('hide');
2664
- addIt(1, event);
2665
- })}"
2865
+ >
2866
+ <hr class="dropdown-divider"/>
2867
+ <a
2868
+ class="dropdown-item"
2869
+ onclick="${gvc.event((e, event) => {
2870
+ ($(e).parent().parent().children('.bt') as any).dropdown('hide');
2871
+ addIt(1, event);
2872
+ })}"
2666
2873
  >向下複製</a
2667
- >
2668
- </div>
2669
- </div>`;
2874
+ >
2875
+ </div>
2876
+ </div>`;
2670
2877
  })()}
2671
2878
  <div class="dragItem subBt ${obj.draggable === false || dd.draggable === false ? `d-none` : ``} ${obj.position ? `d-none` : ``}">
2672
- <i class="fa-solid fa-grip-dots-vertical d-flex align-items-center justify-content-center " style="width:15px;height:15px;"></i>
2879
+ <i class="fa-solid fa-grip-dots-vertical d-flex align-items-center justify-content-center "
2880
+ style="width:15px;height:15px;"></i>
2673
2881
  </div>
2674
2882
  </div>
2675
2883
  </li>
@@ -2680,7 +2888,7 @@ ${obj.gvc.bindView(() => {
2680
2888
  divCreate: {
2681
2889
  class: `d-flex flex-column ${child ? `` : ``} m-0 p-0 position-relative`,
2682
2890
  elem: 'ul',
2683
- option: [{ key: 'id', value: parId }],
2891
+ option: [{key: 'id', value: parId}],
2684
2892
  },
2685
2893
  onCreate: () => {
2686
2894
  if (obj.draggable !== false) {
@@ -2707,7 +2915,8 @@ ${obj.gvc.bindView(() => {
2707
2915
  animation: 100,
2708
2916
  handle: '.dragItem',
2709
2917
  // Called when dragging element changes position
2710
- onChange: function (evt: any) {},
2918
+ onChange: function (evt: any) {
2919
+ },
2711
2920
  onStart: function (evt: any) {
2712
2921
  startIndex = evt.oldIndex;
2713
2922
  },
@@ -2716,7 +2925,8 @@ ${obj.gvc.bindView(() => {
2716
2925
  obj.refreshComponent(evt.oldIndex, evt.newIndex);
2717
2926
  },
2718
2927
  });
2719
- } catch (e) {}
2928
+ } catch (e) {
2929
+ }
2720
2930
  clearInterval(interval);
2721
2931
  }
2722
2932
  }, 100);
@@ -2725,79 +2935,86 @@ ${obj.gvc.bindView(() => {
2725
2935
  };
2726
2936
  }) +
2727
2937
  (obj.plus
2728
- ? html` <div class="btn-group mt-2 ps-1 pe-2 w-100 border-bottom pb-2 align-items-center">
2729
- <div class="btn-outline-secondary-c btn ms-2 " style="height:30px;flex:1;" onclick="${obj.plus!.event}"><i class="fa-regular fa-circle-plus me-2"></i>${obj.plus!.title}</div>
2730
- ${(() => {
2731
- if (obj.copyable === false) {
2732
- return ``;
2733
- }
2734
- let interval: any = undefined;
2735
- return html` <div
2736
- type="button"
2737
- class="bt ms-1"
2738
- style="background:none;"
2739
- data-bs-toggle="dropdown"
2740
- aria-haspopup="true"
2741
- data-placement="right"
2742
- aria-expanded="false"
2743
- onclick="${gvc.event(() => {
2744
- async function readClipboardContent() {
2745
- try {
2746
- // 使用 navigator.clipboard.readText() 方法取得剪貼簿的文字內容
2747
- const clipboardText: any = await navigator.clipboard.readText();
2748
- try {
2749
- const data = JSON.parse(clipboardText);
2750
- if (Array.isArray(data)) {
2751
- data.map((dd) => {
2752
- obj.originalArray.push(dd);
2753
- });
2754
- } else {
2755
- obj.originalArray.push(data);
2756
- }
2757
-
2758
- gvc.notifyDataChange(viewId);
2759
- obj.refreshComponent();
2760
- } catch (e) {
2761
- alert('請貼上JSON格式');
2762
- }
2763
- } catch (error) {
2764
- // 處理錯誤，例如未授權或不支援
2765
- console.error('無法取得剪貼簿內容:', error);
2766
- }
2767
- }
2768
-
2769
- readClipboardContent();
2770
- })}"
2771
- >
2772
- <i class="fa-regular fa-paste"></i>
2773
- </div>`;
2774
- })()}
2775
- </div>`
2938
+ ? html`
2939
+ <div class="btn-group mt-2 ps-1 pe-2 w-100 border-bottom pb-2 align-items-center">
2940
+ <div class="btn-outline-secondary-c btn ms-2 " style="height:30px;flex:1;"
2941
+ onclick="${obj.plus!.event}"><i
2942
+ class="fa-regular fa-circle-plus me-2"></i>${obj.plus!.title}
2943
+ </div>
2944
+ ${(() => {
2945
+ if (obj.copyable === false) {
2946
+ return ``;
2947
+ }
2948
+ let interval: any = undefined;
2949
+ return html`
2950
+ <div
2951
+ type="button"
2952
+ class="bt ms-1"
2953
+ style="background:none;"
2954
+ data-bs-toggle="dropdown"
2955
+ aria-haspopup="true"
2956
+ data-placement="right"
2957
+ aria-expanded="false"
2958
+ onclick="${gvc.event(() => {
2959
+ async function readClipboardContent() {
2960
+ try {
2961
+ // 使用 navigator.clipboard.readText() 方法取得剪貼簿的文字內容
2962
+ const clipboardText: any = await navigator.clipboard.readText();
2963
+ try {
2964
+ const data = JSON.parse(clipboardText);
2965
+ if (Array.isArray(data)) {
2966
+ data.map((dd) => {
2967
+ obj.originalArray.push(dd);
2968
+ });
2969
+ } else {
2970
+ obj.originalArray.push(data);
2971
+ }
2972
+
2973
+ gvc.notifyDataChange(viewId);
2974
+ obj.refreshComponent();
2975
+ } catch (e) {
2976
+ alert('請貼上JSON格式');
2977
+ }
2978
+ } catch (error) {
2979
+ // 處理錯誤，例如未授權或不支援
2980
+ console.error('無法取得剪貼簿內容:', error);
2981
+ }
2982
+ }
2983
+
2984
+ readClipboardContent();
2985
+ })}"
2986
+ >
2987
+ <i class="fa-regular fa-paste"></i>
2988
+ </div>`;
2989
+ })()}
2990
+ </div>`
2776
2991
  : ``)
2777
2992
  );
2778
2993
  }
2779
2994
 
2780
2995
  return (
2781
2996
  (obj.title
2782
- ? html` <div class="d-flex px-2 hi fw-bold d-flex align-items-center border-bottom py-2 border-top bgf6" style="color:#151515;font-size:16px;gap:0px;height:48px;">
2783
- ${obj.title}
2784
- <div class="flex-fill"></div>
2785
- ${obj.copyable !== false
2786
- ? html`
2787
- <div
2788
- class="d-flex align-items-center justify-content-center hoverBtn me-2 border"
2789
- style="height:30px;width:30px;border-radius:6px;cursor:pointer;color:#151515;"
2790
- onclick="${gvc.event(() => {
2791
- navigator.clipboard.writeText(JSON.stringify(obj.originalArray));
2792
- const dialog = new ShareDialog(gvc.glitter);
2793
- dialog.successMessage({ text: '已複製至剪貼簿!' });
2794
- })}"
2795
- >
2796
- <i class="fa-sharp fa-regular fa-scissors" aria-hidden="true"></i>
2797
- </div>
2798
- `
2799
- : ``}
2800
- </div>`
2997
+ ? html`
2998
+ <div class="d-flex px-2 hi fw-bold d-flex align-items-center border-bottom py-2 border-top bgf6"
2999
+ style="color:#151515;font-size:16px;gap:0px;height:48px;">
3000
+ ${obj.title}
3001
+ <div class="flex-fill"></div>
3002
+ ${obj.copyable !== false
3003
+ ? html`
3004
+ <div
3005
+ class="d-flex align-items-center justify-content-center hoverBtn me-2 border"
3006
+ style="height:30px;width:30px;border-radius:6px;cursor:pointer;color:#151515;"
3007
+ onclick="${gvc.event(() => {
3008
+ navigator.clipboard.writeText(JSON.stringify(obj.originalArray));
3009
+ const dialog = new ShareDialog(gvc.glitter);
3010
+ dialog.successMessage({text: '已複製至剪貼簿!'});
3011
+ })}"
3012
+ >
3013
+ <i class="fa-sharp fa-regular fa-scissors" aria-hidden="true"></i>
3014
+ </div>
3015
+ `
3016
+ : ``}
3017
+ </div>`
2801
3018
  : ``) +
2802
3019
  gvc.bindView(() => {
2803
3020
  return {
@@ -2860,8 +3077,10 @@ ${obj.gvc.bindView(() => {
2860
3077
  src: `https://raw.githack.com/SortableJS/Sortable/master/Sortable.js`,
2861
3078
  },
2862
3079
  ],
2863
- () => {},
2864
- () => {}
3080
+ () => {
3081
+ },
3082
+ () => {
3083
+ }
2865
3084
  );
2866
3085
  if (obj.hoverGray) {
2867
3086
  gvc.addStyle(`
@@ -2888,94 +3107,103 @@ ${obj.gvc.bindView(() => {
2888
3107
  event.stopPropagation();
2889
3108
  });
2890
3109
  return html`
2891
- <li class="btn-group" style="margin-top:1px;margin-bottom:1px;${obj.hr ? `border-bottom: 1px solid #f6f6f6; ` : ``};">
3110
+ <li class="btn-group"
3111
+ style="margin-top:1px;margin-bottom:1px;${obj.hr ? `border-bottom: 1px solid #f6f6f6; ` : ``};">
2892
3112
  <div
2893
- class="h-auto align-items-center px-2 my-0 hi me-n1 ${dd.isSelect ? `bgf6 border` : ``}"
2894
- style="cursor: pointer;min-height:36px;width: calc(100% - 10px);display: flex;font-size: 14px;line-height: 20px;font-weight: 500;text-rendering: optimizelegibility;user-select: none;margin: 5px 10px;"
2895
- onclick="${gvc.event(() => {
2896
- if (!dd.innerHtml) {
2897
- return;
2898
- }
2899
- if (obj.customEditor) {
2900
- dd.innerHtml(gvc);
2901
- } else if (original[index]) {
2902
- const originalData = JSON.parse(JSON.stringify(original[index]));
2903
- gvc.glitter.innerDialog((gvc: GVC) => {
2904
- return html` <div
2905
- class="dropdown-menu mx-0 position-fixed pb-0 border p-0 show"
2906
- style="z-index:999999;${dd.width ? `width:${dd.width + ';'}` : ``}"
2907
- onclick="${gvc.event((e: any, event: any) => {
2908
- event.preventDefault();
2909
- event.stopPropagation();
2910
- })}"
2911
- >
2912
- <div class="d-flex align-items-center px-2 border-bottom" style="height:50px;min-width:400px;">
2913
- <h3 style="font-size:15px;font-weight:500;" class="m-0">${dd.editTitle ? dd.editTitle : `編輯項目「${dd.title}」`}</h3>
2914
- <div class="flex-fill"></div>
2915
- <div
2916
- class="hoverBtn p-2"
2917
- data-bs-toggle="dropdown"
2918
- aria-haspopup="true"
2919
- aria-expanded="false"
2920
- style="color:black;font-size:20px;"
2921
- onclick="${gvc.event((e: any, event: any) => {
2922
- original[index] = originalData;
2923
- gvc.closeDialog();
2924
- obj.refreshComponent();
2925
- })}"
2926
- >
2927
- <i class="fa-sharp fa-regular fa-circle-xmark"></i>
2928
- </div>
2929
- </div>
2930
- <div class="px-2" style="max-height:calc(100vh - 150px);overflow-y:auto;">${dd.innerHtml(gvc)}</div>
2931
- <div class="d-flex w-100 p-2 border-top ${dd.saveAble === false ? `d-none` : ``}">
2932
- <div class="flex-fill"></div>
2933
- <div
2934
- class="btn btn-secondary"
2935
- style="height:40px;width:80px;"
2936
- onclick="${gvc.event(() => {
2937
- original[index] = originalData;
2938
- gvc.closeDialog();
2939
- obj.refreshComponent();
2940
- })}"
2941
- >
2942
- 取消
2943
- </div>
3113
+ class="h-auto align-items-center px-2 my-0 hi me-n1 ${dd.isSelect ? `bgf6 border` : ``}"
3114
+ style="cursor: pointer;min-height:36px;width: calc(100% - 10px);display: flex;font-size: 14px;line-height: 20px;font-weight: 500;text-rendering: optimizelegibility;user-select: none;margin: 5px 10px;"
3115
+ onclick="${gvc.event(() => {
3116
+ if (!dd.innerHtml) {
3117
+ return;
3118
+ }
3119
+ if (obj.customEditor) {
3120
+ dd.innerHtml(gvc);
3121
+ } else if (original[index]) {
3122
+ const originalData = JSON.parse(JSON.stringify(original[index]));
3123
+ gvc.glitter.innerDialog((gvc: GVC) => {
3124
+ return html`
2944
3125
  <div
2945
- class="btn btn-primary-c ms-2"
2946
- style="height:40px;width:80px;"
2947
- onclick="${gvc.event(() => {
2948
- gvc.closeDialog();
2949
- (dd.saveEvent && dd.saveEvent()) || obj.refreshComponent();
2950
- })}"
3126
+ class="dropdown-menu mx-0 position-fixed pb-0 border p-0 show"
3127
+ style="z-index:999999;${dd.width ? `width:${dd.width + ';'}` : ``}"
3128
+ onclick="${gvc.event((e: any, event: any) => {
3129
+ event.preventDefault();
3130
+ event.stopPropagation();
3131
+ })}"
2951
3132
  >
2952
- <i class="fa-solid fa-floppy-disk me-2"></i>儲存
2953
- </div>
2954
- </div>
2955
- </div>`;
2956
- }, glitter.getUUID());
2957
- }
2958
- })}"
2959
- >
2960
- <div
2961
- class="subBt ms-n2 ${obj.minus === false ? `d-none` : ``}"
2962
- onclick="${gvc.event((e: any, event: any) => {
2963
- if (obj.minusEvent) {
2964
- obj.minusEvent(obj.originalArray, index);
2965
- } else {
2966
- obj.originalArray.splice(index, 1);
2967
- obj.refreshComponent();
3133
+ <div class="d-flex align-items-center px-2 border-bottom"
3134
+ style="height:50px;min-width:400px;">
3135
+ <h3 style="font-size:15px;font-weight:500;"
3136
+ class="m-0">
3137
+ ${dd.editTitle ? dd.editTitle : `編輯項目「${dd.title}」`}</h3>
3138
+ <div class="flex-fill"></div>
3139
+ <div
3140
+ class="hoverBtn p-2"
3141
+ data-bs-toggle="dropdown"
3142
+ aria-haspopup="true"
3143
+ aria-expanded="false"
3144
+ style="color:black;font-size:20px;"
3145
+ onclick="${gvc.event((e: any, event: any) => {
3146
+ original[index] = originalData;
3147
+ gvc.closeDialog();
3148
+ obj.refreshComponent();
3149
+ })}"
3150
+ >
3151
+ <i class="fa-sharp fa-regular fa-circle-xmark"></i>
3152
+ </div>
3153
+ </div>
3154
+ <div class="px-2"
3155
+ style="max-height:calc(100vh - 150px);overflow-y:auto;">
3156
+ ${dd.innerHtml(gvc)}
3157
+ </div>
3158
+ <div class="d-flex w-100 p-2 border-top ${dd.saveAble === false ? `d-none` : ``}">
3159
+ <div class="flex-fill"></div>
3160
+ <div
3161
+ class="btn btn-secondary"
3162
+ style="height:40px;width:80px;"
3163
+ onclick="${gvc.event(() => {
3164
+ original[index] = originalData;
3165
+ gvc.closeDialog();
3166
+ obj.refreshComponent();
3167
+ })}"
3168
+ >
3169
+ 取消
3170
+ </div>
3171
+ <div
3172
+ class="btn btn-primary-c ms-2"
3173
+ style="height:40px;width:80px;"
3174
+ onclick="${gvc.event(() => {
3175
+ gvc.closeDialog();
3176
+ (dd.saveEvent && dd.saveEvent()) || obj.refreshComponent();
3177
+ })}"
3178
+ >
3179
+ <i class="fa-solid fa-floppy-disk me-2"></i>儲存
3180
+ </div>
3181
+ </div>
3182
+ </div>`;
3183
+ }, glitter.getUUID());
2968
3184
  }
2969
- gvc.notifyDataChange(viewId);
2970
- event.stopPropagation();
2971
3185
  })}"
3186
+ >
3187
+ <div
3188
+ class="subBt ms-n2 ${obj.minus === false ? `d-none` : ``}"
3189
+ onclick="${gvc.event((e: any, event: any) => {
3190
+ if (obj.minusEvent) {
3191
+ obj.minusEvent(obj.originalArray, index);
3192
+ } else {
3193
+ obj.originalArray.splice(index, 1);
3194
+ obj.refreshComponent();
3195
+ }
3196
+ gvc.notifyDataChange(viewId);
3197
+ event.stopPropagation();
3198
+ })}"
2972
3199
  >
2973
- <i class="fa-regular fa-circle-minus d-flex align-items-center justify-content-center subBt " style="width:15px;height:15px;color:red;"></i>
3200
+ <i class="fa-regular fa-circle-minus d-flex align-items-center justify-content-center subBt "
3201
+ style="width:15px;height:15px;color:red;"></i>
2974
3202
  </div>
2975
3203
  <div class="subBt ${obj.draggable === false || dd.draggable === false ? `d-none` : ``} ${obj.position ? `` : `d-none`}">
2976
3204
  <i
2977
- class="dragItem fa-solid fa-grip-dots-vertical d-flex align-items-center justify-content-center "
2978
- style="width:15px;height:15px;padding-right: 14px;"
3205
+ class="dragItem fa-solid fa-grip-dots-vertical d-flex align-items-center justify-content-center "
3206
+ style="width:15px;height:15px;padding-right: 14px;"
2979
3207
  ></i>
2980
3208
  </div>
2981
3209
  ${dd.title}
@@ -2995,61 +3223,65 @@ ${obj.gvc.bindView(() => {
2995
3223
  }
2996
3224
 
2997
3225
  let toggle = false;
2998
- return html` <div
2999
- class="btn-group dropend subBt"
3000
- style="position: relative;"
3001
- onclick="${gvc.event((e, event) => {
3002
- toggle = !toggle;
3003
- if (toggle) {
3004
- ($(e).children('.bt') as any).dropdown('show');
3005
- $(e).children('.dropdown-menu').css('top', `${0}px`);
3006
- } else {
3007
- ($(e).children('.bt') as any).dropdown('hide');
3008
- }
3009
- event.stopPropagation();
3010
- })}"
3011
- >
3012
- <div type="button" class="bt" style="background:none;" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3013
- <i class="fa-sharp fa-regular fa-scissors"></i>
3014
- </div>
3226
+ return html`
3015
3227
  <div
3016
- class="dropdown-menu mx-1 "
3017
- style="height: 135px;"
3018
- onclick="${gvc.event((e, event) => {
3019
- toggle = false;
3020
- event.stopPropagation();
3021
- })}"
3022
- >
3023
- <a
3024
- class="dropdown-item"
3228
+ class="btn-group dropend subBt"
3229
+ style="position: relative;"
3025
3230
  onclick="${gvc.event((e, event) => {
3026
- addIt(0, event);
3231
+ toggle = !toggle;
3232
+ if (toggle) {
3233
+ ($(e).children('.bt') as any).dropdown('show');
3234
+ $(e).children('.dropdown-menu').css('top', `${0}px`);
3235
+ } else {
3236
+ ($(e).children('.bt') as any).dropdown('hide');
3237
+ }
3238
+ event.stopPropagation();
3027
3239
  })}"
3028
- >向上複製</a
3240
+ >
3241
+ <div type="button" class="bt" style="background:none;"
3242
+ data-bs-toggle="dropdown" aria-haspopup="true"
3243
+ aria-expanded="false">
3244
+ <i class="fa-sharp fa-regular fa-scissors"></i>
3245
+ </div>
3246
+ <div
3247
+ class="dropdown-menu mx-1 "
3248
+ style="height: 135px;"
3249
+ onclick="${gvc.event((e, event) => {
3250
+ toggle = false;
3251
+ event.stopPropagation();
3252
+ })}"
3029
3253
  >
3030
- <hr class="dropdown-divider" />
3031
- <a
3032
- class="dropdown-item"
3033
- onclick="${gvc.event((e, event) => {
3034
- ($(e).parent().parent().children('.bt') as any).dropdown('hide');
3035
- navigator.clipboard.writeText(JSON.stringify(original[index]));
3036
- })}"
3254
+ <a
3255
+ class="dropdown-item"
3256
+ onclick="${gvc.event((e, event) => {
3257
+ addIt(0, event);
3258
+ })}"
3259
+ >向上複製</a
3260
+ >
3261
+ <hr class="dropdown-divider"/>
3262
+ <a
3263
+ class="dropdown-item"
3264
+ onclick="${gvc.event((e, event) => {
3265
+ ($(e).parent().parent().children('.bt') as any).dropdown('hide');
3266
+ navigator.clipboard.writeText(JSON.stringify(original[index]));
3267
+ })}"
3037
3268
  >複製到剪貼簿</a
3038
- >
3039
- <hr class="dropdown-divider" />
3040
- <a
3041
- class="dropdown-item"
3042
- onclick="${gvc.event((e, event) => {
3043
- ($(e).parent().parent().children('.bt') as any).dropdown('hide');
3044
- addIt(1, event);
3045
- })}"
3269
+ >
3270
+ <hr class="dropdown-divider"/>
3271
+ <a
3272
+ class="dropdown-item"
3273
+ onclick="${gvc.event((e, event) => {
3274
+ ($(e).parent().parent().children('.bt') as any).dropdown('hide');
3275
+ addIt(1, event);
3276
+ })}"
3046
3277
  >向下複製</a
3047
- >
3048
- </div>
3049
- </div>`;
3278
+ >
3279
+ </div>
3280
+ </div>`;
3050
3281
  })()}
3051
3282
  <div class="dragItem subBt ${obj.draggable === false || dd.draggable === false ? `d-none` : ``} ${obj.position ? `d-none` : ``}">
3052
- <i class="fa-solid fa-grip-dots-vertical d-flex align-items-center justify-content-center " style="width:15px;height:15px;"></i>
3283
+ <i class="fa-solid fa-grip-dots-vertical d-flex align-items-center justify-content-center "
3284
+ style="width:15px;height:15px;"></i>
3053
3285
  </div>
3054
3286
  </div>
3055
3287
  </li>
@@ -3060,7 +3292,7 @@ ${obj.gvc.bindView(() => {
3060
3292
  divCreate: {
3061
3293
  class: `d-flex flex-column ${child ? `` : ``} m-0 p-0 position-relative`,
3062
3294
  elem: 'ul',
3063
- option: [{ key: 'id', value: parId }],
3295
+ option: [{key: 'id', value: parId}],
3064
3296
  },
3065
3297
  onCreate: () => {
3066
3298
  if (obj.draggable !== false) {
@@ -3087,7 +3319,8 @@ ${obj.gvc.bindView(() => {
3087
3319
  animation: 100,
3088
3320
  handle: '.dragItem',
3089
3321
  // Called when dragging element changes position
3090
- onChange: function (evt: any) {},
3322
+ onChange: function (evt: any) {
3323
+ },
3091
3324
  onStart: function (evt: any) {
3092
3325
  startIndex = evt.oldIndex;
3093
3326
  },
@@ -3096,7 +3329,8 @@ ${obj.gvc.bindView(() => {
3096
3329
  obj.refreshComponent(evt.oldIndex, evt.newIndex);
3097
3330
  },
3098
3331
  });
3099
- } catch (e) {}
3332
+ } catch (e) {
3333
+ }
3100
3334
  clearInterval(interval);
3101
3335
  }
3102
3336
  }, 100);
@@ -3105,79 +3339,86 @@ ${obj.gvc.bindView(() => {
3105
3339
  };
3106
3340
  }) +
3107
3341
  (obj.plus
3108
- ? html` <div class="btn-group mt-2 ps-1 pe-2 w-100 border-bottom pb-2 align-items-center">
3109
- <div class="btn-outline-secondary-c btn ms-2 " style="height:30px;flex:1;" onclick="${obj.plus!.event}"><i class="fa-regular fa-circle-plus me-2"></i>${obj.plus!.title}</div>
3110
- ${(() => {
3111
- if (obj.copyable === false) {
3112
- return ``;
3113
- }
3114
- let interval: any = undefined;
3115
- return html` <div
3116
- type="button"
3117
- class="bt ms-1"
3118
- style="background:none;"
3119
- data-bs-toggle="dropdown"
3120
- aria-haspopup="true"
3121
- data-placement="right"
3122
- aria-expanded="false"
3123
- onclick="${gvc.event(() => {
3124
- async function readClipboardContent() {
3125
- try {
3126
- // 使用 navigator.clipboard.readText() 方法取得剪貼簿的文字內容
3127
- const clipboardText: any = await navigator.clipboard.readText();
3128
- try {
3129
- const data = JSON.parse(clipboardText);
3130
- if (Array.isArray(data)) {
3131
- data.map((dd) => {
3132
- obj.originalArray.push(dd);
3133
- });
3134
- } else {
3135
- obj.originalArray.push(data);
3136
- }
3137
-
3138
- gvc.notifyDataChange(viewId);
3139
- obj.refreshComponent();
3140
- } catch (e) {
3141
- alert('請貼上JSON格式');
3142
- }
3143
- } catch (error) {
3144
- // 處理錯誤，例如未授權或不支援
3145
- console.error('無法取得剪貼簿內容:', error);
3146
- }
3147
- }
3148
-
3149
- readClipboardContent();
3150
- })}"
3151
- >
3152
- <i class="fa-regular fa-paste"></i>
3153
- </div>`;
3154
- })()}
3155
- </div>`
3342
+ ? html`
3343
+ <div class="btn-group mt-2 ps-1 pe-2 w-100 border-bottom pb-2 align-items-center">
3344
+ <div class="btn-outline-secondary-c btn ms-2 " style="height:30px;flex:1;"
3345
+ onclick="${obj.plus!.event}"><i
3346
+ class="fa-regular fa-circle-plus me-2"></i>${obj.plus!.title}
3347
+ </div>
3348
+ ${(() => {
3349
+ if (obj.copyable === false) {
3350
+ return ``;
3351
+ }
3352
+ let interval: any = undefined;
3353
+ return html`
3354
+ <div
3355
+ type="button"
3356
+ class="bt ms-1"
3357
+ style="background:none;"
3358
+ data-bs-toggle="dropdown"
3359
+ aria-haspopup="true"
3360
+ data-placement="right"
3361
+ aria-expanded="false"
3362
+ onclick="${gvc.event(() => {
3363
+ async function readClipboardContent() {
3364
+ try {
3365
+ // 使用 navigator.clipboard.readText() 方法取得剪貼簿的文字內容
3366
+ const clipboardText: any = await navigator.clipboard.readText();
3367
+ try {
3368
+ const data = JSON.parse(clipboardText);
3369
+ if (Array.isArray(data)) {
3370
+ data.map((dd) => {
3371
+ obj.originalArray.push(dd);
3372
+ });
3373
+ } else {
3374
+ obj.originalArray.push(data);
3375
+ }
3376
+
3377
+ gvc.notifyDataChange(viewId);
3378
+ obj.refreshComponent();
3379
+ } catch (e) {
3380
+ alert('請貼上JSON格式');
3381
+ }
3382
+ } catch (error) {
3383
+ // 處理錯誤，例如未授權或不支援
3384
+ console.error('無法取得剪貼簿內容:', error);
3385
+ }
3386
+ }
3387
+
3388
+ readClipboardContent();
3389
+ })}"
3390
+ >
3391
+ <i class="fa-regular fa-paste"></i>
3392
+ </div>`;
3393
+ })()}
3394
+ </div>`
3156
3395
  : ``)
3157
3396
  );
3158
3397
  }
3159
3398
 
3160
3399
  return (
3161
3400
  (obj.title
3162
- ? html` <div class="d-flex px-2 hi fw-bold d-flex align-items-center border-bottom py-2 border-top bgf6" style="color:#151515;font-size:16px;gap:0px;height:48px;">
3163
- ${obj.title}
3164
- <div class="flex-fill"></div>
3165
- ${obj.copyable !== false
3166
- ? html`
3167
- <div
3168
- class="d-flex align-items-center justify-content-center hoverBtn me-2 border"
3169
- style="height:30px;width:30px;border-radius:6px;cursor:pointer;color:#151515;"
3170
- onclick="${gvc.event(() => {
3171
- navigator.clipboard.writeText(JSON.stringify(obj.originalArray));
3172
- const dialog = new ShareDialog(gvc.glitter);
3173
- dialog.successMessage({ text: '已複製至剪貼簿!' });
3174
- })}"
3175
- >
3176
- <i class="fa-sharp fa-regular fa-scissors" aria-hidden="true"></i>
3177
- </div>
3178
- `
3179
- : ``}
3180
- </div>`
3401
+ ? html`
3402
+ <div class="d-flex px-2 hi fw-bold d-flex align-items-center border-bottom py-2 border-top bgf6"
3403
+ style="color:#151515;font-size:16px;gap:0px;height:48px;">
3404
+ ${obj.title}
3405
+ <div class="flex-fill"></div>
3406
+ ${obj.copyable !== false
3407
+ ? html`
3408
+ <div
3409
+ class="d-flex align-items-center justify-content-center hoverBtn me-2 border"
3410
+ style="height:30px;width:30px;border-radius:6px;cursor:pointer;color:#151515;"
3411
+ onclick="${gvc.event(() => {
3412
+ navigator.clipboard.writeText(JSON.stringify(obj.originalArray));
3413
+ const dialog = new ShareDialog(gvc.glitter);
3414
+ dialog.successMessage({text: '已複製至剪貼簿!'});
3415
+ })}"
3416
+ >
3417
+ <i class="fa-sharp fa-regular fa-scissors" aria-hidden="true"></i>
3418
+ </div>
3419
+ `
3420
+ : ``}
3421
+ </div>`
3181
3422
  : ``) +
3182
3423
  gvc.bindView(() => {
3183
3424
  return {
@@ -3198,115 +3439,130 @@ ${obj.gvc.bindView(() => {
3198
3439
  }
3199
3440
 
3200
3441
  public static buttonPrimary(title: string, event: string) {
3201
- return html` <button type="button" class="btn btn-primary-c w-100" onclick="${event}">${title}</button>`;
3442
+ return html`
3443
+ <button type="button" class="btn btn-primary-c w-100" onclick="${event}">${title}</button>`;
3202
3444
  }
3203
3445
 
3204
3446
  public static buttonNormal(title: string, event: string) {
3205
- return html` <button type="button" class="btn w-100" style="background:white;width:calc(100%);border-radius:8px;min-height:45px;border:1px solid black;color:#151515;" onclick="${event}">
3206
- ${title}
3207
- </button>`;
3447
+ return html`
3448
+ <button type="button" class="btn w-100"
3449
+ style="background:white;width:calc(100%);border-radius:8px;min-height:45px;border:1px solid black;color:#151515;"
3450
+ onclick="${event}">
3451
+ ${title}
3452
+ </button>`;
3208
3453
  }
3209
3454
 
3210
3455
  public static openEditorDialog(gvc: GVC, inner: (gvc: GVC) => string, close: () => any, width?: number, title?: string, tag?: string) {
3211
3456
  return gvc.glitter.innerDialog((gvc: GVC) => {
3212
- return html` <div
3213
- class="dropdown-menu mx-0 position-fixed pb-0 border p-0 show "
3214
- style="z-index:999999;max-height: calc(100vh - 20px);"
3215
- onclick="${gvc.event((e: any, event: any) => {
3216
- event.preventDefault();
3217
- event.stopPropagation();
3218
- })}"
3219
- >
3457
+ return html`
3220
3458
  <div
3221
- class="d-flex align-items-center px-2 border-bottom"
3222
- style="height:50px;width: ${width ||
3223
- gvc.glitter.ut.frSize(
3224
- {
3225
- 1400: 1200,
3226
- 1600: 1400,
3227
- 1900: 1600,
3228
- },
3229
- '1200'
3230
- )}px;"
3459
+ class="dropdown-menu mx-0 position-fixed pb-0 border p-0 show "
3460
+ style="z-index:999999;max-height: calc(100vh - 20px);"
3461
+ onclick="${gvc.event((e: any, event: any) => {
3462
+ event.preventDefault();
3463
+ event.stopPropagation();
3464
+ })}"
3231
3465
  >
3232
- <h3 style="font-size:15px;font-weight:500;" class="m-0">${title ?? `代碼編輯`}</h3>
3233
- <div class="flex-fill"></div>
3234
3466
  <div
3235
- class="hoverBtn p-2"
3467
+ class="d-flex align-items-center px-2 border-bottom"
3468
+ style="height:50px;width: ${width ||
3469
+ gvc.glitter.ut.frSize(
3470
+ {
3471
+ 1400: 1200,
3472
+ 1600: 1400,
3473
+ 1900: 1600,
3474
+ },
3475
+ '1200'
3476
+ )}px;"
3477
+ >
3478
+ <h3 style="font-size:15px;font-weight:500;" class="m-0">${title ?? `代碼編輯`}</h3>
3479
+ <div class="flex-fill"></div>
3480
+ <div
3481
+ class="hoverBtn p-2"
3482
+ data-bs-toggle="dropdown"
3483
+ aria-haspopup="true"
3484
+ aria-expanded="false"
3485
+ style="color:black;font-size:20px;"
3486
+ onclick="${gvc.event(async (e: any, event: any) => {
3487
+ let wait_promise = close();
3488
+ if (wait_promise && wait_promise.then) {
3489
+ wait_promise = await wait_promise;
3490
+ }
3491
+ if (wait_promise !== false) {
3492
+ gvc.closeDialog();
3493
+ }
3494
+ })}"
3495
+ >
3496
+ <i class="fa-sharp fa-regular fa-circle-xmark"></i>
3497
+ </div>
3498
+ </div>
3499
+ <div
3500
+ class=""
3501
+ style="max-height:calc(100vh - 150px);overflow-y:auto;width: ${width ||
3502
+ gvc.glitter.ut.frSize(
3503
+ {
3504
+ 1400: 1200,
3505
+ 1600: 1400,
3506
+ 1900: 1600,
3507
+ },
3508
+ '1200'
3509
+ )}px;"
3510
+ >
3511
+ ${inner(gvc)}
3512
+ </div>
3513
+ </div>`;
3514
+ }, tag ?? gvc.glitter.getUUID());
3515
+ }
3516
+
3517
+ public static btnGroup(obj: {
3518
+ gvc: GVC;
3519
+ inner: string;
3520
+ style?: string;
3521
+ classS?: string;
3522
+ dropDownStyle?: string;
3523
+ top?: number;
3524
+ fontawesome: string
3525
+ }) {
3526
+ const gvc = obj.gvc;
3527
+ let interval: any = undefined;
3528
+ return html`
3529
+ <div class="position-relative btn-group dropend subBt my-auto ms-1 ${obj.classS ?? ''}"
3530
+ style="${obj.style ?? ''}">
3531
+ <div
3532
+ type="button"
3533
+ class="bt"
3534
+ style="background:none;"
3236
3535
  data-bs-toggle="dropdown"
3237
3536
  aria-haspopup="true"
3537
+ data-placement="left"
3238
3538
  aria-expanded="false"
3239
- style="color:black;font-size:20px;"
3240
- onclick="${gvc.event(async (e: any, event: any) => {
3241
- let wait_promise = close();
3242
- if (wait_promise && wait_promise.then) {
3243
- wait_promise = await wait_promise;
3244
- }
3245
- if (wait_promise !== false) {
3246
- gvc.closeDialog();
3247
- }
3539
+ onclick="${gvc.event((e, event) => {
3540
+ // ($(e).children('.bt') as any).dropdown('show');
3541
+ // setTimeout(()=>{
3542
+ setTimeout(() => {
3543
+ obj.top && $(e).parent().children('.dropdown-menu').css('top', `${obj.top}px`);
3544
+ // $(e).parent().children('.dropdown-menu').css('left', `${-300}px`);
3545
+ }, 100);
3546
+ event.stopPropagation();
3547
+ event.preventDefault();
3248
3548
  })}"
3249
- >
3250
- <i class="fa-sharp fa-regular fa-circle-xmark"></i>
3251
- </div>
3549
+ >
3550
+ ${obj.fontawesome}
3252
3551
  </div>
3253
3552
  <div
3254
- class=""
3255
- style="max-height:calc(100vh - 150px);overflow-y:auto;width: ${width ||
3256
- gvc.glitter.ut.frSize(
3257
- {
3258
- 1400: 1200,
3259
- 1600: 1400,
3260
- 1900: 1600,
3261
- },
3262
- '1200'
3263
- )}px;"
3553
+ class="dropdown-menu mx-1"
3554
+ data-placement="right"
3555
+ onmouseover="${obj.gvc.event((e, event) => {
3556
+ clearInterval(interval);
3557
+ })}"
3558
+ onmouseout="${obj.gvc.event((e, event) => {
3559
+ ($(e).children('.bt') as any).dropdown('hide');
3560
+ })}"
3561
+ style="min-height: 150px;${obj.dropDownStyle}"
3264
3562
  >
3265
- ${inner(gvc)}
3563
+ <div class="px-2">${obj.inner}</div>
3266
3564
  </div>
3267
3565
  </div>`;
3268
- }, tag ?? gvc.glitter.getUUID());
3269
- }
3270
-
3271
- public static btnGroup(obj: { gvc: GVC; inner: string; style?: string; classS?: string; dropDownStyle?: string; top?: number; fontawesome: string }) {
3272
- const gvc = obj.gvc;
3273
- let interval: any = undefined;
3274
- return html` <div class="position-relative btn-group dropend subBt my-auto ms-1 ${obj.classS ?? ''}" style="${obj.style ?? ''}">
3275
- <div
3276
- type="button"
3277
- class="bt"
3278
- style="background:none;"
3279
- data-bs-toggle="dropdown"
3280
- aria-haspopup="true"
3281
- data-placement="left"
3282
- aria-expanded="false"
3283
- onclick="${gvc.event((e, event) => {
3284
- // ($(e).children('.bt') as any).dropdown('show');
3285
- // setTimeout(()=>{
3286
- setTimeout(() => {
3287
- obj.top && $(e).parent().children('.dropdown-menu').css('top', `${obj.top}px`);
3288
- // $(e).parent().children('.dropdown-menu').css('left', `${-300}px`);
3289
- }, 100);
3290
- event.stopPropagation();
3291
- event.preventDefault();
3292
- })}"
3293
- >
3294
- ${obj.fontawesome}
3295
- </div>
3296
- <div
3297
- class="dropdown-menu mx-1"
3298
- data-placement="right"
3299
- onmouseover="${obj.gvc.event((e, event) => {
3300
- clearInterval(interval);
3301
- })}"
3302
- onmouseout="${obj.gvc.event((e, event) => {
3303
- ($(e).children('.bt') as any).dropdown('hide');
3304
- })}"
3305
- style="min-height: 150px;${obj.dropDownStyle}"
3306
- >
3307
- <div class="px-2">${obj.inner}</div>
3308
- </div>
3309
- </div>`;
3310
3566
  }
3311
3567
  }
3312
3568