@oscarpalmer/toretto 0.44.0 → 0.46.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/attribute/get.attribute.d.mts +2 -0
- package/dist/attribute/get.attribute.mjs +1 -0
- package/dist/attribute/index.d.mts +6 -0
- package/dist/attribute/set.attribute.d.mts +5 -0
- package/dist/create.d.mts +2 -0
- package/dist/data.d.mts +4 -0
- package/dist/event/index.d.mts +9 -1
- package/dist/event/index.mjs +2 -0
- package/dist/find/index.d.mts +14 -1
- package/dist/find/index.mjs +36 -1
- package/dist/find/relative.d.mts +5 -0
- package/dist/find/relative.mjs +1 -0
- package/dist/focusable.d.mts +4 -0
- package/dist/focusable.mjs +4 -0
- package/dist/html/index.d.mts +3 -0
- package/dist/html/index.mjs +1 -0
- package/dist/index.d.mts +96 -8
- package/dist/index.mjs +131 -12
- package/dist/internal/is.d.mts +19 -1
- package/dist/internal/is.mjs +21 -1
- package/dist/internal/property.mjs +9 -2
- package/dist/is.d.mts +5 -2
- package/dist/is.mjs +3 -2
- package/dist/models.d.mts +1 -8
- package/dist/property/get.property.d.mts +2 -0
- package/dist/property/get.property.mjs +2 -0
- package/dist/property/set.property.d.mts +3 -0
- package/dist/property/set.property.mjs +1 -0
- package/dist/style.d.mts +7 -0
- package/dist/style.mjs +5 -0
- package/dist/touch.d.mts +4 -0
- package/package.json +6 -6
- package/src/attribute/get.attribute.ts +2 -0
- package/src/attribute/index.ts +6 -0
- package/src/attribute/set.attribute.ts +5 -0
- package/src/create.ts +2 -0
- package/src/data.ts +4 -0
- package/src/event/index.ts +10 -1
- package/src/find/index.ts +64 -1
- package/src/find/relative.ts +5 -0
- package/src/focusable.ts +4 -0
- package/src/html/index.ts +4 -0
- package/src/internal/is.ts +35 -0
- package/src/internal/property.ts +14 -2
- package/src/is.ts +4 -1
- package/src/models.ts +0 -8
- package/src/property/get.property.ts +2 -0
- package/src/property/set.property.ts +3 -0
- package/src/style.ts +7 -0
- package/src/touch.ts +4 -0
package/dist/index.mjs
CHANGED
|
@@ -33,6 +33,7 @@ const supportsTouch = (() => {
|
|
|
33
33
|
//#region node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
|
|
34
34
|
/**
|
|
35
35
|
* Is the value a number?
|
|
36
|
+
*
|
|
36
37
|
* @param value Value to check
|
|
37
38
|
* @returns `true` if the value is a `number`, otherwise `false`
|
|
38
39
|
*/
|
|
@@ -41,6 +42,7 @@ function isNumber(value) {
|
|
|
41
42
|
}
|
|
42
43
|
/**
|
|
43
44
|
* Is the value a plain object?
|
|
45
|
+
*
|
|
44
46
|
* @param value Value to check
|
|
45
47
|
* @returns `true` if the value is a plain object, otherwise `false`
|
|
46
48
|
*/
|
|
@@ -54,8 +56,20 @@ function isPlainObject(value) {
|
|
|
54
56
|
//#region node_modules/@oscarpalmer/atoms/dist/internal/string.mjs
|
|
55
57
|
/**
|
|
56
58
|
* Get the string value from any value
|
|
59
|
+
*
|
|
57
60
|
* @param value Original value
|
|
58
61
|
* @returns String representation of the value
|
|
62
|
+
*
|
|
63
|
+
* @example
|
|
64
|
+
* ```typescript
|
|
65
|
+
* getString(null) // => ''
|
|
66
|
+
* getString('foo') // => 'foo'
|
|
67
|
+
* getString(123) // => '123'
|
|
68
|
+
* getString(true) // => 'true'
|
|
69
|
+
* getString([1, 2, 3]) // => '1,2,3'
|
|
70
|
+
* getString({a: 1}) // => '{"a":1}'
|
|
71
|
+
* getString(() => 123) // => '123'
|
|
72
|
+
* ```
|
|
59
73
|
*/
|
|
60
74
|
function getString(value) {
|
|
61
75
|
if (typeof value === "string") return value;
|
|
@@ -69,6 +83,7 @@ function getString(value) {
|
|
|
69
83
|
* Join an array of values into a string _(while ignoring empty values)_
|
|
70
84
|
*
|
|
71
85
|
* _(`null`, `undefined`, and any values that become whitespace-only strings are considered empty)_
|
|
86
|
+
*
|
|
72
87
|
* @param array Array of values
|
|
73
88
|
* @param delimiter Delimiter to use between values
|
|
74
89
|
* @returns Joined string
|
|
@@ -80,12 +95,13 @@ function join(array, delimiter) {
|
|
|
80
95
|
const values = [];
|
|
81
96
|
for (let index = 0; index < length; index += 1) {
|
|
82
97
|
const item = getString(array[index]);
|
|
83
|
-
if (item.
|
|
98
|
+
if (item.length > 0) values.push(item);
|
|
84
99
|
}
|
|
85
100
|
return values.join(typeof delimiter === "string" ? delimiter : "");
|
|
86
101
|
}
|
|
87
102
|
/**
|
|
88
103
|
* Split a string into words _(and other readable parts)_
|
|
104
|
+
*
|
|
89
105
|
* @param value Original string
|
|
90
106
|
* @returns Array of words found in the string
|
|
91
107
|
*/
|
|
@@ -97,6 +113,7 @@ const EXPRESSION_WORDS = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
|
|
|
97
113
|
//#region node_modules/@oscarpalmer/atoms/dist/is.mjs
|
|
98
114
|
/**
|
|
99
115
|
* Is the value `undefined`, `null`, or stringified as a whitespace-only string?
|
|
116
|
+
*
|
|
100
117
|
* @param value Value to check
|
|
101
118
|
* @returns `true` if the value is nullable or matches a whitespace-only string, otherwise `false`
|
|
102
119
|
*/
|
|
@@ -108,6 +125,7 @@ const EXPRESSION_WHITESPACE$1 = /^\s*$/;
|
|
|
108
125
|
//#region node_modules/@oscarpalmer/atoms/dist/string/index.mjs
|
|
109
126
|
/**
|
|
110
127
|
* Parse a JSON string into its proper value _(or `undefined` if it fails)_
|
|
128
|
+
*
|
|
111
129
|
* @param value JSON string to parse
|
|
112
130
|
* @param reviver Reviver function to transform the parsed values
|
|
113
131
|
* @returns Parsed value or `undefined` if parsing fails
|
|
@@ -123,11 +141,18 @@ function parse(value, reviver) {
|
|
|
123
141
|
//#region node_modules/@oscarpalmer/atoms/dist/internal/number.mjs
|
|
124
142
|
/**
|
|
125
143
|
* Clamp a number between a minimum and maximum value
|
|
144
|
+
*
|
|
126
145
|
* @param value Value to clamp
|
|
127
146
|
* @param minimum Minimum value
|
|
128
147
|
* @param maximum Maximum value
|
|
129
148
|
* @param loop If `true`, the value will loop around when smaller than the minimum or larger than the maximum _(defaults to `false`)_
|
|
130
149
|
* @returns Clamped value
|
|
150
|
+
*
|
|
151
|
+
* @example
|
|
152
|
+
* ```typescript
|
|
153
|
+
* clamp(10, 0, 5); // => 5
|
|
154
|
+
* clamp(10, 0, 5, true); // => 0
|
|
155
|
+
* ```
|
|
131
156
|
*/
|
|
132
157
|
function clamp(value, minimum, maximum, loop) {
|
|
133
158
|
if (![
|
|
@@ -151,17 +176,17 @@ const MAXIMUM_DEFAULT = 1048576;
|
|
|
151
176
|
//#endregion
|
|
152
177
|
//#region node_modules/@oscarpalmer/atoms/dist/sized/map.mjs
|
|
153
178
|
/**
|
|
154
|
-
* A
|
|
179
|
+
* A _Map_ with a maximum size
|
|
155
180
|
*
|
|
156
|
-
* Behavior is similar to a _LRU_
|
|
181
|
+
* Behavior is similar to a _LRU_ cache, where the least recently used entries are removed
|
|
157
182
|
*/
|
|
158
183
|
var SizedMap = class extends Map {
|
|
159
184
|
/**
|
|
160
|
-
* The maximum size of the
|
|
185
|
+
* The maximum size of the _Map_
|
|
161
186
|
*/
|
|
162
187
|
#maximumSize;
|
|
163
188
|
/**
|
|
164
|
-
* Is the
|
|
189
|
+
* Is the _Map_ full?
|
|
165
190
|
*/
|
|
166
191
|
get full() {
|
|
167
192
|
return super.size >= this.#maximumSize;
|
|
@@ -205,18 +230,22 @@ var SizedMap = class extends Map {
|
|
|
205
230
|
//#endregion
|
|
206
231
|
//#region node_modules/@oscarpalmer/atoms/dist/function/memoize.mjs
|
|
207
232
|
/**
|
|
208
|
-
* A
|
|
233
|
+
* A _Memoized_ function instance, caching and retrieving results based on the its parameters _(or a custom cache key)_
|
|
209
234
|
*/
|
|
210
235
|
var Memoized = class {
|
|
211
236
|
#state;
|
|
212
237
|
/**
|
|
213
238
|
* Maximum cache size
|
|
239
|
+
*
|
|
240
|
+
* @returns Maximum cache size _(or `Number.NaN` if the instance has been destroyed)_
|
|
214
241
|
*/
|
|
215
242
|
get maximum() {
|
|
216
243
|
return this.#state.cache?.maximum ?? NaN;
|
|
217
244
|
}
|
|
218
245
|
/**
|
|
219
246
|
* Current cache size
|
|
247
|
+
*
|
|
248
|
+
* @returns Current cache size _(or `Number.NaN` if the instance has been destroyed)_
|
|
220
249
|
*/
|
|
221
250
|
get size() {
|
|
222
251
|
return this.#state.cache?.size ?? NaN;
|
|
@@ -243,6 +272,7 @@ var Memoized = class {
|
|
|
243
272
|
}
|
|
244
273
|
/**
|
|
245
274
|
* Delete a result from the cache
|
|
275
|
+
*
|
|
246
276
|
* @param key Key to delete
|
|
247
277
|
* @returns `true` if the key existed and was removed, otherwise `false`
|
|
248
278
|
*/
|
|
@@ -250,7 +280,9 @@ var Memoized = class {
|
|
|
250
280
|
return this.#state.cache?.delete(key) ?? false;
|
|
251
281
|
}
|
|
252
282
|
/**
|
|
253
|
-
* Destroy the instance
|
|
283
|
+
* Destroy the instance
|
|
284
|
+
*
|
|
285
|
+
* _(When a Memoized instance is destroyed, its cache and callback are removed, and calls to `run` will throw an error)_
|
|
254
286
|
*/
|
|
255
287
|
destroy() {
|
|
256
288
|
this.#state.cache?.clear();
|
|
@@ -259,6 +291,7 @@ var Memoized = class {
|
|
|
259
291
|
}
|
|
260
292
|
/**
|
|
261
293
|
* Get a result from the cache
|
|
294
|
+
*
|
|
262
295
|
* @param key Key to get
|
|
263
296
|
* @returns Cached result or `undefined` if it does not exist
|
|
264
297
|
*/
|
|
@@ -267,6 +300,7 @@ var Memoized = class {
|
|
|
267
300
|
}
|
|
268
301
|
/**
|
|
269
302
|
* Does the result exist?
|
|
303
|
+
*
|
|
270
304
|
* @param key Key to check
|
|
271
305
|
* @returns `true` if the result exists, otherwise `false`
|
|
272
306
|
*/
|
|
@@ -275,11 +309,12 @@ var Memoized = class {
|
|
|
275
309
|
}
|
|
276
310
|
/**
|
|
277
311
|
* Run the callback with the provided parameters
|
|
312
|
+
*
|
|
278
313
|
* @param parameters Parameters to pass to the callback
|
|
279
314
|
* @returns Cached or computed _(then cached)_ result
|
|
280
315
|
*/
|
|
281
316
|
run(...parameters) {
|
|
282
|
-
if (this.#state.cache == null || this.#state.getter == null) throw new Error(
|
|
317
|
+
if (this.#state.cache == null || this.#state.getter == null) throw new Error(MEMOIZED_ERROR_DESTROYED);
|
|
283
318
|
return this.#state.getter(...parameters);
|
|
284
319
|
}
|
|
285
320
|
};
|
|
@@ -292,19 +327,24 @@ function getMemoizationOptions(input) {
|
|
|
292
327
|
}
|
|
293
328
|
/**
|
|
294
329
|
* Memoize a function, caching and retrieving results based on the first parameter
|
|
330
|
+
*
|
|
295
331
|
* @param callback Callback to memoize
|
|
296
332
|
* @param options Memoization options
|
|
297
|
-
* @returns
|
|
333
|
+
* @returns _Memoized_ instance
|
|
298
334
|
*/
|
|
299
335
|
function memoize(callback, options) {
|
|
336
|
+
if (typeof callback !== "function") throw new TypeError(MEMOIZED_ERROR_CALLBACK);
|
|
300
337
|
return new Memoized(callback, getMemoizationOptions(options));
|
|
301
338
|
}
|
|
302
339
|
const DEFAULT_CACHE_SIZE = 1024;
|
|
340
|
+
const MEMOIZED_ERROR_CALLBACK = "Memoized requires a callback function";
|
|
341
|
+
const MEMOIZED_ERROR_DESTROYED = "The Memoized instance has been destroyed";
|
|
303
342
|
const SEPARATOR = "_";
|
|
304
343
|
//#endregion
|
|
305
344
|
//#region node_modules/@oscarpalmer/atoms/dist/string/case.mjs
|
|
306
345
|
/**
|
|
307
346
|
* Convert a string to camel case _(thisIsCamelCase)_
|
|
347
|
+
*
|
|
308
348
|
* @param value String to convert
|
|
309
349
|
* @returns Camel-cased string
|
|
310
350
|
*/
|
|
@@ -313,6 +353,7 @@ function camelCase(value) {
|
|
|
313
353
|
}
|
|
314
354
|
/**
|
|
315
355
|
* Capitalize the first letter of a string _(and lowercase the rest)_
|
|
356
|
+
*
|
|
316
357
|
* @param value String to capitalize
|
|
317
358
|
* @returns Capitalized string
|
|
318
359
|
*/
|
|
@@ -323,6 +364,7 @@ function capitalize(value) {
|
|
|
323
364
|
}
|
|
324
365
|
/**
|
|
325
366
|
* Convert a string to kebab case _(this-is-kebab-case)_
|
|
367
|
+
*
|
|
326
368
|
* @param value String to convert
|
|
327
369
|
* @returns Kebab-cased string
|
|
328
370
|
*/
|
|
@@ -382,7 +424,17 @@ let memoizedCapitalize;
|
|
|
382
424
|
//#endregion
|
|
383
425
|
//#region src/internal/is.ts
|
|
384
426
|
/**
|
|
427
|
+
* Is the value an event position?
|
|
428
|
+
*
|
|
429
|
+
* @param value Value to check
|
|
430
|
+
* @returns `true` if it's an event position, otherwise `false`
|
|
431
|
+
*/
|
|
432
|
+
function isEventPosition(value) {
|
|
433
|
+
return typeof value === "object" && value != null && typeof value.x === "number" && typeof value.y === "number";
|
|
434
|
+
}
|
|
435
|
+
/**
|
|
385
436
|
* Is the value an event target?
|
|
437
|
+
*
|
|
386
438
|
* @param value Value to check
|
|
387
439
|
* @returns `true` if it's an event target, otherwise `false`
|
|
388
440
|
*/
|
|
@@ -391,16 +443,27 @@ function isEventTarget(value) {
|
|
|
391
443
|
}
|
|
392
444
|
/**
|
|
393
445
|
* Is the value an HTML or SVG element?
|
|
446
|
+
*
|
|
394
447
|
* @param value Value to check
|
|
395
448
|
* @returns `true` if it's an HTML or SVG element, otherwise `false`
|
|
396
449
|
*/
|
|
397
450
|
function isHTMLOrSVGElement(value) {
|
|
398
451
|
return value instanceof HTMLElement || value instanceof SVGElement;
|
|
399
452
|
}
|
|
453
|
+
/**
|
|
454
|
+
* Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
|
|
455
|
+
*
|
|
456
|
+
* @param value Value to check
|
|
457
|
+
* @returns `true` if it's an input element, otherwise `false`
|
|
458
|
+
*/
|
|
459
|
+
function isInputElement(value) {
|
|
460
|
+
return value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
|
|
461
|
+
}
|
|
400
462
|
//#endregion
|
|
401
463
|
//#region src/is.ts
|
|
402
464
|
/**
|
|
403
465
|
* Is the value a child node?
|
|
466
|
+
*
|
|
404
467
|
* @param value Value to check
|
|
405
468
|
* @returns `true` if it's a child node, otherwise `false`
|
|
406
469
|
*/
|
|
@@ -459,11 +522,16 @@ function updateElementValue(element, key, value, set, remove, isBoolean, json) {
|
|
|
459
522
|
const CSS_VARIABLE_PREFIX$1 = "--";
|
|
460
523
|
//#endregion
|
|
461
524
|
//#region src/internal/property.ts
|
|
525
|
+
function getPropertyValue$1(element, name, value) {
|
|
526
|
+
if (isInputElement(element) && name === "value") return getString(value);
|
|
527
|
+
return value;
|
|
528
|
+
}
|
|
462
529
|
function updateProperty(element, name, value, dispatch) {
|
|
463
530
|
let property = name;
|
|
464
531
|
if (!(property in element)) property = camelCase(name);
|
|
465
|
-
|
|
466
|
-
element[property]
|
|
532
|
+
const next = getPropertyValue$1(element, name, value);
|
|
533
|
+
if (!(property in element) || Object.is(element[property], next)) return;
|
|
534
|
+
element[property] = next;
|
|
467
535
|
const event = dispatch && elementEvents[element.tagName]?.[property];
|
|
468
536
|
if (typeof event === "string") element.dispatchEvent(new Event(event, {
|
|
469
537
|
bubbles: true,
|
|
@@ -605,6 +673,7 @@ function getAttribute(element, name, parseValues) {
|
|
|
605
673
|
}
|
|
606
674
|
/**
|
|
607
675
|
* Get specific attributes from an element
|
|
676
|
+
*
|
|
608
677
|
* @param element Element to get attributes from
|
|
609
678
|
* @param names Attribute names
|
|
610
679
|
* @param parseData Parse data values? _(defaults to `true`)_
|
|
@@ -644,6 +713,7 @@ function isInvalidBooleanAttribute(first, second) {
|
|
|
644
713
|
//#region src/style.ts
|
|
645
714
|
/**
|
|
646
715
|
* Get a style from an element
|
|
716
|
+
*
|
|
647
717
|
* @param element Element to get the style from
|
|
648
718
|
* @param property Style name
|
|
649
719
|
* @param computed Get the computed style? _(defaults to `false`)_
|
|
@@ -654,6 +724,7 @@ function getStyle(element, property, computed) {
|
|
|
654
724
|
}
|
|
655
725
|
/**
|
|
656
726
|
* Get styles from an element
|
|
727
|
+
*
|
|
657
728
|
* @param element Element to get the styles from
|
|
658
729
|
* @param properties Styles to get
|
|
659
730
|
* @param computed Get the computed styles? _(defaults to `false`)_
|
|
@@ -679,6 +750,7 @@ function getTextDirection(node) {
|
|
|
679
750
|
}
|
|
680
751
|
/**
|
|
681
752
|
* Set a style on an element
|
|
753
|
+
*
|
|
682
754
|
* @param element Element to set the style on
|
|
683
755
|
* @param property Style name
|
|
684
756
|
* @param value Style value
|
|
@@ -688,6 +760,7 @@ function setStyle(element, property, value) {
|
|
|
688
760
|
}
|
|
689
761
|
/**
|
|
690
762
|
* Set styles on an element
|
|
763
|
+
*
|
|
691
764
|
* @param element Element to set the styles on
|
|
692
765
|
* @param styles Styles to set
|
|
693
766
|
*/
|
|
@@ -696,6 +769,7 @@ function setStyles(element, styles) {
|
|
|
696
769
|
}
|
|
697
770
|
/**
|
|
698
771
|
* Toggle styles for an element
|
|
772
|
+
*
|
|
699
773
|
* @param element Element to style
|
|
700
774
|
* @param styles Styles to be set or removed
|
|
701
775
|
* @returns Style toggler
|
|
@@ -746,6 +820,7 @@ const VARIABLE_PREFIX = "--";
|
|
|
746
820
|
//#region src/property/get.property.ts
|
|
747
821
|
/**
|
|
748
822
|
* Get the values of one or more properties on an element
|
|
823
|
+
*
|
|
749
824
|
* @param target Target element
|
|
750
825
|
* @param properties Properties to get
|
|
751
826
|
* @returns Property values
|
|
@@ -762,6 +837,7 @@ function getProperties(target, properties) {
|
|
|
762
837
|
}
|
|
763
838
|
/**
|
|
764
839
|
* Get the value of a property on an element
|
|
840
|
+
*
|
|
765
841
|
* @param target Target element
|
|
766
842
|
* @param property Property to get
|
|
767
843
|
* @returns Property value
|
|
@@ -780,6 +856,7 @@ function getPropertyValue(element, property) {
|
|
|
780
856
|
* Set the values of one or more properties on an element
|
|
781
857
|
*
|
|
782
858
|
* Also updates attributes for boolean/dispatchable properties, and if `dispatch` is `true`, will dispatch events for dispatchable properties
|
|
859
|
+
*
|
|
783
860
|
* @param target Target element
|
|
784
861
|
* @param properties Properties to set
|
|
785
862
|
* @param dispatch Dispatch events for properties? _(defaults to `true`)_
|
|
@@ -965,6 +1042,7 @@ function dispatch(target, type, options) {
|
|
|
965
1042
|
}
|
|
966
1043
|
/**
|
|
967
1044
|
* Get the X- and Y-coordinates from a pointer event
|
|
1045
|
+
*
|
|
968
1046
|
* @param event Pointer event
|
|
969
1047
|
* @returns X- and Y-coordinates
|
|
970
1048
|
*/
|
|
@@ -985,6 +1063,7 @@ function getPosition(event) {
|
|
|
985
1063
|
}
|
|
986
1064
|
/**
|
|
987
1065
|
* Remove an event listener
|
|
1066
|
+
*
|
|
988
1067
|
* @param target Event target
|
|
989
1068
|
* @param type Type of event
|
|
990
1069
|
* @param listener Event listener
|
|
@@ -1048,6 +1127,7 @@ function findRelatives(origin, selector, context) {
|
|
|
1048
1127
|
}
|
|
1049
1128
|
/**
|
|
1050
1129
|
* Get the distance between two elements _(i.e., the amount of nodes of between them)_
|
|
1130
|
+
*
|
|
1051
1131
|
* @param origin Origin element
|
|
1052
1132
|
* @param target Target element
|
|
1053
1133
|
* @returns Distance between elements, or `-1` if distance cannot be calculated
|
|
@@ -1130,10 +1210,42 @@ function findElements(selector, context) {
|
|
|
1130
1210
|
return findElementOrElements(selector, context, false);
|
|
1131
1211
|
}
|
|
1132
1212
|
/**
|
|
1213
|
+
* Get elements from an event position
|
|
1214
|
+
*
|
|
1215
|
+
* @param position Event position
|
|
1216
|
+
* @returns Elements at the event position
|
|
1217
|
+
*/
|
|
1218
|
+
function getElementFromPosition(position) {
|
|
1219
|
+
if (!isEventPosition(position) || typeof document.elementFromPoint !== "function") return [];
|
|
1220
|
+
const { x, y } = position;
|
|
1221
|
+
const elements = [];
|
|
1222
|
+
const events = [];
|
|
1223
|
+
let current;
|
|
1224
|
+
while (true) {
|
|
1225
|
+
current = document.elementFromPoint(x, y);
|
|
1226
|
+
if (current == null || elements.indexOf(current) !== -1) break;
|
|
1227
|
+
if (!(current instanceof HTMLElement)) continue;
|
|
1228
|
+
elements.push(current);
|
|
1229
|
+
events.push({
|
|
1230
|
+
value: current.style.getPropertyValue(STYLE_POINTER_EVENTS),
|
|
1231
|
+
priority: current.style.getPropertyPriority(STYLE_POINTER_EVENTS)
|
|
1232
|
+
});
|
|
1233
|
+
current.style.setProperty(STYLE_POINTER_EVENTS, STYLE_NONE$1, STYLE_IMPORTANT);
|
|
1234
|
+
}
|
|
1235
|
+
const { length } = elements;
|
|
1236
|
+
for (let index = 0; index < length; index += 1) {
|
|
1237
|
+
const element = elements[index];
|
|
1238
|
+
const event = events[index];
|
|
1239
|
+
if (element instanceof HTMLElement) element.style.setProperty(STYLE_POINTER_EVENTS, event.value ?? "", event.priority);
|
|
1240
|
+
}
|
|
1241
|
+
return elements;
|
|
1242
|
+
}
|
|
1243
|
+
/**
|
|
1133
1244
|
* Get the most specific element under the pointer
|
|
1134
1245
|
*
|
|
1135
1246
|
* - Ignores elements with `pointer-events: none` and `visibility: hidden`
|
|
1136
1247
|
* - _(If `skipIgnore` is `true`, no elements are ignored)_
|
|
1248
|
+
*
|
|
1137
1249
|
* @param skipIgnore Skip ignored elements?
|
|
1138
1250
|
* @returns Found element or `null`
|
|
1139
1251
|
*/
|
|
@@ -1155,13 +1267,16 @@ function isContext(value) {
|
|
|
1155
1267
|
const QUERY_SELECTOR_ALL = "querySelectorAll";
|
|
1156
1268
|
const QUERY_SELECTOR_SINGLE = "querySelector";
|
|
1157
1269
|
const STYLE_HIDDEN$1 = "hidden";
|
|
1270
|
+
const STYLE_IMPORTANT = "important";
|
|
1158
1271
|
const STYLE_NONE$1 = "none";
|
|
1272
|
+
const STYLE_POINTER_EVENTS = "pointer-events";
|
|
1159
1273
|
const SUFFIX_HOVER = ":hover";
|
|
1160
1274
|
const TAG_HEAD = "HEAD";
|
|
1161
1275
|
//#endregion
|
|
1162
1276
|
//#region src/focusable.ts
|
|
1163
1277
|
/**
|
|
1164
1278
|
* Get a list of focusable elements within a parent element
|
|
1279
|
+
*
|
|
1165
1280
|
* @param parent Parent element
|
|
1166
1281
|
* @returns Focusable elements
|
|
1167
1282
|
*/
|
|
@@ -1176,6 +1291,7 @@ function getItem(element, tabbable) {
|
|
|
1176
1291
|
}
|
|
1177
1292
|
/**
|
|
1178
1293
|
* Get a list of tabbable elements within a parent element
|
|
1294
|
+
*
|
|
1179
1295
|
* @param parent Parent element
|
|
1180
1296
|
* @returns Tabbable elements
|
|
1181
1297
|
*/
|
|
@@ -1235,6 +1351,7 @@ function isEditable(element) {
|
|
|
1235
1351
|
}
|
|
1236
1352
|
/**
|
|
1237
1353
|
* Is the element focusable?
|
|
1354
|
+
*
|
|
1238
1355
|
* @param element Element to check
|
|
1239
1356
|
* @returns `true` if focusable, otherwise `false`
|
|
1240
1357
|
*/
|
|
@@ -1270,6 +1387,7 @@ function isSummarised(item) {
|
|
|
1270
1387
|
}
|
|
1271
1388
|
/**
|
|
1272
1389
|
* Is the element tabbable?
|
|
1390
|
+
*
|
|
1273
1391
|
* @param element Element to check
|
|
1274
1392
|
* @returns `true` if tabbable, otherwise `false`
|
|
1275
1393
|
*/
|
|
@@ -1477,6 +1595,7 @@ html.clear = () => {
|
|
|
1477
1595
|
};
|
|
1478
1596
|
/**
|
|
1479
1597
|
* Remove cached template element for an HTML string or id
|
|
1598
|
+
*
|
|
1480
1599
|
* @param template HTML string or id for a template element
|
|
1481
1600
|
*/
|
|
1482
1601
|
html.remove = (template) => {
|
|
@@ -1518,4 +1637,4 @@ const templates = new SizedMap(128);
|
|
|
1518
1637
|
let parser;
|
|
1519
1638
|
window.templates = templates;
|
|
1520
1639
|
//#endregion
|
|
1521
|
-
export { findElement as $, findElement, findElements as $$, findElements, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAttribute, getAttributes, getData, getDistance, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAttribute, setAttributes, setData, setProperties, setProperty, setStyle, setStyles, supportsTouch, toggleStyles };
|
|
1640
|
+
export { findElement as $, findElement, findElements as $$, findElements, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAttribute, getAttributes, getData, getDistance, getElementFromPosition, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventPosition, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInputElement, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAttribute, setAttributes, setData, setProperties, setProperty, setStyle, setStyles, supportsTouch, toggleStyles };
|
package/dist/internal/is.d.mts
CHANGED
|
@@ -1,15 +1,33 @@
|
|
|
1
|
+
import { EventPosition } from "@oscarpalmer/atoms/models";
|
|
2
|
+
|
|
1
3
|
//#region src/internal/is.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Is the value an event position?
|
|
6
|
+
*
|
|
7
|
+
* @param value Value to check
|
|
8
|
+
* @returns `true` if it's an event position, otherwise `false`
|
|
9
|
+
*/
|
|
10
|
+
declare function isEventPosition(value: unknown): value is EventPosition;
|
|
2
11
|
/**
|
|
3
12
|
* Is the value an event target?
|
|
13
|
+
*
|
|
4
14
|
* @param value Value to check
|
|
5
15
|
* @returns `true` if it's an event target, otherwise `false`
|
|
6
16
|
*/
|
|
7
17
|
declare function isEventTarget(value: unknown): value is EventTarget;
|
|
8
18
|
/**
|
|
9
19
|
* Is the value an HTML or SVG element?
|
|
20
|
+
*
|
|
10
21
|
* @param value Value to check
|
|
11
22
|
* @returns `true` if it's an HTML or SVG element, otherwise `false`
|
|
12
23
|
*/
|
|
13
24
|
declare function isHTMLOrSVGElement(value: unknown): value is HTMLElement | SVGElement;
|
|
25
|
+
/**
|
|
26
|
+
* Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
|
|
27
|
+
*
|
|
28
|
+
* @param value Value to check
|
|
29
|
+
* @returns `true` if it's an input element, otherwise `false`
|
|
30
|
+
*/
|
|
31
|
+
declare function isInputElement(value: unknown): value is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
|
14
32
|
//#endregion
|
|
15
|
-
export { isEventTarget, isHTMLOrSVGElement };
|
|
33
|
+
export { isEventPosition, isEventTarget, isHTMLOrSVGElement, isInputElement };
|
package/dist/internal/is.mjs
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
//#region src/internal/is.ts
|
|
2
2
|
/**
|
|
3
|
+
* Is the value an event position?
|
|
4
|
+
*
|
|
5
|
+
* @param value Value to check
|
|
6
|
+
* @returns `true` if it's an event position, otherwise `false`
|
|
7
|
+
*/
|
|
8
|
+
function isEventPosition(value) {
|
|
9
|
+
return typeof value === "object" && value != null && typeof value.x === "number" && typeof value.y === "number";
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
3
12
|
* Is the value an event target?
|
|
13
|
+
*
|
|
4
14
|
* @param value Value to check
|
|
5
15
|
* @returns `true` if it's an event target, otherwise `false`
|
|
6
16
|
*/
|
|
@@ -9,11 +19,21 @@ function isEventTarget(value) {
|
|
|
9
19
|
}
|
|
10
20
|
/**
|
|
11
21
|
* Is the value an HTML or SVG element?
|
|
22
|
+
*
|
|
12
23
|
* @param value Value to check
|
|
13
24
|
* @returns `true` if it's an HTML or SVG element, otherwise `false`
|
|
14
25
|
*/
|
|
15
26
|
function isHTMLOrSVGElement(value) {
|
|
16
27
|
return value instanceof HTMLElement || value instanceof SVGElement;
|
|
17
28
|
}
|
|
29
|
+
/**
|
|
30
|
+
* Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
|
|
31
|
+
*
|
|
32
|
+
* @param value Value to check
|
|
33
|
+
* @returns `true` if it's an input element, otherwise `false`
|
|
34
|
+
*/
|
|
35
|
+
function isInputElement(value) {
|
|
36
|
+
return value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
|
|
37
|
+
}
|
|
18
38
|
//#endregion
|
|
19
|
-
export { isEventTarget, isHTMLOrSVGElement };
|
|
39
|
+
export { isEventPosition, isEventTarget, isHTMLOrSVGElement, isInputElement };
|
|
@@ -1,10 +1,17 @@
|
|
|
1
|
+
import { isInputElement } from "./is.mjs";
|
|
2
|
+
import { getString } from "@oscarpalmer/atoms/string";
|
|
1
3
|
import { camelCase } from "@oscarpalmer/atoms/string/case";
|
|
2
4
|
//#region src/internal/property.ts
|
|
5
|
+
function getPropertyValue(element, name, value) {
|
|
6
|
+
if (isInputElement(element) && name === "value") return getString(value);
|
|
7
|
+
return value;
|
|
8
|
+
}
|
|
3
9
|
function updateProperty(element, name, value, dispatch) {
|
|
4
10
|
let property = name;
|
|
5
11
|
if (!(property in element)) property = camelCase(name);
|
|
6
|
-
|
|
7
|
-
element[property]
|
|
12
|
+
const next = getPropertyValue(element, name, value);
|
|
13
|
+
if (!(property in element) || Object.is(element[property], next)) return;
|
|
14
|
+
element[property] = next;
|
|
8
15
|
const event = dispatch && elementEvents[element.tagName]?.[property];
|
|
9
16
|
if (typeof event === "string") element.dispatchEvent(new Event(event, {
|
|
10
17
|
bubbles: true,
|
package/dist/is.d.mts
CHANGED
|
@@ -1,24 +1,27 @@
|
|
|
1
|
-
import { isEventTarget, isHTMLOrSVGElement } from "./internal/is.mjs";
|
|
1
|
+
import { isEventPosition, isEventTarget, isHTMLOrSVGElement, isInputElement } from "./internal/is.mjs";
|
|
2
2
|
|
|
3
3
|
//#region src/is.d.ts
|
|
4
4
|
/**
|
|
5
5
|
* Is the value a child node?
|
|
6
|
+
*
|
|
6
7
|
* @param value Value to check
|
|
7
8
|
* @returns `true` if it's a child node, otherwise `false`
|
|
8
9
|
*/
|
|
9
10
|
declare function isChildNode(value: unknown): value is ChildNode;
|
|
10
11
|
/**
|
|
11
12
|
* Is the node inside a document?
|
|
13
|
+
*
|
|
12
14
|
* @param node Node to check
|
|
13
15
|
* @returns `true` if it's inside a document, otherwise `false`
|
|
14
16
|
*/
|
|
15
17
|
declare function isInDocument(node: Node): boolean;
|
|
16
18
|
/**
|
|
17
19
|
* Is the node inside a specific document?
|
|
20
|
+
*
|
|
18
21
|
* @param node Node to check
|
|
19
22
|
* @param document Document to check within
|
|
20
23
|
* @returns `true` if it's inside the document, otherwise `false`
|
|
21
24
|
*/
|
|
22
25
|
declare function isInDocument(node: Node, document: Document): boolean;
|
|
23
26
|
//#endregion
|
|
24
|
-
export { isChildNode, isEventTarget, isHTMLOrSVGElement, isInDocument };
|
|
27
|
+
export { isChildNode, isEventPosition, isEventTarget, isHTMLOrSVGElement, isInDocument, isInputElement };
|
package/dist/is.mjs
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { isEventTarget, isHTMLOrSVGElement } from "./internal/is.mjs";
|
|
1
|
+
import { isEventPosition, isEventTarget, isHTMLOrSVGElement, isInputElement } from "./internal/is.mjs";
|
|
2
2
|
//#region src/is.ts
|
|
3
3
|
/**
|
|
4
4
|
* Is the value a child node?
|
|
5
|
+
*
|
|
5
6
|
* @param value Value to check
|
|
6
7
|
* @returns `true` if it's a child node, otherwise `false`
|
|
7
8
|
*/
|
|
@@ -21,4 +22,4 @@ const CHILD_NODE_TYPES = new Set([
|
|
|
21
22
|
Node.DOCUMENT_TYPE_NODE
|
|
22
23
|
]);
|
|
23
24
|
//#endregion
|
|
24
|
-
export { isChildNode, isEventTarget, isHTMLOrSVGElement, isInDocument };
|
|
25
|
+
export { isChildNode, isEventPosition, isEventTarget, isHTMLOrSVGElement, isInDocument, isInputElement };
|
package/dist/models.d.mts
CHANGED
|
@@ -10,13 +10,6 @@ type Attribute = {
|
|
|
10
10
|
* Event listener for custom events
|
|
11
11
|
*/
|
|
12
12
|
type CustomEventListener = (event: CustomEvent) => void;
|
|
13
|
-
/**
|
|
14
|
-
* The position of an event
|
|
15
|
-
*/
|
|
16
|
-
type EventPosition = {
|
|
17
|
-
x: number;
|
|
18
|
-
y: number;
|
|
19
|
-
};
|
|
20
13
|
/**
|
|
21
14
|
* Event listener that can be removed
|
|
22
15
|
*/
|
|
@@ -30,4 +23,4 @@ type Selector = string | Node | Node[] | NodeList;
|
|
|
30
23
|
*/
|
|
31
24
|
type TextDirection = 'ltr' | 'rtl';
|
|
32
25
|
//#endregion
|
|
33
|
-
export { Attribute, CustomEventListener,
|
|
26
|
+
export { Attribute, CustomEventListener, RemovableEventListener, Selector, TextDirection };
|
|
@@ -4,6 +4,7 @@ import { Primitive } from "@oscarpalmer/atoms/models";
|
|
|
4
4
|
type GetProperties<Target extends Element> = { [Property in keyof Target as Target[Property] extends Primitive ? Property : never]?: Target[Property] };
|
|
5
5
|
/**
|
|
6
6
|
* Get the values of one or more properties on an element
|
|
7
|
+
*
|
|
7
8
|
* @param target Target element
|
|
8
9
|
* @param properties Properties to get
|
|
9
10
|
* @returns Property values
|
|
@@ -11,6 +12,7 @@ type GetProperties<Target extends Element> = { [Property in keyof Target as Targ
|
|
|
11
12
|
declare function getProperties<Target extends Element, Property extends keyof GetProperties<Target>>(target: Target, properties: Property[]): Pick<GetProperties<Target>, Property>;
|
|
12
13
|
/**
|
|
13
14
|
* Get the value of a property on an element
|
|
15
|
+
*
|
|
14
16
|
* @param target Target element
|
|
15
17
|
* @param property Property to get
|
|
16
18
|
* @returns Property value
|
|
@@ -3,6 +3,7 @@ import { camelCase } from "@oscarpalmer/atoms/string/case";
|
|
|
3
3
|
//#region src/property/get.property.ts
|
|
4
4
|
/**
|
|
5
5
|
* Get the values of one or more properties on an element
|
|
6
|
+
*
|
|
6
7
|
* @param target Target element
|
|
7
8
|
* @param properties Properties to get
|
|
8
9
|
* @returns Property values
|
|
@@ -19,6 +20,7 @@ function getProperties(target, properties) {
|
|
|
19
20
|
}
|
|
20
21
|
/**
|
|
21
22
|
* Get the value of a property on an element
|
|
23
|
+
*
|
|
22
24
|
* @param target Target element
|
|
23
25
|
* @param property Property to get
|
|
24
26
|
* @returns Property value
|