Move to "model-first" field implementation for simpler API

This commit is contained in:
Ryan Scherler
2020-12-18 17:50:42 -08:00
parent 684590c099
commit 8cbc71bc4a
12 changed files with 66 additions and 89 deletions
+8 -11
View File
@@ -9,7 +9,7 @@
x-on:livewire-upload-progress="progress = $event.detail.progress"
class="flex items-center space-x-4">
<div class="flex-shrink-0 relative">
<label for="{{ $id ?? $name }}" class="cursor-pointer rounded-full shadow flex overflow-hidden">
<label for="{{ $id ?? $model }}" class="cursor-pointer rounded-full shadow flex overflow-hidden">
@if ($avatar)
<img src="{{ $avatar->temporaryUrl() }}" alt="{{ $user->name }}" class="h-full object-cover" width="{{ $size }}" height="{{ $size }}" loading="lazy">
@else
@@ -26,18 +26,15 @@
@endif
</div>
<div class="flex-grow relative">
<label class="btn" for="{{ $id ?? $name }}">{{ __('Change') }}</label>
<label class="btn" for="{{ $id ?? $model }}">{{ __('Change') }}</label>
<input type="file"
{{ $modelDirective }}="{{ $model }}"
value="{{ $value }}"
class="sr-only"
id="{{ $id ?? $name }}"
@if ($extraAttributes)
@foreach ($extraAttributes as $attribute => $value)
{{ $attribute }}="{{ $value }}"
@endforeach
@endif
@if ($model)
{{ $modelDirective }}="{{ $model }}"
@endif
id="{{ $id ?? $model }}"
@foreach ($extraAttributes as $attribute => $value)
{{ $attribute }}="{{ $value }}"
@endforeach
/>
<div x-show="isUploading" :aria-hidden="!isUploading" class="absolute bottom-0 -mb-3 w-48 max-w-full">
<x-filament::progress progress="progress" />
+7 -13
View File
@@ -2,18 +2,12 @@
<x-filament::label>
<span class="inline-flex items-center space-x-2">
<input type="{{ $type }}"
@if ($model)
{{ $modelDirective }}="{{ $model }}"
@endif
@isset($checked)
checked
@endisset
@if ($extraAttributes)
@foreach ($extraAttributes as $attribute => $value)
{{ $attribute }}="{{ $value }}"
@endforeach
@endif
class="rounded text-blue-700 shadow-sm focus:border-blue-700 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 @error($model ?? $name) border-red-600 @else border-gray-300 @enderror" />
{{ $modelDirective }}="{{ $model }}"
value="{{ $value }}"
@foreach ($extraAttributes as $attribute => $value)
{{ $attribute }}="{{ $value }}"
@endforeach
class="rounded text-blue-700 shadow-sm focus:border-blue-700 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 @error($model) border-red-600 @else border-gray-300 @enderror" />
<span class="inline-flex items-baseline space-x-4">
@if ($label)
<span>{{ $label }}</span>
@@ -26,7 +20,7 @@
</span>
</span>
</x-filament::label>
<x-filament::error :field="$model ?? $name" />
<x-filament::error :field="$model" />
@if ($help)
<x-filament::help>
@markdown($help)
+7 -11
View File
@@ -2,16 +2,12 @@
@section('field')
<input type="{{ $type }}"
id="{{ $id ?? $name }}"
value="{{ $value ?? '' }}"
@if ($model)
{{ $modelDirective }}="{{ $model }}"
@endif
@if ($extraAttributes)
@foreach ($extraAttributes as $attribute => $value)
{{ $attribute }}="{{ $value }}"
@endforeach
@endif
class="block w-full rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 @error($model ?? $name) border-red-600 motion-safe:animate-shake @else border-gray-300 @enderror"
{{ $modelDirective }}="{{ $model }}"
value="{{ $value }}"
id="{{ $id ?? $model }}"
@foreach ($extraAttributes as $attribute => $value)
{{ $attribute }}="{{ $value }}"
@endforeach
class="block w-full rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 @error($model) border-red-600 motion-safe:animate-shake @else border-gray-300 @enderror"
/>
@overwrite
+7 -11
View File
@@ -2,16 +2,12 @@
@section('field')
<textarea
id="{{ $id ?? $name }}"
@if ($model)
{{ $modelDirective }}="{{ $model }}"
@endif
@if ($extraAttributes)
@foreach ($extraAttributes as $attribute => $value)
{{ $attribute }}="{{ $value }}"
@endforeach
@endif
class="block w-full rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 @error($model ?? $name) border-red-600 motion-safe:animate-shake @else border-gray-300 @enderror">
{{ $value ?? '' }}
id="{{ $id ?? $model }}"
{{ $modelDirective }}="{{ $model }}"
@foreach ($extraAttributes as $attribute => $value)
{{ $attribute }}="{{ $value }}"
@endforeach
class="block w-full rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 @error($model) border-red-600 motion-safe:animate-shake @else border-gray-300 @enderror">
{{ $value }}
</textarea>
@overwrite
+13 -11
View File
@@ -9,15 +9,22 @@
@endpushonce
@section('field')
<div x-data="{ content: @entangle($model ?? $name).defer }">
<input type="hidden" id="value-{{ $id ?? $name }}" value="{{ $value ?? '' }}" />
<div x-data="{ content: @entangle($model).defer }">
<input
type="hidden"
value="{{ $value }}"
id="value-{{ $id ?? $model }}"
@foreach ($extraAttributes as $attribute => $value)
{{ $attribute }}="{{ $value }}"
@endforeach
/>
<div
wire:ignore
@trix-change="content = $event.target.value"
@trix-file-accept="$event.preventDefault()"
>
<trix-toolbar id="toolbar-{{ $id ?? $name }}">
<trix-toolbar id="toolbar-{{ $id ?? $model }}">
<div class="trix-button-row">
<span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
<button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="Bold" tabindex="-1">Bold</button>
@@ -58,15 +65,10 @@
</trix-toolbar>
<trix-editor
id="{{ $id ?? $name }}"
toolbar="toolbar-{{ $id ?? $name }}"
input="value-{{ $id ?? $name }}"
id="{{ $id ?? $model }}"
toolbar="toolbar-{{ $id ?? $model }}"
input="value-{{ $id ?? $model }}"
class="block w-full rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 border-gray-300 prose max-w-none"
@if ($extraAttributes)
@foreach ($extraAttributes as $attribute => $value)
{{ $attribute }}="{{ $value }}"
@endforeach
@endif
></trix-editor>
</div>
</div>
@@ -1,7 +1,7 @@
<div class="space-y-2">
<div class="flex items-center justify-between space-x-2">
@if ($label)
<x-filament::label :for="$id ?? $name">
<x-filament::label :for="$id ?? $model">
{{ __($label) }}
</x-filament::label>
@endif
@@ -12,7 +12,7 @@
@endif
</div>
@yield('field')
<x-filament::error :field="$model ?? $name" />
<x-filament::error :field="$model" />
@if ($help)
<x-filament::help>
@markdown($help)
+16 -11
View File
@@ -5,21 +5,27 @@ namespace Filament\Fields;
use Illuminate\Support\Str;
class Field extends BaseField {
public $name;
public $label;
public $model;
public $modelDirective;
public $extraAttributes;
public $value;
public $label;
public $modelDirective = 'wire:model.defer';
public $extraAttributes = [];
protected $view;
public function __construct($name)
public function __construct($model)
{
$this->name = $name;
$this->model = $model;
}
public static function make($name)
public static function make($model)
{
return new static($name);
return new static($model);
}
public function value($value)
{
$this->value = $value;
return $this;
}
public function label($label)
@@ -28,10 +34,9 @@ class Field extends BaseField {
return $this;
}
public function model($model, $directive = 'wire:model.defer')
public function modelDirective($modelDirective)
{
$this->model = $model;
$this->modelDirective = $directive;
$this->modelDirective = $modelDirective;
return $this;
}
@@ -33,7 +33,6 @@ class ForgotPassword extends Component
Text::make('email')
->type('email')
->label('E-Mail Address')
->model('email')
->extraAttributes([
'required' => 'true',
'autofocus' => 'true',
+1 -4
View File
@@ -44,7 +44,6 @@ class Login extends Component
Text::make('email')
->type('email')
->label('E-Mail Address')
->model('email')
->extraAttributes([
'required' => 'true',
'autocomplete' => 'email',
@@ -57,15 +56,13 @@ class Login extends Component
Text::make('password')
->type('password')
->label('Password')
->model('password')
->extraAttributes([
'required' => 'true',
'autocomplete' => 'current-password',
])
->hint('['.__('Forgot Your Password?').']('.route('filament.password.forgot').')'),
Checkbox::make('remember')
->label('Remember me')
->model('remember'),
->label('Remember me'),
];
}
+1 -4
View File
@@ -33,7 +33,6 @@ class Register extends Component
return [
Text::make('name')
->label('Name')
->model('name')
->extraAttributes([
'required' => 'true',
'autofocus' => 'true',
@@ -42,7 +41,7 @@ class Register extends Component
Text::make('email')
->type('email')
->label('E-Mail Address')
->model('email', 'wire:model.lazy')
->modelDirective('wire:model.lazy')
->extraAttributes([
'required' => 'true',
'autocomplete' => 'email',
@@ -50,7 +49,6 @@ class Register extends Component
Text::make('password')
->type('password')
->label('Password')
->model('password',)
->extraAttributes([
'required' => 'true',
'autocomplete' => 'new-password',
@@ -58,7 +56,6 @@ class Register extends Component
Text::make('password_confirmation')
->type('password')
->label('Confirm New Password')
->model('password_confirmation',)
->extraAttributes([
'required' => 'true',
'autocomplete' => 'new-password',
+1 -3
View File
@@ -61,7 +61,7 @@ class ResetPassword extends Component
Text::make('email')
->type('email')
->label('E-Mail Address')
->model('email', 'wire:model.lazy')
->modelDirective('wire:model.lazy')
->extraAttributes([
'required' => 'true',
'autocomplete' => 'email',
@@ -69,7 +69,6 @@ class ResetPassword extends Component
Text::make('password')
->type('password')
->label('Password')
->model('password',)
->extraAttributes([
'required' => 'true',
'autofocus' => 'true',
@@ -78,7 +77,6 @@ class ResetPassword extends Component
Text::make('password_confirmation')
->type('password')
->label('Confirm New Password')
->model('password_confirmation',)
->extraAttributes([
'required' => 'true',
'autocomplete' => 'new-password',
+3 -7
View File
@@ -82,23 +82,21 @@ class Profile extends Component
return [
Tabs::label('Profile')
->tab('Account', [
Text::make('name')
Text::make('user.name')
->label('Name')
->model('user.name')
->extraAttributes([
'required' => 'true',
]),
Text::make('email')
Text::make('user.email')
->type('email')
->label('E-Mail Address')
->model('user.email', 'wire:model.lazy')
->modelDirective('wire:model.lazy')
->extraAttributes([
'required' => 'true',
'autocomplete' => 'email',
]),
Avatar::make('avatar')
->label('User Photo')
->model('avatar')
->avatar($this->avatar)
->user($this->user)
->delete('deleteAvatar')
@@ -108,7 +106,6 @@ class Profile extends Component
Text::make('password')
->type('password')
->label('Password')
->model('password',)
->extraAttributes([
'autocomplete' => 'new-password',
])
@@ -117,7 +114,6 @@ class Profile extends Component
Text::make('password_confirmation')
->type('password')
->label('Confirm New Password')
->model('password_confirmation',)
->extraAttributes([
'autocomplete' => 'new-password',
])