Skip to content

Commit

Permalink
Merge branch 'pr/1031' into 2.x
Browse files Browse the repository at this point in the history
  • Loading branch information
@danharrin
danharrin committed Dec 28, 2021
2 parents f9fb77f + 1f39cb1 commit 7586984
Show file tree
Hide file tree
Showing 5 changed files with 183 additions and 128 deletions.
158 changes: 58 additions & 100 deletions packages/forms/resources/views/components/builder.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,77 +7,76 @@
:required="$isRequired()"
:state-path="$getStatePath()"
>
<div {{ $attributes->merge($getExtraAttributes())->class(['space-y-4']) }}>
<div {{ $attributes->merge($getExtraAttributes())->class(['space-y-2']) }}>
@if (count($containers = $getChildComponentContainers()))
<ul>
<ul class="space-y-2">
@foreach ($containers as $uuid => $item)
<li
x-data="{ isCreateButtonDropdownOpen: false, isCreateButtonVisible: false }"
x-on:click="isCreateButtonVisible = true"
x-on:click.away="isCreateButtonVisible = false"
wire:key="{{ $item->getStatePath() }}"
class="relative p-6 bg-white shadow-sm rounded-lg border border-gray-300"
>
<div class="flex">
<div class="w-8">
<div class="bg-white divide-y shadow-sm rounded-l-lg border-b border-l border-t border-gray-300 overflow-hidden">
@unless ($loop->first || $isItemMovementDisabled())
<button
wire:click="dispatchFormEvent('builder::moveItemUp', '{{ $getStatePath() }}', '{{ $uuid }}')"
type="button"
class="w-full flex items-center justify-center h-8 text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset focus:ring-white focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600"
>
<span class="sr-only">
{{ __('forms::components.builder.buttons.move_item_up.label') }}
</span>
{{ $item }}

<x-heroicon-s-chevron-up class="w-5 h-5" />
</button>
@endunless
@unless ($isItemDeletionDisabled() && ($isItemMovementDisabled() && ($loop->count <= 1)))
<div class="absolute top-0 right-0 h-6 flex divide-x rounded-bl-lg rounded-tr-lg border-gray-300 border-b border-l overflow-hidden">
@unless ($loop->first || $isItemMovementDisabled())
<button
wire:click="dispatchFormEvent('builder::moveItemUp', '{{ $getStatePath() }}', '{{ $uuid }}')"
type="button"
class="flex items-center justify-center w-6 text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset focus:ring-white focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600"
>
<span class="sr-only">
{{ __('forms::components.repeater.buttons.move_item_up.label') }}
</span>

@unless ($loop->last || $isItemMovementDisabled())
<button
wire:click="dispatchFormEvent('builder::moveItemDown', '{{ $getStatePath() }}', '{{ $uuid }}')"
type="button"
class="w-full flex items-center justify-center h-8 text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset focus:ring-white focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600"
>
<span class="sr-only">
{{ __('forms::components.builder.buttons.move_item_down.label') }}
</span>
<x-heroicon-s-chevron-up class="w-4 h-4" />
</button>
@endunless

@unless ($loop->last || $isItemMovementDisabled())
<button
wire:click="dispatchFormEvent('builder::moveItemDown', '{{ $getStatePath() }}', '{{ $uuid }}')"
type="button"
class="flex items-center justify-center w-6 text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset focus:ring-white focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600"
>
<span class="sr-only">
{{ __('forms::components.repeater.buttons.move_item_down.label') }}
</span>

<x-heroicon-s-chevron-down class="w-5 h-5" />
</button>
@endunless
<x-heroicon-s-chevron-down class="w-4 h-4" />
</button>
@endunless

@unless ($isItemDeletionDisabled())
<button
wire:click="dispatchFormEvent('builder::deleteItem', '{{ $getStatePath() }}', '{{ $uuid }}')"
type="button"
class="w-full flex items-center justify-center h-8 text-danger-600 hover:bg-gray-50 focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset focus:ring-white focus:ring-primary-600 focus:text-danger-600 focus:bg-primary-50 focus:border-primary-600"
class="flex items-center justify-center w-6 text-danger-600 hover:bg-gray-50 focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset focus:ring-white focus:ring-primary-600 focus:text-danger-600 focus:bg-primary-50 focus:border-primary-600"
>
<span class="sr-only">
{{ __('forms::components.builder.buttons.delete_item.label') }}
{{ __('forms::components.repeater.buttons.delete_item.label') }}
</span>

<x-heroicon-s-trash class="w-5 h-5" />
<x-heroicon-s-trash class="w-4 h-4" />
</button>
</div>
@endunless
</div>
@endunless

<div class="flex-1 p-6 bg-white shadow-sm rounded-r-lg rounded-b-lg border border-gray-300">
{{ $item }}
</div>
</div>

@unless ($loop->last)
<div class="h-12 flex items-center justify-center">
<div
x-show="isCreateButtonVisible || isCreateButtonDropdownOpen"
x-transition
class="relative flex justify-center"
>
@if ((! $loop->last) && (! $isItemCreationDisabled()) && (blank($getMaxItems()) || ($getMaxItems() > $getItemsCount())))
<div
x-show="isCreateButtonVisible || isCreateButtonDropdownOpen"
x-transition
class="absolute bottom-0 inset-x-0 -mb-7 z-10 h-12 flex items-center justify-center"
>
<div class="relative flex justify-center">
<button
x-on:click="isCreateButtonDropdownOpen = true"
type="button"
class="flex items-center justify-center h-8 w-8 rounded-full text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset focus:ring-white focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50"
class="flex items-center justify-center h-8 w-8 rounded-full border border-gray-300 text-gray-800 bg-white hover:bg-gray-50 focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset focus:ring-white focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50"
x-bind:class="{
'bg-gray-50': isCreateButtonDropdownOpen,
}"
Expand All @@ -89,76 +88,35 @@ class="flex items-center justify-center h-8 w-8 rounded-full text-gray-800 hover
<x-heroicon-o-plus class="w-5 h-5" />
</button>

<div
x-show="isCreateButtonDropdownOpen"
x-on:click.away="isCreateButtonDropdownOpen = false"
x-transition
class="absolute z-10 mt-9 shadow-xl overflow-hidden rounded-xl w-52"
>
<ul class="py-1 space-y-1 bg-white shadow rounded-xl">
@foreach ($getBlocks() as $block)
<li>
<button
wire:click="dispatchFormEvent('builder::createItem', '{{ $getStatePath() }}', '{{ $block->getName() }}', '{{ $uuid }}')"
x-on:click="isCreateButtonDropdownOpen = false"
type="button"
class="flex items-center w-full h-8 px-3 text-sm font-medium focus:outline-none hover:text-white hover:bg-primary-600 focus:bg-primary-700 focus:text-white group"
>
@if ($icon = $block->getIcon())
<x-dynamic-component :component="$icon" class="mr-2 -ml-1 text-primary-500 w-5 h-5 group-hover:text-white group-focus:text-white" />
@endif

{{ $block->getLabel() }}
</button>
</li>
@endforeach
</ul>
</div>
<x-forms::builder.block-picker
:blocks="$getBlocks()"
:create-after-item="$uuid"
:state-path="$getStatePath()"
/>
</div>
</div>
@endunless
@endif
</li>
@endforeach
</ul>
@endif

@if (blank($getMaxItems()) || ($getMaxItems() > $getItemsCount()))
@if ((! $isItemCreationDisabled()) && (blank($getMaxItems()) || ($getMaxItems() > $getItemsCount())))
<div x-data="{ isCreateButtonDropdownOpen: false }" class="relative flex justify-center">
<button
x-on:click="isCreateButtonDropdownOpen = true"
type="button"
class="w-full h-9 px-4 inline-flex items-center justify-center font-medium tracking-tight rounded-lg text-gray-800 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600"
class="w-full h-9 px-4 inline-flex space-x-1 items-center justify-center font-medium tracking-tight rounded-lg text-gray-800 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600"
>
<x-heroicon-s-plus class="w-6 h-6 mr-1 -ml-2" />
<x-heroicon-s-plus class="w-5 h-5" />

{{ $getCreateItemButtonLabel() }}
</button>

<div
x-show="isCreateButtonDropdownOpen"
x-on:click.away="isCreateButtonDropdownOpen = false"
x-transition
class="absolute z-10 mt-9 shadow-xl overflow-hidden rounded-xl w-52"
>
<ul class="py-1 space-y-1 bg-white shadow rounded-xl">
@foreach ($getBlocks() as $block)
<li>
<button
wire:click="dispatchFormEvent('builder::createItem', '{{ $getStatePath() }}', '{{ $block->getName() }}')"
x-on:click="isCreateButtonDropdownOpen = false"
type="button"
class="flex items-center w-full h-8 px-3 text-sm font-medium focus:outline-none hover:text-white hover:bg-primary-600 focus:bg-primary-700 focus:text-white group"
>
@if ($icon = $block->getIcon())
<x-dynamic-component :component="$icon" class="mr-2 -ml-1 text-primary-500 w-5 h-5 group-hover:text-white group-focus:text-white" />
@endif

{{ $block->getLabel() }}
</button>
</li>
@endforeach
</ul>
</div>
<x-forms::builder.block-picker
:blocks="$getBlocks()"
:state-path="$getStatePath()"
/>
</div>
@endif
</div>
Expand Down
31 changes: 31 additions & 0 deletions packages/forms/resources/views/components/builder/block-picker.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
@props([
'blocks',
'createAfterItem' => null,
'statePath',
])

<div
x-show="isCreateButtonDropdownOpen"
x-on:click.away="isCreateButtonDropdownOpen = false"
x-transition
{{ $attributes->class(['absolute z-10 mt-10 shadow-xl border overflow-hidden rounded-xl w-52']) }}
>
<ul class="py-1 space-y-1 bg-white shadow rounded-xl">
@foreach ($blocks as $block)
<li>
<button
wire:click="dispatchFormEvent('builder::createItem', '{{ $statePath }}', '{{ $block->getName() }}' {{ $createAfterItem ? ", '{$createAfterItem}'" : '' }})"
x-on:click="isCreateButtonDropdownOpen = false"
type="button"
class="flex items-center w-full h-8 px-3 text-sm font-medium focus:outline-none hover:text-white hover:bg-primary-600 focus:bg-primary-700 focus:text-white group"
>
@if ($icon = $block->getIcon())
<x-dynamic-component :component="$icon" class="mr-2 -ml-1 text-primary-500 w-5 h-5 group-hover:text-white group-focus:text-white" />
@endif

{{ $block->getLabel() }}
</button>
</li>
@endforeach
</ul>
</div>

0 comments on commit 7586984

Please sign in to comment.