Skip to content

Commit

Permalink
[Feat]: Block Picker Styles (#136)
Browse files Browse the repository at this point in the history 
* wip

* fix modal style

* Fix styling

* ui fix

* docs

---------

Co-authored-by: Z3d0X <Z3d0X@users.noreply.github.com>
  • Loading branch information
@Z3d0X
Z3d0X and Z3d0X authored Feb 9, 2024
1 parent fe74f2c commit 733e559
Show file tree
Hide file tree
Showing 7 changed files with 497 additions and 0 deletions.
39 changes: 39 additions & 0 deletions docs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,45 @@ PageBuilder::configureUsing(function (PageBuilder $builder) {
});
```

### Block Picker Styles

In addition to [customizations available in Filament's Builder](https://filamentphp.com/docs/3.x/forms/fields/builder#customizing-the-block-picker) `PageBuilder`, also includes a new method `blockPickerStyle()`.
Currently there are two styles available:
- `BlockPickerStyle::Dropdown` (default)
- `BlockPickerStyle::Modal`


```php
use Z3d0X\FilamentFabricator\Enums\BlockPickerStyle;
use Z3d0X\FilamentFabricator\Forms\Components\PageBuilder;

PageBuilder::configureUsing(function (PageBuilder $builder) {
$builder->blockPickerStyle(BlockPickerStyle::Modal);
});
```

an alternative one-liner way of changing block picker style is using `blockPickerStyle()` method when registering the `FilamentFabricatorPlugin` in your Panel provider:

```php
use Z3d0X\FilamentFabricator\Enums\BlockPickerStyle;
use Z3d0X\FilamentFabricator\FilamentFabricatorPlugin;

//..

public function panel(Panel $panel): Panel
{
return $panel
// ...
->plugins([
FilamentFabricatorPlugin::make()
->blockPickerStyle(BlockPickerStyle::Modal),
]);
}
```

> Pro Tip 💡: `BlockPickerStyle::Modal` works best when icons are assigned to blocks. https://filamentphp.com/docs/3.x/forms/fields/builder#setting-a-blocks-icon

## Page Resource

### Customize Navigation
Expand Down
282 changes: 282 additions & 0 deletions resources/views/components/forms/components/page-builder.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,282 @@
@php
use Filament\Forms\Components\Actions\Action;
use Z3d0X\FilamentFabricator\Enums\BlockPickerStyle;
$containers = $getChildComponentContainers();
$blockPickerBlocks = $getBlockPickerBlocks();
$blockPickerColumns = $getBlockPickerColumns();
$blockPickerWidth = $getBlockPickerWidth();
$blockPickerStyle = $getBlockPickerStyle();
$addAction = $getAction($getAddActionName());
$addBetweenAction = $getAction($getAddBetweenActionName());
$cloneAction = $getAction($getCloneActionName());
$collapseAllAction = $getAction($getCollapseAllActionName());
$expandAllAction = $getAction($getExpandAllActionName());
$deleteAction = $getAction($getDeleteActionName());
$moveDownAction = $getAction($getMoveDownActionName());
$moveUpAction = $getAction($getMoveUpActionName());
$reorderAction = $getAction($getReorderActionName());
$extraItemActions = $getExtraItemActions();
$isAddable = $isAddable();
$isCloneable = $isCloneable();
$isCollapsible = $isCollapsible();
$isDeletable = $isDeletable();
$isReorderableWithButtons = $isReorderableWithButtons();
$isReorderableWithDragAndDrop = $isReorderableWithDragAndDrop();
$statePath = $getStatePath();
@endphp

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
<div
x-data="{}"
{{
$attributes
->merge($getExtraAttributes(), escape: false)
->class(['fi-fo-builder grid gap-y-4'])
}}
>
@if ($isCollapsible && ($collapseAllAction->isVisible() || $expandAllAction->isVisible()))
<div
@class([
'flex gap-x-3',
'hidden' => count($containers) < 2,
])
>
@if ($collapseAllAction->isVisible())
<span
x-on:click="$dispatch('builder-collapse', '{{ $statePath }}')"
>
{{ $collapseAllAction }}
</span>
@endif

@if ($expandAllAction->isVisible())
<span
x-on:click="$dispatch('builder-expand', '{{ $statePath }}')"
>
{{ $expandAllAction }}
</span>
@endif
</div>
@endif

@if (count($containers))
<ul
x-sortable
data-sortable-animation-duration="{{ $getReorderAnimationDuration() }}"
wire:end.stop="{{ 'mountFormComponentAction(\'' . $statePath . '\', \'reorder\', { items: $event.target.sortable.toArray() })' }}"
class="space-y-4"
>
@php
$hasBlockLabels = $hasBlockLabels();
$hasBlockNumbers = $hasBlockNumbers();
@endphp

@foreach ($containers as $uuid => $item)
@php
$visibleExtraItemActions = array_filter(
$extraItemActions,
fn (Action $action): bool => $action(['item' => $uuid])->isVisible(),
);
@endphp

<li
wire:key="{{ $this->getId() }}.{{ $item->getStatePath() }}.{{ $field::class }}.item"
x-data="{
isCollapsed: @js($isCollapsed($item)),
}"
x-on:builder-expand.window="$event.detail === '{{ $statePath }}' && (isCollapsed = false)"
x-on:builder-collapse.window="$event.detail === '{{ $statePath }}' && (isCollapsed = true)"
x-on:expand="isCollapsed = false"
x-sortable-item="{{ $uuid }}"
class="fi-fo-builder-item rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-white/5 dark:ring-white/10"
x-bind:class="{ 'fi-collapsed overflow-hidden': isCollapsed }"
>
@if ($isReorderableWithDragAndDrop || $isReorderableWithButtons || $hasBlockLabels || $isCloneable || $isDeletable || $isCollapsible || count($visibleExtraItemActions))
<div
class="fi-fo-builder-item-header flex items-center gap-x-3 overflow-hidden px-4 py-3"
>
@if ($isReorderableWithDragAndDrop || $isReorderableWithButtons)
<ul class="flex items-center gap-x-3">
@if ($isReorderableWithDragAndDrop)
<li x-sortable-handle>
{{ $reorderAction }}
</li>
@endif

@if ($isReorderableWithButtons)
<li>
{{ $moveUpAction(['item' => $uuid])->disabled($loop->first) }}
</li>

<li>
{{ $moveDownAction(['item' => $uuid])->disabled($loop->last) }}
</li>
@endif
</ul>
@endif

@if ($hasBlockLabels)
<h4
@if ($isCollapsible)
x-on:click.stop="isCollapsed = !isCollapsed"
@endif
@class([
'text-sm font-medium text-gray-950 dark:text-white',
'truncate' => $isBlockLabelTruncated(),
'cursor-pointer select-none' => $isCollapsible,
])
>
{{ $item->getParentComponent()->getLabel($item->getRawState(), $uuid) }}

@if ($hasBlockNumbers)
{{ $loop->iteration }}
@endif
</h4>
@endif

@if ($isCloneable || $isDeletable || $isCollapsible || count($visibleExtraItemActions))
<ul
class="ms-auto flex items-center gap-x-3"
>
@foreach ($visibleExtraItemActions as $extraItemAction)
<li>
{{ $extraItemAction(['item' => $uuid]) }}
</li>
@endforeach

@if ($isCloneable)
<li>
{{ $cloneAction(['item' => $uuid]) }}
</li>
@endif

@if ($isDeletable)
<li>
{{ $deleteAction(['item' => $uuid]) }}
</li>
@endif

@if ($isCollapsible)
<li
class="relative transition"
x-on:click.stop="isCollapsed = !isCollapsed"
x-bind:class="{ '-rotate-180': isCollapsed }"
>
<div
class="transition"
x-bind:class="{ 'opacity-0 pointer-events-none': isCollapsed }"
>
{{ $getAction('collapse') }}
</div>

<div
class="absolute inset-0 rotate-180 transition"
x-bind:class="{ 'opacity-0 pointer-events-none': ! isCollapsed }"
>
{{ $getAction('expand') }}
</div>
</li>
@endif
</ul>
@endif
</div>
@endif

<div
x-show="! isCollapsed"
class="fi-fo-builder-item-content border-t border-gray-100 p-4 dark:border-white/10"
>
{{ $item }}
</div>
</li>

@if (! $loop->last)
@if ($isAddable && $addBetweenAction->isVisible())
<li class="relative -top-2 !mt-0 h-0">
<div
class="flex w-full justify-center opacity-0 transition duration-75 hover:opacity-100"
>
<div
class="fi-fo-builder-block-picker-ctn rounded-lg bg-white dark:bg-gray-900"
>
@if ($blockPickerStyle === BlockPickerStyle::Dropdown)
<x-filament-fabricator::forms.components.page-builder.dropdown-block-picker
:action="$addBetweenAction"
:after-item="$uuid"
:columns="$blockPickerColumns"
:blocks="$blockPickerBlocks"
:state-path="$statePath"
:width="$blockPickerWidth"
>
<x-slot name="trigger">
{{ $addBetweenAction }}
</x-slot>
</x-filament-fabricator::forms.components.page-builder.dropdown-block-picker>
@elseif ($blockPickerStyle === BlockPickerStyle::Modal)
<x-filament-fabricator::forms.components.page-builder.modal-block-picker
:action="$addBetweenAction"
:after-item="$uuid"
:columns="$blockPickerColumns"
:blocks="$blockPickerBlocks"
:state-path="$statePath"
:width="$blockPickerWidth"
>
<x-slot name="trigger">
{{ $addBetweenAction }}
</x-slot>
</x-filament-fabricator::forms.components.page-builder.modal-block-picker>
@endif
</div>
</div>
</li>
@elseif (filled($labelBetweenItems = $getLabelBetweenItems()))
<li
class="relative border-t border-gray-200 dark:border-white/10"
>
<span
class="absolute -top-3 left-3 px-1 text-sm font-medium"
>
{{ $labelBetweenItems }}
</span>
</li>
@endif
@endif
@endforeach
</ul>
@endif

@if ($isAddable)
@if ($blockPickerStyle === BlockPickerStyle::Dropdown)
<x-filament-fabricator::forms.components.page-builder.dropdown-block-picker
:action="$addAction"
:blocks="$blockPickerBlocks"
:columns="$blockPickerColumns"
:state-path="$statePath"
:width="$blockPickerWidth"
class="flex justify-center"
>
<x-slot name="trigger">
{{ $addAction }}
</x-slot>
</x-filament-fabricator::forms.components.page-builder.dropdown-block-picker>
@elseif ($blockPickerStyle === BlockPickerStyle::Modal)
<x-filament-fabricator::forms.components.page-builder.modal-block-picker
:action="$addAction"
:blocks="$blockPickerBlocks"
:columns="$blockPickerColumns"
:state-path="$statePath"
:width="$blockPickerWidth"
class="flex justify-center"
>
<x-slot name="trigger">
{{ $addAction }}
</x-slot>
</x-filament-fabricator::forms.components.page-builder.modal-block-picker>
@endif
@endif
</div>
</x-dynamic-component>
52 changes: 52 additions & 0 deletions resources/views/components/forms/components/page-builder/dropdown-block-picker.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
@props([
'action',
'afterItem' => null,
'blocks',
'columns' => null,
'statePath',
'trigger',
'width' => null,
])

<x-filament::dropdown
:width="$width"
{{ $attributes->class(['fi-fo-builder-block-picker']) }}
>
<x-slot name="trigger">
{{ $trigger }}
</x-slot>

<x-filament::dropdown.list>
<x-filament::grid
:default="$columns['default'] ?? 1"
:sm="$columns['sm'] ?? null"
:md="$columns['md'] ?? null"
:lg="$columns['lg'] ?? null"
:xl="$columns['xl'] ?? null"
:two-xl="$columns['2xl'] ?? null"
direction="column"
>
@foreach ($blocks as $block)
@php
$wireClickActionArguments = ['block' => $block->getName()];
if ($afterItem) {
$wireClickActionArguments['afterItem'] = $afterItem;
}
$wireClickActionArguments = \Illuminate\Support\Js::from($wireClickActionArguments);
$wireClickAction = "mountFormComponentAction('{$statePath}', '{$action->getName()}', {$wireClickActionArguments})";
@endphp

<x-filament::dropdown.list.item
:icon="$block->getIcon()"
x-on:click="close"
:wire:click="$wireClickAction"
>
{{ $block->getLabel() }}
</x-filament::dropdown.list.item>
@endforeach
</x-filament::grid>
</x-filament::dropdown.list>
</x-filament::dropdown>
Loading

0 comments on commit 733e559

Please sign in to comment.