gd-bs 5.5.7 → 5.6.0
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/bs.js +1 -1
- package/build/components/form/control.js +5 -5
- package/build/components/form/index.js +15 -0
- package/dist/gd-bs-icons.js +3 -3
- package/dist/gd-bs-icons.min.js +1 -1
- package/dist/gd-bs.d.ts +3 -0
- package/dist/gd-bs.js +3 -3
- package/dist/gd-bs.min.js +1 -1
- package/index.html +15 -10
- package/package.json +1 -1
- package/src/bs.scss +17 -0
- package/src/components/form/control.ts +5 -5
- package/src/components/form/formTypes.d.ts +3 -0
- package/src/components/form/index.ts +16 -0
package/index.html
CHANGED
|
@@ -14,9 +14,7 @@
|
|
|
14
14
|
<body>
|
|
15
15
|
<h1>Library</h1>
|
|
16
16
|
<form>
|
|
17
|
-
<div id="dev">
|
|
18
|
-
<input id="dev-tooltip" type="search" placeholder="Search the page..." class="bg-dark text-white" />
|
|
19
|
-
</div>
|
|
17
|
+
<div id="dev"></div>
|
|
20
18
|
<div id="alert"></div>
|
|
21
19
|
<div id="btn-loading"></div>
|
|
22
20
|
<div id="spinner"></div>
|
|
@@ -56,11 +54,18 @@
|
|
|
56
54
|
<script type="text/javascript">
|
|
57
55
|
window.addEventListener("load", function() {
|
|
58
56
|
// Dev
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
57
|
+
let items = [];
|
|
58
|
+
for(var i=0; i<10; i++) {
|
|
59
|
+
items.push({ label: "Item " + i, data: i, isSelected: true });
|
|
60
|
+
}
|
|
61
|
+
window["form"] = GD.Components.Form({
|
|
62
|
+
el: document.getElementById("dev"),
|
|
63
|
+
controls: [{
|
|
64
|
+
name: "cb",
|
|
65
|
+
label: "My CB",
|
|
66
|
+
items,
|
|
67
|
+
type: 8
|
|
68
|
+
}]
|
|
64
69
|
});
|
|
65
70
|
|
|
66
71
|
// Components
|
|
@@ -536,7 +541,7 @@
|
|
|
536
541
|
id: "my-panel",
|
|
537
542
|
title: "Panel Example",
|
|
538
543
|
hideCloseButton: true,
|
|
539
|
-
type:
|
|
544
|
+
type: 8,
|
|
540
545
|
options: {
|
|
541
546
|
keyboard: false
|
|
542
547
|
},
|
|
@@ -756,7 +761,7 @@
|
|
|
756
761
|
el: document.querySelector("#modal"),
|
|
757
762
|
id: "my-modal",
|
|
758
763
|
title: "My Modal",
|
|
759
|
-
type:
|
|
764
|
+
type: 9,
|
|
760
765
|
options: {
|
|
761
766
|
keyboard: true,
|
|
762
767
|
autoClose: false
|
package/package.json
CHANGED
package/src/bs.scss
CHANGED
|
@@ -262,6 +262,11 @@
|
|
|
262
262
|
.form-switch .form-check-input:checked {
|
|
263
263
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
|
|
264
264
|
}
|
|
265
|
+
/* Color match the active list group item */
|
|
266
|
+
.list-group-item.active {
|
|
267
|
+
background-color: #0078d4;
|
|
268
|
+
border-color: #0078d4;
|
|
269
|
+
}
|
|
265
270
|
/* Increase modal border size */
|
|
266
271
|
.modal-footer {
|
|
267
272
|
border-top: 2px solid #dee2e6;
|
|
@@ -421,6 +426,18 @@
|
|
|
421
426
|
}
|
|
422
427
|
}
|
|
423
428
|
|
|
429
|
+
/* Color match the selected flatpickr calendar control */
|
|
430
|
+
.flatpickr-day.selected {
|
|
431
|
+
background-color: #0078d4;
|
|
432
|
+
border-color: #0078d4;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
/* Fix styling for the flatpickr calendar control */
|
|
436
|
+
.flatpickr-input[readonly] {
|
|
437
|
+
color: #212529 !important;
|
|
438
|
+
background-color: #fff !important;
|
|
439
|
+
border-color: #6c757d !important;
|
|
440
|
+
}
|
|
424
441
|
|
|
425
442
|
/** Modal background - Shouldn't be under the .bs class */
|
|
426
443
|
|
|
@@ -212,7 +212,7 @@ export class FormControl implements IFormControl {
|
|
|
212
212
|
// Add the checkbox group
|
|
213
213
|
this._cb = CheckboxGroup({
|
|
214
214
|
className,
|
|
215
|
-
colSize:
|
|
215
|
+
colSize: cbMultiProps.colSize,
|
|
216
216
|
hideLabel: true,
|
|
217
217
|
isInline: cbMultiProps.isInline,
|
|
218
218
|
isReadonly: this._props.isReadonly,
|
|
@@ -258,7 +258,7 @@ export class FormControl implements IFormControl {
|
|
|
258
258
|
// Add the checkbox group
|
|
259
259
|
this._cb = CheckboxGroup({
|
|
260
260
|
className,
|
|
261
|
-
colSize:
|
|
261
|
+
colSize: (this._props as IFormControlPropsMultiCheckbox).colSize,
|
|
262
262
|
hideLabel: true,
|
|
263
263
|
isReadonly: this._props.isReadonly,
|
|
264
264
|
items: (this._props as IFormControlPropsMultiCheckbox).items,
|
|
@@ -274,7 +274,7 @@ export class FormControl implements IFormControl {
|
|
|
274
274
|
// Add the checkbox group
|
|
275
275
|
this._cb = CheckboxGroup({
|
|
276
276
|
className,
|
|
277
|
-
colSize:
|
|
277
|
+
colSize: (this._props as IFormControlPropsMultiCheckbox).colSize,
|
|
278
278
|
hideLabel: true,
|
|
279
279
|
isReadonly: this._props.isReadonly,
|
|
280
280
|
items: (this._props as IFormControlPropsMultiCheckbox).items,
|
|
@@ -304,7 +304,7 @@ export class FormControl implements IFormControl {
|
|
|
304
304
|
// Add the checkbox group
|
|
305
305
|
this._cb = CheckboxGroup({
|
|
306
306
|
className,
|
|
307
|
-
colSize:
|
|
307
|
+
colSize: (this._props as IFormControlPropsCheckbox).colSize,
|
|
308
308
|
hideLabel: true,
|
|
309
309
|
isReadonly: this._props.isReadonly,
|
|
310
310
|
items: (this._props as IFormControlPropsCheckbox).items,
|
|
@@ -350,7 +350,7 @@ export class FormControl implements IFormControl {
|
|
|
350
350
|
// Add the checkbox group
|
|
351
351
|
this._cb = CheckboxGroup({
|
|
352
352
|
className,
|
|
353
|
-
colSize:
|
|
353
|
+
colSize: (this._props as IFormControlPropsCheckbox).colSize,
|
|
354
354
|
hideLabel: true,
|
|
355
355
|
isReadonly: this._props.isReadonly,
|
|
356
356
|
items: (this._props as IFormControlPropsCheckbox).items,
|
|
@@ -134,6 +134,9 @@ export interface IForm {
|
|
|
134
134
|
/** Hides the form. */
|
|
135
135
|
hide: () => void;
|
|
136
136
|
|
|
137
|
+
/** Inserts a control into the form */
|
|
138
|
+
insertControl: (idx: number, control: IFormControlProps) => void;
|
|
139
|
+
|
|
137
140
|
/** Validates the form */
|
|
138
141
|
isValid: () => boolean;
|
|
139
142
|
|
|
@@ -166,6 +166,22 @@ class _Form extends Base<IFormProps> implements IForm {
|
|
|
166
166
|
return values;
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
+
// Inserts a control into the form
|
|
170
|
+
insertControl(idx: number, control: IFormControlProps) {
|
|
171
|
+
// Create the group
|
|
172
|
+
let group = new FormGroup(control, this.props);
|
|
173
|
+
this._groups.push(group);
|
|
174
|
+
|
|
175
|
+
// Validate the index
|
|
176
|
+
if (idx < this.el.childElementCount) {
|
|
177
|
+
// Insert the control
|
|
178
|
+
this.el.insertBefore(group.el, this.el.childNodes[idx]);
|
|
179
|
+
} else {
|
|
180
|
+
// Append the control
|
|
181
|
+
this.el.appendChild(group.el);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
169
185
|
// Validates the form
|
|
170
186
|
isValid() {
|
|
171
187
|
let isValid = true;
|