gd-bs 6.7.9 → 6.8.1

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 (13) hide show
  1. package/build/bs.js +1 -1
  2. package/build/components/tooltip/index.js +4 -1
  3. package/build/custom-elements.js +41 -31
  4. package/dist/gd-bs-icons.js +1 -1
  5. package/dist/gd-bs-icons.min.js +1 -1
  6. package/dist/gd-bs.js +1 -1
  7. package/dist/gd-bs.min.js +1 -1
  8. package/index.html +60 -6
  9. package/package.json +1 -1
  10. package/src/components/tooltip/index.ts +3 -1
  11. package/src/custom-elements.js +41 -31
  12. package/src/styles/_custom.scss +1 -0
  13. package/src/styles/_floating-ui.scss +16 -7
package/index.html CHANGED
@@ -25,6 +25,7 @@
25
25
  <div id="card"></div>
26
26
  <div id="card-group"></div>
27
27
  <div id="tooltip"></div>
28
+ <div id="popover2"></div>
28
29
  <div id="toolbar"></div>
29
30
  <div id="ddl"></div>
30
31
  <div id="button"></div>
@@ -132,9 +133,64 @@
132
133
  btnLoading.setText("Click Me");
133
134
  }, 5000);
134
135
 
136
+ var ddlMenu = GD.Components.Dropdown({
137
+ menuOnly: true,
138
+ items: [
139
+ { text: "Item 1", value: 1 },
140
+ { text: "Item 2", value: 2 },
141
+ { text: "Item 3", value: 3 },
142
+ { text: "Item 4", value: 4 },
143
+ { text: "Item 5", value: 5 }
144
+ ],
145
+ onChange: (item) => {
146
+ alert("Item Selected: " + (item ? item.value : "None"));
147
+ tooltip.hide();
148
+ }
149
+ });
150
+ ddlMenu.el.querySelectorAll(".dropdown-item").forEach(item => {
151
+ item.addEventListener("click", ev => {
152
+ console.log(ev.srcElement.innerHTML);
153
+ })
154
+ });
155
+ var btn = GD.Components.Button({
156
+ text: "Popover",
157
+ })
158
+ window["popover"] = GD.Components.Popover({
159
+ el: document.getElementById("popover2"),
160
+ btnProps: {
161
+ id: "popover-demo2",
162
+ text: "Popover Demo",
163
+ type: 3
164
+ },
165
+ placement: 4,
166
+ options: {
167
+ content: ddlMenu.el,
168
+ trigger: "click"
169
+ }
170
+ });
171
+
172
+ var el = document.createElement("div");
173
+ el.innerHTML = '<h6 class="dropdown-header">Search Results for "testing"</h6>';
174
+ el.innerHTML += '<div class="dropdown-divider"></div>';
175
+ [
176
+ { text: "Item 1", value: 1 },
177
+ { text: "Item 2", value: 2 },
178
+ { text: "Item 3", value: 3 },
179
+ { text: "Item 4", value: 4 },
180
+ { text: "Item 5", value: 5 }
181
+ ].forEach(item => {
182
+ var elItem = document.createElement("a");
183
+ elItem.classList.add("dropdown-item");
184
+ elItem.innerHTML = item.text;
185
+ elItem.setAttribute("data-user", item.value);
186
+ elItem.addEventListener("click", ev => {
187
+ console.log(ev.srcElement.innerHTML);
188
+ });
189
+ el.appendChild(elItem);
190
+ })
135
191
  window["tooltip"] = GD.Components.Tooltip({
136
192
  el: document.getElementById("tooltip"),
137
- content: "This is a tooltip.",
193
+ content: el,
138
194
  placement: 15,
139
195
  type: GD.Components.TooltipTypes.Primary,
140
196
  btnProps: {
@@ -298,7 +354,7 @@
298
354
  placement: 10,
299
355
  options: {
300
356
  content: "This is the content.",
301
- trigger: "click"
357
+ trigger: "focus"
302
358
  }
303
359
  });
304
360
  window["popover2"] = GD.Components.Popover({
@@ -316,7 +372,8 @@
316
372
  onClick: function() {
317
373
  alert("Take Action");
318
374
  }
319
- }).el
375
+ }).el,
376
+ trigger: "click"
320
377
  }
321
378
  });
322
379
  window["myForm"] = GD.Components.Form({
@@ -484,9 +541,6 @@
484
541
  value: 3
485
542
  }, ]);
486
543
  },
487
- onChange: function(item) {
488
- alert("Selected Item: " + item.text);
489
- },
490
544
  onValidate: function(props, result) {
491
545
  return {
492
546
  invalidMessage: "This is invalid.",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gd-bs",
3
- "version": "6.7.9",
3
+ "version": "6.8.1",
4
4
  "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
5
5
  "main": "build/index.js",
6
6
  "typings": "src/index.d.ts",
package/src/components/tooltip/index.ts CHANGED
@@ -200,8 +200,10 @@ class _Tooltip extends Base<ITooltipProps> {
200
200
  if (typeof (this.props.content) === "string") {
201
201
  this._elContent = document.createElement("div") as HTMLElement;
202
202
  this._elContent.innerHTML = this.props.content;
203
- } else {
203
+ } else if(this.props.content) {
204
204
  this._elContent = this.props.content as any;
205
+ } else {
206
+ this._elContent = document.createElement("div");
205
207
  }
206
208
 
207
209
  // Set the padding
package/src/custom-elements.js CHANGED
@@ -13,34 +13,44 @@ class BSElement extends HTMLElement {
13
13
  }
14
14
  }
15
15
  }
16
- customElements.define("bs-accordion", class Accordion extends BSElement { });
17
- customElements.define("bs-alert", class Alert extends BSElement { });
18
- customElements.define("bs-badge", class Badge extends BSElement { });
19
- customElements.define("bs-breadcrumb", class Breadcrumb extends BSElement { });
20
- customElements.define("bs-button", class Button extends BSElement { });
21
- customElements.define("bs-button-group", class ButtonGroup extends BSElement { });
22
- customElements.define("bs-collapse", class Collapse extends BSElement { });
23
- customElements.define("bs-card", class Card extends BSElement { });
24
- customElements.define("bs-card-group", class CardGroup extends BSElement { });
25
- customElements.define("bs-carousel", class Carousel extends BSElement { });
26
- customElements.define("bs-checkbox-group", class CheckboxGroup extends BSElement { });
27
- customElements.define("bs-dropdown", class Dropdown extends BSElement { });
28
- customElements.define("bs-form", class Form extends BSElement { });
29
- customElements.define("bs-form-control", class FormControl extends BSElement { });
30
- customElements.define("bs-icon-link", class IconLink extends BSElement { });
31
- customElements.define("bs-input-group", class InputGroup extends BSElement { });
32
- customElements.define("bs-list-box", class ListBox extends BSElement { });
33
- customElements.define("bs-list-group", class ListGroup extends BSElement { });
34
- customElements.define("bs-modal", class Modal extends BSElement { });
35
- customElements.define("bs-nav", class Nav extends BSElement { });
36
- customElements.define("bs-navbar", class Navbar extends BSElement { });
37
- customElements.define("bs-offcanvas", class Offcanvas extends BSElement { });
38
- customElements.define("bs-paging", class Paging extends BSElement { });
39
- customElements.define("bs-popover", class Popover extends BSElement { });
40
- customElements.define("bs-progress", class Progress extends BSElement { });
41
- customElements.define("bs-progress-group", class ProgressGroup extends BSElement { });
42
- customElements.define("bs-spinner", class Spinner extends BSElement { });
43
- customElements.define("bs-table", class Table extends BSElement { });
44
- customElements.define("bs-toast", class Toast extends BSElement { });
45
- customElements.define("bs-toolbar", class Toolbar extends BSElement { });
46
- customElements.define("bs-tooltip", class Tooltip extends BSElement { });
16
+
17
+ // Method to check if the element doesn't exist and create the custom element
18
+ function defineElement(bsName, bsElement) {
19
+ // Ensure it hasn't been created
20
+ if (customElements.get(bsName)) { return; }
21
+
22
+ // Define the custom element
23
+ customElements.define(bsName, bsElement);
24
+ }
25
+
26
+ defineElement("bs-accordion", class Accordion extends BSElement { });
27
+ defineElement("bs-alert", class Alert extends BSElement { });
28
+ defineElement("bs-badge", class Badge extends BSElement { });
29
+ defineElement("bs-breadcrumb", class Breadcrumb extends BSElement { });
30
+ defineElement("bs-button", class Button extends BSElement { });
31
+ defineElement("bs-button-group", class ButtonGroup extends BSElement { });
32
+ defineElement("bs-collapse", class Collapse extends BSElement { });
33
+ defineElement("bs-card", class Card extends BSElement { });
34
+ defineElement("bs-card-group", class CardGroup extends BSElement { });
35
+ defineElement("bs-carousel", class Carousel extends BSElement { });
36
+ defineElement("bs-checkbox-group", class CheckboxGroup extends BSElement { });
37
+ defineElement("bs-dropdown", class Dropdown extends BSElement { });
38
+ defineElement("bs-form", class Form extends BSElement { });
39
+ defineElement("bs-form-control", class FormControl extends BSElement { });
40
+ defineElement("bs-icon-link", class IconLink extends BSElement { });
41
+ defineElement("bs-input-group", class InputGroup extends BSElement { });
42
+ defineElement("bs-list-box", class ListBox extends BSElement { });
43
+ defineElement("bs-list-group", class ListGroup extends BSElement { });
44
+ defineElement("bs-modal", class Modal extends BSElement { });
45
+ defineElement("bs-nav", class Nav extends BSElement { });
46
+ defineElement("bs-navbar", class Navbar extends BSElement { });
47
+ defineElement("bs-offcanvas", class Offcanvas extends BSElement { });
48
+ defineElement("bs-paging", class Paging extends BSElement { });
49
+ defineElement("bs-popover", class Popover extends BSElement { });
50
+ defineElement("bs-progress", class Progress extends BSElement { });
51
+ defineElement("bs-progress-group", class ProgressGroup extends BSElement { });
52
+ defineElement("bs-spinner", class Spinner extends BSElement { });
53
+ defineElement("bs-table", class Table extends BSElement { });
54
+ defineElement("bs-toast", class Toast extends BSElement { });
55
+ defineElement("bs-toolbar", class Toolbar extends BSElement { });
56
+ defineElement("bs-tooltip", class Tooltip extends BSElement { });
package/src/styles/_custom.scss CHANGED
@@ -321,6 +321,7 @@
321
321
  .dropdown-item:hover,
322
322
  .dropdown-item:focus {
323
323
  background-color: var(--sp-neutral-quaternary, #d2d0ce);
324
+ cursor: pointer;
324
325
  }
325
326
 
326
327
  /* Color match dropdown active */
package/src/styles/_floating-ui.scss CHANGED
@@ -33,15 +33,15 @@
33
33
 
34
34
  &.floating-dropdown .dropdown-item {
35
35
  border-radius: var(--bs-dropdown-border-radius, 5px);
36
- }
37
36
 
38
- &.floating-dropdown .dropdown-item.active {
39
- background-color: var(--sp-theme-primary, #0078d4);
40
- }
37
+ :active {
38
+ background-color: var(--sp-theme-primary, #0078d4);
39
+ }
41
40
 
42
- &.floating-dropdown .dropdown-item:hover {
43
- background-color: var(--bs-dropdown-link-hover-bg, #faf9f8);
44
- color: var(--bs-dropdown-link-hover-color, #201f1e);
41
+ :hover {
42
+ background-color: var(--bs-dropdown-link-hover-bg, #faf9f8);
43
+ color: var(--bs-dropdown-link-hover-color, #201f1e);
44
+ }
45
45
  }
46
46
 
47
47
  /* Style the Floating UI arrow */
@@ -124,6 +124,7 @@
124
124
 
125
125
  .dropdown-item:hover {
126
126
  background-color: var(--sp-neutral-lighter);
127
+ color: var(--sp-info-icon, #605e5c);
127
128
  }
128
129
 
129
130
  &[data-placement='top']>.arrow {
@@ -173,6 +174,7 @@
173
174
 
174
175
  .dropdown-item:hover {
175
176
  background-color: var(--sp-neutral-lighter);
177
+ color: var(--sp-success-icon, #107c10);
176
178
  }
177
179
 
178
180
  &[data-placement='top']>.arrow {
@@ -222,6 +224,7 @@
222
224
 
223
225
  .dropdown-item:hover {
224
226
  background-color: var(--sp-neutral-dark);
227
+ color: var(--sp-accent, #8764b8);
225
228
  }
226
229
 
227
230
  &[data-placement='top']>.arrow {
@@ -271,6 +274,7 @@
271
274
 
272
275
  .dropdown-item:hover {
273
276
  background-color: var(--sp-neutral-lighter);
277
+ color: var(--sp-severe-warning-icon, #d83b01);
274
278
  }
275
279
 
276
280
  &[data-placement='top']>.arrow {
@@ -320,6 +324,7 @@
320
324
 
321
325
  .dropdown-item:hover {
322
326
  background-color: var(--sp-neutral-lighter);
327
+ color: var(--sp-error-icon, #a80000);
323
328
  }
324
329
 
325
330
  &[data-placement='top']>.arrow {
@@ -369,6 +374,7 @@
369
374
 
370
375
  .dropdown-item:hover {
371
376
  background-color: var(--sp-white);
377
+ color: var(--sp-black, #000000);
372
378
  }
373
379
 
374
380
  &[data-placement='top']>.arrow {
@@ -413,6 +419,7 @@
413
419
 
414
420
  .dropdown-item:hover {
415
421
  background-color: var(--sp-black);
422
+ color: var(--sp-white, #ffffff);
416
423
  }
417
424
 
418
425
  .dropdown-item.active {
@@ -465,6 +472,7 @@
465
472
 
466
473
  .dropdown-item:hover {
467
474
  background-color: var(--sp-neutral-lighter);
475
+ color: var(--sp-white, #ffffff);
468
476
  }
469
477
 
470
478
  &[data-placement='top']>.arrow {
@@ -514,6 +522,7 @@
514
522
 
515
523
  .dropdown-item:hover {
516
524
  background-color: var(--sp-theme-dark, #005a9e);
525
+ color: var(--sp-white, #ffffff);
517
526
  }
518
527
 
519
528
  &[data-placement='top']>.arrow {