Merge pull request #11 from Fohn-Group/input-refactor

Input refactor
Fohn-Group · May 31, 2023 · 4f8d8cb · 4f8d8cb
2 parents e5d5889 + ce5fb82
commit 4f8d8cb
Show file tree

Hide file tree

Showing 21 changed files with 341 additions and 196 deletions.
diff --git a/.php-cs-fixer.dist.php b/.php-cs-fixer.dist.php
@@ -52,6 +52,7 @@
                    'php_unit_test_case_static_method_calls' => [
                        'call_type' => 'this',
                    ],
+                   'php_unit_strict' => false,
                    'php_unit_test_class_requires_covers' => false,
                    'phpdoc_add_missing_param_annotation' => false,
                    'return_assignment' => false,

diff --git a/app-test/form/template/custom-input.html b/app-test/form/template/custom-input.html
@@ -1,14 +1,8 @@
 <div id="{$idAttr}" {$attributes} >
     <fohn-control
-            :ctrl-name="{$name}"
             :caption="{$caption}"
-            :type="{$type}"
-            :placeholder="'input'"
-            :ctrl-value="{$value}"
+            :html-input-attrs="{$inputAttrs}"
             :hint="{$hint}"
-            :is-required="{$isRequired}"
-            :is-read-only="{$isReadOnly}"
-            :is-disabled="{$isDisabled}"
             :on-changes="{$onChanges}"
             :form-store-id="{$formStoreId}"
             class="{_tw}{/}"

diff --git a/src/Component/Form/Control.php b/src/Component/Form/Control.php
@@ -23,11 +23,7 @@ abstract class Control extends View implements VueInterface
 
     /** @var mixed */
     private $value;
-    protected string $caption = '';
-    protected string $hint = '';
-    protected bool $isRequired = false;
-    protected bool $isDisabled = false;
-    protected bool $isReadonly = false;
+
     public string $formStoreId = '';
 
     /** The name of this control. */
@@ -50,10 +46,7 @@ abstract public function setWithPostValue(?string $value): void;
      */
     public function setValue($value): self
     {
-        if ($this->setValueFx) {
-            $value = ($this->setValueFx)($value);
-        }
-        $this->value = $value;
+        $this->value = $this->setValueFx ? ($this->setValueFx)($value) : $value;
 
         return $this;
     }
@@ -63,12 +56,7 @@ public function setValue($value): self
      */
     public function validate(): ?string
     {
-        $resp = null;
-        if ($this->validateFx) {
-            $resp = ($this->validateFx)($this->getValue());
-        }
-
-        return $resp;
+        return $this->validateFx ? ($this->validateFx)($this->getValue()) : null;
     }
 
     public function onValidate(\Closure $fx): self
@@ -121,66 +109,6 @@ public function getControlName(): string
         return $this->controlName;
     }
 
-    public function getCaption(): string
-    {
-        return $this->caption;
-    }
-
-    public function setCaption(string $caption): self
-    {
-        $this->caption = $caption;
-
-        return $this;
-    }
-
-    public function setHint(string $hint): self
-    {
-        $this->hint = $hint;
-
-        return $this;
-    }
-
-    public function getHint(): ?string
-    {
-        return $this->hint;
-    }
-
-    public function isRequired(): bool
-    {
-        return $this->isRequired;
-    }
-
-    public function required(): self
-    {
-        $this->isRequired = true;
-
-        return $this;
-    }
-
-    public function isReadonly(): bool
-    {
-        return $this->isReadonly;
-    }
-
-    public function readonly(): self
-    {
-        $this->isReadonly = true;
-
-        return $this;
-    }
-
-    public function isDisabled(): bool
-    {
-        return $this->isDisabled;
-    }
-
-    public function disabled(): self
-    {
-        $this->isDisabled = true;
-
-        return $this;
-    }
-
     protected function beforeHtmlRender(): void
     {
         $this->createVueApp(self::COMP_NAME, [], $this->getDefaultSelector());

diff --git a/src/Component/Form/Control/Input.php b/src/Component/Form/Control/Input.php
@@ -18,6 +18,14 @@ class Input extends Control
     public string $inputType = 'text';
     public string $placeholder = '';
 
+    protected array $inputAttrs = [];
+
+    protected string $caption = '';
+    protected string $hint = '';
+    protected bool $isRequired = false;
+    protected bool $isDisabled = false;
+    protected bool $isReadonly = false;
+
     public ?Tw $inputTws = null;
     public array $inputDefaultTws = [
         'mt-1',
@@ -32,39 +40,132 @@ class Input extends Control
         'focus:ring-opacity-50',
     ];
 
-    public function setWithPostValue(?string $value): void
-    {
-        if ($value !== null) {
-            $this->setValue($value);
-        }
-    }
-
     protected function initRenderTree(): void
     {
         parent::initRenderTree();
         if (!$this->inputTws) {
             $this->inputTws = Tw::from([]);
         }
+        if ($this->placeholder) {
+            $this->appendInputHtmlAttribute('placeholder', $this->placeholder);
+        }
+
+        if ($this->isRequired) {
+            $this->required();
+        }
+
+        if ($this->isReadonly) {
+            $this->readonly();
+        }
+
+        if ($this->isDisabled) {
+            $this->disabled();
+        }
 
         $this->inputTws = $this->inputTws->merge($this->inputDefaultTws);
     }
 
+    public function getCaption(): string
+    {
+        return $this->caption;
+    }
+
+    public function setCaption(string $caption): self
+    {
+        $this->caption = $caption;
+
+        return $this;
+    }
+
+    public function setHint(string $hint): self
+    {
+        $this->hint = $hint;
+
+        return $this;
+    }
+
+    public function getHint(): ?string
+    {
+        return $this->hint;
+    }
+
+    public function isRequired(): bool
+    {
+        return isset($this->inputAttrs['required']) && $this->inputAttrs['required'] === 'true';
+    }
+
+    public function required(): self
+    {
+        $this->appendInputHtmlAttribute('required', 'true');
+
+        return $this;
+    }
+
+    public function isReadonly(): bool
+    {
+        return isset($this->inputAttrs['readonly']) && $this->inputAttrs['readonly'] === 'true';
+    }
+
+    public function readonly(): self
+    {
+        $this->appendInputHtmlAttribute('readonly', 'true');
+
+        return $this;
+    }
+
+    public function isDisabled(): bool
+    {
+        return isset($this->inputAttrs['disabled']) && $this->inputAttrs['disabled'] === 'true';
+    }
+
+    public function disabled(): self
+    {
+        $this->appendInputHtmlAttribute('disabled', 'true');
+
+        return $this;
+    }
+
+    public function appendInputHtmlAttribute(string $attributeName, ?string $value): self
+    {
+        $this->inputAttrs[$attributeName] = $value;
+
+        return $this;
+    }
+
+    public function removeInputHtmlAttribute(string $attributeName): self
+    {
+        if (isset($this->inputAttrs[$attributeName])) {
+            unset($this->inputAttrs[$attributeName]);
+        }
+
+        return $this;
+    }
+
+    public function setWithPostValue(?string $value): void
+    {
+        if ($value !== null) {
+            $this->setValue($value);
+        }
+    }
+
     protected function beforeHtmlRender(): void
     {
-        $this->getTemplate()->trySet('inputTws', $this->inputTws->toString());
-        $this->getTemplate()->trySetJs('name', Js::string($this->controlName));
-        $this->getTemplate()->trySetJs('value', Type::factory($this->getInputValue()));
+        $this->getTemplate()->trySetJs('inputAttrs', Js::object($this->normalizeInputAttrs($this->inputAttrs)));
         $this->getTemplate()->trySetJs('hint', Js::string($this->hint));
         $this->getTemplate()->trySetJs('caption', Js::string($this->caption));
-        $this->getTemplate()->trySetJs('isRequired', Js::boolean($this->isRequired()));
-        $this->getTemplate()->trySetJs('isReadOnly', Js::boolean($this->isReadonly()));
-        $this->getTemplate()->trySetJs('isDisabled', Js::boolean($this->isDisabled()));
         $this->getTemplate()->trySetJs('onChanges', Type::factory($this->onChangeHandlers));
-
-        $this->getTemplate()->trySetJs('type', Js::string($this->inputType));
-        $this->getTemplate()->trySetJs('placeholder', Js::string($this->placeholder));
-        $this->getTemplate()->trySetJs('formStoreId', Js::string($this->formStoreId));
+        $this->getTemplate()->setJs('formStoreId', Js::string($this->formStoreId));
+        $this->getTemplate()->trySet('inputTws', $this->inputTws->toString());
 
         parent::beforeHtmlRender();
     }
+
+    private function normalizeInputAttrs(array $inputAttrs): array
+    {
+        $inputAttrs['type'] = $this->inputType;
+        $inputAttrs['name'] = $this->controlName;
+        $inputAttrs['value'] = $this->getInputValue();
+
+        return $inputAttrs;
+    }
 }
diff --git a/src/Component/Form/Control/Number.php b/src/Component/Form/Control/Number.php
@@ -7,8 +7,6 @@
 
 namespace Fohn\Ui\Component\Form\Control;
 
-use Fohn\Ui\Js\Js;
-
 class Number extends Input
 {
     public string $defaultTemplate = 'vue-component/form/control/number.html';
@@ -21,7 +19,7 @@ class Number extends Input
 
     protected function beforeHtmlRender(): void
     {
-        $this->getTemplate()->trySetJs('step', Js::string($this->precision !== null ? $this->getStep() : 'any'));
+        $this->appendInputHtmlAttribute('step', $this->precision !== null ? $this->getStep() : 'any');
 
         parent::beforeHtmlRender();
     }
@@ -48,6 +46,8 @@ protected function getStep(): string
             $v = (10 ** $this->precision) * $this->precision;
 
             $step = ($this->precision / $v) * $this->incrementBy;
+        } elseif ($this->precision === 0) {
+            $step = $this->incrementBy;
         }
 
         return (string) $step;

diff --git a/src/Component/Form/Control/Radio.php b/src/Component/Form/Control/Radio.php
@@ -4,6 +4,7 @@
 
 namespace Fohn\Ui\Component\Form\Control;
 
+use Fohn\Ui\Core\Exception;
 use Fohn\Ui\Js\Js;
 use Fohn\Ui\Tailwind\Tw;
 
@@ -26,6 +27,19 @@ class Radio extends Selection
         'focus:ring-opacity-50',
     ];
 
+    public function setValue($value): self
+    {
+        $items = $this->getItems();
+        if (!$this->checkItemExist($value)) {
+            throw (new Exception('Trying to set Radio value with a non existing item.'))
+                ->addMoreInfo('item', $value);
+        }
+
+        parent::setValue($value);
+
+        return $this;
+    }
+
     public function getValue()
     {
         if (!parent::getValue()) {
@@ -42,4 +56,16 @@ protected function beforeHtmlRender(): void
         $this->getTemplate()->trySetJs('items', Js::array($this->getItems()));
         parent::beforeHtmlRender();
     }
+
+    private function checkItemExist(string $keyValue): bool
+    {
+        $exist = false;
+        foreach ($this->getItems() as $item) {
+            if ($item[Selection::KEY] === $keyValue) {
+                $exist = true;
+            }
+        }
+
+        return $exist;
+    }
 }
diff --git a/src/Component/Form/Control/Range.php b/src/Component/Form/Control/Range.php
@@ -7,7 +7,6 @@
 
 namespace Fohn\Ui\Component\Form\Control;
 
-use Fohn\Ui\Js\Js;
 use Fohn\Ui\Tailwind\Tw;
 
 class Range extends Input
@@ -29,9 +28,9 @@ public function setWithPostValue(?string $value): void
 
     protected function beforeHtmlRender(): void
     {
-        $this->getTemplate()->trySetJs('step', Js::string((string) $this->step));
-        $this->getTemplate()->trySetJs('max', Js::integer($this->maxValue));
-        $this->getTemplate()->trySetJs('min', Js::integer($this->minValue));
+        $this->appendInputHtmlAttribute('step', (string) $this->step);
+        $this->appendInputHtmlAttribute('max', (string) $this->maxValue);
+        $this->appendInputHtmlAttribute('min', (string) $this->minValue);
 
         $this->inputTws->merge([Tw::colour($this->color, 'accent')]);
 

diff --git a/src/Page.php b/src/Page.php
@@ -34,7 +34,7 @@ class Page extends View
             'url' => 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js',
         ],
         'fohn-js' => [
-            'url' => 'https://unpkg.com/[email protected].0/dist/fohn-ui.min.js',
+            'url' => 'https://unpkg.com/[email protected].1/dist/fohn-ui.min.js',
         ],
     ];