border styles

markhuot · Oct 25, 2023 · 9428fc0 · 9428fc0
1 parent 6c691f4
commit 9428fc0
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 25 deletions.
diff --git a/src/actions/MapExpandedAttributeValue.php b/src/actions/MapExpandedAttributeValue.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace markhuot\keystone\actions;
+
+class MapExpandedAttributeValue
+{
+    public function handle(?array $value, string $property, ?string $expandedProperty=null)
+    {
+        if ($expandedProperty === null) {
+            $expandedProperty = "{$property}-&";
+        }
+
+        if ($value['useExpanded'] ?? false) {
+            return collect($value['expanded'])
+                ->mapWithKeys(fn ($value, $key) => [str_replace('&', $key, $expandedProperty) => $value])
+                ->filter();
+        }
+        else {
+            return collect([$property => $value['shorthand']])
+                ->filter();
+        }
+    }
+}
diff --git a/src/attributes/Border.php b/src/attributes/Border.php
@@ -3,6 +3,7 @@
 namespace markhuot\keystone\attributes;
 
 use Illuminate\Support\Collection;
+use markhuot\keystone\actions\MapExpandedAttributeValue;
 use markhuot\keystone\base\Attribute;
 
 class Border extends Attribute
@@ -16,16 +17,17 @@ public function getInputHtml(): string
     {
         return \Craft::$app->getView()->renderTemplate('keystone/styles/border', [
             'label' => 'Border Radius',
-            'name' => get_class($this).'[borderRadius]',
-            'value' => $this->value['borderRadius'] ?? null,
+            'name' => get_class($this),
+            'value' => $this->value ?? null,
         ]);
     }
 
     public function getCssRules(): Collection
     {
         return collect($this->value)
             ->mapWithKeys(fn ($value, $key) => match ($key) {
-                'borderRadius' => ['border-radius' => $value],
+                'width' => (new MapExpandedAttributeValue)->handle($value, 'border-width', 'border-&-width'),
+                default => ['border-' . $key => $value],
             });
     }
 }
diff --git a/src/attributes/Margin.php b/src/attributes/Margin.php
@@ -3,6 +3,7 @@
 namespace markhuot\keystone\attributes;
 
 use Illuminate\Support\Collection;
+use markhuot\keystone\actions\MapExpandedAttributeValue;
 use markhuot\keystone\base\Attribute;
 
 class Margin extends Attribute
@@ -23,13 +24,6 @@ public function getInputHtml(): string
 
     public function getCssRules(): Collection
     {
-        if ($this->value['useExpanded'] ?? false) {
-            return collect($this->value['expanded'])
-                ->mapWithKeys(fn ($value, $key) => ['margin-'.$key => $value])
-                ->filter();
-        } else {
-            return collect(['margin' => $this->value['shorthand']])
-                ->filter();
-        }
+        return (new MapExpandedAttributeValue)->handle($this->value, 'margin');
     }
 }
diff --git a/src/attributes/Padding.php b/src/attributes/Padding.php
@@ -3,6 +3,7 @@
 namespace markhuot\keystone\attributes;
 
 use Illuminate\Support\Collection;
+use markhuot\keystone\actions\MapExpandedAttributeValue;
 use markhuot\keystone\base\Attribute;
 
 class Padding extends Attribute
@@ -23,13 +24,6 @@ public function getInputHtml(): string
 
     public function getCssRules(): Collection
     {
-        if ($this->value['useExpanded'] ?? false) {
-            return collect($this->value['expanded'])
-                ->mapWithKeys(fn ($value, $key) => ['padding-'.$key => $value])
-                ->filter();
-        } else {
-            return collect(['padding' => $this->value['shorthand']])
-                ->filter();
-        }
+        return (new MapExpandedAttributeValue)->handle($this->value, 'padding');
     }
 }
diff --git a/src/templates/styles/border.twig b/src/templates/styles/border.twig
@@ -1,6 +1,37 @@
-{% from '_includes/forms' import field as renderField, textField %}
-{{ textField({
-    'label': 'Border Radius',
-    'name': name,
-    'value': value,
-}) }}
+{% from '_includes/forms' import textField, colorField, selectField %}
+
+<div class="k-space-y-6">
+    {{ textField({
+        'label': 'Border Radius',
+        'name': name ~ '[radius]',
+        'value': value.radius|default,
+    }) }}
+
+    <div class="k-grid k-grid-cols-3 k-gap-6">
+        {% include "keystone/styles/margin" with {
+            label: 'Width',
+            name: name ~ '[width]',
+            value: value.width|default
+        } %}
+
+        {{ selectField({
+            'label': 'Style',
+            'name': name ~ '[style]',
+            'options': [
+                {label: 'Solid', value: 'solid'},
+                {label: 'Dashed', value: 'dashed'},
+                {label: 'Dotted', value: 'dotted'},
+                {label: 'Double', value: 'double'},
+                {label: 'Hidden', value: 'hidden'},
+                {label: 'None', value: 'none'},
+            ],
+            value: value.style|default
+        }) }}
+
+        {{ colorField({
+            label: 'Color',
+            name: name ~ '[color]',
+            value: value.color|default,
+        }) }}
+    </div>
+</div>
diff --git a/tests/attributes/BorderAttributeTest.php b/tests/attributes/BorderAttributeTest.php
@@ -0,0 +1,25 @@
+<?php
+
+use markhuot\keystone\attributes\Border;
+
+it('renders borders', function () {
+    $border = new Border();
+
+    expect($border->getCssRules())->not->toHaveKey('border');
+});
+
+it('renders border width shorthand', function () {
+    $border = new Border(['width' => ['shorthand' => '10px']]);
+
+    expect($border->getCssRules())->get('border-width')->toBe('10px');
+});
+
+it('renders expanded borders', function () {
+    $border = new Border(['width' => ['useExpanded' => '1', 'expanded' => ['top' => '10px', 'left' => '']]]);
+
+    expect($border->getCssRules())
+        ->get('border-top-width')->toBe('10px')
+        ->has('border-right-width')->toBeFalse()
+        ->has('border-bottom-width')->toBeFalse()
+        ->has('border-left-width')->toBeFalse();
+});