gd-bs 6.8.6 → 6.8.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/build/components/floating-ui/index.js +1 -1
- package/build/components/tooltip/index.js +65 -82
- package/dist/gd-bs-icons.js +1 -1
- package/dist/gd-bs-icons.min.js +1 -1
- package/dist/gd-bs.js +1 -1
- package/dist/gd-bs.min.js +1 -1
- package/index.html +84 -78
- package/package.json +1 -1
- package/src/components/floating-ui/index.ts +1 -1
- package/src/components/tooltip/index.ts +70 -87
package/index.html
CHANGED
|
@@ -14,7 +14,9 @@
|
|
|
14
14
|
<body>
|
|
15
15
|
<h1>Library</h1>
|
|
16
16
|
<form>
|
|
17
|
-
<div id="dev"
|
|
17
|
+
<div id="dev">
|
|
18
|
+
<input id="dev2" />
|
|
19
|
+
</div>
|
|
18
20
|
<div id="icon-link"></div>
|
|
19
21
|
<div id="alert"></div>
|
|
20
22
|
<div id="btn-loading"></div>
|
|
@@ -55,13 +57,7 @@
|
|
|
55
57
|
<div id="toast"></div>
|
|
56
58
|
</form>
|
|
57
59
|
<script type="text/javascript" showFl="false">
|
|
58
|
-
window
|
|
59
|
-
renderItem: (el, item) => {
|
|
60
|
-
// Render content for the accordion
|
|
61
|
-
el.innerHTML = `<b>${item.header}</b><p>was used to create this content.</p>`;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
window.addEventListener("load", function() {
|
|
60
|
+
window.addEventListener("load", function () {
|
|
65
61
|
// Dev
|
|
66
62
|
let items = [];
|
|
67
63
|
for (var i = 0; i < 10; i++) {
|
|
@@ -77,15 +73,28 @@
|
|
|
77
73
|
}
|
|
78
74
|
});
|
|
79
75
|
}
|
|
80
|
-
window["dev"] = GD.Components.
|
|
81
|
-
|
|
82
|
-
|
|
76
|
+
window["dev"] = GD.Components.Tooltip({
|
|
77
|
+
target: document.getElementById("dev2"),
|
|
78
|
+
content: "This is a tooltip.",
|
|
79
|
+
placement: GD.Components.TooltipPlacements.BottomEnd,
|
|
80
|
+
type: GD.Components.TooltipTypes.LightBorder
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
window["tooltip"] = GD.Components.Tooltip({
|
|
84
|
+
el: document.getElementById("tooltip1"),
|
|
85
|
+
content: el,
|
|
86
|
+
placement: 15,
|
|
87
|
+
type: GD.Components.TooltipTypes.Primary,
|
|
88
|
+
btnProps: {
|
|
89
|
+
text: "Test Tooltip",
|
|
90
|
+
type: GD.Components.ButtonTypes.OutlineDanger
|
|
91
|
+
}
|
|
83
92
|
});
|
|
84
93
|
|
|
85
94
|
// Components
|
|
86
95
|
GD.Components.IconLink({
|
|
87
96
|
el: document.getElementById("icon-link"),
|
|
88
|
-
content: "Icon Link",
|
|
97
|
+
content: "<p>Icon Link</p>",
|
|
89
98
|
iconType: GD.Icons(GD.IconTypes.Badge3d),
|
|
90
99
|
type: GD.Components.IconLinkTypes.AfterText
|
|
91
100
|
})
|
|
@@ -110,7 +119,7 @@
|
|
|
110
119
|
header: "Alert Header",
|
|
111
120
|
content: "This is an alert.",
|
|
112
121
|
type: GD.Components.AlertTypes.Danger,
|
|
113
|
-
onClose: function(props) {
|
|
122
|
+
onClose: function (props) {
|
|
114
123
|
console.log("The alert was closed.", props.header);
|
|
115
124
|
}
|
|
116
125
|
});
|
|
@@ -119,7 +128,7 @@
|
|
|
119
128
|
el: document.getElementById("btn-loading"),
|
|
120
129
|
text: "Loading...",
|
|
121
130
|
iconType: GD.Icons(GD.IconTypes.Badge3d),
|
|
122
|
-
onClick: function() {
|
|
131
|
+
onClick: function () {
|
|
123
132
|
alert("The loading button was clicked...");
|
|
124
133
|
},
|
|
125
134
|
spinnerProps: {
|
|
@@ -128,7 +137,7 @@
|
|
|
128
137
|
type: GD.Components.SpinnerTypes.Light
|
|
129
138
|
}
|
|
130
139
|
});
|
|
131
|
-
setTimeout(function() {
|
|
140
|
+
setTimeout(function () {
|
|
132
141
|
// Update the text
|
|
133
142
|
btnLoading.setText("Click Me");
|
|
134
143
|
}, 5000);
|
|
@@ -196,9 +205,6 @@
|
|
|
196
205
|
btnProps: {
|
|
197
206
|
text: "Test Tooltip",
|
|
198
207
|
type: GD.Components.ButtonTypes.OutlineDanger
|
|
199
|
-
},
|
|
200
|
-
options: {
|
|
201
|
-
trigger: "click"
|
|
202
208
|
}
|
|
203
209
|
});
|
|
204
210
|
|
|
@@ -212,7 +218,7 @@
|
|
|
212
218
|
actions: [{
|
|
213
219
|
text: "Card Action",
|
|
214
220
|
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
|
|
215
|
-
onClick: function(action, card) {
|
|
221
|
+
onClick: function (action, card) {
|
|
216
222
|
alert(card.title + " was clicked.");
|
|
217
223
|
}
|
|
218
224
|
}]
|
|
@@ -225,7 +231,7 @@
|
|
|
225
231
|
col: 4,
|
|
226
232
|
onRender: (el) => { console.log("Card Group Render: ", el); },
|
|
227
233
|
cards: [
|
|
228
|
-
|
|
234
|
+
{
|
|
229
235
|
body: [{
|
|
230
236
|
title: "Card Title 1",
|
|
231
237
|
text: "This is the card contents.",
|
|
@@ -233,7 +239,7 @@
|
|
|
233
239
|
actions: [{
|
|
234
240
|
text: "Card Action",
|
|
235
241
|
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
|
|
236
|
-
onClick: function(action, card) {
|
|
242
|
+
onClick: function (action, card) {
|
|
237
243
|
alert(card.title + " was clicked.");
|
|
238
244
|
}
|
|
239
245
|
}]
|
|
@@ -246,7 +252,7 @@
|
|
|
246
252
|
actions: [{
|
|
247
253
|
text: "Card Action",
|
|
248
254
|
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
|
|
249
|
-
onClick: function(action, card) {
|
|
255
|
+
onClick: function (action, card) {
|
|
250
256
|
alert(card.title + " was clicked.");
|
|
251
257
|
}
|
|
252
258
|
}]
|
|
@@ -259,7 +265,7 @@
|
|
|
259
265
|
actions: [{
|
|
260
266
|
text: "Card Action",
|
|
261
267
|
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
|
|
262
|
-
onClick: function(action, card) {
|
|
268
|
+
onClick: function (action, card) {
|
|
263
269
|
alert(card.title + " was clicked.");
|
|
264
270
|
}
|
|
265
271
|
}]
|
|
@@ -272,7 +278,7 @@
|
|
|
272
278
|
actions: [{
|
|
273
279
|
text: "Card Action",
|
|
274
280
|
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
|
|
275
|
-
onClick: function(action, card) {
|
|
281
|
+
onClick: function (action, card) {
|
|
276
282
|
alert(card.title + " was clicked.");
|
|
277
283
|
}
|
|
278
284
|
}]
|
|
@@ -285,7 +291,7 @@
|
|
|
285
291
|
actions: [{
|
|
286
292
|
text: "Card Action",
|
|
287
293
|
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
|
|
288
|
-
onClick: function(action, card) {
|
|
294
|
+
onClick: function (action, card) {
|
|
289
295
|
alert(card.title + " was clicked.");
|
|
290
296
|
}
|
|
291
297
|
}]
|
|
@@ -298,7 +304,7 @@
|
|
|
298
304
|
actions: [{
|
|
299
305
|
text: "Card Action",
|
|
300
306
|
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
|
|
301
|
-
onClick: function(action, card) {
|
|
307
|
+
onClick: function (action, card) {
|
|
302
308
|
alert(card.title + " was clicked.");
|
|
303
309
|
}
|
|
304
310
|
}]
|
|
@@ -369,7 +375,7 @@
|
|
|
369
375
|
options: {
|
|
370
376
|
content: GD.Components.Button({
|
|
371
377
|
text: "Action",
|
|
372
|
-
onClick: function() {
|
|
378
|
+
onClick: function () {
|
|
373
379
|
alert("Take Action");
|
|
374
380
|
}
|
|
375
381
|
}).el,
|
|
@@ -388,13 +394,13 @@
|
|
|
388
394
|
LName: "Base",
|
|
389
395
|
TestDelay: null
|
|
390
396
|
},
|
|
391
|
-
onControlRendering: function(ctrlProps) {
|
|
397
|
+
onControlRendering: function (ctrlProps) {
|
|
392
398
|
console.log("The control property '" + ctrlProps.name + "' is rendering...");
|
|
393
399
|
},
|
|
394
|
-
onControlRendered: function(ctrl) {
|
|
400
|
+
onControlRendered: function (ctrl) {
|
|
395
401
|
console.log("The control '" + ctrl.props.name + "' has been rendered...");
|
|
396
402
|
},
|
|
397
|
-
onRendered: function() {
|
|
403
|
+
onRendered: function () {
|
|
398
404
|
console.log("The form has been rendered...");
|
|
399
405
|
},
|
|
400
406
|
rowClassName: "class1 class2",
|
|
@@ -413,7 +419,7 @@
|
|
|
413
419
|
control: {
|
|
414
420
|
className: "custom-control",
|
|
415
421
|
id: "custom-control-exp",
|
|
416
|
-
onControlRendered: function(control) {
|
|
422
|
+
onControlRendered: function (control) {
|
|
417
423
|
// Render a header
|
|
418
424
|
control.el.innerHTML = "<h3>Form Header</h3>";
|
|
419
425
|
}
|
|
@@ -448,7 +454,7 @@
|
|
|
448
454
|
value: 5,
|
|
449
455
|
isDisabled: true
|
|
450
456
|
}],
|
|
451
|
-
onChange: function(item) {
|
|
457
|
+
onChange: function (item) {
|
|
452
458
|
item ? alert(item.text + " was selected.") : null;
|
|
453
459
|
}
|
|
454
460
|
}
|
|
@@ -459,7 +465,7 @@
|
|
|
459
465
|
title: "Select a file",
|
|
460
466
|
type: GD.Components.FormControlTypes.File,
|
|
461
467
|
description: "This is a file selector",
|
|
462
|
-
onChange: function(value) {
|
|
468
|
+
onChange: function (value) {
|
|
463
469
|
console.log("File selected", value);
|
|
464
470
|
}
|
|
465
471
|
}
|
|
@@ -522,7 +528,7 @@
|
|
|
522
528
|
}, {
|
|
523
529
|
text: "Item 2"
|
|
524
530
|
}],
|
|
525
|
-
onControlRendered: function(control) {
|
|
531
|
+
onControlRendered: function (control) {
|
|
526
532
|
control.dropdown.setItems([{
|
|
527
533
|
isHeader: true,
|
|
528
534
|
text: "Header 1"
|
|
@@ -539,9 +545,9 @@
|
|
|
539
545
|
}, {
|
|
540
546
|
text: "Item 3 > 2",
|
|
541
547
|
value: 3
|
|
542
|
-
},
|
|
548
|
+
},]);
|
|
543
549
|
},
|
|
544
|
-
onValidate: function(props, result) {
|
|
550
|
+
onValidate: function (props, result) {
|
|
545
551
|
return {
|
|
546
552
|
invalidMessage: "This is invalid.",
|
|
547
553
|
isValid: result.value ? true : false,
|
|
@@ -579,7 +585,7 @@
|
|
|
579
585
|
title: "This is a textfield",
|
|
580
586
|
type: GD.Components.FormControlTypes.TextField,
|
|
581
587
|
placeholder: "Explain the reason not tested",
|
|
582
|
-
onValidate: function(ctrl, result) {
|
|
588
|
+
onValidate: function (ctrl, result) {
|
|
583
589
|
if (result.value && result.value.length > 0)
|
|
584
590
|
return true;
|
|
585
591
|
else
|
|
@@ -600,7 +606,7 @@
|
|
|
600
606
|
label: "Secondary",
|
|
601
607
|
name: "secondary"
|
|
602
608
|
}],
|
|
603
|
-
onValidate: function(ctrl, value) {
|
|
609
|
+
onValidate: function (ctrl, value) {
|
|
604
610
|
if (value)
|
|
605
611
|
return true;
|
|
606
612
|
else
|
|
@@ -621,7 +627,7 @@
|
|
|
621
627
|
label: "Secondary",
|
|
622
628
|
name: "secondary"
|
|
623
629
|
}],
|
|
624
|
-
onValidate: function(ctrl, value) {
|
|
630
|
+
onValidate: function (ctrl, value) {
|
|
625
631
|
if (value)
|
|
626
632
|
return true;
|
|
627
633
|
else
|
|
@@ -664,10 +670,10 @@
|
|
|
664
670
|
title: "This is a textfield",
|
|
665
671
|
type: GD.Components.FormControlTypes.TextField,
|
|
666
672
|
loadingMessage: "Loading...",
|
|
667
|
-
onControlRendering: function(props) {
|
|
673
|
+
onControlRendering: function (props) {
|
|
668
674
|
return {
|
|
669
|
-
then: function(resolve) {
|
|
670
|
-
setTimeout(function() {
|
|
675
|
+
then: function (resolve) {
|
|
676
|
+
setTimeout(function () {
|
|
671
677
|
console.log("Delayed textbox has been rendered...");
|
|
672
678
|
resolve(props);
|
|
673
679
|
}, 5000);
|
|
@@ -696,11 +702,11 @@
|
|
|
696
702
|
}, {
|
|
697
703
|
size: 2,
|
|
698
704
|
control: {
|
|
699
|
-
onControlRendered: function(control) {
|
|
705
|
+
onControlRendered: function (control) {
|
|
700
706
|
GD.Components.Button({
|
|
701
707
|
el: control.el,
|
|
702
708
|
text: "Save",
|
|
703
|
-
onClick: function() {
|
|
709
|
+
onClick: function () {
|
|
704
710
|
window.myForm = {
|
|
705
711
|
values: myForm.getValues(),
|
|
706
712
|
isValid: myForm.isValid()
|
|
@@ -710,7 +716,7 @@
|
|
|
710
716
|
});
|
|
711
717
|
}
|
|
712
718
|
}
|
|
713
|
-
},
|
|
719
|
+
},]
|
|
714
720
|
});
|
|
715
721
|
window["panel"] = GD.Components.Modal({
|
|
716
722
|
el: document.getElementById("panel"),
|
|
@@ -721,7 +727,7 @@
|
|
|
721
727
|
options: {
|
|
722
728
|
keyboard: false
|
|
723
729
|
},
|
|
724
|
-
onRenderBody: function(el) {
|
|
730
|
+
onRenderBody: function (el) {
|
|
725
731
|
// Render a jumbotron
|
|
726
732
|
GD.Components.Jumbotron({
|
|
727
733
|
el: el,
|
|
@@ -745,7 +751,7 @@
|
|
|
745
751
|
data: {
|
|
746
752
|
title: "My Custom Data"
|
|
747
753
|
},
|
|
748
|
-
onClick: function(badge) {
|
|
754
|
+
onClick: function (badge) {
|
|
749
755
|
alert(badge.data.title);
|
|
750
756
|
}
|
|
751
757
|
});
|
|
@@ -859,7 +865,7 @@
|
|
|
859
865
|
el: document.querySelector("#ddl"),
|
|
860
866
|
isSplit: false,
|
|
861
867
|
label: "My Dropdown",
|
|
862
|
-
onChange: function(item, ev) {
|
|
868
|
+
onChange: function (item, ev) {
|
|
863
869
|
alert("Selected Item: " + (item ? item.text : "None"));
|
|
864
870
|
},
|
|
865
871
|
setLabelToValue: true,
|
|
@@ -871,7 +877,7 @@
|
|
|
871
877
|
isDivider: true
|
|
872
878
|
}, {
|
|
873
879
|
text: "Item 1",
|
|
874
|
-
onClick: function(item) {
|
|
880
|
+
onClick: function (item) {
|
|
875
881
|
alert("Item Clicked: " + item.text);
|
|
876
882
|
}
|
|
877
883
|
}, {
|
|
@@ -906,34 +912,34 @@
|
|
|
906
912
|
buttons: [{
|
|
907
913
|
text: "File 1.docx",
|
|
908
914
|
url: "#",
|
|
909
|
-
onClick: function() {
|
|
915
|
+
onClick: function () {
|
|
910
916
|
alert("File 1 clicked");
|
|
911
917
|
}
|
|
912
918
|
}, {
|
|
913
919
|
text: "File 2.docx",
|
|
914
920
|
url: "#",
|
|
915
|
-
onClick: function() {
|
|
921
|
+
onClick: function () {
|
|
916
922
|
alert("File 2 clicked");
|
|
917
923
|
}
|
|
918
924
|
}, {
|
|
919
925
|
text: "File 3.docx",
|
|
920
926
|
url: "#",
|
|
921
|
-
onClick: function() {
|
|
927
|
+
onClick: function () {
|
|
922
928
|
alert("File 3 clicked");
|
|
923
929
|
}
|
|
924
930
|
}, {
|
|
925
931
|
text: "File 4.docx",
|
|
926
932
|
url: "#",
|
|
927
|
-
onClick: function() {
|
|
933
|
+
onClick: function () {
|
|
928
934
|
alert("File 4 clicked");
|
|
929
935
|
}
|
|
930
936
|
}, {
|
|
931
937
|
text: "File 5.docx",
|
|
932
938
|
url: "#",
|
|
933
|
-
onClick: function() {
|
|
939
|
+
onClick: function () {
|
|
934
940
|
alert("File 5 clicked");
|
|
935
941
|
}
|
|
936
|
-
},
|
|
942
|
+
},]
|
|
937
943
|
});
|
|
938
944
|
window["modal"] = GD.Components.Modal({
|
|
939
945
|
el: document.querySelector("#modal"),
|
|
@@ -944,21 +950,21 @@
|
|
|
944
950
|
keyboard: true,
|
|
945
951
|
autoClose: false
|
|
946
952
|
},
|
|
947
|
-
onClose: function(modal) {
|
|
953
|
+
onClose: function (modal) {
|
|
948
954
|
console.log("The modal was closed.", modal);
|
|
949
955
|
},
|
|
950
|
-
onRenderFooter: function(el) {
|
|
956
|
+
onRenderFooter: function (el) {
|
|
951
957
|
// Render a button
|
|
952
958
|
GD.Components.Button({
|
|
953
959
|
el: el,
|
|
954
960
|
text: "Submit",
|
|
955
|
-
onClick: function() {
|
|
961
|
+
onClick: function () {
|
|
956
962
|
// Validate the form
|
|
957
963
|
console.log(window["modalForm"].isValid());
|
|
958
964
|
}
|
|
959
965
|
});
|
|
960
966
|
},
|
|
961
|
-
onRenderBody: function(el) {
|
|
967
|
+
onRenderBody: function (el) {
|
|
962
968
|
// Render a form
|
|
963
969
|
window["modalForm"] = GD.Components.Form({
|
|
964
970
|
el: el,
|
|
@@ -975,7 +981,7 @@
|
|
|
975
981
|
label: "First Name",
|
|
976
982
|
name: "FName",
|
|
977
983
|
type: GD.Components.FormControlTypes.TextField,
|
|
978
|
-
onChange: function(value) {
|
|
984
|
+
onChange: function (value) {
|
|
979
985
|
console.log("New First Name: " + value);
|
|
980
986
|
}
|
|
981
987
|
}
|
|
@@ -987,7 +993,7 @@
|
|
|
987
993
|
label: "Last Name",
|
|
988
994
|
name: "LName",
|
|
989
995
|
type: GD.Components.FormControlTypes.TextField,
|
|
990
|
-
onChange: function(value) {
|
|
996
|
+
onChange: function (value) {
|
|
991
997
|
console.log("New Last Name: " + value);
|
|
992
998
|
}
|
|
993
999
|
}
|
|
@@ -1000,7 +1006,7 @@
|
|
|
1000
1006
|
label: "Comments",
|
|
1001
1007
|
name: "Comments",
|
|
1002
1008
|
type: GD.Components.FormControlTypes.TextArea,
|
|
1003
|
-
onValidate: function(ctrl, value) {
|
|
1009
|
+
onValidate: function (ctrl, value) {
|
|
1004
1010
|
return {
|
|
1005
1011
|
invalidMessage: "A comment is required.",
|
|
1006
1012
|
validMessage: "Thank you for adding a comment",
|
|
@@ -1071,7 +1077,7 @@
|
|
|
1071
1077
|
label: "Boolean",
|
|
1072
1078
|
name: "Boolean",
|
|
1073
1079
|
type: GD.Components.FormControlTypes.Checkbox,
|
|
1074
|
-
onChange: function(item) {
|
|
1080
|
+
onChange: function (item) {
|
|
1075
1081
|
alert((item ? item.label : "No item") + " selected.");
|
|
1076
1082
|
},
|
|
1077
1083
|
items: [{
|
|
@@ -1095,7 +1101,7 @@
|
|
|
1095
1101
|
text: "Select...",
|
|
1096
1102
|
isDisabled: true,
|
|
1097
1103
|
isSelected: true
|
|
1098
|
-
},{
|
|
1104
|
+
}, {
|
|
1099
1105
|
text: "Job 1"
|
|
1100
1106
|
}, {
|
|
1101
1107
|
text: "Job 2"
|
|
@@ -1114,7 +1120,7 @@
|
|
|
1114
1120
|
}, {
|
|
1115
1121
|
text: "Job 9"
|
|
1116
1122
|
}],
|
|
1117
|
-
onChange: function(item) {
|
|
1123
|
+
onChange: function (item) {
|
|
1118
1124
|
console.log("Selected Item: " + (item ? item.text : ""));
|
|
1119
1125
|
}
|
|
1120
1126
|
}
|
|
@@ -1146,7 +1152,7 @@
|
|
|
1146
1152
|
}, {
|
|
1147
1153
|
text: "Job 9"
|
|
1148
1154
|
}],
|
|
1149
|
-
onChange: function(items) {
|
|
1155
|
+
onChange: function (items) {
|
|
1150
1156
|
console.log("Selected Items: ", items);
|
|
1151
1157
|
}
|
|
1152
1158
|
}
|
|
@@ -1195,10 +1201,10 @@
|
|
|
1195
1201
|
text: "Run"
|
|
1196
1202
|
}],
|
|
1197
1203
|
value: 0,
|
|
1198
|
-
onClear: function() {
|
|
1204
|
+
onClear: function () {
|
|
1199
1205
|
console.log("The value was cleared.");
|
|
1200
1206
|
},
|
|
1201
|
-
onChange: function(val) {
|
|
1207
|
+
onChange: function (val) {
|
|
1202
1208
|
console.log("Value changed to: " + val);
|
|
1203
1209
|
}
|
|
1204
1210
|
});
|
|
@@ -1208,7 +1214,7 @@
|
|
|
1208
1214
|
label: "Address:",
|
|
1209
1215
|
type: GD.Components.InputGroupTypes.TextArea,
|
|
1210
1216
|
value: "This is a long value. It's supposed to go in a text area.\n\nHopefully this will be on a new line...",
|
|
1211
|
-
onChange: function(val) {
|
|
1217
|
+
onChange: function (val) {
|
|
1212
1218
|
console.log("Multi value changed to: " + val);
|
|
1213
1219
|
}
|
|
1214
1220
|
});
|
|
@@ -1297,7 +1303,7 @@
|
|
|
1297
1303
|
tabContent: "This is the content for tab 4."
|
|
1298
1304
|
}, {
|
|
1299
1305
|
title: "NavTab 5",
|
|
1300
|
-
onRenderTab: function(el) {
|
|
1306
|
+
onRenderTab: function (el) {
|
|
1301
1307
|
el.innerHTML = "This is the content for tab 5."
|
|
1302
1308
|
}
|
|
1303
1309
|
}]
|
|
@@ -1344,7 +1350,7 @@
|
|
|
1344
1350
|
el: document.querySelector("#collapse"),
|
|
1345
1351
|
id: "collapseDemo",
|
|
1346
1352
|
isHorizontal: true,
|
|
1347
|
-
onRender: function(el) {
|
|
1353
|
+
onRender: function (el) {
|
|
1348
1354
|
el.innerHTML = "This is the content to be collapsed.";
|
|
1349
1355
|
el.style.width = "300px";
|
|
1350
1356
|
el.style.minHeight = "100px";
|
|
@@ -1364,7 +1370,7 @@
|
|
|
1364
1370
|
id: "accordionDemo",
|
|
1365
1371
|
items: [{
|
|
1366
1372
|
header: "Item 1",
|
|
1367
|
-
onRenderBody: function(el) {
|
|
1373
|
+
onRenderBody: function (el) {
|
|
1368
1374
|
el.innerHTML = "This is the content for item 1.";
|
|
1369
1375
|
},
|
|
1370
1376
|
showFl: true
|
|
@@ -1379,7 +1385,7 @@
|
|
|
1379
1385
|
GD.Components.Pagination({
|
|
1380
1386
|
el: document.querySelector("#paging"),
|
|
1381
1387
|
numberOfPages: 5,
|
|
1382
|
-
onClick: function(pageNumber) {
|
|
1388
|
+
onClick: function (pageNumber) {
|
|
1383
1389
|
alert(pageNumber + " was clicked.");
|
|
1384
1390
|
}
|
|
1385
1391
|
});
|
|
@@ -1415,15 +1421,15 @@
|
|
|
1415
1421
|
window["navbar"] = GD.Components.Navbar({
|
|
1416
1422
|
el: document.querySelector("#navbar"),
|
|
1417
1423
|
brand: "Test",
|
|
1418
|
-
onClick: function(item) {
|
|
1424
|
+
onClick: function (item) {
|
|
1419
1425
|
// Log
|
|
1420
1426
|
console.log("Nav Item Clicked: " + item.text);
|
|
1421
1427
|
},
|
|
1422
1428
|
searchBox: {
|
|
1423
|
-
onChange: function(val) {
|
|
1429
|
+
onChange: function (val) {
|
|
1424
1430
|
console.log("Searching for: " + val);
|
|
1425
1431
|
},
|
|
1426
|
-
onSearch: function(val) {
|
|
1432
|
+
onSearch: function (val) {
|
|
1427
1433
|
console.log("Search for: " + val);
|
|
1428
1434
|
},
|
|
1429
1435
|
value: "Default Value"
|
|
@@ -1445,7 +1451,7 @@
|
|
|
1445
1451
|
text: "Link 1",
|
|
1446
1452
|
href: "#",
|
|
1447
1453
|
iconType: GD.Icons(GD.IconTypes.Diagram2, 16, 16),
|
|
1448
|
-
onChange: function(item) {
|
|
1454
|
+
onChange: function (item) {
|
|
1449
1455
|
console.log("Nav DDL Item Clicked: " + item.text);
|
|
1450
1456
|
}
|
|
1451
1457
|
}, {
|
|
@@ -1462,7 +1468,7 @@
|
|
|
1462
1468
|
}, {
|
|
1463
1469
|
text: "Link 5",
|
|
1464
1470
|
href: "#"
|
|
1465
|
-
},
|
|
1471
|
+
},]
|
|
1466
1472
|
}, {
|
|
1467
1473
|
text: "Collapse",
|
|
1468
1474
|
toggleObj: window["navbarCollapse"],
|
package/package.json
CHANGED
|
@@ -100,7 +100,7 @@ class _FloatingUI {
|
|
|
100
100
|
// Create the event
|
|
101
101
|
document.addEventListener("click", (ev) => {
|
|
102
102
|
// Do nothing if we do not want to hide on click
|
|
103
|
-
if (this._props.options?.hideOnClick) { return; }
|
|
103
|
+
if (this._props.options?.hideOnClick == false) { return; }
|
|
104
104
|
|
|
105
105
|
// Do nothing if we toggled this component
|
|
106
106
|
if (this._elTarget.contains(ev.target as HTMLElement)) { return; }
|