Multiple Improvments

* Support for chaining
* Improve constructure of DateInput
* Set footer as hidden in vuetify data table
* Documentation

Author: usernane

wfc/ui/vuetify/ActionsContainer.php

@@ -16,7 +16,7 @@ class ActionsContainer extends HTMLNode {
      */
     public function __construct() {
         parent::__construct('div', [
-            'class' => 'text-center'
+            //'class' => 'text-center'
         ]);
 
     }

wfc/ui/vuetify/DateInput.php

@@ -31,13 +31,12 @@ class DateInput extends HTMLNode {
      * @param string $menuModel The name of the model that will be associated with
      * date picker's menu component.
      * 
-     * @param string $label An optional label to show on the component.
      * 
-     * @param string $placeholder An optional placeholder to show on the
-     * component.
+     * @param string $textFieldProps An optional array that holds properties of the
+     * text field that will hold date value.
      * 
      */
-    public function __construct(string $model = null, string $menuModel = null, string $label = null, string $placeholder = null) {
+    public function __construct(string $model = null, string $menuModel = null, array $textFieldProps = []) {
         parent::__construct('v-menu', [
             ':close-on-content-click' => "false",
             'transition' => "scale-transition",
@@ -57,12 +56,9 @@ public function __construct(string $model = null, string $menuModel = null, stri
 
         $this->datePicker = $this->addChild('v-date-picker', $pickerAttrs);
 
-        if ($label !== null) {
-            $this->getTextField()->setAttribute('label', $label);
-        }
-        if ($placeholder !== null) {
-            $this->getTextField()->setAttribute('placeholder', $placeholder);
-        } else {
+        $this->getTextField()->setAttributes($textFieldProps);
+        
+        if (!isset($textFieldAttrs['placeholder'])) {
             $this->getTextField()->setAttribute('placeholder', 'YYYY-MM-DD');
         }
         if ($menuModel !== null) {
@@ -78,28 +74,40 @@ public function __construct(string $model = null, string $menuModel = null, stri
      * date select.
      *  
      * @param string $method The name of JavaScript method.
+     * 
+     * @return DateInput
      */
-    public function setOnInput(string $method) {
+    public function setOnInput(string $method) : DateInput {
         $this->getTextField()->setAttribute('@input', $method);
         $this->getDatePicker()->setAttribute('@change', $method);
+        
+        return $this;
     }
     /**
      * Sets the v-model of the menu component.
      * 
      * @param string $model The name of the model.
+     * 
+     * @return DateInput
      */
-    public function setMenuVModel(string $model) {
+    public function setMenuVModel(string $model) : DateInput {
         $this->setAttribute('v-model', $model);
         $this->getDatePicker()->setAttribute('@input', $model.' = false');
+        
+        return $this;
     }
     /**
      * Sets v-model of the text field and the date picker.
      * 
      * @param string $model The name of the model.
+     * 
+     * @return DateInput
      */
-    public function setVModel(string $model) {
+    public function setVModel(string $model) : DateInput {
         $this->getTextField()->setAttribute('v-model', $model);
         $this->getDatePicker()->setAttribute('v-model', $model);
+        
+        return $this;
     }
     /**
      * Returns the 'v-text-field' component of the picker.

wfc/ui/vuetify/Heading.php

@@ -32,14 +32,16 @@ public function __construct($title, $level = 1) {
      * @param HTMLNode|string $textOrNode This can be an object of type HTMLNode
      * or a simple string.
      */
-    public function setText($textOrNode) {
+    public function setText($textOrNode) : Heading {
         $this->headingNode->removeAllChildren();
 
         if ($textOrNode instanceof HTMLNode) {
             $this->headingNode->addChild($textOrNode);
         } else if (gettype($textOrNode) == 'string') {
             $this->headingNode->text($textOrNode);
         }
+        
+        return $this;
     }
     /**
      * Returns the note that contains heading text.

wfc/ui/vuetify/HijriDateInput.php

@@ -28,7 +28,7 @@ class HijriDateInput extends HTMLNode {
      * @param string $labelTxt The label that will be shown at the top
      * of the field.
      */
-    public function __construct($model, $labelTxt) {
+    public function __construct(string $model, string $labelTxt) {
         parent::__construct('v-row', [
             'no-gutters'
         ]);
@@ -92,12 +92,14 @@ public function getDayInput() {
     /**
      * Sets a JS function to call in case one of hijri input fields changes value.
      * 
-     * @param string $jsFunction The name of JavAscript function which is defined
+     * @param string $jsFunction The name of JavaScript function which is defined
      * in the 'methods'.
      */
-    public function setOnInput($jsFunction) {
+    public function setOnInput($jsFunction) : HijriDateInput {
         $this->getYearInput()->setAttribute('@input', $jsFunction);
         $this->getDayInput()->setAttribute('@input', $jsFunction);
         $this->getMonthInput()->setAttribute('@input', $jsFunction);
+        
+        return $this;
     }
 }

wfc/ui/vuetify/PrivilegesTree.php

@@ -27,7 +27,7 @@ class PrivilegesTree extends HTMLNode {
      * @param boolean $withSearch If set to true, a search field will be 
      * included in the component.
      */
-    public function __construct($model = 'privileges_tree', $title = null, $withSearch = false, ) {
+    public function __construct(string $model = 'privileges_tree', string $title = null, bool $withSearch = false, ) {
         parent::__construct('v-card');
         if ($title !== null) {
             $this->title = $this->addChild('v-card-title')->text($title);

wfc/ui/vuetify/VDataTable.php

@@ -55,6 +55,7 @@ public function __construct(array $attrs = []) {
             ':length' => 'page.pages_count',
             '@input' => 'loadPage'
         ]);
+        $this->setHasFooter(false);
     }
     /**
      * Sets the name of JavaScript function that will be get executed when
@@ -63,9 +64,12 @@ public function __construct(array $attrs = []) {
      * Note that the first parameter of the function will be page number.
      * 
      * @param string $func
+     * 
+     * @return VDataTable
      */
-    public function setOnPageNumberClick(string $func) {
+    public function setOnPageNumberClick(string $func) : VDataTable {
         $this->getVPagination()->setAttribute('@input', $func);
+        return $this;
     }
     /**
      * Adds support for expanding table rows.
@@ -104,22 +108,27 @@ public function addExpandedRow($el, string $expandedCallback = null) : HTMLNode
      * 
      * @param string|HTMLNode $el The element that will be added to the slot.
      * 
+     * @param array $attrs An optional array of attributes to set for the element.
+     * 
      * @return HTMLNode The method will return an object of type HTMLNode
      * that represents the added element.
      */
-    public function addItemSlot(string $slot , $el) : HTMLNode {
+    public function addItemSlot(string $slot , $el, array $attrs = []) : HTMLNode {
         return $this->addChild('template', [
             '#item.'.$slot => '{ item }'
-        ])->addChild($el);
+        ])->addChild($el, $attrs);
     }
     /**
      * Sets the name of JavaScript function that will be get executed when
      * page size input changes value.
      * 
      * @param string $func
+     * 
+     * @return VDataTable 
      */
-    public function setOnPageSizeChanged(string $func) {
+    public function setOnPageSizeChanged(string $func) : VDataTable {
         $this->getPageSizeInput()->setAttribute('@input', $func);
+        return $this;
     }
     /**
      * Returns the node that represents the footer of the table.
@@ -157,8 +166,10 @@ public function getPageSizeInput() : HTMLNode {
      * <li>pages_options: An array that contain number of items per page like 5, 10, 20</li>
      * </ul>
      * @param string $name Name of the model. Defined in 'data' section.
+     * 
+     * @return VDataTable
      */
-    public function setPagingModel(string $name) {
+    public function setPagingModel(string $name) : VDataTable {
         $this->getVPagination()->setAttributes([
             'v-model' => $name.'.page_number',
             ':length' => $name.'.pages_count',
@@ -172,29 +183,37 @@ public function setPagingModel(string $name) {
             ':items-per-page' => $name.'.size',
         ]);
         $this->paginationModelName = $name;
+        return $this;
     }
     /**
      * Sets if the table will have a footer or not.
      * 
      * @param bool $withFooter If true is passed, the table will have footer.
      * Other than that, the table will not have footer.
+     * 
+     * @return VDataTable
      */
-    public function setHasFooter(bool $withFooter) {
+    public function setHasFooter(bool $withFooter) : VDataTable {
         if ($withFooter && $this->getFooter()->getParent() === null) {
             $this->addChild($this->getFooter());
             $this->setAttribute(':items-per-page', $this->paginationModelName.'.size');
         } else {
             $this->removeChild($this->getFooter());
             $this->removeAttribute(':items-per-page');
         }
+        
+        return $this;
     }
     /**
      * Sets the properties of the v-select which is used to select items
      * per page.
      * 
      * @param array $attrs
+     * 
+     * @return VDataTable 
      */
-    public function setPageSizeInputProps(array $attrs) {
+    public function setPageSizeInputProps(array $attrs) : VDataTable {
         $this->pageSizeSelect->setAttributes($attrs);
+        return $this;
     }
 }

wfc/ui/vuetify/VTooltip.php

@@ -71,7 +71,8 @@ public function setTooltip($el) : HTMLNode {
      * 
      * @param string $position
      */
-    public function setPosition(string $position) {
+    public function setPosition(string $position) : VTooltip {
         $this->setAttribute($position);
+        return $this;
     }
 }