{"id":18772452,"url":"https://github.com/eftec/bladeonehtml","last_synced_at":"2025-04-13T08:27:47.457Z","repository":{"id":56975548,"uuid":"139330945","full_name":"EFTEC/BladeOneHtml","owner":"EFTEC","description":"It is a library","archived":false,"fork":false,"pushed_at":"2024-12-31T11:19:49.000Z","size":281,"stargazers_count":10,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-11T16:56:05.731Z","etag":null,"topics":["html-css","php-library","template-engine","views"],"latest_commit_sha":null,"homepage":"https://www.eftec.cl","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EFTEC.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-01T13:21:47.000Z","updated_at":"2024-12-31T11:19:22.000Z","dependencies_parsed_at":"2024-06-21T17:39:59.331Z","dependency_job_id":"ae399627-974f-459d-895d-b5e63e138e4d","html_url":"https://github.com/EFTEC/BladeOneHtml","commit_stats":{"total_commits":28,"total_committers":3,"mean_commits":9.333333333333334,"dds":0.1785714285714286,"last_synced_commit":"8f2e00afe0e794e4c7fe12d8e27869eb594ea9ff"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EFTEC%2FBladeOneHtml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EFTEC%2FBladeOneHtml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EFTEC%2FBladeOneHtml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EFTEC%2FBladeOneHtml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EFTEC","download_url":"https://codeload.github.com/EFTEC/BladeOneHtml/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248683441,"owners_count":21144908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html-css","php-library","template-engine","views"],"created_at":"2024-11-07T19:29:09.646Z","updated_at":"2025-04-13T08:27:47.449Z","avatar_url":"https://github.com/EFTEC.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BladeOneHtml\r\nIt is a PHP library that allows to create forms (view) easily, cleanly and without killing the performance.   It uses the library BladeOne to renders the view. This library only uses a single dependency, one file and nothing more.\r\n\r\nThis library works in two ways:\r\n\r\n* It compiles a script (our view that use our tags), in a native PHP code.\r\n* And the next read, if the script exists, then it uses it (instead of re-compiling). And since the script is native code, then it is exactly like to work in vanilla-php,\r\nbut it is way easy to write and to maintenance.\r\n\r\n\r\n\r\n[![Packagist](https://img.shields.io/packagist/v/eftec/bladeonehtml.svg)](https://packagist.org/packages/eftec/bladeonehtml)\r\n[![Total Downloads](https://poser.pugx.org/eftec/bladeonehtml/downloads)](https://packagist.org/packages/eftec/bladeonehtml)\r\n[![Maintenance](https://img.shields.io/maintenance/yes/2025.svg)]()\r\n[![composer](https://img.shields.io/badge/composer-%3E2.0-blue.svg)]()\r\n[![php](https://img.shields.io/badge/php-7.4-green.svg)]()\r\n[![php](https://img.shields.io/badge/php-8.4-green.svg)]()\r\n[![CocoaPods](https://img.shields.io/badge/docs-71%25-yellow.svg)]()\r\n\r\n\r\n\u003c!-- TOC --\u003e\r\n* [BladeOneHtml](#bladeonehtml)\r\n  * [Usage](#usage)\r\n  * [Template basic](#template-basic)\r\n  * [Template usage](#template-usage)\r\n    * [input](#input)\r\n    * [hidden](#hidden)\r\n    * [label](#label)\r\n    * [image](#image)\r\n    * [select](#select)\r\n    * [item](#item)\r\n    * [items](#items)\r\n    * [optgroup](#optgroup)\r\n    * [checkbox](#checkbox)\r\n    * [radio](#radio)\r\n    * [textarea](#textarea)\r\n    * [button](#button)\r\n    * [link](#link)\r\n    * [checkboxes](#checkboxes)\r\n    * [radios](#radios)\r\n    * [file](#file)\r\n    * [ul](#ul)\r\n    * [ol](#ol)\r\n    * [pagination](#pagination)\r\n    * [table](#table)\r\n      * [tablehead](#tablehead)\r\n      * [tablebody](#tablebody)\r\n      * [tablefooter](#tablefooter)\r\n      * [tablerows](#tablerows)\r\n      * [cells](#cells)\r\n    * [cssbox](#cssbox)\r\n      * [How to add a new css into the cssbox?](#how-to-add-a-new-css-into-the-cssbox)\r\n    * [jsbox](#jsbox)\r\n      * [How to add a new JavaScript into the cssbox?](#how-to-add-a-new-javascript-into-the-cssbox)\r\n    * [jscodebox](#jscodebox)\r\n  * [Template Customization](#template-customization)\r\n    * [Set a default class](#set-a-default-class)\r\n    * [Set a custom pattern](#set-a-custom-pattern)\r\n      * [Pattern-Variables inside the code](#pattern-variables-inside-the-code)\r\n      * [Custom attribute](#custom-attribute)\r\n  * [Methods](#methods)\r\n    * [useBootstrap5](#usebootstrap5)\r\n      * [Note: If we want to use the css box, then we need to add to our view the next code](#note-if-we-want-to-use-the-css-box-then-we-need-to-add-to-our-view-the-next-code)\r\n    * [useBootstrap4](#usebootstrap4)\r\n      * [Note: If we want to use the css box, then we need to add to our view the next code](#note-if-we-want-to-use-the-css-box-then-we-need-to-add-to-our-view-the-next-code-1)\r\n    * [useBootstrap3](#usebootstrap3)\r\n    * [addCss](#addcss)\r\n    * [addJS](#addjs)\r\n    * [addJSCode](#addjscode)\r\n  * [Public Fields](#public-fields)\r\n    * [$pattern](#pattern)\r\n    * [$defaultClass](#defaultclass)\r\n    * [$customAttr](#customattr)\r\n  * [Creating a new pattern](#creating-a-new-pattern)\r\n      * [1- Adding a new pattern](#1--adding-a-new-pattern)\r\n      * [2- Creating a new method](#2--creating-a-new-method)\r\n      * [3- Creating a new parent Method (container method)](#3--creating-a-new-parent-method-container-method)\r\n      * [4- Advanced](#4--advanced-)\r\n  * [Version history](#version-history)\r\n\u003c!-- TOC --\u003e\r\n\r\n## Usage\r\n\r\n1. This library requires eftec/bladeone. You could install via Composer in the root folder of your project as\r\n\r\n\u003e composer require eftec/bladeonehtml\r\n\r\n2. And you should extend the class as follows (BladeOneHtml is a Trait)\r\n\r\n```php\r\ninclude \"vendor/autoload.php\";\r\n\r\nuse eftec\\bladeone\\BladeOne;\r\nuse eftec\\bladeonehtml\\BladeOneHtml;\r\n\r\nclass myBlade extends  BladeOne {\r\n    use BladeOneHtml;\r\n}\r\n\r\n$blade=new myBlade();\r\n\r\n// for our example:\r\n$myvalue=@$_REQUEST['myform'];\r\necho $blade-\u003erun(\"exampleview\", ['myvalue'=\u003e$myvalue]);\r\n```\r\n\r\n3. Create a folders called  📁 \"\\views\" and 📁 \"\\compiles\"\r\n4. Inside views, creates the next file 📄  \"\\views\\exampleview.blade.php\"\r\n\r\n```html\r\n\u003cbody\u003e\r\n    @form()\r\n        @input(type=\"text\" name=\"myform\" value=$myvalue)\r\n        @button(type=\"submit\" value=\"Send\")\r\n    @endform()\r\n\u003c/body\u003e\r\n```\r\n\r\n$blade=new myBlade();\r\n\r\n![](docs/img1.jpg)\r\n\r\n\r\n\r\n## Template basic\r\n\r\nThis library adds a new set of tags for the template. The tags uses named arguments, so it is easily configurable.\r\n\r\n\u003e @\u0026lt;tag\u0026gt;(argument1=\"value\" argument2='value' argument3=value argument4=$variable argument5=function(), argument6=\"aaa $aaa\")\r\n\r\nThis library uses the native html arguments but some arguments are special\r\n\r\n| Argument | Description                                                                                                                                                                                                  | example                                                                                                   |\r\n|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------|\r\n| text     | It adds a content between the tags. **The inner value is always un-quoted.**                                                                                                                                 | @tag(text=\"hello\") -\u003e \u0026lt;tag\u0026gt;hello\u0026lt;/tag\u0026gt;                                                        |\r\n| pre      | It adds a content before the tag                                                                                                                                                                             | @tag(pre=\"hello\") -\u003e hello\u0026lt;tag\u0026gt;\u0026lt;/tag\u0026gt;                                                         |\r\n| post     | It adds a content after the tag                                                                                                                                                                              | @tag(post=\"hello\") -\u003e \u0026lt;tag\u0026gt;\u0026lt;/tag\u0026gt;hello                                                        |\r\n| between  | It adds a content between the tags (it works similar than text)                                                                                                                                              | @tag(between=\"hello\") -\u003e \u0026lt;tag\u0026gt;hello\u0026lt;/tag\u0026gt;                                                     |\r\n| value    | Usually it works as the normal \"**value**\" of html but it also could works differently (in @textarea works like **text**)                                                                                    | @tag(value=\"hello\") -\u003e \u003c tag value=\"hello\"\u003e\u0026lt;/tag\u0026gt;                                                   |\r\n| values   | Some components needs a list of object/arrays.  This argument is used to sets the list of values                                                                                                             | @tag(values=$countries)                                                                                   |\r\n| alias    | Some components needs or use a list of object/array. This argument is to reference any row inside the list.  If **values** is set and **alias** is missing, then it creates a new alias called values+\"Row\". | @tag($values=$countries alias=$country)\u003cbr /\u003e@tag($values=$countries ) **it asumes  alias=$countriesRow** |\r\n| optgroup | The tag @select could list grouped elements. This argument is used to set the grouping                                                                                                                       | @tag($values=$countries alias=$country @optgroup=$country-\u003econtinent)                                     |\r\n\r\nLet's say the next example\r\n\r\n```\r\n@input(value=\"hello world\" type=\"text\" )\r\n```\r\n\r\nIt is rendered as\r\n\r\n```\r\n\u003cinput value=\"hello world\" type=\"text\" /\u003e\r\n```\r\n\r\nIf the tag uses a variable of function, then this view\r\n\r\n```\r\n@input(value=$hello type=\"text\" )\r\n```\r\n\r\nIs converted into\r\n\r\n``` // the\r\n\u003cinput value=\"\u003c?php echo $this-\u003ee($hello);?\u003e\" type=\"text\" /\u003e \r\n```\r\n\r\nThe method $this-\u003ee is used to escape the method.\r\n\r\n\u003e Note: This library allows any tag, even custom tags (but only if they don't enter in conflict with the special tags, see table)\r\n\u003e\r\n\u003e @input(value=\"hello world\" type=\"text\" mycustomtag=\"hi\" )\r\n\u003e\r\n\u003e Is converted into\r\n````html\r\n\u003cinput value=\"hello world\" type=\"text\" mycustomtag=\"hi\" /\u003e\r\n````\r\n\r\n\r\n\r\n## Template usage\r\n\r\n### input\r\n\r\nIt shows an input HTML.\r\n\r\nBasic example:\r\n\r\n```html\r\n@input(id=\"id1\" value=\"hello world$somevar\" type=\"text\" )\r\n```\r\n\r\n![](docs/input_label.jpg)\r\n\r\n\r\n### hidden\r\n\r\nIt generates a hidden field\r\n\r\nBasic example:\r\n\r\n```\r\n@hidden(name=\"id1\" value=\"hello world$somevar\" )\r\n```\r\n\r\n### label\r\n\r\nIt shows a label html\r\n\r\n```html\r\n@label(for=\"id1\" text=\"hello world:\") \r\n```\r\n\r\n![](docs/input_label.jpg)\r\n\r\n### image\r\n\r\nIt shows an image\r\n\r\n```\r\n@image(src=\"https://via.placeholder.com/350x150\")\r\n```\r\n\r\n![](docs/image.jpg)\r\n\r\n### select\r\n\r\nIt shows a select (dropdown list) html object\r\n\r\nExample:\r\n\r\n```\r\n@select(id=\"aaa\" value=$selection values=$countries alias=$country)\r\n    @item(value='aaa' text='hello world')\r\n    @item(value='aaa' text='hello world')\r\n    @item(value='aaa' text='hello world')\r\n    @items( id=\"chkx\" value=$country-\u003eid text=$country-\u003ename)\r\n@endselect\r\n```\r\n\r\n\u003e Note 1: @items requires the arguments values in the parent (@select) and the arguments **value** (the selectable value) and **text** (the visible value)\r\n\u003e Note 2: @items requires an **id**, assigned in the same tag or in the parent tag (in this case, the parent is @select)\r\n\u003e Note 3: By standard, the argument **id** must be unique.\r\n\r\n![](docs/select.jpg)\r\n\r\n### item\r\n\r\n**@item** is a utility tag used inside other tags.  This behaves depending on of their parent tag. It adds a simple \r\nline/row to the parent object.\r\n\r\nExample:\r\n\r\n```\r\n@select()\r\n    @item(value='aaa' text='hello world')\r\n@endselect\r\n\r\n```\r\n\r\nIt renders\r\n\r\n```\r\n\u003cselect\u003e\r\n\u003coption value=\"aaa\"\u003ehello world\u003c/option\u003e\r\n\u003c/select\u003e\r\n```\r\n\r\n### items\r\n\r\n**@items** is a utilitarian tag used inside some tags. This behaves depending on of their parent tag. It adds a \r\nmultiples lines/rows to the parent object using the tag **values**\r\n\r\n\u003e Note: This tag requires some arguments:\r\n\u003e\r\n\u003e * the parent(or this tag) requires the tag **values** \r\n\u003e * the parent requires the tag **value** It indicates the current selection (if any)\r\n\u003e * the parent(or this tag) requires the tag **alias** If alias is missing then it uses the name of values + \"Row\", i.e. values=product -\u003e alias= productRow\r\n\u003e * the parent(or this tag) requires the tag **id**  \r\n\u003e   * The rendered \"id\" will be generated using this id+\"_\"+\"id of the row\". i.e. id=\"idproduct\" =\u003e idproduct_0, idproduct_1\r\n\u003e   * Why?  It is because the id must be unique (html specs)\r\n\r\nExample, if $countries is a list of objects then :\r\n\r\n```\r\n@select(id=\"aaa\" value=$selection values=$countries alias=$country)\r\n    @items( id=\"chkx\" value=$country-\u003eid text=$country-\u003ename)\r\n@endselect\r\n```\r\n\r\nIf $countries is a list of arrays then:\r\n\r\n```\r\n@select(id=\"aaa\" value=$selection values=$countries alias=$country)\r\n    @items( id=\"chkx\" value=$country['id'] text=$country['name'])\r\n@endselect\r\n```\r\n\r\n\r\n\r\nInside the tag items, you could use the next variables\r\n\r\n| variable (where values is the variable used)             | Specification                                                         |\r\n|----------------------------------------------------------|-----------------------------------------------------------------------|\r\n| **$values**OptGroup                                      | It stores the current optgroup (if any). Example: $productOptGroup    |\r\n| **$values**Key                                           | It indicates the current key of the current row. Example: $productKey |\r\n| $alias (if not alias is set then it uses **$values**Row) | The current row of the variable. Example: $productRow                 |\r\n\r\n### optgroup\r\n\r\nIt starts an optional group (select)\r\n\r\nExample:\r\n\r\n```\r\n@select(id=\"aaa\" value=$selection values=$countries alias=$country)\r\n    @optgroup(label=\"group1\")\r\n        @item(value='aaa' text='hello world')\r\n        @item(value='aaa' text='hello world')\r\n        @item(value='aaa' text='hello world')\r\n    @endoptgroup\r\n@endselect\r\n```\r\n\r\n\u003e Note: this tag must be ended with the tag @endoptgroup\r\n\r\n![](docs/optgroup.jpg)\r\n\r\n### checkbox\r\n\r\nIt adds a  single checkbox\r\n\r\nExample:\r\n\r\n```\r\n@checkbox(id=\"idsimple\" value=\"1\" checked=\"1\" post=\"it is a selection\")\r\n```\r\n\r\n![](docs/checkbox.jpg)\r\n\r\n### radio\r\n\r\nIt adds a single radio button\r\n\r\nExample:\r\n\r\n```\r\n@radio(id=\"idsimple\" value=\"1\" checked=\"1\" post=\"it is a selection\")\r\n```\r\n\r\n![](docs/radio.jpg)\r\n\r\n### textarea\r\n\r\nIt draws a text area.\r\n\r\nExample:\r\n\r\n```\r\n@textarea(id=\"aaa\" value=\"3333 3333 aaa3333 \")\r\n```\r\n\r\n![](docs/textarea.jpg)\r\n\r\n### button\r\n\r\nIt draws a button\r\n\r\nExample:\r\n\r\n```\r\n@button(value=\"click me\" type=\"submit\" class=\"test\" onclick='alert(\"ok\")')\r\n```\r\n\r\n![](docs/button.jpg)\r\n\r\n### link\r\n\r\nIt adds a hyperlink\r\n\r\nExample:\r\n\r\n```\r\n@link(href=\"https://www.google.cl\" text=\"context\")\r\n```\r\n\r\n![](docs/link.jpg)\r\n\r\n### checkboxes\r\n\r\nIt shows a list of checkboxes\r\n\r\n```\r\n@checkboxes(id=\"checkbox1\" value=$selection alias=$country)\r\n    @item(id=\"aa1\" value='aaa' text='hello world' post=\"\u003cbr\u003e\")\r\n    @item(id=\"aa2\" value='aaa' text='hello world2' post=\"\u003cbr\u003e\")\r\n    @items(values=$countries value='id' text='name' post=\"\u003cbr\u003e\")\r\n@endcheckboxes\r\n```\r\n\r\n![](docs/checkbox.jpg)\r\n\r\n### radios\r\n\r\nIt shows a list of radio buttons\r\n\r\n```\r\n@radios(id=\"radios1\" name=\"aaa\" value=$selection  alias=$country)\r\n    @item(value='aaa' text='hello world' post=\"\u003cbr\u003e\")\r\n    @item(value='aaa' text='hello world2' post=\"\u003cbr\u003e\")\r\n    @items(values=$countries value='id' text='name' post=\"\u003cbr\u003e\")\r\n@endradios\r\n```\r\n\r\n![](docs/radio.jpg)\r\n\r\n### file\r\n\r\nIt generates a file input value\r\n\r\n```\r\n@file(name=\"file\" value=\"123.jpg\" post=\"hello world\")\r\n```\r\n\r\n\u003e Note: it also renders a hidden file with name \"name\"+\"_file\" with the original value\r\n\r\n![](docs/file.jpg)\r\n\r\n### ul\r\n\r\nIt generates an unsorted list\r\n\r\n```\r\n@ul(id=\"aaa\" value=$selection values=$countries alias=$country)\r\n    @item(value='aaa' text='hello world')\r\n    @item(value='aaa' text='hello world')\r\n    @item(value='aaa' text='hello world')\r\n    @items(value=$country-\u003eid text=$country-\u003ename)\r\n@endul\r\n```\r\n\r\n![](docs/ul.jpg)\r\n\r\n### ol\r\n\r\nIt generates a sorted list\r\n\r\n```\r\n@ol(id=\"aaa\" value=$selection values=$countries alias=$country)\r\n    @item(value='aaa' text='hello world')\r\n    @item(value='aaa' text='hello world')\r\n    @item(value='aaa' text='hello world')\r\n    @items(value=$country-\u003eid text=$country-\u003ename)\r\n@endol\r\n```\r\n\r\n![](docs/ol.jpg)\r\n\r\n### pagination\r\n\r\nIt generates a pagination. It requires bootstrap3, bootstrap4 or bootstrap5.  \r\n\r\nYou can find an example at [examples/examplepagination.php](examples/examplepagination.php)\r\n\r\nPHP code\r\n\r\n```php\r\n$current=isset($_GET['_page']) ? $_GET['_page'] : 1;\r\necho $blade-\u003erun(\"examplepagination\", \r\n    ['totalpages'=\u003ecount($products)\r\n     ,'current'=\u003e$current\r\n     ,'pagesize'=\u003e10\r\n     ,'products'=\u003e$items\r\n    ]);\r\n```\r\n\r\nTemplate\r\n\r\n```html\r\n@pagination(numpages=$totalpages current=$current  pagesize=$pagesize urlparam='_page')\r\n```\r\n\r\n\u003e Note: The page is base 1.\r\n\u003e Note: the argument urlparam is used to build the link (domain.dom/web.php?_page=999)\r\n\r\nYou can change the name of the buttons **prev** and **next** as follows:\r\n\r\n```php\r\n$this-\u003esetTranslation(['pagination'=\u003e['prev'=\u003e'\u003c\u0026lt;\u003e','next'=\u003e'\u0026gt;']]);\r\n```\r\n\r\n![](docs/pagination.jpg)  \r\n\r\n### table\r\n\r\nIt renders a table\r\n\r\n```\r\n@table(class=\"table\" values=$countries alias=$country border=\"1\")\r\n    @tablehead  \r\n        @cell(text=\"id\")\r\n        @cell(text=\"cod\")\r\n        @cell(text=\"name\")\r\n    @endtablehead\r\n    @tablebody(id='hello world'  )\r\n        @tablerows(style=\"background-color:azure\")\r\n            @cell(text=$country-\u003eid style=\"background-color:orange\")\r\n            @cell(text=$country-\u003ecod )\r\n            @cell(text=$country-\u003ename)\r\n        @endtablerows\r\n    @endtablebody\r\n    @tablefooter\r\n        @cell(text=\"id\" colspan=\"3\")\r\n    @endtablefooter\r\n@endtable\r\n```\r\n\r\n![](docs/table.jpg)\r\n\r\n#### tablehead\r\n\r\nIt renders the header of the table (optional). Each cell added inside it, is rendered as \"th\" HTML tag\r\n\r\n#### tablebody\r\n\r\nIt renders the body of the table (optional). Each cell added inside the table is rendered as \"td\" HTML tag\r\n\r\n#### tablefooter\r\n\r\nIt renders the footer of the table (optional). Each cell added inside it, is rendered as \"th\" HTML tag\r\n\r\n#### tablerows\r\n\r\nIt generates a row inside the body\r\n\r\n#### cells\r\n\r\nIt renders a cell inside the tablehead,tablebody (tablerows) or tablefooter\r\n\r\n### cssbox\r\n\r\nIt renders and css added into the box\r\n\r\n```html\r\n\u003chead\u003e   \r\n\t@cssbox\r\n\u003c/head\u003e\r\n```\r\n\r\n#### How to add a new css into the cssbox?\r\n\r\nUsing the method addCss($css,$name)\r\n\r\n```php\r\n$this-\u003eaddCss('\u003clink rel=\"stylesheet\" href=\"mystyle.css\"\u003e','mystyle'); \r\n$this-\u003eaddCss('css/stylename.css'); \r\n```\r\n\r\n**$css** could be a link or a link tag\r\n\r\n**$name** is optional but it avoids to add duplicates. If we add a new CSS with the same name as\r\na previous one, then it is ignored.\r\n\r\n### jsbox\r\n\r\nIt renders all JavaScript links added to the box\r\n\r\n```html\r\n\u003cbody\u003e\r\n    \u003c!-- our page --\u003e\r\n\t@jsbox\r\n\u003c/body\u003e\r\n```\r\n\r\n#### How to add a new JavaScript into the cssbox?\r\n\r\nUsing the method addJs($script,$name)\r\n\r\n```php\r\n$this-\u003eaddJs('\u003cscript src=\"js/jquery.js\"\u003e\u003c/script\u003e','jquery');\r\n```\r\n\r\n### jscodebox\r\n\r\n```html\r\n\u003cbody\u003e\r\n    \u003c!-- our page --\u003e\r\n    @jsbox \u003c!-- we could load jquery here --\u003e\r\n\t@jscodebox(ready)\r\n\u003c/body\u003e\r\n```\r\n\r\nThis code adds the tags \u003c script \u003e automatically.\r\n\r\nThe argument **ready** indicates if we want to execute the function when the document is ready.\r\n\r\nHow to add a new JavaScript code into the **jscodebox**?\r\n\r\n```php\r\n$blade-\u003eaddJsCode('alert(\"hello\");');\r\n```\r\n\r\n\r\n\r\n## Template Customization\r\n\r\n**BladeOneHtml** allows to modify the tags used and to set a default classes for each class.\r\n\r\nYou can set a default class and tags for Bootstrap 3/4/5 using the next method (pick only one).\r\n\r\n```php\r\n// if true then it loads the css and js from a cdn into the css and jsbox so it requires @cssbox and @jsbox\r\n$blade-\u003euseBootstrap5(true); \r\n// if true then it loads the css and js from a cdn into the css and jsbox so it requires @cssbox and @jsbox\r\n$blade-\u003euseBootstrap4(true); \r\n// if true then it loads the css and js from a cdn into the css and jsbox so it requires @cssbox and @jsbox\r\n$blade-\u003euseBootstrap3(true); \r\n```\r\n\r\n\r\n\r\nOr you could create your own tags and classes\r\n\r\n### Set a default class\r\n\r\n```php\r\n$blade-\u003edefaultClass[$tagname]='default class';\r\n```\r\n\r\n### Set a custom pattern\r\n\r\n```php\r\n$blade-\u003epattern['nametag']='pattern';\r\n```\r\n\r\nWhere nametag could be as follows\r\n\r\n| Name          | Description                                                                                                                                                                   | Example     | Code                                                 |\r\n|---------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|------------------------------------------------------|\r\n| nametag       | It uses the pattern to use when the tag is used                                                                                                                               | input       | {{pre}}\u003cinput{{inner}} \u003e{{between}}\u003c /input\u003e{{post}} |\r\n| nametag_empty | The system uses this pattern if the content (between/text) is empty or not set (a self close tag). If not set, then the system uses **nametag**  even if the content is empty | input_empty | {{pre}}\u003c input{{inner}} /\u003e{{post}}                   |\r\n| nametag_item  | The system uses this pattern for tags @item and @items                                                                                                                        | select_item | \u003c option{{inner}} \u003e{{between}}\u003c /option\u003e             |\r\n| nametag_end   | It uses this pattern when the tag must be closed                                                                                                                              | form_end    | \u003c /form\u003e                                             |\r\n\r\n#### Pattern-Variables inside the code\r\n\r\n| variable    | explanation                                                                          | Escaped (*)                                                       |\r\n|-------------|--------------------------------------------------------------------------------------|-------------------------------------------------------------------|\r\n| {{pre}}     | The code before the tag : **pre** \u0026lt;tag  \u003e\u0026lt;/tag\u0026gt;                             | no                                                                |\r\n| {{post}}    | The code after the tag : \u003c tag  \u003e\u0026lt;/tag\u0026gt; **post**                               | no                                                                |\r\n| {{inner}}   | The attributes inside the tag : \u003c tag **inside** \u003e \u0026lt;/tag\u0026gt;                      | yes                                                               |\r\n| {{between}} | The content between the tag : \u003c tag \u003e**between**\u0026lt;/tag\u003e                            | By default this value is escaped \u003cbr /\u003ebut it could be un-escaped |\r\n| {{id}}      | The id attribute (it is also included in {{inner}}): \u003c tag **id** \u003e \u0026lt;/tag\u0026gt;     | yes                                                               |\r\n| {{name}}    | The name attribute (it is also included in {{inner}}): \u003c tag **name** \u003e \u0026lt;/tag\u0026gt; | yes                                                               |\r\n\r\nExample of a normal tag:\r\n\r\n```php\r\n$blade-\u003epattern['input']='{{pre}}\u003cinput{{inner}} \u003e{{between}}\u003c/input\u003e{{post}}';\r\n```\r\n\r\n\u003e Note :(*) What is escaped?. For example the text \"\u003chello world\u003e\", if it escaped, it is displayed as \"\u0026amp;lt;hello\u0026amp;gt;\"\r\n\r\n#### Custom attribute\r\n\r\nIt is possible to add a custom attribute that it could be used inside a pattern.\r\n\r\nFor example, let's add the custom tag called **customtag**\r\n\r\n```php\r\n$blade-\u003ecustomAttr['customtag']='This attr is missing!'; \r\n$blade-\u003epattern['alert']='{{pre}}\u003cdiv {{inner}}\u003e\u003ch1\u003e{{customtag}}\u003c/h1\u003e{{between}}\u003c/div\u003e{{post}}';\r\n```\r\n\r\nAnd in the view\r\n\r\n```html\r\n@alert(text=\"hi there\" class=\"alert-danger\" customtag=\"it is a custom tag\")\u003cbr\u003e\r\n@alert(text=\"hi there\" class=\"alert-danger\" )\u003cbr\u003e\r\n```\r\n\r\n## Methods\r\n\r\nThe library has a lit of methods that they could be used to initialize and configure the library. They are optionals.\r\n\r\n### useBootstrap5\r\n\r\nIt sets the patterns and classes to be compatible with bootstrap 4. \r\n\r\nif argument is true, then it adds the CSS to the **css box** from the CDN   \r\n\r\nOur code\r\n\r\n```php\r\n$blade-\u003euseBootstrap5(true); \r\n```\r\n\r\n#### Note: If we want to use the css box, then we need to add to our view the next code\r\n\r\n```html\r\n\u003cheader\u003e\r\n\t@cssbox\r\n\u003c/header\u003e\r\n```\r\n\r\n\r\n\r\n### useBootstrap4\r\n\r\nIt sets the patterns and classes to be compatible with bootstrap 4. \r\n\r\nif argument is true, then it adds the CSS to the **css box** from the CDN   \r\n\r\nOur code\r\n\r\n```php\r\n$blade-\u003euseBootstrap4(true); \r\n```\r\n\r\n#### Note: If we want to use the css box, then we need to add to our view the next code\r\n\r\n```html\r\n\u003cheader\u003e\r\n\t@cssbox\r\n\u003c/header\u003e\r\n```\r\n\r\n\r\n\r\n### useBootstrap3\r\n\r\nIt sets the patterns and classes to be compatible with bootstrap 3. \r\n\r\nif argument is true, then it adds the CSS to the **css box** from the CDN   \r\n\r\n```php\r\n$blade-\u003euseBootstrap3(true); \r\n```\r\n\r\n### addCss\r\n\r\nIt adds a CSS to the **css box**\r\n\r\n```php\r\n$this-\u003eaddCss('css/datepicker.css','datepicker'); \r\n```\r\n\r\n### addJS\r\n\r\nIt adds a javascript link to the **js box**\r\n\r\n```php\r\n$this-\u003eaddJs('\u003cscript src=\"js/jquery.js\"\u003e\u003c/script\u003e','jquery');\r\n```\r\n\r\n### addJSCode\r\n\r\nIt adds a javascript code to the **js box**\r\n\r\n```php\r\n$blade-\u003eaddJsCode('alert(\"hello\");');\r\n```\r\n\r\n\r\n\r\n## Public Fields\r\n\r\nIt is the list of public fields of the class. The fields are public because for performance purpose (versus to use setter and getters)\r\n\r\n### $pattern\r\n\r\nIt stores the list of patterns used by the code\r\n\r\n```php\r\n$this-\u003epattern['sometag']='{{pre}}\u003ctag {{inner}}\u003e{{between}}\u003c/tag\u003e{{post}}';\r\n\r\n```\r\n\r\n\u003e Note: see \"Pattern-Variable inside the code\" to see the list of pattern-variables\r\n\r\n### $defaultClass\r\n\r\nThe default CSS class added to a specific tag.\r\n\r\n```php\r\n$this-\u003edefaultClass['sometag']='classred classbackgroundblue';\r\n```\r\n\r\n### $customAttr\r\n\r\nIt adds a custom adds that it could be used together with $this-\u003epattern\r\n\r\n```php\r\n$this-\u003ecustomAttr['customtag']='XXXXX'; // So we could use the tag {{customtag}}. 'XXXXX' is the default value\r\n```\r\n\r\n\u003e The custom attribute always removes the quotes and double quotes, so if our value is \"hello\" -\u003e hello\r\n\r\n## Creating a new pattern\r\n\r\nIt is possible to add a new pattern by extending the PHP class.\r\n\r\n#### 1- Adding a new pattern\r\n\r\n```\r\n$this-\u003epattern['mynewtag']='\u003cmycustomtag {{inner}}\u003e{{between}}\u003c/mycustomtag\u003e';\r\n```\r\n\r\n#### 2- Creating a new method\r\n\r\nYou could create a new PHP class or trait and extend our class. Inside this new structure, you must add a new method with the next structure\r\n\r\nUsing a new class\r\n\r\n```php\r\nuse eftec\\bladeone\\BladeOne;\r\nuse eftec\\bladeonehtml\\BladeOneHtml;\r\n\r\nclass MyBlade extends  BladeOne {\r\n    use BladeOneHtml;\r\n}\r\nclass MyClass extends MyBlade {\r\n    protected function compileMyNewTag($expression) { // the method must be called \"compile\" + your name of tag.\r\n        $args = $this-\u003egetArgs($expression); // it separates the values of the tags\r\n        $result = ['', '', '', '']; // inner, between, pre, post\r\n        // your custom code here\r\n        return $this-\u003erender($args, 'mynewtag', $result); // we should indicate to use our pattern.\r\n    }\r\n}\r\n```\r\n\r\nUsing a trait (recommended, why? It is because trait are more flexible)\r\n\r\n```php\r\ntrait MyTrait {\r\n    protected function compileMyNewTag($expression) { // the method must be called \"compile\" + your name of tag.\r\n        $args = $this-\u003egetArgs($expression); // it separates the values of the tags\r\n        $result = ['', '', '', '']; // inner, between, pre, post\r\n        // your custom code here\r\n        return $this-\u003erender($args, 'mynewtag', $result); // we should indicate to use our pattern.\r\n    }\r\n}\r\n\r\nclass MyClass extends  BladeOne {\r\n    use BladeOneHtml;\r\n    use MyTrait; // \u003c-- our trait\r\n}\r\n```\r\n\r\n\r\n\r\n#### 3- Creating a new parent Method (container method)\r\n\r\nFor creating a parent method, you must push a new value inside $this-\u003ehtmlItem. You can store whatever you want to.\r\n\r\n```php\r\n$this-\u003epattern['mynewtag']='\u003cmycustomtag {{inner}}\u003e{{between}}';\r\n```\r\n\r\n```php\r\nprotected function compileMyNewTag($expression) {\r\n\t$args = $this-\u003egetArgs($expression); // it loads and separates the arguments.\r\n    $this-\u003ehtmlItem[] = ['type' =\u003e 'mynewtag','value' =\u003e @$args['value']\r\n    ];\r\n    $result = ['', '', '', '']; // inner, between, pre, post\r\n    //unset($args['value']); // we could unset values that we don't want to be rendered.\r\n    return $this-\u003erender($args, 'select', $result);\r\n}\r\n\r\n```\r\n\r\n\u003e Our objective is to render PHP code, not to evaluate a code. For example, if $args['somearg']=$variable, then our value is $variable (as text), no matter the real value of the variable.\r\n\r\nYou must also create a method to end the container, and we must also add a new pattern.\r\n\r\n```php\r\n$this-\u003epattern['mynewtag_end']='\u003c/mycustomtag\u003e';\r\n```\r\n\r\n```php\r\nprotected function compileEndNewTag() {\r\n    $parent = @\\array_pop($this-\u003ehtmlItem); // remove the element from the stack\r\n    if (\\is_null($parent) || $parent['type']!=='newtag') { // if no element in the stack or it's a wrong one then error\r\n        $this-\u003eshowError(\"@endnewtag\", \"Missing @initial tag\", true);\r\n    }\r\n    // our code\r\n    return $this-\u003epattern[$parent['type'] . '_end']; // renders the element of the stack\r\n}\r\n```\r\n\r\nOur items could know if they are inside a tag with the next operation\r\n\r\n```php\r\n$parent = \\end($this-\u003ehtmlItem);\r\n```\r\n\r\n#### 4- Advanced \r\n\r\nWe could create a component that requires CSS and JavaScript.\r\n\r\nFor example a date picker.\r\n\r\n```php\r\nprotected function compileDatePicker($expression) {\r\n\t$args = $this-\u003egetArgs($expression); // it loads and separates the arguments.\r\n    \\array_push($this-\u003ehtmlItem, ['type' =\u003e 'mynewtag','value' =\u003e @$args['value']]);\r\n    $result = ['', '', '', '']; // inner, between, pre, post\r\n    if(!isset($args['id'])) {\r\n        $this-\u003eshowError(\"@datepicker\", \"Missing @id tag\", true);\r\n    }    \r\n    $this-\u003eaddJs('\u003cscript src=\"js/jquery.js\"\u003e\u003c/script\u003e','jquery'); // our script needs jquery (if it is not loaded)\r\n    $this-\u003eaddCss('css/datepicker.css','datepicker'); \r\n    $this-\u003eaddjscode('$(.'.$args['id'].').datepicker();');\r\n    \r\n    //unset($args['value']); // we could unset values that we don't want to be rendered.\r\n    return $this-\u003erender($args, 'select', $result);\r\n}\r\n```\r\n\r\n\u003e  Note: It's better to add the library of jQuery and date picker once in our code\r\n\r\n\r\n\r\n## Version history\r\n* 2.5 2024-12-31\r\n  * Updated to PHP 8.4 \r\n* 2.4 2024-03-02\r\n  * Updating dependency to PHP 7.4. The extended support of PHP 7.2 ended 3 years ago.\r\n  * Added more type hinting in the code\r\n* 2.3.2 2023-01-31\r\n  * a typo in pagination \r\n* 2.3.1 2023-01-31\r\n  * fixed a problem with pagination.\r\n  * some cleanups\r\n  * update dependencies.\r\n* 2.3 2022-02-04\r\n  * Now this library is compatible with PHP 7.2 and higher.\r\n  * Some cleanups and type hinting (return methods)\r\n* 2.2 2021-12-11\r\n  * fixed a problem with optgroup and when the argument is an associative array. \r\n* 2.1 2021-10-01\r\n  * Added support for Bootstrap 5.0\r\n  * Updated Bootstrap CDNs\r\n  * added tags @container, @row, @col\r\n* 2.0 2021-09-24\r\n  * Dropped support for PHP 5.x. Updated support for BladeOne 4.0  \r\n* 1.8.1 2021/07/03\r\n  * It solves a problem when the argument is defined as id=\"somevalue$id\"  \r\n* 1.8 2021/06/09 \r\n   * @checkbox and @radio now works with variables. The element is checked only if the value is not null, empty or zero.\r\n* 1.7.1 2021/02/06\r\n    * @item now marks the value \"checked\" or \"selected\" if the values is equals to the current value of the parent object\r\n    * Bootstrap 4 **CDN** now it uses the version 4.6    \r\n    * for @item and @items, the field name and **idname** are created automatically. If id is set, then it uses it.\r\n* 1.7 2021/01/12\r\n    * @button now considers value as the value of argument while text the visual content.  \r\n    * It also uses in_array instead of isset().\r\n    * Compatible with PHP 8.x\r\n* 1.6.1 2020/08/31    \r\n    * Pagination now it has \"first\" and \"last\" buttons.\r\n* 1.6 2020/08/30   \r\n    * Added tag @pagination       \r\n    * Added the method setTranslationControl() and getTranslationControl()      \r\n* 1.5 2020/06/07\r\n    * Added a new optional argument to processArgs() and render();\r\n    * Added unit test.\r\n* 1.4 2020/05/02\r\n    * now it allows empty arguments. It requires BladeOne 3.43 or higher.  \r\n    * added unit test.\r\n* 1.3 2020/04/22\r\n    * added method useBootstrap3()\r\n    * added default class for textarea in useBootstrap4()\r\n* 1.2 2020/04/21  \r\n    * tag @@alert()  \r\n    * fixed: @@items() now it keeps the selection   \r\n    * tag @@cssbox, @@jsbox and @jscodebox\r\n    * method useBootstrap4($cdn=false) has a new argument\r\n* 1.1 2020/04/21 \r\n    * Method isVariablePHP() moved to BladeOne\r\n    * Update LICENSE.\r\n    * Added more documentation.    \r\n* 1.0 2020-04-20 First version\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feftec%2Fbladeonehtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feftec%2Fbladeonehtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feftec%2Fbladeonehtml/lists"}