README

Blade Component Scopes

This package allows you to scope attributes to specific elements within your Blade components.

<label {{ $attributes->scope('label')->merge(['class' => 'text-gray-500']) }}>

Installation

Requires php 8.2+ and Laravel 10+

First, install Blade Component Scopes via composer:

composer require abdelhamiderrahmouni/blade-component-scopes

Usage

This package adds a scope() macro to Laravel's ComponentAttributeBag, allowing you to namespace your component attributes for different elements of your component.

Basic Example

<x-forms.input name="first_name"
               :label="__('Hello')"
               label:class="flex flex-col"
               label:for="#name-input"
               input:id="name-input"
               container:id="name-input-container" />

In your component view, access scoped attributes using the scope() method:

// forms.input.blade.php
<div {{ $attributes->scope('container')->merge(['class' => 'flex gap-y-2']) }}>
    
    @if($label)
        <label {{ $attributes->scope('label')->merge(['class' => 'text-gray-500']) }}>
            {{ $label }}
        </label>
    @endif

    <input {{ $attributes->scope('input')->merge(['class' => 'border-b']) }} />
</div>

How It Works

The scope() method filters attributes based on the prefix. For example:

• The label's class in label:class="font-bold" becomes available when using $attributes->scope('label')
• The input's ID in input:id="first-name-input" becomes available when using $attributes->scope('input')
• The container's class in container:class="mt-4" becomes available when using $attributes->scope('container')

This allows you to:

1. Organize attributes for different elements/parts of your component
2. Create more intuitive component interfaces
3. Maintain cleaner component templates

Benefits

• 🎯 Better organization of component attributes
• 🔍 More explicit attribute targeting
• 🧩 Cleaner components with less clutter
• 💪 Fully compatible with Laravel's existing attribute merging

If you want to benifit from the scope method in your Blade views without installing this package, here is the magic sauce:

Add the following code to your AppServiceProvider:

// AppServiceProvider.php
use Illuminate\View\ComponentAttributeBag;

public function register(): void
{
    ComponentAttributeBag::macro('scope', function (string $scope): ComponentAttributeBag {
        $prefix = $scope . ':';
        $prefixLength = strlen($prefix);

        $scopedAttributes = [];
        foreach ($this->getAttributes() as $key => $value) {
            if (str_starts_with($key, $prefix)) {
                $scopedAttributes[substr($key, $prefixLength)] = $value;
            }
        }

        return new ComponentAttributeBag($scopedAttributes);
    });
}

Contributing

Thank you for considering contributing to Blade Component Scopes! The contribution guide can be found in the CONTRIBUTING.md file.

Blade Component Scopes is an open-sourced software licensed under the MIT license.