Prime Components

Prime components adalah content di dalam schema: baris teks, icon, atau gambar. Komponen ini tidak memiliki value, tidak memiliki field name, dan tidak mempersist apa pun. Gunakan Prime component ketika form perlu menyampaikan informasi. Menggunakan disabled field hanya untuk menampilkan kalimat akan menambahkan nama field dan validation rule pada sesuatu yang sebenarnya bukan input.

Contoh minimal

php

use Illuminate\Database\Eloquent\Model;
use PandaPanel\Forms\Components\TextInput;
use PandaPanel\Forms\FormSchema;
use PandaPanel\Forms\Prime\Text;

public static function form(FormSchema $schema): FormSchema
{
    return $schema->schema([
        Text::make(static fn (?Model $record): string => $record === null
            ? 'This account will be created immediately.'
            : 'Editing '.$record->getAttribute('name')),

        TextInput::make('name')->required(),
    ]);
}

Ada tiga Prime component, semuanya berada di namespace PandaPanel\Forms\Prime.

`Text`

php

use Illuminate\Database\Eloquent\Model;
use PandaPanel\Forms\Prime\Text;
use PandaPanel\Tables\Enums\BadgeColor;

Text::make('Changes take effect immediately.')
    ->color(BadgeColor::Warning)
    ->icon('triangle-alert')
    ->small();

Text::make(static fn (?Model $record): string => 'Last saved '.($record?->updated_at?->diffForHumans() ?? 'never'));

Method	Signature	Default
`make()`	`static make(string\|Closure(?Model): string $content): self`
`color()`	`color(BadgeColor $color): self`	`null`
`icon()`	`icon(string $icon): self`	`null`
`small()`	`small(bool $small = true): self`	`false`

Content dapat di-resolve berdasarkan record sehingga teks dapat menjelaskan sesuatu tentang record yang sedang diedit. Closure berjalan di server; hanya hasil string-nya yang melintasi wire.

`Icon`

php

use PandaPanel\Forms\Prime\Icon;
use PandaPanel\Tables\Enums\BadgeColor;

Icon::make('shield-check')
    ->color(BadgeColor::Success)
    ->label('This account uses two-factor authentication');

Method	Signature	Default
`make()`	`static make(string $icon): self`
`color()`	`color(BadgeColor $color): self`	`null`
`label()`	`label(string $label): self`	`null`

Nama icon adalah registry key seperti icon lainnya di Panel. Schema tidak dapat meminta browser merender icon yang tidak pernah masuk build. label() menjadi accessible name dan juga dirender di samping icon. Icon tanpa label tidak memberikan informasi tekstual apa pun kepada pembaca atau assistive technology.

`Image`

php

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Storage;
use PandaPanel\Forms\Prime\Image;

Image::make(static fn (?Model $record): ?string => $record === null
    ? null
    : Storage::disk('public')->url((string) $record->getAttribute('avatar')))
    ->alt('Current avatar')
    ->width(96)
    ->rounded();

Method	Signature	Default
`make()`	`static make(string\|Closure(?Model): ?string $url): self`
`alt()`	`alt(string $alt): self`	`''`
`width()`	`width(int $pixels): self`	`null`, minimum 1
`rounded()`	`rounded(bool $rounded = true): self`	`false`

URL dibuat di server, termasuk ketika berasal dari Closure yang membaca record. Browser tidak membangun URL dari identifier sendiri. URL yang menghasilkan empty string atau non-string diserialisasi sebagai null, sehingga frontend tidak merender apa pun daripada menampilkan broken image.

`BadgeColor`

PandaPanel\Tables\Enums\BadgeColor digunakan kembali agar framework tidak memiliki dua vocabulary warna berbeda. Status menggunakan color yang sama di mana pun tampil: Neutral, Success, Warning, Danger, Info. Ini merupakan closed set karena frontend memetakan setiap case ke literal Tailwind class.

Data yang dikirim ke frontend

Class	`component`	Keys
`Text`	`prime-text`	`content`, `color`, `icon`, `small`
`Icon`	`prime-icon`	`icon`, `color`, `label`
`Image`	`prime-image`	`url`, `alt`, `width`, `rounded`

Ketiganya mengimplementasikan fields(): array sebagai []. Itulah yang membuatnya benar-benar content: tidak menambahkan validation, tidak ikut hydration, dan tidak ikut write.

php

Text::make('Hello')->fields();      // []
Icon::make('check')->fields();      // []
Image::make('/logo.png')->fields(); // []

Lokasi Prime component dapat ditempatkan

Prime component dapat diletakkan di mana pun FormComponent dapat berada: top-level schema, Section, Grid, Tab, Step, Callout, atau CustomComponent.

php

use PandaPanel\Forms\Components\TextInput;
use PandaPanel\Forms\Layouts\Section;
use PandaPanel\Forms\Prime\Text;

Section::make('Billing')->schema([
    Text::make('Invoices are sent on the first of the month.')->small(),
    TextInput::make('billing_email')->email(),
]);

Record yang digunakan untuk me-resolve content adalah record yang dipakai container ketika diserialisasi. Karena itu Prime component di dalam Relationship menerima related record, bukan owner record.