@oscarpalmer/toretto 0.46.0 → 0.47.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/aria.d.mts +68 -0
- package/dist/aria.mjs +49 -0
- package/dist/attribute/get.attribute.d.mts +1 -0
- package/dist/attribute/get.attribute.mjs +2 -3
- package/dist/attribute/index.d.mts +1 -1
- package/dist/attribute/set.attribute.mjs +1 -1
- package/dist/create.d.mts +2 -2
- package/dist/create.mjs +1 -1
- package/dist/data.mjs +1 -2
- package/dist/event/delegation.mjs +3 -4
- package/dist/event/index.mjs +1 -2
- package/dist/html/index.d.mts +5 -4
- package/dist/html/index.mjs +3 -3
- package/dist/index.d.mts +99 -18
- package/dist/index.mjs +184 -139
- package/dist/internal/attribute.mjs +2 -2
- package/dist/internal/element-value.mjs +2 -4
- package/dist/internal/is.d.mts +2 -2
- package/dist/internal/is.mjs +2 -2
- package/dist/is.mjs +1 -1
- package/dist/models.d.mts +21 -1
- package/dist/property/get.property.mjs +2 -3
- package/dist/property/set.property.mjs +2 -4
- package/dist/style.mjs +3 -4
- package/package.json +8 -4
- package/src/aria.ts +166 -0
- package/src/attribute/get.attribute.ts +3 -3
- package/src/create.ts +3 -3
- package/src/data.ts +7 -6
- package/src/event/delegation.ts +5 -6
- package/src/event/index.ts +1 -7
- package/src/html/index.ts +7 -9
- package/src/index.ts +1 -0
- package/src/internal/attribute.ts +4 -2
- package/src/internal/element-value.ts +2 -3
- package/src/internal/is.ts +2 -2
- package/src/models.ts +122 -0
- package/src/property/get.property.ts +4 -5
- package/src/property/set.property.ts +2 -3
- package/src/style.ts +5 -6
package/dist/index.mjs
CHANGED
|
@@ -442,10 +442,10 @@ function isEventTarget(value) {
|
|
|
442
442
|
return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
|
|
443
443
|
}
|
|
444
444
|
/**
|
|
445
|
-
* Is the value an
|
|
445
|
+
* Is the value an _HTML_ or _SVG_ element?
|
|
446
446
|
*
|
|
447
447
|
* @param value Value to check
|
|
448
|
-
* @returns `true` if it's an
|
|
448
|
+
* @returns `true` if it's an _HTML_ or _SVG_ element, otherwise `false`
|
|
449
449
|
*/
|
|
450
450
|
function isHTMLOrSVGElement(value) {
|
|
451
451
|
return value instanceof HTMLElement || value instanceof SVGElement;
|
|
@@ -460,67 +460,6 @@ function isInputElement(value) {
|
|
|
460
460
|
return value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
|
|
461
461
|
}
|
|
462
462
|
//#endregion
|
|
463
|
-
//#region src/is.ts
|
|
464
|
-
/**
|
|
465
|
-
* Is the value a child node?
|
|
466
|
-
*
|
|
467
|
-
* @param value Value to check
|
|
468
|
-
* @returns `true` if it's a child node, otherwise `false`
|
|
469
|
-
*/
|
|
470
|
-
function isChildNode(value) {
|
|
471
|
-
return value instanceof Node && CHILD_NODE_TYPES.has(value.nodeType);
|
|
472
|
-
}
|
|
473
|
-
function isInDocument(node, doc) {
|
|
474
|
-
if (!(node instanceof Node)) return false;
|
|
475
|
-
if (!(doc instanceof Document)) return node.ownerDocument?.contains(node) ?? true;
|
|
476
|
-
return node.ownerDocument == null ? node === doc : node.ownerDocument === doc && doc.contains(node);
|
|
477
|
-
}
|
|
478
|
-
const CHILD_NODE_TYPES = new Set([
|
|
479
|
-
Node.ELEMENT_NODE,
|
|
480
|
-
Node.TEXT_NODE,
|
|
481
|
-
Node.PROCESSING_INSTRUCTION_NODE,
|
|
482
|
-
Node.COMMENT_NODE,
|
|
483
|
-
Node.DOCUMENT_TYPE_NODE
|
|
484
|
-
]);
|
|
485
|
-
//#endregion
|
|
486
|
-
//#region src/internal/element-value.ts
|
|
487
|
-
function ignoreSetAttribute(element, name) {
|
|
488
|
-
if (element instanceof HTMLTextAreaElement && name === "value") return true;
|
|
489
|
-
return false;
|
|
490
|
-
}
|
|
491
|
-
function normalizeKey(key, style) {
|
|
492
|
-
return style && key.startsWith(CSS_VARIABLE_PREFIX$1) ? key : kebabCase(key);
|
|
493
|
-
}
|
|
494
|
-
function setElementValue(element, first, second, third, callback, style) {
|
|
495
|
-
if (!isHTMLOrSVGElement(element)) return;
|
|
496
|
-
if (typeof first === "string") setElementValues(element, first, second, third, callback, style);
|
|
497
|
-
else if (isAttribute(first)) setElementValues(element, first.name, first.value, third, callback, style);
|
|
498
|
-
}
|
|
499
|
-
function setElementValues(element, first, second, third, callback, style) {
|
|
500
|
-
if (!isHTMLOrSVGElement(element)) return;
|
|
501
|
-
const dispatch = third !== false;
|
|
502
|
-
if (typeof first === "string") {
|
|
503
|
-
callback(element, normalizeKey(first, style), second, dispatch);
|
|
504
|
-
return;
|
|
505
|
-
}
|
|
506
|
-
const isArray = Array.isArray(first);
|
|
507
|
-
if (!isArray && !(typeof first === "object" && first !== null)) return;
|
|
508
|
-
const entries = isArray ? first : Object.entries(first).map(([name, value]) => ({
|
|
509
|
-
name,
|
|
510
|
-
value
|
|
511
|
-
}));
|
|
512
|
-
const { length } = entries;
|
|
513
|
-
for (let index = 0; index < length; index += 1) {
|
|
514
|
-
const entry = entries[index];
|
|
515
|
-
if (typeof entry === "object" && typeof entry?.name === "string") callback(element, normalizeKey(entry.name, style), entry.value, dispatch);
|
|
516
|
-
}
|
|
517
|
-
}
|
|
518
|
-
function updateElementValue(element, key, value, set, remove, isBoolean, json) {
|
|
519
|
-
if (isBoolean ? value == null : isNullableOrWhitespace(value)) remove.call(element, key);
|
|
520
|
-
else if (!ignoreSetAttribute(element, key)) set.call(element, key, json ? JSON.stringify(value) : getString(value));
|
|
521
|
-
}
|
|
522
|
-
const CSS_VARIABLE_PREFIX$1 = "--";
|
|
523
|
-
//#endregion
|
|
524
463
|
//#region src/internal/property.ts
|
|
525
464
|
function getPropertyValue$1(element, name, value) {
|
|
526
465
|
if (isInputElement(element) && name === "value") return getString(value);
|
|
@@ -641,7 +580,7 @@ const booleanAttributes = Object.freeze([
|
|
|
641
580
|
"selected"
|
|
642
581
|
]);
|
|
643
582
|
const booleanAttributesSet = new Set(booleanAttributes);
|
|
644
|
-
const dispatchedAttributes = new Set([
|
|
583
|
+
const dispatchedAttributes = /* @__PURE__ */ new Set([
|
|
645
584
|
"checked",
|
|
646
585
|
"open",
|
|
647
586
|
"value"
|
|
@@ -649,6 +588,91 @@ const dispatchedAttributes = new Set([
|
|
|
649
588
|
const formElement = document.createElement("form");
|
|
650
589
|
let textArea;
|
|
651
590
|
//#endregion
|
|
591
|
+
//#region src/internal/element-value.ts
|
|
592
|
+
function ignoreSetAttribute(element, name) {
|
|
593
|
+
if (element instanceof HTMLTextAreaElement && name === "value") return true;
|
|
594
|
+
return false;
|
|
595
|
+
}
|
|
596
|
+
function normalizeKey(key, style) {
|
|
597
|
+
return style && key.startsWith(CSS_VARIABLE_PREFIX$1) ? key : kebabCase(key);
|
|
598
|
+
}
|
|
599
|
+
function setElementValue(element, first, second, third, callback, style) {
|
|
600
|
+
if (!(element instanceof Element)) return;
|
|
601
|
+
if (typeof first === "string") setElementValues(element, first, second, third, callback, style);
|
|
602
|
+
else if (isAttribute(first)) setElementValues(element, first.name, first.value, third, callback, style);
|
|
603
|
+
}
|
|
604
|
+
function setElementValues(element, first, second, third, callback, style) {
|
|
605
|
+
if (!(element instanceof Element)) return;
|
|
606
|
+
const dispatch = third !== false;
|
|
607
|
+
if (typeof first === "string") {
|
|
608
|
+
callback(element, normalizeKey(first, style), second, dispatch);
|
|
609
|
+
return;
|
|
610
|
+
}
|
|
611
|
+
const isArray = Array.isArray(first);
|
|
612
|
+
if (!isArray && !(typeof first === "object" && first !== null)) return;
|
|
613
|
+
const entries = isArray ? first : Object.entries(first).map(([name, value]) => ({
|
|
614
|
+
name,
|
|
615
|
+
value
|
|
616
|
+
}));
|
|
617
|
+
const { length } = entries;
|
|
618
|
+
for (let index = 0; index < length; index += 1) {
|
|
619
|
+
const entry = entries[index];
|
|
620
|
+
if (typeof entry === "object" && typeof entry?.name === "string") callback(element, normalizeKey(entry.name, style), entry.value, dispatch);
|
|
621
|
+
}
|
|
622
|
+
}
|
|
623
|
+
function updateElementValue(element, key, value, set, remove, isBoolean, json) {
|
|
624
|
+
if (isBoolean ? value == null : isNullableOrWhitespace(value)) remove.call(element, key);
|
|
625
|
+
else if (!ignoreSetAttribute(element, key)) set.call(element, key, json ? JSON.stringify(value) : getString(value));
|
|
626
|
+
}
|
|
627
|
+
const CSS_VARIABLE_PREFIX$1 = "--";
|
|
628
|
+
//#endregion
|
|
629
|
+
//#region src/aria.ts
|
|
630
|
+
function getAria(element, value) {
|
|
631
|
+
if (!(element instanceof Element)) return Array.isArray(value) ? {} : void 0;
|
|
632
|
+
if (!Array.isArray(value)) return typeof value === "string" ? getAriaValue(element, value) : void 0;
|
|
633
|
+
const arias = {};
|
|
634
|
+
const { length } = value;
|
|
635
|
+
for (let index = 0; index < length; index += 1) {
|
|
636
|
+
const attribute = value[index];
|
|
637
|
+
if (typeof attribute === "string") arias[attribute.replace(ATTRIBUTE_ARIA_PREFIX, "")] = getAriaValue(element, attribute);
|
|
638
|
+
}
|
|
639
|
+
return arias;
|
|
640
|
+
}
|
|
641
|
+
function getAriaValue(element, attribute) {
|
|
642
|
+
return element.getAttribute(getName$1(attribute)) ?? void 0;
|
|
643
|
+
}
|
|
644
|
+
function getName$1(value) {
|
|
645
|
+
return EXPRESSION_ARIA_PREFIX.test(value) ? value : `${ATTRIBUTE_ARIA_PREFIX}${value}`;
|
|
646
|
+
}
|
|
647
|
+
/**
|
|
648
|
+
* Get the role of an element
|
|
649
|
+
*
|
|
650
|
+
* @param element Element to get role from
|
|
651
|
+
* @returns Element role _(or `undefined`)_
|
|
652
|
+
*/
|
|
653
|
+
function getRole(element) {
|
|
654
|
+
if (element instanceof Element) return element.getAttribute("role") ?? void 0;
|
|
655
|
+
}
|
|
656
|
+
function setAria(element, first, second) {
|
|
657
|
+
setElementValues(element, first, second, null, updateAriaAttribute);
|
|
658
|
+
}
|
|
659
|
+
/**
|
|
660
|
+
* Set the role of an element
|
|
661
|
+
*
|
|
662
|
+
* @param element Element for role
|
|
663
|
+
* @param role Role to set _(or `undefined` to remove it)_
|
|
664
|
+
*/
|
|
665
|
+
function setRole(element, role) {
|
|
666
|
+
if (!(element instanceof Element)) return;
|
|
667
|
+
if (typeof role === "string") element.setAttribute("role", role);
|
|
668
|
+
else element.removeAttribute("role");
|
|
669
|
+
}
|
|
670
|
+
function updateAriaAttribute(element, key, value) {
|
|
671
|
+
updateElementValue(element, getName$1(key), value, element.setAttribute, element.removeAttribute, false, false);
|
|
672
|
+
}
|
|
673
|
+
const ATTRIBUTE_ARIA_PREFIX = "aria-";
|
|
674
|
+
const EXPRESSION_ARIA_PREFIX = /^aria-/i;
|
|
675
|
+
//#endregion
|
|
652
676
|
//#region src/internal/get-value.ts
|
|
653
677
|
function getBoolean(value, defaultValue) {
|
|
654
678
|
return typeof value === "boolean" ? value : defaultValue ?? false;
|
|
@@ -669,7 +693,7 @@ const CSS_VARIABLE_PREFIX = "--";
|
|
|
669
693
|
//#endregion
|
|
670
694
|
//#region src/attribute/get.attribute.ts
|
|
671
695
|
function getAttribute(element, name, parseValues) {
|
|
672
|
-
if (
|
|
696
|
+
if (element instanceof Element && typeof name === "string") return getAttributeValue(element, kebabCase(name), parseValues !== false);
|
|
673
697
|
}
|
|
674
698
|
/**
|
|
675
699
|
* Get specific attributes from an element
|
|
@@ -681,7 +705,7 @@ function getAttribute(element, name, parseValues) {
|
|
|
681
705
|
*/
|
|
682
706
|
function getAttributes(element, names, parseData) {
|
|
683
707
|
const attributes = {};
|
|
684
|
-
if (!(
|
|
708
|
+
if (!(element instanceof Element && Array.isArray(names))) return attributes;
|
|
685
709
|
const shouldParse = parseData !== false;
|
|
686
710
|
const { length } = names;
|
|
687
711
|
for (let index = 0; index < length; index += 1) {
|
|
@@ -710,6 +734,65 @@ function isInvalidBooleanAttribute(first, second) {
|
|
|
710
734
|
return _isInvalidBooleanAttribute(first, second, true);
|
|
711
735
|
}
|
|
712
736
|
//#endregion
|
|
737
|
+
//#region src/property/get.property.ts
|
|
738
|
+
/**
|
|
739
|
+
* Get the values of one or more properties on an element
|
|
740
|
+
*
|
|
741
|
+
* @param target Target element
|
|
742
|
+
* @param properties Properties to get
|
|
743
|
+
* @returns Property values
|
|
744
|
+
*/
|
|
745
|
+
function getProperties(target, properties) {
|
|
746
|
+
const values = {};
|
|
747
|
+
if (!(target instanceof Element && Array.isArray(properties))) return values;
|
|
748
|
+
const { length } = properties;
|
|
749
|
+
for (let index = 0; index < length; index += 1) {
|
|
750
|
+
const property = properties[index];
|
|
751
|
+
if (typeof property === "string") values[property] = getPropertyValue(target, property);
|
|
752
|
+
}
|
|
753
|
+
return values;
|
|
754
|
+
}
|
|
755
|
+
/**
|
|
756
|
+
* Get the value of a property on an element
|
|
757
|
+
*
|
|
758
|
+
* @param target Target element
|
|
759
|
+
* @param property Property to get
|
|
760
|
+
* @returns Property value
|
|
761
|
+
*/
|
|
762
|
+
function getProperty(target, property) {
|
|
763
|
+
if (target instanceof Element && typeof property === "string") return getPropertyValue(target, property);
|
|
764
|
+
}
|
|
765
|
+
function getPropertyValue(element, property) {
|
|
766
|
+
let actual = property;
|
|
767
|
+
if (!(actual in element)) actual = camelCase(actual);
|
|
768
|
+
if (actual in element) return element[actual];
|
|
769
|
+
}
|
|
770
|
+
//#endregion
|
|
771
|
+
//#region src/property/set.property.ts
|
|
772
|
+
/**
|
|
773
|
+
* Set the values of one or more properties on an element
|
|
774
|
+
*
|
|
775
|
+
* Also updates attributes for boolean/dispatchable properties, and if `dispatch` is `true`, will dispatch events for dispatchable properties
|
|
776
|
+
*
|
|
777
|
+
* @param target Target element
|
|
778
|
+
* @param properties Properties to set
|
|
779
|
+
* @param dispatch Dispatch events for properties? _(defaults to `true`)_
|
|
780
|
+
*/
|
|
781
|
+
function setProperties(target, properties, dispatch) {
|
|
782
|
+
if (!(target instanceof Element) || !isPlainObject(properties)) return;
|
|
783
|
+
const shouldDispatch = dispatch !== false;
|
|
784
|
+
const keys = Object.keys(properties);
|
|
785
|
+
const { length } = keys;
|
|
786
|
+
for (let index = 0; index < length; index += 1) setPropertyValue(target, keys[index], properties[keys[index]], shouldDispatch);
|
|
787
|
+
}
|
|
788
|
+
function setProperty(target, property, value, dispatch) {
|
|
789
|
+
if (target instanceof Element && typeof property === "string") setPropertyValue(target, property, value, dispatch !== false);
|
|
790
|
+
}
|
|
791
|
+
function setPropertyValue(element, property, value, dispatch) {
|
|
792
|
+
if (booleanAttributesSet.has(property.toLowerCase()) || dispatchedAttributes.has(property)) setAttribute(element, property, value, dispatch);
|
|
793
|
+
else updateProperty(element, property, value, dispatch);
|
|
794
|
+
}
|
|
795
|
+
//#endregion
|
|
713
796
|
//#region src/style.ts
|
|
714
797
|
/**
|
|
715
798
|
* Get a style from an element
|
|
@@ -720,7 +803,7 @@ function isInvalidBooleanAttribute(first, second) {
|
|
|
720
803
|
* @returns Style value
|
|
721
804
|
*/
|
|
722
805
|
function getStyle(element, property, computed) {
|
|
723
|
-
if (
|
|
806
|
+
if (element instanceof Element && typeof property === "string") return getStyleValue(element, property, computed === true);
|
|
724
807
|
}
|
|
725
808
|
/**
|
|
726
809
|
* Get styles from an element
|
|
@@ -732,7 +815,7 @@ function getStyle(element, property, computed) {
|
|
|
732
815
|
*/
|
|
733
816
|
function getStyles(element, properties, computed) {
|
|
734
817
|
const styles = {};
|
|
735
|
-
if (!(
|
|
818
|
+
if (!(element instanceof Element && Array.isArray(properties))) return styles;
|
|
736
819
|
const { length } = properties;
|
|
737
820
|
for (let index = 0; index < length; index += 1) {
|
|
738
821
|
const property = properties[index];
|
|
@@ -742,7 +825,7 @@ function getStyles(element, properties, computed) {
|
|
|
742
825
|
}
|
|
743
826
|
function getTextDirection(node) {
|
|
744
827
|
let target;
|
|
745
|
-
if (
|
|
828
|
+
if (node instanceof Element) target = node;
|
|
746
829
|
else target = node instanceof Node ? node.ownerDocument?.documentElement ?? document.documentElement : document.documentElement;
|
|
747
830
|
let { direction } = target.style;
|
|
748
831
|
if (direction === "") direction = getStyleValue(target, PROPERTY_DIRECTION, true);
|
|
@@ -817,65 +900,6 @@ const DIRECTION_RTL = "rtl";
|
|
|
817
900
|
const PROPERTY_DIRECTION = "direction";
|
|
818
901
|
const VARIABLE_PREFIX = "--";
|
|
819
902
|
//#endregion
|
|
820
|
-
//#region src/property/get.property.ts
|
|
821
|
-
/**
|
|
822
|
-
* Get the values of one or more properties on an element
|
|
823
|
-
*
|
|
824
|
-
* @param target Target element
|
|
825
|
-
* @param properties Properties to get
|
|
826
|
-
* @returns Property values
|
|
827
|
-
*/
|
|
828
|
-
function getProperties(target, properties) {
|
|
829
|
-
const values = {};
|
|
830
|
-
if (!isHTMLOrSVGElement(target) || !Array.isArray(properties)) return values;
|
|
831
|
-
const { length } = properties;
|
|
832
|
-
for (let index = 0; index < length; index += 1) {
|
|
833
|
-
const property = properties[index];
|
|
834
|
-
if (typeof property === "string") values[property] = getPropertyValue(target, property);
|
|
835
|
-
}
|
|
836
|
-
return values;
|
|
837
|
-
}
|
|
838
|
-
/**
|
|
839
|
-
* Get the value of a property on an element
|
|
840
|
-
*
|
|
841
|
-
* @param target Target element
|
|
842
|
-
* @param property Property to get
|
|
843
|
-
* @returns Property value
|
|
844
|
-
*/
|
|
845
|
-
function getProperty(target, property) {
|
|
846
|
-
if (isHTMLOrSVGElement(target) && typeof property === "string") return getPropertyValue(target, property);
|
|
847
|
-
}
|
|
848
|
-
function getPropertyValue(element, property) {
|
|
849
|
-
let actual = property;
|
|
850
|
-
if (!(actual in element)) actual = camelCase(actual);
|
|
851
|
-
if (actual in element) return element[actual];
|
|
852
|
-
}
|
|
853
|
-
//#endregion
|
|
854
|
-
//#region src/property/set.property.ts
|
|
855
|
-
/**
|
|
856
|
-
* Set the values of one or more properties on an element
|
|
857
|
-
*
|
|
858
|
-
* Also updates attributes for boolean/dispatchable properties, and if `dispatch` is `true`, will dispatch events for dispatchable properties
|
|
859
|
-
*
|
|
860
|
-
* @param target Target element
|
|
861
|
-
* @param properties Properties to set
|
|
862
|
-
* @param dispatch Dispatch events for properties? _(defaults to `true`)_
|
|
863
|
-
*/
|
|
864
|
-
function setProperties(target, properties, dispatch) {
|
|
865
|
-
if (!isHTMLOrSVGElement(target) || !isPlainObject(properties)) return;
|
|
866
|
-
const shouldDispatch = dispatch !== false;
|
|
867
|
-
const keys = Object.keys(properties);
|
|
868
|
-
const { length } = keys;
|
|
869
|
-
for (let index = 0; index < length; index += 1) setPropertyValue(target, keys[index], properties[keys[index]], shouldDispatch);
|
|
870
|
-
}
|
|
871
|
-
function setProperty(target, property, value, dispatch) {
|
|
872
|
-
if (isHTMLOrSVGElement(target) && typeof property === "string") setPropertyValue(target, property, value, dispatch !== false);
|
|
873
|
-
}
|
|
874
|
-
function setPropertyValue(element, property, value, dispatch) {
|
|
875
|
-
if (booleanAttributesSet.has(property.toLowerCase()) || dispatchedAttributes.has(property)) setAttribute(element, property, value, dispatch);
|
|
876
|
-
else updateProperty(element, property, value, dispatch);
|
|
877
|
-
}
|
|
878
|
-
//#endregion
|
|
879
903
|
//#region src/create.ts
|
|
880
904
|
function createElement(tag, properties, attributes, styles) {
|
|
881
905
|
if (typeof tag !== "string") throw new TypeError(MESSAGE);
|
|
@@ -889,7 +913,7 @@ const MESSAGE = "Tag name must be a string";
|
|
|
889
913
|
//#endregion
|
|
890
914
|
//#region src/data.ts
|
|
891
915
|
function getData(element, keys, parseValues) {
|
|
892
|
-
if (!
|
|
916
|
+
if (!(element instanceof Element)) return;
|
|
893
917
|
const noParse = parseValues === false;
|
|
894
918
|
if (typeof keys === "string") {
|
|
895
919
|
const value = element.dataset[camelCase(keys)];
|
|
@@ -938,7 +962,7 @@ function addDelegatedListener(target, type, name, listener, passive) {
|
|
|
938
962
|
};
|
|
939
963
|
}
|
|
940
964
|
function delegatedEventHandler(event) {
|
|
941
|
-
const key =
|
|
965
|
+
const key = `@${event.type}${this ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
|
|
942
966
|
const items = event.composedPath();
|
|
943
967
|
const { length } = items;
|
|
944
968
|
let cancelled = false;
|
|
@@ -973,7 +997,7 @@ function delegatedEventHandler(event) {
|
|
|
973
997
|
}
|
|
974
998
|
}
|
|
975
999
|
function getDelegatedName(target, type, options) {
|
|
976
|
-
if (isEventTarget(target) && EVENT_TYPES.has(type) && !options.capture && !options.once && options.signal == null) return
|
|
1000
|
+
if (isEventTarget(target) && EVENT_TYPES.has(type) && !options.capture && !options.once && options.signal == null) return `@${type}${options.passive ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
|
|
977
1001
|
}
|
|
978
1002
|
function removeDelegatedListener(target, name, listener) {
|
|
979
1003
|
const handlers = target[name];
|
|
@@ -983,10 +1007,9 @@ function removeDelegatedListener(target, name, listener) {
|
|
|
983
1007
|
return true;
|
|
984
1008
|
}
|
|
985
1009
|
const DELEGATED = /* @__PURE__ */ new Set();
|
|
986
|
-
const EVENT_PREFIX = "@";
|
|
987
1010
|
const EVENT_SUFFIX_ACTIVE = ":active";
|
|
988
1011
|
const EVENT_SUFFIX_PASSIVE = ":passive";
|
|
989
|
-
const EVENT_TYPES = new Set([
|
|
1012
|
+
const EVENT_TYPES = /* @__PURE__ */ new Set([
|
|
990
1013
|
"beforeinput",
|
|
991
1014
|
"click",
|
|
992
1015
|
"dblclick",
|
|
@@ -1023,7 +1046,7 @@ function createDispatchOptions(options) {
|
|
|
1023
1046
|
}
|
|
1024
1047
|
function createEvent(type, options) {
|
|
1025
1048
|
const hasOptions = isPlainObject(options);
|
|
1026
|
-
if (hasOptions &&
|
|
1049
|
+
if (hasOptions && "detail" in options) return new CustomEvent(type, {
|
|
1027
1050
|
...createDispatchOptions(options),
|
|
1028
1051
|
detail: options?.detail
|
|
1029
1052
|
});
|
|
@@ -1086,7 +1109,6 @@ function on(target, type, listener, options) {
|
|
|
1086
1109
|
target.removeEventListener(type, listener, extended);
|
|
1087
1110
|
};
|
|
1088
1111
|
}
|
|
1089
|
-
const PROPERTY_DETAIL = "detail";
|
|
1090
1112
|
//#endregion
|
|
1091
1113
|
//#region src/find/relative.ts
|
|
1092
1114
|
function findAncestor(origin, selector) {
|
|
@@ -1594,9 +1616,9 @@ html.clear = () => {
|
|
|
1594
1616
|
templates.clear();
|
|
1595
1617
|
};
|
|
1596
1618
|
/**
|
|
1597
|
-
* Remove cached template element for an
|
|
1619
|
+
* Remove cached template element for an _HTML_ string or _ID_
|
|
1598
1620
|
*
|
|
1599
|
-
* @param template
|
|
1621
|
+
* @param template _HTML_ string or ID for a template element
|
|
1600
1622
|
*/
|
|
1601
1623
|
html.remove = (template) => {
|
|
1602
1624
|
templates.delete(template);
|
|
@@ -1619,6 +1641,7 @@ function replaceComments(origin, replacements) {
|
|
|
1619
1641
|
}
|
|
1620
1642
|
/**
|
|
1621
1643
|
* Sanitize one or more nodes, recursively
|
|
1644
|
+
*
|
|
1622
1645
|
* @param value Node or nodes to sanitize
|
|
1623
1646
|
* @param options Sanitization options
|
|
1624
1647
|
* @returns Sanitized nodes
|
|
@@ -1635,6 +1658,28 @@ const TEMPLATE_TAG = "template";
|
|
|
1635
1658
|
const TEMPORARY_ELEMENT = "<toretto-temporary></toretto-temporary>";
|
|
1636
1659
|
const templates = new SizedMap(128);
|
|
1637
1660
|
let parser;
|
|
1638
|
-
window.templates = templates;
|
|
1639
1661
|
//#endregion
|
|
1640
|
-
|
|
1662
|
+
//#region src/is.ts
|
|
1663
|
+
/**
|
|
1664
|
+
* Is the value a child node?
|
|
1665
|
+
*
|
|
1666
|
+
* @param value Value to check
|
|
1667
|
+
* @returns `true` if it's a child node, otherwise `false`
|
|
1668
|
+
*/
|
|
1669
|
+
function isChildNode(value) {
|
|
1670
|
+
return value instanceof Node && CHILD_NODE_TYPES.has(value.nodeType);
|
|
1671
|
+
}
|
|
1672
|
+
function isInDocument(node, doc) {
|
|
1673
|
+
if (!(node instanceof Node)) return false;
|
|
1674
|
+
if (!(doc instanceof Document)) return node.ownerDocument?.contains(node) ?? true;
|
|
1675
|
+
return node.ownerDocument == null ? node === doc : node.ownerDocument === doc && doc.contains(node);
|
|
1676
|
+
}
|
|
1677
|
+
const CHILD_NODE_TYPES = /* @__PURE__ */ new Set([
|
|
1678
|
+
Node.ELEMENT_NODE,
|
|
1679
|
+
Node.TEXT_NODE,
|
|
1680
|
+
Node.PROCESSING_INSTRUCTION_NODE,
|
|
1681
|
+
Node.COMMENT_NODE,
|
|
1682
|
+
Node.DOCUMENT_TYPE_NODE
|
|
1683
|
+
]);
|
|
1684
|
+
//#endregion
|
|
1685
|
+
export { findElement as $, findElement, findElements as $$, findElements, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAria, getAttribute, getAttributes, getData, getDistance, getElementFromPosition, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getRole, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventPosition, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInputElement, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAria, setAttribute, setAttributes, setData, setProperties, setProperty, setRole, setStyle, setStyles, supportsTouch, toggleStyles };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { updateElementValue } from "./element-value.mjs";
|
|
2
1
|
import { updateProperty } from "./property.mjs";
|
|
2
|
+
import { updateElementValue } from "./element-value.mjs";
|
|
3
3
|
import { isPlainObject } from "@oscarpalmer/atoms/is";
|
|
4
4
|
import { getString } from "@oscarpalmer/atoms/string";
|
|
5
5
|
import { kebabCase } from "@oscarpalmer/atoms/string/case";
|
|
@@ -96,7 +96,7 @@ const booleanAttributes = Object.freeze([
|
|
|
96
96
|
"selected"
|
|
97
97
|
]);
|
|
98
98
|
const booleanAttributesSet = new Set(booleanAttributes);
|
|
99
|
-
const dispatchedAttributes = new Set([
|
|
99
|
+
const dispatchedAttributes = /* @__PURE__ */ new Set([
|
|
100
100
|
"checked",
|
|
101
101
|
"open",
|
|
102
102
|
"value"
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { isHTMLOrSVGElement } from "./is.mjs";
|
|
2
|
-
import "../is.mjs";
|
|
3
1
|
import { isAttribute } from "./attribute.mjs";
|
|
4
2
|
import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
|
|
5
3
|
import { getString } from "@oscarpalmer/atoms/string";
|
|
@@ -13,12 +11,12 @@ function normalizeKey(key, style) {
|
|
|
13
11
|
return style && key.startsWith(CSS_VARIABLE_PREFIX) ? key : kebabCase(key);
|
|
14
12
|
}
|
|
15
13
|
function setElementValue(element, first, second, third, callback, style) {
|
|
16
|
-
if (!
|
|
14
|
+
if (!(element instanceof Element)) return;
|
|
17
15
|
if (typeof first === "string") setElementValues(element, first, second, third, callback, style);
|
|
18
16
|
else if (isAttribute(first)) setElementValues(element, first.name, first.value, third, callback, style);
|
|
19
17
|
}
|
|
20
18
|
function setElementValues(element, first, second, third, callback, style) {
|
|
21
|
-
if (!
|
|
19
|
+
if (!(element instanceof Element)) return;
|
|
22
20
|
const dispatch = third !== false;
|
|
23
21
|
if (typeof first === "string") {
|
|
24
22
|
callback(element, normalizeKey(first, style), second, dispatch);
|
package/dist/internal/is.d.mts
CHANGED
|
@@ -16,10 +16,10 @@ declare function isEventPosition(value: unknown): value is EventPosition;
|
|
|
16
16
|
*/
|
|
17
17
|
declare function isEventTarget(value: unknown): value is EventTarget;
|
|
18
18
|
/**
|
|
19
|
-
* Is the value an
|
|
19
|
+
* Is the value an _HTML_ or _SVG_ element?
|
|
20
20
|
*
|
|
21
21
|
* @param value Value to check
|
|
22
|
-
* @returns `true` if it's an
|
|
22
|
+
* @returns `true` if it's an _HTML_ or _SVG_ element, otherwise `false`
|
|
23
23
|
*/
|
|
24
24
|
declare function isHTMLOrSVGElement(value: unknown): value is HTMLElement | SVGElement;
|
|
25
25
|
/**
|
package/dist/internal/is.mjs
CHANGED
|
@@ -18,10 +18,10 @@ function isEventTarget(value) {
|
|
|
18
18
|
return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
|
-
* Is the value an
|
|
21
|
+
* Is the value an _HTML_ or _SVG_ element?
|
|
22
22
|
*
|
|
23
23
|
* @param value Value to check
|
|
24
|
-
* @returns `true` if it's an
|
|
24
|
+
* @returns `true` if it's an _HTML_ or _SVG_ element, otherwise `false`
|
|
25
25
|
*/
|
|
26
26
|
function isHTMLOrSVGElement(value) {
|
|
27
27
|
return value instanceof HTMLElement || value instanceof SVGElement;
|
package/dist/is.mjs
CHANGED
|
@@ -14,7 +14,7 @@ function isInDocument(node, doc) {
|
|
|
14
14
|
if (!(doc instanceof Document)) return node.ownerDocument?.contains(node) ?? true;
|
|
15
15
|
return node.ownerDocument == null ? node === doc : node.ownerDocument === doc && doc.contains(node);
|
|
16
16
|
}
|
|
17
|
-
const CHILD_NODE_TYPES = new Set([
|
|
17
|
+
const CHILD_NODE_TYPES = /* @__PURE__ */ new Set([
|
|
18
18
|
Node.ELEMENT_NODE,
|
|
19
19
|
Node.TEXT_NODE,
|
|
20
20
|
Node.PROCESSING_INSTRUCTION_NODE,
|
package/dist/models.d.mts
CHANGED
|
@@ -1,4 +1,24 @@
|
|
|
1
1
|
//#region src/models.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* _ARIA_ attribute for an element
|
|
4
|
+
*
|
|
5
|
+
* _(https://www.w3.org/TR/wai-aria-1.3/#aria-attributes)_
|
|
6
|
+
*/
|
|
7
|
+
type AriaAttribute = keyof AriaAttributes;
|
|
8
|
+
/**
|
|
9
|
+
* _ARIA_ attribute for an element without the `aria-` prefix
|
|
10
|
+
*
|
|
11
|
+
* _(https://www.w3.org/TR/wai-aria-1.3/#aria-attributes)_
|
|
12
|
+
*/
|
|
13
|
+
type AriaAttributeUnprefixed = keyof { [Key in AriaAttribute as Key extends `aria-${infer Name}` ? Name : never]: string | null };
|
|
14
|
+
type AriaAttributes = { [Key in keyof ARIAMixin as NormalizedName<Key>]: string | null };
|
|
15
|
+
type NormalizedName<Key extends string> = Key extends `aria${infer Name}` ? Name extends `${infer Part}Element` ? `aria-${Lowercase<Part>}` : Name extends `${infer Part}Elements` ? `aria-${Lowercase<Part>}` : `aria-${Lowercase<Name>}` : never;
|
|
16
|
+
/**
|
|
17
|
+
* _ARIA_ role for an element
|
|
18
|
+
*
|
|
19
|
+
* _(https://www.w3.org/TR/wai-aria-1.3/#role_definitions)_
|
|
20
|
+
*/
|
|
21
|
+
type AriaRole = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'blockquote' | 'button' | 'caption' | 'cell' | 'checkbox' | 'code' | 'columnheader' | 'combobox' | 'comment' | 'complementary' | 'contentinfo' | 'definition' | 'deletion' | 'dialog' | 'directory' | 'document' | 'emphasis' | 'feed' | 'figure' | 'form' | 'generic' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'insertion' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'mark' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'meter' | 'navigation' | 'none' | 'note' | 'option' | 'paragraph' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'sectionfooter' | 'sectionheader' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'strong' | 'subscript' | 'suggestion' | 'superscript' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'time' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';
|
|
2
22
|
/**
|
|
3
23
|
* Attribute for an element
|
|
4
24
|
*/
|
|
@@ -23,4 +43,4 @@ type Selector = string | Node | Node[] | NodeList;
|
|
|
23
43
|
*/
|
|
24
44
|
type TextDirection = 'ltr' | 'rtl';
|
|
25
45
|
//#endregion
|
|
26
|
-
export { Attribute, CustomEventListener, RemovableEventListener, Selector, TextDirection };
|
|
46
|
+
export { AriaAttribute, AriaAttributeUnprefixed, AriaRole, Attribute, CustomEventListener, RemovableEventListener, Selector, TextDirection };
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { isHTMLOrSVGElement } from "../internal/is.mjs";
|
|
2
1
|
import { camelCase } from "@oscarpalmer/atoms/string/case";
|
|
3
2
|
//#region src/property/get.property.ts
|
|
4
3
|
/**
|
|
@@ -10,7 +9,7 @@ import { camelCase } from "@oscarpalmer/atoms/string/case";
|
|
|
10
9
|
*/
|
|
11
10
|
function getProperties(target, properties) {
|
|
12
11
|
const values = {};
|
|
13
|
-
if (!
|
|
12
|
+
if (!(target instanceof Element && Array.isArray(properties))) return values;
|
|
14
13
|
const { length } = properties;
|
|
15
14
|
for (let index = 0; index < length; index += 1) {
|
|
16
15
|
const property = properties[index];
|
|
@@ -26,7 +25,7 @@ function getProperties(target, properties) {
|
|
|
26
25
|
* @returns Property value
|
|
27
26
|
*/
|
|
28
27
|
function getProperty(target, property) {
|
|
29
|
-
if (
|
|
28
|
+
if (target instanceof Element && typeof property === "string") return getPropertyValue(target, property);
|
|
30
29
|
}
|
|
31
30
|
function getPropertyValue(element, property) {
|
|
32
31
|
let actual = property;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { isHTMLOrSVGElement } from "../internal/is.mjs";
|
|
2
|
-
import "../is.mjs";
|
|
3
1
|
import { updateProperty } from "../internal/property.mjs";
|
|
4
2
|
import { booleanAttributesSet, dispatchedAttributes } from "../internal/attribute.mjs";
|
|
5
3
|
import { setAttribute } from "../attribute/set.attribute.mjs";
|
|
@@ -16,14 +14,14 @@ import { isPlainObject } from "@oscarpalmer/atoms/is";
|
|
|
16
14
|
* @param dispatch Dispatch events for properties? _(defaults to `true`)_
|
|
17
15
|
*/
|
|
18
16
|
function setProperties(target, properties, dispatch) {
|
|
19
|
-
if (!
|
|
17
|
+
if (!(target instanceof Element) || !isPlainObject(properties)) return;
|
|
20
18
|
const shouldDispatch = dispatch !== false;
|
|
21
19
|
const keys = Object.keys(properties);
|
|
22
20
|
const { length } = keys;
|
|
23
21
|
for (let index = 0; index < length; index += 1) setPropertyValue(target, keys[index], properties[keys[index]], shouldDispatch);
|
|
24
22
|
}
|
|
25
23
|
function setProperty(target, property, value, dispatch) {
|
|
26
|
-
if (
|
|
24
|
+
if (target instanceof Element && typeof property === "string") setPropertyValue(target, property, value, dispatch !== false);
|
|
27
25
|
}
|
|
28
26
|
function setPropertyValue(element, property, value, dispatch) {
|
|
29
27
|
if (booleanAttributesSet.has(property.toLowerCase()) || dispatchedAttributes.has(property)) setAttribute(element, property, value, dispatch);
|
package/dist/style.mjs
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { isHTMLOrSVGElement } from "./internal/is.mjs";
|
|
2
1
|
import { setElementValues, updateElementValue } from "./internal/element-value.mjs";
|
|
3
2
|
import { getStyleValue } from "./internal/get-value.mjs";
|
|
4
3
|
import { getString } from "@oscarpalmer/atoms/string";
|
|
@@ -12,7 +11,7 @@ import { getString } from "@oscarpalmer/atoms/string";
|
|
|
12
11
|
* @returns Style value
|
|
13
12
|
*/
|
|
14
13
|
function getStyle(element, property, computed) {
|
|
15
|
-
if (
|
|
14
|
+
if (element instanceof Element && typeof property === "string") return getStyleValue(element, property, computed === true);
|
|
16
15
|
}
|
|
17
16
|
/**
|
|
18
17
|
* Get styles from an element
|
|
@@ -24,7 +23,7 @@ function getStyle(element, property, computed) {
|
|
|
24
23
|
*/
|
|
25
24
|
function getStyles(element, properties, computed) {
|
|
26
25
|
const styles = {};
|
|
27
|
-
if (!(
|
|
26
|
+
if (!(element instanceof Element && Array.isArray(properties))) return styles;
|
|
28
27
|
const { length } = properties;
|
|
29
28
|
for (let index = 0; index < length; index += 1) {
|
|
30
29
|
const property = properties[index];
|
|
@@ -34,7 +33,7 @@ function getStyles(element, properties, computed) {
|
|
|
34
33
|
}
|
|
35
34
|
function getTextDirection(node) {
|
|
36
35
|
let target;
|
|
37
|
-
if (
|
|
36
|
+
if (node instanceof Element) target = node;
|
|
38
37
|
else target = node instanceof Node ? node.ownerDocument?.documentElement ?? document.documentElement : document.documentElement;
|
|
39
38
|
let { direction } = target.style;
|
|
40
39
|
if (direction === "") direction = getStyleValue(target, PROPERTY_DIRECTION, true);
|