[12.x] Add InteractsWithData trait to ComponentAttributeBag

[KennedyTedesco]

This PR adds the InteractsWithData trait to ComponentAttributeBag, giving developers cleaner ways to work with Blade component attributes.

Why this change?

Working with component attributes currently requires a lot of boilerplate:

// Checking if attribute has a value
if (($attributes->get('data-progress') ?? '') !== '') {
    // ...
}

// Converting to boolean
$isExpanded = in_array($attributes->get('data-expanded'), ['true', '1', 'on', 'yes'], true); // Or using filter_var()

// Getting integers with defaults
$maxItems = is_numeric($attributes->get('data-max-items')) ? (int) $attributes->get('data-max-items') : 5;

What's new?

By reusing InteractsWithData, we gain many powerful methods.

✅ Simple validation methods

{{-- Check if attribute has a value --}}
@if ($attributes->filled('data-tooltip'))
    <span data-tooltip="{{ $attributes->get('data-tooltip') }}">
@endif

{{-- Check multiple attributes at once --}}
@if ($attributes->anyFilled(['data-image-src', 'data-video-url']))
    <div class="media-container">...</div>
@endif

🎯 Type casting that just works

{{-- Boolean conversion --}}
<dialog @if($attributes->boolean('data-modal-open')) open @endif>

{{-- Integer with default --}}
<div data-carousel-slides="{{ $attributes->integer('data-slides-count', 3) }}">

{{-- String as Stringable --}}
<h1 data-heading-level="{{ $attributes->string('data-level')->lower() }}">

{{-- Even enums! --}}
<div data-theme="{{ $attributes->enum('data-color-scheme', ThemeEnum::class)?->value }}">

🌟 Card component with dynamic link

{{-- Before: Messy conditional logic --}}
@if (($attributes->get('href') ?? '') !== '')
    <a href="{{ $attributes->get('href') }}" class="card-wrapper">
        <div class="card-content">{{ $slot }}</div>
    </a>
@else
    <div class="card-wrapper">
        <div class="card-content">{{ $slot }}</div>
    </div>
@endif

{{-- After: Clean and readable --}}
@if ($attributes->filled('href'))
    <a {{ $attributes->only(['href', 'target', 'rel'])->class('card-wrapper') }}>
        <div class="card-content">{{ $slot }}</div>
    </a>
@else
    <div {{ $attributes->except(['href', 'target', 'rel'])->class('card-wrapper') }}>
        <div class="card-content">{{ $slot }}</div>
    </div>
@endif

[taylorotwell]

Are there slight breaking changes here around dot notation since the previous example uses array_key_exists and InteractsWithData uses Arr::has for example.

[KennedyTedesco]

Hey @taylorotwell, that's a good concern and very well pointed out.

However, I couldn't find any case where this would be an issue for us, because ComponentAttributeBag will always have HTML attributes as string values, so there shouldn't be nested arrays. PHP arrays as values will become a @prop and will not be in the component's attributes bag.

Can we have someone else double-check my assumptions? (This person could be you, of course. :D) I've also submitted some more unit tests to validate if we're handling attributes with dots correctly.

In any case, I'm open to making the required changes, like keeping the original has() and hasAny() code. But, right now, I can't see how this could be an issue for us.