@neptune3d/dom 0.0.8 → 0.0.10
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/README.md +23 -14
- package/dist/index.d.ts +378 -21
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Helper classes and functions for fluent DOM manipulation, styling, and event handling.
|
|
4
4
|
|
|
5
|
+
[](https://www.npmjs.com/package/@neptune3d/dom)
|
|
6
|
+
|
|
5
7
|
## 🚀 Getting Started
|
|
6
8
|
|
|
7
9
|
Install the package:
|
|
@@ -54,36 +56,43 @@ $body().add(checkbox);
|
|
|
54
56
|
## 🎯 Popover API
|
|
55
57
|
|
|
56
58
|
```ts
|
|
57
|
-
const
|
|
59
|
+
const popup = $("div")
|
|
58
60
|
.text("Popover content")
|
|
59
61
|
.popover("manual")
|
|
60
|
-
.
|
|
62
|
+
.style({ padding: "1rem", background: "#222", color: "#fff" });
|
|
61
63
|
|
|
62
|
-
$body().add(
|
|
64
|
+
$body().add(popup);
|
|
63
65
|
|
|
64
66
|
// Show/hide programmatically
|
|
65
|
-
|
|
66
|
-
|
|
67
|
+
popup.showPopover();
|
|
68
|
+
popup.hidePopover();
|
|
67
69
|
```
|
|
68
70
|
|
|
69
|
-
## 🎨 Stylesheet
|
|
71
|
+
## 🎨 CSS Stylesheet
|
|
70
72
|
|
|
71
73
|
```ts
|
|
72
74
|
import { StyleSheet } from "neptune3d/dom";
|
|
73
75
|
|
|
74
76
|
const sheet = StyleSheet.getSheet();
|
|
75
77
|
|
|
76
|
-
//
|
|
78
|
+
// insert a css rule
|
|
77
79
|
const rule = sheet.cssRule(".list-item");
|
|
78
|
-
rule.p("0.5rem").
|
|
79
|
-
borderBottom: "1px solid #ccc",
|
|
80
|
-
});
|
|
80
|
+
rule.p("0.5rem").bb("1px solid #ccc");
|
|
81
81
|
|
|
82
|
-
//
|
|
82
|
+
// insert a media rule
|
|
83
83
|
const media = sheet.mediaRule("screen and (max-width: 600px)");
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
|
|
85
|
+
// insert a css rule into the media rule
|
|
86
|
+
media.cssRule(".list-item").textAlign("center").fontSize(24);
|
|
87
|
+
|
|
88
|
+
// extend a css rule
|
|
89
|
+
rule.extend("> div.child").opacity(0.6);
|
|
90
|
+
|
|
91
|
+
// predefined extensions for common pseudo selectors / elements
|
|
92
|
+
|
|
93
|
+
rule.hover().bgColor("red");
|
|
94
|
+
|
|
95
|
+
rule.focus().outline("1px dashed blue");
|
|
87
96
|
```
|
|
88
97
|
|
|
89
98
|
## 🌍 Global Event Wrappers
|
package/dist/index.d.ts
CHANGED
|
@@ -44,14 +44,157 @@ declare class InputNumber extends DomElement<"input"> {
|
|
|
44
44
|
}
|
|
45
45
|
//#endregion
|
|
46
46
|
//#region src/InputRange.d.ts
|
|
47
|
+
/**
|
|
48
|
+
* Represents a styled `<input type="range">` element with fluent configuration methods.
|
|
49
|
+
* Inherits DOM manipulation and style capabilities from `DomElement`, `BaseDom`, and `BaseStyle`.
|
|
50
|
+
* Provides ergonomic setters for common range input attributes (`min`, `max`, `step`, `value`, `name`),
|
|
51
|
+
* and exposes a typed `getValue()` accessor for reading the current numeric value.
|
|
52
|
+
*
|
|
53
|
+
* Designed for declarative UI composition and chaining, with full support for styling, layout, and interactivity.
|
|
54
|
+
*
|
|
55
|
+
* Example usage:
|
|
56
|
+
* new InputRange()
|
|
57
|
+
* .min(0)
|
|
58
|
+
* .max(100)
|
|
59
|
+
* .step(5)
|
|
60
|
+
* .value(50)
|
|
61
|
+
* .bWidth(1)
|
|
62
|
+
* .bStyle("solid")
|
|
63
|
+
* .bColor("#ccc");
|
|
64
|
+
*/
|
|
47
65
|
declare class InputRange extends DomElement<"input"> {
|
|
48
66
|
constructor();
|
|
67
|
+
/**
|
|
68
|
+
* Returns the current numeric value of the range input.
|
|
69
|
+
* Converts the underlying string value to a number for type-safe access.
|
|
70
|
+
* Useful for reading user-selected values in event handlers or form logic.
|
|
71
|
+
*
|
|
72
|
+
* @return The current value as a number.
|
|
73
|
+
*/
|
|
74
|
+
getValue(): number;
|
|
75
|
+
/**
|
|
76
|
+
* Returns the configured minimum value of the range input.
|
|
77
|
+
* Converts the string `min` attribute to a number.
|
|
78
|
+
* Useful for validation, clamping, or dynamic UI feedback.
|
|
79
|
+
*
|
|
80
|
+
* @return The minimum value as a number.
|
|
81
|
+
*/
|
|
82
|
+
getMin(): number;
|
|
83
|
+
/**
|
|
84
|
+
* Returns the configured maximum value of the range input.
|
|
85
|
+
* Converts the string `max` attribute to a number.
|
|
86
|
+
* Useful for validation, clamping, or dynamic UI feedback.
|
|
87
|
+
*
|
|
88
|
+
* @return The maximum value as a number.
|
|
89
|
+
*/
|
|
90
|
+
getMax(): number;
|
|
91
|
+
/**
|
|
92
|
+
* Returns the configured step increment of the range input.
|
|
93
|
+
* Converts the string `step` attribute to a number.
|
|
94
|
+
* Useful for calculating snap points or enforcing input granularity.
|
|
95
|
+
*
|
|
96
|
+
* @return The step value as a number.
|
|
97
|
+
*/
|
|
98
|
+
getStep(): number;
|
|
99
|
+
/**
|
|
100
|
+
* Returns the current value of the range input as a normalized ratio between 0 and 1.
|
|
101
|
+
* Computed as `(value - min) / (max - min)`, clamped to the [0, 1] interval.
|
|
102
|
+
* Useful for proportional layout logic, animations, or progress indicators.
|
|
103
|
+
*
|
|
104
|
+
* @return The current value as a ratio between 0 and 1.
|
|
105
|
+
*/
|
|
106
|
+
getRatio(): number;
|
|
107
|
+
/**
|
|
108
|
+
* Returns the current value of the range input as a percentage between 0 and 100.
|
|
109
|
+
* Computed as `(value - min) / (max - min) * 100`, clamped to the [0, 100] interval.
|
|
110
|
+
* Useful for progress bars, labels, or visual feedback.
|
|
111
|
+
*
|
|
112
|
+
* @return The current value as a percentage.
|
|
113
|
+
*/
|
|
114
|
+
getPercent(): number;
|
|
115
|
+
/**
|
|
116
|
+
* Sets the `name` attribute of the range input.
|
|
117
|
+
* Useful for form serialization, accessibility, and identifying the input in event handlers or submissions.
|
|
118
|
+
*
|
|
119
|
+
* @param value - The name to assign to the input element.
|
|
120
|
+
* @return This instance for chaining.
|
|
121
|
+
*/
|
|
49
122
|
name(value: string): this;
|
|
123
|
+
/**
|
|
124
|
+
* Sets the current value of the range input.
|
|
125
|
+
* Converts the number to a string for DOM compatibility.
|
|
126
|
+
* Useful for initializing or programmatically updating the slider position.
|
|
127
|
+
*
|
|
128
|
+
* @param value - The numeric value to assign to the input.
|
|
129
|
+
* @return This instance for chaining.
|
|
130
|
+
*/
|
|
50
131
|
value(value: number): this;
|
|
51
|
-
|
|
132
|
+
/**
|
|
133
|
+
* Sets the `min` attribute of the range input.
|
|
134
|
+
* Defines the lowest selectable value in the range.
|
|
135
|
+
* Converts the number to a string for DOM compatibility.
|
|
136
|
+
*
|
|
137
|
+
* @param value - The minimum value allowed by the input.
|
|
138
|
+
* @return This instance for chaining.
|
|
139
|
+
*/
|
|
52
140
|
min(value: number): this;
|
|
141
|
+
/**
|
|
142
|
+
* Sets the `max` attribute of the range input.
|
|
143
|
+
* Defines the highest selectable value in the range.
|
|
144
|
+
* Converts the number to a string for DOM compatibility.
|
|
145
|
+
*
|
|
146
|
+
* @param value - The maximum value allowed by the input.
|
|
147
|
+
* @return This instance for chaining.
|
|
148
|
+
*/
|
|
53
149
|
max(value: number): this;
|
|
150
|
+
/**
|
|
151
|
+
* Sets the `step` attribute of the range input.
|
|
152
|
+
* Controls the increment between selectable values.
|
|
153
|
+
* Converts the number to a string for DOM compatibility.
|
|
154
|
+
*
|
|
155
|
+
* @param value - The step size between values.
|
|
156
|
+
* @return This instance for chaining.
|
|
157
|
+
*/
|
|
54
158
|
step(value: number): this;
|
|
159
|
+
/**
|
|
160
|
+
* Sets the `min`, `max`, and `step` attributes of the range input.
|
|
161
|
+
* Accepts individual numeric parameters for ergonomic and explicit configuration.
|
|
162
|
+
* Useful for declaratively defining the full range boundaries.
|
|
163
|
+
*
|
|
164
|
+
* @param min - The minimum value of the range.
|
|
165
|
+
* @param max - The maximum value of the range.
|
|
166
|
+
* @param step - The step increment between values.
|
|
167
|
+
* @return This instance for chaining.
|
|
168
|
+
*/
|
|
169
|
+
bounds(min: number, max: number, step: number): this;
|
|
170
|
+
/**
|
|
171
|
+
* Sets the range input value using a normalized ratio between 0 and 1.
|
|
172
|
+
* Computes the actual value as `min + ratio * (max - min)` and clamps it to bounds.
|
|
173
|
+
* Useful for programmatic control based on proportional layout or animation logic.
|
|
174
|
+
*
|
|
175
|
+
* @param ratio - A normalized value between 0 and 1.
|
|
176
|
+
* @return This instance for chaining.
|
|
177
|
+
*/
|
|
178
|
+
ratio(ratio: number): this;
|
|
179
|
+
/**
|
|
180
|
+
* Sets the range input value using a percentage between 0 and 100.
|
|
181
|
+
* Computes the actual value as `min + (percent / 100) * (max - min)` and clamps it to bounds.
|
|
182
|
+
* Useful for visual controls, progress bars, or external percentage inputs.
|
|
183
|
+
*
|
|
184
|
+
* @param percent - A value between 0 and 100.
|
|
185
|
+
* @return This instance for chaining.
|
|
186
|
+
*/
|
|
187
|
+
percent(percent: number): this;
|
|
188
|
+
/**
|
|
189
|
+
* Updates the background of the range input to visually reflect the current value.
|
|
190
|
+
* Applies a horizontal linear gradient with two color stops: one for the filled portion,
|
|
191
|
+
* and one for the unfilled remainder. Uses `getPercent()` to compute the fill percentage.
|
|
192
|
+
*
|
|
193
|
+
* @param fillColor - The color used for the filled portion of the track.
|
|
194
|
+
* @param emptyColor - The color used for the unfilled portion of the track.
|
|
195
|
+
* @return This instance for chaining.
|
|
196
|
+
*/
|
|
197
|
+
trackFillColors(fillColor: string, emptyColor: string): this;
|
|
55
198
|
}
|
|
56
199
|
//#endregion
|
|
57
200
|
//#region src/InputText.d.ts
|
|
@@ -143,6 +286,11 @@ type InputElementMap = {
|
|
|
143
286
|
range: InputRange;
|
|
144
287
|
checkbox: InputCheckbox;
|
|
145
288
|
};
|
|
289
|
+
/**
|
|
290
|
+
* Represents valid CSS `linear-gradient` direction values.
|
|
291
|
+
* Includes keyword-based directions (e.g., "to right") and angle-based values (e.g., "45deg").
|
|
292
|
+
*/
|
|
293
|
+
type LinearGradientDirection = "to top" | "to top right" | "to right top" | "to right" | "to bottom right" | "to right bottom" | "to bottom" | "to bottom left" | "to left bottom" | "to left" | "to top left" | "to left top" | `${number}deg` | `${number}grad` | `${number}rad` | `${number}turn`;
|
|
146
294
|
//#endregion
|
|
147
295
|
//#region src/BaseStyle.d.ts
|
|
148
296
|
declare abstract class BaseStyle {
|
|
@@ -155,7 +303,7 @@ declare abstract class BaseStyle {
|
|
|
155
303
|
* @param value - The padding value to apply, or `undefined` to remove it.
|
|
156
304
|
* @return This instance for chaining.
|
|
157
305
|
*/
|
|
158
|
-
p(value: Property.Padding | undefined): this;
|
|
306
|
+
p(value: Property.Padding | number | undefined): this;
|
|
159
307
|
/**
|
|
160
308
|
* Sets or clears the `padding-top` style of the element.
|
|
161
309
|
* Accepts any valid CSS value (e.g., "10px", "1em").
|
|
@@ -227,7 +375,7 @@ declare abstract class BaseStyle {
|
|
|
227
375
|
* @param value - The top margin value to apply, or `undefined` to remove it.
|
|
228
376
|
* @return This instance for chaining.
|
|
229
377
|
*/
|
|
230
|
-
mt(value: Property.MarginTop | undefined): this;
|
|
378
|
+
mt(value: Property.MarginTop | number | undefined): this;
|
|
231
379
|
/**
|
|
232
380
|
* Sets or clears the `margin-right` style of the element.
|
|
233
381
|
* Accepts any valid CSS value (e.g., "10px", "auto").
|
|
@@ -236,7 +384,7 @@ declare abstract class BaseStyle {
|
|
|
236
384
|
* @param value - The right margin value to apply, or `undefined` to remove it.
|
|
237
385
|
* @return This instance for chaining.
|
|
238
386
|
*/
|
|
239
|
-
mr(value: Property.MarginRight | undefined): this;
|
|
387
|
+
mr(value: Property.MarginRight | number | undefined): this;
|
|
240
388
|
/**
|
|
241
389
|
* Sets or clears the `margin-bottom` style of the element.
|
|
242
390
|
* Accepts any valid CSS value (e.g., "10px", "auto").
|
|
@@ -245,7 +393,7 @@ declare abstract class BaseStyle {
|
|
|
245
393
|
* @param value - The bottom margin value to apply, or `undefined` to remove it.
|
|
246
394
|
* @return This instance for chaining.
|
|
247
395
|
*/
|
|
248
|
-
mb(value: Property.MarginBottom | undefined): this;
|
|
396
|
+
mb(value: Property.MarginBottom | number | undefined): this;
|
|
249
397
|
/**
|
|
250
398
|
* Sets or clears the `margin-left` style of the element.
|
|
251
399
|
* Accepts any valid CSS value (e.g., "10px", "auto").
|
|
@@ -254,75 +402,75 @@ declare abstract class BaseStyle {
|
|
|
254
402
|
* @param value - The left margin value to apply, or `undefined` to remove it.
|
|
255
403
|
* @return This instance for chaining.
|
|
256
404
|
*/
|
|
257
|
-
ml(value: Property.MarginLeft | undefined): this;
|
|
405
|
+
ml(value: Property.MarginLeft | number | undefined): this;
|
|
258
406
|
/**
|
|
259
407
|
* Sets the overall border radius.
|
|
260
408
|
* @param value - The CSS border-radius value (e.g., "8px", "50%").
|
|
261
409
|
* @return This instance for chaining.
|
|
262
410
|
*/
|
|
263
|
-
radius(value: Property.BorderRadius | undefined): this;
|
|
411
|
+
radius(value: Property.BorderRadius | number | undefined): this;
|
|
264
412
|
/**
|
|
265
413
|
* Sets the top-left corner border radius.
|
|
266
414
|
* @param value - The CSS border-top-left-radius value.
|
|
267
415
|
* @return This instance for chaining.
|
|
268
416
|
*/
|
|
269
|
-
radiusTopLeft(value: Property.BorderTopLeftRadius | undefined): this;
|
|
417
|
+
radiusTopLeft(value: Property.BorderTopLeftRadius | number | undefined): this;
|
|
270
418
|
/**
|
|
271
419
|
* Sets the top-right corner border radius.
|
|
272
420
|
* @param value - The CSS border-top-right-radius value.
|
|
273
421
|
* @return This instance for chaining.
|
|
274
422
|
*/
|
|
275
|
-
radiusTopRight(value: Property.BorderTopRightRadius | undefined): this;
|
|
423
|
+
radiusTopRight(value: Property.BorderTopRightRadius | number | undefined): this;
|
|
276
424
|
/**
|
|
277
425
|
* Sets the bottom-left corner border radius.
|
|
278
426
|
* @param value - The CSS border-bottom-left-radius value.
|
|
279
427
|
* @return This instance for chaining.
|
|
280
428
|
*/
|
|
281
|
-
radiusBottomLeft(value: Property.BorderBottomLeftRadius | undefined): this;
|
|
429
|
+
radiusBottomLeft(value: Property.BorderBottomLeftRadius | number | undefined): this;
|
|
282
430
|
/**
|
|
283
431
|
* Sets the bottom-right corner border radius.
|
|
284
432
|
* @param value - The CSS border-bottom-right-radius value.
|
|
285
433
|
* @return This instance for chaining.
|
|
286
434
|
*/
|
|
287
|
-
radiusBottomRight(value: Property.BorderBottomRightRadius | undefined): this;
|
|
435
|
+
radiusBottomRight(value: Property.BorderBottomRightRadius | number | undefined): this;
|
|
288
436
|
/**
|
|
289
437
|
* Sets the border radius for both top corners.
|
|
290
438
|
* @param value - The CSS border-radius value to apply to top-left and top-right corners.
|
|
291
439
|
* @return This instance for chaining.
|
|
292
440
|
*/
|
|
293
|
-
radiusTop(value: Property.BorderTopLeftRadius | undefined): this;
|
|
441
|
+
radiusTop(value: Property.BorderTopLeftRadius | number | undefined): this;
|
|
294
442
|
/**
|
|
295
443
|
* Sets the border radius for both bottom corners.
|
|
296
444
|
* @param value - The CSS border-radius value to apply to bottom-left and bottom-right corners.
|
|
297
445
|
* @return This instance for chaining.
|
|
298
446
|
*/
|
|
299
|
-
radiusBottom(value: Property.BorderBottomLeftRadius | undefined): this;
|
|
447
|
+
radiusBottom(value: Property.BorderBottomLeftRadius | number | undefined): this;
|
|
300
448
|
/**
|
|
301
449
|
* Sets the border radius for both left corners.
|
|
302
450
|
* @param value - The CSS border-radius value to apply to top-left and bottom-left corners.
|
|
303
451
|
* @return This instance for chaining.
|
|
304
452
|
*/
|
|
305
|
-
radiusLeft(value: Property.BorderTopLeftRadius | undefined): this;
|
|
453
|
+
radiusLeft(value: Property.BorderTopLeftRadius | number | undefined): this;
|
|
306
454
|
/**
|
|
307
455
|
* Sets the border radius for both right corners.
|
|
308
456
|
* @param value - The CSS border-radius value to apply to top-right and bottom-right corners.
|
|
309
457
|
* @return This instance for chaining.
|
|
310
458
|
*/
|
|
311
|
-
radiusRight(value: Property.BorderTopRightRadius | undefined): this;
|
|
459
|
+
radiusRight(value: Property.BorderTopRightRadius | number | undefined): this;
|
|
312
460
|
/**
|
|
313
461
|
* Sets the border radius for both left and right sides (horizontal corners).
|
|
314
462
|
* Applies to top-left, top-right, bottom-left, and bottom-right corners on the X axis.
|
|
315
463
|
* @param value - The CSS border-radius value to apply horizontally.
|
|
316
464
|
* @return This instance for chaining.
|
|
317
465
|
*/
|
|
318
|
-
radiusX(value: Property.BorderRadius | undefined): this;
|
|
466
|
+
radiusX(value: Property.BorderRadius | number | undefined): this;
|
|
319
467
|
/**
|
|
320
468
|
* Sets the border radius for both top and bottom sides (vertical corners).
|
|
321
469
|
* Applies to top-left, top-right, bottom-left, and bottom-right corners on the Y axis.
|
|
322
470
|
* @param value - The CSS border-radius value to apply vertically.
|
|
323
471
|
* @return This instance for chaining.
|
|
324
472
|
*/
|
|
325
|
-
radiusY(value: Property.BorderRadius | undefined): this;
|
|
473
|
+
radiusY(value: Property.BorderRadius | number | undefined): this;
|
|
326
474
|
/**
|
|
327
475
|
* Sets the `display` style of the element.
|
|
328
476
|
* Common values include "block", "inline", "flex", "grid", or "none".
|
|
@@ -424,30 +572,170 @@ declare abstract class BaseStyle {
|
|
|
424
572
|
* @return This instance for chaining.
|
|
425
573
|
*/
|
|
426
574
|
b(value: Property.Border | undefined): this;
|
|
575
|
+
/**
|
|
576
|
+
* Sets the `border-width` of the element.
|
|
577
|
+
* Controls the thickness of the border. Accepts any valid CSS length (e.g., "1px", "0.2em") or a number (interpreted as pixels).
|
|
578
|
+
* Passing `undefined` removes the border width.
|
|
579
|
+
*
|
|
580
|
+
* @param value - The border width to apply, or `undefined` to remove it.
|
|
581
|
+
* @return This instance for chaining.
|
|
582
|
+
*/
|
|
583
|
+
bWidth(value: Property.BorderWidth | number | undefined): this;
|
|
584
|
+
/**
|
|
585
|
+
* Sets the `border-style` of the element.
|
|
586
|
+
* Controls the visual style of the border (e.g., solid, dashed, dotted, double).
|
|
587
|
+
* Accepts any valid CSS border-style value, or `undefined` to remove the style.
|
|
588
|
+
*
|
|
589
|
+
* @param value - The border style to apply (e.g., "solid", "dashed", "none"), or `undefined` to remove it.
|
|
590
|
+
* @return This instance for chaining.
|
|
591
|
+
*/
|
|
592
|
+
bStyle(value: Property.BorderStyle | undefined): this;
|
|
593
|
+
/**
|
|
594
|
+
* Sets the `border-color` of the element.
|
|
595
|
+
* Controls the color of the element’s border.
|
|
596
|
+
* Accepts named colors, hex codes, RGB/RGBA values, or CSS variables.
|
|
597
|
+
* Passing `undefined` removes the border color.
|
|
598
|
+
*
|
|
599
|
+
* @param value - The border color to apply (e.g., "#000", "rgba(0,0,0,0.2)", "var(--border-color)"), or `undefined` to remove it.
|
|
600
|
+
* @return This instance for chaining.
|
|
601
|
+
*/
|
|
602
|
+
bColor(value: Property.BorderColor | undefined): this;
|
|
427
603
|
/**
|
|
428
604
|
* Sets the top border style.
|
|
429
605
|
* @param value - The CSS border-top value.
|
|
430
606
|
* @return This instance for chaining.
|
|
431
607
|
*/
|
|
432
608
|
bt(value: Property.BorderTop | undefined): this;
|
|
609
|
+
/**
|
|
610
|
+
* Sets the `border-top-width` of the element.
|
|
611
|
+
* Controls the thickness of the top border. Accepts any valid CSS length or a number (interpreted as pixels).
|
|
612
|
+
* Passing `undefined` removes the top border width.
|
|
613
|
+
*
|
|
614
|
+
* @param value - The top border width to apply, or `undefined` to remove it.
|
|
615
|
+
* @return This instance for chaining.
|
|
616
|
+
*/
|
|
617
|
+
btWidth(value: Property.BorderTopWidth | number | undefined): this;
|
|
618
|
+
/**
|
|
619
|
+
* Sets the `border-top-style` of the element.
|
|
620
|
+
* Controls the visual style of the top border (e.g., solid, dashed, dotted).
|
|
621
|
+
* Passing `undefined` removes the top border style.
|
|
622
|
+
*
|
|
623
|
+
* @param value - The top border style to apply, or `undefined` to remove it.
|
|
624
|
+
* @return This instance for chaining.
|
|
625
|
+
*/
|
|
626
|
+
btStyle(value: Property.BorderTopStyle | undefined): this;
|
|
627
|
+
/**
|
|
628
|
+
* Sets the `border-top-color` of the element.
|
|
629
|
+
* Controls the color of the top border.
|
|
630
|
+
* Accepts named colors, hex codes, RGB/RGBA values, or CSS variables.
|
|
631
|
+
* Passing `undefined` removes the top border color.
|
|
632
|
+
*
|
|
633
|
+
* @param value - The top border color to apply, or `undefined` to remove it.
|
|
634
|
+
* @return This instance for chaining.
|
|
635
|
+
*/
|
|
636
|
+
btColor(value: Property.BorderTopColor | undefined): this;
|
|
433
637
|
/**
|
|
434
638
|
* Sets the right border style.
|
|
435
639
|
* @param value - The CSS border-right value.
|
|
436
640
|
* @return This instance for chaining.
|
|
437
641
|
*/
|
|
438
642
|
br(value: Property.BorderRight | undefined): this;
|
|
643
|
+
/**
|
|
644
|
+
* Sets the `border-right-width` of the element.
|
|
645
|
+
* Controls the thickness of the right border. Accepts any valid CSS length or a number (interpreted as pixels).
|
|
646
|
+
* Passing `undefined` removes the right border width.
|
|
647
|
+
*
|
|
648
|
+
* @param value - The right border width to apply, or `undefined` to remove it.
|
|
649
|
+
* @return This instance for chaining.
|
|
650
|
+
*/
|
|
651
|
+
brWidth(value: Property.BorderRightWidth | number | undefined): this;
|
|
652
|
+
/**
|
|
653
|
+
* Sets the `border-right-style` of the element.
|
|
654
|
+
* Controls the visual style of the right border (e.g., solid, dashed, dotted).
|
|
655
|
+
* Passing `undefined` removes the right border style.
|
|
656
|
+
*
|
|
657
|
+
* @param value - The right border style to apply, or `undefined` to remove it.
|
|
658
|
+
* @return This instance for chaining.
|
|
659
|
+
*/
|
|
660
|
+
brStyle(value: Property.BorderRightStyle | undefined): this;
|
|
661
|
+
/**
|
|
662
|
+
* Sets the `border-right-color` of the element.
|
|
663
|
+
* Controls the color of the right border.
|
|
664
|
+
* Accepts named colors, hex codes, RGB/RGBA values, or CSS variables.
|
|
665
|
+
* Passing `undefined` removes the right border color.
|
|
666
|
+
*
|
|
667
|
+
* @param value - The right border color to apply, or `undefined` to remove it.
|
|
668
|
+
* @return This instance for chaining.
|
|
669
|
+
*/
|
|
670
|
+
brColor(value: Property.BorderRightColor | undefined): this;
|
|
439
671
|
/**
|
|
440
672
|
* Sets the bottom border style.
|
|
441
673
|
* @param value - The CSS border-bottom value.
|
|
442
674
|
* @return This instance for chaining.
|
|
443
675
|
*/
|
|
444
676
|
bb(value: Property.BorderBottom | undefined): this;
|
|
677
|
+
/**
|
|
678
|
+
* Sets the `border-bottom-width` of the element.
|
|
679
|
+
* Controls the thickness of the bottom border. Accepts any valid CSS length or a number (interpreted as pixels).
|
|
680
|
+
* Passing `undefined` removes the bottom border width.
|
|
681
|
+
*
|
|
682
|
+
* @param value - The bottom border width to apply, or `undefined` to remove it.
|
|
683
|
+
* @return This instance for chaining.
|
|
684
|
+
*/
|
|
685
|
+
bbWidth(value: Property.BorderBottomWidth | number | undefined): this;
|
|
686
|
+
/**
|
|
687
|
+
* Sets the `border-bottom-style` of the element.
|
|
688
|
+
* Controls the visual style of the bottom border (e.g., solid, dashed, dotted).
|
|
689
|
+
* Passing `undefined` removes the bottom border style.
|
|
690
|
+
*
|
|
691
|
+
* @param value - The bottom border style to apply, or `undefined` to remove it.
|
|
692
|
+
* @return This instance for chaining.
|
|
693
|
+
*/
|
|
694
|
+
bbStyle(value: Property.BorderBottomStyle | undefined): this;
|
|
695
|
+
/**
|
|
696
|
+
* Sets the `border-bottom-color` of the element.
|
|
697
|
+
* Controls the color of the bottom border.
|
|
698
|
+
* Accepts named colors, hex codes, RGB/RGBA values, or CSS variables.
|
|
699
|
+
* Passing `undefined` removes the bottom border color.
|
|
700
|
+
*
|
|
701
|
+
* @param value - The bottom border color to apply, or `undefined` to remove it.
|
|
702
|
+
* @return This instance for chaining.
|
|
703
|
+
*/
|
|
704
|
+
bbColor(value: Property.BorderBottomColor | undefined): this;
|
|
445
705
|
/**
|
|
446
706
|
* Sets the left border style.
|
|
447
707
|
* @param value - The CSS border-left value.
|
|
448
708
|
* @return This instance for chaining.
|
|
449
709
|
*/
|
|
450
710
|
bl(value: Property.BorderLeft | undefined): this;
|
|
711
|
+
/**
|
|
712
|
+
* Sets the `border-left-width` of the element.
|
|
713
|
+
* Controls the thickness of the left border. Accepts any valid CSS length or a number (interpreted as pixels).
|
|
714
|
+
* Passing `undefined` removes the left border width.
|
|
715
|
+
*
|
|
716
|
+
* @param value - The left border width to apply, or `undefined` to remove it.
|
|
717
|
+
* @return This instance for chaining.
|
|
718
|
+
*/
|
|
719
|
+
blWidth(value: Property.BorderLeftWidth | number | undefined): this;
|
|
720
|
+
/**
|
|
721
|
+
* Sets the `border-left-style` of the element.
|
|
722
|
+
* Controls the visual style of the left border (e.g., solid, dashed, dotted).
|
|
723
|
+
* Passing `undefined` removes the left border style.
|
|
724
|
+
*
|
|
725
|
+
* @param value - The left border style to apply, or `undefined` to remove it.
|
|
726
|
+
* @return This instance for chaining.
|
|
727
|
+
*/
|
|
728
|
+
blStyle(value: Property.BorderLeftStyle | undefined): this;
|
|
729
|
+
/**
|
|
730
|
+
* Sets the `border-left-color` of the element.
|
|
731
|
+
* Controls the color of the left border.
|
|
732
|
+
* Accepts named colors, hex codes, RGB/RGBA values, or CSS variables.
|
|
733
|
+
* Passing `undefined` removes the left border color.
|
|
734
|
+
*
|
|
735
|
+
* @param value - The left border color to apply, or `undefined` to remove it.
|
|
736
|
+
* @return This instance for chaining.
|
|
737
|
+
*/
|
|
738
|
+
blColor(value: Property.BorderLeftColor | undefined): this;
|
|
451
739
|
/**
|
|
452
740
|
* Sets the left and right border styles.
|
|
453
741
|
* @param value - The CSS border value to apply to both left and right sides.
|
|
@@ -864,6 +1152,62 @@ declare abstract class BaseStyle {
|
|
|
864
1152
|
* @return This instance for chaining.
|
|
865
1153
|
*/
|
|
866
1154
|
boxShadow(value: Property.BoxShadow | undefined): this;
|
|
1155
|
+
/**
|
|
1156
|
+
* Sets the `box-sizing` style of the element.
|
|
1157
|
+
* Controls how the element’s total width and height are calculated — either including or excluding padding and border.
|
|
1158
|
+
* Accepts any valid CSS box-sizing value (e.g., `"border-box"`, `"content-box"`), or `undefined` to remove it.
|
|
1159
|
+
*
|
|
1160
|
+
* @param value - The box-sizing value to apply, or `undefined` to remove the style.
|
|
1161
|
+
* @return This instance for chaining.
|
|
1162
|
+
*/
|
|
1163
|
+
boxSizing(value: Property.BoxSizing | undefined): this;
|
|
1164
|
+
/**
|
|
1165
|
+
* Sets the `background` shorthand style of the element.
|
|
1166
|
+
* Accepts any valid CSS background value, including colors, gradients, images, positions, and repeat modes.
|
|
1167
|
+
* Useful for applying complex background styles in a single declaration.
|
|
1168
|
+
* Passing `undefined` removes the background style.
|
|
1169
|
+
*
|
|
1170
|
+
* @param value - The background value to apply (e.g., "#fff", "linear-gradient(...)", "url(...)", "center/cover"), or `undefined` to remove it.
|
|
1171
|
+
* @return This instance for chaining.
|
|
1172
|
+
*/
|
|
1173
|
+
background(value: Property.Background | undefined): this;
|
|
1174
|
+
/**
|
|
1175
|
+
* Sets the `outline` shorthand property of the element.
|
|
1176
|
+
* Controls the outline's width, style, and color in a single call.
|
|
1177
|
+
* Unlike borders, outlines do not affect layout and can extend beyond element bounds.
|
|
1178
|
+
* Passing `undefined` removes the outline.
|
|
1179
|
+
*
|
|
1180
|
+
* @param value - A valid CSS outline shorthand (e.g. "2px dashed red"), or `undefined` to remove it.
|
|
1181
|
+
* @return This instance for chaining.
|
|
1182
|
+
*/
|
|
1183
|
+
outline(value: Property.Outline | undefined): this;
|
|
1184
|
+
/**
|
|
1185
|
+
* Sets the `outline-width` of the element.
|
|
1186
|
+
* Controls the thickness of the outline. Accepts any valid CSS length or a number (interpreted as pixels).
|
|
1187
|
+
* Passing `undefined` removes the outline width.
|
|
1188
|
+
*
|
|
1189
|
+
* @param value - The outline width to apply, or `undefined` to remove it.
|
|
1190
|
+
* @return This instance for chaining.
|
|
1191
|
+
*/
|
|
1192
|
+
outlineWidth(value: Property.OutlineWidth | number | undefined): this;
|
|
1193
|
+
/**
|
|
1194
|
+
* Sets the `outline-style` of the element.
|
|
1195
|
+
* Controls the visual style of the outline (e.g., solid, dashed, dotted).
|
|
1196
|
+
* Passing `undefined` removes the outline style.
|
|
1197
|
+
*
|
|
1198
|
+
* @param value - The outline style to apply, or `undefined` to remove it.
|
|
1199
|
+
* @return This instance for chaining.
|
|
1200
|
+
*/
|
|
1201
|
+
outlineStyle(value: Property.OutlineStyle | undefined): this;
|
|
1202
|
+
/**
|
|
1203
|
+
* Sets the `outline-color` of the element.
|
|
1204
|
+
* Controls the color of the outline. Accepts named colors, hex codes, RGB/RGBA values, or CSS variables.
|
|
1205
|
+
* Passing `undefined` removes the outline color.
|
|
1206
|
+
*
|
|
1207
|
+
* @param value - The outline color to apply, or `undefined` to remove it.
|
|
1208
|
+
* @return This instance for chaining.
|
|
1209
|
+
*/
|
|
1210
|
+
outlineColor(value: Property.OutlineColor | undefined): this;
|
|
867
1211
|
/**
|
|
868
1212
|
* Applies CSS styles to truncate overflowing text with an ellipsis.
|
|
869
1213
|
* Ensures the text stays on a single line and hides overflow.
|
|
@@ -878,6 +1222,16 @@ declare abstract class BaseStyle {
|
|
|
878
1222
|
* @return This instance for chaining.
|
|
879
1223
|
*/
|
|
880
1224
|
overflowEllipsis(): this;
|
|
1225
|
+
/**
|
|
1226
|
+
* Sets the `background` style to a linear gradient.
|
|
1227
|
+
* Accepts a direction and one or more color stops to construct a valid CSS `linear-gradient(...)` string.
|
|
1228
|
+
* Automatically joins color stops and applies the full gradient string to `background`.
|
|
1229
|
+
*
|
|
1230
|
+
* @param direction - The gradient direction (e.g., `"to right"`, `"45deg"`).
|
|
1231
|
+
* @param stops - An array of color stops (e.g., `"#0ea5e9"`, `"#3b82f6 50%"`, `"rgba(0,0,0,0.2)"`).
|
|
1232
|
+
* @return This instance for chaining.
|
|
1233
|
+
*/
|
|
1234
|
+
linearGradient(direction: LinearGradientDirection, ...stops: string[]): this;
|
|
881
1235
|
/**
|
|
882
1236
|
* Applies a batch of CSS style properties to the element.
|
|
883
1237
|
* Delegates each property to `setStyleProp`, which handles value normalization and kebab-case conversion.
|
|
@@ -964,8 +1318,9 @@ declare abstract class BaseDom<E extends HTMLElement | SVGElement> extends BaseS
|
|
|
964
1318
|
* @param type - The event type to remove.
|
|
965
1319
|
* @param handler - The original handler function.
|
|
966
1320
|
* @param options - Optional event listener options.
|
|
1321
|
+
* @return This DomElement instance for chaining.
|
|
967
1322
|
*/
|
|
968
|
-
off<T extends keyof DomElementEventMap>(type: T, handler: (ev: DomElementEventMap[T]) => void, options?: boolean | EventListenerOptions):
|
|
1323
|
+
off<T extends keyof DomElementEventMap>(type: T, handler: (ev: DomElementEventMap[T]) => void, options?: boolean | EventListenerOptions): this;
|
|
969
1324
|
/**
|
|
970
1325
|
* Appends one or more child nodes to the element.
|
|
971
1326
|
* Accepts DomElement instances, regular DOM Nodes, strings, or numbers.
|
|
@@ -1560,8 +1915,9 @@ declare class DomDocument {
|
|
|
1560
1915
|
* @param type - The event type to remove.
|
|
1561
1916
|
* @param handler - The original handler function.
|
|
1562
1917
|
* @param options - Optional event listener options.
|
|
1918
|
+
* @return This instance for chaining.
|
|
1563
1919
|
*/
|
|
1564
|
-
off<T extends keyof DocumentEventMap>(type: T, handler: (ev: DocumentEventMap[T]) => void, options?: boolean | EventListenerOptions):
|
|
1920
|
+
off<T extends keyof DocumentEventMap>(type: T, handler: (ev: DocumentEventMap[T]) => void, options?: boolean | EventListenerOptions): this;
|
|
1565
1921
|
/**
|
|
1566
1922
|
* Dispatches a DOM event on the document object.
|
|
1567
1923
|
*
|
|
@@ -1601,8 +1957,9 @@ declare class DomWindow {
|
|
|
1601
1957
|
* @param type - The event type to remove.
|
|
1602
1958
|
* @param handler - The original handler function.
|
|
1603
1959
|
* @param options - Optional event listener options.
|
|
1960
|
+
* @return This DomElement instance for chaining.
|
|
1604
1961
|
*/
|
|
1605
|
-
off<T extends keyof WindowEventMap>(type: T, handler: (ev: WindowEventMap[T]) => void, options?: boolean | EventListenerOptions):
|
|
1962
|
+
off<T extends keyof WindowEventMap>(type: T, handler: (ev: WindowEventMap[T]) => void, options?: boolean | EventListenerOptions): this;
|
|
1606
1963
|
/**
|
|
1607
1964
|
* Dispatches a DOM event on the window object.
|
|
1608
1965
|
*
|
|
@@ -1791,4 +2148,4 @@ declare function uniqueId(): string;
|
|
|
1791
2148
|
declare function camelToKebab(prop: string): string;
|
|
1792
2149
|
declare function getStyleValue(name: Autocomplete<keyof CssProperties>, value: string | number): string;
|
|
1793
2150
|
//#endregion
|
|
1794
|
-
export { $, $a, $body, $btn, $canvas, $document, $iframe, $img, $input, $option, $progress, $query, $select, $window, AnchorElement, Autocomplete, BaseDom, BaseStyle, Button, Canvas, CssProperties, type CssProperty, CssRule, DomBody, DomDocument, DomElement, DomElementChild, DomElementEventMap, DomElementTagNameMap, DomWindow, IFrame, ImageElement, InputCheckbox, InputColor, InputElementMap, InputNumber, InputRange, InputText, MediaRule, OptionElement, ProgressElement, SVG_TAGS, SelectElement, StyleSheet, TAG_ALIAS, TagAlias, UNITLESS_CSS_PROPS, VENDOR_CSS_PROPS, camelToKebab, getStyleValue, uniqueId };
|
|
2151
|
+
export { $, $a, $body, $btn, $canvas, $document, $iframe, $img, $input, $option, $progress, $query, $select, $window, AnchorElement, Autocomplete, BaseDom, BaseStyle, Button, Canvas, CssProperties, type CssProperty, CssRule, DomBody, DomDocument, DomElement, DomElementChild, DomElementEventMap, DomElementTagNameMap, DomWindow, IFrame, ImageElement, InputCheckbox, InputColor, InputElementMap, InputNumber, InputRange, InputText, LinearGradientDirection, MediaRule, OptionElement, ProgressElement, SVG_TAGS, SelectElement, StyleSheet, TAG_ALIAS, TagAlias, UNITLESS_CSS_PROPS, VENDOR_CSS_PROPS, camelToKebab, getStyleValue, uniqueId };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=class{p(e){return this.setStyleProp(`padding`,e)}pt(e){return this.setStyleProp(`paddingTop`,e)}pr(e){return this.setStyleProp(`paddingRight`,e)}pb(e){return this.setStyleProp(`paddingBottom`,e)}pl(e){return this.setStyleProp(`paddingLeft`,e)}px(e){return this.pl(e).pr(e)}py(e){return this.pt(e).pb(e)}m(e){return this.setStyleProp(`margin`,e)}mt(e){return this.setStyleProp(`marginTop`,e)}mr(e){return this.setStyleProp(`marginRight`,e)}mb(e){return this.setStyleProp(`marginBottom`,e)}ml(e){return this.setStyleProp(`marginLeft`,e)}radius(e){return this.setStyleProp(`borderRadius`,e)}radiusTopLeft(e){return this.setStyleProp(`borderTopLeftRadius`,e)}radiusTopRight(e){return this.setStyleProp(`borderTopRightRadius`,e)}radiusBottomLeft(e){return this.setStyleProp(`borderBottomLeftRadius`,e)}radiusBottomRight(e){return this.setStyleProp(`borderBottomRightRadius`,e)}radiusTop(e){return this.radiusTopLeft(e).radiusTopRight(e)}radiusBottom(e){return this.radiusBottomLeft(e).radiusBottomRight(e)}radiusLeft(e){return this.radiusTopLeft(e).radiusBottomLeft(e)}radiusRight(e){return this.radiusTopRight(e).radiusBottomRight(e)}radiusX(e){return this.radiusLeft(e).radiusRight(e)}radiusY(e){return this.radiusTop(e).radiusBottom(e)}display(e){return this.setStyleProp(`display`,e)}flexShrink(e){return this.setStyleProp(`flexShrink`,e)}flex(e){return this.setStyleProp(`flex`,e)}bgColor(e){return this.setStyleProp(`backgroundColor`,e)}color(e){return this.setStyleProp(`color`,e)}w(e){return this.setStyleProp(`width`,e)}h(e){return this.setStyleProp(`height`,e)}minW(e){return this.setStyleProp(`minWidth`,e)}maxW(e){return this.setStyleProp(`maxWidth`,e)}minH(e){return this.setStyleProp(`minHeight`,e)}maxH(e){return this.setStyleProp(`maxHeight`,e)}b(e){return this.setStyleProp(`border`,e)}bt(e){return this.setStyleProp(`borderTop`,e)}br(e){return this.setStyleProp(`borderRight`,e)}bb(e){return this.setStyleProp(`borderBottom`,e)}bl(e){return this.setStyleProp(`borderLeft`,e)}bx(e){return this.setStyleProp(`borderLeft`,e),this.setStyleProp(`borderRight`,e),this}by(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderBottom`,e),this}btl(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderLeft`,e),this}btr(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderRight`,e),this}bbl(e){return this.setStyleProp(`borderBottom`,e),this.setStyleProp(`borderLeft`,e),this}bbr(e){return this.setStyleProp(`borderBottom`,e),this.setStyleProp(`borderRight`,e),this}overflow(e){return this.setStyleProp(`overflow`,e)}overflowY(e){return this.setStyleProp(`overflowY`,e)}overflowX(e){return this.setStyleProp(`overflowX`,e)}fontSize(e){return this.setStyleProp(`fontSize`,e)}fontWeight(e){return this.setStyleProp(`fontWeight`,e)}fontFamily(e){return this.setStyleProp(`fontFamily`,e)}fontStyle(e){return this.setStyleProp(`fontStyle`,e)}textAlign(e){return this.setStyleProp(`textAlign`,e)}textDecoration(e){return this.setStyleProp(`textDecoration`,e)}pos(e){return this.setStyleProp(`position`,e)}top(e){return this.setStyleProp(`top`,e)}bottom(e){return this.setStyleProp(`bottom`,e)}left(e){return this.setStyleProp(`left`,e)}right(e){return this.setStyleProp(`right`,e)}cursor(e){return this.setStyleProp(`cursor`,e)}alignItems(e){return this.setStyleProp(`alignItems`,e)}justifyContent(e){return this.setStyleProp(`justifyContent`,e)}gap(e){return this.setStyleProp(`gap`,e)}flexDirection(e){return this.setStyleProp(`flexDirection`,e)}templateColumns(e){return this.setStyleProp(`gridTemplateColumns`,e)}templateRows(e){return this.setStyleProp(`gridTemplateRows`,e)}appearance(e){return this.setStyleProp(`appearance`,e)}userSelect(e){return this.setStyleProp(`userSelect`,e)}verticalAlign(e){return this.setStyleProp(`verticalAlign`,e)}whiteSpace(e){return this.setStyleProp(`whiteSpace`,e)}textOverflow(e){return this.setStyleProp(`textOverflow`,e)}zIndex(e){return this.setStyleProp(`zIndex`,e)}opacity(e){return this.setStyleProp(`opacity`,e)}transform(e){return this.setStyleProp(`transform`,e)}translate(e,t){let n=typeof e==`number`?`${e}px`:e,r=typeof t==`number`?`${t}px`:t;return this.setStyleProp(`transform`,`translate(${n}, ${r})`)}translateX(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`transform`,`translateX(${t})`)}translateY(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`transform`,`translateY(${t})`)}scale(e,t){let n=typeof e==`number`?e.toString():e,r=typeof t==`number`?t.toString():t;return this.setStyleProp(`transform`,`scale(${n}, ${r})`)}scaleX(e){let t=typeof e==`number`?e.toString():e;return this.setStyleProp(`transform`,`scaleX(${t})`)}scaleY(e){let t=typeof e==`number`?e.toString():e;return this.setStyleProp(`transform`,`scaleY(${t})`)}rotate(e){let t=typeof e==`number`?`${e}deg`:e;return this.setStyleProp(`transform`,`rotate(${t})`)}rotateX(e){let t=typeof e==`number`?`${e}deg`:e;return this.setStyleProp(`transform`,`rotateX(${t})`)}rotateY(e){let t=typeof e==`number`?`${e}deg`:e;return this.setStyleProp(`transform`,`rotateY(${t})`)}rotateZ(e){let t=typeof e==`number`?`${e}deg`:e;return this.setStyleProp(`transform`,`rotateZ(${t})`)}transformOrigin(e){return this.setStyleProp(`transformOrigin`,e)}transition(e){return this.setStyleProp(`transition`,e)}willChange(e){return this.setStyleProp(`willChange`,e)}boxShadow(e){return this.setStyleProp(`boxShadow`,e)}overflowEllipsis(){return this.overflow(`hidden`).whiteSpace(`nowrap`).textOverflow(`ellipsis`)}style(e){for(let t of Object.keys(e))this.setStyleProp(t,e[t]);return this}};const t={opacity:1,zIndex:1,fontWeight:1,lineHeight:1,flexGrow:1,flexShrink:1,order:1,zoom:1,scale:1,counterIncrement:1,counterReset:1,tabSize:1,orphans:1,widows:1,columns:1,columnCount:1,gridRow:1,gridColumn:1},n={WebkitAppearance:1},r=`svg.svgA.animate.animateMotion.animateTransform.circle.clipPath.defs.desc.ellipse.feBlend.feColorMatrix.feComponentTransfer.feComposite.feConvolveMatrix.feDiffuseLighting.feDisplacementMap.feDistantLight.feDropShadow.feFlood.feFuncA.feFuncB.feFuncG.feFuncR.feGaussianBlur.feImage.feMerge.feMergeNode.feMorphology.feOffset.fePointLight.feSpecularLighting.feSpotLight.feTile.feTurbulence.filter.foreignObject.g.image.line.linearGradient.marker.mask.metadata.mpath.path.pattern.polygon.polyline.radialGradient.rect.script.set.stop.style.switch.symbol.text.textPath.title.tspan.use.view`.split(`.`),i={svgA:`a`};function a(){return`${Date.now().toString(36)}-${(o++).toString(36)}`}let o=0;function s(e){return e.replace(/([a-z])([A-Z])/g,`$1-$2`).toLowerCase()}function c(e,n){return typeof n==`number`?t[e]?String(n):`${n}px`:n}const l=Symbol(`BaseDomIdentity`);var u=class t extends e{[l]=!0;getClientWidth(){return this.dom.clientWidth??0}getClientHeight(){return this.dom.clientHeight??0}getRect(){return this.dom.getBoundingClientRect()}getComputedStyle(){return window.getComputedStyle(this.dom)}className(e){return e==null?this.dom.removeAttribute(`class`):this.dom.setAttribute(`class`,e),this}toggleClass(e,t){return this.dom.classList.toggle(e,t),this}on(e,t,n){return this.dom.addEventListener(e,t,n),this}off(e,t,n){this.dom.removeEventListener(e,t,n)}add(...e){return this.dom.append(...e.map(e=>this.resolveNode(e))),this}insertAtIndex(e,...t){let n=Array.from(this.dom.children),r=Math.max(0,Math.min(e,n.length));for(let e of t){let t=n[r]??null;this.dom.insertBefore(this.resolveNode(e),t),r++}return this}setChildren(...e){return this.clear().add(...e)}setChildrenFromIndex(e,...t){let n=Array.from(this.dom.children),r=n.length,i=Math.max(0,Math.min(e,r));for(let e=i;e<r;e++)this.dom.removeChild(n[e]);let a=this.dom.children[i]??null;for(let e of t)this.dom.insertBefore(this.resolveNode(e),a);return this}clear(e,t){let n=Array.from(this.dom.children),r=Math.max(0,e??0),i=Math.min(n.length,t??n.length);for(let e=r;e<i;e++)this.dom.removeChild(n[e]);return this}contains(e){let n=e instanceof t?e.dom:e;return this.dom.contains(n)}ref(e){return e(this),this}resolveNode(e){return typeof e==`string`||typeof e==`number`?document.createTextNode(String(e)):t.isBaseDom(e)?e.dom:e}setStyleProp(e,t){return t===void 0?(this.dom.style.removeProperty(s(e)),this):(this.dom.style.setProperty(s(e),c(e,t)),this)}static isBaseDom(e){return typeof e!=`object`||!e?!1:Object.getOwnPropertySymbols(e).includes(l)}},d=class extends u{constructor(e,t){super(),this._tag=i[e]??e,this._isSvg=r.includes(this._tag),this._dom=t??(this._isSvg?document.createElementNS(`http://www.w3.org/2000/svg`,this._tag):document.createElement(this._tag))}_tag;_isSvg;_dom;get tag(){return this._tag}get isSvg(){return this._isSvg}get dom(){return this._dom}getText(){return this._dom.textContent}text(e){return this._dom.textContent=e==null?``:String(e),this}remove(){this.dom.remove()}getAttr(e){return this.dom.getAttribute(e)}attr(e,t){return t===void 0?this.dom.removeAttribute(e):this.dom.setAttribute(e,String(t)),this}attrs(e){for(let[t,n]of Object.entries(e))this.attr(t,n);return this}getProp(e){return this.dom[e]}prop(e,t){return this.dom[e]=t,this}props(e){for(let[t,n]of Object.entries(e))this.prop(t,n);return this}id(e){return this._dom.id=e??``,this}htmlFor(e){return this.tag===`label`&&(this.dom.htmlFor=e??``),this}title(e){return e===void 0?this.dom.removeAttribute(`title`):this.dom.setAttribute(`title`,e),this}disabled(e){return e?this.dom.setAttribute(`disabled`,``):this.dom.removeAttribute(`disabled`),this}disable(){return this.disabled(!0)}enable(){return this.disabled(!1)}popover(e){return e===void 0?this.dom.removeAttribute(`popover`):this.dom.setAttribute(`popover`,e),this}showPopover(){return this.dom.showPopover(),this}hidePopover(){return this.dom.hidePopover(),this}};function f(e){return new d(e)}function p(e){let t=document.querySelector(e);return new d(t.tagName.toLowerCase(),t)}var m=class extends d{constructor(){super(`a`)}href(e){return this.dom.href=e,this}};function h(){return new m}var g=class extends d{constructor(){super(`button`)}type(e){return this.dom.type=e,this}};function _(){return new g}var v=class extends d{constructor(e){super(`canvas`,e)}_size={width:this.dom.width,height:this.dom.height};getWidth(){return this.dom.width}getHeight(){return this.dom.height}width(e){return this.dom.width=e,this}height(e){return this.dom.height=e,this}setSize(e,t){return this.dom.width=e,this.dom.height=t,this}getSize(){return this._size.width=this.dom.width,this._size.height=this.dom.height,this._size}getAspect(){return this.dom.width/this.dom.height}getAspectScale(e){let t=this.dom.width/this.dom.height,n,r,i;return t>=1?(n=1/t,r=1,i=1):(n=1,r=t,i=1),e.x=n,e.y=r,e.z=i,e}};function y(){return new v}var b=class extends e{constructor(e,t,n){super(),this._sheet=e,this._index=t,this._rule=n}_sheet;_index;_rule;get sheet(){return this._sheet}get index(){return this._index}get rule(){return this._rule}get selectorText(){return this._rule.selectorText}remove(){this._sheet.removeRule(this)}extend(e){return this.sheet.cssRule(`${this.selectorText}${e}`)}hover(){return this.extend(`:hover`)}focus(){return this.extend(`:focus`)}focusWithin(){return this.extend(`:focus-within`)}active(){return this.extend(`:active`)}disabled(){return this.extend(`:disabled`)}setStyleProp(e,t){return t===void 0?(this.rule.style.removeProperty(s(e)),this):(this.rule.style.setProperty(s(e),c(e,t)),this)}},x=class extends u{get dom(){return document.body}};function S(){return new x}var C=class{on(e,t,n){return document.addEventListener(e,t,n),this}off(e,t,n){document.removeEventListener(e,t,n)}dispatch(e){return document.dispatchEvent(e),this}};function w(){return new C}var T=class{on(e,t,n){return window.addEventListener(e,t,n),this}off(e,t,n){window.removeEventListener(e,t,n)}dispatch(e){return window.dispatchEvent(e),this}};function E(){return new T}var D=class extends d{constructor(){super(`iframe`)}src(e){return this.dom.src=e,this}allowFullscreen(e=!0){return this.dom.allowFullscreen=e,this}width(e){return this.dom.width=c(`width`,e),this}height(e){return this.dom.height=c(`height`,e),this}setSize(e,t){return this.dom.width=c(`width`,e),this.dom.height=c(`height`,t),this}reload(){this.dom.src=this.dom.src}};function O(){return new D}var k=class extends d{constructor(){super(`img`)}getNaturalWidth(){return this.dom.naturalWidth??0}getNaturalHeight(){return this.dom.naturalHeight??0}src(e){return this.dom.src=e,this}width(e){return this.dom.width=e,this}height(e){return this.dom.height=e,this}setSize(e,t){return this.width(e).height(t)}alt(e){return this.dom.alt=e,this}};function A(){return new k}var j=class extends d{constructor(){super(`input`),this.dom.type=`checkbox`}name(e){return this.dom.name=e,this}checked(e){return this.prop(`checked`,e),this}isChecked(){return this.getProp(`checked`)}},M=class extends d{constructor(){super(`input`),this._dom.type=`color`}_rgb={r:1,g:1,b:1};name(e){return this._dom.name=e,this}value(e){return this._dom.value=e,this}getValue(){return this._dom.value}getRGB(){let e=this._dom.value,t=parseInt(e.slice(1,3),16),n=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16);return this._rgb.r=t,this._rgb.g=n,this._rgb.b=r,this._rgb}getNormalizedRGB(){let e=this._dom.value,t=parseInt(e.slice(1,3),16),n=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16);return this._rgb.r=t/255,this._rgb.g=n/255,this._rgb.b=r/255,this._rgb}},N=class extends d{constructor(){super(`input`),this.dom.type=`number`}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}getValue(){return Number(this.dom.value)}min(e){return this.dom.min=String(e),this}max(e){return this.dom.max=String(e),this}step(e){return this.dom.step=String(e),this}placeholder(e){return this.dom.placeholder=e,this}},P=class extends d{constructor(){super(`input`),this.dom.type=`range`}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}getValue(){return Number(this.dom.value)}min(e){return this.dom.min=String(e),this}max(e){return this.dom.max=String(e),this}step(e){return this.dom.step=String(e),this}},F=class extends d{constructor(){super(`input`),this.dom.type=`text`}name(e){return this.dom.name=e,this}value(e){return this.dom.value=e,this}getValue(){return this.dom.value}placeholder(e){return this.dom.placeholder=e,this}};function I(e){switch(e){case`text`:return new F;case`number`:return new N;case`checkbox`:return new j;case`color`:return new M;case`range`:return new P}}var L=class{constructor(e,t,n){this._sheet=e,this._index=t,this._rule=n}_sheet;_index;_rule;get sheet(){return this._sheet}get index(){return this._index}get rule(){return this._rule}get length(){return this._rule.cssRules.length}get mediaText(){return this._rule.media.mediaText}cssRule(e){let t=this.length;return this.rule.insertRule(`${e}{}`,t),new b(this.sheet,t,this.rule.cssRules.item(t))}remove(){this.sheet.removeRule(this)}removeRule(e){this.rule.deleteRule(e.index)}},R=class extends d{constructor(){super(`option`)}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}};function z(){return new R}var B=class extends d{constructor(){super(`progress`)}value(e){return this.dom.value=e,this}getValue(){return this.dom.value}max(e){return this.dom.max=e,this}getMax(){return this.dom.max}indeterminate(){return this.dom.removeAttribute(`value`),this}};function V(){return new B}var H=class extends d{constructor(){super(`select`)}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}};function U(){return new H}var W=class e{constructor(e){this._dom=e}_dom;get dom(){return this._dom}get sheet(){return this.dom.sheet}get length(){return this.sheet.cssRules.length}cssRule(e){let t=this.length;return this.sheet.insertRule(`${e}{}`,t),new b(this,t,this.sheet.cssRules.item(t))}mediaRule(e){let t=this.length;return this.sheet.insertRule(`@media(${e}){}`,t),new L(this,t,this.sheet.cssRules.item(t))}mediaMinWidth(e){return this.mediaRule(`min-width: ${c(`min-width`,e)}`)}mediaMaxWidth(e){return this.mediaRule(`max-width: ${c(`max-width`,e)}`)}removeRule(e){this.sheet.deleteRule(e.index)}static getSheet(t=e.DEFAULT_STYLE_ID){let n=document.head.querySelector(`#${t}`);if(n==null){let n=document.createElement(`style`);return n.id=t,n.setAttribute(`type`,`text/css`),document.head.append(n),new e(n)}else return new e(n)}static DEFAULT_STYLE_ID=`__neptune-style__`};export{f as $,h as $a,S as $body,_ as $btn,y as $canvas,w as $document,O as $iframe,A as $img,I as $input,z as $option,V as $progress,p as $query,U as $select,E as $window,m as AnchorElement,u as BaseDom,e as BaseStyle,g as Button,v as Canvas,b as CssRule,x as DomBody,C as DomDocument,d as DomElement,T as DomWindow,D as IFrame,k as ImageElement,j as InputCheckbox,M as InputColor,N as InputNumber,P as InputRange,F as InputText,L as MediaRule,R as OptionElement,B as ProgressElement,r as SVG_TAGS,H as SelectElement,W as StyleSheet,i as TAG_ALIAS,t as UNITLESS_CSS_PROPS,n as VENDOR_CSS_PROPS,s as camelToKebab,c as getStyleValue,a as uniqueId};
|
|
1
|
+
var e=class{p(e){return this.setStyleProp(`padding`,e)}pt(e){return this.setStyleProp(`paddingTop`,e)}pr(e){return this.setStyleProp(`paddingRight`,e)}pb(e){return this.setStyleProp(`paddingBottom`,e)}pl(e){return this.setStyleProp(`paddingLeft`,e)}px(e){return this.pl(e).pr(e)}py(e){return this.pt(e).pb(e)}m(e){return this.setStyleProp(`margin`,e)}mt(e){return this.setStyleProp(`marginTop`,e)}mr(e){return this.setStyleProp(`marginRight`,e)}mb(e){return this.setStyleProp(`marginBottom`,e)}ml(e){return this.setStyleProp(`marginLeft`,e)}radius(e){return this.setStyleProp(`borderRadius`,e)}radiusTopLeft(e){return this.setStyleProp(`borderTopLeftRadius`,e)}radiusTopRight(e){return this.setStyleProp(`borderTopRightRadius`,e)}radiusBottomLeft(e){return this.setStyleProp(`borderBottomLeftRadius`,e)}radiusBottomRight(e){return this.setStyleProp(`borderBottomRightRadius`,e)}radiusTop(e){return this.radiusTopLeft(e).radiusTopRight(e)}radiusBottom(e){return this.radiusBottomLeft(e).radiusBottomRight(e)}radiusLeft(e){return this.radiusTopLeft(e).radiusBottomLeft(e)}radiusRight(e){return this.radiusTopRight(e).radiusBottomRight(e)}radiusX(e){return this.radiusLeft(e).radiusRight(e)}radiusY(e){return this.radiusTop(e).radiusBottom(e)}display(e){return this.setStyleProp(`display`,e)}flexShrink(e){return this.setStyleProp(`flexShrink`,e)}flex(e){return this.setStyleProp(`flex`,e)}bgColor(e){return this.setStyleProp(`backgroundColor`,e)}color(e){return this.setStyleProp(`color`,e)}w(e){return this.setStyleProp(`width`,e)}h(e){return this.setStyleProp(`height`,e)}minW(e){return this.setStyleProp(`minWidth`,e)}maxW(e){return this.setStyleProp(`maxWidth`,e)}minH(e){return this.setStyleProp(`minHeight`,e)}maxH(e){return this.setStyleProp(`maxHeight`,e)}b(e){return this.setStyleProp(`border`,e)}bWidth(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`borderWidth`,t)}bStyle(e){return this.setStyleProp(`borderStyle`,e)}bColor(e){return this.setStyleProp(`borderColor`,e)}bt(e){return this.setStyleProp(`borderTop`,e)}btWidth(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`borderTopWidth`,t)}btStyle(e){return this.setStyleProp(`borderTopStyle`,e)}btColor(e){return this.setStyleProp(`borderTopColor`,e)}br(e){return this.setStyleProp(`borderRight`,e)}brWidth(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`borderRightWidth`,t)}brStyle(e){return this.setStyleProp(`borderRightStyle`,e)}brColor(e){return this.setStyleProp(`borderRightColor`,e)}bb(e){return this.setStyleProp(`borderBottom`,e)}bbWidth(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`borderBottomWidth`,t)}bbStyle(e){return this.setStyleProp(`borderBottomStyle`,e)}bbColor(e){return this.setStyleProp(`borderBottomColor`,e)}bl(e){return this.setStyleProp(`borderLeft`,e)}blWidth(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`borderLeftWidth`,t)}blStyle(e){return this.setStyleProp(`borderLeftStyle`,e)}blColor(e){return this.setStyleProp(`borderLeftColor`,e)}bx(e){return this.setStyleProp(`borderLeft`,e),this.setStyleProp(`borderRight`,e),this}by(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderBottom`,e),this}btl(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderLeft`,e),this}btr(e){return this.setStyleProp(`borderTop`,e),this.setStyleProp(`borderRight`,e),this}bbl(e){return this.setStyleProp(`borderBottom`,e),this.setStyleProp(`borderLeft`,e),this}bbr(e){return this.setStyleProp(`borderBottom`,e),this.setStyleProp(`borderRight`,e),this}overflow(e){return this.setStyleProp(`overflow`,e)}overflowY(e){return this.setStyleProp(`overflowY`,e)}overflowX(e){return this.setStyleProp(`overflowX`,e)}fontSize(e){return this.setStyleProp(`fontSize`,e)}fontWeight(e){return this.setStyleProp(`fontWeight`,e)}fontFamily(e){return this.setStyleProp(`fontFamily`,e)}fontStyle(e){return this.setStyleProp(`fontStyle`,e)}textAlign(e){return this.setStyleProp(`textAlign`,e)}textDecoration(e){return this.setStyleProp(`textDecoration`,e)}pos(e){return this.setStyleProp(`position`,e)}top(e){return this.setStyleProp(`top`,e)}bottom(e){return this.setStyleProp(`bottom`,e)}left(e){return this.setStyleProp(`left`,e)}right(e){return this.setStyleProp(`right`,e)}cursor(e){return this.setStyleProp(`cursor`,e)}alignItems(e){return this.setStyleProp(`alignItems`,e)}justifyContent(e){return this.setStyleProp(`justifyContent`,e)}gap(e){return this.setStyleProp(`gap`,e)}flexDirection(e){return this.setStyleProp(`flexDirection`,e)}templateColumns(e){return this.setStyleProp(`gridTemplateColumns`,e)}templateRows(e){return this.setStyleProp(`gridTemplateRows`,e)}appearance(e){return this.setStyleProp(`appearance`,e)}userSelect(e){return this.setStyleProp(`userSelect`,e)}verticalAlign(e){return this.setStyleProp(`verticalAlign`,e)}whiteSpace(e){return this.setStyleProp(`whiteSpace`,e)}textOverflow(e){return this.setStyleProp(`textOverflow`,e)}zIndex(e){return this.setStyleProp(`zIndex`,e)}opacity(e){return this.setStyleProp(`opacity`,e)}transform(e){return this.setStyleProp(`transform`,e)}translate(e,t){let n=typeof e==`number`?`${e}px`:e,r=typeof t==`number`?`${t}px`:t;return this.setStyleProp(`transform`,`translate(${n}, ${r})`)}translateX(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`transform`,`translateX(${t})`)}translateY(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`transform`,`translateY(${t})`)}scale(e,t){let n=typeof e==`number`?e.toString():e,r=typeof t==`number`?t.toString():t;return this.setStyleProp(`transform`,`scale(${n}, ${r})`)}scaleX(e){let t=typeof e==`number`?e.toString():e;return this.setStyleProp(`transform`,`scaleX(${t})`)}scaleY(e){let t=typeof e==`number`?e.toString():e;return this.setStyleProp(`transform`,`scaleY(${t})`)}rotate(e){let t=typeof e==`number`?`${e}deg`:e;return this.setStyleProp(`transform`,`rotate(${t})`)}rotateX(e){let t=typeof e==`number`?`${e}deg`:e;return this.setStyleProp(`transform`,`rotateX(${t})`)}rotateY(e){let t=typeof e==`number`?`${e}deg`:e;return this.setStyleProp(`transform`,`rotateY(${t})`)}rotateZ(e){let t=typeof e==`number`?`${e}deg`:e;return this.setStyleProp(`transform`,`rotateZ(${t})`)}transformOrigin(e){return this.setStyleProp(`transformOrigin`,e)}transition(e){return this.setStyleProp(`transition`,e)}willChange(e){return this.setStyleProp(`willChange`,e)}boxShadow(e){return this.setStyleProp(`boxShadow`,e)}boxSizing(e){return this.setStyleProp(`boxSizing`,e)}background(e){return this.setStyleProp(`background`,e)}outline(e){return this.setStyleProp(`outline`,e)}outlineWidth(e){let t=typeof e==`number`?`${e}px`:e;return this.setStyleProp(`outlineWidth`,t)}outlineStyle(e){return this.setStyleProp(`outlineStyle`,e)}outlineColor(e){return this.setStyleProp(`outlineColor`,e)}overflowEllipsis(){return this.overflow(`hidden`).whiteSpace(`nowrap`).textOverflow(`ellipsis`)}linearGradient(e,...t){let n=`linear-gradient(${e}, ${t.join(`, `)})`;return this.setStyleProp(`background`,n)}style(e){for(let t of Object.keys(e))this.setStyleProp(t,e[t]);return this}};const t={opacity:1,zIndex:1,fontWeight:1,lineHeight:1,flexGrow:1,flexShrink:1,order:1,zoom:1,scale:1,counterIncrement:1,counterReset:1,tabSize:1,orphans:1,widows:1,columns:1,columnCount:1,gridRow:1,gridColumn:1},n={WebkitAppearance:1},r=`svg.svgA.animate.animateMotion.animateTransform.circle.clipPath.defs.desc.ellipse.feBlend.feColorMatrix.feComponentTransfer.feComposite.feConvolveMatrix.feDiffuseLighting.feDisplacementMap.feDistantLight.feDropShadow.feFlood.feFuncA.feFuncB.feFuncG.feFuncR.feGaussianBlur.feImage.feMerge.feMergeNode.feMorphology.feOffset.fePointLight.feSpecularLighting.feSpotLight.feTile.feTurbulence.filter.foreignObject.g.image.line.linearGradient.marker.mask.metadata.mpath.path.pattern.polygon.polyline.radialGradient.rect.script.set.stop.style.switch.symbol.text.textPath.title.tspan.use.view`.split(`.`),i={svgA:`a`};function a(){return`${Date.now().toString(36)}-${(o++).toString(36)}`}let o=0;function s(e){return e.replace(/([a-z])([A-Z])/g,`$1-$2`).toLowerCase()}function c(e,n){return typeof n==`number`?t[e]?String(n):`${n}px`:n}const l=Symbol(`BaseDomIdentity`);var u=class t extends e{[l]=!0;getClientWidth(){return this.dom.clientWidth??0}getClientHeight(){return this.dom.clientHeight??0}getRect(){return this.dom.getBoundingClientRect()}getComputedStyle(){return window.getComputedStyle(this.dom)}className(e){return e==null?this.dom.removeAttribute(`class`):this.dom.setAttribute(`class`,e),this}toggleClass(e,t){return this.dom.classList.toggle(e,t),this}on(e,t,n){return this.dom.addEventListener(e,t,n),this}off(e,t,n){return this.dom.removeEventListener(e,t,n),this}add(...e){return this.dom.append(...e.map(e=>this.resolveNode(e))),this}insertAtIndex(e,...t){let n=Array.from(this.dom.children),r=Math.max(0,Math.min(e,n.length));for(let e of t){let t=n[r]??null;this.dom.insertBefore(this.resolveNode(e),t),r++}return this}setChildren(...e){return this.clear().add(...e)}setChildrenFromIndex(e,...t){let n=Array.from(this.dom.children),r=n.length,i=Math.max(0,Math.min(e,r));for(let e=i;e<r;e++)this.dom.removeChild(n[e]);let a=this.dom.children[i]??null;for(let e of t)this.dom.insertBefore(this.resolveNode(e),a);return this}clear(e,t){let n=Array.from(this.dom.children),r=Math.max(0,e??0),i=Math.min(n.length,t??n.length);for(let e=r;e<i;e++)this.dom.removeChild(n[e]);return this}contains(e){let n=e instanceof t?e.dom:e;return this.dom.contains(n)}ref(e){return e(this),this}resolveNode(e){return typeof e==`string`||typeof e==`number`?document.createTextNode(String(e)):t.isBaseDom(e)?e.dom:e}setStyleProp(e,t){return t===void 0?(this.dom.style.removeProperty(s(e)),this):(this.dom.style.setProperty(s(e),c(e,t)),this)}static isBaseDom(e){return typeof e!=`object`||!e?!1:Object.getOwnPropertySymbols(e).includes(l)}},d=class extends u{constructor(e,t){super(),this._tag=i[e]??e,this._isSvg=r.includes(this._tag),this._dom=t??(this._isSvg?document.createElementNS(`http://www.w3.org/2000/svg`,this._tag):document.createElement(this._tag))}_tag;_isSvg;_dom;get tag(){return this._tag}get isSvg(){return this._isSvg}get dom(){return this._dom}getText(){return this._dom.textContent}text(e){return this._dom.textContent=e==null?``:String(e),this}remove(){this.dom.remove()}getAttr(e){return this.dom.getAttribute(e)}attr(e,t){return t===void 0?this.dom.removeAttribute(e):this.dom.setAttribute(e,String(t)),this}attrs(e){for(let[t,n]of Object.entries(e))this.attr(t,n);return this}getProp(e){return this.dom[e]}prop(e,t){return this.dom[e]=t,this}props(e){for(let[t,n]of Object.entries(e))this.prop(t,n);return this}id(e){return this._dom.id=e??``,this}htmlFor(e){return this.tag===`label`&&(this.dom.htmlFor=e??``),this}title(e){return e===void 0?this.dom.removeAttribute(`title`):this.dom.setAttribute(`title`,e),this}disabled(e){return e?this.dom.setAttribute(`disabled`,``):this.dom.removeAttribute(`disabled`),this}disable(){return this.disabled(!0)}enable(){return this.disabled(!1)}popover(e){return e===void 0?this.dom.removeAttribute(`popover`):this.dom.setAttribute(`popover`,e),this}showPopover(){return this.dom.showPopover(),this}hidePopover(){return this.dom.hidePopover(),this}};function f(e){return new d(e)}function p(e){let t=document.querySelector(e);return new d(t.tagName.toLowerCase(),t)}var m=class extends d{constructor(){super(`a`)}href(e){return this.dom.href=e,this}};function h(){return new m}var g=class extends d{constructor(){super(`button`)}type(e){return this.dom.type=e,this}};function _(){return new g}var v=class extends d{constructor(e){super(`canvas`,e)}_size={width:this.dom.width,height:this.dom.height};getWidth(){return this.dom.width}getHeight(){return this.dom.height}width(e){return this.dom.width=e,this}height(e){return this.dom.height=e,this}setSize(e,t){return this.dom.width=e,this.dom.height=t,this}getSize(){return this._size.width=this.dom.width,this._size.height=this.dom.height,this._size}getAspect(){return this.dom.width/this.dom.height}getAspectScale(e){let t=this.dom.width/this.dom.height,n,r,i;return t>=1?(n=1/t,r=1,i=1):(n=1,r=t,i=1),e.x=n,e.y=r,e.z=i,e}};function y(){return new v}var b=class extends e{constructor(e,t,n){super(),this._sheet=e,this._index=t,this._rule=n}_sheet;_index;_rule;get sheet(){return this._sheet}get index(){return this._index}get rule(){return this._rule}get selectorText(){return this._rule.selectorText}remove(){this._sheet.removeRule(this)}extend(e){return this.sheet.cssRule(`${this.selectorText}${e}`)}hover(){return this.extend(`:hover`)}focus(){return this.extend(`:focus`)}focusWithin(){return this.extend(`:focus-within`)}active(){return this.extend(`:active`)}disabled(){return this.extend(`:disabled`)}setStyleProp(e,t){return t===void 0?(this.rule.style.removeProperty(s(e)),this):(this.rule.style.setProperty(s(e),c(e,t)),this)}},x=class extends u{get dom(){return document.body}};function S(){return new x}var C=class{on(e,t,n){return document.addEventListener(e,t,n),this}off(e,t,n){return document.removeEventListener(e,t,n),this}dispatch(e){return document.dispatchEvent(e),this}};function w(){return new C}var T=class{on(e,t,n){return window.addEventListener(e,t,n),this}off(e,t,n){return window.removeEventListener(e,t,n),this}dispatch(e){return window.dispatchEvent(e),this}};function E(){return new T}var D=class extends d{constructor(){super(`iframe`)}src(e){return this.dom.src=e,this}allowFullscreen(e=!0){return this.dom.allowFullscreen=e,this}width(e){return this.dom.width=c(`width`,e),this}height(e){return this.dom.height=c(`height`,e),this}setSize(e,t){return this.dom.width=c(`width`,e),this.dom.height=c(`height`,t),this}reload(){this.dom.src=this.dom.src}};function O(){return new D}var k=class extends d{constructor(){super(`img`)}getNaturalWidth(){return this.dom.naturalWidth??0}getNaturalHeight(){return this.dom.naturalHeight??0}src(e){return this.dom.src=e,this}width(e){return this.dom.width=e,this}height(e){return this.dom.height=e,this}setSize(e,t){return this.width(e).height(t)}alt(e){return this.dom.alt=e,this}};function A(){return new k}var j=class extends d{constructor(){super(`input`),this.dom.type=`checkbox`}name(e){return this.dom.name=e,this}checked(e){return this.prop(`checked`,e),this}isChecked(){return this.getProp(`checked`)}},M=class extends d{constructor(){super(`input`),this._dom.type=`color`}_rgb={r:1,g:1,b:1};name(e){return this._dom.name=e,this}value(e){return this._dom.value=e,this}getValue(){return this._dom.value}getRGB(){let e=this._dom.value,t=parseInt(e.slice(1,3),16),n=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16);return this._rgb.r=t,this._rgb.g=n,this._rgb.b=r,this._rgb}getNormalizedRGB(){let e=this._dom.value,t=parseInt(e.slice(1,3),16),n=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16);return this._rgb.r=t/255,this._rgb.g=n/255,this._rgb.b=r/255,this._rgb}},N=class extends d{constructor(){super(`input`),this.dom.type=`number`}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}getValue(){return Number(this.dom.value)}min(e){return this.dom.min=String(e),this}max(e){return this.dom.max=String(e),this}step(e){return this.dom.step=String(e),this}placeholder(e){return this.dom.placeholder=e,this}},P=class extends d{constructor(){super(`input`),this.dom.type=`range`}getValue(){return Number(this.dom.value)}getMin(){return Number(this.dom.min)}getMax(){return Number(this.dom.max)}getStep(){return Number(this.dom.step)}getRatio(){let e=this.getMin(),t=this.getMax(),n=this.getValue(),r=t-e;return r>0?Math.max(0,Math.min(1,(n-e)/r)):0}getPercent(){return this.getRatio()*100}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}min(e){return this.dom.min=String(e),this}max(e){return this.dom.max=String(e),this}step(e){return this.dom.step=String(e),this}bounds(e,t,n){return this.min(e).max(t).step(n)}ratio(e){let t=this.getMin(),n=this.getMax()-t,r=Math.max(0,Math.min(1,e));return this.value(t+r*n)}percent(e){return this.ratio(e/100)}trackFillColors(e,t){let n=this.getPercent();return this.linearGradient(`to right`,`${e} ${n}%`,`${t} ${n}%`)}},F=class extends d{constructor(){super(`input`),this.dom.type=`text`}name(e){return this.dom.name=e,this}value(e){return this.dom.value=e,this}getValue(){return this.dom.value}placeholder(e){return this.dom.placeholder=e,this}};function I(e){switch(e){case`text`:return new F;case`number`:return new N;case`checkbox`:return new j;case`color`:return new M;case`range`:return new P}}var L=class{constructor(e,t,n){this._sheet=e,this._index=t,this._rule=n}_sheet;_index;_rule;get sheet(){return this._sheet}get index(){return this._index}get rule(){return this._rule}get length(){return this._rule.cssRules.length}get mediaText(){return this._rule.media.mediaText}cssRule(e){let t=this.length;return this.rule.insertRule(`${e}{}`,t),new b(this.sheet,t,this.rule.cssRules.item(t))}remove(){this.sheet.removeRule(this)}removeRule(e){this.rule.deleteRule(e.index)}},R=class extends d{constructor(){super(`option`)}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}};function z(){return new R}var B=class extends d{constructor(){super(`progress`)}value(e){return this.dom.value=e,this}getValue(){return this.dom.value}max(e){return this.dom.max=e,this}getMax(){return this.dom.max}indeterminate(){return this.dom.removeAttribute(`value`),this}};function V(){return new B}var H=class extends d{constructor(){super(`select`)}name(e){return this.dom.name=e,this}value(e){return this.dom.value=String(e),this}getValue(){return this.dom.value}};function U(){return new H}var W=class e{constructor(e){this._dom=e}_dom;get dom(){return this._dom}get sheet(){return this.dom.sheet}get length(){return this.sheet.cssRules.length}cssRule(e){let t=this.length;return this.sheet.insertRule(`${e}{}`,t),new b(this,t,this.sheet.cssRules.item(t))}mediaRule(e){let t=this.length;return this.sheet.insertRule(`@media(${e}){}`,t),new L(this,t,this.sheet.cssRules.item(t))}mediaMinWidth(e){return this.mediaRule(`min-width: ${c(`min-width`,e)}`)}mediaMaxWidth(e){return this.mediaRule(`max-width: ${c(`max-width`,e)}`)}removeRule(e){this.sheet.deleteRule(e.index)}static getSheet(t=e.DEFAULT_STYLE_ID){let n=document.head.querySelector(`#${t}`);if(n==null){let n=document.createElement(`style`);return n.id=t,n.setAttribute(`type`,`text/css`),document.head.append(n),new e(n)}else return new e(n)}static DEFAULT_STYLE_ID=`__neptune-style__`};export{f as $,h as $a,S as $body,_ as $btn,y as $canvas,w as $document,O as $iframe,A as $img,I as $input,z as $option,V as $progress,p as $query,U as $select,E as $window,m as AnchorElement,u as BaseDom,e as BaseStyle,g as Button,v as Canvas,b as CssRule,x as DomBody,C as DomDocument,d as DomElement,T as DomWindow,D as IFrame,k as ImageElement,j as InputCheckbox,M as InputColor,N as InputNumber,P as InputRange,F as InputText,L as MediaRule,R as OptionElement,B as ProgressElement,r as SVG_TAGS,H as SelectElement,W as StyleSheet,i as TAG_ALIAS,t as UNITLESS_CSS_PROPS,n as VENDOR_CSS_PROPS,s as camelToKebab,c as getStyleValue,a as uniqueId};
|