@aquera/nile-elements 1.2.7-beta-1.0 → 1.2.7-beta-1.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.
- package/demo/index.html +253 -25
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +6 -6
- package/dist/nile-light-tooltip/index.cjs.js +1 -1
- package/dist/nile-light-tooltip/index.esm.js +1 -1
- package/dist/nile-light-tooltip/nile-light-tooltip.cjs.js +1 -1
- package/dist/nile-light-tooltip/nile-light-tooltip.cjs.js.map +1 -1
- package/dist/nile-light-tooltip/nile-light-tooltip.esm.js +1 -1
- package/dist/nile-light-tooltip/utils.cjs.js +2 -0
- package/dist/nile-light-tooltip/utils.cjs.js.map +1 -0
- package/dist/nile-light-tooltip/utils.esm.js +1 -0
- package/dist/src/nile-light-tooltip/nile-light-tooltip.d.ts +37 -16
- package/dist/src/nile-light-tooltip/nile-light-tooltip.js +221 -48
- package/dist/src/nile-light-tooltip/nile-light-tooltip.js.map +1 -1
- package/dist/src/nile-light-tooltip/utils.d.ts +2 -0
- package/dist/src/nile-light-tooltip/utils.js +29 -0
- package/dist/src/nile-light-tooltip/utils.js.map +1 -0
- package/dist/src/version.js +1 -1
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-light-tooltip/nile-light-tooltip.ts +246 -56
- package/src/nile-light-tooltip/utils.ts +33 -0
- package/vscode-html-custom-data.json +106 -8
package/demo/index.html
CHANGED
|
@@ -10,42 +10,270 @@
|
|
|
10
10
|
</script>
|
|
11
11
|
<script type="module" src="index.js"></script>
|
|
12
12
|
</head>
|
|
13
|
-
<body>
|
|
13
|
+
<body style="display: flex; flex-direction: column; gap: 2rem; height: 100%; width: 100vw; overflow: auto;">
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
+
<h1>🧪 Nile Light Tooltip – Prop Showcase</h1>
|
|
17
18
|
|
|
19
|
+
<!-- 1️⃣ Basic Content & Placement -->
|
|
20
|
+
<section>
|
|
21
|
+
<h2>Placement</h2>
|
|
22
|
+
<p>Use the <code>placement</code> attribute to set the preferred placement of the tooltip.</p>
|
|
23
|
+
|
|
24
|
+
<div class="placement-demo">
|
|
25
|
+
<!-- Top Row -->
|
|
26
|
+
<button id="top-start">top-start</button>
|
|
27
|
+
<button id="top">top</button>
|
|
28
|
+
<button id="top-end">top-end</button>
|
|
29
|
+
|
|
30
|
+
<!-- Left Column -->
|
|
31
|
+
<button id="left-start">left-start</button>
|
|
32
|
+
<button id="left">left</button>
|
|
33
|
+
<button id="left-end">left-end</button>
|
|
34
|
+
|
|
35
|
+
<!-- Right Column -->
|
|
36
|
+
<button id="right-start">right-start</button>
|
|
37
|
+
<button id="right">right</button>
|
|
38
|
+
<button id="right-end">right-end</button>
|
|
39
|
+
|
|
40
|
+
<!-- Bottom Row -->
|
|
41
|
+
<button id="bottom-start">bottom-start</button>
|
|
42
|
+
<button id="bottom">bottom</button>
|
|
43
|
+
<button id="bottom-end">bottom-end</button>
|
|
44
|
+
|
|
45
|
+
<!-- Tooltips -->
|
|
46
|
+
<nile-light-tooltip for="top-start" content="top-start" placement="top-start"></nile-light-tooltip>
|
|
47
|
+
<nile-light-tooltip for="top" content="top" placement="top"></nile-light-tooltip>
|
|
48
|
+
<nile-light-tooltip for="top-end" content="top-end" placement="top-end"></nile-light-tooltip>
|
|
49
|
+
|
|
50
|
+
<nile-light-tooltip for="left-start" content="left-start" placement="left-start"></nile-light-tooltip>
|
|
51
|
+
<nile-light-tooltip for="left" content="left" placement="left"></nile-light-tooltip>
|
|
52
|
+
<nile-light-tooltip for="left-end" content="left-end" placement="left-end"></nile-light-tooltip>
|
|
53
|
+
|
|
54
|
+
<nile-light-tooltip for="right-start" content="right-start" placement="right-start"></nile-light-tooltip>
|
|
55
|
+
<nile-light-tooltip for="right" content="right" placement="right"></nile-light-tooltip>
|
|
56
|
+
<nile-light-tooltip for="right-end" content="right-end" placement="right-end"></nile-light-tooltip>
|
|
57
|
+
|
|
58
|
+
<nile-light-tooltip for="bottom-start" content="bottom-start" placement="bottom-start"></nile-light-tooltip>
|
|
59
|
+
<nile-light-tooltip for="bottom" content="bottom" placement="bottom"></nile-light-tooltip>
|
|
60
|
+
<nile-light-tooltip for="bottom-end" content="bottom-end" placement="bottom-end"></nile-light-tooltip>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<style>
|
|
64
|
+
.placement-demo {
|
|
65
|
+
position: relative;
|
|
66
|
+
display: grid;
|
|
67
|
+
grid-template-columns: repeat(5, 80px);
|
|
68
|
+
grid-template-rows: repeat(5, 60px);
|
|
69
|
+
justify-content: center;
|
|
70
|
+
align-items: center;
|
|
71
|
+
gap: 8px;
|
|
72
|
+
margin-top: 2rem;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.placement-demo button {
|
|
76
|
+
border: 1px solid #ccc;
|
|
77
|
+
background: #fff;
|
|
78
|
+
border-radius: 6px;
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
padding: 6px 8px;
|
|
81
|
+
font-size: 12px;
|
|
82
|
+
transition: all 0.2s ease;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.placement-demo button:hover {
|
|
86
|
+
background: #eef6ff;
|
|
87
|
+
border-color: #90caf9;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Position buttons visually in grid */
|
|
91
|
+
#top-start { grid-column: 2; grid-row: 1; }
|
|
92
|
+
#top { grid-column: 3; grid-row: 1; }
|
|
93
|
+
#top-end { grid-column: 4; grid-row: 1; }
|
|
94
|
+
|
|
95
|
+
#left-start { grid-column: 1; grid-row: 2; }
|
|
96
|
+
#left { grid-column: 1; grid-row: 3; }
|
|
97
|
+
#left-end { grid-column: 1; grid-row: 4; }
|
|
98
|
+
|
|
99
|
+
#right-start { grid-column: 5; grid-row: 2; }
|
|
100
|
+
#right { grid-column: 5; grid-row: 3; }
|
|
101
|
+
#right-end { grid-column: 5; grid-row: 4; }
|
|
102
|
+
|
|
103
|
+
#bottom-start { grid-column: 2; grid-row: 5; }
|
|
104
|
+
#bottom { grid-column: 3; grid-row: 5; }
|
|
105
|
+
#bottom-end { grid-column: 4; grid-row: 5; }
|
|
106
|
+
</style>
|
|
107
|
+
</section>
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
<!-- 2️⃣ Size Variants -->
|
|
112
|
+
<section>
|
|
113
|
+
<h2>size: small vs large</h2>
|
|
114
|
+
<button id="small-btn">Small tooltip</button>
|
|
115
|
+
<nile-light-tooltip for="small-btn" id="small-tooltip" content="This is a small tooltip." size="small" open></nile-light-tooltip>
|
|
116
|
+
|
|
117
|
+
<button id="large-btn">Large tooltip</button>
|
|
118
|
+
<nile-light-tooltip for="large-btn" id="large-tooltip" content="This is a larger tooltip for longer content that wraps nicely." size="large" open></nile-light-tooltip>
|
|
119
|
+
</section>
|
|
120
|
+
|
|
121
|
+
<!-- 3️⃣ Distance & Skidding -->
|
|
122
|
+
<section>
|
|
123
|
+
<h2>distance & skidding</h2>
|
|
124
|
+
<button id="offset-btn">Offset Tooltip</button>
|
|
125
|
+
<nile-light-tooltip
|
|
126
|
+
for="offset-btn"
|
|
127
|
+
content="Distance = 16px, Skidding = 20px"
|
|
128
|
+
distance="16"
|
|
129
|
+
skidding="20"
|
|
130
|
+
placement="top"
|
|
131
|
+
></nile-light-tooltip>
|
|
132
|
+
</section>
|
|
133
|
+
|
|
134
|
+
<!-- 4️⃣ Disabled -->
|
|
135
|
+
<section>
|
|
136
|
+
<h2>disabled</h2>
|
|
137
|
+
<button id="disabled-btn">Disabled Tooltip</button>
|
|
138
|
+
<nile-light-tooltip for="disabled-btn" content="You should not see this." disabled></nile-light-tooltip>
|
|
139
|
+
</section>
|
|
140
|
+
|
|
141
|
+
<!-- 5️⃣ Trigger Variants -->
|
|
142
|
+
<section>
|
|
143
|
+
<h2>trigger</h2>
|
|
144
|
+
<button id="hover-btn">Hover (default)</button>
|
|
145
|
+
<nile-light-tooltip for="hover-btn" content="Triggered by hover"></nile-light-tooltip>
|
|
146
|
+
|
|
147
|
+
<button id="click-btn">Click</button>
|
|
148
|
+
<nile-light-tooltip for="click-btn" content="Triggered by click" trigger="click"></nile-light-tooltip>
|
|
149
|
+
|
|
150
|
+
<button id="focus-btn">Focus</button>
|
|
151
|
+
<nile-light-tooltip for="focus-btn" content="Triggered by focus" trigger="focus"></nile-light-tooltip>
|
|
152
|
+
|
|
153
|
+
<button id="manual-btn">Manual (open programmatically)</button>
|
|
154
|
+
<nile-light-tooltip for="manual-btn" content="Controlled manually" trigger="manual" id="manual-tooltip"></nile-light-tooltip>
|
|
155
|
+
</section>
|
|
156
|
+
|
|
157
|
+
<button id="controlled-btn">Controlled Tooltip</button>
|
|
158
|
+
<nile-light-tooltip
|
|
159
|
+
for="controlled-btn"
|
|
160
|
+
id="controlled-tooltip"
|
|
161
|
+
content="This tooltip is controlled via JS"
|
|
162
|
+
trigger="manual"
|
|
163
|
+
open="false"
|
|
164
|
+
></nile-light-tooltip>
|
|
165
|
+
|
|
166
|
+
<button id="open-btn">Show Tooltip</button>
|
|
167
|
+
<button id="close-btn">Hide Tooltip</button>
|
|
168
|
+
|
|
169
|
+
<script>
|
|
170
|
+
const tooltip = document.querySelector('#controlled-tooltip');
|
|
171
|
+
document.querySelector('#open-btn').addEventListener('click', () => (tooltip.open = true));
|
|
172
|
+
document.querySelector('#close-btn').addEventListener('click', () => (tooltip.open = false));
|
|
173
|
+
</script>
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
<!-- 7️⃣ Hoisted Tooltip -->
|
|
178
|
+
<section>
|
|
179
|
+
<h2>hoist</h2>
|
|
180
|
+
<div style="position: relative; overflow: hidden; width: 200px; height: 100px; border: 1px dashed #aaa;">
|
|
181
|
+
<button id="hoisted-btn" style="position: absolute; bottom: 10px; left: 50px;">Hover me</button>
|
|
182
|
+
<nile-light-tooltip
|
|
183
|
+
for="hoisted-btn"
|
|
184
|
+
allowHTML
|
|
185
|
+
content="<strong>Bold text</strong> and <em>italic</em> content that can go out"
|
|
186
|
+
hoist
|
|
187
|
+
></nile-light-tooltip>
|
|
188
|
+
</div>
|
|
189
|
+
</section>
|
|
190
|
+
|
|
191
|
+
<!-- 8️⃣ Wrapper Mode -->
|
|
192
|
+
<section>
|
|
193
|
+
<h2>Wrapper mode</h2>
|
|
194
|
+
<nile-light-tooltip content="I’m applied to this wrapped button directly.">
|
|
195
|
+
<button>Hover me (wrapped)</button>
|
|
196
|
+
</nile-light-tooltip>
|
|
197
|
+
</section>
|
|
198
|
+
|
|
199
|
+
<!-- 9️⃣ Round Arrow -->
|
|
200
|
+
<section>
|
|
201
|
+
<h2>round arrow</h2>
|
|
202
|
+
<button id="round-arrow-btn">Round Arrow</button>
|
|
203
|
+
<nile-light-tooltip for="round-arrow-btn" content="Round Arrow" roundArrow></nile-light-tooltip>
|
|
204
|
+
</section>
|
|
205
|
+
|
|
206
|
+
<!-- 10️⃣ Follow Cursor -->
|
|
207
|
+
<section>
|
|
208
|
+
<h2>follow cursor</h2>
|
|
209
|
+
<button id="follow-cursor-btn">Follow Cursor</button>
|
|
210
|
+
<nile-light-tooltip for="follow-cursor-btn" content="Follow Cursor" followCursor="true"></nile-light-tooltip>
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
<button id="follow-cursor-horizontal-btn">Follow Cursor Horizontal</button>
|
|
214
|
+
<nile-light-tooltip for="follow-cursor-horizontal-btn" content="Follow Cursor Horizontal" followCursor="horizontal"></nile-light-tooltip>
|
|
215
|
+
|
|
216
|
+
<button id="follow-cursor-vertical-btn">Follow Cursor Vertical</button>
|
|
217
|
+
<nile-light-tooltip for="follow-cursor-vertical-btn" content="Follow Cursor Vertical" followCursor="vertical"></nile-light-tooltip>
|
|
218
|
+
|
|
219
|
+
<button id="follow-cursor-initial-btn">Follow Cursor Initial</button>
|
|
220
|
+
<nile-light-tooltip for="follow-cursor-initial-btn" content="Follow Cursor Initial" followCursor="initial"></nile-light-tooltip>
|
|
221
|
+
</section>
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
<!-- 11️⃣ Duration -->
|
|
225
|
+
<section>
|
|
226
|
+
<h2>duration</h2>
|
|
227
|
+
<button id="duration-btn">Duration</button>
|
|
228
|
+
<nile-light-tooltip for="duration-btn" content="Duration" duration="1000"></nile-light-tooltip>
|
|
229
|
+
|
|
230
|
+
<button id="duration-show-hide-btn">Duration Show Hide</button>
|
|
231
|
+
<nile-light-tooltip for="duration-show-hide-btn" content="Duration Show Hide" duration="1000,500"></nile-light-tooltip>
|
|
232
|
+
|
|
233
|
+
<button id="duration-string-btn">Duration String</button>
|
|
234
|
+
<nile-light-tooltip for="duration-string-btn" content="Duration String" duration="1s,500ms"></nile-light-tooltip>
|
|
235
|
+
|
|
236
|
+
</section>
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
<nile-light-tooltip content="Duration String" followCursor="initial">
|
|
240
|
+
<svg height="100" width="100"><line x1="0" y1="0" x2="150" y2="150" style="stroke: tomato; stroke-width: 5;"></line></svg>
|
|
241
|
+
</nile-light-tooltip>
|
|
18
242
|
|
|
243
|
+
<nile-light-tooltip singleton size="large">
|
|
244
|
+
<button data-tippy-content="Tooltip for Button A">Button A</button>
|
|
245
|
+
<button data-tippy-content="Tooltip for Button B">Button B</button>
|
|
246
|
+
<button data-tippy-content="Tooltip for Button C">Button C</button>
|
|
247
|
+
</nile-light-tooltip>
|
|
19
248
|
|
|
20
|
-
<!-- <nile-input
|
|
21
|
-
type="password"
|
|
22
|
-
canSavePassword>
|
|
23
|
-
</nile-input>
|
|
24
|
-
-->
|
|
25
|
-
|
|
26
|
-
<nile-select placeholder="Please select">
|
|
27
|
-
<nile-option value="1" expandText> OU=AqueraSushma,OU=ADP Sush,DC=aqueralabs,DC=com</nile-option>
|
|
28
|
-
<nile-option value="2"> OU=AqueraSushma,OU=ADP Sush,DC=aqueralabs,DC=com</nile-option>
|
|
29
|
-
<nile-option value="3">Card</nile-option>
|
|
30
|
-
<nile-option value="4">Checkbox</nile-option>
|
|
31
|
-
<nile-option value="5">Chip</nile-option>
|
|
32
|
-
</nile-select>
|
|
33
249
|
|
|
34
250
|
|
|
35
|
-
<nile-select class="virtual-scroll-string" placeholder="Please Select" searchEnabled="true" enableVirtualScroll="true" expandText>
|
|
36
|
-
</nile-select>
|
|
37
251
|
|
|
38
|
-
<nile-light-tooltip content="Hello">
|
|
39
|
-
<h1>Hello</h1>
|
|
40
|
-
</nile-light-tooltip>
|
|
41
252
|
|
|
42
|
-
|
|
43
|
-
<script>
|
|
44
|
-
const optionsString = Array.from({ length: 100000 }, (_, i) => `OU=AqueraSushma,OU=ADP Sush,DC=aqueralabs,DC=com ${i + 1}`);
|
|
45
|
-
const basicString = document.querySelector('nile-select.virtual-scroll-string');
|
|
46
|
-
basicString.data = optionsString;
|
|
47
|
-
</script>
|
|
253
|
+
|
|
48
254
|
|
|
49
255
|
|
|
256
|
+
<nile-select class="virtual-scroll-string" placeholder="Please Select" searchEnabled="true" enableVirtualScroll="true">
|
|
257
|
+
</nile-select>
|
|
258
|
+
|
|
259
|
+
<script>
|
|
260
|
+
const optionsString = Array.from({ length: 100000 }, (_, i) => `Option This is a larger tooltip for longer content that wraps nicely ${i + 1}`);
|
|
261
|
+
const basicString = document.querySelector('nile-select.virtual-scroll-string');
|
|
262
|
+
basicString.data = optionsString;
|
|
263
|
+
</script>
|
|
264
|
+
|
|
265
|
+
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
<script>
|
|
270
|
+
const manualTooltip = document.querySelector('#manual-tooltip');
|
|
271
|
+
const manualBtn = document.querySelector('#manual-btn');
|
|
272
|
+
manualBtn.addEventListener('click', () => {
|
|
273
|
+
|
|
274
|
+
manualTooltip.content = 'This is a manual tooltip. <b>Hello</b>';
|
|
275
|
+
manualTooltip.open = !manualTooltip.open;
|
|
276
|
+
});
|
|
277
|
+
</script>
|
|
50
278
|
</body>
|
|
51
279
|
</html>
|