Panel API: PHP #217

taufik-nurrohman · 2022-05-03T11:33:48Z

taufik-nurrohman
May 3, 2022
Maintainer

This article is a draft and will be moved to the official web site when the API is matured.

State

Global states are stored as array and can be accessed through $_ variable or through $GLOBALS['_'] variable if you are in a closure. All states must be primitive and must be able to be encoded and decoded from/to JSON without changing their initial value.

Property	Accept	Role
`0`	`false\|null\|string`	Element name for the first argument of the `HTML` class.
`1`	`false\|null\|string`	Element content for the second argument of the `HTML` class. If this value is a string, then the entire layout of the panel will be replaced with this value.
`2`	`array\|null`	Element attributes for the third argument of the `HTML` class.
`alert`	`array`	Contains status messages for the panel. Values in the first-level array are alert types, and values given after are the messages to be displayed.
`are`	`array`	Contains page conditional statement data in the `are` context.
`as`	`array`	Contains page conditional statement data in the `as` context.
`asset`	`array`	Contains asset paths for the panel. You may also find some paths of the front-end assets in it, however, they won’t be loaded by default because they contain a `skip` property with a `true` value.
`author`	`string`	Contains the key of the currently active user.
`base`	`string`	The base URL of the panel.
`can`	`array`	Contains page conditional statement data in the `can` context.
`chunk`	`int\|null`	May contain the maximum amount of data to display on the current page for pagination requirements. The default value will be `20`. Developers need to declare the default value manually when they find a `null` value in this property.
`content`	`null\|string`	If the value is a string, then the entire component definitions in the `lot` property will be ignored, and the entire contents of the panel will be replaced with this value.
`count`	`int`	May contain the total data, including those not visible/loaded on the current page, before and after the current chunk. The default value is `0`. Developers need to declare the value manually if they want to tell other extensions that this value can be trusted to use.
`deep`	`int\|true`	May contain the folder scanning recursion level to be passed to the `$deep` parameter in the `g` function.
`description`	`array\|null\|string`	Contains description of the current panel. Can be used as the meta description value, but will not be useful for users and search engines because panel area is always private so it will not be indexed.
`file`	`null\|string`	If `$_['path']` value is a valid file location relative to the `.\lot` folder, this property will return that file path, otherwise, this property will return `null`.
`folder`	`null\|string`	If `$_['path']` value is a valid folder location relative to the `.\lot` folder, this property will return that folder path, otherwise, this property will return `null`.
`has`	`array`	Contains page conditional statement data in the `has` context.
`hash`	`null\|string`	Contains the current panel URL hash value, stored in `$_COOKIE['hash']`, usually set by JavaScript, because it is not possible to capture URL hash using PHP.
`icon`	`array`	Contains SVG icon paths for the panel. Values are mostly set by the components automatically. These values will be used to group all of the defined SVG icons in panel into a single `<svg>` tag to be loaded just after the opening `<body>` tag, for inline SVG optimization.
`is`	`array`	Contains page conditional statement data in the `is` context.
`kick`	`array\|null\|string`	If this value exists, it will be used as a redirection URL to be visited after the request has been successfully processed. If the value is an array, it will be converted into a panel URL string by the `x\panel\to\link` function automatically.
`lot`	`array`	Contains items where each item has a `type`. Values in this property will be ignored if `content` property exists with a string value, even if it is just an empty string. Each item should have a `stack` property to set the order of each item consistently. If this property does not exist, it will be assigned a value of `10` by default. Item with a falsy value or with an array value containing a `skip` property with a truthy value will be ignored.
`not`	`array`	Contains page conditional statement data in the `not` context.
`of`	`array`	Contains page conditional statement data in the `of` context.
`part`	`int\|null`	Contains the current page offset. The presence of this data can also be used to determine whether the user is currently on the item page or the items page. Location `http://127.0.0.1/panel/get/asset/documents/1` indicates that the user is currently viewing a list of files and folders in the `.\lot\asset\documents` folder, while location `http://127.0.0.1/panel/get/asset/documents` indicates that user is currently viewing a folder editor to edit the `.\lot\asset\documents` folder.
`path`	`null\|string`	Contains URL path data after `$_['task']` and before `$_['part']`.
`query`	`array\|null`	Contains URL query in the form of array.
`sort`	`array\|null`	May contain the data sorting parameter. The first item determines the sorting direction (`1` or `+1` for ascending and `-1` for descending), the second item determines the sorting key.
`status`	`int`	May contain the desired HTTP response status. Usually `200`, `401`, `403`, `404` or `405`.
`task`	`string`	Contains the name of the task as shown in the panel URL. The value can be `get`, `let`, `set`, or `fire/` where `` is the custom task name.
`title`	`null\|string`	Contains the last page title parts.
`token`	`string`	Contains the current active user’s access token.
`type`	`null\|string`	Contains the name of the currently active pre-defined layout type. The value can be changed by adding a `type` parameter in the panel URL.
`with`	`array`	Contains page conditional statement data in the `with` context.
`x`	`int\|null\|string`	May contain the type (`0` for folder and `1` for file) or file extensions to be passed to the `$x` parameter in the `g` function.

Alert

To declare an alert is quite simple:

$_['alert']['error'][] = 'Message goes here.';

Values in the first-level array are alert types. It has no special rules. You can add any type of alert you want, but in general, it can be expressed as error, info, and success. Especially for the error type, it is very commonly used to prevent the next operation from being performed if there is an error alert data available when the request is made:

$_['alert']['error'][] = 'This is an error message.';
$_['alert']['info'][] = 'This is an info message.';
$_['alert']['success'][] = 'This is a success message.';

$_['alert']['info'][] = 'This is another info message.';
$_['alert']['info']['ref-123'] = 'This is an info message with static reference.';

// This will remove the info message that said ‘This is an info message with static reference.’
unset($_['alert']['info']['ref-123']);

// This will replace the info message that said ‘This is an info message with static reference.’ with an ‘###’
$_['alert']['info']['ref-123'] = '###';

// Example with variable(s) in string
$_['alert']['info'][] = ['Hello, my name is Taufik.'];
$_['alert']['info'][] = ['Hello, my name is %s.', 'Taufik'];
$_['alert']['info'][] = ['%s, my name is %s.', ['Hello', 'Taufik']];

Asset

Insert assets files this way:

// Load asset file from local host
$_['asset'][] = [
    'path' => '.\path\to\file.css',
    'stack' => 10
];

// Load asset file from external URL
$_['asset'][] = [
    'link' => 'https://code.jquery.com/jquery-3.6.1.min.js',
    'stack' => 10
];

The stack property specifies the loading order of the asset files in the HTML output. You can also use the link or url property instead of path to load external asset files.

Asset output will follow the file path extension. If the path ends with .css, then the data will be converted into a <link rel="stylesheet"> element. If the path ends with .js, then the data will be converted into a <script> element.

Static reference written as a set of non-numeric characters will be converted into an id attribute in the HTML output. You can also set a custom id value different from the asset reference by adding an id property. If you set the value to false on this property, then the id attribute will be completely removed:

// `<script id="jquery-3.6.1" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>`
$_['asset']['jquery-3.6.1'] = [
    'link' => 'https://code.jquery.com/jquery-3.6.1.min.js',
    'stack' => 10
];

// `<script id="jquery-library" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>`
$_['asset']['jquery-3.6.1'] = [
    'id' => 'jquery-library',
    'link' => 'https://code.jquery.com/jquery-3.6.1.min.js',
    'stack' => 10
];

// `<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>`
$_['asset']['jquery-3.6.1'] = [
    'id' => false,
    'link' => 'https://code.jquery.com/jquery-3.6.1.min.js',
    'stack' => 10
];

You can hide (unload) certain asset files from the HTML output without removing the asset data by adding the skip property with a true value (this property has the value set to false by default).

$_['asset']['jquery-3.6.1'] = [
    'link' => 'https://code.jquery.com/jquery-3.6.1.min.js',
    'stack' => 10
];

// Unload asset `https://code.jquery.com/jquery-3.6.1.min.js`
$_['asset']['jquery-3.6.1']['skip'] = true;

Other HTML attributes can be set via the 2 property:

// `<script async src="https://code.jquery.com/jquery-3.6.1.min.js" type="text/javascript"></script>`
$_['asset'][] = [
    '2' => [
        'async' => true,
        'type' => 'text/javascript'
    ],
    'link' => 'https://code.jquery.com/jquery-3.6.1.min.js'
];

URL

Panel URL consists of several parts. You are considered in the panel when you are logged-in and are in the scope of http://127.0.0.1/panel/fire/* http://127.0.0.1/panel/get/*, http://127.0.0.1/panel/let/*, or http://127.0.0.1/panel/set/* where * cannot be numbers. An exact URL points to http://127.0.0.1/panel or http://127.0.0.1/panel/* where * is any number greater than 0 does not implement this rule and will be used to display a generic page rendered from a file stored as .\lot\page\panel.archive or .\lot\page\panel.page or pages that come from files stored in .\lot\page\panel folder.

Please note that the /panel route is not static, and can be changed to a different route by setting it via the route property in the .\lot\x\panel\state.php file.

Panel URL is divided into several parts as follows:

Part	Usage
`base`	The base URL, in this case, is `http://127.0.0.1/panel`. Value cannot be `null`.
`task`	The URL part after `base`. Value functions as an order to execute tasks. Value can be `get`, `let`, `set`, or `fire` with a user-defined command name following after.
`path`	The URL part after `task`. Should point to a file or folder inside the `.\lot` folder.
`part`	The URL part after `path`. Value can be any number greater than `0` or `null`. The value specifies the pagination offset.
`query`	The URL query string stored as an array. If the value is `[]` (empty array) or `null`, then the URL is considered to have no query.
`hash`	The URL hash. If the value is `""` (empty string) or `null`, then the URL is considered to have no hash. In an application that works on the server side, this data is useless, unless you want to create a panel URL from data to be used as a redirection target.

Internal function is available to form a panel URL from the array:

x\panel\to\link(array $in = [
    'base' => $_['base'],
    'hash' => $_['hash'],
    'part' => $_['part'],
    'path' => $_['path'],
    'query' => $_['query'],
    'task' => $_['task']
]): string

Not all parts of the URL have to be declared. Some undeclared values will be available automatically based on the current URL data stored in $_.

There are some reserved panel URL queries:

Query	Usage
`chunk`	Sets the maximum amount of data to display on the current page for pagination requirements. Specifying a value in this query will also change the current value of the `$_['chunk']` variable.
`deep`	Sets the folder scanning recursion level to be passed to the `$deep` parameter in the `g` function. Specifying a value in this query will also change the current value of the `$_['deep']` variable.
`kick`	Will be used as a redirection URL to be visited after the request has been successfully processed. If the value is an array, it will be converted into a panel URL string by the `x\panel\to\link` function automatically. Specifying a value in this query will also change the current value of the `$_['kick']` variable.
`query`	Contains panel URL query in the form of an array. You can modify its values, but in most cases, it is more useful for read-only purposes. When you modify its values, you probably mean to modify the values of the global `$_GET` variable. If that’s the case, you will need to modify the values on both variables.
`sort`	Determines the data sorting parameter. The first item determines the sorting direction (`1` or `+1` for ascending and `-1` for descending), the second item determines the sorting key. Specifying a value in this query will also change the current value of the `$_['sort']` variable.
`stack`	Serves to activate a stack based on its value. For example, requesting `http://127.0.0.1/panel/get/page/lorem-ipsum.page?stack[the-stack-name]=the-stack-value` directly will activate the stack with value `the-stack-value` in group `the-stack-name`.
`tab`	Serves to activate a tab based on its value. For example, requesting `http://127.0.0.1/panel/get/page/lorem-ipsum.page?tab[the-tab-name]=the-tab-value` directly will activate the tab with value `the-tab-value` in group `the-tab-name`.
`token`	Serves to carry the CSRF token on tasks performed via the `GET` method. Specifying a value in this query will also change the current value of the `$_['token']` variable.
`type`	Serves to manually specify the panel layout type if it allows you to modify the panel layout type via URL. Specifying a value in this query will also change the current value of the `$_['type']` variable.
`x`	Sets the type (`0` for folder and `1` for file) or file extensions to be passed to the `$x` parameter in the `g` function. Specifying a value in this query will also change the current value of the `$_['x']` variable.

All of the above queries, if present in the panel URL, including any other queries which are not reserved, will affect the current value of the $_['query'] variable.

Type

Type	Description
`blank`	A blank panel layout, consisting of a top navigation bar with pre-defined data and an empty body.
`blob`	A panel layout contains a form to upload files.
`blob/x`	A `blob` layout optimized to upload extensions.
`blob/y`	A `blob` layout optimized to upload layouts.
`data`	A panel layout contains a form to create/delete/update files with the extension `.data`.
`file`	A panel layout contains a form to create/delete/update files.
`files`	A panel layout to list files and folders in a folder.
`files/cache`	A `files` layout with limited features, optimized to manage cache files (mostly only to delete the cache files).
`files/trash`	A `files` layout with limited features, optimized to manage trash files (mostly to recover deleted files or to permanently delete the trash files).
`files/x`	A `files` layout optimized to manage extension files.
`files/y`	A `files` layout optimized to manage layout files.
`folder`	A panel layout contains a form to create/delete/update a folder.
`folders`	This is an alias for `files`.
`page`	A panel layout contains a form to create/delete/update page files (files with extension `.archive`, `.draft`, or `.page`).
`page/page`	A `page` layout optimized to create/delete/update page files stored in the `.\lot\page` folder.
`page/user`	A `page` layout optimized to create/delete/update user files stored in the `.\lot\user` folder.
`pages`	A panel layout to list page files (files with extension `.archive`, `.draft`, or `.page`) in a folder.
`pages/page`	A `pages` layout optimized to list page files stored in the `.\lot\page` folder.
`pages/user`	A `pages` layout optimized to list user files stored in the `.\lot\user` folder.
`pages/x`	A `pages` layout optimized to list page files stored in the `.\lot\x\*` folder.
`pages/y`	A `pages` layout optimized to list page files stored in the `.\lot\y\*` folder.
`state`	A panel layout contains a form to update the `state.php` file. Not quite functional except for internal use.

Some optional extensions also have implemented their layout types that inherit the layouts above:

Type	Description
`page/comment`	A `page` layout optimized to create/delete/update comment files stored in the `.\lot\comment` folder.
`pages/comment`	A `pages` layout optimized to list comment files stored in the `.\lot\comment` folder.
`page/tag`	A `page` layout optimized to create/delete/update tag files stored in the `.\lot\tag` folder.
`pages/tag`	A `pages` layout optimized to list tag files stored in the `.\lot\tag` folder.

You can view the desired panel layout by appending a type query in the URL with the panel layout type:

http://127.0.0.1/panel/set/page?type=page/page

Depending on the situation, the panel layout can automatically be set or even ignored without the need to append a type query in the URL, or, it can also redirect you to the correct URL when a dangerous action may occur. For example, when you try to create a file in a folder by manually opening a blank ?type=file layout in the address bar, but it turns out that the panel path actually point to a file without an extension, then you will be automatically redirected to the form to edit that extension-less file.

If the current panel path points to a file, it will implicitly set the panel layout to file.
If current panel path points to a file with extension .data, it will implicitly set the panel layout to data.
If current panel path points to a file with extension .archive, .draft, or .page, it will implicitly set the panel layout to page.
If current panel path points to a file with extension .archive, .draft, or .page stored in .\lot\page folder, it will implicitly set the panel layout to page/page.
If current panel path points to a file with extension .archive, .draft, or .page stored in .\lot\user folder, it will implicitly set the panel layout to page/user.
If current panel path points to a folder, it will implicitly set the panel layout to folder. If it contains a page offset, it will implicitly set the panel layout to files.
If current panel path points to .\lot\page folder or any folders in it, and it contains a page offset, it will implicitly set the panel layout to pages/page. Else, it will implicitly set the panel layout to folder.
If current panel path points to .\lot\user folder, and it contains a page offset, it will implicitly set the panel layout to pages/user. Else, it will implicitly set the panel layout to folder.

Component

Defined under namespace x\panel\type. The following are some common property names. Not all of these properties will be applied to the component, and even if they do exist as component data, they do not always have a role. They may come from the parent data. However, these properties will always have the same functionality across all components.

Property	Accept	Role
`0`	`false\|null\|string`	Element name for the first argument of `HTML` class.
`1`	`false\|null\|string`	Element content for the second argument of `HTML` class.
`2`	`array\|null`	Element attributes for the third argument of `HTML` class.
`active`	`bool`	Usually exists to indicate that a field or a link is disabled. Its default value would be `true`. Means that if this property does not exist, then it will have an implicit `active` property with value `true`. You have to set this property with value `false` to disable a field or a link.
`are`	`array`	This property stores HTML class data as associative array with prefix `are:`. These data will then be combined with the data in the `tags` property. Some data like `active` and `current` might also set this property values automatically. For example, if there is an `active` property with value `true`, it will add an item `active` in the `are` property with value `true` automatically. So it will prepare the component to add class `is:active` in the HTML output.
`as`	`array`	This property stores HTML class data as associative array with prefix `as:`. These data will then be combined with the data in the `tags` property.
`can`	`array`	This property stores HTML class data as associative array with prefix `can:`. These data will then be combined with the data in the `tags` property.
`count`	`int`	Usually exists to indicate total data of something.
`current`	`bool`	Usually exists to indicate current link in a menu list. This property does not determine its value automatically as you might think. You have to use your own way to determine if a link is in the current state or not.
`decors`	`array`	Accapts list of key-value pairs for inline CSS declarations. The values can then be presented as inline `style` attribute in the HTML output. This is probably not standard as I am currently struggle with the naming convention to make sure it matched with the `tags` key functionality.
`description`	`null\|string`	Determines the component description.
`has`	`array`	This property stores HTML class data as associative array with prefix `has:`. These data will then be combined with the data in the `tags` property.
`hint`	`array\|string`	Determines the field’s placeholder text.
`icon`	`array\|false\|string`	Determine the component icon path if it supports icon.
`id`	`scalar`	Determine the component ID.
`image`	`false\|string`	Determine the component image URL if it supports image.
`is`	`array`	This property stores HTML class data as associative array with prefix `is:`. These data will then be combined with the data in the `tags` property.
`key`	`scalar`	This usually sets automatically as the `$key` variable.
`keys`	`array`
`link`	`array\|false\|string`
`name`	`null\|string`	Usually exists to determine the field’s `name` attribute.
`not`	`array`	This property stores HTML class data as associative array with prefix `not:`. These data will then be combined with the data in the `tags` property.
`of`	`array`	This property stores HTML class data as associative array with prefix `of:`. These data will then be combined with the data in the `tags` property.
`size`	`int`
`skip`	`bool`	If this value is `true` then the component will not be rendered in the output.
`stack`	`float\|int`	This value determines the stack order of the components that exist in the `lot` property.
`tags`	`array`	Accapts list of HTML class names, or a key-value pairs where the keys will be used as the class name and the value will be used to indicate if the key will be included in the HTML class list or not.
`text`	`null\|string`	If a value is assigned to this property and this property is to be used to display data, then all HTML elements in it must be stripped off before it reaches the output. If you want to preserve the HTML elements, consider using the `content`, `description`, or `title` properties. If you want to preserve the HTML elements but wants them to be escaped in the output, then consider using the `value` property. HTML entities like `×` are HTML elements, however multi-byte strings written as-is such as `×` need to be treated as plain text which doesn’t need to be removed.
`title`	`array\|string`	Determines the component title.
`type`	`string`	Determines the component type.
`unit`	`array\|string`	Describes a purpose of a value. For example, if you have `'px'` value set on this property, this property will add a suffix contains text `'px'` to the number input to tell the user that the number he/she put on the input is to be used as a pixel value.
`url`	`array\|false\|string`
`value`	`mixed`	Usually exists to determine the field’s `value` attribute.
`values`	`array`	Usually exists to determine the field’s `value` attribute. Some field types such as `field/colors` and `field/items` need to hold multiple values at once. This `values` property will be more dominant to use compared to the `value` property. The value can be a sequence array or an associative array, depending on the needs and specifications of the field.
`with`	`array`	This property stores HTML class data as associative array with prefix `with:`. These data will then be combined with the data in the `tags` property.

Formal syntax:

x\panel\type(array $value, int|string $key): ?HTML

Example usage:

echo x\panel\type([
    'title' => 'Section Title',
    'description' => 'Section description.',
    'type' => 'section',
    'content' => '<p>Section content goes here.</p>'
], 0);

The example below calls the section type directly so you don’t have to specify the type property.

echo x\panel\type\section([
    'title' => 'Section Title',
    'description' => 'Section description.',
    'content' => '<p>Section content goes here.</p>'
], 0);

`bar`

Property	Accept	Role
`description`	`array\|null\|string`	Sets the menu bar’s description.
`lot`	`array`	Sets the menu bar’s items.
`title`	`array\|string`	Sets the menu bar’s title.

`button`

Property	Accept	Role
`active`	`bool`	If its value is `false`, it disables the button.
`description`	`array\|null\|string`	Sets the button’s description which will appear as you hover over it.
`icon`	`array\|null\|string`	Sets the button’s icon.
`status`	`array\|string`	Sets the button status which will appear as a secondary text after the primary text.
`title`	`array\|string`	Sets the button’s primary text.

Part that comes after button/ is the button type as described in the HTML5 specification for <button> element. These components are generally not used directly and function as auxiliary components on the internal side.

`button/button`

`button/link`

Property	Accept	Role
`link`	`array\|string`	Sets the button’s link value which will be opened in a new tab by default when `target` property is not set, when you click on it.
`target`	`null\|string`	Sets the button’s link target.
`url`	`array\|string`	Sets the button’s link value which will be opened in the current tab by default when `target` property is not set, when you click on it.

`button/reset`

`button/submit`

`column`

Property	Accept	Role
`content`	`null\|string`	Sets the column’s content from a string.
`lot`	`array`	Sets the column’s content from an array of other components.
`size`	`float\|int\|string`	Sets the column’s size compared to other columns.

`columns`

Property	Accept	Role
`content`	`null\|string`	Sets the columns’ content from a string.
`lot`	`array`	Sets the columns’ content from an array of `column/*` components.

`content`

Property	Accept	Role
`content`	`null\|string`
`description`	`array\|null\|string`
`title`	`array\|null\|string`

`description`

Property	Accept	Role
`content`	`null\|string`

`desk`

Property	Accept	Role
`content`	`null\|string`
`lot`	`array`
`width`	`bool\|int\|string`

`field`

Property	Accept	Role
`active`	`bool`
`content`	`null\|string`
`description`	`array\|null\|string`
`field`	`array\|null\|string`
`fix`	`bool`
`hint`	`array\|null\|string`
`lot`	`array`
`title`	`array\|null\|string`
`value`	`mixed`
`values`	`mixed`
`vital`	`bool`
`width`	`bool\|int\|string`

`field/blob`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`

`field/blobs`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`

`field/button`

Property	Accept	Role
`description`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`mixed`

`field/buttons`

Property	Accept	Role
`description`	`array\|null\|string`
`lot`	`array`
`title`	`array\|null\|string`

`field/color`

Property	Accept	Role
`description`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/colors`

Property	Accept	Role
`description`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`values`	`array`

`field/content`

Property	Accept	Role
`description`	`array\|null\|string`
`height`	`null\|int\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/date`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/date-time`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/description`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/email`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/flex`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`lot`	`array`
`title`	`array\|null\|string`

`field/hidden`

Property	Accept	Role
`name`	`null\|string`
`value`	`null\|string`

`field/item`

Property	Accept	Role
`description`	`array\|null\|string`
`lot`	`array`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/items`

Property	Accept	Role
`description`	`array\|null\|string`
`flat`	`bool`
`lot`	`array`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`
`values`	`array`

`field/link`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/name`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`max`	`null\|int`
`min`	`null\|int`
`name`	`null\|string`
`pattern`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`
`x`	`array\|null\|string`

`field/number`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`max`	`null\|int`
`min`	`null\|int`
`name`	`null\|string`
`step`	`float\|null\|int`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/option`

Property	Accept	Role
`description`	`array\|null\|string`
`lot`	`array`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/options*`

Property	Accept	Role
`description`	`array\|null\|string`
`lot`	`array`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`
`values`	`null\|string`

`field/pass`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`

`field/path`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`max`	`null\|int`
`min`	`null\|int`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/query`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/range`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`max`	`null\|int`
`min`	`null\|int`
`name`	`null\|string`
`range`	`array`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/route`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`max`	`null\|int`
`min`	`null\|int`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/set`

Property	Accept	Role
`content`	`array\|null\|string`
`description`	`array\|null\|string`
`lot`	`array`
`title`	`array\|null\|string`

`field/source`

Property	Accept	Role
`description`	`array\|null\|string`
`height`	`null\|int\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/text`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`pattern`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/time`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/title`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/toggle`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/u-r-l`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`field/url`

This is an alias for field/u-r-l.

`field/version`

Property	Accept	Role
`description`	`array\|null\|string`
`hint`	`array\|null\|string`
`name`	`null\|string`
`title`	`array\|null\|string`
`value`	`null\|string`

`fields`

`file`

`files`

`flex`

`folder`

`folders`

`form`

Part that comes after form/ is the form method as described in the HTML5 specification for <form> element.

`form/dialog`

`form/get`

`form/post`

`icon`

`input`

Part that comes after input/ is the input type as described in the HTML5 specification for <input> element. These components are generally not used directly and function as auxiliary components on the internal side. To add HTML attributes such as disabled, readonly and required follows the standard property naming of panel. For example, to add disabled attribute, you don’t use disabled property directly. Instead, use active property with the value of false.

x\panel\type\input\text([
    'active' => false,
    'name' => 'page[name]',
    'value' => $page->name
], 0); // `<input disabled name="page[name]" type="text" value="...">`

`input/button`

`input/checkbox`

`input/color`

`input/date`

`input/datetime-local`

`input/email`

`input/file`

`input/hidden`

`input/image`

`input/month`

`input/number`

`input/password`

`input/radio`

`input/range`

`input/reset`

`input/search`

`input/submit`

`input/tel`

`input/text`

`input/time`

`input/url`

`input/week`

`link`

`links`

`lot`

`menu`

`page`

`pager`

`pages`

`row`

`rows`

`section`

`select`

`select/multiple*`

`separator`

`stack`

`stacks`

`tab`

`tabs`

`tasks`

`tasks/button`

`tasks/link`

`textarea`

`title`

`unit`

To be continued.

Icon

The global $_['icon'] property exists to store icons data. These data will mostly auto-fill when a component that has icon feature appear on the page.

Get your desired icon path via Google’s Material design icons browser or use the community version of Material design icons browser which is easier to use and provides more icon alternatives created by contributors.

Be sure to follow the original Material icon system guidelines when you want to use third party icon path data to represent your own brand.

100% Scale	1000% Scale

Live Area	Padding

Form

Reserved form names:

Name	Description
`blob`	Applied to `<input type="file">` or `field/blob` component, used to upload a file.
`blobs[]`	Applied to `<input multiple type="file">` or `field/blobs` component, used to upload multiple files at once.
`data`	Applied to any form element that can hold scalar data. Contains nested data as key-value pairs, where keys will become the page data’s file name and values will become the page data’s file content. If value is not a string, it will be converted into JSON so that it can be stored to a file.
`file`	Applied to any form element that can hold scalar data. Contains nested data includes `content`, `name`, and `seal`.
`folder`	Applied to any form element that can hold scalar data. Contains nested data includes `name`.
`hash`
`kick`
`options`
`page`	Applied to any form element that can hold scalar data. Contains nested data as key-value pairs, where keys will become the page property’s name and values will become the page property’s values. The whole data later will be converted into a YAML string and then passed to the `file[content]` value, to be processed as a regular file.
`path`	Contains URL path data. If this data exists, the `$_['path']` value will not be used in the form action, but execution will still be carried out on the current URL. This data is usually used only to direct the submission data to another path without having to change the current location of the form. Useful for cases like uploading files by forcing a certain folder structure, for example if files need to be stored in folders named with the current year and month, for organizing files.
`query`	Contains URL query data as array to be included in the URL after form submission if `kick` property is not set.
`stack`
`state`
`tab`
`token`	Required. Hidden. Contains current user’s token.
`type`	Required. Hidden. Mostly follows the current panel layout type. Used to determine the form task.

Tasks

Defined under namespace x\panel\task\{get,let,set}.

`blob`

`data`

`file`

`folder`

`page`

`state`

Custom Tasks

Defined under namespace x\panel\task\fire.

`fuse`

`zip`

TODO

Hook

`_`

`do.blob.set`

`do.data.get`

`do.data.let`

`do.data.set`

`do.file.get`

`do.file.let`

`do.file.set`

`do.folder.get`

`do.folder.let`

`do.folder.set`

`do.page.get`

`do.page/page.get`

`do.page/user.get`

`do.page.let`

`do.page/page.let`

`do.page/user.let`

`do.page.set`

`do.page/page.set`

`do.page/user.set`

`do.state.get`

To be continued.

yuliakbard · 2022-08-01T15:56:40Z

yuliakbard
Aug 1, 2022

di mecha 3.0.0 panel custom nya gimana kang, tetap seperti biasakah kang? file panel.php perlu dibuat tersendiri?

4 replies

taufik-nurrohman Aug 1, 2022
Maintainer Author

Seperti biasa mas.

yuliakbard Jan 3, 2023

cara menggunakannya gimana ya kang?, ini untuk di eksekusi di front end atau backend ya ?? penasaran sama outputnya dimana

$_['asset']['jquery-3.6.1'] = [
    'link' => 'https://code.jquery.com/jquery-3.6.1.min.js',
    'stack' => 10
];

cuma pake ini aja yang bisa nampak outputnya.

Asset::set('https://code.jquery.com/jquery-3.6.1.min.js', 20);

taufik-nurrohman Jan 3, 2023
Maintainer Author

Untuk back-end mas. Outputnya sama saja seperti yang bawah cuma bedanya ini hanya berlaku di dalam panel kontrol.

yuliakbard Jan 3, 2023

oh, oke oke. pantesan diutak atik gak nongol di front end. 😄

yuliakbard · 2022-09-08T15:48:22Z

yuliakbard
Sep 8, 2022

// `<script async src="https://code.jquery.com/jquery-3.6.1.min.js" type="text/javascript"></script>`
$_['asset'][] = [
    '2' => [
        'async' => true,
        'type' => 'text/javascript'
    ],
    'link' => 'https://code.jquery.com/jquery-3.6.1.min.js'
];

untuk mecha v3 ya kang?

3 replies

taufik-nurrohman Sep 8, 2022
Maintainer Author

Iya.

yuliakbard Dec 8, 2022

kang, apa ada kelebihan memanggil asset js/ css menggunakan cara ini?

taufik-nurrohman Dec 9, 2022
Maintainer Author

Nggak ada si mas, cuma kan sebelum layout panel masuk itu dia bakal melakukan reset semua aset front-end supaya tidak ter-include ke panel. Bahaya kalau ikut masuk nanti kode CSS dan JS tema kecampur-campur sama panel.

Nah karena sudah di-reset maka kalau mas nambahin aset dengan cara biasa itu dia nggak akan memberikan efek karena keburu di-reset.

Kalau pakai cara ini dia udah ada yang ngatur di panel siapa-siapa yang bakal ter-include jadi lebih aman. Esensinya sama.

Mecha

Panel API: PHP #217

Uh oh!

Uh oh!

taufik-nurrohman May 3, 2022 Maintainer

State

Alert

Asset

URL

Type

Component

bar

button

button/button

button/link

button/reset

button/submit

column

columns

content

description

desk

field

field/blob

field/blobs

field/button

field/buttons

field/color

field/colors

field/content

field/date

field/date-time

field/description

field/email

field/flex

field/hidden

field/item

field/items

field/link

field/name

field/number

field/option

field/options*

field/pass

field/path

field/query

field/range

field/route

field/set

field/source

field/text

field/time

field/title

field/toggle

field/u-r-l

field/url

field/version

fields

file

files

flex

folder

folders

form

form/dialog

form/get

form/post

icon

input

input/button

input/checkbox

input/color

input/date

input/datetime-local

input/email

input/file

input/hidden

input/image

input/month

input/number

taufik-nurrohman
May 3, 2022
Maintainer

`bar`

`button`

`button/button`

`button/link`

`button/reset`

`button/submit`

`column`

`columns`

`content`

`description`

`desk`

`field`

`field/blob`

`field/blobs`

`field/button`

`field/buttons`

`field/color`

`field/colors`

`field/content`

`field/date`

`field/date-time`

`field/description`

`field/email`

`field/flex`

`field/hidden`

`field/item`

`field/items`

`field/link`

`field/name`

`field/number`

`field/option`

`field/options*`

`field/pass`

`field/path`

`field/query`

`field/range`

`field/route`

`field/set`

`field/source`

`field/text`

`field/time`

`field/title`

`field/toggle`

`field/u-r-l`

`field/url`

`field/version`

`fields`

`file`

`files`

`flex`

`folder`

`folders`

`form`

`form/dialog`

`form/get`

`form/post`

`icon`

`input`

`input/button`

`input/checkbox`

`input/color`

`input/date`

`input/datetime-local`

`input/email`

`input/file`

`input/hidden`

`input/image`

`input/month`

`input/number`

`input/password`

`input/radio`

`input/range`

`input/reset`

`input/search`

`input/submit`

`input/tel`

`input/text`

`input/time`

`input/url`