@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.
Files changed (50) hide show
  1. package/dist/attribute/get.attribute.d.mts +2 -0
  2. package/dist/attribute/get.attribute.mjs +1 -0
  3. package/dist/attribute/index.d.mts +6 -0
  4. package/dist/attribute/set.attribute.d.mts +5 -0
  5. package/dist/create.d.mts +2 -0
  6. package/dist/data.d.mts +4 -0
  7. package/dist/event/index.d.mts +9 -1
  8. package/dist/event/index.mjs +2 -0
  9. package/dist/find/index.d.mts +14 -1
  10. package/dist/find/index.mjs +36 -1
  11. package/dist/find/relative.d.mts +5 -0
  12. package/dist/find/relative.mjs +1 -0
  13. package/dist/focusable.d.mts +4 -0
  14. package/dist/focusable.mjs +4 -0
  15. package/dist/html/index.d.mts +3 -0
  16. package/dist/html/index.mjs +1 -0
  17. package/dist/index.d.mts +96 -8
  18. package/dist/index.mjs +131 -12
  19. package/dist/internal/is.d.mts +19 -1
  20. package/dist/internal/is.mjs +21 -1
  21. package/dist/internal/property.mjs +9 -2
  22. package/dist/is.d.mts +5 -2
  23. package/dist/is.mjs +3 -2
  24. package/dist/models.d.mts +1 -8
  25. package/dist/property/get.property.d.mts +2 -0
  26. package/dist/property/get.property.mjs +2 -0
  27. package/dist/property/set.property.d.mts +3 -0
  28. package/dist/property/set.property.mjs +1 -0
  29. package/dist/style.d.mts +7 -0
  30. package/dist/style.mjs +5 -0
  31. package/dist/touch.d.mts +4 -0
  32. package/package.json +6 -6
  33. package/src/attribute/get.attribute.ts +2 -0
  34. package/src/attribute/index.ts +6 -0
  35. package/src/attribute/set.attribute.ts +5 -0
  36. package/src/create.ts +2 -0
  37. package/src/data.ts +4 -0
  38. package/src/event/index.ts +10 -1
  39. package/src/find/index.ts +64 -1
  40. package/src/find/relative.ts +5 -0
  41. package/src/focusable.ts +4 -0
  42. package/src/html/index.ts +4 -0
  43. package/src/internal/is.ts +35 -0
  44. package/src/internal/property.ts +14 -2
  45. package/src/is.ts +4 -1
  46. package/src/models.ts +0 -8
  47. package/src/property/get.property.ts +2 -0
  48. package/src/property/set.property.ts +3 -0
  49. package/src/style.ts +7 -0
  50. 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.trim().length > 0) values.push(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 Map with a maximum size
179
+ * A _Map_ with a maximum size
155
180
  *
156
- * Behavior is similar to a _LRU_-cache, where the least recently used entries are removed
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 Map
185
+ * The maximum size of the _Map_
161
186
  */
162
187
  #maximumSize;
163
188
  /**
164
- * Is the Map full?
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 memoized function, caching and retrieving results based on the its parameters _(or a custom cache key)_
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 _(clearing its cache and removing its callback)_
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("The Memoized instance has been destroyed");
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 Memoized instance
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
- if (!(property in element) || Object.is(element[property], value)) return;
466
- element[property] = value;
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 };
@@ -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 };
@@ -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
- if (!(property in element) || Object.is(element[property], value)) return;
7
- element[property] = value;
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, EventPosition, RemovableEventListener, Selector, TextDirection };
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