Add new subComponents and fix bug

Author: Vladzimir

Component.php

@@ -8,10 +8,7 @@
 use JsonSerializable;
 use LogicException;
 
-use function json_encode;
 use function lcfirst;
-use function preg_replace_callback;
-use function stripcslashes;
 
 class Component implements JsonSerializable
 {
@@ -26,7 +23,7 @@ class Component implements JsonSerializable
     /**
      * @var array
      */
-    protected array $properties;
+    protected array $properties = [];
     /**
      * @var string
      */
@@ -37,17 +34,19 @@ class Component implements JsonSerializable
     protected bool $asSelector;
 
     /**
-     * @param string|null $id
-     * @param bool $asSelector
+     * @var string
      */
-    public function __construct(string|null $id, bool $asSelector = true)
+    protected string $endSymbols;
+
+    public function __construct(string|null $id, bool $asSelector = true, string $endSymbols = ';' . PHP_EOL)
     {
         if (!defined(static::class . '::COMPONENT_NAME')) {
             throw new LogicException("Class " . static::class . " must have const COMPONENT_NAME.");
         }
 
         $this->id = $id;
         $this->asSelector = $asSelector;
+        $this->endSymbols = $endSymbols;
     }
 
     /**
@@ -107,7 +106,7 @@ protected function addMethod(string $methodName, $methodValue): static
         if ($methodValue === null) {
             $method = "('{$methodName}')";
         } else {
-            $args = $this->encode($methodValue);
+            $args = Encode::json($methodValue);
             $method = "('{$methodName}', {$args})";
         }
 
@@ -140,20 +139,20 @@ public function __toString()
     {
         $appends = $this->appends;
 
-        $data = $this->method ?? '(' . $this->encode($this) . ')';
+        $data = $this->method ?? '(' . Encode::json($this) . ')';
 
         $selector = '';
         $end = '';
 
         if ($this->id !== null) {
-            $end = ';';
+            $end = $this->endSymbols;
             $selector = '$(' . $this->id . ').';
 
             if ($this->asSelector) {
                 $selector = '$("#' . $this->id . '").';
             }
         } elseif (!$this->asSelector) {
-            $end = ';';
+            $end = $this->endSymbols;
             $selector = '$.';
         }
 
@@ -174,23 +173,4 @@ public function jsonSerialize(): ?array
     {
         return $this->properties ?: null;
     }
-
-    /**
-     * @param $toJson
-     * @return string
-     * @throws Exception
-     */
-    protected function encode($toJson): string
-    {
-        $data = json_encode($toJson, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
-
-        if ($data === false) {
-            throw new Exception('Invalid data');
-        }
-
-        // replace markup by JS
-        return preg_replace_callback('/"::JS::(.*?)::JS::"/', function ($matches) {
-            return stripcslashes($matches[1]);
-        }, $data) ?: '';
-    }
 }

Components/DataGrid.php

@@ -8,4 +8,5 @@ class DataGrid extends Component
 {
     public const string COMPONENT_NAME = 'datagrid';
     use \Easyui\Traits\DataGrid;
+    use \Easyui\Traits\Panel;
 }

Components/Datagrid/Column.php

@@ -10,7 +10,7 @@
 /**
  * @method $this title(string $title) [The column title text.]
  * @method $this field(string $field) [The column field name.]
- * @method $this width(int $width) [The width of column. If not defined, the width will auto expand to fit its contents. No width definition will reduce performance.]
+ * @method $this width(string $width) [The width of column. If not defined, the width will auto expand to fit its contents. No width definition will reduce performance.]
  * @method $this rowspan(int $rowspan) [Indicate how many rows a cell should take up.]
  * @method $this colspan(int $colspan) [Indicate how many columns a cell should take up.]
  * @method $this align(DatagridColumnAlign $align) [Indicate how to align the column data. 'left', 'right', 'center' can be used.]

Components/Drawer.php

@@ -19,7 +19,7 @@
  * @method $this mExpand() [Expand the drawer.]
  * @method $this mCollapse() [Collapse the drawer.]
  */
-class Drawer extends Component
+class Drawer extends Dialog
 {
     public const string COMPONENT_NAME = 'drawer';
 }

Components/Form.php

@@ -25,7 +25,7 @@
  *
  * Method
  * @method $this mSubmit(string|Js $options) [Do the submit action, the options parameter is an object which contains following properties:<br>url: the action URL<br>onSubmit: callback function before submit<br>success: callback function after submit successfully]
- * @method $this mLoad(array $data) [Load records to fill the form. The data parameter can be a string or a object type, when string acts as a remote URL, otherwise acts as a local record.]
+ * @method $this mLoad(array|string $data) [Load records to fill the form. The data parameter can be a string or a object type, when string acts as a remote URL, otherwise acts as a local record.]
  * @method $this mClear() [Clear the form data.]
  * @method $this mReset() [Reset the form data.]
  * @method $this mValidate() [Do the form fields validation, return true when all fields is valid. The method is used with the validatebox plugin.]

Components/Layout.php

@@ -3,14 +3,14 @@
 namespace Easyui\Components;
 
 use Easyui\Component;
+use Easyui\Components\Region\Panel as RegionPanel;
 use Easyui\Enums\LayoutRegion;
 use Easyui\Enums\LayoutPanelRegion;
 use Easyui\Js;
 
 /**
  * Property/Params
  * @method $this pFit(bool $fit) [Set to true to set the layout size fit its parent container. When creating layout on 'body' tag, it will be auto maximized to the full size of whole page.]
- * @method $this p() []
  *
  * Event
  * @method $this eOnCollapse(Js $onCollapse) [Fires when collapse a region panel.]
@@ -23,7 +23,7 @@
  * @method $this mPanel(LayoutPanelRegion $region) [Return the specified panel, the 'region' parameter possible values:'north', 'south', 'east', 'west', 'center'.]
  * @method $this mCollapse(LayoutRegion $region) [Collapse the specified panel, the 'region' parameter possible values:'north', 'south', 'east', 'west'.]
  * @method $this mExpand(LayoutRegion $region) [Expand the specified panel, the 'region' parameter possible values:'north', 'south', 'east', 'west'.]
- * @method $this mAdd($options) [Add a specified panel, the options parameter is a config object, see tab panel properties for more details.]
+ * @method $this mAdd(RegionPanel $options) [Add a specified panel, the options parameter is a config object, see tab panel properties for more details.]
  * @method $this mRemove(LayoutRegion $region) [Remove the specified panel, the 'region' parameter possible values:'north', 'south', 'east', 'west'.]
  * @method $this mSplit($region) [Split the region panel.]
  * @method $this mUnsplit($region) [Unsplit the region panel.]

Components/Messager/Confirm.php

@@ -6,8 +6,8 @@
 use Easyui\Options;
 
 /**
- * @method $this title(string $title) [The title text to be showed on header panel.]
- * @method $this msg(string $msg) [The message text to be showed.]
+ * @method $this title(string|Js $title) [The title text to be showed on header panel.]
+ * @method $this msg(string|Js $msg) [The message text to be showed.]
  * @method $this fn(Js $fn) [fn(b): The callback function, when user click Ok button, pass a true value to function, otherwise pass a false to it.]
  */
 class Confirm extends Options

Components/Panel.php

@@ -3,100 +3,9 @@
 namespace Easyui\Components;
 
 use Easyui\Component;
-use Easyui\Enums\PanelCloseAnimation;
-use Easyui\Enums\PanelHalign;
-use Easyui\Enums\PanelOpenAnimation;
-use Easyui\Enums\PanelTitleDirection;
-use Easyui\Js;
 
-/**
- * Property/Params
- * @method $this pId(string $id) [The id attribute of this panel.]
- * @method $this pTitle(string $title) [The title text to display in panel header.]
- * @method $this pIconCls(string $iconCls) [A CSS class to display a 16x16 icon in panel.]
- * @method $this pWidth(int $width) [Set the panel width.]
- * @method $this pHeight(int $height) [Set the panel height.]
- * @method $this pLeft(int $left) [Set the panel left position.]
- * @method $this pTop(int $top) [Set the panel top position.]
- * @method $this pCls(string $cls) [Add a CSS class to the panel.]
- * @method $this pHeaderCls(string $headerCls) [Add a CSS class to the panel header.]
- * @method $this pBodyCls(string $bodyCls) [Add a CSS class to the panel body.]
- * @method $this pStyle(array $style) [Add a custom specification style to the panel.]
- * @method $this pFit(bool $fit) [When true to set the panel size fit its parent container.]
- * @method $this pBorder(bool $border) [Defines if to show panel border.]
- * @method $this pDoSize(bool $doSize) [If set to true, the panel will be resize and do layout when created.]
- * @method $this pNoheader(bool $noheader) [If set to true, the panel header will not be created.]
- * @method $this pContent(string $content) [The panel body content.]
- * @method $this pHalign(PanelHalign $halign) [The panel header alignment. Possible values are: 'top', 'left', 'right'.]
- * @method $this pTitleDirection(PanelTitleDirection $titleDirection) [The header title direction. Possible values are: 'up', 'down'. This property is valid only when the 'halign' property is set to 'left' or 'right'.]
- * @method $this pCollapsible(bool $collapsible) [Defines if to show collapsible button.]
- * @method $this pMinimizable(bool $minimizable) [Defines if to show minimizable button.]
- * @method $this pMaximizable(bool $maximizable) [Defines if to show maximizable button.]
- * @method $this pClosable(bool $closable) [Defines if to show closable button.]
- * @method $this pTools(string|array $tools) [Custom tools, possible values:<br>1) an array, each element contains iconCls and handler properties.<br>2) a selector that indicating the tools]
- * @method $this pHeader(string $header) [The panel header.]
- * @method $this pFooter(string $footer) [The panel footer.]
- * @method $this pOpenAnimation(PanelOpenAnimation $openAnimation) [The opening animation. Available values are: 'slide', 'fade', 'show'.]
- * @method $this pOpenDuration(int $openDuration) [The opening duration.]
- * @method $this pCloseAnimation(PanelCloseAnimation $closeAnimation) [The closing animation. Available values are: 'slide', 'fade', 'hide'.]
- * @method $this pCloseDuration(int $closeDuration) [The closing duration.]
- * @method $this pCollapsed(bool $collapsed) [Defines if the panel is collapsed at initialization.]
- * @method $this pMinimized(bool $minimized) [Defines if the panel is minimized at initialization.]
- * @method $this pMaximized(bool $maximized) [Defines if the panel is maximized at initialization.]
- * @method $this pClosed(bool $closed) [Defines if the panel is closed at initialization.]
- * @method $this pHref(string $href) [A URL to load remote data and then display in the panel. Notice that the content will not be loaded until the panel is open and expand.]
- * @method $this pCache(bool $cache) [True to cache the panel content that loaded from href.]
- * @method $this pLoadingMessage(string $loadingMessage) [When loading remote data show a message in the panel.]
- * @method $this pExtractor(Js $extractor) [Defines how to extract the content from ajax response, return extracted data.]
- * @method $this pMethod(string $method) [The http method to load content page.]
- * @method $this pQueryParams(array $queryParams) [The additional parameters that will be sent when loading a content page.]
- * @method $this pLoader(Js $loader) [Defines how to load content page from remote server. This function takes following parameters:<br>param: the parameter object to pass to remote server.<br>success(data): the callback function that will be called when retrieve data successfully.<br>error(): the callback function that will be called when failed to retrieve data.]
- *
- * @method $this pSelected(bool $selected) [ONLY FOR accordion. Set to true to expand the panel.]
- * @method $this pDisabled(bool $disabled) [ONLY FOR TABS. When set to true, the tab panel will be disabled.]
- *
- * Event
- * @method $this eOnBeforeLoad(Js $onBeforeLoad) [Fires before loading a content page, return false to ignore this action.]
- * @method $this eOnLoad(Js $onLoad) [Fires when remote data is loaded.]
- * @method $this eOnLoadError(Js $onLoadError) [Fires when some errors occur to load content page.]
- * @method $this eOnBeforeOpen(Js $onBeforeOpen) [Fires before panel is opened, return false to stop the open.]
- * @method $this eOnOpen(Js $onOpen) [Fires after panel is opened.]
- * @method $this eOnBeforeClose(Js $onBeforeClose) [Fires before panel is closed, return false to cancel the close. The panel declared below cannot be closed.]
- * @method $this eOnClose(Js $onClose) [Fires after panel is closed.]
- * @method $this eOnBeforeDestroy(Js $onBeforeDestroy) [Fires before panel is destroyed, return false to cancel the destroy.]
- * @method $this eOnDestroy(Js $onDestroy) [Fires after panel is destroyed.]
- * @method $this eOnBeforeCollapse(Js $onBeforeCollapse) [Fires before panel is collapsed, return false to stop the collapse.]
- * @method $this eOnCollapse(Js $onCollapse) [Fires after panel is collapsed.]
- * @method $this eOnBeforeExpand(Js $onBeforeExpand) [Fires before panel is expanded, return false to stop the expand.]
- * @method $this eOnExpand(Js $onExpand) [Fires after panel is expanded.]
- * @method $this eOnResize(Js $onResize) [Fires after panel is resized.<br>width: the new outer width<br>height: the new outer height]
- * @method $this eOnMove(Js $onMove) [Fires after panel is moved.<br>left: the new left position<br>top: the new top position]
- * @method $this eOnMaximize(Js $onMaximize) [Fires after the window has been maximized.]
- * @method $this eOnRestore(Js $onRestore) [Fires after the window has been restored to its original size.]
- * @method $this eOnMinimize(Js $onMinimize) [Fires after the window has been minimized.]
- *
- * Method
- * @method $this mOptions() [Return options property.]
- * @method $this mPanel() [Return the outer panel object.]
- * @method $this mHeader() [Return the panel header object.]
- * @method $this mFooter() [Return the panel footer object.]
- * @method $this mBody() [Return the panel body object.]
- * @method $this mSetTitle($title) [Set the title text of header.]
- * @method $this mOpen($forceOpen) [When forceOpen parameter set to true, the panel is opened bypass the onBeforeOpen callback.]
- * @method $this mClose($close) [When forceClose parameter set to true, the panel is closed bypass the onBeforeClose callback.]
- * @method $this mDestroy($forceDestroy) [When forceDestroy parameter set to true, the panel is destroyed bypass the onBeforeDestroy callback.]
- * @method $this mClear() [Clear the panel content.]
- * @method $this mRefresh($href) [Refresh the panel to load remote data. If the 'href' parameter is assigned, it will override the old 'href' property.]
- * @method $this mResize($options) [Set panel size and do layout. The options object contains following properties:<br>width: the new panel width<br>height: the new panel height<br>left: the new panel left position<br>top: the new panel top position]
- * @method $this mDoLayout() [Set the sizes of child components within the panel.]
- * @method $this mMove($options) [Move the panel to a new position. The options object contains following properties:<br>left: the new panel left position<br>top: the new panel top position]
- * @method $this mMaximize() [Fits the panel winthin its container.]
- * @method $this mMinimize() [Minimizing the panel.]
- * @method $this mRestore() [Restores the maximized panel back to its original size and position.]
- * @method $this mCollapse($animate) [Collapses the panel body. The 'animate' parameter value indicates if to use animation effect.]
- * @method $this mExpand($animate) [Expand the panel body. The 'animate' parameter value indicates if to use animation effect.]
- */
 class Panel extends Component
 {
     public const string COMPONENT_NAME = 'panel';
+    use \Easyui\Traits\Panel;
 }

Components/PropertyGrid.php

@@ -17,7 +17,7 @@
  * @method $this mExpandGroup($groupIndex) [Expand specified group. If the 'groupIndex' parameter is not assigned, expand all group.]
  * @method $this mCollapseGroup($groupIndex) [Collapse specified group. If the 'groupIndex' parameter is not assigned, collapse all group.]
  */
-class PropertyGrid extends Datagrid
+class PropertyGrid extends DataGrid
 {
     public const string COMPONENT_NAME = 'propertygrid';
 }

Components/Region/Panel.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace Easyui\Components\Region;
+
+use Easyui\Enums\LayoutPanelExpandMode;
+use Easyui\Enums\LayoutPanelRegion;
+use Easyui\Js;
+use Easyui\Options;
+
+/**
+ * @method $this title(string $title) [The layout panel title text.]
+ * @method $this region(LayoutPanelRegion $region) [Defines the layout panel position, the value is one of following: north, south, east, west, center.]
+ * @method $this border(bool $border) [True to show layout panel border.]
+ * @method $this split(bool $split) [True to show a split bar which user can change the panel size.]
+ * @method $this iconCls(string $iconCls) [An icon CSS class to show a icon on panel header.]
+ * @method $this href(string $href) [An URL to load data from remote server.]
+ * @method $this collapsible(bool $collapsible) [Defines if to show collapsible button.]
+ * @method $this minWidth(int $minWidth) [The minimum panel width.]
+ * @method $this minHeight(int $minHeight) [The minimum panel height.]
+ * @method $this maxWidth(int $maxWidth) [The maximum panel width.]
+ * @method $this maxHeight(int $maxHeight) [The maximum panel height.]
+ * @method $this expandMode(LayoutPanelExpandMode|null $expandMode) [The expanding mode when click on the collapsed panel. Possible values are 'float', 'dock' and null.<br> * float: the region panel will expand and float on the top.<br> dock: the region panel will expand and dock on the layout.<br>null: nothing happens.]
+ * @method $this collapsedSize(int $collapsedSize) [The collapsed panel size.]
+ * @method $this hideExpandTool(bool $hideExpandTool) [True to hide the expand tool on the collapsed panel.]
+ * @method $this hideCollapsedContent(bool $hideCollapsedContent) [True to hide the title bar on the collapsed panel.]
+ * @method $this collapsedContent(Js $collapsedContent) [The title content to display on the collapsed panel, possible values:<br>1) the title string.<br>2) a function that returns the title content.]
+ * @method $this width($width) [The title content to display on the collapsed panel, possible values:<br>1) the title string.<br>2) a function that returns the title content.]
+ */
+class Panel extends Options
+{
+}