diff --git a/packages/actions/docs/01-installation.md b/packages/actions/docs/01-installation.md index 85c0e9001f..caa25f516c 100644 --- a/packages/actions/docs/01-installation.md +++ b/packages/actions/docs/01-installation.md @@ -108,16 +108,16 @@ You may also want to update your `vite.config.js` file to refresh the page after ```js import { defineConfig } from 'vite' -import laravel, { refreshPaths } from 'laravel-vite-plugin' // [tl! focus] +import laravel, { refreshPaths } from 'laravel-vite-plugin' export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], - refresh: [ // [tl! focus:start] + refresh: [ ...refreshPaths, 'app/Http/Livewire/**', - ], // [tl! focus:end] + ], }), ], }) @@ -134,7 +134,7 @@ const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ - require('tailwindcss'), // [tl! focus] + require('tailwindcss'), ]) ``` diff --git a/packages/app/docs/02-getting-started.md b/packages/app/docs/02-getting-started.md index a8707daeed..ed6fd50600 100644 --- a/packages/app/docs/02-getting-started.md +++ b/packages/app/docs/02-getting-started.md @@ -149,7 +149,7 @@ public static function form(Form $form): Form { return $form ->schema([ - Forms\Components\TextInput::make('name'), // [tl! ++] + Forms\Components\TextInput::make('name'), ]); } ``` @@ -162,8 +162,8 @@ This field is required in the database, and has a maximum length of 255 characte use Filament\Forms; Forms\Components\TextInput::make('name') - ->required() // [tl! ++] - ->maxLength(255) // [tl! ++] + ->required() + ->maxLength(255) ``` Attempt to submit the form to create a new patient without a name, and observe that a message is displayed informing you that the name field is required. @@ -183,12 +183,12 @@ public static function form(Form $form): Form Forms\Components\TextInput::make('name') ->required() ->maxLength(255), - Forms\Components\Select::make('type') // [tl! add:start] + Forms\Components\Select::make('type') ->options([ 'cat' => 'Cat', 'dog' => 'Dog', 'rabbit' => 'Rabbit', - ]), // [tl! add:end] + ]), ]); } ``` @@ -206,7 +206,7 @@ Forms\Components\Select::make('type') 'dog' => 'Dog', 'rabbit' => 'Rabbit', ]) - ->required() // [tl! ++] + ->required() ``` #### "Date of birth" picker @@ -231,9 +231,9 @@ public static function form(Form $form): Form 'rabbit' => 'Rabbit', ]) ->required(), - Forms\Components\DatePicker::make('date_of_birth') // [tl! add:start] + Forms\Components\DatePicker::make('date_of_birth') ->required() - ->maxDate(now()), // [tl! add:end] + ->maxDate(now()), ]); } ``` @@ -265,9 +265,9 @@ public static function form(Form $form): Form Forms\Components\DatePicker::make('date_of_birth') ->required() ->maxDate(now()), - Forms\Components\Select::make('owner_id') // [tl! add:start] + Forms\Components\Select::make('owner_id') ->relationship('owner', 'name') - ->required(), // [tl! add:end] + ->required(), ]); } ``` @@ -281,8 +281,8 @@ use Filament\Forms; Forms\Components\Select::make('owner_id') ->relationship('owner', 'name') - ->searchable() // [tl! ++] - ->preload() // [tl! ++] + ->searchable() + ->preload() ->required() ``` @@ -297,7 +297,7 @@ Forms\Components\Select::make('owner_id') ->relationship('owner', 'name') ->searchable() ->preload() - ->createOptionForm([ // [tl! add:start] + ->createOptionForm([ Forms\Components\TextInput::make('name') ->required() ->maxLength(255), @@ -310,7 +310,7 @@ Forms\Components\Select::make('owner_id') ->label('Phone number') ->tel() ->required(), - ]) // [tl! add:end] + ]) ->required() ``` @@ -340,10 +340,10 @@ public static function table(Table $table): Table { return $table ->columns([ - Tables\Columns\TextColumn::make('name'), // [tl! add:start] + Tables\Columns\TextColumn::make('name'), Tables\Columns\TextColumn::make('type'), Tables\Columns\TextColumn::make('date_of_birth'), - Tables\Columns\TextColumn::make('owner.name'), // [tl! add:end] + Tables\Columns\TextColumn::make('owner.name'), ]); } ``` @@ -363,11 +363,11 @@ public static function table(Table $table): Table return $table ->columns([ Tables\Columns\TextColumn::make('name') - ->searchable(), // [tl! ++] + ->searchable(), Tables\Columns\TextColumn::make('type'), Tables\Columns\TextColumn::make('date_of_birth'), Tables\Columns\TextColumn::make('owner.name') - ->searchable(), // [tl! ++] + ->searchable(), ]); } ``` @@ -390,7 +390,7 @@ public static function table(Table $table): Table ->searchable(), Tables\Columns\TextColumn::make('type'), Tables\Columns\TextColumn::make('date_of_birth') - ->sortable(), // [tl! ++] + ->sortable(), Tables\Columns\TextColumn::make('owner.name') ->searchable(), ]); @@ -416,12 +416,12 @@ public static function table(Table $table): Table // ... ]) ->filters([ - Tables\Filters\SelectFilter::make('type') // [tl! add:start] + Tables\Filters\SelectFilter::make('type') ->options([ 'cat' => 'Cat', 'dog' => 'Dog', 'rabbit' => 'Rabbit', - ]), // [tl! add:end] + ]), ]); } ``` @@ -456,7 +456,7 @@ use App\Filament\PatientResource\RelationManagers; public static function getRelations(): array { return [ - RelationManagers\TreatmentsRelationManager::class, // [tl! ++] + RelationManagers\TreatmentsRelationManager::class, ]; } ``` @@ -500,7 +500,7 @@ use Filament\Forms; Forms\Components\TextInput::make('description') ->required() ->maxLength(255) - ->columnSpan('full') // [tl! ++] + ->columnSpan('full') ``` Let's add a `notes` field, which can be used to add more information about the treatment. We can use a [textarea](../forms/fields/textarea) for this: @@ -517,9 +517,9 @@ public function form(Form $form): Form ->required() ->maxLength(255) ->columnSpan('full'), - Forms\Components\Textarea::make('notes') // [tl! add:start] + Forms\Components\Textarea::make('notes') ->maxLength(65535) - ->columnSpan('full'), // [tl! add:end] + ->columnSpan('full'), ]); } ``` @@ -543,10 +543,10 @@ public function form(Form $form): Form Forms\Components\Textarea::make('notes') ->maxLength(65535) ->columnSpan('full'), - Forms\Components\TextInput::make('price') // [tl! add:start] + Forms\Components\TextInput::make('price') ->numeric() ->prefix('$') - ->maxValue(42949672.95), // [tl! add:end] + ->maxValue(42949672.95), ]); } ``` @@ -565,13 +565,13 @@ Inside the new `app/Casts/MoneyCast.php` file, update the `get()` and `set()` me public function get($model, string $key, $value, array $attributes): float { // Transform the integer stored in the database into a float. - return round(floatval($value) / 100, precision: 2); // [tl! ++] + return round(floatval($value) / 100, precision: 2); } public function set($model, string $key, $value, array $attributes): float { // Transform the float into an integer for storage. - return round(floatval($value) * 100); // [tl! ++] + return round(floatval($value) * 100); } ``` @@ -583,9 +583,9 @@ use Illuminate\Database\Eloquent\Model; class Treatment extends Model { - protected $casts = [ // [tl! add:start] + protected $casts = [ 'price' => MoneyCast::class, - ]; // [tl! add:end] + ]; // ... } @@ -606,9 +606,9 @@ public function table(Table $table): Table return $table ->columns([ Tables\Columns\TextColumn::make('description'), - Tables\Columns\TextColumn::make('price') // [tl! add:start] + Tables\Columns\TextColumn::make('price') ->money('usd') - ->sortable(), // [tl! add:end] + ->sortable(), ]); } ``` @@ -627,8 +627,8 @@ public function table(Table $table): Table Tables\Columns\TextColumn::make('price') ->money('usd') ->sortable(), - Tables\Columns\TextColumn::make('created_at') // [tl! add:start] - ->dateTime(), // [tl! add:end] + Tables\Columns\TextColumn::make('created_at') + ->dateTime(), ]); } ``` diff --git a/packages/app/docs/07-notifications.md b/packages/app/docs/07-notifications.md index e757be2cd1..fad4ec64e2 100644 --- a/packages/app/docs/07-notifications.md +++ b/packages/app/docs/07-notifications.md @@ -27,7 +27,7 @@ public function context(Context $context): Context } ``` -You may also control [polling](../notifications/database-notifications#polling): +You may also control [polling](../notifications/database-notifications#polling-for-new-database-notifications): ```php use Filament\Context; @@ -43,7 +43,7 @@ public function context(Context $context): Context ## Echo -Some features of the notifications package, including [receiving real-time database notifications](../notifications/database-notifications#echo) and [broadcast notifications](../notifications/broadcast-notifications), require Laravel Echo to be installed. +Some features of the notifications package, including [receiving real-time database notifications](../notifications/database-notifications#using-echo-to-receive-new-database-notifications-with-websockets) and [broadcast notifications](../notifications/broadcast-notifications), require Laravel Echo to be installed. Firstly, you must set up a [server-side websockets integration](https://laravel.com/docs/broadcasting#server-side-installation) like Pusher. diff --git a/packages/app/docs/11-themes.md b/packages/app/docs/11-themes.md index ff48fcef6f..280b31b6f6 100644 --- a/packages/app/docs/11-themes.md +++ b/packages/app/docs/11-themes.md @@ -151,7 +151,7 @@ Or if you're using Laravel Mix instead of Vite, in your `webpack.mix.js` file, r const mix = require('laravel-mix') mix.postCss('resources/css/filament.css', 'public/css', [ - require('tailwindcss'), // [tl! focus] + require('tailwindcss'), ]) ``` diff --git a/packages/forms/docs/01-installation.md b/packages/forms/docs/01-installation.md index 08864e64f6..242755fe77 100644 --- a/packages/forms/docs/01-installation.md +++ b/packages/forms/docs/01-installation.md @@ -108,16 +108,16 @@ You may also want to update your `vite.config.js` file to refresh the page after ```js import { defineConfig } from 'vite' -import laravel, { refreshPaths } from 'laravel-vite-plugin' // [tl! focus] +import laravel, { refreshPaths } from 'laravel-vite-plugin' export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], - refresh: [ // [tl! focus:start] + refresh: [ ...refreshPaths, 'app/Http/Livewire/**', - ], // [tl! focus:end] + ], }), ], }) @@ -134,7 +134,7 @@ const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ - require('tailwindcss'), // [tl! focus] + require('tailwindcss'), ]) ``` diff --git a/packages/forms/docs/02-getting-started.md b/packages/forms/docs/02-getting-started.md index 811f1fa8ed..db9d39b0ef 100644 --- a/packages/forms/docs/02-getting-started.md +++ b/packages/forms/docs/02-getting-started.md @@ -28,11 +28,11 @@ use Filament\Forms\Form; public function form(Form $form): Form { return $form - ->schema([ // [tl! focus:start] + ->schema([ TextInput::make('title'), TextInput::make('slug'), RichEditor::make('content'), - ]); // [tl! focus:end] + ]); } ``` @@ -76,11 +76,11 @@ use Filament\Forms\Components\TextInput; TextInput::make('slug'), RichEditor::make('content') ->columnSpan(2), - Section::make('Publishing') // [tl! focus:start] + Section::make('Publishing') ->description('Settings for publishing this post.') ->schema([ // ... - ]), // [tl! focus:end] + ]), ] ``` @@ -93,7 +93,7 @@ use Filament\Forms\Components\Select; Section::make('Publishing') ->description('Settings for publishing this post.') - ->schema([ // [tl! focus:start] + ->schema([ Select::make('status') ->options([ 'draft' => 'Draft', @@ -101,7 +101,7 @@ Section::make('Publishing') 'published' => 'Published', ]), DateTimePicker::make('published_at'), - ]) // [tl! focus:end] + ]) ``` This section now contains a [`Select` field](fields/select) and a [`DateTimePicker` field](fields/date-time-picker). You can learn more about those fields and their functionalities on the respective docs pages. diff --git a/packages/forms/docs/06-adding-a-form-to-a-livewire-component.md b/packages/forms/docs/06-adding-a-form-to-a-livewire-component.md index e209f464a3..aacfd27923 100644 --- a/packages/forms/docs/06-adding-a-form-to-a-livewire-component.md +++ b/packages/forms/docs/06-adding-a-form-to-a-livewire-component.md @@ -49,9 +49,9 @@ use Filament\Forms\Form; use Illuminate\Contracts\View\View; use Livewire\Component; -class CreatePost extends Component implements HasForms // [tl! focus] +class CreatePost extends Component implements HasForms { - use InteractsWithForms; // [tl! focus:start] + use InteractsWithForms; public ?array $data = []; @@ -75,7 +75,7 @@ class CreatePost extends Component implements HasForms // [tl! focus] public function create(): void { dd($this->form->getState()); - } // [tl! focus:start] + } public function render(): View { @@ -113,7 +113,7 @@ use App\Models\Post; public function create(): void { - Post::create($this->form->getState()); // [tl! focus] + Post::create($this->form->getState()); } ``` diff --git a/packages/notifications/docs/01-installation.md b/packages/notifications/docs/01-installation.md index b9005e16cc..1c9c421819 100644 --- a/packages/notifications/docs/01-installation.md +++ b/packages/notifications/docs/01-installation.md @@ -106,16 +106,16 @@ You may also want to update your `vite.config.js` file to refresh the page after ```js import { defineConfig } from 'vite' -import laravel, { refreshPaths } from 'laravel-vite-plugin' // [tl! focus] +import laravel, { refreshPaths } from 'laravel-vite-plugin' export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], - refresh: [ // [tl! focus:start] + refresh: [ ...refreshPaths, 'app/Http/Livewire/**', - ], // [tl! focus:end] + ], }), ], }) @@ -132,7 +132,7 @@ const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ - require('tailwindcss'), // [tl! focus] + require('tailwindcss'), ]) ``` diff --git a/packages/notifications/docs/02-sending-notifications.md b/packages/notifications/docs/02-sending-notifications.md index cd36401e84..985ac3bf0b 100644 --- a/packages/notifications/docs/02-sending-notifications.md +++ b/packages/notifications/docs/02-sending-notifications.md @@ -2,6 +2,8 @@ title: Sending notifications --- +## Overview + > To start, make sure the package is [installed](installation) - `@livewire('notifications')` should be in your Blade layout somewhere. Notifications are sent using a `Notification` object that's constructed through a fluent API. Calling the `send()` method on the `Notification` object will dispatch the notification and display it in your application. As the session is used to flash notifications, they can be sent from anywhere in your code, including JavaScript, not just Livewire components. @@ -11,7 +13,7 @@ Notifications are sent using a `Notification` object that's constructed through namespace App\Http\Livewire; -use Filament\Notifications\Notification; // [tl! focus] +use Filament\Notifications\Notification; use Livewire\Component; class EditPost extends Component @@ -20,49 +22,25 @@ class EditPost extends Component { // ... - Notification::make() // [tl! focus:start] + Notification::make() ->title('Saved successfully') ->success() - ->send(); // [tl! focus:end] + ->send(); } } ``` ![Notification](https://user-images.githubusercontent.com/44533235/180995786-c9d6ac68-959a-45d2-8f05-e09ff2b9abd9.png) -## Title +## Setting a title The main message of the notification is shown in the title. You can set the title as follows: ```php use Filament\Notifications\Notification; -Notification::make() - ->title('Saved successfully') // [tl! focus] - ->send(); -``` - -Or with JavaScript: - -```js -new Notification() - .title('Saved successfully') // [tl! focus] - .send() -``` - -Markdown text will automatically be rendered if passed to the title. - -## Icon - -Optionally, a notification can have an icon that's displayed in front of its content. You may also set a color for the icon, which defaults to the `secondary` color specified in your `tailwind.config.js` file. The icon can be the name of any Blade component. By default, the [Blade Heroicons v1](https://github.com/blade-ui-kit/blade-heroicons/tree/1.3.1) package is installed, so you may use the name of any [Heroicons v1](https://v1.heroicons.com) out of the box. However, you may create your own custom icon components or install an alternative library if you wish. - -```php -use Filament\Notifications\Notification; - Notification::make() ->title('Saved successfully') - ->icon('heroicon-o-document-text') // [tl! focus:start] - ->iconColor('success') // [tl! focus:end] ->send(); ``` @@ -71,8 +49,32 @@ Or with JavaScript: ```js new Notification() .title('Saved successfully') - .icon('heroicon-o-document-text') // [tl! focus:start] - .iconColor('success') // [tl! focus:end] + .send() +``` + +Markdown text will automatically be rendered if passed to the title. + +## Setting an icon + +Optionally, a notification can have an icon that's displayed in front of its content. You may also set a color for the icon, which defaults to the `secondary` color specified in your `tailwind.config.js` file. The icon can be the name of any Blade component. By default, the [Blade Heroicons v1](https://github.com/blade-ui-kit/blade-heroicons/tree/1.3.1) package is installed, so you may use the name of any [Heroicons v1](https://v1.heroicons.com) out of the box. However, you may create your own custom icon components or install an alternative library if you wish. + +```php +use Filament\Notifications\Notification; + +Notification::make() + ->title('Saved successfully') + ->icon('heroicon-o-document-text') + ->iconColor('success') + ->send(); +``` + +Or with JavaScript: + +```js +new Notification() + .title('Saved successfully') + .icon('heroicon-o-document-text') + .iconColor('success') .send() ``` @@ -83,34 +85,9 @@ Notifications often have a status like `success`, `warning` or `danger`. Instead ```php use Filament\Notifications\Notification; -Notification::make() - ->title('Saved successfully') - ->success() // [tl! focus] - ->send(); -``` - -Or with JavaScript: - -```js -new Notification() - .title('Saved successfully') - .success() // [tl! focus] - .send() -``` - -![Success, warning and danger notifications](https://user-images.githubusercontent.com/44533235/180995801-3e706ca6-773b-47a0-9fc6-3e28900a9ea9.png) - -## Duration - -By default, notifications are shown for 6 seconds before they're automatically closed. You may specify a custom duration value in milliseconds as follows: - -```php -use Filament\Notifications\Notification; - Notification::make() ->title('Saved successfully') ->success() - ->duration(5000) // [tl! focus] ->send(); ``` @@ -120,7 +97,32 @@ Or with JavaScript: new Notification() .title('Saved successfully') .success() - .duration(5000) // [tl! focus] + .send() +``` + +![Success, warning and danger notifications](https://user-images.githubusercontent.com/44533235/180995801-3e706ca6-773b-47a0-9fc6-3e28900a9ea9.png) + +## Setting a duration + +By default, notifications are shown for 6 seconds before they're automatically closed. You may specify a custom duration value in milliseconds as follows: + +```php +use Filament\Notifications\Notification; + +Notification::make() + ->title('Saved successfully') + ->success() + ->duration(5000) + ->send(); +``` + +Or with JavaScript: + +```js +new Notification() + .title('Saved successfully') + .success() + .duration(5000) .send() ``` @@ -132,7 +134,7 @@ use Filament\Notifications\Notification; Notification::make() ->title('Saved successfully') ->success() - ->seconds(5) // [tl! focus] + ->seconds(5) ->send(); ``` @@ -142,7 +144,7 @@ Or with JavaScript: new Notification() .title('Saved successfully') .success() - .seconds(5) // [tl! focus] + .seconds(5) .send() ``` @@ -154,7 +156,7 @@ use Filament\Notifications\Notification; Notification::make() ->title('Saved successfully') ->success() - ->persistent() // [tl! focus] + ->persistent() ->send(); ``` @@ -164,54 +166,21 @@ Or with JavaScript: new Notification() .title('Saved successfully') .success() - .persistent() // [tl! focus] + .persistent() .send() ``` -## Body +## Setting body text Additional notification text can be shown in the body. Similar to the title, it supports Markdown: ```php use Filament\Notifications\Notification; -Notification::make() - ->title('Saved successfully') - ->success() - ->body('Changes to the **post** have been saved.') // [tl! focus] - ->send(); -``` - -Or with JavaScript: - -```js -new Notification() - .title('Saved successfully') - .success() - .body('Changes to the **post** have been saved.') // [tl! focus] - .send() -``` - -![Notification with Markdown body](https://user-images.githubusercontent.com/44533235/180995813-ce93e747-0f66-4fc5-becb-7e535fb80e46.png) - -## Actions - -Notifications support actions, which are buttons that render below the content of the notification. They can open a URL or emit a Livewire event. Actions can be defined as follows: - -```php -use Filament\Notifications\Actions\Action; // [tl! focus] -use Filament\Notifications\Notification; - Notification::make() ->title('Saved successfully') ->success() ->body('Changes to the **post** have been saved.') - ->actions([ // [tl! focus:start] - Action::make('view') - ->button(), - Action::make('undo') - ->color('gray'), - ]) // [tl! focus:end] ->send(); ``` @@ -222,12 +191,45 @@ new Notification() .title('Saved successfully') .success() .body('Changes to the **post** have been saved.') - .actions([ // [tl! focus:start] + .send() +``` + +![Notification with Markdown body](https://user-images.githubusercontent.com/44533235/180995813-ce93e747-0f66-4fc5-becb-7e535fb80e46.png) + +## Adding notification actions + +Notifications support [actions](../actions/trigger-button), which are buttons that render below the content of the notification. They can open a URL or emit a Livewire event. Actions can be defined as follows: + +```php +use Filament\Notifications\Actions\Action; +use Filament\Notifications\Notification; + +Notification::make() + ->title('Saved successfully') + ->success() + ->body('Changes to the **post** have been saved.') + ->actions([ + Action::make('view') + ->button(), + Action::make('undo') + ->color('gray'), + ]) + ->send(); +``` + +Or with JavaScript: + +```js +new Notification() + .title('Saved successfully') + .success() + .body('Changes to the **post** have been saved.') + .actions([ new NotificationAction('view') .button(), new NotificationAction('undo') .color('gray'), - ]) // [tl! focus:end] + ]) .send() ``` @@ -235,7 +237,7 @@ new Notification() You can learn more about how to style action buttons [here](../actions/trigger-button). -### Opening URLs from actions +### Opening URLs from notification actions You can open a URL, optionally in a new tab, when clicking on an action: @@ -250,7 +252,7 @@ Notification::make() ->actions([ Action::make('view') ->button() - ->url(route('posts.show', $post), shouldOpenInNewTab: true) // [tl! focus] + ->url(route('posts.show', $post), shouldOpenInNewTab: true) Action::make('undo') ->color('gray'), ]) @@ -267,15 +269,15 @@ new Notification() .actions([ new NotificationAction('view') .button() - .url('/view') // [tl! focus:start] - .openUrlInNewTab(), // [tl! focus:end] + .url('/view') + .openUrlInNewTab(), new NotificationAction('undo') .color('gray'), ]) .send() ``` -### Emitting Livewire events from actions +### Emitting Livewire events from notification actions Sometimes you want to execute additional code when a notification action is clicked. This can be achieved by setting a Livewire event which should be emitted on clicking the action. You may optionally pass an array of data, which will be available as parameters in the event listener on your Livewire component: @@ -293,7 +295,7 @@ Notification::make() ->url(route('posts.show', $post), shouldOpenInNewTab: true), Action::make('undo') ->color('gray') - ->emit('undoEditingPost', [$post->id]), // [tl! focus] + ->emit('undoEditingPost', [$post->id]), ]) ->send(); ``` @@ -303,15 +305,15 @@ You can also `emitSelf`, `emitUp` and `emitTo`: ```php Action::make('undo') ->color('secondary') - ->emitSelf('undoEditingPost', [$post->id]) // [tl! focus] + ->emitSelf('undoEditingPost', [$post->id]) Action::make('undo') ->color('secondary') - ->emitUp('undoEditingPost', [$post->id]) // [tl! focus] + ->emitUp('undoEditingPost', [$post->id]) Action::make('undo') ->color('secondary') - ->emitTo('another_component', 'undoEditingPost', [$post->id]) // [tl! focus] + ->emitTo('another_component', 'undoEditingPost', [$post->id]) ``` Or with JavaScript: @@ -328,7 +330,7 @@ new Notification() .openUrlInNewTab(), new NotificationAction('undo') .color('gray') - .emit('undoEditingPost'), // [tl! focus] + .emit('undoEditingPost'), ]) .send() ``` @@ -338,17 +340,18 @@ Similarly, `emitSelf`, `emitUp` and `emitTo` are also available: ```js new NotificationAction('undo') .color('secondary') - .emitSelf('undoEditingPost') // [tl! focus] + .emitSelf('undoEditingPost') new NotificationAction('undo') .color('secondary') - .emitUp('undoEditingPost') // [tl! focus] + .emitUp('undoEditingPost') new NotificationAction('undo') .color('secondary') - .emitTo('another_component', 'undoEditingPost') // [tl! focus] + .emitTo('another_component', 'undoEditingPost') ``` -### Closing notifications + +### Closing notifications from actions After opening a URL or emitting an event from your action, you may want to close the notification right away: @@ -367,7 +370,7 @@ Notification::make() Action::make('undo') ->color('gray') ->emit('undoEditingPost', [$post->id]) - ->close(), // [tl! focus] + ->close(), ]) ->send(); ``` @@ -387,7 +390,7 @@ new Notification() new NotificationAction('undo') .color('gray') .emit('undoEditingPost') - .close(), // [tl! focus] + .close(), ]) .send() ``` diff --git a/packages/notifications/docs/03-database-notifications.md b/packages/notifications/docs/03-database-notifications.md index 935246203d..03b879bfd9 100644 --- a/packages/notifications/docs/03-database-notifications.md +++ b/packages/notifications/docs/03-database-notifications.md @@ -2,6 +2,8 @@ title: Database notifications --- +## Overview + > To start, make sure the package is [installed](installation) - `@livewire('notifications')` should be in your Blade layout somewhere. Before we start, make sure that the [Laravel notifications table](https://laravel.com/docs/notifications#database-prerequisites) is added to your database: @@ -43,7 +45,7 @@ Notifications::databaseNotificationsTrigger('filament-notifications.database-not Now, simply move the `@livewire('notifications')` component to the position in your HTML that you wish to render the database notifications trigger button. It should appear, and open the database notifications modal when clicked! -## Sending notifications +## Sending database notifications There are several ways to send database notifications, depending on which one suits you best. @@ -87,11 +89,11 @@ public function toDatabase(User $notifiable): array } ``` -## Receiving notifications +## Receiving database notifications Without any setup, new database notifications will only be received when the page is first loaded. -### Polling +### Polling for new database notifications Polling is the practice of periodically making a request to the server to check for new notifications. This is a good approach as the setup is simple, but some may say that it is not a scalable solution as it increases server load. @@ -113,7 +115,7 @@ Notifications::databaseNotifications(); Notifications::databaseNotificationsPollingInterval(null); ``` -### Echo +### Using Echo to receive new database notifications with websockets Alternatively, the package has a native integration with [Laravel Echo](https://laravel.com/docs/broadcasting#client-side-installation). Make sure Echo is installed, as well as a [server-side websockets integration](https://laravel.com/docs/broadcasting#server-side-installation) like Pusher. @@ -132,7 +134,7 @@ Notification::make() event(new DatabaseNotificationsSent($recipient)); ``` -## Opening the notifications modal +## Opening the database notifications modal Instead of rendering the trigger button as described above, you can always open the database notifications modal from anywhere by dispatching an `open-modal` browser event: diff --git a/packages/notifications/docs/04-broadcast-notifications.md b/packages/notifications/docs/04-broadcast-notifications.md index 0dd7753e3a..527d9b77cd 100644 --- a/packages/notifications/docs/04-broadcast-notifications.md +++ b/packages/notifications/docs/04-broadcast-notifications.md @@ -2,13 +2,15 @@ title: Broadcast notifications --- +## Overview + > To start, make sure the package is [installed](installation) - `@livewire('notifications')` should be in your Blade layout somewhere. By default, Filament will send flash notifications via the Laravel session. However, you may wish that your notifications are "broadcast" to a user in real-time, instead. This could be used to send a temporary success notification from a queued job after it has finished processing. We have a native integration with [Laravel Echo](https://laravel.com/docs/broadcasting#client-side-installation). Make sure Echo is installed, as well as a [server-side websockets integration](https://laravel.com/docs/broadcasting#server-side-installation) like Pusher. -## Sending notifications +## Sending broadcast notifications There are several ways to send broadcast notifications, depending on which one suits you best. diff --git a/packages/notifications/docs/05-customizing-notifications.md b/packages/notifications/docs/05-customizing-notifications.md index d53702fce7..3b01cff3f7 100644 --- a/packages/notifications/docs/05-customizing-notifications.md +++ b/packages/notifications/docs/05-customizing-notifications.md @@ -2,6 +2,8 @@ title: Customizing notifications --- +## Overview + Notifications come fully styled out of the box. However, if you want to apply your own styling or use a custom view to render notifications, there's multiple options. ## Styling notifications @@ -17,7 +19,7 @@ Notifications have dedicated CSS classes you can hook into to apply your own sty - `filament-notifications-body` - `filament-notifications-actions` -## Custom notification view +## Using a custom notification view If your desired customization can't be achieved using the CSS classes above, you can create a custom view to render the notification. To configure the notification view, call the static `configureUsing()` method inside a service provider's `boot()` method and specify the view to use: @@ -64,7 +66,7 @@ Getters for all notification properties will be available in the view. So, a cus ``` -## Custom notification object +## Using a custom notification object Maybe your notifications require additional functionality that's not defined in the package's `Notification` class. Then you can create your own `Notification` class, which extends the package's `Notification` class. For example, your notification design might need a size property. diff --git a/packages/notifications/docs/06-testing.md b/packages/notifications/docs/06-testing.md index ded261af59..a8cd60bc9e 100644 --- a/packages/notifications/docs/06-testing.md +++ b/packages/notifications/docs/06-testing.md @@ -2,9 +2,11 @@ title: Testing --- +## Overview + All examples in this guide will be written using [Pest](https://pestphp.com). However, you can easily adapt this to PHPUnit. -## Session notifications +## Testing session notifications To check if a notification was sent using the session, use the `assertNotified()` helper: diff --git a/packages/tables/docs/01-installation.md b/packages/tables/docs/01-installation.md index 5c2fa1d941..b0e80a5343 100644 --- a/packages/tables/docs/01-installation.md +++ b/packages/tables/docs/01-installation.md @@ -108,16 +108,16 @@ You may also want to update your `vite.config.js` file to refresh the page after ```js import { defineConfig } from 'vite' -import laravel, { refreshPaths } from 'laravel-vite-plugin' // [tl! focus] +import laravel, { refreshPaths } from 'laravel-vite-plugin' export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], - refresh: [ // [tl! focus:start] + refresh: [ ...refreshPaths, 'app/Http/Livewire/**', - ], // [tl! focus:end] + ], }), ], }) @@ -134,7 +134,7 @@ const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ - require('tailwindcss'), // [tl! focus] + require('tailwindcss'), ]) ``` diff --git a/packages/tables/docs/02-getting-started.md b/packages/tables/docs/02-getting-started.md index 4b518e2d0f..2483737cd4 100644 --- a/packages/tables/docs/02-getting-started.md +++ b/packages/tables/docs/02-getting-started.md @@ -22,12 +22,12 @@ use Filament\Tables\Table; public function table(Table $table): Table { return $table - ->columns([ // [tl! focus:start] + ->columns([ TextColumn::make('title'), TextColumn::make('slug'), IconColumn::make('is_featured') ->boolean(), - ]); // [tl! focus:end] + ]); } ``` @@ -82,7 +82,7 @@ public function table(Table $table): Table ->schema([ // ... ]) - ->filters([ // [tl! focus:start] + ->filters([ Filter::make('is_featured'), SelectFilter::make('status') ->options([ @@ -90,7 +90,7 @@ public function table(Table $table): Table 'reviewing' => 'Reviewing', 'published' => 'Published', ]), - ]); // [tl! focus:end] + ]); } ``` @@ -116,7 +116,7 @@ public function table(Table $table): Table ->schema([ // ... ]) - ->actions([ // [tl! focus:start] + ->actions([ Action::make('feature') ->action(function (Post $record) { $record->is_featured = true; @@ -132,7 +132,7 @@ public function table(Table $table): Table ]) ->bulkActions([ DeleteBulkAction::make(), - ]); // [tl! focus:end] + ]); } ``` diff --git a/packages/tables/docs/08-adding-a-table-to-a-livewire-component.md b/packages/tables/docs/08-adding-a-table-to-a-livewire-component.md index fac187ed63..beb7d975a7 100644 --- a/packages/tables/docs/08-adding-a-table-to-a-livewire-component.md +++ b/packages/tables/docs/08-adding-a-table-to-a-livewire-component.md @@ -47,9 +47,9 @@ use Filament\Tables\Table; use Illuminate\Contracts\View\View; use Livewire\Component; -class ListProducts extends Component implements HasTable // [tl! focus] +class ListProducts extends Component implements HasTable { - use InteractsWithTable; // [tl! focus] + use InteractsWithTable; public function table(Table $table): Table { @@ -67,7 +67,7 @@ class ListProducts extends Component implements HasTable // [tl! focus] ->bulkActions([ // ... ]); - } // [tl! focus:start] + } public function render(): View { diff --git a/packages/widgets/docs/01-installation.md b/packages/widgets/docs/01-installation.md index 604b5db904..1e960a6506 100644 --- a/packages/widgets/docs/01-installation.md +++ b/packages/widgets/docs/01-installation.md @@ -106,16 +106,16 @@ You may also want to update your `vite.config.js` file to refresh the page after ```js import { defineConfig } from 'vite' -import laravel, { refreshPaths } from 'laravel-vite-plugin' // [tl! focus] +import laravel, { refreshPaths } from 'laravel-vite-plugin' export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], - refresh: [ // [tl! focus:start] + refresh: [ ...refreshPaths, 'app/Http/Livewire/**', - ], // [tl! focus:end] + ], }), ], }) @@ -132,7 +132,7 @@ const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ - require('tailwindcss'), // [tl! focus] + require('tailwindcss'), ]) ```