@deneb-ui/core 2.0.28 → 2.0.29
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { StyleKind } from
|
|
1
|
+
import type { StyleKind } from "../types/styles";
|
|
2
2
|
export declare function getLiveStyleCache(): Map<string, Record<string, unknown>>;
|
|
3
3
|
export declare function applyCssVariablesToElement(element: HTMLElement, cssVars: Record<string, string>): void;
|
|
4
4
|
export declare function findStyleTargetElement(targetPath: string, styleType?: StyleKind): HTMLElement | null;
|
|
@@ -8,6 +8,8 @@ exports.patchStyleByPath = patchStyleByPath;
|
|
|
8
8
|
const markers_1 = require("../types/markers");
|
|
9
9
|
const deepMerge_1 = require("./deepMerge");
|
|
10
10
|
const cssVariables_1 = require("./cssVariables");
|
|
11
|
+
const resolve_1 = require("../fonts/resolve");
|
|
12
|
+
const tokenResolver_1 = require("./tokenResolver");
|
|
11
13
|
const liveStyleCache = new Map();
|
|
12
14
|
function getLiveStyleCache() {
|
|
13
15
|
return liveStyleCache;
|
|
@@ -23,7 +25,7 @@ function applyCssVariablesToElement(element, cssVars) {
|
|
|
23
25
|
}
|
|
24
26
|
}
|
|
25
27
|
function findStyleTargetElement(targetPath, styleType) {
|
|
26
|
-
if (typeof document ===
|
|
28
|
+
if (typeof document === "undefined" || !targetPath)
|
|
27
29
|
return null;
|
|
28
30
|
for (const selector of (0, markers_1.buildStyleFallbackSelectors)(targetPath, styleType)) {
|
|
29
31
|
const match = document.querySelector(selector);
|
|
@@ -33,22 +35,99 @@ function findStyleTargetElement(targetPath, styleType) {
|
|
|
33
35
|
return null;
|
|
34
36
|
}
|
|
35
37
|
function patchElementStyle(element, styleKind, updates) {
|
|
36
|
-
const targetPath = element.getAttribute(markers_1.STYLE_TARGET_ATTRIBUTE) ??
|
|
37
|
-
const cacheKey = targetPath || element.getAttribute(
|
|
38
|
+
const targetPath = element.getAttribute(markers_1.STYLE_TARGET_ATTRIBUTE) ?? "";
|
|
39
|
+
const cacheKey = targetPath || element.getAttribute("data-preview-field-path") || "";
|
|
38
40
|
const previous = cacheKey ? liveStyleCache.get(cacheKey) ?? {} : {};
|
|
39
41
|
const merged = (0, deepMerge_1.deepMerge)(previous, updates);
|
|
40
42
|
if (cacheKey)
|
|
41
43
|
liveStyleCache.set(cacheKey, merged);
|
|
42
44
|
const cssVars = (0, cssVariables_1.styleToCssVariables)(styleKind, merged);
|
|
43
45
|
applyCssVariablesToElement(element, cssVars);
|
|
46
|
+
// Directly set standard CSS properties on inline style for instant rendering
|
|
47
|
+
if (styleKind === "text") {
|
|
48
|
+
if (merged.color) {
|
|
49
|
+
const c = (0, tokenResolver_1.resolveThemeToken)(String(merged.color)) || String(merged.color);
|
|
50
|
+
element.style.setProperty("color", c, "important");
|
|
51
|
+
}
|
|
52
|
+
if (merged.textAlign) {
|
|
53
|
+
element.style.setProperty("text-align", String(merged.textAlign), "important");
|
|
54
|
+
}
|
|
55
|
+
if (merged.fontSize !== undefined) {
|
|
56
|
+
const s = (0, cssVariables_1.formatUnit)(merged.fontSize) || String(merged.fontSize);
|
|
57
|
+
element.style.setProperty("font-size", s, "important");
|
|
58
|
+
}
|
|
59
|
+
if (merged.lineHeight !== undefined) {
|
|
60
|
+
element.style.setProperty("line-height", String(merged.lineHeight), "important");
|
|
61
|
+
}
|
|
62
|
+
if (merged.fontFamily) {
|
|
63
|
+
const f = (0, resolve_1.resolveFontFamily)(String(merged.fontFamily)) || String(merged.fontFamily);
|
|
64
|
+
element.style.setProperty("font-family", f, "important");
|
|
65
|
+
}
|
|
66
|
+
if (merged.fontWeight !== undefined) {
|
|
67
|
+
element.style.setProperty("font-weight", String(merged.fontWeight), "important");
|
|
68
|
+
}
|
|
69
|
+
if (merged.marginTop !== undefined || merged.spacingTop !== undefined) {
|
|
70
|
+
const top = (0, cssVariables_1.formatUnit)((merged.marginTop ?? merged.spacingTop));
|
|
71
|
+
if (top)
|
|
72
|
+
element.style.setProperty("margin-top", top, "important");
|
|
73
|
+
}
|
|
74
|
+
if (merged.marginBottom !== undefined || merged.spacingBottom !== undefined) {
|
|
75
|
+
const bottom = (0, cssVariables_1.formatUnit)((merged.marginBottom ?? merged.spacingBottom));
|
|
76
|
+
if (bottom)
|
|
77
|
+
element.style.setProperty("margin-bottom", bottom, "important");
|
|
78
|
+
}
|
|
79
|
+
if (merged.marginLeft !== undefined || merged.spacingLeft !== undefined) {
|
|
80
|
+
const left = (0, cssVariables_1.formatUnit)((merged.marginLeft ?? merged.spacingLeft));
|
|
81
|
+
if (left)
|
|
82
|
+
element.style.setProperty("margin-left", left, "important");
|
|
83
|
+
}
|
|
84
|
+
if (merged.marginRight !== undefined || merged.spacingRight !== undefined) {
|
|
85
|
+
const right = (0, cssVariables_1.formatUnit)((merged.marginRight ?? merged.spacingRight));
|
|
86
|
+
if (right)
|
|
87
|
+
element.style.setProperty("margin-right", right, "important");
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
else if (styleKind === "card") {
|
|
91
|
+
if (merged.backgroundColor) {
|
|
92
|
+
const bg = (0, tokenResolver_1.resolveThemeToken)(String(merged.backgroundColor)) || String(merged.backgroundColor);
|
|
93
|
+
element.style.setProperty("background-color", bg, "important");
|
|
94
|
+
element.style.setProperty("background", bg, "important");
|
|
95
|
+
}
|
|
96
|
+
if (merged.borderRadius !== undefined) {
|
|
97
|
+
const r = (0, cssVariables_1.formatUnit)(merged.borderRadius) || String(merged.borderRadius);
|
|
98
|
+
element.style.setProperty("border-radius", r, "important");
|
|
99
|
+
}
|
|
100
|
+
if (merged.padding !== undefined || merged.paddingTop !== undefined) {
|
|
101
|
+
const pad = (0, cssVariables_1.formatUnit)((merged.padding ?? merged.paddingTop));
|
|
102
|
+
if (pad)
|
|
103
|
+
element.style.setProperty("padding", pad, "important");
|
|
104
|
+
}
|
|
105
|
+
if (merged.boxShadow) {
|
|
106
|
+
element.style.setProperty("box-shadow", String(merged.boxShadow), "important");
|
|
107
|
+
}
|
|
108
|
+
if (merged.borderColor) {
|
|
109
|
+
element.style.setProperty("border-color", String(merged.borderColor), "important");
|
|
110
|
+
}
|
|
111
|
+
if (merged.borderWidth !== undefined) {
|
|
112
|
+
const bw = (0, cssVariables_1.formatUnit)(merged.borderWidth) || String(merged.borderWidth);
|
|
113
|
+
element.style.setProperty("border-width", bw, "important");
|
|
114
|
+
element.style.setProperty("border-style", "solid", "important");
|
|
115
|
+
}
|
|
116
|
+
}
|
|
44
117
|
if (!element.getAttribute(markers_1.STYLE_TYPE_ATTRIBUTE)) {
|
|
45
118
|
element.setAttribute(markers_1.STYLE_TYPE_ATTRIBUTE, styleKind);
|
|
46
119
|
}
|
|
47
120
|
}
|
|
48
121
|
function patchStyleByPath(targetPath, styleKind, updates) {
|
|
49
|
-
|
|
50
|
-
if (!element)
|
|
122
|
+
if (typeof document === "undefined" || !targetPath)
|
|
51
123
|
return false;
|
|
52
|
-
|
|
53
|
-
|
|
124
|
+
let matched = false;
|
|
125
|
+
for (const selector of (0, markers_1.buildStyleFallbackSelectors)(targetPath, styleKind)) {
|
|
126
|
+
const elements = document.querySelectorAll(selector);
|
|
127
|
+
if (elements.length > 0) {
|
|
128
|
+
elements.forEach((el) => patchElementStyle(el, styleKind, updates));
|
|
129
|
+
matched = true;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
return matched;
|
|
54
133
|
}
|
package/dist/types/markers.js
CHANGED
|
@@ -27,5 +27,14 @@ function buildStyleFallbackSelectors(targetPath, styleType) {
|
|
|
27
27
|
const itemPath = targetPath.slice(0, -'.card'.length);
|
|
28
28
|
selectors.push(`[${exports.PREVIEW_ITEM_ATTRIBUTE}="${escapeAttributeValue(itemPath)}"]`);
|
|
29
29
|
}
|
|
30
|
+
if (targetPath.includes(':')) {
|
|
31
|
+
const [listPrefix, subPart] = targetPath.split(':');
|
|
32
|
+
if (subPart === 'card') {
|
|
33
|
+
selectors.push(`[${exports.PREVIEW_LIST_ATTRIBUTE}="${escapeAttributeValue(listPrefix)}"] [${exports.PREVIEW_ITEM_ATTRIBUTE}]`, `[${exports.PREVIEW_LIST_ATTRIBUTE}="${escapeAttributeValue(listPrefix)}"] .card`, `[${exports.PREVIEW_LIST_ATTRIBUTE}="${escapeAttributeValue(listPrefix)}"] article`);
|
|
34
|
+
}
|
|
35
|
+
else if (subPart) {
|
|
36
|
+
selectors.push(`[${exports.PREVIEW_LIST_ATTRIBUTE}="${escapeAttributeValue(listPrefix)}"] [${exports.PREVIEW_FIELD_ATTRIBUTE}$=".${escapeAttributeValue(subPart)}"]`);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
30
39
|
return selectors;
|
|
31
40
|
}
|
package/package.json
CHANGED