@rettangoli/ui 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/components/globalUi/globalUi.view.yaml

@@ -29,11 +29,11 @@ template:
           - rtgl-form#formDialog slot=content :form=formDialogConfig.form :defaultValues=formDialogConfig.defaultValues :context=formDialogConfig.context ?disabled=${formDialogConfig.disabled} key=form-dialog-${formDialogConfig.key}: null
       - $if !isFormDialogOpen:
           - rtgl-view slot=content g=lg p=lg:
-              - rtgl-view d=h g=md:
-                  - rtgl-view d=h ah=c av=c g=md:
-                      - rtgl-view g=md: null
-                      - rtgl-view h=24 av=c:
-                          - rtgl-text s=lg: ${config.title}
+              - rtgl-view g=sm w=f:
+                  - $if config.title:
+                      - rtgl-text s=lg: ${config.title}
+                      - rtgl-text c=mu-fg: ${config.message}
+                    $else:
                       - rtgl-text: ${config.message}
               - rtgl-view d=h g=md mt=lg w=f ah=e:
                   - $if config.mode == 'confirm':

package/src/primitives/view.js

@@ -19,6 +19,15 @@ import stylesGenerator from "../styles/viewStyles.js";
 import marginStyles from "../styles/marginStyles.js";
 import anchorStyles from "../styles/anchorStyles.js";
 
+const normalizeRawCssValue = (value) => {
+  if (value === undefined || value === null) {
+    return null;
+  }
+
+  const normalizedValue = `${value}`.trim();
+  return normalizedValue.length > 0 ? normalizedValue : null;
+};
+
 // Internal implementation without uhtml
 class RettangoliViewElement extends HTMLElement {
   static styleSheet = null;
@@ -80,6 +89,10 @@ class RettangoliViewElement extends HTMLElement {
         "w",
         "h",
         "ar",
+        "bgi",
+        "bgs",
+        "bgp",
+        "bgr",
         "hide",
         "show",
         "sh",
@@ -141,6 +154,18 @@ class RettangoliViewElement extends HTMLElement {
       const aspectRatio = normalizeAspectRatio(
         this.getAttribute(addSizePrefix("ar")),
       );
+      const backgroundImage = normalizeRawCssValue(
+        this.getAttribute(addSizePrefix("bgi")),
+      );
+      const backgroundSize = normalizeRawCssValue(
+        this.getAttribute(addSizePrefix("bgs")),
+      );
+      const backgroundPosition = normalizeRawCssValue(
+        this.getAttribute(addSizePrefix("bgp")),
+      );
+      const backgroundRepeat = normalizeRawCssValue(
+        this.getAttribute(addSizePrefix("bgr")),
+      );
 
       if (zIndex !== null) {
         this._styles[size]["z-index"] = zIndex;
@@ -154,6 +179,22 @@ class RettangoliViewElement extends HTMLElement {
         this._styles[size]["aspect-ratio"] = aspectRatio;
       }
 
+      if (backgroundImage !== null) {
+        this._styles[size]["background-image"] = backgroundImage;
+      }
+
+      if (backgroundSize !== null) {
+        this._styles[size]["background-size"] = backgroundSize;
+      }
+
+      if (backgroundPosition !== null) {
+        this._styles[size]["background-position"] = backgroundPosition;
+      }
+
+      if (backgroundRepeat !== null) {
+        this._styles[size]["background-repeat"] = backgroundRepeat;
+      }
+
       applyDimensionToStyleBucket({
         styleBucket: this._styles[size],
         axis: "width",