gd-bs 6.6.90 → 6.6.92

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 (60) hide show
  1. package/build/bs.js +1 -1
  2. package/build/components/alert/index.js +2 -2
  3. package/build/components/button/index.js +13 -3
  4. package/build/components/custom-element.js +529 -0
  5. package/build/components/dropdown/index.js +30 -32
  6. package/build/components/floating-ui/index.js +375 -0
  7. package/build/components/index.js +4 -0
  8. package/build/components/modal/index.js +8 -2
  9. package/build/components/nav/index.js +7 -7
  10. package/build/components/nav/templates.js +1 -1
  11. package/build/components/popover/index.js +37 -201
  12. package/build/components/tooltip/index.js +40 -117
  13. package/build/custom-elements.js +46 -0
  14. package/build/index-icons.js +5 -5
  15. package/build/index.js +5 -5
  16. package/build/render.js +581 -0
  17. package/dev.html +229 -0
  18. package/dist/gd-bs-icons.js +1 -1
  19. package/dist/gd-bs-icons.js.LICENSE.txt +20 -216
  20. package/dist/gd-bs-icons.min.js +1 -1
  21. package/dist/gd-bs.d.ts +113 -150
  22. package/dist/gd-bs.js +1 -1
  23. package/dist/gd-bs.js.LICENSE.txt +20 -216
  24. package/dist/gd-bs.min.js +1 -1
  25. package/index.html +9 -3
  26. package/indexv2.html +572 -0
  27. package/package.json +5 -5
  28. package/pre-build.js +7 -0
  29. package/src/bs.scss +2 -2
  30. package/src/components/alert/index.ts +3 -3
  31. package/src/components/button/index.ts +12 -3
  32. package/src/components/custom-element.ts +532 -0
  33. package/src/components/dropdown/index.ts +30 -36
  34. package/src/components/dropdown/types.d.ts +4 -4
  35. package/src/components/floating-ui/index.ts +392 -0
  36. package/src/components/floating-ui/types.d.ts +73 -0
  37. package/src/components/form/controlTypes.d.ts +3 -3
  38. package/src/components/index.ts +6 -1
  39. package/src/components/modal/index.ts +10 -4
  40. package/src/components/modal/types.d.ts +3 -2
  41. package/src/components/nav/index.ts +7 -7
  42. package/src/components/nav/templates.ts +1 -1
  43. package/src/components/nav/types.d.ts +1 -0
  44. package/src/components/navbar/types.d.ts +2 -2
  45. package/src/components/popover/index.ts +39 -205
  46. package/src/components/popover/types.d.ts +12 -45
  47. package/src/components/tooltip/index.ts +33 -110
  48. package/src/components/tooltip/types.d.ts +9 -45
  49. package/src/components/tooltipGroup/types.d.ts +3 -2
  50. package/src/components/types.d.ts +0 -47
  51. package/src/custom-elements.js +46 -0
  52. package/src/index-icons.d.ts +1 -3
  53. package/src/index-icons.ts +4 -4
  54. package/src/index.d.ts +2 -2
  55. package/src/index.ts +4 -4
  56. package/src/render.ts +583 -0
  57. package/src/styles/_core.scss +0 -2
  58. package/src/styles/_custom.scss +3 -8
  59. package/src/styles/_floating-ui.scss +275 -0
  60. package/src/styles/_tippy.scss +0 -249
package/dev.html ADDED
@@ -0,0 +1,229 @@
1
+ <html>
2
+
3
+ <head>
4
+ <script src="dist/gd-bs.js"></script>
5
+ <!--script src="dist/gd-bs-icons.js"></script-->
6
+ <!-- script src="../sprest-bs/dist/gd-sprest-bs.js"></script-->
7
+ <style>
8
+ #arrow {
9
+ position: absolute;
10
+ background: #222;
11
+ width: 8px;
12
+ height: 8px;
13
+ transform: rotate(45deg);
14
+ }
15
+
16
+ #tooltip1,
17
+ #tooltip2,
18
+ #tooltip3,
19
+ #tooltip4,
20
+ #tooltip5,
21
+ #tooltip6,
22
+ #tooltip7,
23
+ #tooltip8,
24
+ #tooltip9,
25
+ #tooltip10 {
26
+ width: max-content;
27
+ position: absolute;
28
+ top: 0;
29
+ left: 0;
30
+
31
+ background: #222;
32
+ color: white;
33
+ font-weight: bold;
34
+ padding: 5px;
35
+ border-radius: 4px;
36
+ font-size: 90%;
37
+ }
38
+ </style>
39
+ </head>
40
+
41
+ <body class="bs">
42
+ <div class="d-flex justify-content-between">
43
+ <button id="button1" aria-describedby="tooltip1">
44
+ My button
45
+ </button>
46
+ <div id="tooltip1" role="tooltip">
47
+ My tooltip with more content
48
+ <div id="arrow"></div>
49
+ </div>
50
+
51
+ <button id="button2" aria-describedby="tooltip2">
52
+ My button
53
+ </button>
54
+ <div id="tooltip2" role="tooltip">
55
+ My tooltip with more content
56
+ <div id="arrow"></div>
57
+ </div>
58
+ </div>
59
+
60
+ <br />
61
+ <br />
62
+ <br />
63
+
64
+ <div class="d-flex justify-content-between">
65
+ <button id="button3" aria-describedby="tooltip3">
66
+ My button
67
+ </button>
68
+ <div id="tooltip3" role="tooltip">
69
+ My tooltip with more content
70
+ <div id="arrow"></div>
71
+ </div>
72
+
73
+ <button id="button4" aria-describedby="tooltip4">
74
+ My button
75
+ </button>
76
+ <div id="tooltip4" role="tooltip">
77
+ My tooltip with more content
78
+ <div id="arrow"></div>
79
+ </div>
80
+ </div>
81
+
82
+ <br />
83
+ <br />
84
+ <br />
85
+
86
+ <div class="d-flex justify-content-between">
87
+ <button id="button5" aria-describedby="tooltip5">
88
+ My button
89
+ </button>
90
+ <div id="tooltip5" role="tooltip">
91
+ My tooltip with more content
92
+ <div id="arrow"></div>
93
+ </div>
94
+
95
+ <button id="button6" aria-describedby="tooltip6">
96
+ My button
97
+ </button>
98
+ <div id="tooltip6" role="tooltip">
99
+ My tooltip with more content
100
+ <div id="arrow"></div>
101
+ </div>
102
+ </div>
103
+
104
+ <br />
105
+ <br />
106
+ <br />
107
+
108
+ <div class="d-flex justify-content-between">
109
+ <button id="button7" aria-describedby="tooltip7">
110
+ My button
111
+ </button>
112
+ <div id="tooltip7" role="tooltip">
113
+ My tooltip with more content
114
+ <div id="arrow"></div>
115
+ </div>
116
+
117
+ <button id="button8" aria-describedby="tooltip8">
118
+ My button
119
+ </button>
120
+ <div id="tooltip8" role="tooltip">
121
+ My tooltip with more content
122
+ <div id="arrow"></div>
123
+ </div>
124
+ </div>
125
+
126
+ <br />
127
+ <br />
128
+ <br />
129
+
130
+ <button id="button9" aria-describedby="tooltip9">
131
+ My button
132
+ </button>
133
+ <div id="tooltip9" role="tooltip">My tooltip with more content</div>
134
+
135
+ <br />
136
+ <br />
137
+ <br />
138
+
139
+ <button id="button10" aria-describedby="tooltip10">
140
+ My button
141
+ </button>
142
+ <div id="tooltip10" role="tooltip">My tooltip with more content</div>
143
+
144
+ <br />
145
+ <br />
146
+ <br />
147
+
148
+ <bs-tooltip placement="GD.Components.TooltipPlacements.Bottom" type="GD.Components.TooltipTypes.Dark"
149
+ options='{ "trigger": "click" }'>
150
+ <btn-props type="GD.Components.ButtonTypes.OutlineDanger">Test Tooltip</btn-props>
151
+ My tooltip with more content
152
+ </bs-tooltip>
153
+
154
+ <script type="text/javascript" showFl="false">
155
+ function create(btn, tooltip, placement) {
156
+ let arrow = tooltip.querySelector("#arrow");
157
+ GD.Components.FloatingUILib.computePosition(btn, tooltip, {
158
+ placement,
159
+ middleware: [
160
+ GD.Components.FloatingUILib.offset(6),
161
+ GD.Components.FloatingUILib.flip(),
162
+ GD.Components.FloatingUILib.shift({ padding: 5 }),
163
+ GD.Components.FloatingUILib.arrow({ element: arrow }),
164
+ ]
165
+ }).then(({ x, y, middlewareData }) => {
166
+ console.log(`Element ${btn.id} has coordinates: ${x}, ${y}`, x, y);
167
+ Object.assign(tooltip.style, {
168
+ left: `${x}px`,
169
+ top: `${y}px`
170
+ });
171
+
172
+ const arrowX = middlewareData.arrow.x;
173
+ const arrowY = middlewareData.arrow.y;
174
+ const staticSide = {
175
+ top: 'bottom',
176
+ right: 'left',
177
+ bottom: 'top',
178
+ left: 'right',
179
+ }[placement.split('-')[0]];
180
+
181
+ Object.assign(arrow.style, {
182
+ left: arrowX != null ? `${arrowX}px` : '',
183
+ top: arrowY != null ? `${arrowY}px` : '',
184
+ right: '',
185
+ bottom: '',
186
+ [staticSide]: '-4px',
187
+ });
188
+ });
189
+ }
190
+ create(document.querySelector("#button1"), document.querySelector("#tooltip1"), "right");
191
+ create(document.querySelector("#button2"), document.querySelector("#tooltip2"), "left");
192
+ create(document.querySelector("#button3"), document.querySelector("#tooltip3"), "top");
193
+ create(document.querySelector("#button4"), document.querySelector("#tooltip4"), "top-start");
194
+ create(document.querySelector("#button5"), document.querySelector("#tooltip5"), "top-end");
195
+ create(document.querySelector("#button6"), document.querySelector("#tooltip6"), "bottom");
196
+ create(document.querySelector("#button7"), document.querySelector("#tooltip7"), "bottom-start");
197
+ create(document.querySelector("#button8"), document.querySelector("#tooltip8"), "bottom-end");
198
+
199
+ GD.Components.FloatingUI({
200
+ elContent: document.querySelector("#tooltip9"),
201
+ elTarget: document.querySelector("#button9"),
202
+ placement: 4,
203
+ show: true,
204
+ theme: 2,
205
+ options: {
206
+ arrow: true,
207
+ flip: true,
208
+ shift: { padding: 5 },
209
+ trigger: "click"
210
+ }
211
+ });
212
+
213
+ GD.Components.FloatingUI({
214
+ elContent: document.querySelector("#tooltip10"),
215
+ elTarget: document.querySelector("#button10"),
216
+ placement: 5,
217
+ theme: 2,
218
+ show: true,
219
+ options: {
220
+ arrow: true,
221
+ flip: true,
222
+ shift: { padding: 5 },
223
+ trigger: "click"
224
+ }
225
+ });
226
+ </script>
227
+ </body>
228
+
229
+ </html>