ts-glitter 13.4.7 → 13.4.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lowcode/Entry.js +1 -1
- package/lowcode/Entry.ts +1 -1
- package/lowcode/backend-manager/bg-blog.js +466 -413
- package/lowcode/backend-manager/bg-blog.ts +1298 -1244
- package/lowcode/form-view/editor/array-items.js +1 -1
- package/lowcode/form-view/editor/array-items.ts +1 -1
- package/lowcode/form-view/editor/color-selector.ts +1 -1
- package/lowcode/glitterBundle/Glitter.js +9 -2
- package/lowcode/glitterBundle/Glitter.ts +9 -2
- package/lowcode/jspage/editor.js +15 -9
- package/lowcode/jspage/editor.ts +16 -10
- package/lowcode/jspage/main.js +52 -24
- package/lowcode/jspage/main.ts +91 -50
- package/lowcode/official_view_component/official/form.js +110 -78
- package/lowcode/official_view_component/official/form.ts +238 -192
- package/package.json +1 -1
- package/src/api-public/controllers/article.js +3 -0
- package/src/api-public/controllers/article.js.map +1 -1
- package/src/api-public/controllers/article.ts +3 -0
|
@@ -35,9 +35,13 @@ export class FormWidget {
|
|
|
35
35
|
return new Promise((resolve) => {
|
|
36
36
|
window.glitter.getModule(glitter.root_path + `cms-plugin/module/form-module.js`, (module) => {
|
|
37
37
|
var _a;
|
|
38
|
-
resolve(module.editor(gvc, array, html `
|
|
38
|
+
resolve(module.editor(gvc, array, html `
|
|
39
|
+
<div class="tx_normal fw-bolder d-flex flex-column"
|
|
40
|
+
style="margin-bottom: 12px;">${(_a = obj.title) !== null && _a !== void 0 ? _a : '表單項目'}
|
|
41
|
+
</div> `, () => {
|
|
39
42
|
refresh();
|
|
40
|
-
}) + html
|
|
43
|
+
}) + html `
|
|
44
|
+
<div class="w-100 border-top my-3"></div>`);
|
|
41
45
|
});
|
|
42
46
|
});
|
|
43
47
|
},
|
|
@@ -75,9 +79,11 @@ export class FormWidget {
|
|
|
75
79
|
view: () => {
|
|
76
80
|
const html = String.raw;
|
|
77
81
|
return html `${[
|
|
78
|
-
html
|
|
79
|
-
<
|
|
80
|
-
|
|
82
|
+
html `
|
|
83
|
+
<div class="position-relative bgf6 d-flex align-items-center justify-content-between mx-n2 mt-n2 p-2 border-bottom shadow">
|
|
84
|
+
<span class="fs-6 fw-bold "
|
|
85
|
+
style="color:black;">表單插件設定</span>
|
|
86
|
+
</div>`,
|
|
81
87
|
EditorElem.editeInput({
|
|
82
88
|
gvc: gvc,
|
|
83
89
|
title: 'Label名稱',
|
|
@@ -141,40 +147,47 @@ export class FormWidget {
|
|
|
141
147
|
title: '選擇插件',
|
|
142
148
|
});
|
|
143
149
|
})),
|
|
144
|
-
html `<div class="position-relative bgf6 d-flex align-items-center justify-content-between mx-n2 border-top p-2 border-bottom shadow">
|
|
145
|
-
<span class="fs-6 fw-bold " style="color:black;">表單設計</span>
|
|
146
|
-
</div>`,
|
|
147
150
|
html `
|
|
148
|
-
<div class="
|
|
149
|
-
|
|
151
|
+
<div class="position-relative bgf6 d-flex align-items-center justify-content-between mx-n2 border-top p-2 border-bottom shadow">
|
|
152
|
+
<span class="fs-6 fw-bold " style="color:black;">表單設計</span>
|
|
153
|
+
</div>`,
|
|
154
|
+
html `
|
|
155
|
+
<div class="alert alert-info fs-6 fw-500"
|
|
156
|
+
style="white-space: normal;">
|
|
157
|
+
一列有12格，可自定義手機版與電腦版每列的顯示格數
|
|
158
|
+
</div>
|
|
159
|
+
<div class="d-flex align-items-center"
|
|
160
|
+
style="gap:10px;">
|
|
150
161
|
<div class="fs-6 fw-500">電腦版</div>
|
|
151
162
|
<input
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
163
|
+
class="form-control flex-fill"
|
|
164
|
+
type="number"
|
|
165
|
+
placeholder=""
|
|
166
|
+
value="${dd.col}"
|
|
167
|
+
onchange="${obj.gvc.event((e, event) => {
|
|
157
168
|
dd.col = e.value;
|
|
158
169
|
})}"
|
|
159
170
|
/>
|
|
160
171
|
<div class="fs-6 fw-500">手機版</div>
|
|
161
172
|
<input
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
173
|
+
class="form-control flex-fill"
|
|
174
|
+
type="number"
|
|
175
|
+
value="${dd.col_sm}"
|
|
176
|
+
onchange="${obj.gvc.event((e, event) => {
|
|
166
177
|
dd.col_sm = e.value;
|
|
167
178
|
})}"
|
|
168
|
-
|
|
179
|
+
placeholder=""
|
|
169
180
|
/>
|
|
170
181
|
</div>
|
|
171
182
|
`,
|
|
172
183
|
];
|
|
173
184
|
if (!obj.user_mode) {
|
|
174
185
|
config_array = config_array.concat([
|
|
175
|
-
html
|
|
176
|
-
<
|
|
177
|
-
|
|
186
|
+
html `
|
|
187
|
+
<div class="position-relative bgf6 d-flex align-items-center justify-content-between mx-n2 border-top p-2 border-bottom shadow">
|
|
188
|
+
<span class="fs-6 fw-bold "
|
|
189
|
+
style="color:black;">進階設定</span>
|
|
190
|
+
</div>`,
|
|
178
191
|
EditorElem.editeInput({
|
|
179
192
|
gvc: gvc,
|
|
180
193
|
title: 'Key標籤',
|
|
@@ -239,16 +252,19 @@ export class FormWidget {
|
|
|
239
252
|
})).response.result[0].page_config.formFormat;
|
|
240
253
|
if (formFormat && formFormat.length > 0) {
|
|
241
254
|
dd.form_config = dd.form_config || {};
|
|
242
|
-
resolve(html
|
|
243
|
-
|
|
255
|
+
resolve(html `
|
|
256
|
+
<div
|
|
257
|
+
class="position-relative bgf6 d-flex align-items-center justify-content-between mx-n2 border-top p-2 border-bottom shadow"
|
|
244
258
|
>
|
|
245
|
-
<span class="fs-6 fw-bold "
|
|
259
|
+
<span class="fs-6 fw-bold "
|
|
260
|
+
style="color:black;">插件內容編輯</span>
|
|
246
261
|
</div>
|
|
247
262
|
<div class="mx-n2">
|
|
248
263
|
${FormWidget.editorView({
|
|
249
264
|
gvc: gvc,
|
|
250
265
|
array: formFormat,
|
|
251
|
-
refresh: (key) => {
|
|
266
|
+
refresh: (key) => {
|
|
267
|
+
},
|
|
252
268
|
formData: dd.form_config,
|
|
253
269
|
})}
|
|
254
270
|
</div>`);
|
|
@@ -363,7 +379,7 @@ export class FormWidget {
|
|
|
363
379
|
const inputCSS = glitter.htmlGenerate.editor_component(dd.style_data.input, gvc, obj.widget, obj.subData);
|
|
364
380
|
const containerCss = glitter.htmlGenerate.editor_component(dd.style_data.container, gvc, obj.widget, obj.subData);
|
|
365
381
|
const label = html `<label class="${labelCSS.class()}" style="${labelCSS.style()}"
|
|
366
|
-
|
|
382
|
+
><span class="text-danger ${dd.require === 'true' ? `` : 'd-none'}"> * </span>${dd.title}</label
|
|
367
383
|
>`;
|
|
368
384
|
const containerClass = `${dd.col ? `col-sm-${dd.col}` : 'col-sm-12'} ${dd.col_sm ? `col-${dd.col_sm}` : 'col-12'} ${(_a = containerCss.class()) !== null && _a !== void 0 ? _a : ``}`;
|
|
369
385
|
const containerStyle = (_b = containerCss.style()) !== null && _b !== void 0 ? _b : ``;
|
|
@@ -379,9 +395,10 @@ export class FormWidget {
|
|
|
379
395
|
switch (dd.type) {
|
|
380
396
|
case 'textArea':
|
|
381
397
|
const textID = gvc.glitter.getUUID();
|
|
382
|
-
return html `
|
|
383
|
-
${
|
|
384
|
-
|
|
398
|
+
return html `
|
|
399
|
+
<div class="${containerClass}" style="${containerStyle}">
|
|
400
|
+
${label}
|
|
401
|
+
${obj.gvc.bindView({
|
|
385
402
|
bind: textID,
|
|
386
403
|
view: () => {
|
|
387
404
|
var _a;
|
|
@@ -413,7 +430,7 @@ export class FormWidget {
|
|
|
413
430
|
autosize(obj.gvc.getBindViewElem(textID));
|
|
414
431
|
},
|
|
415
432
|
})}
|
|
416
|
-
|
|
433
|
+
</div>`;
|
|
417
434
|
case 'array':
|
|
418
435
|
formData[dd.key] = Array.isArray(formData[dd.key]) ? formData[dd.key] : [];
|
|
419
436
|
return gvc.bindView(() => {
|
|
@@ -421,9 +438,10 @@ export class FormWidget {
|
|
|
421
438
|
return {
|
|
422
439
|
bind: arrayViewID,
|
|
423
440
|
view: () => {
|
|
424
|
-
return html `
|
|
425
|
-
${
|
|
426
|
-
|
|
441
|
+
return html `
|
|
442
|
+
<div class="${containerClass} mt-2" style="${containerStyle}">
|
|
443
|
+
${label}
|
|
444
|
+
${EditorElem.arrayItem({
|
|
427
445
|
gvc: gvc,
|
|
428
446
|
title: '',
|
|
429
447
|
array: () => {
|
|
@@ -431,8 +449,9 @@ export class FormWidget {
|
|
|
431
449
|
return {
|
|
432
450
|
title: d2[dd.referTitile] || `選項:${index + 1}`,
|
|
433
451
|
innerHtml: (gvc) => {
|
|
434
|
-
return html
|
|
435
|
-
|
|
452
|
+
return html `
|
|
453
|
+
<div class="my-2">
|
|
454
|
+
${FormWidget.editorView({
|
|
436
455
|
gvc: gvc,
|
|
437
456
|
array: dd.formList,
|
|
438
457
|
refresh: (key) => {
|
|
@@ -443,7 +462,7 @@ export class FormWidget {
|
|
|
443
462
|
formData: d2,
|
|
444
463
|
readonly: obj.readonly,
|
|
445
464
|
})}
|
|
446
|
-
|
|
465
|
+
</div>`;
|
|
447
466
|
},
|
|
448
467
|
};
|
|
449
468
|
});
|
|
@@ -463,7 +482,7 @@ export class FormWidget {
|
|
|
463
482
|
}),
|
|
464
483
|
},
|
|
465
484
|
})}
|
|
466
|
-
|
|
485
|
+
</div>`;
|
|
467
486
|
},
|
|
468
487
|
};
|
|
469
488
|
});
|
|
@@ -507,30 +526,32 @@ export class FormWidget {
|
|
|
507
526
|
return dd.group !== 'glitter-article';
|
|
508
527
|
});
|
|
509
528
|
case 'fontawesome':
|
|
510
|
-
return html
|
|
511
|
-
${
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
529
|
+
return html `
|
|
530
|
+
<div class="${containerClass}" style="${containerStyle}">
|
|
531
|
+
${label}
|
|
532
|
+
<div class="alert alert-info p-2 mb-2"
|
|
533
|
+
style="word-break: break-word;white-space: normal;">
|
|
534
|
+
前往<a
|
|
535
|
+
onclick="${gvc.event(() => {
|
|
515
536
|
glitter.openNewTab('https://fontawesome.com');
|
|
516
537
|
})}"
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
538
|
+
style="cursor: pointer;"
|
|
539
|
+
class="mx-2 fw-bold mb-1"
|
|
540
|
+
>Fontawesome</a
|
|
520
541
|
>官網，查找ICON標籤。
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
542
|
+
</div>
|
|
543
|
+
<input
|
|
544
|
+
type="text"
|
|
545
|
+
value="${(_e = formData[dd.key]) !== null && _e !== void 0 ? _e : ''}"
|
|
546
|
+
class="${inputClass}"
|
|
547
|
+
style="${inputStyle}"
|
|
548
|
+
onchange="${gvc.event((e, event) => {
|
|
528
549
|
formData[dd.key] = e.value;
|
|
529
550
|
obj.refresh(dd.key);
|
|
530
551
|
})}"
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
552
|
+
${readonly ? `readonly` : ``}
|
|
553
|
+
/>
|
|
554
|
+
</div>`;
|
|
534
555
|
case 'form_plugin':
|
|
535
556
|
return gvc.bindView(() => {
|
|
536
557
|
return {
|
|
@@ -554,7 +575,9 @@ export class FormWidget {
|
|
|
554
575
|
};
|
|
555
576
|
});
|
|
556
577
|
case 'form_plugin_v2':
|
|
557
|
-
if (dd.hidden_code && dd.hidden_code.trim() && eval(`(() => {
|
|
578
|
+
if (dd.hidden_code && dd.hidden_code.trim() && eval(`(() => {
|
|
579
|
+
${dd.hidden_code}
|
|
580
|
+
})()`)) {
|
|
558
581
|
return ``;
|
|
559
582
|
}
|
|
560
583
|
return gvc.bindView(() => {
|
|
@@ -568,7 +591,8 @@ export class FormWidget {
|
|
|
568
591
|
class: containerClass,
|
|
569
592
|
style: containerStyle,
|
|
570
593
|
},
|
|
571
|
-
onCreate: () => {
|
|
594
|
+
onCreate: () => {
|
|
595
|
+
},
|
|
572
596
|
onInitial: () => {
|
|
573
597
|
const target = gvc.glitter.document.querySelector(`[gvc-id="${gvc.id(tempView)}"]`);
|
|
574
598
|
window.glitterInitialHelper.getPageData({
|
|
@@ -601,6 +625,8 @@ export class FormWidget {
|
|
|
601
625
|
});
|
|
602
626
|
}
|
|
603
627
|
loop(viewConfig);
|
|
628
|
+
console.log(`formPage==>`, dd.page);
|
|
629
|
+
console.log(`viewConfig===>`, viewConfig);
|
|
604
630
|
return new glitter.htmlGenerate(viewConfig, [], {
|
|
605
631
|
root_form_data: obj.widget && obj.widget.formData,
|
|
606
632
|
root_widget: obj.widget,
|
|
@@ -615,14 +641,17 @@ export class FormWidget {
|
|
|
615
641
|
class: containerClass,
|
|
616
642
|
style: containerStyle,
|
|
617
643
|
containerID: id,
|
|
618
|
-
jsFinish: () => {
|
|
619
|
-
|
|
644
|
+
jsFinish: () => {
|
|
645
|
+
},
|
|
646
|
+
onCreate: () => {
|
|
647
|
+
},
|
|
620
648
|
}, createOption !== null && createOption !== void 0 ? createOption : {});
|
|
621
649
|
}
|
|
622
650
|
try {
|
|
623
651
|
target && (target.outerHTML = getView());
|
|
624
652
|
}
|
|
625
|
-
catch (e) {
|
|
653
|
+
catch (e) {
|
|
654
|
+
}
|
|
626
655
|
});
|
|
627
656
|
},
|
|
628
657
|
};
|
|
@@ -633,16 +662,16 @@ export class FormWidget {
|
|
|
633
662
|
<div class=" ${containerClass}" style="${containerStyle}">
|
|
634
663
|
${label}
|
|
635
664
|
<input
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
665
|
+
type="${dd.type}"
|
|
666
|
+
value="${(_f = formData[dd.key]) !== null && _f !== void 0 ? _f : ''}"
|
|
667
|
+
class="${inputClass}"
|
|
668
|
+
style="${inputStyle}"
|
|
669
|
+
onchange="${gvc.event((e, event) => {
|
|
641
670
|
formData[dd.key] = e.value;
|
|
642
671
|
obj.refresh(dd.key);
|
|
643
672
|
})}"
|
|
644
|
-
|
|
645
|
-
|
|
673
|
+
placeholder="${(_g = dd.placeHolder) !== null && _g !== void 0 ? _g : ''}"
|
|
674
|
+
${readonly ? `readonly` : ``}
|
|
646
675
|
/>
|
|
647
676
|
</div>
|
|
648
677
|
`;
|
|
@@ -658,26 +687,28 @@ export class FormWidget {
|
|
|
658
687
|
groupList[dd.group].push(dd);
|
|
659
688
|
});
|
|
660
689
|
}
|
|
661
|
-
return html
|
|
662
|
-
|
|
690
|
+
return html `
|
|
691
|
+
<div class="row m-0 p-0">
|
|
692
|
+
${Object.keys(groupList)
|
|
663
693
|
.map((key) => {
|
|
664
694
|
if (key) {
|
|
665
695
|
let toggle = {};
|
|
666
|
-
return html
|
|
667
|
-
|
|
696
|
+
return html `
|
|
697
|
+
<div class="mt-2">
|
|
698
|
+
${EditorElem.toggleExpand({
|
|
668
699
|
gvc: gvc,
|
|
669
700
|
title: key,
|
|
670
701
|
data: toggle,
|
|
671
702
|
innerText: getRaw(groupList[key]),
|
|
672
703
|
})}
|
|
673
|
-
|
|
704
|
+
</div>`;
|
|
674
705
|
}
|
|
675
706
|
else {
|
|
676
707
|
return getRaw(groupList[key]);
|
|
677
708
|
}
|
|
678
709
|
})
|
|
679
710
|
.join('')}
|
|
680
|
-
|
|
711
|
+
</div>`;
|
|
681
712
|
}
|
|
682
713
|
}
|
|
683
714
|
Plugin.createComponent(import.meta.url, (glitter, editMode) => {
|
|
@@ -779,8 +810,9 @@ Plugin.createComponent(import.meta.url, (glitter, editMode) => {
|
|
|
779
810
|
});
|
|
780
811
|
}
|
|
781
812
|
else {
|
|
782
|
-
return html
|
|
783
|
-
|
|
813
|
+
return html `
|
|
814
|
+
<div class="mx-n2">
|
|
815
|
+
${FormWidget.settingView({
|
|
784
816
|
gvc: gvc,
|
|
785
817
|
array: config.array,
|
|
786
818
|
refresh: () => {
|
|
@@ -789,7 +821,7 @@ Plugin.createComponent(import.meta.url, (glitter, editMode) => {
|
|
|
789
821
|
widget: widget,
|
|
790
822
|
subData: subData,
|
|
791
823
|
})}
|
|
792
|
-
|
|
824
|
+
</div>`;
|
|
793
825
|
}
|
|
794
826
|
})(),
|
|
795
827
|
].join('<div class="my-2"></div>');
|