Filament JSON

Filament plugin for processing JSON field

logo

Installation

You can install the package via composer:

composer require pepperfm/filament-json

You can publish the config file with:

php artisan vendor:publish --tag="filament-json-config"

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-json-views"

Usage

Common case

use PepperFM\FilamentJson\Columns\JsonColumn;

JsonColumn::make('properties');

JsonColumn::make('properties')
    ->asDrawer();

JsonColumn::make('properties')
    ->asModal();

The button() and modal() method accept the type of array|Arrayable|\stdClass, and implements basic properties of button and modal blade components from Filament documentation: Core Concepts - Blade Components

use PepperFM\FilamentJson\Columns\JsonColumn;

$buttonConfig = literal(
    color: 'primary',
    size: 'xs'
);
$modalConfig = [
    'icon' => 'heroicon-m-sparkles',
    'alignment' => 'start',
    'width' => 'xl',
    'closedByEscaping' => true,
    'closed_button' => false, // also accepts camel_case
];

JsonColumn::make('properties')
    ->asModal()
    ->button($buttonConfig)
    ->modal($modalConfig);

DTO schemas of components configuration:

class ButtonConfigDto
{
    public string $color = 'primary';

    public string $icon = 'heroicon-o-swatch';

    public ?string $label = null;

    public ?string $tooltip = null;

    public string $size = 'md';

    public ?string $href = null;

    public ?string $tag = null;
}

class ModalConfigDto
{
    public ?string $id = null;

    public string $icon = 'heroicon-o-swatch';

    public string $iconColor = 'primary';

    public string $alignment = 'start';

    public string $width = 'xl';

    public bool $closeByClickingAway = true;

    public bool $closedByEscaping = true;

    public bool $closedButton = true;

    public bool $autofocus = true;
}

Testing

composer test

Socialment