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-22 13:52:57 +01:00
parent f917de8088
commit a4a6906d46
57 changed files with 539 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-assets/app/app/Livewire/Forms/FieldsDemo.php
+4
View File
@@ -1145,6 +1145,8 @@ class FieldsDemo extends Component implements HasForms
->schema([
TextInput::make('suffixAction')
->label('Cost')
->prefix('€')
->default('22.66')
->suffixAction(
Action::make('copyCostToPrice')
->icon('heroicon-m-clipboard'),
@@ -1158,6 +1160,8 @@ class FieldsDemo extends Component implements HasForms
->schema([
TextInput::make('hintAction')
->label('Cost')
->prefix('€')
->default('22.66')
->hintAction(
Action::make('copyCostToPrice')
->icon('heroicon-m-clipboard'),
docs-assets/app/app/Livewire/Forms/LayoutDemo.php
+2 -2
View File
@@ -471,8 +471,8 @@ class LayoutDemo extends Component implements HasForms
->schema([
Grid::make(2)
->schema([
Placeholder::make('fieldExample')
->content(new HtmlString('<div class="h-9 rounded-lg bg-gray-100"></div>')),
TextInput::make('stars')
->default('4572100479'),
Actions::make([
Action::make('star')
->icon('heroicon-m-star'),
docs-assets/app/app/Livewire/Infolists/EntriesDemo.php
+31
View File
@@ -2,6 +2,7 @@
namespace App\Livewire\Infolists;
use Filament\Infolists\Components\Actions\Action;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Infolists\Components\ColorEntry;
use Filament\Infolists\Components\Group;
@@ -472,6 +473,36 @@ class EntriesDemo extends Component implements HasInfolists
->columns(2)
->grid(2),
]),
Group::make()
->id('suffixAction')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('suffixAction')
->label('Cost')
->prefix('€')
->default('22.66')
->suffixAction(
Action::make('copyCostToPrice')
->icon('heroicon-m-clipboard'),
),
]),
Group::make()
->id('hintAction')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
TextEntry::make('hintAction')
->label('Cost')
->prefix('€')
->default('22.66')
->hintAction(
Action::make('copyCostToPrice')
->icon('heroicon-m-clipboard'),
),
]),
])
->state([
'comments' => [
docs-assets/app/app/Livewire/Infolists/LayoutDemo.php
+66
View File
@@ -2,6 +2,9 @@
namespace App\Livewire\Infolists;
use Filament\Infolists\Components\Actions;
use Filament\Infolists\Components\Actions\Action;
use Filament\Infolists\Components\Grid;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Infolists\Components\Card;
@@ -16,6 +19,7 @@ use Filament\Infolists\Components\TextEntry;
use Filament\Infolists\Concerns\InteractsWithInfolists;
use Filament\Infolists\Contracts\HasInfolists;
use Filament\Infolists\Infolist;
use Illuminate\Support\HtmlString;
use Livewire\Component;
class LayoutDemo extends Component implements HasForms, HasInfolists
@@ -295,6 +299,68 @@ class LayoutDemo extends Component implements HasForms, HasInfolists
])->grow(false),
]),
]),
Group::make()
->id('anonymousActions')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Actions::make([
Action::make('star')
->icon('heroicon-m-star'),
Action::make('resetStars')
->icon('heroicon-m-x-mark')
->color('danger'),
]),
]),
Group::make()
->id('anonymousActionsFullWidth')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Actions::make([
Action::make('star')
->icon('heroicon-m-star'),
Action::make('resetStars')
->icon('heroicon-m-x-mark')
->color('danger'),
])->fullWidth(),
]),
Group::make()
->id('anonymousActionsHorizontallyAlignedCenter')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Actions::make([
Action::make('star')
->icon('heroicon-m-star'),
Action::make('resetStars')
->icon('heroicon-m-x-mark')
->color('danger'),
])->alignment('center'),
]),
Group::make()
->id('anonymousActionsVerticallyAlignedEnd')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Grid::make(2)
->schema([
TextEntry::make('stars')
->state(4572100479)
->numeric(),
Actions::make([
Action::make('star')
->icon('heroicon-m-star'),
Action::make('resetStars')
->icon('heroicon-m-x-mark')
->color('danger'),
])->verticalAlignment('end'),
]),
]),
])
->state([
'items' => [
docs-assets/app/composer.json
-4
View File
@@ -61,10 +61,6 @@
{
"type": "path",
"url": "../../packages/*"
},
{
"type": "path",
"url": "../../../../livewire"
}
],
"config": {
docs-assets/app/composer.lock
Generated
+70 -54
View File
@@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "431effab1db33cf39e5e26d23d801808",
"content-hash": "b99550002df049e736a382e3f7c0ebee",
"packages": [
{
"name": "blade-ui-kit/blade-heroicons",
@@ -937,7 +937,7 @@
"dist": {
"type": "path",
"url": "../../packages/support",
"reference": "f8252702d923c6fae2286795f32ae6fde64be288"
"reference": "2c7fa92d0b5f5a0e94638e2bc7b17c377b2c4010"
},
"require": {
"blade-ui-kit/blade-heroicons": "^2.0",
@@ -945,7 +945,7 @@
"illuminate/contracts": "^9.0|^10.0",
"illuminate/support": "^9.0|^10.0",
"illuminate/view": "^9.0|^10.0",
"livewire/livewire": "*",
"livewire/livewire": "^3.0",
"php": "^8.1",
"ryangjchandler/blade-capture-directive": "^0.2|^0.3",
"spatie/color": "^1.5",
@@ -988,7 +988,7 @@
"dist": {
"type": "path",
"url": "../../packages/tables",
"reference": "28b2c8b58616aca74bc4d0b3089d73d5ba148d19"
"reference": "4439567bb9cdbd2abda29ef825b08e28903bab01"
},
"require": {
"filament/actions": "self.version",
@@ -1000,7 +1000,7 @@
"illuminate/filesystem": "^9.0|^10.0",
"illuminate/support": "^9.0|^10.0",
"illuminate/view": "^9.0|^10.0",
"kirschbaum-development/eloquent-power-joins": "^2.6",
"kirschbaum-development/eloquent-power-joins": "^3.0",
"php": "^8.1",
"spatie/laravel-package-tools": "^1.9"
},
@@ -1613,22 +1613,22 @@
},
{
"name": "kirschbaum-development/eloquent-power-joins",
"version": "2.7.3",
"version": "3.2.0",
"source": {
"type": "git",
"url": "https://github.com/kirschbaum-development/eloquent-power-joins.git",
"reference": "14eb8de38e30ce8f7323beb45800673467567f56"
"reference": "ef388b6b6ae1502fac172b8beb6f13ffe541569b"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/kirschbaum-development/eloquent-power-joins/zipball/14eb8de38e30ce8f7323beb45800673467567f56",
"reference": "14eb8de38e30ce8f7323beb45800673467567f56",
"url": "https://api.github.com/repos/kirschbaum-development/eloquent-power-joins/zipball/ef388b6b6ae1502fac172b8beb6f13ffe541569b",
"reference": "ef388b6b6ae1502fac172b8beb6f13ffe541569b",
"shasum": ""
},
"require": {
"illuminate/database": "^6.0|^7.0|^8.0|^9.0|^10.0",
"illuminate/support": "^6.0|^7.0|^8.0|^9.0|^10.0",
"php": "^7.1|^8.0"
"illuminate/database": "^8.0|^9.0|^10.0",
"illuminate/support": "^8.0|^9.0|^10.0",
"php": "^8.0"
},
"require-dev": {
"laravel/legacy-factories": "^1.0@dev",
@@ -1669,9 +1669,9 @@
],
"support": {
"issues": "https://github.com/kirschbaum-development/eloquent-power-joins/issues",
"source": "https://github.com/kirschbaum-development/eloquent-power-joins/tree/2.7.3"
"source": "https://github.com/kirschbaum-development/eloquent-power-joins/tree/3.2.0"
},
"time": "2023-03-05T11:19:12+00:00"
"time": "2023-06-25T11:42:03+00:00"
},
{
"name": "laravel/framework",
@@ -2632,16 +2632,22 @@
},
{
"name": "livewire/livewire",
"version": "2.99.99",
"version": "v3.0.0-beta.3",
"source": {
"type": "git",
"url": "https://github.com/livewire/livewire.git",
"reference": "04298292a365841879d64c13881d5499517bb597"
},
"dist": {
"type": "path",
"url": "../../../../livewire3",
"reference": "a0fde84bb5445b6baa53ab194a4584162b1a7ce8"
"type": "zip",
"url": "https://api.github.com/repos/livewire/livewire/zipball/04298292a365841879d64c13881d5499517bb597",
"reference": "04298292a365841879d64c13881d5499517bb597",
"shasum": ""
},
"require": {
"illuminate/database": "^9.0|^10.0",
"illuminate/support": "^9.0|^10.0",
"illuminate/validation": "^9.0|^10.0",
"illuminate/database": "^9.0|^10.0|^11.0",
"illuminate/support": "^9.0|^10.0|^11.0",
"illuminate/validation": "^9.0|^10.0|^11.0",
"league/mime-type-detection": "^1.9",
"php": "^8.1",
"symfony/http-kernel": "^5.0|^6.0"
@@ -2662,7 +2668,7 @@
"Livewire\\LivewireServiceProvider"
],
"aliases": {
"Livewire": "Livewire\\LivewireManager"
"Livewire": "Livewire\\Livewire"
}
}
},
@@ -2674,13 +2680,7 @@
"Livewire\\": "src/"
}
},
"autoload-dev": {
"psr-4": {
"App\\": "vendor/orchestra/testbench-core/laravel/app",
"Tests\\": "tests/",
"LegacyTests\\": "legacy_tests/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
@@ -2691,9 +2691,17 @@
}
],
"description": "A front-end framework for Laravel.",
"transport-options": {
"relative": true
}
"support": {
"issues": "https://github.com/livewire/livewire/issues",
"source": "https://github.com/livewire/livewire/tree/v3.0.0-beta.3"
},
"funding": [
{
"url": "https://github.com/livewire",
"type": "github"
}
],
"time": "2023-07-21T23:02:51+00:00"
},
{
"name": "masterminds/html5",
@@ -7165,37 +7173,33 @@
},
{
"name": "mockery/mockery",
"version": "1.6.2",
"version": "1.6.4",
"source": {
"type": "git",
"url": "https://github.com/mockery/mockery.git",
"reference": "13a7fa2642c76c58fa2806ef7f565344c817a191"
"reference": "d1413755e26fe56a63455f7753221c86cbb88f66"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/mockery/mockery/zipball/13a7fa2642c76c58fa2806ef7f565344c817a191",
"reference": "13a7fa2642c76c58fa2806ef7f565344c817a191",
"url": "https://api.github.com/repos/mockery/mockery/zipball/d1413755e26fe56a63455f7753221c86cbb88f66",
"reference": "d1413755e26fe56a63455f7753221c86cbb88f66",
"shasum": ""
},
"require": {
"hamcrest/hamcrest-php": "^2.0.1",
"lib-pcre": ">=7.0",
"php": "^7.4 || ^8.0"
"php": ">=7.4,<8.3"
},
"conflict": {
"phpunit/phpunit": "<8.0"
},
"require-dev": {
"phpunit/phpunit": "^8.5 || ^9.3",
"psalm/plugin-phpunit": "^0.18",
"vimeo/psalm": "^5.9"
"psalm/plugin-phpunit": "^0.18.4",
"symplify/easy-coding-standard": "^11.5.0",
"vimeo/psalm": "^5.13.1"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-main": "1.6.x-dev"
}
},
"autoload": {
"files": [
"library/helpers.php",
@@ -7213,12 +7217,20 @@
{
"name": "Pádraic Brady",
"email": "padraic.brady@gmail.com",
"homepage": "http://blog.astrumfutura.com"
"homepage": "https://github.com/padraic",
"role": "Author"
},
{
"name": "Dave Marshall",
"email": "dave.marshall@atstsolutions.co.uk",
"homepage": "http://davedevelopment.co.uk"
"homepage": "https://davedevelopment.co.uk",
"role": "Developer"
},
{
"name": "Nathanael Esayeas",
"email": "nathanael.esayeas@protonmail.com",
"homepage": "https://github.com/ghostwriter",
"role": "Lead Developer"
}
],
"description": "Mockery is a simple yet flexible PHP mock object framework",
@@ -7236,10 +7248,13 @@
"testing"
],
"support": {
"docs": "https://docs.mockery.io/",
"issues": "https://github.com/mockery/mockery/issues",
"source": "https://github.com/mockery/mockery/tree/1.6.2"
"rss": "https://github.com/mockery/mockery/releases.atom",
"security": "https://github.com/mockery/mockery/security/advisories",
"source": "https://github.com/mockery/mockery"
},
"time": "2023-06-07T09:07:52+00:00"
"time": "2023-07-19T15:51:02+00:00"
},
{
"name": "myclabs/deep-copy",
@@ -8438,16 +8453,16 @@
},
{
"name": "sebastian/global-state",
"version": "6.0.0",
"version": "6.0.1",
"source": {
"type": "git",
"url": "https://github.com/sebastianbergmann/global-state.git",
"reference": "aab257c712de87b90194febd52e4d184551c2d44"
"reference": "7ea9ead78f6d380d2a667864c132c2f7b83055e4"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/sebastianbergmann/global-state/zipball/aab257c712de87b90194febd52e4d184551c2d44",
"reference": "aab257c712de87b90194febd52e4d184551c2d44",
"url": "https://api.github.com/repos/sebastianbergmann/global-state/zipball/7ea9ead78f6d380d2a667864c132c2f7b83055e4",
"reference": "7ea9ead78f6d380d2a667864c132c2f7b83055e4",
"shasum": ""
},
"require": {
@@ -8487,7 +8502,8 @@
],
"support": {
"issues": "https://github.com/sebastianbergmann/global-state/issues",
"source": "https://github.com/sebastianbergmann/global-state/tree/6.0.0"
"security": "https://github.com/sebastianbergmann/global-state/security/policy",
"source": "https://github.com/sebastianbergmann/global-state/tree/6.0.1"
},
"funding": [
{
@@ -8495,7 +8511,7 @@
"type": "github"
}
],
"time": "2023-02-03T07:07:38+00:00"
"time": "2023-07-19T07:19:23+00:00"
},
{
"name": "sebastian/lines-of-code",
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/css/filament/forms/forms.css
+19 -2
View File
File diff suppressed because one or more lines are too long
docs-assets/app/public/js/filament/forms/components/file-upload.js
+33 -14
View File
File diff suppressed because one or more lines are too long
docs-assets/app/public/js/filament/forms/components/markdown-editor.js
+1 -1
View File
File diff suppressed because one or more lines are too long
docs-assets/app/public/js/filament/forms/components/select.js
+1 -1
View File
File diff suppressed because one or more lines are too long
docs-assets/app/public/js/filament/forms/forms.js
+1 -1
View File
@@ -1 +1 @@
(()=>{function b(n){n.directive("mask",(t,{value:e,expression:u},{effect:f,evaluateLater:c})=>{let r=()=>u,i="";queueMicrotask(()=>{if(["function","dynamic"].includes(e)){let o=c(u);f(()=>{r=a=>{let s;return n.dontAutoEvaluateFunctions(()=>{o(p=>{s=typeof p=="function"?p(a):p},{scope:{$input:a,$money:I.bind({el:t})}})}),s},l(t,!1)})}else l(t,!1);t._x_model&&t._x_model.set(t.value)}),t.addEventListener("input",()=>l(t)),t.addEventListener("blur",()=>l(t,!1));function l(o,a=!0){let s=o.value,p=r(s);if(!p||p==="false")return!1;if(i.length-o.value.length===1)return i=o.value;let m=()=>{i=o.value=d(s,p)};a?k(o,p,()=>{m()}):m()}function d(o,a){if(o==="")return"";let s=g(a,o);return h(a,s)}}).before("model")}function k(n,t,e){let u=n.selectionStart,f=n.value;e();let c=f.slice(0,u),r=h(t,g(t,c)).length;n.setSelectionRange(r,r)}function g(n,t){let e=t,u="",f={9:/[0-9]/,a:/[a-zA-Z]/,"*":/[a-zA-Z0-9]/},c="";for(let r=0;r<n.length;r++){if(["9","a","*"].includes(n[r])){c+=n[r];continue}for(let i=0;i<e.length;i++)if(e[i]===n[r]){e=e.slice(0,i)+e.slice(i+1);break}}for(let r=0;r<c.length;r++){let i=!1;for(let l=0;l<e.length;l++)if(f[c[r]].test(e[l])){u+=e[l],e=e.slice(0,l)+e.slice(l+1),i=!0;break}if(!i)break}return u}function h(n,t){let e=Array.from(t),u="";for(let f=0;f<n.length;f++){if(!["9","a","*"].includes(n[f])){u+=n[f];continue}if(e.length===0)break;u+=e.shift()}return u}function I(n,t=".",e,u=2){if(n==="-")return"-";if(/^\D+$/.test(n))return"9";e=e??(t===","?".":",");let f=(l,d)=>{let o="",a=0;for(let s=l.length-1;s>=0;s--)l[s]!==d&&(a===3?(o=l[s]+d+o,a=0):o=l[s]+o,a++);return o},c=n.startsWith("-")?"-":"",r=n.replaceAll(new RegExp(`[^0-9\\${t}]`,"g"),""),i=Array.from({length:r.split(t)[0].length}).fill("9").join("");return i=`${c}${f(i,e)}`,u>0&&n.includes(t)&&(i+=`${t}`+"9".repeat(u)),queueMicrotask(()=>{this.el.value.endsWith(t)||this.el.value[this.el.selectionStart-1]===t&&this.el.setSelectionRange(this.el.selectionStart-1,this.el.selectionStart-1)}),i}var v=b;document.addEventListener("alpine:init",()=>{window.Alpine.plugin(v)});})();
(()=>{function b(n){n.directive("mask",(e,{value:t,expression:u},{effect:f,evaluateLater:c})=>{let r=()=>u,l="";queueMicrotask(()=>{if(["function","dynamic"].includes(t)){let o=c(u);f(()=>{r=a=>{let s;return n.dontAutoEvaluateFunctions(()=>{o(d=>{s=typeof d=="function"?d(a):d},{scope:{$input:a,$money:I.bind({el:e})}})}),s},i(e,!1)})}else i(e,!1);e._x_model&&e._x_model.set(e.value)}),e.addEventListener("input",()=>i(e)),e.addEventListener("blur",()=>i(e,!1));function i(o,a=!0){let s=o.value,d=r(s);if(!d||d==="false")return!1;if(l.length-o.value.length===1)return l=o.value;let g=()=>{l=o.value=p(s,d)};a?k(o,d,()=>{g()}):g()}function p(o,a){if(o==="")return"";let s=h(a,o);return m(a,s)}}).before("model")}function k(n,e,t){let u=n.selectionStart,f=n.value;t();let c=f.slice(0,u),r=m(e,h(e,c)).length;n.setSelectionRange(r,r)}function h(n,e){let t=e,u="",f={9:/[0-9]/,a:/[a-zA-Z]/,"*":/[a-zA-Z0-9]/},c="";for(let r=0;r<n.length;r++){if(["9","a","*"].includes(n[r])){c+=n[r];continue}for(let l=0;l<t.length;l++)if(t[l]===n[r]){t=t.slice(0,l)+t.slice(l+1);break}}for(let r=0;r<c.length;r++){let l=!1;for(let i=0;i<t.length;i++)if(f[c[r]].test(t[i])){u+=t[i],t=t.slice(0,i)+t.slice(i+1),l=!0;break}if(!l)break}return u}function m(n,e){let t=Array.from(e),u="";for(let f=0;f<n.length;f++){if(!["9","a","*"].includes(n[f])){u+=n[f];continue}if(t.length===0)break;u+=t.shift()}return u}function I(n,e=".",t,u=2){if(n==="-")return"-";if(/^\D+$/.test(n))return"9";t=t??(e===","?".":",");let f=(i,p)=>{let o="",a=0;for(let s=i.length-1;s>=0;s--)i[s]!==p&&(a===3?(o=i[s]+p+o,a=0):o=i[s]+o,a++);return o},c=n.startsWith("-")?"-":"",r=n.replaceAll(new RegExp(`[^0-9\\${e}]`,"g"),""),l=Array.from({length:r.split(e)[0].length}).fill("9").join("");return l=`${c}${f(l,t)}`,u>0&&n.includes(e)&&(l+=`${e}`+"9".repeat(u)),queueMicrotask(()=>{this.el.value.endsWith(e)||this.el.value[this.el.selectionStart-1]===e&&this.el.setSelectionRange(this.el.selectionStart-1,this.el.selectionStart-1)}),l}var v=b;document.addEventListener("alpine:init",()=>{window.Alpine.plugin(v)});})();
docs-assets/screenshots/images/dark/forms/fields/actions/hint.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

docs-assets/screenshots/images/dark/forms/fields/actions/suffix.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

docs-assets/screenshots/images/dark/forms/layout/actions/anonymous/full-width.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

docs-assets/screenshots/images/dark/forms/layout/actions/anonymous/horizontally-aligned-center.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

docs-assets/screenshots/images/dark/forms/layout/actions/anonymous/simple.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

docs-assets/screenshots/images/dark/forms/layout/actions/anonymous/vertically-aligned-end.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

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

After

Width:  |  Height:  |  Size: 17 KiB

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

After

Width:  |  Height:  |  Size: 11 KiB

docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/full-width.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/horizontally-aligned-center.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

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

After

Width:  |  Height:  |  Size: 16 KiB

docs-assets/screenshots/images/dark/infolists/layout/actions/anonymous/vertically-aligned-end.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

docs-assets/screenshots/images/light/actions/modal/confirmation-custom-text.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 50 KiB

docs-assets/screenshots/images/light/actions/modal/confirmation.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 39 KiB

docs-assets/screenshots/images/light/actions/modal/icon.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 39 KiB

docs-assets/screenshots/images/light/actions/trigger-button/badge.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

docs-assets/screenshots/images/light/actions/trigger-button/button.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

docs-assets/screenshots/images/light/actions/trigger-button/danger.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

docs-assets/screenshots/images/light/actions/trigger-button/icon-after.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

docs-assets/screenshots/images/light/actions/trigger-button/icon-button.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

docs-assets/screenshots/images/light/actions/trigger-button/icon.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

docs-assets/screenshots/images/light/actions/trigger-button/large.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

docs-assets/screenshots/images/light/actions/trigger-button/link.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

docs-assets/screenshots/images/light/actions/trigger-button/outlined.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

docs-assets/screenshots/images/light/actions/trigger-button/success-badge.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

docs-assets/screenshots/images/light/forms/fields/actions/hint.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

docs-assets/screenshots/images/light/forms/fields/actions/suffix.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

docs-assets/screenshots/images/light/forms/layout/actions/anonymous/full-width.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

docs-assets/screenshots/images/light/forms/layout/actions/anonymous/horizontally-aligned-center.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

docs-assets/screenshots/images/light/forms/layout/actions/anonymous/simple.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

docs-assets/screenshots/images/light/forms/layout/actions/anonymous/vertically-aligned-end.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

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

After

Width:  |  Height:  |  Size: 16 KiB

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

After

Width:  |  Height:  |  Size: 11 KiB

docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/full-width.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/horizontally-aligned-center.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

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

After

Width:  |  Height:  |  Size: 17 KiB

docs-assets/screenshots/images/light/infolists/layout/actions/anonymous/vertically-aligned-end.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

docs-assets/screenshots/schema.js
+54
View File
@@ -1459,6 +1459,24 @@ export default {
deviceScaleFactor: 3,
},
},
'infolists/entries/actions/suffix': {
url: 'infolists/entries',
selector: '#suffixAction',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/entries/actions/hint': {
url: 'infolists/entries',
selector: '#hintAction',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/layout/fieldset/simple': {
url: 'infolists/layout',
selector: '#fieldset',
@@ -1567,6 +1585,42 @@ export default {
deviceScaleFactor: 3,
},
},
'infolists/layout/actions/anonymous/simple': {
url: 'infolists/layout',
selector: '#anonymousActions',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/layout/actions/anonymous/full-width': {
url: 'infolists/layout',
selector: '#anonymousActionsFullWidth',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/layout/actions/anonymous/horizontally-aligned-center': {
url: 'infolists/layout',
selector: '#anonymousActionsHorizontallyAlignedCenter',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/layout/actions/anonymous/vertically-aligned-end': {
url: 'infolists/layout',
selector: '#anonymousActionsVerticallyAlignedEnd',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'notifications/success': {
url: 'notifications?method=success',
selector: 'body',
packages/actions/docs/02-overview.md
+6
View File
@@ -80,6 +80,12 @@ These actions use the `Filament\Forms\Components\Actions\Action` class. They can
If you're looking to add an action to a form component in your app, [visit this page](../forms/actions) in the docs.
### Infolist component actions
Infolist components can contain actions. These use the `Filament\Infolists\Components\Actions\Action` class. They can open a modal if you choose, or even just a URL.
If you're looking to add an action to an infolist component in your app, [visit this page](../infolists/actions) in the docs.
### Notification actions
When you [send notifications](../notifications/sending-notifications), you can add actions. These buttons are rendered below the content of the notification. For example, a notification to alert the user that they have a new message should contain an action button that opens the conversation thread.
packages/forms/docs/06-actions.md
+11 -7
View File
@@ -5,7 +5,7 @@ import AutoScreenshot from "@components/AutoScreenshot.astro"
## Overview
Filament's fields can use [actions](../actions). They are buttons that can be added to any form component. For instance, you may want an action to call an API endpoint to generate content with AI, or to create a new option for a select dropdown. Also, you can render sets of actions on their own, that are not attached to a particular form component.
Filament's forms can use [actions](../actions). They are buttons that can be added to any form component. For instance, you may want an action to call an API endpoint to generate content with AI, or to create a new option for a select dropdown. Also, you can [render anonymous sets of actions](#adding-anonymous-actions-to-a-form-without-attaching-them-to-a-component) on their own, that are not attached to a particular form component.
## Defining a form component action
@@ -41,12 +41,13 @@ use Filament\Forms\Components\TextInput;
use Filament\Forms\Set;
TextInput::make('cost')
->prefix('€')
->suffixAction(
Action::make('copyCostToPrice')
->icon('heroicon-m-clipboard')
->requiresConfirmation()
->action(function (Set $set, $state) {
$set('old_price', $state);
$set('price', $state);
})
)
```
@@ -64,12 +65,13 @@ use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\TextInput;
TextInput::make('cost')
->suffixActions([
->prefix('€')
->prefixActions([
Action::make('...'),
Action::make('...'),
Action::make('...'),
])
->prefixActions([
Action::make('...'),
->suffixActions([
Action::make('...'),
Action::make('...'),
])
@@ -85,12 +87,13 @@ use Filament\Forms\Components\TextInput;
use Filament\Forms\Set;
TextInput::make('cost')
->prefix('€')
->hintAction(
Action::make('copyCostToPrice')
->icon('heroicon-m-clipboard')
->requiresConfirmation()
->action(function (Set $set, $state) {
$set('old_price', $state);
$set('price', $state);
})
)
```
@@ -108,6 +111,7 @@ use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\TextInput;
TextInput::make('cost')
->prefix('€')
->hintActions([
Action::make('...'),
Action::make('...'),
@@ -230,6 +234,6 @@ Action::make('copyCostToPrice')
->icon('heroicon-m-clipboard')
->requiresConfirmation()
->action(function (Set $set, $state) {
$set('old_price', $state);
$set('price', $state);
})
```
packages/forms/resources/views/components/wizard.blade.php
+2 -2
View File
@@ -81,7 +81,7 @@
history.pushState(null, document.title, url.toString())
},
}"
x-on:next-wizard-step.window="if ($event.detail.key === '{{ $getKey() }}') nextStep()"
x-on:next-wizard-step.window="if ($event.detail.statePath === '{{ $statePath }}') nextStep()"
x-cloak
{{
$attributes
@@ -256,7 +256,7 @@
x-show="! isLastStep()"
x-cloak
>
{{ $getAction('next')(['step' => ]) }}
{{ $getAction('next') }}
</div>
<div x-show="isLastStep()">
packages/infolists/docs/05-actions.md
+222
View File
@@ -0,0 +1,222 @@
---
title: Actions
---
import AutoScreenshot from "@components/AutoScreenshot.astro"
## Overview
Filament's infolists can use [actions](../actions). They are buttons that can be added to any infolist component. Also, you can [render anonymous sets of actions](#adding-anonymous-actions-to-an-infolist-without-attaching-them-to-a-component) on their own, that are not attached to a particular infolist component.
## Defining a infolist component action
Action objects inside a infolist component are instances of `Filament/Infolists/Components/Actions/Action`. You must pass a unique name to the action's `make()` method, which is used to identify it amongst others internally within Filament. You can [customize the trigger button](../actions/trigger-button) of an action, and even [open a modal](../actions/modals) with little effort:
```php
use App\Actions\ResetStars;
use Filament\Infolists\Components\Actions\Action;
Action::make('resetStars')
->icon('heroicon-m-x-mark')
->color('danger')
->requiresConfirmation()
->action(function (ResetStars $resetStars) {
$resetStars();
})
```
### Adding an affix action to a entry
Certain entries support "affix actions", which are buttons that can be placed before or after its content. The following entries support affix actions:
- [Text entry](entries/text-entry)
To define an affix action, you can pass it to either `prefixAction()` or `suffixAction()`:
```php
use App\Models\Product;
use Filament\Infolists\Components\Actions\Action;
use Filament\Infolists\Components\TextEntry;
TextEntry::make('cost')
->prefix('€')
->suffixAction(
Action::make('copyCostToPrice')
->icon('heroicon-m-clipboard')
->requiresConfirmation()
->action(function (Product $record) {
$record->price = $record->cost;
$record->save();
})
)
```
<AutoScreenshot name="infolists/entries/actions/suffix" alt="Text entry with suffix action" version="3.x" />
#### Passing multiple affix actions to a entry
You may pass multiple affix actions to a entry by passing them in an array to either `prefixActions()` or `suffixActions()`. Either method can be used, or both at once, Filament will render all the registered actions in order:
```php
use Filament\Infolists\Components\Actions\Action;
use Filament\Infolists\Components\TextEntry;
TextEntry::make('cost')
->prefix('€')
->prefixActions([
Action::make('...'),
Action::make('...'),
Action::make('...'),
])
->suffixActions([
Action::make('...'),
Action::make('...'),
])
```
### Adding a hint action to a entry
All entries support "hint actions", which are rendered aside the entry's [hint](entries/getting-started#adding-a-hint-next-to-the-label). To add a hint action to a entry, you may pass it to `hintAction()`:
```php
use App\Models\Product;
use Filament\Infolists\Components\Actions\Action;
use Filament\Infolists\Components\TextEntry;
TextEntry::make('cost')
->prefix('€')
->hintAction(
Action::make('copyCostToPrice')
->icon('heroicon-m-clipboard')
->requiresConfirmation()
->action(function (Product $record) {
$record->price = $record->cost;
$record->save();
})
)
```
<AutoScreenshot name="infolists/entries/actions/hint" alt="Text entry with hint action" version="3.x" />
#### Passing multiple hint actions to a entry
You may pass multiple hint actions to a entry by passing them in an array to `hintActions()`. Filament will render all the registered actions in order:
```php
use Filament\Infolists\Components\Actions\Action;
use Filament\Infolists\Components\TextEntry;
TextEntry::make('cost')
->prefix('€')
->hintActions([
Action::make('...'),
Action::make('...'),
Action::make('...'),
])
```
### Adding an action to a custom infolist component
If you wish to render an action within a custom infolist component, `ViewEntry` object, or `View` component object, you may do so using the `registerActions()` method:
```php
use App\Models\Post;
use Filament\Forms\Components\TextInput;
use Filament\Infolists\Components\Actions\Action;
use Filament\Infolists\Components\ViewEntry;
use Filament\Infolists\Set;
ViewEntry::make('status')
->view('filament.infolists.entries.status-switcher')
->registerActions([
Action::make('createStatus')
->form([
TextInput::make('name')
->required(),
])
->icon('heroicon-m-plus')
->action(function (array $data, Post $record) {
$post->status()->create($data);
}),
])
```
Now, to render the action in the view of the custom component, you need to call `$getAction()`, passing the name of the action you registered:
```blade
<div>
<select></select>
{{ $getAction('createStatus') }}
</div>
```
### Adding "anonymous" actions to an infolist without attaching them to a component
You may use an `Actions` component to render a set of actions anywhere in the form, avoiding the need to register them to any particular component:
```php
use App\Actions\Star;
use App\Actions\ResetStars;
use Filament\Infolists\Components\Actions;
use Filament\Infolists\Components\Actions\Action;
Actions::make([
Action::make('star')
->icon('heroicon-m-star')
->requiresConfirmation()
->action(function (Star $star) {
$star();
}),
Action::make('resetStars')
->icon('heroicon-m-x-mark')
->color('danger')
->requiresConfirmation()
->action(function (ResetStars $resetStars) {
$resetStars();
}),
]),
```
<AutoScreenshot name="infolists/layout/actions/anonymous/simple" alt="Anonymous actions" version="3.x" />
#### Making the independent infolist actions consume the full width of the infolist
You can stretch the independent infolist actions to consume the full width of the infolist using `fullWidth()`:
```php
use Filament\Infolists\Components\Actions;
Actions::make([
// ...
])->fullWidth(),
```
<AutoScreenshot name="infolists/layout/actions/anonymous/full-width" alt="Anonymous actions consuming the full width" version="3.x" />
#### Controlling the horizontal alignment of independent infolist actions
Independent infolist actions are aligned to the start of the component by default. You may change this by passing `center` or `end` to `alignment()`:
```php
use Filament\Infolists\Components\Actions;
Actions::make([
// ...
])->alignment('center'),
```
<AutoScreenshot name="infolists/layout/actions/anonymous/horizontally-aligned-center" alt="Anonymous actions horizontally aligned to the center" version="3.x" />
#### Controlling the vertical alignment of independent infolist actions
Independent infolist actions are vertically aligned to the start of the component by default. You may change this by passing `center` or `end` to `verticalAlignment()`:
```php
use Filament\Infolists\Components\Actions;
Actions::make([
// ...
])->verticalAlignment('end'),
```
<AutoScreenshot name="infolists/layout/actions/anonymous/vertically-aligned-end" alt="Anonymous actions vertically aligned to the end" version="3.x" />
packages/infolists/docs/05-adding-an-infolist-to-a-livewire-component.md → packages/infolists/docs/06-adding-an-infolist-to-a-livewire-component.md
View File
packages/infolists/src/Components/Concerns/HasAffixes.php
+10 -2
View File
@@ -85,7 +85,11 @@ trait HasAffixes
foreach ($this->prefixActions as $prefixAction) {
foreach (Arr::wrap($this->evaluate($prefixAction)) as $action) {
$this->cachedPrefixActions[$action->getName()] = $this->prepareAction($action->defaultSize('sm'));
$this->cachedPrefixActions[$action->getName()] = $this->prepareAction(
$action
->defaultSize('sm')
->defaultView(Action::ICON_BUTTON_VIEW),
);
}
}
@@ -109,7 +113,11 @@ trait HasAffixes
foreach ($this->suffixActions as $suffixAction) {
foreach (Arr::wrap($this->evaluate($suffixAction)) as $action) {
$this->cachedSuffixActions[$action->getName()] = $this->prepareAction($action->defaultSize('sm'));
$this->cachedSuffixActions[$action->getName()] = $this->prepareAction(
$action
->defaultSize('sm')
->defaultView(Action::ICON_BUTTON_VIEW),
);
}
}
packages/infolists/src/Components/Concerns/HasHint.php
+5 -1
View File
@@ -107,7 +107,11 @@ trait HasHint
foreach ($this->hintActions as $hintAction) {
foreach (Arr::wrap($this->evaluate($hintAction)) as $action) {
$this->cachedHintActions[$action->getName()] = $this->prepareAction($action->defaultSize('sm'));
$this->cachedHintActions[$action->getName()] = $this->prepareAction(
$action
->defaultSize('sm')
->defaultView(Action::LINK_VIEW),
);
}
}