opensource/filament
3
0
Fork 0
mirror of https://github.com/filamentphp/filament.git synced 2026-09-24 15:42:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Dan Harrin
2023-07-01 23:23:27 +01:00
parent d1e37fc22e
commit e61442a5e2
82 changed files with 1282 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-assets/app/app/Http/Livewire/Infolists/Entries.php
+343
View File
@@ -0,0 +1,343 @@
<?php
namespace App\Http\Livewire\Infolists;
use Filament\Infolists\Components\ColorEntry;
use Filament\Infolists\Components\Group;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Filament\Infolists\Components\IconEntry;
use Filament\Infolists\Components\TextEntry;
use Filament\Infolists\Concerns\InteractsWithInfolists;
use Filament\Infolists\Contracts\HasInfolists;
use Filament\Infolists\Infolist;
use Livewire\Component;
class Entries extends Component implements HasInfolists
{
use InteractsWithForms;
use InteractsWithInfolists;
public function infolist(Infolist $infolist): Infolist
{
return $infolist
->schema([
Group::make()
->id('simple')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('title')
->state('What is Filament?'),
TextEntry::make('author.name')
->state('Dan Harrin'),
]),
Group::make()
->id('helperText')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('name')
->state('Dan Harrin')
->helperText('Your **full name** here, including any middle names.'),
]),
Group::make()
->id('hint')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('apiKey')
->label('API key')
->state('HGA3CH5AB345JD9MQ3')
->hint('[Documentation](/documentation)'),
]),
Group::make()
->id('hintColor')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('apiKey')
->label('API key')
->state('HGA3CH5AB345JD9MQ3')
->hint('[Documentation](/documentation)')
->hintColor('primary'),
]),
Group::make()
->id('hintIcon')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('apiKey')
->label('API key')
->state('HGA3CH5AB345JD9MQ3')
->hint('[Documentation](/documentation)')
->hintIcon('heroicon-m-question-mark-circle'),
]),
Group::make()
->id('tooltips')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('title')
->state('What is Filament?')
->tooltip('Shown at the top of the page'),
]),
Group::make()
->id('text')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('title')
->state('What is Filament?'),
]),
Group::make()
->id('textBadge')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('status')
->state('published')
->badge()
->color(fn (string $state): string => match ($state) {
'draft' => 'gray',
'reviewing' => 'warning',
'published' => 'success',
'rejected' => 'danger',
}),
]),
Group::make()
->id('textList')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('authors.name')
->listWithLineBreaks()
->state(['Dan Harrin', 'Ryan Chandler', 'Zep Fietje', 'Adam Weston', 'Dennis Koch']),
]),
Group::make()
->id('textBulletList')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('authors.name')
->listWithLineBreaks()
->bulleted()
->state(['Dan Harrin', 'Ryan Chandler', 'Zep Fietje', 'Adam Weston', 'Dennis Koch']),
]),
Group::make()
->id('textColor')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('status')
->state('Published')
->color('primary'),
]),
Group::make()
->id('textIcon')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('email')
->state('dan@danharrin.com')
->icon('heroicon-m-envelope'),
]),
Group::make()
->id('textIconAfter')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('email')
->state('dan@danharrin.com')
->icon('heroicon-m-envelope')
->iconPosition('after'),
]),
Group::make()
->id('textLarge')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('title')
->state('What is Filament?')
->size('lg'),
]),
Group::make()
->id('textBold')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('title')
->state('What is Filament?')
->weight('bold'),
]),
Group::make()
->id('textMono')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('apiKey')
->label('API key')
->state('HGA3CH5AB345JD9MQ3')
->fontFamily('mono'),
]),
Group::make()
->id('textCopyable')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('apiKey')
->label('API key')
->state('HGA3CH5AB345JD9MQ3')
->copyable()
->copyMessage('Copied!')
->copyMessageDuration(1500),
]),
Group::make()
->id('icon')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
IconEntry::make('status')
->state('reviewing')
->icon(fn (string $state): string => match ($state) {
'draft' => 'heroicon-o-pencil',
'reviewing' => 'heroicon-o-clock',
'published' => 'heroicon-o-check-circle',
}),
]),
Group::make()
->id('iconColor')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
IconEntry::make('status')
->state('reviewing')
->icon(fn (string $state): string => match ($state) {
'draft' => 'heroicon-o-pencil',
'reviewing' => 'heroicon-o-clock',
'published' => 'heroicon-o-check-circle',
})
->color(fn (string $state): string => match ($state) {
'draft' => 'danger',
'reviewing' => 'warning',
'published' => 'success',
default => 'gray',
}),
]),
Group::make()
->id('iconMedium')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
IconEntry::make('status')
->state('reviewing')
->icon(fn (string $state): string => match ($state) {
'draft' => 'heroicon-o-pencil',
'reviewing' => 'heroicon-o-clock',
'published' => 'heroicon-o-check-circle',
})
->color(fn (string $state): string => match ($state) {
'draft' => 'danger',
'reviewing' => 'warning',
'published' => 'success',
default => 'gray',
})
->size('md'),
]),
Group::make()
->id('iconBoolean')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
IconEntry::make('is_featured')
->state(0)
->boolean(),
IconEntry::make('is_featured')
->state(1)
->boolean(),
]),
Group::make()
->id('iconBooleanIcon')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
IconEntry::make('is_featured')
->state(0)
->boolean()
->trueIcon('heroicon-o-check-badge')
->falseIcon('heroicon-o-x-mark'),
IconEntry::make('is_featured')
->state(1)
->boolean()
->trueIcon('heroicon-o-check-badge')
->falseIcon('heroicon-o-x-mark'),
]),
Group::make()
->id('iconBooleanColor')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
IconEntry::make('is_featured')
->state(0)
->boolean()
->trueColor('info')
->falseColor('warning'),
IconEntry::make('is_featured')
->state(1)
->boolean()
->trueColor('info')
->falseColor('warning'),
]),
Group::make()
->id('color')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
ColorEntry::make('color')
->state('#3490dc'),
]),
Group::make()
->id('colorCopyable')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
ColorEntry::make('color')
->state('#3490dc')
->copyable()
->copyMessage('Copied!')
->copyMessageDuration(1500),
]),
]);
}
public function render()
{
return view('livewire.infolists.entries');
}
}
docs-assets/app/app/Http/Livewire/Infolists/Layout.php
+423
View File
@@ -0,0 +1,423 @@
<?php
namespace App\Http\Livewire\Infolists;
use Filament\Forms\Components\Card;
use Filament\Forms\Components\Checkbox;
use Filament\Forms\Components\Fieldset;
use Filament\Forms\Components\Group;
use Filament\Forms\Components\Placeholder;
use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\Section;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\Tabs;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Wizard;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Filament\Infolists\Concerns\InteractsWithInfolists;
use Filament\Infolists\Contracts\HasInfolists;
use Filament\Infolists\Infolist;
use Livewire\Component;
class Layout extends Component implements HasForms, HasInfolists
{
use InteractsWithForms;
use InteractsWithInfolists;
public function infolist(Infolist $infolist): Infolist
{
return $infolist
->schema([
Group::make()
->id('fieldset')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Fieldset::make('Rate limiting')
->statePath('fieldset')
->schema([
TextInput::make('hits')
->default(30),
Select::make('period')
->default('hour')
->options([
'hour' => 'Hour',
]),
TextInput::make('maximum')
->default(100),
])
->columns(3),
]),
Group::make()
->id('tabs')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Tabs::make('Tabs')
->statePath('tabs')
->schema([
Tabs\Tab::make('Rate Limiting')
->schema([
TextInput::make('hits')
->default(30),
Select::make('period')
->default('hour')
->options([
'hour' => 'Hour',
]),
TextInput::make('maximum')
->default(100),
Textarea::make('notes')
->columnSpanFull(),
])
->columns(3),
Tabs\Tab::make('Proxy'),
Tabs\Tab::make('Meta'),
]),
]),
Group::make()
->id('tabsIcons')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Tabs::make('Tabs')
->statePath('tabsIcons')
->schema([
Tabs\Tab::make('Notifications')
->icon('heroicon-m-bell')
->schema([
Checkbox::make('enabled')
->default(true),
Select::make('frequency')
->default('hourly')
->options([
'hourly' => 'Hourly',
]),
]),
Tabs\Tab::make('Security')
->icon('heroicon-m-lock-closed'),
Tabs\Tab::make('Meta')
->icon('heroicon-m-bars-3-center-left'),
]),
]),
Group::make()
->id('tabsIconsAfter')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Tabs::make('Tabs')
->statePath('tabsIconsAfter')
->schema([
Tabs\Tab::make('Notifications')
->icon('heroicon-m-bell')
->iconPosition('after')
->schema([
Checkbox::make('enabled')
->default(true),
Select::make('frequency')
->default('hourly')
->options([
'hourly' => 'Hourly',
]),
]),
Tabs\Tab::make('Security')
->icon('heroicon-m-lock-closed')
->iconPosition('after'),
Tabs\Tab::make('Meta')
->icon('heroicon-m-bars-3-center-left')
->iconPosition('after'),
]),
]),
Group::make()
->id('tabsBadges')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Tabs::make('Tabs')
->statePath('tabsBadges')
->schema([
Tabs\Tab::make('Notifications')
->badge(5)
->schema([
Checkbox::make('enabled')
->default(true),
Select::make('frequency')
->default('hourly')
->options([
'hourly' => 'Hourly',
]),
]),
Tabs\Tab::make('Security'),
Tabs\Tab::make('Meta'),
]),
]),
Group::make()
->id('wizard')
->extraAttributes([
'class' => 'p-16 max-w-5xl',
])
->schema([
Wizard::make([
Wizard\Step::make('Order')
->schema([
Repeater::make('items')
->hiddenLabel()
->schema([
Select::make('product')
->options([
'tshirt' => 'Filament t-shirt',
]),
TextInput::make('quantity'),
])
->columns(2)
->reorderable(false)
->addActionLabel('Add to order')
->default([
[
'product' => 'tshirt',
'quantity' => 3,
],
]),
Textarea::make('specialOrderNotes'),
]),
Wizard\Step::make('Delivery'),
Wizard\Step::make('Billing'),
])
->statePath('wizard'),
]),
Group::make()
->id('wizardIcons')
->extraAttributes([
'class' => 'p-16 max-w-5xl',
])
->schema([
Wizard::make([
Wizard\Step::make('Order')
->icon('heroicon-m-shopping-bag')
->schema([
Repeater::make('items')
->hiddenLabel()
->schema([
Select::make('product')
->options([
'tshirt' => 'Filament t-shirt',
]),
TextInput::make('quantity'),
])
->columns(2)
->reorderable(false)
->addActionLabel('Add to order')
->default([
[
'product' => 'tshirt',
'quantity' => 3,
],
]),
Textarea::make('specialOrderNotes'),
]),
Wizard\Step::make('Delivery')
->icon('heroicon-m-truck'),
Wizard\Step::make('Billing')
->icon('heroicon-m-credit-card'),
])
->statePath('wizardIcons'),
]),
Group::make()
->id('wizardDescriptions')
->extraAttributes([
'class' => 'p-16 max-w-5xl',
])
->schema([
Wizard::make([
Wizard\Step::make('Order')
->description('Review your basket')
->schema([
Repeater::make('items')
->hiddenLabel()
->schema([
Select::make('product')
->options([
'tshirt' => 'Filament t-shirt',
]),
TextInput::make('quantity'),
])
->columns(2)
->reorderable(false)
->addActionLabel('Add to order')
->default([
[
'product' => 'tshirt',
'quantity' => 3,
],
]),
Textarea::make('specialOrderNotes'),
]),
Wizard\Step::make('Delivery')
->description('Send us your address'),
Wizard\Step::make('Billing')
->description('Select a payment method'),
])
->statePath('wizardDescriptions'),
]),
Group::make()
->id('section')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Section::make('Rate limiting')
->description('Prevent abuse by limiting the number of requests per period')
->statePath('section')
->schema([
TextInput::make('hits')
->default(30),
Select::make('period')
->default('hour')
->options([
'hour' => 'Hour',
]),
TextInput::make('maximum')
->default(100),
Textarea::make('notes')
->columnSpanFull(),
])
->columns(3),
]),
Group::make()
->id('sectionIcons')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Section::make('Cart')
->description('The items you have selected for purchase')
->icon('heroicon-m-shopping-bag')
->statePath('sectionIcons')
->schema([
Repeater::make('items')
->hiddenLabel()
->schema([
Select::make('product')
->options([
'tshirt' => 'Filament t-shirt',
]),
TextInput::make('quantity'),
])
->columns(2)
->reorderable(false)
->addActionLabel('Add to order')
->default([
[
'product' => 'tshirt',
'quantity' => 3,
],
]),
Textarea::make('specialOrderNotes'),
]),
]),
Group::make()
->id('sectionAside')
->extraAttributes([
'class' => 'p-16 max-w-5xl',
])
->schema([
Section::make('Rate limiting')
->description('Prevent abuse by limiting the number of requests per period')
->aside()
->statePath('sectionAside')
->schema([
TextInput::make('hits')
->default(30),
Select::make('period')
->default('hour')
->options([
'hour' => 'Hour',
]),
TextInput::make('maximum')
->default(100),
Textarea::make('notes'),
]),
]),
Group::make()
->id('sectionCollapsed')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Section::make('Cart')
->description('The items you have selected for purchase')
->collapsed()
->statePath('sectionCollapsed'),
]),
Group::make()
->id('sectionCompact')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Section::make('Rate limiting')
->description('Prevent abuse by limiting the number of requests per period')
->compact()
->statePath('sectionCompact')
->schema([
TextInput::make('hits')
->default(30),
Select::make('period')
->default('hour')
->options([
'hour' => 'Hour',
]),
TextInput::make('maximum')
->default(100),
Textarea::make('notes')
->columnSpanFull(),
])
->columns(3),
]),
Group::make()
->id('placeholder')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Placeholder::make('created')
->content('May 21, 2021'),
]),
Group::make()
->id('card')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Card::make([
TextInput::make('hits')
->default(30),
Select::make('period')
->default('hour')
->options([
'hour' => 'Hour',
]),
TextInput::make('maximum')
->default(100),
Textarea::make('notes')
->columnSpanFull(),
])
->statePath('card')
->columns(3),
]),
]);
}
public function render()
{
return view('livewire.infolists.layout');
}
}
docs-assets/app/package-lock.json
Generated
+20
View File
@@ -11,6 +11,7 @@
"laravel-vite-plugin": "^0.7.2",
"postcss": "^8.4.14",
"tailwindcss": "^3.1",
"tippy.js": "^6.3.7",
"vite": "^4.0.0"
}
},
@@ -467,6 +468,16 @@
"node": ">= 8"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"dev": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@tailwindcss/forms": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
@@ -1580,6 +1591,15 @@
"node": ">=0.8"
}
},
"node_modules/tippy.js": {
"version": "6.3.7",
"resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
"integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
"dev": true,
"dependencies": {
"@popperjs/core": "^2.9.0"
}
},
"node_modules/to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
docs-assets/app/package.json
+1
View File
@@ -12,6 +12,7 @@
"laravel-vite-plugin": "^0.7.2",
"postcss": "^8.4.14",
"tailwindcss": "^3.1",
"tippy.js": "^6.3.7",
"vite": "^4.0.0"
}
}
docs-assets/app/public/css/filament/filament/app.css
+1 -1
View File
File diff suppressed because one or more lines are too long
docs-assets/app/public/js/filament/filament/app.js
+8 -8
View File
File diff suppressed because one or more lines are too long
docs-assets/app/public/js/filament/support/support.js
+25 -1
View File
File diff suppressed because one or more lines are too long
docs-assets/app/resources/css/app.css
+2
View File
@@ -1,3 +1,5 @@
@import 'tippy.js/dist/tippy.css';
@import 'tippy.js/themes/light.css';
@import '../../vendor/filament/forms/dist/index.css';
@tailwind base;
docs-assets/app/resources/views/livewire/infolists/entries.blade.php
+3
View File
@@ -0,0 +1,3 @@
<div class="min-h-screen p-16">
{{ $this->infolist }}
</div>
docs-assets/app/resources/views/livewire/infolists/layout.blade.php
+3
View File
@@ -0,0 +1,3 @@
<div class="min-h-screen p-16">
{{ $this->infolist }}
</div>
docs-assets/app/routes/web.php
+3
View File
@@ -3,6 +3,7 @@
use App\Http\Livewire\Actions;
use App\Http\Livewire\Forms\Fields;
use App\Http\Livewire\Forms\Layout;
use App\Http\Livewire\Infolists\Entries;
use Illuminate\Support\Facades\Route;
/*
@@ -19,3 +20,5 @@ use Illuminate\Support\Facades\Route;
Route::get('/actions', Actions::class);
Route::get('/forms/fields', Fields::class);
Route::get('/forms/layout', Layout::class);
Route::get('/infolists/entries', Entries::class);
Route::get('/infolists/layout', Layout::class);
docs-assets/screenshots/images/dark/infolists/entries/color/copyable.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

docs-assets/screenshots/images/dark/infolists/entries/color/simple.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

docs-assets/screenshots/images/dark/infolists/entries/helper-text.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

docs-assets/screenshots/images/dark/infolists/entries/hint-color.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

docs-assets/screenshots/images/dark/infolists/entries/hint-icon.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

docs-assets/screenshots/images/dark/infolists/entries/hint.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

docs-assets/screenshots/images/dark/infolists/entries/icon/boolean-color.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

docs-assets/screenshots/images/dark/infolists/entries/icon/boolean-icon.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

docs-assets/screenshots/images/dark/infolists/entries/icon/boolean.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

docs-assets/screenshots/images/dark/infolists/entries/icon/color.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

docs-assets/screenshots/images/dark/infolists/entries/icon/medium.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

docs-assets/screenshots/images/dark/infolists/entries/simple.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

docs-assets/screenshots/images/dark/infolists/entries/text/badge.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

docs-assets/screenshots/images/dark/infolists/entries/text/bold.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

docs-assets/screenshots/images/dark/infolists/entries/text/bullet-list.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

docs-assets/screenshots/images/dark/infolists/entries/text/color.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

docs-assets/screenshots/images/dark/infolists/entries/text/copyable.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

docs-assets/screenshots/images/dark/infolists/entries/text/icon-after.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

docs-assets/screenshots/images/dark/infolists/entries/text/icon.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

docs-assets/screenshots/images/dark/infolists/entries/text/large.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

docs-assets/screenshots/images/dark/infolists/entries/text/list.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

docs-assets/screenshots/images/dark/infolists/entries/text/mono.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

docs-assets/screenshots/images/dark/infolists/entries/text/simple.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

docs-assets/screenshots/images/dark/infolists/entries/tooltips.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

docs-assets/screenshots/images/light/infolists/entries/color/copyable.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

docs-assets/screenshots/images/light/infolists/entries/color/simple.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

docs-assets/screenshots/images/light/infolists/entries/helper-text.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

docs-assets/screenshots/images/light/infolists/entries/hint-color.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

docs-assets/screenshots/images/light/infolists/entries/hint-icon.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

docs-assets/screenshots/images/light/infolists/entries/hint.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

docs-assets/screenshots/images/light/infolists/entries/icon/boolean-color.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

docs-assets/screenshots/images/light/infolists/entries/icon/boolean-icon.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

docs-assets/screenshots/images/light/infolists/entries/icon/boolean.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

docs-assets/screenshots/images/light/infolists/entries/icon/color.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

docs-assets/screenshots/images/light/infolists/entries/icon/medium.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

docs-assets/screenshots/images/light/infolists/entries/simple.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

docs-assets/screenshots/images/light/infolists/entries/text/badge.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

docs-assets/screenshots/images/light/infolists/entries/text/bold.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

docs-assets/screenshots/images/light/infolists/entries/text/bullet-list.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

docs-assets/screenshots/images/light/infolists/entries/text/color.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

docs-assets/screenshots/images/light/infolists/entries/text/copyable.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

docs-assets/screenshots/images/light/infolists/entries/text/icon-after.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

docs-assets/screenshots/images/light/infolists/entries/text/icon.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

docs-assets/screenshots/images/light/infolists/entries/text/large.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

docs-assets/screenshots/images/light/infolists/entries/text/list.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

docs-assets/screenshots/images/light/infolists/entries/text/mono.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

docs-assets/screenshots/images/light/infolists/entries/text/simple.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

docs-assets/screenshots/images/light/infolists/entries/tooltips.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

docs-assets/screenshots/schema.js
+240
View File
@@ -1072,4 +1072,244 @@ export default {
deviceScaleFactor: 3,
},
},
'infolists/entries/simple': {
url: 'infolists/entries',
selector: '#simple',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/helper-text': {
url: 'infolists/entries',
selector: '#helperText',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/hint': {
url: 'infolists/entries',
selector: '#hint',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/hint-color': {
url: 'infolists/entries',
selector: '#hintColor',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/hint-icon': {
url: 'infolists/entries',
selector: '#hintIcon',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/tooltips': {
url: 'infolists/entries',
selector: '#tooltips',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
before: async (page) => {
await page.hover('#tooltips .filament-infolists-text-entry')
await new Promise((resolve) => setTimeout(resolve, 500))
},
},
'infolists/entries/text/simple': {
url: 'infolists/entries',
selector: '#text',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/text/badge': {
url: 'infolists/entries',
selector: '#textBadge',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/text/list': {
url: 'infolists/entries',
selector: '#textList',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/text/bullet-list': {
url: 'infolists/entries',
selector: '#textBulletList',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/text/color': {
url: 'infolists/entries',
selector: '#textColor',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/text/icon': {
url: 'infolists/entries',
selector: '#textIcon',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/text/icon-after': {
url: 'infolists/entries',
selector: '#textIconAfter',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/text/large': {
url: 'infolists/entries',
selector: '#textLarge',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/text/bold': {
url: 'infolists/entries',
selector: '#textBold',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/text/mono': {
url: 'infolists/entries',
selector: '#textMono',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/text/copyable': {
url: 'infolists/entries',
selector: '#textCopyable',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
before: async (page) => {
await page.click('#textCopyable .filament-infolists-text-entry-content')
await new Promise((resolve) => setTimeout(resolve, 500))
}
},
'infolists/entries/icon/simple': {
url: 'infolists/entries',
selector: '#icon',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/icon/color': {
url: 'infolists/entries',
selector: '#iconColor',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/icon/medium': {
url: 'infolists/entries',
selector: '#iconMedium',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/icon/boolean': {
url: 'infolists/entries',
selector: '#iconBoolean',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/icon/boolean-icon': {
url: 'infolists/entries',
selector: '#iconBooleanIcon',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/icon/boolean-color': {
url: 'infolists/entries',
selector: '#iconBooleanColor',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/color/simple': {
url: 'infolists/entries',
selector: '#color',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/color/copyable': {
url: 'infolists/entries',
selector: '#colorCopyable',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
before: async (page) => {
await page.click('#colorCopyable .filament-infolists-color-entry-content')
await new Promise((resolve) => setTimeout(resolve, 500))
},
},
}
packages/forms/docs/03-fields/01-getting-started.md
+1 -1
View File
@@ -119,7 +119,7 @@ TextInput::make('password')
### Changing the text color of the hint
You can change the text color of the hint. By default it's gray, but you may use `danger`, `gray`, `info`, `primary`, `success` and `warning`:
You can change the text color of the hint. By default, it's gray, but you may use `danger`, `info`, `primary`, `success` and `warning`:
```php
use Filament\Forms\Components\RichEditor;
packages/infolists/docs/03-entries/01-getting-started.md
+67 -3
View File
@@ -1,6 +1,7 @@
---
title: Getting started
---
import AutoScreenshot from "@components/AutoScreenshot.astro"
## Overview
@@ -28,6 +29,8 @@ TextEntry::make('title')
TextEntry::make('author.name')
```
<AutoScreenshot name="infolists/entries/simple" alt="Entries in an infolist" version="3.x" />
## Available entries
- [Text entry](text)
@@ -93,6 +96,67 @@ TextEntry::make('title')
->default('Untitled')
```
## Adding helper text below the entry
Sometimes, you may wish to provide extra information for the user of the infolist. For this purpose, you may add helper text below the entry.
The `helperText()` method is used to add helper text, and supports Markdown formatting:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('name')
->helperText('Your **full name** here, including any middle names.')
```
<AutoScreenshot name="infolists/entries/helper-text" alt="Entry with helper text" version="3.x" />
## Adding a hint next to the label
As well as [helper text](#adding-helper-text-below-the-entry) below the entry, you may also add a "hint" next to the label of the entry. This is useful for displaying additional information about the entry, such as a link to a help page.
The `hint()` method is used to add a hint, and supports Markdown formatting:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->hint('[Documentation](/documentation)')
```
<AutoScreenshot name="infolists/entries/hint" alt="Entry with hint" version="3.x" />
### Changing the text color of the hint
You can change the text color of the hint. By default, it's gray, but you may use `danger`, `info`, `primary`, `success` and `warning`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->hint('[Documentation](/documentation)')
->hintColor('primary')
```
<AutoScreenshot name="infolists/entries/hint-color" alt="Entry with hint color" version="3.x" />
### Adding an icon aside the hint
Hints may also have an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) rendered next to them:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->hint('[Documentation](/documentation)')
->hintIcon('heroicon-m-question-mark-circle')
```
<AutoScreenshot name="infolists/entries/hint-icon" alt="Entry with hint icon" version="3.x" />
## Hiding entries
To hide an entry conditionally, you may use the `hidden()` and `visible()` methods, whichever you prefer:
@@ -122,17 +186,17 @@ Infolists\Components\TextEntry::make('amount_including_vat')
## Tooltips
> If you want to use tooltips outside of a panel, make sure you have [`@ryangjchandler/alpine-tooltip` installed](https://github.com/ryangjchandler/alpine-tooltip#installation) in your app, including [`tippy.css`](https://atomiks.github.io/tippyjs/v6/getting-started/#1-package-manager). You'll also need to install [`tippy.css`](https://atomiks.github.io/tippyjs/v6/getting-started/#1-package-manager) if you're using a [custom panel theme](../../panels/themes).
You may specify a tooltip to display when you hover over an entry:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->tooltip('Title')
->tooltip('Shown at the top of the page')
```
<AutoScreenshot name="infolists/entries/tooltips" alt="Entry with tooltip" version="3.x" />
This method also accepts a closure that can access the current infolist record:
```php
packages/infolists/docs/03-entries/02-text.md
+31 -17
View File
@@ -1,6 +1,7 @@
---
title: Text entry
---
import AutoScreenshot from "@components/AutoScreenshot.astro"
## Overview
@@ -12,6 +13,8 @@ use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
```
<AutoScreenshot name="infolists/entries/text/simple" alt="Text entry" version="3.x" />
## Displaying as a "badge"
By default, text is quite plain and has no background color. You can make it appear as a "badge" instead using the `badge()` method. A great use case for this is with statuses, where may want to display a badge with a [color](#customizing-the-color) that matches the status:
@@ -21,7 +24,7 @@ use Filament\Infolists\Components\TextEntry;
TextEntry::make('status')
->badge()
->color(fn (string $status): string => match ($status) {
->color(fn (string $state): string => match ($state) {
'draft' => 'gray',
'reviewing' => 'warning',
'published' => 'success',
@@ -29,6 +32,8 @@ TextEntry::make('status')
})
```
<AutoScreenshot name="infolists/entries/text/badge" alt="Text entry as badge" version="3.x" />
You may add other things to the badge, like an [icon](#adding-an-icon).
## Date formatting
@@ -140,6 +145,8 @@ TextEntry::make('authors.name')
->listWithLineBreaks()
```
<AutoScreenshot name="infolists/entries/text/list" alt="Text entry with multiple values" version="3.x" />
### Adding bullet points to the list
You may add a bullet point to each list item using the `bulleted()` method:
@@ -152,6 +159,8 @@ TextEntry::make('authors.name')
->bulleted()
```
<AutoScreenshot name="infolists/entries/text/bullet-list" alt="Text entry with multiple values and bullet points" version="3.x" />
### Limiting the number of values in the list
You can limit the number of values in the list using the `limitList()` method:
@@ -231,6 +240,8 @@ TextEntry::make('status')
->color('primary')
```
<AutoScreenshot name="infolists/entries/text/color" alt="Text entry in the primary color" version="3.x" />
## Adding an icon
Text entries may also have an [icon](https://blade-ui-kit.com/blade-icons?set=1#search):
@@ -242,6 +253,8 @@ TextEntry::make('email')
->icon('heroicon-m-envelope')
```
<AutoScreenshot name="infolists/entries/text/icon" alt="Text entry with icon" version="3.x" />
You may set the position of an icon using `iconPosition()`:
```php
@@ -252,18 +265,11 @@ TextEntry::make('email')
->iconPosition('after') // `before` or `after`
```
<AutoScreenshot name="infolists/entries/text/icon-after" alt="Text entry with icon after" version="3.x" />
## Customizing the text size
You may make the text smaller using `size('sm')`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('email')
->size('sm')
```
Or you can make it larger using `size('lg')`:
You may make the text larger using `size('lg')`:
```php
use Filament\Infolists\Components\TextEntry;
@@ -272,6 +278,8 @@ TextEntry::make('title')
->size('lg')
```
<AutoScreenshot name="infolists/entries/text/large" alt="Text entry in a large font size" version="3.x" />
## Customizing the font weight
Text entries have regular font weight by default but you may change this to any of the the following options: `thin`, `extralight`, `light`, `medium`, `semibold`, `bold`, `extrabold` or `black`.
@@ -281,23 +289,28 @@ For instance, you may make the font bold using `weight('bold')`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('email')
TextEntry::make('title')
->weight('bold')
```
<AutoScreenshot name="infolists/entries/text/bolt" alt="Text entry in a bold font" version="3.x" />
## Customizing the font family
You can change the text font family to any of the following options: `sans`, `serif` or `mono`.
For instance, you may make the font mono using `fontFamily('mono')`:
For instance, you may make the font monospaced using `fontFamily('mono')`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('text')
TextEntry::make('apiKey')
->label('API key')
->fontFamily('mono')
```
<AutoScreenshot name="infolists/entries/text/mono" alt="Text entry in a monospaced font" version="3.x" />
## Allowing the text to be copied to the clipboard
You may make the text copyable, such that clicking on the entry copies the text to the clipboard, and optionally specify a custom confirmation message and duration in milliseconds. This feature only works when SSL is enabled for the app.
@@ -305,10 +318,11 @@ You may make the text copyable, such that clicking on the entry copies the text
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('email')
TextEntry::make('apiKey')
->label('API key')
->copyable()
->copyMessage('Email address copied')
->copyMessage('Copied!')
->copyMessageDuration(1500)
```
> Filament uses tooltips to display the copy message in the admin panel. If you want to use the copyable feature outside of the admin panel, make sure you have [`@ryangjchandler/alpine-tooltip` installed](https://github.com/ryangjchandler/alpine-tooltip#installation) in your app.
<AutoScreenshot name="infolists/entries/text/copyable" alt="Text entry with a button to copy it" version="3.x" />
packages/infolists/docs/03-entries/03-icon.md
+31 -41
View File
@@ -1,6 +1,7 @@
---
title: Icon entry
---
import AutoScreenshot from "@components/AutoScreenshot.astro"
## Overview
@@ -9,28 +10,17 @@ Icon entries render an [icon](https://blade-ui-kit.com/blade-icons?set=1#search)
```php
use Filament\Infolists\Components\IconEntry;
IconEntry::make('is_featured')
->icons([
'heroicon-o-x-circle',
'heroicon-o-pencil' => 'draft',
'heroicon-o-clock' => 'reviewing',
'heroicon-o-check-circle' => 'published',
])
IconEntry::make('status')
->icon(fn (string $state): string => match ($state) {
'draft' => 'heroicon-o-pencil',
'reviewing' => 'heroicon-o-clock',
'published' => 'heroicon-o-check-circle',
})
```
You may also pass a callback to activate an option, accepting the entry's `$state` and `$record`:
In the function, `$state` is the value of the entry, and `$record` can be used to access the underlying Eloquent record.
```php
use Filament\Infolists\Components\IconEntry;
IconEntry::make('is_featured')
->icons([
'heroicon-o-x-circle',
'heroicon-o-pencil' => fn ($state, $record): bool => $record->status === 2,
'heroicon-o-clock' => fn ($state): bool => $state === 'reviewing',
'heroicon-o-check-circle' => fn ($state): bool => $state === 'published',
])
```
<AutoScreenshot name="infolists/entries/icon/simple" alt="Icon entry" version="3.x" />
## Customizing the color
@@ -39,21 +29,19 @@ Icon entries may also have a set of icon colors, using the same syntax. They may
```php
use Filament\Infolists\Components\IconEntry;
IconEntry::make('is_featured')
->icons([
'heroicon-o-x-circle',
'heroicon-o-pencil' => 'draft',
'heroicon-o-clock' => 'reviewing',
'heroicon-o-check-circle' => 'published',
])
->colors([
'gray',
'danger' => 'draft',
'warning' => 'reviewing',
'success' => 'published',
])
IconEntry::make('status')
->color(fn (string $state): string => match ($state) {
'draft' => 'danger',
'reviewing' => 'warning',
'published' => 'success',
default => 'gray',
})
```
In the function, `$state` is the value of the entry, and `$record` can be used to access the underlying Eloquent record.
<AutoScreenshot name="infolists/entries/icon/color" alt="Icon entry with color" version="3.x" />
## Customizing the size
The default icon size is `lg`, but you may customize the size to be either `xs`, `sm`, `md`, `lg` or `xl`:
@@ -61,16 +49,12 @@ The default icon size is `lg`, but you may customize the size to be either `xs`,
```php
use Filament\Infolists\Components\IconEntry;
IconEntry::make('is_featured')
->icons([
'heroicon-o-x-circle',
'heroicon-o-pencil' => 'draft',
'heroicon-o-clock' => 'reviewing',
'heroicon-o-check-circle' => 'published',
])
IconEntry::make('status')
->size('md')
```
<AutoScreenshot name="infolists/entries/icon/medium" alt="Medium-sized icon entry" version="3.x" />
## Handling booleans
Icon entries can display a check or cross icon based on the contents of the database entry, either true or false, using the `boolean()` method:
@@ -82,6 +66,8 @@ IconEntry::make('is_featured')
->boolean()
```
<AutoScreenshot name="infolists/entries/icon/boolean" alt="Icon entry to display a boolean" version="3.x" />
### Customizing the boolean icons
You may customize the icon representing each state. Icons are the name of a Blade component present. By default, [Heroicons v1](https://v1.heroicons.com) are installed:
@@ -92,9 +78,11 @@ use Filament\Infolists\Components\IconEntry;
IconEntry::make('is_featured')
->boolean()
->trueIcon('heroicon-o-check-badge')
->falseIcon('heroicon-o-x-circle')
->falseIcon('heroicon-o-x-mark')
```
<AutoScreenshot name="infolists/entries/icon/boolean-icon" alt="Icon entry to display a boolean with custom icons" version="3.x" />
### Customizing the boolean colors
You may customize the icon color representing each state. These may be either `danger`, `gray`, `info`, `primary`, `success` or `warning`:
@@ -104,6 +92,8 @@ use Filament\Infolists\Components\IconEntry;
IconEntry::make('is_featured')
->boolean()
->trueColor('primary')
->trueColor('info')
->falseColor('warning')
```
<AutoScreenshot name="infolists/entries/icon/boolean-color" alt="Icon entry to display a boolean with custom colors" version="3.x" />
packages/infolists/docs/03-entries/05-color.md
+6 -1
View File
@@ -1,6 +1,7 @@
---
title: Color entry
---
import AutoScreenshot from "@components/AutoScreenshot.astro"
## Overview
@@ -12,6 +13,8 @@ use Filament\Infolists\Components\ColorEntry;
ColorEntry::make('color')
```
<AutoScreenshot name="infolists/entries/color/simple" alt="Color entry" version="3.x" />
## Allowing the color to be copied to the clipboard
You may make the color copyable, such that clicking on the preview copies the CSS value to the clipboard, and optionally specify a custom confirmation message and duration in milliseconds. This feature only works when SSL is enabled for the app.
@@ -21,6 +24,8 @@ use Filament\Infolists\Components\ColorEntry;
ColorEntry::make('color')
->copyable()
->copyMessage('Color code copied')
->copyMessage('Copied!')
->copyMessageDuration(1500)
```
<AutoScreenshot name="infolists/entries/color/copyable" alt="Color entry with a button to copy it" version="3.x" />
packages/infolists/resources/views/components/color-entry.blade.php
+2 -1
View File
@@ -20,6 +20,7 @@
@if ($state)
style="background-color: {{ $state }}"
@if ($itemIsCopyable)
x-data="{}"
x-on:click="
window.navigator.clipboard.writeText(@js($copyableState))
$tooltip(@js($copyMessage), { timeout: @js($copyMessageDuration) })
@@ -27,7 +28,7 @@
@endif
@endif
@class([
'relative flex h-6 w-6 rounded-md',
'filament-infolists-color-entry-content relative flex h-6 w-6 rounded-md',
'cursor-pointer' => $itemIsCopyable,
])
></div>
packages/infolists/resources/views/components/entry-wrapper/hint.blade.php
+1 -1
View File
@@ -10,7 +10,7 @@
->class([
'filament-infolists-entry-wrapper-hint flex items-center space-x-2 text-custom-500 rtl:space-x-reverse dark:text-custom-300',
])
->styles([
->style([
\Filament\Support\get_color_css_variables($color, shades: [300, 500]),
])
}}
packages/infolists/resources/views/components/grid.blade.php
+5 -1
View File
@@ -1,3 +1,7 @@
<div {{ $attributes->merge($getExtraAttributes(), escape: false) }}>
<div {{ $attributes
->merge([
'id' => $getId(),
], escape: false)
->merge($getExtraAttributes(), escape: false) }}>
{{ $getChildComponentContainer() }}
</div>
packages/infolists/resources/views/components/group.blade.php
+5 -1
View File
@@ -1,3 +1,7 @@
<div {{ $attributes->merge($getExtraAttributes(), escape: false) }}>
<div {{ $attributes
->merge([
'id' => $getId(),
], escape: false)
->merge($getExtraAttributes(), escape: false) }}>
{{ $getChildComponentContainer() }}
</div>
packages/infolists/resources/views/components/icon-entry.blade.php
+1 -1
View File
@@ -24,7 +24,7 @@
default => $size,
}
"
:style="\Filament\Support\get_color_css_variables($getColor($state), shades: [500])"
:style="\Filament\Support\get_color_css_variables($getColor($state) ?? 'gray', shades: [500])"
/>
@endif
@endforeach
packages/infolists/resources/views/components/text-entry.blade.php
+2 -1
View File
@@ -134,13 +134,14 @@
<div
@if ($itemIsCopyable)
x-data="{}"
x-on:click="
window.navigator.clipboard.writeText(@js($copyableState))
$tooltip(@js($copyMessage), { timeout: @js($copyMessageDuration) })
"
@endif
@class([
'inline-block',
'filament-infolists-text-entry-content inline-block',
'[&>*:first-child]:mt-0 [&>*:last-child]:mb-0' => $isProse,
'pt-2' => $isProse && (! $isLabelHidden()),
'cursor-pointer' => $itemIsCopyable,
packages/infolists/src/Components/Concerns/HasState.php
+1 -1
View File
@@ -62,7 +62,7 @@ trait HasState
public function getState(): mixed
{
if ($this->getStateUsing) {
if ($this->getStateUsing !== null) {
$state = $this->evaluate($this->getStateUsing);
} else {
$containerState = $this->getContainer()->getState();
packages/panels/dist/index.js
Vendored
+8 -8
View File
File diff suppressed because one or more lines are too long
packages/panels/dist/theme.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/panels/resources/js/index.js
-2
View File
@@ -1,12 +1,10 @@
import Alpine from 'alpinejs'
import Mousetrap from '@danharrin/alpine-mousetrap'
import Persist from '@alpinejs/persist'
import Tooltip from '@ryangjchandler/alpine-tooltip'
document.addEventListener('alpine:init', () => {
window.Alpine.plugin(Mousetrap)
window.Alpine.plugin(Persist)
window.Alpine.plugin(Tooltip)
window.Alpine.store('sidebar', {
isOpen: window.Alpine.$persist(true).as('isOpen'),
packages/support/dist/index.js
Vendored
+25 -1
View File
File diff suppressed because one or more lines are too long
packages/support/resources/js/index.js
+4 -2
View File
@@ -2,12 +2,14 @@ import AlpineFloatingUI from '@awcodes/alpine-floating-ui'
import AlpineLazyLoadAssets from 'alpine-lazy-load-assets'
import Focus from '@alpinejs/focus'
import Sortable from './sortable'
import Tooltip from '@ryangjchandler/alpine-tooltip'
document.addEventListener('alpine:init', () => {
window.Alpine.plugin(Focus)
window.Alpine.plugin(Sortable)
window.Alpine.plugin(AlpineFloatingUI)
window.Alpine.plugin(AlpineLazyLoadAssets)
window.Alpine.plugin(Focus)
window.Alpine.plugin(Sortable)
window.Alpine.plugin(Tooltip)
})
// https://github.com/laravel/framework/blob/5299c22321c0f1ea8ff770b84a6c6469c4d6edec/src/Illuminate/Translation/MessageSelector.php#L15
packages/tables/docs/03-columns/01-getting-started.md
-2
View File
@@ -365,8 +365,6 @@ Tables\Columns\TextColumn::make('amount_including_vat')
## Tooltips
> If you want to use tooltips outside of a panel, make sure you have [`@ryangjchandler/alpine-tooltip` installed](https://github.com/ryangjchandler/alpine-tooltip#installation) in your app, including [`tippy.css`](https://atomiks.github.io/tippyjs/v6/getting-started/#1-package-manager). You'll also need to install [`tippy.css`](https://atomiks.github.io/tippyjs/v6/getting-started/#1-package-manager) if you're using a [custom panel theme](../../panels/themes).
You may specify a tooltip to display when you hover over a cell:
```php
packages/tables/docs/03-columns/02-text.md
+1 -3
View File
@@ -21,7 +21,7 @@ use Filament\Tables\Columns\TextColumn;
TextColumn::make('status')
->badge()
->color(fn (string $status): string => match ($status) {
->color(fn (string $state): string => match ($state) {
'draft' => 'gray',
'reviewing' => 'warning',
'published' => 'success',
@@ -333,8 +333,6 @@ TextColumn::make('email')
->copyMessageDuration(1500)
```
> Filament uses tooltips to display the copy message in the admin panel. If you want to use the copyable feature outside of the admin panel, make sure you have [`@ryangjchandler/alpine-tooltip` installed](https://github.com/ryangjchandler/alpine-tooltip#installation) in your app.
## Displaying the row index
You may want a column to contain the number of the current row in the table:
packages/tables/docs/03-columns/03-icon.md
+17 -40
View File
@@ -9,28 +9,15 @@ Icon columns render an [icon](https://blade-ui-kit.com/blade-icons?set=1#search)
```php
use Filament\Tables\Columns\IconColumn;
IconColumn::make('is_featured')
->icons([
'heroicon-o-x-circle',
'heroicon-o-pencil' => 'draft',
'heroicon-o-clock' => 'reviewing',
'heroicon-o-check-circle' => 'published',
])
IconColumn::make('status')
->icon(fn (string $state): string => match ($state) {
'draft' => 'heroicon-o-pencil',
'reviewing' => 'heroicon-o-clock',
'published' => 'heroicon-o-check-circle',
})
```
You may also pass a callback to activate an option, accepting the cell's `$state` and `$record`:
```php
use Filament\Tables\Columns\IconColumn;
IconColumn::make('is_featured')
->icons([
'heroicon-o-x-circle',
'heroicon-o-pencil' => fn ($state, $record): bool => $record->status === 2,
'heroicon-o-clock' => fn ($state): bool => $state === 'reviewing',
'heroicon-o-check-circle' => fn ($state): bool => $state === 'published',
])
```
In the function, `$state` is the value of the column, and `$record` can be used to access the underlying Eloquent record.
## Customizing the color
@@ -39,21 +26,17 @@ Icon columns may also have a set of icon colors, using the same syntax. They may
```php
use Filament\Tables\Columns\IconColumn;
IconColumn::make('is_featured')
->icons([
'heroicon-o-x-circle',
'heroicon-o-pencil' => 'draft',
'heroicon-o-clock' => 'reviewing',
'heroicon-o-check-circle' => 'published',
])
->colors([
'gray',
'danger' => 'draft',
'warning' => 'reviewing',
'success' => 'published',
])
IconColumn::make('status')
->color(fn (string $state): string => match ($state) {
'draft' => 'danger',
'reviewing' => 'warning',
'published' => 'success',
default => 'gray',
})
```
In the function, `$state` is the value of the column, and `$record` can be used to access the underlying Eloquent record.
## Customizing the size
The default icon size is `lg`, but you may customize the size to be either `xs`, `sm`, `md`, `lg` or `xl`:
@@ -61,13 +44,7 @@ The default icon size is `lg`, but you may customize the size to be either `xs`,
```php
use Filament\Tables\Columns\IconColumn;
IconColumn::make('is_featured')
->icons([
'heroicon-o-x-circle',
'heroicon-o-pencil' => 'draft',
'heroicon-o-clock' => 'reviewing',
'heroicon-o-check-circle' => 'published',
])
IconColumn::make('status')
->size('md')
```
packages/tables/docs/03-columns/08-text-input.md
-2
View File
@@ -23,8 +23,6 @@ TextInputColumn::make('name')
->rules(['required', 'max:255'])
```
> Filament uses tooltips to display validation errors. If you want to use tooltips outside of the admin panel to display validation errors, make sure you have [`@ryangjchandler/alpine-tooltip` installed](https://github.com/ryangjchandler/alpine-tooltip#installation) in your app.
## Customizing the HTML input type
You may use the `type()` method to pass a custom [HTML input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types):
packages/tables/src/Columns/Concerns/HasState.php
+1 -1
View File
@@ -61,7 +61,7 @@ trait HasState
return null;
}
$state = $this->getStateUsing ?
$state = ($this->getStateUsing !== null) ?
$this->evaluate($this->getStateUsing) :
$this->getStateFromRecord();