aqua/blade-emerald

Emmet like Abbreviation to generate and wrap Laravel Blade Component with markup

v1.2.0 2023-03-31 08:14 UTC

Requires

• php: ^7.3|^8.0
• illuminate/support: ^8.0|^9.0|^10.0
• illuminate/view: ^8.0|^9.0|^10.0
• spatie/html-element: ^1.1.4

Requires (Dev)

• orchestra/testbench: ^6.0|^7.0|^8.0
• pestphp/pest: ^1.21|^2.3
• pestphp/pest-plugin-laravel: ^1.1|^2.0

MIT

• Sourav Rakshit

• html
• laravel
• Blade component
• Blade HTML Markup Generate

README

Emmet like Abbreviation to generate and wrap Laravel Blade Component with markup

🌈 Features

• Generate HTML in a Blade file via package provided component: <x-markup make="div.col>span#alert">
• Emmet style syntax to produce nested markup
• Wrap around any content / other component with markup
• Make any Blade Component accept abbreviation to wrap itself with markup ( doesn't work for Anonymous Components )

🛸 Compatibility

Package Version	Laravel version	PHP version	Compatible
^1.2	10.*	8.1 - 8.2	🟢
^1.0	9.*	8.0 - 8.1	🟢
^1.0	8.*	7.3 - 8.0	🟢
	7.*	7.3 - 7.4	🔴

📥 Installation

composer require aqua/blade-emerald

📖 Usage

💡 The package provides a Blade Component <x-emerald-markup />, This component can be used like <x-markup ...> as an alias. The component support one prop named make which accept the abbreviation

🏷️ Generate static nested markup

<x-markup make="div.card[style='color:green;'] > div.card-body#box" />

produced html

<div class="card" style="color:green;">
    <div class="card-body" id="box"></div>
</div>

🏷️ Wrap some content

<x-markup make="div.col>div.alert.alert-success[role=alert]">
    <strong>Success !</strong> give it a click if you like.
</x-markup>

produced html

<div class="col">
    <div class="alert alert-success" role="alert">
        <strong>Success !</strong> give it a click if you like.
    </div>
</div>

🏷️ Accept abbreviation in your Blade Component

this feature doesn't support Anonymous Components

1. use Aqua\Emerald\Traits\Markup trait in your Component Class

class YourComponent extends Component {
    use Markup;
    ...

1. the Markup trait assumes the prop name to be wrap, so lets add this as a class property & instantiate

public function __construct(public $wrap) {...} // using php 8.0 constructor property promotion

read more about constructor property promotion

1. accept abbreviation

<x-your-component wrap=".card.bg-dark.pt-2 > .card-body.text-danger" />

produced html

<div class="card bg-dark pt-2">
    <div class="card-body text-danger">
        <!-- actual content of your-component -->
        <p>Laravel... The PHP Framework for Web Artisans</p>
        <!-- actual content of your-component -->
    </div>
</div>

1. accept abbreviation using prop of your choise to customize the prop name that receives the abbreviation create a static property $wrapby and set its value to your prop name

class YourComponent extends Component {
    use Markup;

    protected static $wrapby = 'markup'; 👈

    public function __construct(public $markup, ...) {
                                        👆
    }
    ...

<x-your-component markup=".card.bg-dark.pt-2 > .card-body.text-danger" />
                   👆

🧰 Useful Examples

Bootstrap grid

<x-markup make="div.container > div.row > div.col-md-6">
    <p>Hello world!</p>
</x-markup>

Breadcrumb

<x-markup make="nav[aria-label=breadcrumb]>ol.breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
</x-markup>

Bootstrap card with links

<x-markup make="div.card.text-center">
    <x-markup make="div.card-header>ul.nav.nav-pills.card-header-pills">
        <x-markup make="li.nav-item>a.nav-link.active[href=#]">Active</x-markup>
        <x-markup make="li.nav-item>a.nav-link[href=#]">Link</x-markup>
        <x-markup make="li.nav-item>a.nav-link.disabled[href=# tabindex=-1 aria-disabled=true]">Disabled</x-markup>
    </x-markup>
    <div class="card-body">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    </div>
</x-markup>

Bootstrap form-group

<x-markup make="div.form-group>div.mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" aria-describedby="emailHelp" />

    <x-markup make="div>div.#emailHelp.form-text>span.text-danger.validation-msg" />
</x-markup>

Self closing tag

<x-markup make="img#profile[src=/avatar.jpg width=80]" />

Alpine x-for

<ul x-data="{ colors: [{ id: 1, label: 'Green' }, ...] }">
    <x-markup make="template[x-for=color in colors] [:key=color.id] > li[x-text=color.label]" />
</ul>

equivalent to

<ul x-data="{ colors: ...}">
    <template x-for="color in colors" :key="color.id">
        <li x-text="color.label"></li>
    </template>
</ul>

📚 Abbreviation Guide

checkout spatie/html-element to get more idea.

Syntax	Example	Description
#id	p#foo	ID attribute
.class	p.foo	Class attribute
>	div.row>div.col	Nesting with child
[style='color:green;']	div[style='color:green;']	Single attribute
[title=Hello world][data-foo=bar]		Multiple attributes

📅 Changelog

Please see CHANGELOG for more information on what has changed recently.

🏆 Credits

This package is actually a wrapper around spatie/html-element, all the hard work has been done by Team Spatie so they deserve all the credits. All I did is make it work with Laravel Blade Components.

• 
• All Contributors

🎫 License

The MIT License (MIT). Please see License File for more information.