Multiple Improvments

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

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;
  }
 }