Improved HTML attribute handling

docs/views.md

@@ -33,6 +33,16 @@ e::form(
 );
 ```
 
+In some situations it may be convenient to conditionally concatenate a list of
+strings to form an attribute value, e.g. on the `class` attribute. For this
+reason, attributes with array values are interpretted in a special way. Array
+elements with a numeric index are concatenated unconditionally, whereas string
+indices are concatenated if their associated value is truthy.
+
+```php
+e::input(type: 'text', class: ['p-4 rounded-lg border-1', 'border-slate-300' => !$error, 'border-slate-500' => $error]);
+```
+
 Underscores in attribute names are automatically converted to hyphens. In some
 cases, more complex attribute names are needed. For example, you may be using
 a front end library that understands attributes in the form of `:bind` and `@click`.

src/View/Element.php

@@ -215,7 +215,28 @@ public function __toString(): string
         // Render attributes
         foreach ($this->attributes as $name => $value) {
             $name = strtolower(str_replace('_', '-', $name));
-            $str .= sprintf(' %s="%s"', $name, htmlspecialchars($value));
+
+            if (is_array($value)) {
+                $values = [];
+
+                foreach ($value as $k => $v) {
+                    if (is_string($k)) {
+                        if (boolval($v)) {
+                            $values[] = $k;
+                        }
+                    } else {
+                        $values[] = $v;
+                    }
+                }
+
+                $value = implode(' ', $values);
+            }
+
+            if (is_bool($value)) {
+                $str .= ' ' . $name;
+            } else {
+                $str .= sprintf(' %s="%s"', $name, htmlspecialchars($value));
+            }
         }
 
         if ($this->isVoid) {

tests/unit/View/ElementTest.php

@@ -36,6 +36,20 @@ public function testAttributeCase()
         $this->assertEquals('<div x-show="open"></div>', (string) $el);
     }
 
+    public function testAttributeBoolean()
+    {
+        $el = new Element('button', false, disabled: true);
+
+        $this->assertEquals('<button disabled></button>', (string) $el);
+    }
+
+    public function testAttributeArray()
+    {
+        $el = new Element('div', false, class: ['p-4 border-1', 'border-slate-300' => false, 'border-red-500' => true]);
+
+        $this->assertEquals('<div class="p-4 border-1 border-red-500"></div>', (string) $el);
+    }
+
     public function testInnerText()
     {
         $el = new Element('p', false, 'Hello, world!<br/>');