custom css attribute

src/attributes/Custom.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace markhuot\keystone\attributes;
+
+use Illuminate\Support\Collection;
+use markhuot\keystone\base\Attribute;
+
+class Custom extends Attribute
+{
+    public function __construct(
+        protected ?string $value = ''
+    ) {
+    }
+
+    public function getInputHtml(): string
+    {
+        return \Craft::$app->getView()->renderTemplate('keystone/attributes/custom', [
+            'name' => get_class($this),
+            'value' => $this->value,
+        ]);
+    }
+
+    public function toAttributeArray(): array
+    {
+        $className = \Craft::$app->getView()->registerCssRule($this->value);
+
+        return ['class' => $className];
+    }
+}

src/attributes/SpaceBetween.php

@@ -28,7 +28,7 @@ public function toAttributeArray(): array
                 'x' => ['margin-left' => $value],
                 'y' => ['margin-top' => $value],
             })
-            ->map(fn ($value, $key) => \Craft::$app->getView()->registerCssRule($value, $key, '& > * + *'));
+            ->map(fn ($value, $key) => \Craft::$app->getView()->registerCssDeclaration($value, $key, '& > * + *'));
 
         return array_filter(['class' => $classNames->join(' ')]);
     }

src/base/Attribute.php

@@ -11,7 +11,7 @@ abstract public function getInputHtml(): string;
     public function toAttributeArray(): array
     {
         $classNames = $this->getCssRules()
-            ->map(\Craft::$app->getView()->registerCssRule(...));
+            ->map(\Craft::$app->getView()->registerCssDeclaration(...));
 
         return ['class' => $classNames->join(' ')];
     }

src/base/CssRuleBag.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace markhuot\keystone\base;
+
+use yii\helpers\Html;
+
+class CssRuleBag
+{
+    protected array $rules = [];
+
+    public function addDeclaration($value, $key, $selector = null)
+    {
+        return $this->addRule($key.':'.$value, $selector);
+    }
+
+    public function addRule(string $rule, ?string $selector = null)
+    {
+        $hash = hash('sha1', $rule.$selector);
+
+        if (isset($this->rules[$hash])) {
+            return 'c'.array_search($hash, array_keys($this->rules));
+        }
+        else {
+            $this->rules[$hash] = [
+                'rule' => $rule,
+                'selector' => $selector,
+            ];
+
+            return 'c'.(count($this->rules) - 1);
+        }
+    }
+
+    public function getRules()
+    {
+        return $this->rules;
+    }
+
+    public function __toString()
+    {
+        return Html::style(collect($this->rules)
+            ->values()
+            ->map(function ($rule, $index) {
+                $class = ".c{$index}";
+                $selector = $rule['selector'] ?? '&';
+                $selector = str_replace('&', $class, $selector);
+
+                return "{$selector}{{$rule['rule']}}";
+            })
+            ->join("\n"));
+    }
+}

src/behaviors/CssRuleBehavior.php

@@ -3,6 +3,7 @@
 namespace markhuot\keystone\behaviors;
 
 use craft\web\View;
+use markhuot\keystone\base\CssRuleBag;
 use yii\base\Behavior;
 use yii\helpers\Html;
 
@@ -11,49 +12,18 @@
  */
 class CssRuleBehavior extends Behavior
 {
-    public function registerCssRule(string $value, string $key, string $selector = null)
+    public function registerCssRule(string $rule, string $selector = null)
     {
-        $this->owner->css['__cssRules'] ??= new class
-        {
-            protected array $rules = [];
+        $this->owner->css['__cssRules'] ??= new CssRuleBag;
 
-            public function addRule($value, $key, $selector = null)
-            {
-                $hash = hash('sha1', $value.$key.$selector);
-                if (isset($this->rules[$hash])) {
-                    return 'c'.array_search($hash, array_keys($this->rules));
-                } else {
-                    $this->rules[$hash] = [
-                        'property' => $key,
-                        'value' => $value,
-                        'selector' => $selector,
-                    ];
-
-                    return 'c'.(count($this->rules) - 1);
-                }
-            }
-
-            public function getRules()
-            {
-                return $this->rules;
-            }
-
-            public function __toString()
-            {
-                return Html::style(collect($this->rules)
-                    ->values()
-                    ->map(function ($rule, $index) {
-                        $class = ".c{$index}";
-                        $selector = $rule['selector'] ?? '&';
-                        $selector = str_replace('&', $class, $selector);
+        return $this->owner->css['__cssRules']->addRule($rule, $selector);
+    }
 
-                        return "{$selector}{{$rule['property']}:{$rule['value']}}";
-                    })
-                    ->join("\n"));
-            }
-        };
+    public function registerCssDeclaration(string $value, string $key, string $selector = null)
+    {
+        $this->owner->css['__cssRules'] ??= new CssRuleBag;
 
-        return $this->owner->css['__cssRules']->addRule($value, $key, $selector);
+        return $this->owner->css['__cssRules']->addDeclaration($value, $key, $selector);
     }
 
     public function clearCssRules()
@@ -65,6 +35,8 @@ public function clearCssRules()
 
     public function getCssRules()
     {
-        return $this->owner->css['__cssRules']?->getRules() ?? null;
+        $this->owner->css['__cssRules'] ??= new CssRuleBag;
+
+        return $this->owner->css['__cssRules']->getRules() ?? null;
     }
 }

src/listeners/RegisterDefaultAttributeTypes.php

@@ -11,6 +11,7 @@ public function handle(RegisterAttributeType $event): void
         $event->add(\markhuot\keystone\attributes\Alignment::class);
         $event->add(\markhuot\keystone\attributes\Background::class);
         $event->add(\markhuot\keystone\attributes\Border::class);
+        $event->add(\markhuot\keystone\attributes\Custom::class);
         $event->add(\markhuot\keystone\attributes\Display::class);
         $event->add(\markhuot\keystone\attributes\Grid::class);
         $event->add(\markhuot\keystone\attributes\Margin::class);

src/resources/keystone.min.css

@@ -574,6 +574,11 @@ video {
   margin: 0px !important;
 }
 
+.k-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .k-ml-\[2rem\] {
   margin-left: 2rem;
 }
@@ -582,6 +587,18 @@ video {
   margin-right: 0.5rem;
 }
 
+.\!k-mt-0 {
+  margin-top: 0px !important;
+}
+
+.k-mt-6 {
+  margin-top: 1.5rem;
+}
+
+.k-mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .k-block {
   display: block;
 }
@@ -626,6 +643,10 @@ video {
   width: 100%;
 }
 
+.k-w-auto {
+  width: auto;
+}
+
 .k-flex-grow {
   flex-grow: 1;
 }
@@ -635,6 +656,12 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.k-select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
 .k-grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -643,6 +670,14 @@ video {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+.k-items-end {
+  align-items: flex-end;
+}
+
+.k-justify-center {
+  justify-content: center;
+}
+
 .k-justify-between {
   justify-content: space-between;
 }
@@ -884,30 +919,6 @@ video {
   opacity: 0.25;
 }
 
-.\[\&\:has\(li\)\]\:k-block:has(li) {
-  display: block;
-}
-
-.\[\&\:has\(li\:not\(\.disabled\)\)\]\:k-block:has(li:not(.disabled)) {
-  display: block;
-}
-
-.\[\&\:has\(li\:not\(\.k-hidden\)\)\]\:k-block:has(li:not(.k-hidden)) {
-  display: block;
-}
-
-.\[\&\:has\(ul\)\]\:k-block:has(ul) {
-  display: block;
-}
-
-.\[\&\:has\(ul\>li\:not\(\.k-hidden\)\)\]\:k-block:has(ul>li:not(.k-hidden)) {
-  display: block;
-}
-
 .\[\&\:has\(ul_li\:not\(\.k-hidden\)\)\]\:k-block:has(ul li:not(.k-hidden)) {
   display: block;
 }
-
-.\[\&\:has\(ul_ul\>li\:not\(\.k-hidden\)\)\]\:k-block:has(ul ul>li:not(.k-hidden)) {
-  display: block;
-}

src/templates/attributes/custom.twig

@@ -0,0 +1,7 @@
+{% from '_includes/forms' import textareaField %}
+
+{{ textareaField({
+    'label': 'Custom CSS',
+    'name': name,
+    'value': value|default,
+}) }}

src/templates/attributes/grid.twig

@@ -1,9 +1,17 @@
 {% from '_includes/forms' import textField %}
 
-{{ textField({
-    'label': 'Columns',
-    'name': name ~ '[grid-template-columns]',
-    'type': 'number',
-    'value': value['grid-template-columns']|default,
-    'fieldClass': '!k-m-0',
-}) }}
+<div class="k-space-y-6">
+    {{ textField({
+        'label': 'Columns',
+        'name': name ~ '[grid-template-columns]',
+        'type': 'number',
+        'value': value['grid-template-columns']|default,
+    }) }}
+
+    {{ textField({
+        'label': 'Gap',
+        'name': name ~ '[grid-gap]',
+        'type': 'text',
+        'value': value['grid-gap']|default,
+    }) }}
+</div>

src/templates/attributes/text.twig

@@ -23,15 +23,15 @@
                 name: name ~ '[font-weight]',
                 options: [
                     {label: 'Default', value: ''},
-                    {label: '100', value: '100'},
-                    {label: '200', value: '200'},
-                    {label: '300', value: '300'},
-                    {label: '400', value: '400'},
-                    {label: '500', value: '500'},
-                    {label: '600', value: '600'},
-                    {label: '700', value: '700'},
-                    {label: '800', value: '800'},
-                    {label: '900', value: '900'},
+                    {label: '100 Thin', value: '100'},
+                    {label: '200 Extra light', value: '200'},
+                    {label: '300 Light', value: '300'},
+                    {label: '400 Normal', value: '400'},
+                    {label: '500 Medium', value: '500'},
+                    {label: '600 Semi bold', value: '600'},
+                    {label: '700 Bold', value: '700'},
+                    {label: '800 Extra bold', value: '800'},
+                    {label: '900 Black', value: '900'},
                 ],
                 value: value['font-weight']|default('400')
             }) }}

src/templates/components/heading.twig

@@ -7,8 +7,8 @@
 {% export category = "Text" %}
 {% export icon %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M150,56V176a6,6,0,0,1-12,0V122H46v54a6,6,0,0,1-12,0V56a6,6,0,0,1,12,0v54h92V56a6,6,0,0,1,12,0Zm90,146H204L240,154.05A30,30,0,1,0,187.71,126,6,6,0,1,0,199,130a18,18,0,0,1,14.47-11.82,18,18,0,0,1,16.87,28.66L187.2,204.4A6,6,0,0,0,192,214h48a6,6,0,0,0,0-12Z"></path></svg>{% endexport %}
 {% set level = props.level.value|default(1) %}
-{% set fontSize = craft.app.getView().registerCssRule((32 - (level-1)*4) ~ 'px', 'font-size') %}
-{% set fontWeight = craft.app.getView().registerCssRule('bold', 'font-weight') %}
+{% set fontSize = craft.app.getView().registerCssDeclaration((32 - (level-1)*4) ~ 'px', 'font-size') %}
+{% set fontWeight = craft.app.getView().registerCssDeclaration('bold', 'font-weight') %}
 <h{{ level }} {{ attributes.merge({class: [fontSize, fontWeight]|join(' ')}) }}>
     {% slot %}{% endslot %}
 </h{{ level }}>

src/templates/edit/design.twig

@@ -1,4 +1,5 @@
 {% from '_includes/forms' import field as selectizeField %}
+
 {% macro hiddenInputs(name, value) %}
     {% if value|is_iterable %}
         {% for k,v in value %}
@@ -8,8 +9,25 @@
         {{ hiddenInput(name, value) }}
     {% endif %}
 {% endmacro %}
+
 {% set attributeTypes = create('markhuot\\keystone\\actions\\GetAttributeTypes').handle() %}
+
 <div id="tab-design" class="{{ component.getType().getFieldDefinitions().isNotEmpty() ? 'hidden' }} k-pt-xl k-field-reset" x-data='{}' @input.debounce.1000ms='post("keystone/components/update").then(() => Craft.Preview.instances[0] && Craft.Preview.instances[0].updateIframe())'>
+    <div class="k-mb-6">
+        <p>Update the component design under various states.</p>
+        <div class="btngroup">
+            <label class="btn [&:has(:checked)]:k-bg-ui-control-active" tabindex="0">
+                <input type="radio" name="design-pseudo" value="" checked class="k-hidden">
+                default
+            </label>
+            <label class="btn [&:has(:checked)]:k-bg-ui-control-active" tabindex="0">
+                <input type="radio" name="design-pseudo" value="start" class="k-hidden">
+                hover
+            </label>
+        </div>
+    </div>
+    <hr>
+
     {% namespace 'fields[_attributes]' %}
         {% for type, value in component.data._attributes %}
             <div class="k-relative">

src/templates/select.twig

@@ -10,7 +10,7 @@
             document.querySelector('li:not(.k-hidden) input[type=radio][name^={{ craft.app.getView().getNamespace }}]').checked = true;
         ">
     </div>
-    <ul class="k-space-y-8">
+    <ul class="k-space-y-8 k-select-none">
         {% for category, types in groups %}
             <li class="k-hidden [&:has(ul_li:not(.k-hidden))]:k-block">
                 <p class="k-font-bold k-text-gray-400">{{ category }}</p>