@oscarpalmer/toretto 0.32.0 → 0.34.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/index.js +2 -2
- package/dist/attribute/set.js +7 -12
- package/dist/data.js +2 -2
- package/dist/index.js +1 -1
- package/dist/internal/attribute.js +29 -36
- package/dist/internal/element-value.js +26 -13
- package/dist/style.js +3 -3
- package/dist/toretto.full.js +258 -131
- package/package.json +7 -7
- package/src/attribute/set.ts +52 -56
- package/src/data.ts +2 -1
- package/src/index.ts +1 -1
- package/src/internal/attribute.ts +51 -55
- package/src/internal/element-value.ts +43 -13
- package/src/models.ts +2 -7
- package/src/style.ts +3 -2
- package/types/attribute/set.d.ts +19 -37
- package/types/index.d.ts +1 -1
- package/types/internal/attribute.d.ts +3 -4
- package/types/internal/element-value.d.ts +3 -3
- package/types/models.d.ts +2 -6
package/dist/attribute/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { getAttribute, getAttributes } from "./get.js";
|
|
2
2
|
import { _isBadAttribute, _isBooleanAttribute, _isEmptyNonBooleanAttribute, _isInvalidBooleanAttribute, booleanAttributes } from "../internal/attribute.js";
|
|
3
|
-
import { setAttribute, setAttributes
|
|
3
|
+
import { setAttribute, setAttributes } from "./set.js";
|
|
4
4
|
function isBadAttribute(first, second) {
|
|
5
5
|
return _isBadAttribute(first, second, true);
|
|
6
6
|
}
|
|
@@ -13,4 +13,4 @@ function isEmptyNonBooleanAttribute(first, second) {
|
|
|
13
13
|
function isInvalidBooleanAttribute(first, second) {
|
|
14
14
|
return _isInvalidBooleanAttribute(first, second, true);
|
|
15
15
|
}
|
|
16
|
-
export { booleanAttributes, getAttribute, getAttributes, isBadAttribute, isBooleanAttribute, isEmptyNonBooleanAttribute, isInvalidBooleanAttribute, setAttribute, setAttributes
|
|
16
|
+
export { booleanAttributes, getAttribute, getAttributes, isBadAttribute, isBooleanAttribute, isEmptyNonBooleanAttribute, isInvalidBooleanAttribute, setAttribute, setAttributes };
|
package/dist/attribute/set.js
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { setElementValue, setElementValues } from "../internal/element-value.js";
|
|
2
|
+
import { updateAttribute } from "../internal/attribute.js";
|
|
3
|
+
function setAttribute(element, first, second, third) {
|
|
4
|
+
setElementValue(element, first, second, third, updateAttribute);
|
|
4
5
|
}
|
|
5
|
-
function setAttributes(element, attributes) {
|
|
6
|
-
|
|
6
|
+
function setAttributes(element, attributes, dispatch) {
|
|
7
|
+
setElementValues(element, attributes, null, dispatch, updateAttribute);
|
|
7
8
|
}
|
|
8
|
-
|
|
9
|
-
updateValue(element, first, second);
|
|
10
|
-
}
|
|
11
|
-
function setProperties(element, properties) {
|
|
12
|
-
updateValues(element, properties);
|
|
13
|
-
}
|
|
14
|
-
export { setAttribute, setAttributes, setProperties, setProperty };
|
|
9
|
+
export { setAttribute, setAttributes };
|
package/dist/data.js
CHANGED
|
@@ -24,10 +24,10 @@ function getName(original) {
|
|
|
24
24
|
return `${ATTRIBUTE_DATA_PREFIX}${kebabCase(original).replace(EXPRESSION_DATA_PREFIX, "")}`;
|
|
25
25
|
}
|
|
26
26
|
function setData(element, first, second) {
|
|
27
|
-
setElementValues(element, first, second, updateDataAttribute);
|
|
27
|
+
setElementValues(element, first, second, null, updateDataAttribute);
|
|
28
28
|
}
|
|
29
29
|
function updateDataAttribute(element, key, value) {
|
|
30
|
-
updateElementValue(element, getName(key), value, element.setAttribute, element.removeAttribute, true);
|
|
30
|
+
updateElementValue(element, getName(key), value, element.setAttribute, element.removeAttribute, false, true);
|
|
31
31
|
}
|
|
32
32
|
var ATTRIBUTE_DATA_PREFIX = "data-";
|
|
33
33
|
export { getData, setData };
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { isEventTarget, isHTMLOrSVGElement } from "./internal/is.js";
|
|
2
|
-
import { isBadAttribute, isBooleanAttribute, isEmptyNonBooleanAttribute, isInvalidBooleanAttribute } from "./attribute/index.js";
|
|
3
2
|
import { isChildNode, isInDocument } from "./is.js";
|
|
3
|
+
import { isBadAttribute, isBooleanAttribute, isEmptyNonBooleanAttribute, isInvalidBooleanAttribute } from "./attribute/index.js";
|
|
4
4
|
import { getData, setData } from "./data.js";
|
|
5
5
|
import { dispatch, getPosition, off, on } from "./event/index.js";
|
|
6
6
|
import { findAncestor, findRelatives, getDistance } from "./find/relative.js";
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { getString } from "@oscarpalmer/atoms/string";
|
|
1
|
+
import { updateElementValue } from "./element-value.js";
|
|
3
2
|
import { isPlainObject } from "@oscarpalmer/atoms/is";
|
|
4
3
|
function badAttributeHandler(name, value) {
|
|
5
|
-
if (name
|
|
4
|
+
if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
|
|
6
5
|
if (EXPRESSION_CLOBBERED_NAME.test(name) && (value in document || value in formElement) || EXPRESSION_EVENT_NAME.test(name)) return true;
|
|
7
6
|
if (EXPRESSION_SKIP_NAME.test(name) || EXPRESSION_URI_VALUE.test(value) || isValidSourceAttribute(name, value)) return false;
|
|
8
7
|
return EXPRESSION_DATA_OR_SCRIPT.test(value);
|
|
9
8
|
}
|
|
10
9
|
function booleanAttributeHandler(name, value) {
|
|
11
|
-
if (name
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
|
|
11
|
+
const normalizedName = name.toLowerCase();
|
|
12
|
+
if (!booleanAttributesSet.has(normalizedName)) return false;
|
|
13
|
+
const normalized = value.toLowerCase();
|
|
14
|
+
return !(normalized.length === 0 || normalized === normalizedName);
|
|
15
15
|
}
|
|
16
16
|
function decodeAttribute(value) {
|
|
17
17
|
textArea ??= document.createElement("textarea");
|
|
@@ -32,7 +32,7 @@ function handleAttribute(callback, decode, first, second) {
|
|
|
32
32
|
return callback(name, value?.replace(EXPRESSION_WHITESPACE, ""));
|
|
33
33
|
}
|
|
34
34
|
function isAttribute(value) {
|
|
35
|
-
return value instanceof Attr || isPlainObject(value) && typeof value.name === "string" &&
|
|
35
|
+
return value instanceof Attr || isPlainObject(value) && typeof value.name === "string" && "value" in value;
|
|
36
36
|
}
|
|
37
37
|
function _isBadAttribute(first, second, decode) {
|
|
38
38
|
return handleAttribute(badAttributeHandler, decode, first, second);
|
|
@@ -46,37 +46,21 @@ function _isEmptyNonBooleanAttribute(first, second, decode) {
|
|
|
46
46
|
function _isInvalidBooleanAttribute(first, second, decode) {
|
|
47
47
|
return handleAttribute(booleanAttributeHandler, decode, first, second);
|
|
48
48
|
}
|
|
49
|
-
function isProperty(value) {
|
|
50
|
-
return isPlainObject(value) && typeof value.name === "string";
|
|
51
|
-
}
|
|
52
49
|
function isValidSourceAttribute(name, value) {
|
|
53
50
|
return EXPRESSION_SOURCE_NAME.test(name) && EXPRESSION_SOURCE_VALUE.test(value);
|
|
54
51
|
}
|
|
55
|
-
function updateAttribute(element, name, value) {
|
|
56
|
-
const
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
function updateProperty(element, name, value) {
|
|
62
|
-
const actual = name.toLowerCase();
|
|
63
|
-
element[actual] = value === "" || typeof value === "string" && value.toLowerCase() === actual || value === true;
|
|
52
|
+
function updateAttribute(element, name, value, dispatch) {
|
|
53
|
+
const normalizedName = name.toLowerCase();
|
|
54
|
+
const isBoolean = booleanAttributesSet.has(normalizedName);
|
|
55
|
+
const next = isBoolean ? value === true || typeof value === "string" && (value === "" || value.toLowerCase() === normalizedName) : value == null ? "" : value;
|
|
56
|
+
if (name in element) updateProperty(element, normalizedName, next, dispatch);
|
|
57
|
+
updateElementValue(element, name, isBoolean ? next ? "" : null : value, element.setAttribute, element.removeAttribute, isBoolean, false);
|
|
64
58
|
}
|
|
65
|
-
function
|
|
66
|
-
if (
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
function updateValues(element, values) {
|
|
71
|
-
if (!isHTMLOrSVGElement(element)) return;
|
|
72
|
-
const isArray = Array.isArray(values);
|
|
73
|
-
const entries = Object.entries(values);
|
|
74
|
-
const { length } = entries;
|
|
75
|
-
for (let index = 0; index < length; index += 1) {
|
|
76
|
-
const entry = entries[index];
|
|
77
|
-
if (isArray) updateAttribute(element, entry[1].name, entry[1].value);
|
|
78
|
-
else updateAttribute(element, entry[0], entry[1]);
|
|
79
|
-
}
|
|
59
|
+
function updateProperty(element, name, value, dispatch) {
|
|
60
|
+
if (Object.is(element[name], value)) return;
|
|
61
|
+
element[name] = value;
|
|
62
|
+
const event = dispatch !== false && elementEvents[element.tagName]?.[name];
|
|
63
|
+
if (typeof event === "string") element.dispatchEvent(new Event(event, { bubbles: true }));
|
|
80
64
|
}
|
|
81
65
|
var EXPRESSION_CLOBBERED_NAME = /^(id|name)$/i;
|
|
82
66
|
var EXPRESSION_DATA_OR_SCRIPT = /^(?:data|\w+script):/i;
|
|
@@ -113,6 +97,15 @@ const booleanAttributes = Object.freeze([
|
|
|
113
97
|
"selected"
|
|
114
98
|
]);
|
|
115
99
|
var booleanAttributesSet = new Set(booleanAttributes);
|
|
100
|
+
var elementEvents = {
|
|
101
|
+
DETAILS: { open: "toggle" },
|
|
102
|
+
INPUT: {
|
|
103
|
+
checked: "change",
|
|
104
|
+
value: "input"
|
|
105
|
+
},
|
|
106
|
+
SELECT: { value: "change" },
|
|
107
|
+
TEXTAREA: { value: "input" }
|
|
108
|
+
};
|
|
116
109
|
var formElement = document.createElement("form");
|
|
117
110
|
var textArea;
|
|
118
|
-
export { _isBadAttribute, _isBooleanAttribute, _isEmptyNonBooleanAttribute, _isInvalidBooleanAttribute, booleanAttributes,
|
|
111
|
+
export { _isBadAttribute, _isBooleanAttribute, _isEmptyNonBooleanAttribute, _isInvalidBooleanAttribute, booleanAttributes, isAttribute, updateAttribute };
|
|
@@ -1,19 +1,32 @@
|
|
|
1
1
|
import { isHTMLOrSVGElement } from "./is.js";
|
|
2
2
|
import "../is.js";
|
|
3
|
-
import {
|
|
4
|
-
|
|
3
|
+
import { isAttribute } from "./attribute.js";
|
|
4
|
+
import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
|
|
5
|
+
function setElementValue(element, first, second, third, callback) {
|
|
5
6
|
if (!isHTMLOrSVGElement(element)) return;
|
|
6
|
-
if (
|
|
7
|
-
|
|
8
|
-
const { length } = entries;
|
|
9
|
-
for (let index = 0; index < length; index += 1) {
|
|
10
|
-
const [key, value] = entries[index];
|
|
11
|
-
callback(element, key, value);
|
|
12
|
-
}
|
|
13
|
-
} else if (typeof first === "string") callback(element, first, second);
|
|
7
|
+
if (typeof first === "string") setElementValues(element, first, second, third, callback);
|
|
8
|
+
else if (isAttribute(first)) setElementValues(element, first.name, first.value, third, callback);
|
|
14
9
|
}
|
|
15
|
-
function
|
|
16
|
-
if (
|
|
10
|
+
function setElementValues(element, first, second, third, callback) {
|
|
11
|
+
if (!isHTMLOrSVGElement(element)) return;
|
|
12
|
+
if (typeof first === "string") {
|
|
13
|
+
callback(element, first, second, third);
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
const isArray = Array.isArray(first);
|
|
17
|
+
if (!isArray && !(typeof first === "object" && first !== null)) return;
|
|
18
|
+
const entries = isArray ? first : Object.entries(first).map(([name, value]) => ({
|
|
19
|
+
name,
|
|
20
|
+
value
|
|
21
|
+
}));
|
|
22
|
+
const { length } = entries;
|
|
23
|
+
for (let index = 0; index < length; index += 1) {
|
|
24
|
+
const entry = entries[index];
|
|
25
|
+
if (typeof entry === "object" && typeof entry?.name === "string") callback(element, entry.name, entry.value, third);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
function updateElementValue(element, key, value, set, remove, isBoolean, json) {
|
|
29
|
+
if (isBoolean ? value == null : isNullableOrWhitespace(value)) remove.call(element, key);
|
|
17
30
|
else set.call(element, key, json ? JSON.stringify(value) : String(value));
|
|
18
31
|
}
|
|
19
|
-
export { setElementValues, updateElementValue };
|
|
32
|
+
export { setElementValue, setElementValues, updateElementValue };
|
package/dist/style.js
CHANGED
|
@@ -23,10 +23,10 @@ function getTextDirection(element, computed) {
|
|
|
23
23
|
return value === "rtl" ? value : "ltr";
|
|
24
24
|
}
|
|
25
25
|
function setStyle(element, property, value) {
|
|
26
|
-
setElementValues(element, property, value, updateStyleProperty);
|
|
26
|
+
setElementValues(element, property, value, null, updateStyleProperty);
|
|
27
27
|
}
|
|
28
28
|
function setStyles(element, styles) {
|
|
29
|
-
setElementValues(element, styles, null, updateStyleProperty);
|
|
29
|
+
setElementValues(element, styles, null, null, updateStyleProperty);
|
|
30
30
|
}
|
|
31
31
|
function toggleStyles(element, styles) {
|
|
32
32
|
function toggle(set) {
|
|
@@ -59,7 +59,7 @@ function updateStyleProperty(element, key, value) {
|
|
|
59
59
|
this.style[property] = style;
|
|
60
60
|
}, function(property) {
|
|
61
61
|
this.style[property] = "";
|
|
62
|
-
}, false);
|
|
62
|
+
}, false, false);
|
|
63
63
|
}
|
|
64
64
|
var ATTRIBUTE_DIRECTION = "dir";
|
|
65
65
|
var EXPRESSION_DIRECTION = /^(ltr|rtl)$/i;
|