Overview
BLOCS is an extension package that makes Blade of Laravel more convenient. You can describe the repetitive processes such as displaying a list of books in the Blade template as follows.
@foreach($books as $book) <tr> <td>{{ $book->id }}</td> <td>{{ $book->title }}</td> ... <td> @foreach($book->tags as $bookTag) <span>{{ $bookTag->name }}</span><br> @endforeach </td> ... </tr> @endforeach
You can describe a similar process with BLOCS as follows. We are developing BLOCS with the aim of creating a template engine that can be written in a simple way, utilizing the structure of HTML without destroying it.
<tr data-loop=$books> <td>{{ $book->id }}</td> <td>{{ $book->title }}</td> ... <td> <span data-loop=$book->tags data-assign=$bookTag>{{ $bookTag->name }}</br></span> </td> ... </tr>
Features
- Templates can be coded without breaking HTML (Tag style, Comment style)
<div class="error" data-exist=$error>{{ $message }}</div>
- Specify validation in templates.
<form method="post"> @csrf <label for="name">Name</label> <input type="text" id="name" name="name" data-filter="katakana" required /> <!-- data-form="name" data-validate="required" data-lang="This is a required field." --> @error("name") <div>{{ $message }}</div> @enderror <input type="submit" /> </form>
- Dynamically add
select
radio
checkbox
items.
/routes/web.php
Line 2: Add Warning
Route::get("/blocs", function () { \Blocs\Option::add("level", ["2" => "Warning"]); return view("example", [ "level" => "2" ]); });
/resources/views/example.blocs.html
<html> <form> <select name="level"> <option value="">No error</option> <option value="1">Fatal error</option> </select> </form> </html>
http://127.0.0.1:8000/blocs
<html> <form> <select name="level"> <option value="">No error</option> <option value="1">Fatal error</option> <option value="2" selected>Warning</option> </select> </form> </html>
Installation
Please install by composer.
laravel-app % composer require blocs/blocs Info from https://repo.packagist.org: #StandWithUkraine Using version dev-main for blocs/blocs ./composer.json has been updated Running composer update blocs/blocs Loading composer repositories with package information Info from https://repo.packagist.org: #StandWithUkraine Updating dependencies Lock file operations: 1 install, 0 updates, 0 removals - Locking blocs/blocs (dev-main 1c25ad6) Writing lock file Installing dependencies from lock file (including require-dev)
Ststem requirements
Laravel >= 7
php >= 7.2.5
Quick guide
The file name of the BLOCS template is *.blocs.html
. Data attributes data-*
can be described in two ways: tag style, in which attributes are added to HTML tags, and comment style, in which attributes are described in comments. 4 types of data attributes are described in tag style and comment style to generate HTML dynamically.
Tag style
Tag style is a description method for adding data attributes to HTML tags. The data attribute added to the start tag affects even the end tag. In the example below, the value of $message
replaces all content between the div
. The added data attributes will be removed in the generated HTML.
/routes/web.php
Route::get("/blocs", function () { return view("example", [ "error" => true, "message" => "A fatal error has occurred." ]); });
/resources/views/example.blocs.html
Line 2: If $error
is true
, $message
is output.
<html> <div class="error" data-exist=$error data-val=$message>Message</div> </html>
http://127.0.0.1:8000/blocs
<html> <div class="error">A fatal error has occurred.</div> </html>
Comment style
Comment style is used when loading other templates or dynamically adding attributes to HTML tags. The data attribute data-attribute
replaces the attribute value of the HTML tag following the comment style. In the example below, if $error
is false
(no error occurred), the class
of the div
is set to success
. Tag style and comment style can be used together.
/routes/web.php
Route::get("/blocs", function () { return view("example", [ "error" => false, "message" => "No error has occurred." ]); });
/resources/views/example.blocs.html
Line 2: If $error
is false
, class
is replaced with success
.
<html> <!-- data-attribute="class" data-val="success" data-none=$error --> <div class="error" data-val=$message>Message</div> </html>
http://127.0.0.1:8000/blocs
<html> <div class="success">No error has occurred.</div> </html>