@node-projects/web-component-designer 0.1.37 → 0.1.39
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/elements/item/DesignItem.js +34 -12
- package/dist/elements/services/htmlWriterService/AbstractHtmlWriterService.js +4 -1
- package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.js +2 -0
- package/dist/elements/services/propertiesService/services/CssCustomPropertiesService.js +2 -0
- package/package.json +1 -1
|
@@ -114,11 +114,15 @@ export class DesignItem {
|
|
|
114
114
|
return this._styles.size > 0;
|
|
115
115
|
}
|
|
116
116
|
hasStyle(name) {
|
|
117
|
-
let nm =
|
|
117
|
+
let nm = name;
|
|
118
|
+
if (!nm.startsWith('--'))
|
|
119
|
+
nm = PropertiesHelper.camelToDashCase(name);
|
|
118
120
|
return this._styles.has(nm);
|
|
119
121
|
}
|
|
120
122
|
getStyle(name) {
|
|
121
|
-
let nm =
|
|
123
|
+
let nm = name;
|
|
124
|
+
if (!nm.startsWith('--'))
|
|
125
|
+
nm = PropertiesHelper.camelToDashCase(name);
|
|
122
126
|
return this._styles.get(nm);
|
|
123
127
|
}
|
|
124
128
|
*styles() {
|
|
@@ -127,11 +131,15 @@ export class DesignItem {
|
|
|
127
131
|
}
|
|
128
132
|
}
|
|
129
133
|
_withoutUndoSetStyle(name, value) {
|
|
130
|
-
let nm =
|
|
134
|
+
let nm = name;
|
|
135
|
+
if (!nm.startsWith('--'))
|
|
136
|
+
nm = PropertiesHelper.camelToDashCase(name);
|
|
131
137
|
this._styles.set(nm, value);
|
|
132
138
|
}
|
|
133
139
|
_withoutUndoRemoveStyle(name) {
|
|
134
|
-
let nm =
|
|
140
|
+
let nm = name;
|
|
141
|
+
if (!nm.startsWith('--'))
|
|
142
|
+
nm = PropertiesHelper.camelToDashCase(name);
|
|
135
143
|
this._styles.delete(nm);
|
|
136
144
|
}
|
|
137
145
|
static _designItemMap = new WeakMap();
|
|
@@ -375,19 +383,25 @@ export class DesignItem {
|
|
|
375
383
|
return designItem;
|
|
376
384
|
}
|
|
377
385
|
setStyle(name, value, important) {
|
|
378
|
-
let nm =
|
|
386
|
+
let nm = name;
|
|
387
|
+
if (!nm.startsWith('--'))
|
|
388
|
+
nm = PropertiesHelper.camelToDashCase(name);
|
|
379
389
|
if (this.isRootItem)
|
|
380
390
|
throw 'not allowed to set style on root item';
|
|
381
391
|
const action = new CssStyleChangeAction(this, nm, value, this._styles.get(nm));
|
|
382
392
|
this.instanceServiceContainer.undoService.execute(action);
|
|
383
393
|
}
|
|
384
394
|
removeStyle(name) {
|
|
385
|
-
let nm =
|
|
395
|
+
let nm = name;
|
|
396
|
+
if (!nm.startsWith('--'))
|
|
397
|
+
nm = PropertiesHelper.camelToDashCase(name);
|
|
386
398
|
const action = new CssStyleChangeAction(this, nm, '', this._styles.get(nm));
|
|
387
399
|
this.instanceServiceContainer.undoService.execute(action);
|
|
388
400
|
}
|
|
389
401
|
updateStyleInSheetOrLocal(name, value, important, forceSet) {
|
|
390
|
-
let nm =
|
|
402
|
+
let nm = name;
|
|
403
|
+
if (!nm.startsWith('--'))
|
|
404
|
+
nm = PropertiesHelper.camelToDashCase(name);
|
|
391
405
|
// Pre-sorted by specificity
|
|
392
406
|
let declarations = this.instanceServiceContainer.stylesheetService?.getDeclarations(this, nm);
|
|
393
407
|
if (this.hasStyle(name) || this.instanceServiceContainer.designContext.extensionOptions[enableStylesheetService] === false || !declarations?.length) {
|
|
@@ -404,7 +418,9 @@ export class DesignItem {
|
|
|
404
418
|
}
|
|
405
419
|
}
|
|
406
420
|
getStyleFromSheetOrLocal(name, fallback = null) {
|
|
407
|
-
let nm =
|
|
421
|
+
let nm = name;
|
|
422
|
+
if (!nm.startsWith('--'))
|
|
423
|
+
nm = PropertiesHelper.camelToDashCase(name);
|
|
408
424
|
if (this.hasStyle(name))
|
|
409
425
|
// Get style locally
|
|
410
426
|
return this.getStyle(nm);
|
|
@@ -415,16 +431,22 @@ export class DesignItem {
|
|
|
415
431
|
return null;
|
|
416
432
|
}
|
|
417
433
|
getStyleFromSheetOrLocalOrComputed(name, fallback = null) {
|
|
418
|
-
let
|
|
434
|
+
let nm = name;
|
|
435
|
+
if (!nm.startsWith('--'))
|
|
436
|
+
nm = PropertiesHelper.camelToDashCase(name);
|
|
437
|
+
let value = this.getStyleFromSheetOrLocal(nm);
|
|
419
438
|
if (!value) {
|
|
420
|
-
value = getComputedStyle(this.element).getPropertyValue(
|
|
439
|
+
value = getComputedStyle(this.element).getPropertyValue(nm);
|
|
421
440
|
}
|
|
422
441
|
return value ?? fallback;
|
|
423
442
|
}
|
|
424
443
|
getComputedStyle(name, fallback = null) {
|
|
425
|
-
let
|
|
444
|
+
let nm = name;
|
|
445
|
+
if (!nm.startsWith('--'))
|
|
446
|
+
nm = PropertiesHelper.camelToDashCase(name);
|
|
447
|
+
let value = this.getStyleFromSheetOrLocal(nm);
|
|
426
448
|
if (!value) {
|
|
427
|
-
value = getComputedStyle(this.element).getPropertyValue(
|
|
449
|
+
value = getComputedStyle(this.element).getPropertyValue(nm);
|
|
428
450
|
}
|
|
429
451
|
return value ?? fallback;
|
|
430
452
|
}
|
|
@@ -62,7 +62,10 @@ export class AbstractHtmlWriterService {
|
|
|
62
62
|
styles = CssCombiner.combine(new Map(styles));
|
|
63
63
|
for (const s of styles) {
|
|
64
64
|
if (s[0]) {
|
|
65
|
-
|
|
65
|
+
if (s[0].startsWith('--'))
|
|
66
|
+
indentedTextWriter.write(s[0] + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
|
|
67
|
+
else
|
|
68
|
+
indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
|
|
66
69
|
}
|
|
67
70
|
}
|
|
68
71
|
indentedTextWriter.write('"');
|
|
@@ -92,6 +92,8 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
|
|
|
92
92
|
return super.isSet(designItems, property);
|
|
93
93
|
}
|
|
94
94
|
getPropertyTarget(designItem, property) {
|
|
95
|
+
if (property.name.startsWith('--'))
|
|
96
|
+
return BindingTarget.cssvar;
|
|
95
97
|
return BindingTarget.css;
|
|
96
98
|
}
|
|
97
99
|
}
|
|
@@ -42,6 +42,8 @@ export class CssCustomPropertiesService extends CommonPropertiesService {
|
|
|
42
42
|
return null;
|
|
43
43
|
}
|
|
44
44
|
isSet(designItems, property) {
|
|
45
|
+
if (super.isSet(designItems, property) == ValueType.bound)
|
|
46
|
+
return ValueType.bound;
|
|
45
47
|
return designItems[0].hasStyle(property.name) ? ValueType.all : ValueType.none;
|
|
46
48
|
}
|
|
47
49
|
getPropertyTarget(designItem, property) {
|