Skip to content

Commit 434f839

Browse files
gladjanus43gladjanus43
committed
add minimal layout method
This method adds the possibility for users to choose the minimal layout. This method removes rings, borders, background and divides. Leaving only the Inputs, headers and actions in a minimal way.
1 parent 5140e21 commit 434f839

File tree

2 files changed

+166
-130
lines changed

2 files changed

+166
-130
lines changed

‎resources/views/components/table-repeater.blade.php

+152-129
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
use Filament\Support\Enums\Alignment;
44
use Filament\Support\Enums\MaxWidth;
55
6+
$isMinimal = $isMinimal();
7+
68
$containers = $getChildComponentContainers();
79
810
$addAction = $getAction($getAddActionName());
@@ -27,28 +29,26 @@
2729
$statePath = $getStatePath();
2830
2931
foreach ($extraActions as $extraAction) {
30-
$visibleExtraActions = array_filter(
31-
$extraActions,
32-
fn (Action $action): bool => $action->isVisible(),
33-
);
32+
$visibleExtraActions = array_filter($extraActions, fn(Action $action): bool => $action->isVisible());
3433
}
3534
3635
foreach ($extraItemActions as $extraItemAction) {
37-
$visibleExtraItemActions = array_filter(
38-
$extraItemActions,
39-
fn (Action $action): bool => $action->isVisible(),
40-
);
36+
$visibleExtraItemActions = array_filter($extraItemActions, fn(Action $action): bool => $action->isVisible());
4137
}
4238
43-
$hasActions = $reorderAction->isVisible()
44-
|| $cloneAction->isVisible()
45-
|| $deleteAction->isVisible()
46-
|| $moveUpAction->isVisible()
47-
|| $moveDownAction->isVisible()
48-
|| filled($visibleExtraItemActions);
39+
$hasActions =
40+
$reorderAction->isVisible() ||
41+
$cloneAction->isVisible() ||
42+
$deleteAction->isVisible() ||
43+
$moveUpAction->isVisible() ||
44+
$moveDownAction->isVisible() ||
45+
filled($visibleExtraItemActions);
4946
@endphp
5047

51-
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
48+
<x-dynamic-component
49+
:component="$getFieldWrapperView()"
50+
:field="$field"
51+
>
5252
<div
5353
x-data="{}"
5454
{{ $attributes->merge($getExtraAttributes())->class([
@@ -60,140 +60,163 @@
6060
'xl', MaxWidth::ExtraLarge => 'break-point-xl',
6161
'2xl', MaxWidth::TwoExtraLarge => 'break-point-2xl',
6262
default => 'break-point-md',
63-
}
63+
},
6464
]) }}
6565
>
66+
6667
@if (count($containers) || $emptyLabel !== false)
67-
<div class="table-repeater-container rounded-xl relative ring-1 ring-gray-950/5 dark:ring-white/20">
68+
<div @class([
69+
'table-repeater-container relative',
70+
'ring-1 ring-gray-950/5 dark:ring-white/20 rounded-xl' => !$isMinimal,
71+
])>
72+
6873
<table class="w-full">
6974
<thead @class([
70-
'table-repeater-header-hidden sr-only' => ! $renderHeader,
71-
'table-repeater-header rounded-t-xl overflow-hidden border-b border-gray-950/5 dark:border-white/20' => $renderHeader,
75+
'table-repeater-header-hidden sr-only' => !$renderHeader,
76+
'table-repeater-header overflow-hidden' => $renderHeader,
77+
'border-b border-gray-950/5 dark:border-white/10 rounded-t-xl' => !$isMinimal,
7278
])>
73-
<tr class="text-xs md:divide-x md:divide-gray-950/5 dark:md:divide-white/20">
74-
@foreach ($headers as $key => $header)
75-
<th
76-
@class([
77-
'table-repeater-header-column p-2 font-medium first:rounded-tl-xl last:rounded-tr-xl bg-gray-100 dark:text-gray-300 dark:bg-gray-900/60',
78-
match($header->getAlignment()) {
79-
'center', Alignment::Center => 'text-center',
80-
'right', 'end', Alignment::Right, Alignment::End => 'text-end',
81-
default => 'text-start'
82-
}
83-
])
84-
style="width: {{ $header->getWidth() }}"
85-
>
86-
{{ $header->getLabel() }}
87-
@if ($header->isRequired())
88-
<span class="whitespace-nowrap">
89-
<sup class="font-medium text-danger-700 dark:text-danger-400">*</sup>
79+
<tr @class([
80+
'text-xs',
81+
'md:divide-x md:divide-gray-950/5 dark:md:divide-white/20' => !$isMinimal,
82+
])>
83+
@foreach ($headers as $key => $header)
84+
<th
85+
@class([
86+
'table-repeater-header-column',
87+
'first:rounded-tl-xl last:rounded-tr-xl bg-gray-100 dark:text-gray-300 dark:bg-gray-900/60 font-medium p-2' => !$isMinimal,
88+
// 'font-medium text-regular' => $isMinimal,
89+
match ($header->getAlignment()) {
90+
'center', Alignment::Center => 'text-center',
91+
'right', 'end', Alignment::Right, Alignment::End => 'text-end',
92+
default => 'text-start',
93+
},
94+
])
95+
style="width: {{ $header->getWidth() }}"
96+
>
97+
{{ $header->getLabel() }}
98+
@if ($header->isRequired())
99+
<span class="whitespace-nowrap">
100+
<sup class="font-medium text-danger-700 dark:text-danger-400">*</sup>
101+
</span>
102+
@endif
103+
</th>
104+
@endforeach
105+
@if ($hasActions && count($containers))
106+
<th @class([
107+
'table-repeater-header-column w-px ',
108+
'last:rounded-tr-xl p-2 bg-gray-100 dark:bg-gray-900/60' => !$isMinimal,
109+
])>
110+
<span class="sr-only">
111+
{{ trans('table-repeater::components.repeater.row_actions.label') }}
90112
</span>
91-
@endif
92-
</th>
93-
@endforeach
94-
@if ($hasActions && count($containers))
95-
<th class="table-repeater-header-column w-px last:rounded-tr-xl p-2 bg-gray-100 dark:bg-gray-900/60">
96-
<span class="sr-only">
97-
{{ trans('table-repeater::components.repeater.row_actions.label') }}
98-
</span>
99-
</th>
100-
@endif
101-
</tr>
113+
</th>
114+
@endif
115+
</tr>
102116
</thead>
103117
<tbody
104118
x-sortable
105119
wire:end.stop="{{ 'mountFormComponentAction(\'' . $statePath . '\', \'reorder\', { items: $event.target.sortable.toArray() })' }}"
106-
class="table-repeater-rows-wrapper divide-y divide-gray-950/5 dark:divide-white/20"
120+
@class([
121+
'table-repeater-rows-wrapper',
122+
'divide-y divide-gray-950/5 dark:divide-white/20 pr-2' => !$isMinimal,
123+
])
107124
>
108-
@if (count($containers))
109-
@foreach ($containers as $uuid => $row)
110-
@php
111-
$visibleExtraItemActions = array_filter(
112-
$extraItemActions,
113-
fn (Action $action): bool => $action(['item' => $uuid])->isVisible(),
114-
);
115-
@endphp
116-
<tr
117-
wire:key="{{ $this->getId() }}.{{ $row->getStatePath() }}.{{ $field::class }}.item"
118-
x-sortable-item="{{ $uuid }}"
119-
class="table-repeater-row"
120-
>
121-
@php($counter = 0)
122-
@foreach($row->getComponents() as $cell)
123-
@if($cell instanceof \Filament\Forms\Components\Hidden || $cell->isHidden())
124-
{{ $cell }}
125-
@else
126-
<td
127-
@class([
128-
'table-repeater-column',
129-
'p-2' => ! $streamlined,
130-
'has-hidden-label' => $cell->isLabelHidden(),
131-
match($headers[$counter++]->getAlignment()) {
132-
'center', Alignment::Center => 'text-center',
133-
'right', 'end', Alignment::Right, Alignment::End => 'text-end',
134-
default => 'text-start'
135-
}
136-
])
137-
style="width: {{ $cell->getMaxWidth() ?? 'auto' }}"
138-
>
125+
@if (count($containers))
126+
@foreach ($containers as $uuid => $row)
127+
@php
128+
$visibleExtraItemActions = array_filter(
129+
$extraItemActions,
130+
fn(Action $action): bool => $action(['item' => $uuid])->isVisible(),
131+
);
132+
@endphp
133+
<tr
134+
wire:key="{{ $this->getId() }}.{{ $row->getStatePath() }}.{{ $field::class }}.item"
135+
x-sortable-item="{{ $uuid }}"
136+
class="table-repeater-row "
137+
>
138+
@php($counter = 0)
139+
@foreach ($row->getComponents() as $cell)
140+
@if ($cell instanceof \Filament\Forms\Components\Hidden || $cell->isHidden())
139141
{{ $cell }}
140-
</td>
141-
@endif
142-
@endforeach
143-
144-
@if ($hasActions)
145-
<td class="table-repeater-column p-2 w-px">
146-
<ul class="flex items-center table-repeater-row-actions gap-x-3 px-2">
147-
@foreach ($visibleExtraItemActions as $extraItemAction)
148-
<li>
149-
{{ $extraItemAction(['item' => $uuid]) }}
150-
</li>
151-
@endforeach
152-
153-
@if ($reorderAction->isVisible())
154-
<li x-sortable-handle class="shrink-0">
155-
{{ $reorderAction }}
156-
</li>
157-
@endif
158-
159-
@if ($isReorderableWithButtons)
160-
@if (! $loop->first)
142+
@else
143+
<td
144+
@class([
145+
'table-repeater-column',
146+
'p-2' => !$streamlined && !$isMinimal,
147+
'pr-3 pt-5' => $isMinimal,
148+
'has-hidden-label' => $cell->isLabelHidden(),
149+
match ($headers[$counter++]->getAlignment()) {
150+
'center', Alignment::Center => 'text-center',
151+
'right', 'end', Alignment::Right, Alignment::End => 'text-end',
152+
default => 'text-start',
153+
},
154+
])
155+
style="width: {{ $cell->getMaxWidth() ?? 'auto' }}"
156+
>
157+
{{ $cell }}
158+
</td>
159+
@endif
160+
@endforeach
161+
162+
@if ($hasActions)
163+
<td class="table-repeater-column p-2 w-px">
164+
<ul class="flex items-center table-repeater-row-actions gap-x-3 px-2">
165+
@foreach ($visibleExtraItemActions as $extraItemAction)
166+
<li>
167+
{{ $extraItemAction(['item' => $uuid]) }}
168+
</li>
169+
@endforeach
170+
171+
@if ($reorderAction->isVisible())
172+
<li
173+
x-sortable-handle
174+
class="shrink-0"
175+
>
176+
{{ $reorderAction }}
177+
</li>
178+
@endif
179+
180+
@if ($isReorderableWithButtons)
181+
@if (!$loop->first)
182+
<li>
183+
{{ $moveUpAction(['item' => $uuid]) }}
184+
</li>
185+
@endif
186+
187+
@if (!$loop->last)
188+
<li>
189+
{{ $moveDownAction(['item' => $uuid]) }}
190+
</li>
191+
@endif
192+
@endif
193+
194+
@if ($cloneAction->isVisible())
161195
<li>
162-
{{ $moveUpAction(['item' => $uuid]) }}
196+
{{ $cloneAction(['item' => $uuid]) }}
163197
</li>
164198
@endif
165199

166-
@if (! $loop->last)
200+
@if ($deleteAction->isVisible())
167201
<li>
168-
{{ $moveDownAction(['item' => $uuid]) }}
202+
{{ $deleteAction(['item' => $uuid]) }}
169203
</li>
170204
@endif
171-
@endif
172-
173-
@if ($cloneAction->isVisible())
174-
<li>
175-
{{ $cloneAction(['item' => $uuid]) }}
176-
</li>
177-
@endif
178-
179-
@if ($deleteAction->isVisible())
180-
<li>
181-
{{ $deleteAction(['item' => $uuid]) }}
182-
</li>
183-
@endif
184-
</ul>
185-
</td>
186-
@endif
205+
</ul>
206+
</td>
207+
@endif
208+
</tr>
209+
@endforeach
210+
@else
211+
<tr class="table-repeater-row table-repeater-empty-row">
212+
<td
213+
colspan="{{ count($headers) + intval($hasActions) }}"
214+
class="table-repeater-column table-repeater-empty-column p-4 w-px text-center italic"
215+
>
216+
{{ $emptyLabel ?: trans('table-repeater::components.repeater.empty.label') }}
217+
</td>
187218
</tr>
188-
@endforeach
189-
@else
190-
<tr class="table-repeater-row table-repeater-empty-row">
191-
<td colspan="{{ count($headers) + intval($hasActions) }}"
192-
class="table-repeater-column table-repeater-empty-column p-4 w-px text-center italic">
193-
{{ $emptyLabel ?: trans('table-repeater::components.repeater.empty.label') }}
194-
</td>
195-
</tr>
196-
@endif
219+
@endif
197220
</tbody>
198221
</table>
199222
</div>
@@ -209,7 +232,7 @@ class="table-repeater-column table-repeater-empty-column p-4 w-px text-center it
209232
@if (filled($visibleExtraActions))
210233
@foreach ($visibleExtraActions as $extraAction)
211234
<li>
212-
{{ ($extraAction) }}
235+
{{ $extraAction }}
213236
</li>
214237
@endforeach
215238
@endif

‎src/Components/TableRepeater.php

+14-1
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@ class TableRepeater extends Repeater
1515
use Concerns\HasHeader;
1616

1717
protected bool | Closure | null $showLabels = null;
18+
protected bool | Closure | null $minimal = false;
1819

1920
protected function setUp(): void
2021
{
2122
parent::setUp();
2223

2324
$this->registerActions([
24-
fn (TableRepeater $component): array => $component->getExtraActions()
25+
fn(TableRepeater $component): array => $component->getExtraActions()
2526
]);
2627
}
2728

@@ -57,6 +58,18 @@ public function shouldShowLabels(): bool
5758
return $this->evaluate($this->showLabels) ?? false;
5859
}
5960

61+
public function minimal(bool | Closure | null $condition = true): static
62+
{
63+
$this->minimal = $condition;
64+
65+
return $this;
66+
}
67+
68+
public function isMinimal(): bool
69+
{
70+
return $this->evaluate($this->minimal) ?? false;
71+
}
72+
6073
public function getView(): string
6174
{
6275
return 'table-repeater::components.table-repeater';

0 commit comments

Comments
 (0)