Pass unit to css property setter

unyt-org · Jan 10, 2025 · 430aa88 · 430aa88
1 parent 6ea5012
commit 430aa88
Showing 1 changed file with 13 additions and 8 deletions.
diff --git a/datex-bindings/dom-utils.ts b/datex-bindings/dom-utils.ts
@@ -842,7 +842,7 @@ export class DOMUtils {
      * Set css property of an element, updates reactively if pointer
      * If weakBinding is true, the binding is not preserved when transferring the element to another context
      */
-    setCSSProperty<T extends HTMLElement>(element:T, property:string, value:Datex.RefOrValue<string|number|undefined|boolean>, weakBinding = false):T{
+    setCSSProperty<T extends HTMLElement>(element:T, property:string, value:Datex.RefOrValue<string|number|undefined|boolean>, weakBinding = false, unit?: string):T{
         // convert camelCase to kebab-case
         property = property?.replace(/[A-Z]/g, x => `-${x.toLowerCase()}`);
         // none
@@ -883,9 +883,9 @@ export class DOMUtils {
                         // TODO: handle this case if trying to set global css variable on document (for reactive css)
                         return;
                     }
-                    if (element.style.setProperty) element.style.setProperty(property, this.getCSSProperty(<string>v))
+                    if (element.style.setProperty) element.style.setProperty(property, this.getCSSProperty(<string>v, undefined, unit));
                     // @ts-ignore style property access
-                    else element.style[property] = this.getCSSProperty(v);
+                    else element.style[property] = this.getCSSProperty(v, undefined, unit);
                 }
             }, undefined, undefined);
         }
@@ -919,29 +919,34 @@ export class DOMUtils {
     };
 
     // convert DatexCompatValue to css property
-    getCSSProperty(value:Datex.RefOrValue<number|string>, use_css_variables = true):string {
+    getCSSProperty(value:Datex.RefOrValue<number|string>, use_css_variables = true, unit?: string):string {
         // UIX color value
         if (use_css_variables && value instanceof Datex.PointerProperty && value.pointer.val == Theme.colors) {
             value = `var(--${value.key})`; // autmatically updated css variable
         }
 
-        // number value to px
-        if (typeof value == "number") return value.toString() + "px";
+        // number value to unit (default px)
+        if (typeof value == "number") return value.toString() + (unit||"px");
 
-        else if (use_css_variables) return value?.toString() ?? '';
+        else if (use_css_variables) return this.escapeCSSValue(value) ?? '';
         // try to collapse value
         else if (value!=undefined) {
             // css variable
             if (value.toString().startsWith('var(--')) return this.context.getComputedStyle(this.document.documentElement).getPropertyValue(value?.toString().replace('var(','').replace(')','')).trim();
             // css color name
             else if (!value.toString().startsWith("#")) return color_names[<keyof typeof color_names>value.toString().toLowerCase()] ?? ''
             // normal string value
-            else return value.toString()
+            else return this.escapeCSSValue(value);
         }
         else return '';
     }
 
 
+    escapeCSSValue(value: any) {
+        return value?.toString().replaceAll(/[;{}()]/g, '');
+    }
+
+
     valuesToDOMElement(...values:any[]): Node|DocumentFragment {
 
         if (values.length == 1) {