This commit is contained in:
2025-10-22 20:08:22 +05:00
commit 736e3bef18
2573 changed files with 120385 additions and 0 deletions

View File

@@ -0,0 +1,328 @@
@php
use Filament\Actions\Action;
use Filament\Support\Enums\Alignment;
$fieldWrapperView = $getFieldWrapperView();
$items = $getItems();
$blockPickerBlocks = $getBlockPickerBlocks();
$blockPickerColumns = $getBlockPickerColumns();
$blockPickerWidth = $getBlockPickerWidth();
$hasBlockPreviews = $hasBlockPreviews();
$hasInteractiveBlockPreviews = $hasInteractiveBlockPreviews();
$addAction = $getAction($getAddActionName());
$addActionAlignment = $getAddActionAlignment();
$addBetweenAction = $getAction($getAddBetweenActionName());
$cloneAction = $getAction($getCloneActionName());
$collapseAllAction = $getAction($getCollapseAllActionName());
$editAction = $getAction($getEditActionName());
$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();
$collapseAllActionIsVisible = $isCollapsible && $collapseAllAction->isVisible();
$expandAllActionIsVisible = $isCollapsible && $expandAllAction->isVisible();
$key = $getKey();
$statePath = $getStatePath();
$blockLabelHeadingTag = $getHeadingTag();
$isBlockLabelTruncated = $isBlockLabelTruncated();
$labelBetweenItems = $getLabelBetweenItems();
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
{{
$attributes
->merge($getExtraAttributes(), escape: false)
->class([
'fi-fo-builder',
'fi-collapsible' => $isCollapsible,
])
}}
>
@if ($collapseAllActionIsVisible || $expandAllActionIsVisible)
<div
@class([
'fi-fo-builder-actions',
'fi-hidden' => count($items) < 2,
])
>
@if ($collapseAllActionIsVisible)
<span
x-on:click="$dispatch('builder-collapse', '{{ $statePath }}')"
>
{{ $collapseAllAction }}
</span>
@endif
@if ($expandAllActionIsVisible)
<span
x-on:click="$dispatch('builder-expand', '{{ $statePath }}')"
>
{{ $expandAllAction }}
</span>
@endif
</div>
@endif
@if (count($items))
<ul
x-sortable
data-sortable-animation-duration="{{ $getReorderAnimationDuration() }}"
x-on:end.stop="
$event.oldDraggableIndex !== $event.newDraggableIndex &&
$wire.mountAction(
'reorder',
{ items: $event.target.sortable.toArray() },
{ schemaComponent: '{{ $key }}' },
)
"
class="fi-fo-builder-items"
>
@php
$hasBlockLabels = $hasBlockLabels();
$hasBlockIcons = $hasBlockIcons();
$hasBlockNumbers = $hasBlockNumbers();
$hasBlockHeaders = $hasBlockHeaders();
@endphp
@foreach ($items as $itemKey => $item)
@php
$visibleExtraItemActions = array_filter(
$extraItemActions,
fn (Action $action): bool => $action(['item' => $itemKey])->isVisible(),
);
$cloneAction = $cloneAction(['item' => $itemKey]);
$cloneActionIsVisible = $isCloneable && $cloneAction->isVisible();
$deleteAction = $deleteAction(['item' => $itemKey]);
$deleteActionIsVisible = $isDeletable && $deleteAction->isVisible();
$editAction = $editAction(['item' => $itemKey]);
$editActionIsVisible = $hasBlockPreviews && $editAction->isVisible();
$moveDownAction = $moveDownAction(['item' => $itemKey])->disabled($loop->last);
$moveDownActionIsVisible = $isReorderableWithButtons && $moveDownAction->isVisible();
$moveUpAction = $moveUpAction(['item' => $itemKey])->disabled($loop->first);
$moveUpActionIsVisible = $isReorderableWithButtons && $moveUpAction->isVisible();
$reorderActionIsVisible = $isReorderableWithDragAndDrop && $reorderAction->isVisible();
$hasItemHeader = $hasBlockHeaders && ($reorderActionIsVisible || $moveUpActionIsVisible || $moveDownActionIsVisible || $hasBlockIcons || $hasBlockLabels || $editActionIsVisible || $cloneActionIsVisible || $deleteActionIsVisible || $isCollapsible || $visibleExtraItemActions);
@endphp
<li
wire:ignore.self
wire:key="{{ $item->getLivewireKey() }}.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="{{ $itemKey }}"
{{
$item->getParentComponent()->getExtraAttributeBag()
->class([
'fi-fo-builder-item',
'fi-fo-builder-item-has-header' => $hasItemHeader,
])
}}
x-bind:class="{ 'fi-collapsed': isCollapsed }"
>
@if ($hasItemHeader)
<div
@if ($isCollapsible)
x-on:click.stop="isCollapsed = !isCollapsed"
@endif
class="fi-fo-builder-item-header"
>
@if ($reorderActionIsVisible || $moveUpActionIsVisible || $moveDownActionIsVisible)
<ul
class="fi-fo-builder-item-header-start-actions"
>
@if ($reorderActionIsVisible)
<li x-on:click.stop>
{{ $reorderAction->extraAttributes(['x-sortable-handle' => true], merge: true) }}
</li>
@endif
@if ($moveUpActionIsVisible || $moveDownActionIsVisible)
<li x-on:click.stop>
{{ $moveUpAction }}
</li>
<li x-on:click.stop>
{{ $moveDownAction }}
</li>
@endif
</ul>
@endif
@php
$blockIcon = $item->getParentComponent()->getIcon($item->getRawState(), $itemKey);
@endphp
@if ($hasBlockIcons && filled($blockIcon))
{{ \Filament\Support\generate_icon_html($blockIcon, (new \Illuminate\View\ComponentAttributeBag)->class(['fi-fo-builder-item-header-icon'])) }}
@endif
@if ($hasBlockLabels)
<{{ $blockLabelHeadingTag }}
@class([
'fi-fo-builder-item-header-label',
'fi-truncated' => $isBlockLabelTruncated,
])
>
{{ $item->getParentComponent()->getLabel($item->getRawState(), $itemKey) }}
@if ($hasBlockNumbers)
{{ $loop->iteration }}
@endif
</{{ $blockLabelHeadingTag }}>
@endif
@if ($editActionIsVisible || $cloneActionIsVisible || $deleteActionIsVisible || $isCollapsible || $visibleExtraItemActions)
<ul
class="fi-fo-builder-item-header-end-actions"
>
@foreach ($visibleExtraItemActions as $extraItemAction)
<li x-on:click.stop>
{{ $extraItemAction(['item' => $itemKey]) }}
</li>
@endforeach
@if ($editActionIsVisible)
<li x-on:click.stop>
{{ $editAction }}
</li>
@endif
@if ($cloneActionIsVisible)
<li x-on:click.stop>
{{ $cloneAction }}
</li>
@endif
@if ($deleteActionIsVisible)
<li x-on:click.stop>
{{ $deleteAction }}
</li>
@endif
@if ($isCollapsible)
<li
class="fi-fo-builder-item-header-collapsible-actions"
x-on:click.stop="isCollapsed = !isCollapsed"
>
<div
class="fi-fo-builder-item-header-collapse-action"
>
{{ $getAction('collapse') }}
</div>
<div
class="fi-fo-builder-item-header-expand-action"
>
{{ $getAction('expand') }}
</div>
</li>
@endif
</ul>
@endif
</div>
@endif
<div
x-show="! isCollapsed"
@class([
'fi-fo-builder-item-content',
'fi-fo-builder-item-content-has-preview' => $hasBlockPreviews && $item->getParentComponent()->hasPreview(),
])
>
@if ($hasBlockPreviews && $item->getParentComponent()->hasPreview())
<div
@class([
'fi-fo-builder-item-preview',
'fi-interactive' => $hasInteractiveBlockPreviews,
])
>
{{ $item->getParentComponent()->renderPreview($item->getRawState()) }}
</div>
@if ($editActionIsVisible && (! $hasInteractiveBlockPreviews))
<div
class="fi-fo-builder-item-preview-edit-overlay"
role="button"
x-on:click.stop="{{ '$wire.mountAction(\'edit\', { item: \'' . $itemKey . '\' }, { schemaComponent: \'' . $key . '\' })' }}"
></div>
@endif
@else
{{ $item }}
@endif
</div>
</li>
@if (! $loop->last)
@if ($isAddable && $addBetweenAction(['afterItem' => $itemKey])->isVisible())
<li class="fi-fo-builder-add-between-items-ctn">
<div class="fi-fo-builder-add-between-items">
<div class="fi-fo-builder-block-picker-ctn">
<x-filament-forms::builder.block-picker
:action="$addBetweenAction"
:after-item="$itemKey"
:columns="$blockPickerColumns"
:blocks="$blockPickerBlocks"
:key="$key"
:width="$blockPickerWidth"
>
<x-slot name="trigger">
{{ $addBetweenAction(['afterItem' => $itemKey]) }}
</x-slot>
</x-filament-forms::builder.block-picker>
</div>
</div>
</li>
@elseif (filled($labelBetweenItems))
<li class="fi-fo-builder-label-between-items-ctn">
<div
class="fi-fo-builder-label-between-items-divider-before"
></div>
<span class="fi-fo-builder-label-between-items">
{{ $labelBetweenItems }}
</span>
<div
class="fi-fo-builder-label-between-items-divider-after"
></div>
</li>
@endif
@endif
@endforeach
</ul>
@endif
@if ($isAddable && $addAction->isVisible())
<x-filament-forms::builder.block-picker
:action="$addAction"
:action-alignment="$addActionAlignment"
:blocks="$blockPickerBlocks"
:columns="$blockPickerColumns"
:key="$key"
:width="$blockPickerWidth"
>
<x-slot name="trigger">
{{ $addAction }}
</x-slot>
</x-filament-forms::builder.block-picker>
@endif
</div>
</x-dynamic-component>

View File

@@ -0,0 +1,70 @@
@php
use Filament\Support\Enums\Alignment;
use Filament\Support\Enums\GridDirection;
use Illuminate\View\ComponentAttributeBag;
@endphp
@props([
'action',
'actionAlignment' => null,
'afterItem' => null,
'blocks',
'columns' => null,
'key',
'trigger',
'width' => null,
])
<x-filament::dropdown
:placement="
match ($actionAlignment) {
Alignment::Start, Alignment::Left => 'bottom-start',
Alignment::End, Alignment::Right => 'bottom-end',
default => null,
}
"
shift
:width="$width"
:attributes="
\Filament\Support\prepare_inherited_attributes(
$attributes->class([
'fi-fo-builder-block-picker',
($actionAlignment instanceof Alignment) ? ('fi-align-' . $actionAlignment->value) : $actionAlignment => $actionAlignment,
]),
)
"
>
<x-slot name="trigger">
{{ $trigger }}
</x-slot>
<x-filament::dropdown.list>
<div
{{ (new ComponentAttributeBag)->grid($columns, GridDirection::Column) }}
>
@foreach ($blocks as $block)
@php
$blockIcon = $block->getIcon();
$wireClickActionArguments = ['block' => $block->getName()];
if (filled($afterItem)) {
$wireClickActionArguments['afterItem'] = $afterItem;
}
$wireClickActionArguments = \Illuminate\Support\Js::from($wireClickActionArguments);
$wireClickAction = "mountAction('{$action->getName()}', {$wireClickActionArguments}, { schemaComponent: '{$key}' })";
@endphp
<x-filament::dropdown.list.item
:icon="$blockIcon"
x-on:click="close"
:wire:click="$wireClickAction"
>
{{ $block->getLabel() }}
</x-filament::dropdown.list.item>
@endforeach
</div>
</x-filament::dropdown.list>
</x-filament::dropdown>

View File

@@ -0,0 +1,151 @@
@php
use Filament\Support\Enums\GridDirection;
$fieldWrapperView = $getFieldWrapperView();
$extraInputAttributeBag = $getExtraInputAttributeBag();
$isHtmlAllowed = $isHtmlAllowed();
$gridDirection = $getGridDirection() ?? GridDirection::Column;
$isBulkToggleable = $isBulkToggleable();
$isDisabled = $isDisabled();
$isSearchable = $isSearchable();
$statePath = $getStatePath();
$options = $getOptions();
$livewireKey = $getLivewireKey();
$wireModelAttribute = $applyStateBindingModifiers('wire:model');
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('checkbox-list', 'filament/forms') }}"
x-data="checkboxListFormComponent({
livewireId: @js($this->getId()),
})"
{{ $getExtraAlpineAttributeBag()->class(['fi-fo-checkbox-list']) }}
>
@if (! $isDisabled)
@if ($isSearchable)
<x-filament::input.wrapper
inline-prefix
:prefix-icon="\Filament\Support\Icons\Heroicon::MagnifyingGlass"
:prefix-icon-alias="\Filament\Forms\View\FormsIconAlias::COMPONENTS_CHECKBOX_LIST_SEARCH_FIELD"
class="fi-fo-checkbox-list-search-input-wrp"
>
<input
placeholder="{{ $getSearchPrompt() }}"
type="search"
x-model.debounce.{{ $getSearchDebounce() }}="search"
class="fi-input fi-input-has-inline-prefix"
/>
</x-filament::input.wrapper>
@endif
@if ($isBulkToggleable && count($options))
<div
x-cloak
class="fi-fo-checkbox-list-actions"
wire:key="{{ $livewireKey }}.actions"
>
<span
x-show="! areAllCheckboxesChecked"
x-on:click="toggleAllCheckboxes()"
wire:key="{{ $livewireKey }}.actions.select-all"
>
{{ $getAction('selectAll') }}
</span>
<span
x-show="areAllCheckboxesChecked"
x-on:click="toggleAllCheckboxes()"
wire:key="{{ $livewireKey }}.actions.deselect-all"
>
{{ $getAction('deselectAll') }}
</span>
</div>
@endif
@endif
<div
{{
$getExtraAttributeBag()
->grid($getColumns(), $gridDirection)
->merge([
'x-show' => $isSearchable ? 'visibleCheckboxListOptions.length' : null,
], escape: false)
->class([
'fi-fo-checkbox-list-options',
])
}}
>
@forelse ($options as $value => $label)
<div
wire:key="{{ $livewireKey }}.options.{{ $value }}"
@if ($isSearchable)
x-show="
$el
.querySelector('.fi-fo-checkbox-list-option-label')
?.innerText.toLowerCase()
.includes(search.toLowerCase()) ||
$el
.querySelector('.fi-fo-checkbox-list-option-description')
?.innerText.toLowerCase()
.includes(search.toLowerCase())
"
@endif
class="fi-fo-checkbox-list-option-ctn"
>
<label class="fi-fo-checkbox-list-option">
<input
type="checkbox"
{{
$extraInputAttributeBag
->merge([
'disabled' => $isDisabled || $isOptionDisabled($value, $label),
'value' => $value,
'wire:loading.attr' => 'disabled',
$wireModelAttribute => $statePath,
'x-on:change' => $isBulkToggleable ? 'checkIfAllCheckboxesAreChecked()' : null,
], escape: false)
->class([
'fi-checkbox-input',
'fi-valid' => ! $errors->has($statePath),
'fi-invalid' => $errors->has($statePath),
])
}}
/>
<div class="fi-fo-checkbox-list-option-text">
<span class="fi-fo-checkbox-list-option-label">
@if ($isHtmlAllowed)
{!! $label !!}
@else
{{ $label }}
@endif
</span>
@if ($hasDescription($value))
<p
class="fi-fo-checkbox-list-option-description"
>
{{ $getDescription($value) }}
</p>
@endif
</div>
</label>
</div>
@empty
<div wire:key="{{ $livewireKey }}.empty"></div>
@endforelse
</div>
@if ($isSearchable)
<div
x-cloak
x-show="search && ! visibleCheckboxListOptions.length"
class="fi-fo-checkbox-list-no-search-results-message"
>
{{ $getNoSearchResultsMessage() }}
</div>
@endif
</div>
</x-dynamic-component>

View File

@@ -0,0 +1,34 @@
@php
$fieldWrapperView = $getFieldWrapperView();
$statePath = $getStatePath();
$attributes = $attributes
->merge([
'autofocus' => $isAutofocused(),
'disabled' => $isDisabled(),
'id' => $getId(),
'required' => $isRequired() && (! $isConcealed()),
'wire:loading.attr' => 'disabled',
$applyStateBindingModifiers('wire:model') => $statePath,
], escape: false)
->merge($getExtraAttributes(), escape: false)
->merge($getExtraInputAttributes(), escape: false)
->class([
'fi-checkbox-input',
'fi-valid' => ! $errors->has($statePath),
'fi-invalid' => $errors->has($statePath),
]);
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
:inline-label-vertical-alignment="\Filament\Support\Enums\VerticalAlignment::Center"
>
@if ($isInline())
<x-slot name="labelPrefix">
<input type="checkbox" {{ $attributes }} />
</x-slot>
@else
<input type="checkbox" {{ $attributes }} />
@endif
</x-dynamic-component>

View File

@@ -0,0 +1,40 @@
@php
$fieldWrapperView = $getFieldWrapperView();
$extraAttributeBag = $getExtraAttributeBag();
$isDisabled = $isDisabled();
$key = $getKey();
$language = $getLanguage();
$statePath = $getStatePath();
$livewireKey = $getLivewireKey();
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<x-filament::input.wrapper
:disabled="$isDisabled"
:valid="! $errors->has($statePath)"
:attributes="
\Filament\Support\prepare_inherited_attributes($extraAttributeBag)
->class(['fi-fo-code-editor'])
"
>
<div
x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('code-editor', 'filament/forms') }}"
x-data="codeEditorFormComponent({
isDisabled: @js($isDisabled),
language: @js($language?->value),
state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
})"
wire:ignore
wire:key="{{ $livewireKey }}.{{
substr(md5(serialize([
$isDisabled,
$language?->value,
])), 0, 64)
}}"
{{ $getExtraAlpineAttributeBag() }}
>
<div x-ref="editor" x-cloak></div>
</div>
</x-filament::input.wrapper>
</x-dynamic-component>

View File

@@ -0,0 +1,115 @@
@php
$fieldWrapperView = $getFieldWrapperView();
$extraAttributeBag = $getExtraAttributeBag();
$isDisabled = $isDisabled();
$isLive = $isLive();
$isLiveOnBlur = $isLiveOnBlur();
$isLiveDebounced = $isLiveDebounced();
$isPrefixInline = $isPrefixInline();
$isSuffixInline = $isSuffixInline();
$liveDebounce = $getLiveDebounce();
$prefixActions = $getPrefixActions();
$prefixIcon = $getPrefixIcon();
$prefixIconColor = $getPrefixIconColor();
$prefixLabel = $getPrefixLabel();
$suffixActions = $getSuffixActions();
$suffixIcon = $getSuffixIcon();
$suffixIconColor = $getSuffixIconColor();
$suffixLabel = $getSuffixLabel();
$statePath = $getStatePath();
$placeholder = $getPlaceholder();
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
:inline-label-vertical-alignment="\Filament\Support\Enums\VerticalAlignment::Center"
>
<x-filament::input.wrapper
:disabled="$isDisabled"
:inline-prefix="$isPrefixInline"
:inline-suffix="$isSuffixInline"
:prefix="$prefixLabel"
:prefix-actions="$prefixActions"
:prefix-icon="$prefixIcon"
:prefix-icon-color="$prefixIconColor"
:suffix="$suffixLabel"
:suffix-actions="$suffixActions"
:suffix-icon="$suffixIcon"
:suffix-icon-color="$suffixIconColor"
:valid="! $errors->has($statePath)"
:attributes="
\Filament\Support\prepare_inherited_attributes($extraAttributeBag)
->class('fi-fo-color-picker')
"
>
<div
x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('color-picker', 'filament/forms') }}"
x-data="colorPickerFormComponent({
isAutofocused: @js($isAutofocused()),
isDisabled: @js($isDisabled),
isLive: @js($isLive),
isLiveDebounced: @js($isLiveDebounced),
isLiveOnBlur: @js($isLiveOnBlur),
liveDebounce: @js($liveDebounce),
state: $wire.$entangle('{{ $statePath }}'),
})"
x-on:keydown.esc="isOpen() && $event.stopPropagation()"
{{ $getExtraAlpineAttributeBag()->class(['fi-input-wrp-content']) }}
>
<input
x-on:focus="$refs.panel.open($refs.input)"
x-on:keydown.enter.prevent.stop="togglePanelVisibility()"
x-ref="input"
{{
$getExtraInputAttributeBag()
->merge([
'autocomplete' => 'off',
'disabled' => $isDisabled,
'id' => $getId(),
'placeholder' => filled($placeholder) ? e($placeholder) : null,
'required' => $isRequired() && (! $isConcealed()),
'type' => 'text',
'x-model' . ($isLiveDebounced ? '.debounce.' . $liveDebounce : null) => 'state',
'x-on:blur' => $isLiveOnBlur ? 'isOpen() ? null : commitState()' : null,
], escape: false)
->class([
'fi-input',
'fi-input-has-inline-prefix' => $isPrefixInline && (count($prefixActions) || $prefixIcon || filled($prefixLabel)),
'fi-input-has-inline-suffix' => $isSuffixInline && (count($suffixActions) || $suffixIcon || filled($suffixLabel)),
])
}}
/>
<div
class="fi-fo-color-picker-preview my-auto me-3 size-5 shrink-0 rounded-full select-none"
x-on:click="togglePanelVisibility()"
x-bind:class="{
'fi-empty': ! state,
}"
x-bind:style="{ 'background-color': state }"
></div>
<div
wire:ignore.self
wire:key="{{ $getLivewireKey() }}.panel"
x-cloak
x-float.placement.bottom-start.offset.flip.shift="{ offset: 8 }"
x-ref="panel"
class="fi-fo-color-picker-panel"
>
@php
$tag = match ($getFormat()) {
'hsl' => 'hsl-string',
'rgb' => 'rgb-string',
'rgba' => 'rgba-string',
default => 'hex',
} . '-color-picker';
@endphp
<{{ $tag }} color="{{ $getState() }}" />
</div>
</div>
</x-filament::input.wrapper>
</x-dynamic-component>

View File

@@ -0,0 +1,294 @@
@php
$fieldWrapperView = $getFieldWrapperView();
$datalistOptions = $getDatalistOptions();
$disabledDates = $getDisabledDates();
$extraAlpineAttributes = $getExtraAlpineAttributes();
$extraAttributeBag = $getExtraAttributeBag();
$extraInputAttributeBag = $getExtraInputAttributeBag();
$hasDate = $hasDate();
$hasTime = $hasTime();
$hasSeconds = $hasSeconds();
$id = $getId();
$isDisabled = $isDisabled();
$isAutofocused = $isAutofocused();
$isPrefixInline = $isPrefixInline();
$isSuffixInline = $isSuffixInline();
$maxDate = $getMaxDate();
$minDate = $getMinDate();
$prefixActions = $getPrefixActions();
$prefixIcon = $getPrefixIcon();
$prefixIconColor = $getPrefixIconColor();
$prefixLabel = $getPrefixLabel();
$suffixActions = $getSuffixActions();
$suffixIcon = $getSuffixIcon();
$suffixIconColor = $getSuffixIconColor();
$suffixLabel = $getSuffixLabel();
$statePath = $getStatePath();
$placeholder = $getPlaceholder();
$isReadOnly = $isReadOnly();
$isRequired = $isRequired();
$isConcealed = $isConcealed();
$step = $getStep();
$type = $getType();
$livewireKey = $getLivewireKey();
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
:inline-label-vertical-alignment="\Filament\Support\Enums\VerticalAlignment::Center"
>
<x-filament::input.wrapper
:disabled="$isDisabled"
:inline-prefix="$isPrefixInline"
:inline-suffix="$isSuffixInline"
:prefix="$prefixLabel"
:prefix-actions="$prefixActions"
:prefix-icon="$prefixIcon"
:prefix-icon-color="$prefixIconColor"
:suffix="$suffixLabel"
:suffix-actions="$suffixActions"
:suffix-icon="$suffixIcon"
:suffix-icon-color="$suffixIconColor"
:valid="! $errors->has($statePath)"
:attributes="\Filament\Support\prepare_inherited_attributes($extraAttributeBag)->class(['fi-fo-date-time-picker'])"
>
@if ($isNative())
<input
{{
$extraInputAttributeBag
->merge($extraAlpineAttributes, escape: false)
->merge([
'autofocus' => $isAutofocused,
'disabled' => $isDisabled,
'id' => $id,
'list' => $datalistOptions ? $id . '-list' : null,
'max' => $hasTime ? $maxDate : ($maxDate ? \Carbon\Carbon::parse($maxDate)->toDateString() : null),
'min' => $hasTime ? $minDate : ($minDate ? \Carbon\Carbon::parse($minDate)->toDateString() : null),
'placeholder' => filled($placeholder) ? e($placeholder) : null,
'readonly' => $isReadOnly,
'required' => $isRequired && (! $isConcealed),
'step' => $step,
'type' => $type,
$applyStateBindingModifiers('wire:model') => $statePath,
'x-data' => count($extraAlpineAttributes) ? '{}' : null,
], escape: false)
->class([
'fi-input',
'fi-input-has-inline-prefix' => $isPrefixInline && (count($prefixActions) || $prefixIcon || filled($prefixLabel)),
'fi-input-has-inline-suffix' => $isSuffixInline && (count($suffixActions) || $suffixIcon || filled($suffixLabel)),
])
}}
/>
@else
<div
x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('date-time-picker', 'filament/forms') }}"
x-data="dateTimePickerFormComponent({
defaultFocusedDate: @js($defaultFocusedDate),
displayFormat:
'{{ convert_date_format($getDisplayFormat())->to('day.js') }}',
firstDayOfWeek: {{ $getFirstDayOfWeek() }},
isAutofocused: @js($isAutofocused),
locale: @js($getLocale()),
shouldCloseOnDateSelection: @js($shouldCloseOnDateSelection()),
state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
})"
wire:ignore
wire:key="{{ $livewireKey }}.{{
substr(md5(serialize([
$disabledDates,
$isDisabled,
$isReadOnly,
$maxDate,
$minDate,
$hasDate,
$hasTime,
$hasSeconds,
])), 0, 64)
}}"
x-on:keydown.esc="isOpen() && $event.stopPropagation()"
{{ $getExtraAlpineAttributeBag() }}
>
<input x-ref="maxDate" type="hidden" value="{{ $maxDate }}" />
<input x-ref="minDate" type="hidden" value="{{ $minDate }}" />
<input
x-ref="disabledDates"
type="hidden"
value="{{ json_encode($disabledDates) }}"
/>
<button
x-ref="button"
x-on:click="togglePanelVisibility()"
x-on:keydown.enter.prevent.stop="
if (! $el.disabled) {
isOpen() ? selectDate() : togglePanelVisibility()
}
"
x-on:keydown.arrow-left.prevent.stop="if (! $el.disabled) focusPreviousDay()"
x-on:keydown.arrow-right.prevent.stop="if (! $el.disabled) focusNextDay()"
x-on:keydown.arrow-up.prevent.stop="if (! $el.disabled) focusPreviousWeek()"
x-on:keydown.arrow-down.prevent.stop="if (! $el.disabled) focusNextWeek()"
x-on:keydown.backspace.prevent.stop="if (! $el.disabled) clearState()"
x-on:keydown.clear.prevent.stop="if (! $el.disabled) clearState()"
x-on:keydown.delete.prevent.stop="if (! $el.disabled) clearState()"
aria-label="{{ $placeholder }}"
type="button"
tabindex="-1"
@disabled($isDisabled || $isReadOnly)
{{
$getExtraTriggerAttributeBag()->class([
'fi-fo-date-time-picker-trigger',
])
}}
>
<input
@disabled($isDisabled)
readonly
placeholder="{{ $placeholder }}"
wire:key="{{ $livewireKey }}.display-text"
x-model="displayText"
@if ($id = $getId()) id="{{ $id }}" @endif
@class([
'fi-fo-date-time-picker-display-text-input',
])
/>
</button>
<div
x-ref="panel"
x-cloak
x-float.placement.bottom-start.offset.flip.shift="{ offset: 8 }"
wire:ignore
wire:key="{{ $livewireKey }}.panel"
@class([
'fi-fo-date-time-picker-panel',
])
>
@if ($hasDate)
<div class="fi-fo-date-time-picker-panel-header">
<select
x-model="focusedMonth"
class="fi-fo-date-time-picker-month-select"
>
<template x-for="(month, index) in months">
<option
x-bind:value="index"
x-text="month"
></option>
</template>
</select>
<input
type="number"
inputmode="numeric"
x-model.debounce="focusedYear"
class="fi-fo-date-time-picker-year-input"
/>
</div>
<div class="fi-fo-date-time-picker-calendar-header">
<template
x-for="(day, index) in dayLabels"
x-bind:key="index"
>
<div
x-text="day"
class="fi-fo-date-time-picker-calendar-header-day"
></div>
</template>
</div>
<div
role="grid"
class="fi-fo-date-time-picker-calendar"
>
<template
x-for="day in emptyDaysInFocusedMonth"
x-bind:key="day"
>
<div></div>
</template>
<template
x-for="day in daysInFocusedMonth"
x-bind:key="day"
>
<div
x-text="day"
x-on:click="dayIsDisabled(day) || selectDate(day)"
x-on:mouseenter="setFocusedDay(day)"
role="option"
x-bind:aria-selected="focusedDate.date() === day"
x-bind:class="{
'fi-fo-date-time-picker-calendar-day-today': dayIsToday(day),
'fi-focused': focusedDate.date() === day,
'fi-selected': dayIsSelected(day),
'fi-disabled': dayIsDisabled(day),
}"
class="fi-fo-date-time-picker-calendar-day"
></div>
</template>
</div>
@endif
@if ($hasTime)
<div class="fi-fo-date-time-picker-time-inputs">
<input
max="23"
min="0"
step="{{ $getHoursStep() }}"
type="number"
inputmode="numeric"
x-model.debounce="hour"
/>
<span
class="fi-fo-date-time-picker-time-input-separator"
>
:
</span>
<input
max="59"
min="0"
step="{{ $getMinutesStep() }}"
type="number"
inputmode="numeric"
x-model.debounce="minute"
/>
@if ($hasSeconds)
<span
class="fi-fo-date-time-picker-time-input-separator"
>
:
</span>
<input
max="59"
min="0"
step="{{ $getSecondsStep() }}"
type="number"
inputmode="numeric"
x-model.debounce="second"
/>
@endif
</div>
@endif
</div>
</div>
@endif
</x-filament::input.wrapper>
@if ($datalistOptions)
<datalist id="{{ $id }}-list">
@foreach ($datalistOptions as $option)
<option value="{{ $option }}" />
@endforeach
</datalist>
@endif
</x-dynamic-component>

View File

@@ -0,0 +1,197 @@
@php
use Filament\Support\Enums\VerticalAlignment;
@endphp
@props([
'areHtmlErrorMessagesAllowed' => null,
'errorMessage' => null,
'errorMessages' => null,
'field' => null,
'hasErrors' => true,
'hasInlineLabel' => null,
'hasNestedRecursiveValidationRules' => null,
'id' => null,
'inlineLabelVerticalAlignment' => VerticalAlignment::Start,
'isDisabled' => null,
'label' => null,
'labelPrefix' => null,
'labelSrOnly' => null,
'labelSuffix' => null,
'labelTag' => 'label',
'required' => null,
'shouldShowAllValidationMessages' => null,
'statePath' => null,
])
@php
use Illuminate\Support\Arr;
if ($field) {
$hasInlineLabel ??= $field->hasInlineLabel();
$hasNestedRecursiveValidationRules ??= $field instanceof \Filament\Forms\Components\Contracts\HasNestedRecursiveValidationRules;
$id ??= $field->getId();
$isDisabled ??= $field->isDisabled();
$label ??= $field->getLabel();
$labelSrOnly ??= $field->isLabelHidden();
$required ??= $field->isMarkedAsRequired();
$statePath ??= $field->getStatePath();
$areHtmlErrorMessagesAllowed ??= $field->areHtmlValidationMessagesAllowed();
$shouldShowAllValidationMessages ??= $field->shouldShowAllValidationMessages();
}
$aboveLabelSchema = $field?->getChildSchema($field::ABOVE_LABEL_SCHEMA_KEY)?->toHtmlString();
$belowLabelSchema = $field?->getChildSchema($field::BELOW_LABEL_SCHEMA_KEY)?->toHtmlString();
$beforeLabelSchema = $field?->getChildSchema($field::BEFORE_LABEL_SCHEMA_KEY)?->toHtmlString();
$afterLabelSchema = $field?->getChildSchema($field::AFTER_LABEL_SCHEMA_KEY)?->toHtmlString();
$aboveContentSchema = $field?->getChildSchema($field::ABOVE_CONTENT_SCHEMA_KEY)?->toHtmlString();
$belowContentSchema = $field?->getChildSchema($field::BELOW_CONTENT_SCHEMA_KEY)?->toHtmlString();
$beforeContentSchema = $field?->getChildSchema($field::BEFORE_CONTENT_SCHEMA_KEY)?->toHtmlString();
$afterContentSchema = $field?->getChildSchema($field::AFTER_CONTENT_SCHEMA_KEY)?->toHtmlString();
$aboveErrorMessageSchema = $field?->getChildSchema($field::ABOVE_ERROR_MESSAGE_SCHEMA_KEY)?->toHtmlString();
$belowErrorMessageSchema = $field?->getChildSchema($field::BELOW_ERROR_MESSAGE_SCHEMA_KEY)?->toHtmlString();
$hasError = $hasErrors && (filled($errorMessage) || filled($errorMessages) || (filled($statePath) && ($errors->has($statePath) || ($hasNestedRecursiveValidationRules && $errors->has("{$statePath}.*")))));
if ($hasError && filled($statePath) && blank($errorMessage) && blank($errorMessages)) {
if ($shouldShowAllValidationMessages) {
$errorMessages = $errors->has($statePath) ? $errors->get($statePath) : ($hasNestedRecursiveValidationRules ? $errors->get("{$statePath}.*") : []);
if (count($errorMessages) === 1) {
$errorMessage = Arr::first($errorMessages);
$errorMessages = [];
}
} else {
$errorMessage = $errors->has($statePath) ? $errors->first($statePath) : ($hasNestedRecursiveValidationRules ? $errors->first("{$statePath}.*") : null);
}
}
@endphp
<div
data-field-wrapper
{{
$attributes
->merge($field?->getExtraFieldWrapperAttributes() ?? [], escape: false)
->class([
'fi-fo-field',
'fi-fo-field-has-inline-label' => $hasInlineLabel,
])
}}
>
@if (filled($label) && $labelSrOnly)
<{{ $labelTag }}
@if ($labelTag === 'label')
for="{{ $id }}"
@else
id="{{ $id }}-label"
@endif
class="fi-fo-field-label fi-sr-only"
>
{{ $label }}
</{{ $labelTag }}>
@endif
@if ((filled($label) && (! $labelSrOnly)) || $hasInlineLabel || $aboveLabelSchema || $belowLabelSchema || $beforeLabelSchema || $afterLabelSchema || $labelPrefix || $labelSuffix)
<div
@class([
'fi-fo-field-label-col',
"fi-vertical-align-{$inlineLabelVerticalAlignment->value}" => $hasInlineLabel,
])
>
{{ $aboveLabelSchema }}
<div
@class([
'fi-fo-field-label-ctn',
($label instanceof \Illuminate\View\ComponentSlot) ? $label->attributes->get('class') : null,
])
>
{{ $beforeLabelSchema }}
@if ((filled($label) && (! $labelSrOnly)) || $labelPrefix || $labelSuffix)
<{{ $labelTag }}
@if ($labelTag === 'label')
for="{{ $id }}"
@else
id="{{ $id }}-label"
@endif
class="fi-fo-field-label"
>
{{ $labelPrefix }}
@if (filled($label) && (! $labelSrOnly))
<span class="fi-fo-field-label-content">
{{ $label }}@if ($required && (! $isDisabled))<sup class="fi-fo-field-label-required-mark">*</sup>
@endif
</span>
@endif
{{ $labelSuffix }}
</{{ $labelTag }}>
@endif
{{ $afterLabelSchema }}
</div>
{{ $belowLabelSchema }}
</div>
@endif
@if ((! \Filament\Support\is_slot_empty($slot)) || $hasError || $aboveContentSchema || $belowContentSchema || $beforeContentSchema || $afterContentSchema || $aboveErrorMessageSchema || $belowErrorMessageSchema)
<div class="fi-fo-field-content-col">
{{ $aboveContentSchema }}
@if ($beforeContentSchema || $afterContentSchema)
<div class="fi-fo-field-content-ctn">
{{ $beforeContentSchema }}
<div class="fi-fo-field-content">
{{ $slot }}
</div>
{{ $afterContentSchema }}
</div>
@else
{{ $slot }}
@endif
{{ $belowContentSchema }}
@if ($hasError)
{{ $aboveErrorMessageSchema }}
@if (filled($errorMessages))
<ul
data-validation-error
class="fi-fo-field-wrp-error-list"
>
@foreach ($errorMessages as $errorMessage)
<li class="fi-fo-field-wrp-error-message">
@if ($areHtmlErrorMessagesAllowed)
{!! $errorMessage !!}
@else
{{ $errorMessage }}
@endif
</li>
@endforeach
</ul>
@elseif ($areHtmlErrorMessagesAllowed)
<div
data-validation-error
class="fi-fo-field-wrp-error-message"
>
{!! $errorMessage !!}
</div>
@else
<p
data-validation-error
class="fi-fo-field-wrp-error-message"
>
{{ $errorMessage }}
</p>
@endif
{{ $belowErrorMessageSchema }}
@endif
</div>
@endif
</div>

View File

@@ -0,0 +1,344 @@
@php
use Filament\Support\Enums\Alignment;
$fieldWrapperView = $getFieldWrapperView();
$id = $getId();
$imageCropAspectRatio = $getImageCropAspectRatio();
$imageResizeTargetHeight = $getImageResizeTargetHeight();
$imageResizeTargetWidth = $getImageResizeTargetWidth();
$isAvatar = $isAvatar();
$isMultiple = $isMultiple();
$key = $getKey();
$statePath = $getStatePath();
$isDisabled = $isDisabled();
$hasImageEditor = $hasImageEditor();
$hasCircleCropper = $hasCircleCropper();
$livewireKey = $getLivewireKey();
$alignment = $getAlignment() ?? Alignment::Start;
if (! $alignment instanceof Alignment) {
$alignment = filled($alignment) ? (Alignment::tryFrom($alignment) ?? $alignment) : null;
}
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
label-tag="div"
>
<div
x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('file-upload', 'filament/forms') }}"
x-data="fileUploadFormComponent({
acceptedFileTypes: @js($getAcceptedFileTypes()),
imageEditorEmptyFillColor: @js($getImageEditorEmptyFillColor()),
imageEditorMode: @js($getImageEditorMode()),
imageEditorViewportHeight: @js($getImageEditorViewportHeight()),
imageEditorViewportWidth: @js($getImageEditorViewportWidth()),
deleteUploadedFileUsing: async (fileKey) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'deleteUploadedFile',
{ fileKey },
)
},
getUploadedFilesUsing: async () => {
return await $wire.callSchemaComponentMethod(
@js($key),
'getUploadedFiles',
)
},
hasImageEditor: @js($hasImageEditor),
hasCircleCropper: @js($hasCircleCropper),
canEditSvgs: @js($canEditSvgs()),
isSvgEditingConfirmed: @js($isSvgEditingConfirmed()),
confirmSvgEditingMessage: @js(__('filament-forms::components.file_upload.editor.svg.messages.confirmation')),
disabledSvgEditingMessage: @js(__('filament-forms::components.file_upload.editor.svg.messages.disabled')),
imageCropAspectRatio: @js($imageCropAspectRatio),
imagePreviewHeight: @js($getImagePreviewHeight()),
imageResizeMode: @js($getImageResizeMode()),
imageResizeTargetHeight: @js($imageResizeTargetHeight),
imageResizeTargetWidth: @js($imageResizeTargetWidth),
imageResizeUpscale: @js($getImageResizeUpscale()),
isAvatar: @js($isAvatar),
isDeletable: @js($isDeletable()),
isDisabled: @js($isDisabled),
isDownloadable: @js($isDownloadable()),
isMultiple: @js($isMultiple),
isOpenable: @js($isOpenable()),
isPasteable: @js($isPasteable()),
isPreviewable: @js($isPreviewable()),
isReorderable: @js($isReorderable()),
itemPanelAspectRatio: @js($getItemPanelAspectRatio()),
loadingIndicatorPosition: @js($getLoadingIndicatorPosition()),
locale: @js(app()->getLocale()),
panelAspectRatio: @js($getPanelAspectRatio()),
panelLayout: @js($getPanelLayout()),
placeholder: @js($getPlaceholder()),
maxFiles: @js($maxFiles = $getMaxFiles()),
maxFilesValidationMessage: @js($maxFiles ? trans_choice('validation.max.array', $maxFiles, ['attribute' => $getValidationAttribute(), 'max' => $maxFiles]) : null),
maxSize: @js(($size = $getMaxSize()) ? "{$size}KB" : null),
minSize: @js(($size = $getMinSize()) ? "{$size}KB" : null),
mimeTypeMap: @js($getMimeTypeMap()),
maxParallelUploads: @js($getMaxParallelUploads()),
removeUploadedFileUsing: async (fileKey) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'removeUploadedFile',
{ fileKey },
)
},
removeUploadedFileButtonPosition: @js($getRemoveUploadedFileButtonPosition()),
reorderUploadedFilesUsing: async (fileKeys) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'reorderUploadedFiles',
{ fileKeys },
)
},
shouldAppendFiles: @js($shouldAppendFiles()),
shouldOrientImageFromExif: @js($shouldOrientImagesFromExif()),
shouldTransformImage: @js($imageCropAspectRatio || $imageResizeTargetHeight || $imageResizeTargetWidth),
state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
uploadButtonPosition: @js($getUploadButtonPosition()),
uploadingMessage: @js($getUploadingMessage()),
uploadProgressIndicatorPosition: @js($getUploadProgressIndicatorPosition()),
uploadUsing: (fileKey, file, success, error, progress) => {
$wire.upload(
`{{ $statePath }}.${fileKey}`,
file,
() => {
success(fileKey)
},
error,
(progressEvent) => {
progress(true, progressEvent.detail.progress, 100)
},
)
},
})"
wire:ignore
wire:key="{{ $livewireKey }}.{{
substr(md5(serialize([
$isDisabled,
])), 0, 64)
}}"
{{
$attributes
->merge([
'aria-labelledby' => "{$id}-label",
'id' => $id,
'role' => 'group',
], escape: false)
->merge($getExtraAttributes(), escape: false)
->merge($getExtraAlpineAttributes(), escape: false)
->class([
'fi-fo-file-upload',
'fi-fo-file-upload-avatar' => $isAvatar,
($alignment instanceof Alignment) ? "fi-align-{$alignment->value}" : $alignment,
])
}}
>
<div class="fi-fo-file-upload-input-ctn">
<input
x-ref="input"
{{
$getExtraInputAttributeBag()
->merge([
'aria-labelledby' => "{$id}-label",
'disabled' => $isDisabled,
'multiple' => $isMultiple,
'type' => 'file',
], escape: false)
}}
/>
</div>
<div
x-show="error"
x-text="error"
x-cloak
class="fi-fo-file-upload-error-message"
></div>
@if ($hasImageEditor && (! $isDisabled))
<div
x-show="isEditorOpen"
x-cloak
x-on:click.stop=""
x-trap.noscroll="isEditorOpen"
x-on:keydown.escape.prevent.stop="closeEditor"
@class([
'fi-fo-file-upload-editor',
'fi-fo-file-upload-editor-circle-cropper' => $hasCircleCropper,
])
>
<div
aria-hidden="true"
class="fi-fo-file-upload-editor-overlay"
></div>
<div class="fi-fo-file-upload-editor-window">
<div class="fi-fo-file-upload-editor-image-ctn">
<img
x-ref="editor"
class="fi-fo-file-upload-editor-image"
/>
</div>
<div class="fi-fo-file-upload-editor-control-panel">
<div
class="fi-fo-file-upload-editor-control-panel-main"
>
<div
class="fi-fo-file-upload-editor-control-panel-group"
>
@foreach ([
[
'label' => __('filament-forms::components.file_upload.editor.fields.x_position.label'),
'ref' => 'xPositionInput',
'unit' => __('filament-forms::components.file_upload.editor.fields.x_position.unit'),
'alpineSaveHandler' => 'editor.setData({...editor.getData(true), x: +$el.value})',
],
[
'label' => __('filament-forms::components.file_upload.editor.fields.y_position.label'),
'ref' => 'yPositionInput',
'unit' => __('filament-forms::components.file_upload.editor.fields.y_position.unit'),
'alpineSaveHandler' => 'editor.setData({...editor.getData(true), y: +$el.value})',
],
[
'label' => __('filament-forms::components.file_upload.editor.fields.width.label'),
'ref' => 'widthInput',
'unit' => __('filament-forms::components.file_upload.editor.fields.width.unit'),
'alpineSaveHandler' => 'editor.setData({...editor.getData(true), width: +$el.value})',
],
[
'label' => __('filament-forms::components.file_upload.editor.fields.height.label'),
'ref' => 'heightInput',
'unit' => __('filament-forms::components.file_upload.editor.fields.height.unit'),
'alpineSaveHandler' => 'editor.setData({...editor.getData(true), height: +$el.value})',
],
[
'label' => __('filament-forms::components.file_upload.editor.fields.rotation.label'),
'ref' => 'rotationInput',
'unit' => __('filament-forms::components.file_upload.editor.fields.rotation.unit'),
'alpineSaveHandler' => 'editor.rotateTo(+$el.value)',
],
] as $input)
<label>
<x-filament::input.wrapper>
<x-slot name="prefix">
{{ $input['label'] }}
</x-slot>
<input
x-on:keyup.enter.prevent.stop="editor && {!! $input['alpineSaveHandler'] !!}"
x-on:blur="editor && {!! $input['alpineSaveHandler'] !!}"
x-ref="{{ $input['ref'] }}"
x-on:keydown.enter.prevent
type="text"
class="fi-input"
/>
<x-slot name="suffix">
{{ $input['unit'] }}
</x-slot>
</x-filament::input.wrapper>
</label>
@endforeach
</div>
<div
class="fi-fo-file-upload-editor-control-panel-group"
>
@foreach ($getImageEditorActions() as $groupedActions)
<div class="fi-btn-group">
@foreach ($groupedActions as $action)
<button
aria-label="{{ $action['label'] }}"
type="button"
x-on:click.prevent.stop="{{ $action['alpineClickHandler'] }}"
x-tooltip="{ content: @js($action['label']), theme: $store.theme }"
class="fi-btn"
>
{{ $action['iconHtml'] }}
</button>
@endforeach
</div>
@endforeach
</div>
@if (count($aspectRatios = $getImageEditorAspectRatiosForJs()))
<div
class="fi-fo-file-upload-editor-control-panel-group"
>
<div
class="fi-fo-file-upload-editor-control-panel-group-title"
>
{{ __('filament-forms::components.file_upload.editor.aspect_ratios.label') }}
</div>
@foreach (collect($aspectRatios)->chunk(5) as $ratiosChunk)
<div class="fi-btn-group">
@foreach ($ratiosChunk as $label => $ratio)
<button
type="button"
x-on:click.prevent.stop="
currentRatio = @js($label) {!! ';' !!}
editor.setAspectRatio(@js($ratio))
"
x-tooltip="{ content: @js(__('filament-forms::components.file_upload.editor.actions.set_aspect_ratio.label', ['ratio' => $label])), theme: $store.theme }"
x-bind:class="{ 'fi-active': currentRatio === @js($label) }"
class="fi-btn"
>
{{ $label }}
</button>
@endforeach
</div>
@endforeach
</div>
@endif
</div>
<div
class="fi-fo-file-upload-editor-control-panel-footer"
>
<button
type="button"
x-on:click.prevent="pond.imageEditEditor.oncancel"
class="fi-btn"
>
{{ __('filament-forms::components.file_upload.editor.actions.cancel.label') }}
</button>
<button
type="button"
x-on:click.prevent.stop="editor.reset()"
{{
(new \Illuminate\View\ComponentAttributeBag)
->color(\Filament\Support\View\Components\ButtonComponent::class, 'danger')
->class(['fi-btn fi-fo-file-upload-editor-control-panel-reset-action'])
}}
>
{{ __('filament-forms::components.file_upload.editor.actions.reset.label') }}
</button>
<button
type="button"
x-on:click.prevent="saveEditor"
{{
(new \Illuminate\View\ComponentAttributeBag)
->color(\Filament\Support\View\Components\ButtonComponent::class, 'success')
->class(['fi-btn'])
}}
>
{{ __('filament-forms::components.file_upload.editor.actions.save.label') }}
</button>
</div>
</div>
</div>
</div>
@endif
</div>
</x-dynamic-component>

View File

@@ -0,0 +1,12 @@
<input
{{
$attributes
->merge([
'id' => $getId(),
'type' => 'hidden',
$applyStateBindingModifiers('wire:model') => $getStatePath(),
], escape: false)
->merge($getExtraAttributes(), escape: false)
->class(['fi-fo-hidden'])
}}
/>

View File

@@ -0,0 +1,148 @@
@php
$fieldWrapperView = $getFieldWrapperView();
$extraAttributeBag = $getExtraAttributeBag();
$canEditKeys = $canEditKeys();
$canEditValues = $canEditValues();
$keyPlaceholder = $getKeyPlaceholder();
$valuePlaceholder = $getValuePlaceholder();
$debounce = $getLiveDebounce();
$isAddable = $isAddable();
$isDeletable = $isDeletable();
$isDisabled = $isDisabled();
$isReorderable = $isReorderable();
$statePath = $getStatePath();
$livewireKey = $getLivewireKey();
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
class="fi-fo-key-value-wrp"
>
<x-filament::input.wrapper
:disabled="$isDisabled"
:valid="! $errors->has($statePath)"
:attributes="
\Filament\Support\prepare_inherited_attributes($extraAttributeBag)
->class(['fi-fo-key-value'])
"
>
<div
x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('key-value', 'filament/forms') }}"
x-data="keyValueFormComponent({
state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
})"
wire:ignore
wire:key="{{ $livewireKey }}.{{
substr(md5(serialize([
$isDisabled,
])), 0, 64)
}}"
{{
$attributes
->merge($getExtraAlpineAttributes(), escape: false)
->class(['fi-fo-key-value-table-ctn'])
}}
>
<table class="fi-fo-key-value-table">
<thead>
<tr>
@if ($isReorderable && (! $isDisabled))
<th
scope="col"
x-show="rows.length"
class="fi-has-action"
></th>
@endif
<th scope="col">
{{ $getKeyLabel() }}
</th>
<th scope="col">
{{ $getValueLabel() }}
</th>
@if ($isDeletable && (! $isDisabled))
<th
scope="col"
x-show="rows.length"
class="fi-has-action"
></th>
@endif
</tr>
</thead>
<tbody
@if ($isReorderable)
x-on:end.stop="reorderRows($event)"
x-sortable
data-sortable-animation-duration="{{ $getReorderAnimationDuration() }}"
@endif
>
<template
x-bind:key="index"
x-for="(row, index) in rows"
>
<tr
@if ($isReorderable)
x-bind:x-sortable-item="row.key"
@endif
>
@if ($isReorderable && (! $isDisabled))
<td class="fi-has-action">
<div
x-sortable-handle
class="fi-fo-key-value-table-row-sortable-handle"
>
{{ $getAction('reorder') }}
</div>
</td>
@endif
<td>
<input
@disabled((! $canEditKeys) || $isDisabled)
placeholder="{{ $keyPlaceholder }}"
type="text"
x-model="row.key"
x-on:input.debounce.{{ $debounce ?? '500ms' }}="updateState"
class="fi-input"
/>
</td>
<td>
<input
@disabled((! $canEditValues) || $isDisabled)
placeholder="{{ $valuePlaceholder }}"
type="text"
x-model="row.value"
x-on:input.debounce.{{ $debounce ?? '500ms' }}="updateState"
class="fi-input"
/>
</td>
@if ($isDeletable && (! $isDisabled))
<td class="fi-has-action">
<div x-on:click="deleteRow(index)">
{{ $getAction('delete') }}
</div>
</td>
@endif
</tr>
</template>
</tbody>
</table>
@if ($isAddable && (! $isDisabled))
<div
x-on:click="addRow"
class="fi-fo-key-value-add-action-ctn"
>
{{ $getAction('add') }}
</div>
@endif
</div>
</x-filament::input.wrapper>
</x-dynamic-component>

View File

@@ -0,0 +1,30 @@
@php
$fieldWrapperView = $getFieldWrapperView();
$extraAttributes = $getExtraAttributes();
$id = $getId();
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
@if (filled($id) || filled($extraAttributes))
{!! '<div' !!}
{{-- Avoid formatting issues with unclosed elements --}}
{{
$attributes
->merge([
'id' => $id,
], escape: false)
->merge($extraAttributes, escape: false)
}}
>
@endif
@if (filled($key = $getLivewireKey()))
@livewire($getComponent(), $getComponentProperties(), key($key))
@else
@livewire($getComponent(), $getComponentProperties())
@endif
@if (filled($id) || filled($extraAttributes))
{!! '</div>' !!}
{{-- Avoid formatting issues with unclosed elements --}}
@endif
</x-dynamic-component>

View File

@@ -0,0 +1,77 @@
@php
$id = $getId();
$fieldWrapperView = $getFieldWrapperView();
$extraAttributeBag = $getExtraAttributeBag();
$key = $getKey();
$statePath = $getStatePath();
$fileAttachmentsMaxSize = $getFileAttachmentsMaxSize();
$fileAttachmentsAcceptedFileTypes = $getFileAttachmentsAcceptedFileTypes();
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
@if ($isDisabled())
<div id="{{ $id }}" class="fi-fo-markdown-editor fi-disabled fi-prose">
{!! str($getState())->markdown($getCommonMarkOptions(), $getCommonMarkExtensions())->sanitizeHtml() !!}
</div>
@else
<x-filament::input.wrapper
:valid="! $errors->has($statePath)"
:attributes="
\Filament\Support\prepare_inherited_attributes($extraAttributeBag)
->class(['fi-fo-markdown-editor'])
"
>
<div
aria-labelledby="{{ $id }}-label"
id="{{ $id }}"
role="group"
x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('markdown-editor', 'filament/forms') }}"
x-data="markdownEditorFormComponent({
canAttachFiles: @js($hasToolbarButton('attachFiles')),
isLiveDebounced: @js($isLiveDebounced()),
isLiveOnBlur: @js($isLiveOnBlur()),
liveDebounce: @js($getNormalizedLiveDebounce()),
maxHeight: @js($getMaxHeight()),
minHeight: @js($getMinHeight()),
placeholder: @js($getPlaceholder()),
state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')", isOptimisticallyLive: false) }},
toolbarButtons: @js($getToolbarButtons()),
translations: @js(__('filament-forms::components.markdown_editor')),
uploadFileAttachmentUsing: async (file, onSuccess, onError) => {
const acceptedTypes = @js($fileAttachmentsAcceptedFileTypes)
if (acceptedTypes && ! acceptedTypes.includes(file.type)) {
return onError(@js($fileAttachmentsAcceptedFileTypes ? __('filament-forms::components.markdown_editor.file_attachments_accepted_file_types_message', ['values' => implode(', ', $fileAttachmentsAcceptedFileTypes)]) : null))
}
const maxSize = @js($fileAttachmentsMaxSize)
if (maxSize && file.size > +maxSize * 1024) {
return onError(@js($fileAttachmentsMaxSize ? trans_choice('filament-forms::components.markdown_editor.file_attachments_max_size_message', $fileAttachmentsMaxSize, ['max' => $fileAttachmentsMaxSize]) : null))
}
$wire.upload(`componentFileAttachments.{{ $statePath }}`, file, () => {
$wire
.callSchemaComponentMethod(
'{{ $key }}',
'saveUploadedFileAttachmentAndGetUrl',
)
.then((url) => {
if (! url) {
return onError()
}
onSuccess(url)
})
})
},
})"
wire:ignore
{{ $getExtraAlpineAttributeBag() }}
>
<textarea x-ref="editor" x-cloak></textarea>
</div>
</x-filament::input.wrapper>
@endif
</x-dynamic-component>

View File

@@ -0,0 +1,69 @@
@php
use Filament\Forms\Components\TableSelect\Livewire\TableSelectLivewireComponent;
$fieldWrapperView = $getFieldWrapperView();
$extraAttributes = $getExtraAttributes();
$id = $getId();
$isDisabled = $isDisabled();
$isMultiple = $isMultiple();
$hasBadges = $hasBadges();
$badgeColor = $getBadgeColor();
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
{{
$attributes
->merge([
'id' => $id,
], escape: false)
->merge($extraAttributes, escape: false)
->class([
'fi-fo-modal-table-select',
'fi-fo-modal-table-select-disabled' => $isDisabled,
'fi-fo-modal-table-select-multiple' => $isMultiple,
])
}}
>
@if (((! $isMultiple) && filled($optionLabel = $getOptionLabel())) ||
($isMultiple && filled($optionLabels = $getOptionLabels())))
@if ($isMultiple && $hasBadges)
<div class="fi-fo-modal-table-select-badges-ctn">
@foreach ($optionLabels as $optionLabel)
@if ($hasBadges)
<x-filament::badge :color="$badgeColor">
{{ $optionLabel }}
</x-filament::badge>
@else
{{ $optionLabel }}
@endif
@endforeach
</div>
@else
<div>
@if ($hasBadges)
<x-filament::badge :color="$badgeColor">
{{ $optionLabel }}
</x-filament::badge>
@elseif ($isMultiple)
@foreach ($optionLabels as $optionLabel)
{{ $optionLabel . ($loop->last ? '' : ', ') }}
@endforeach
@else
{{ $optionLabel }}
@endif
</div>
@endif
@elseif (filled($placeholder = $getPlaceholder()))
<div class="fi-fo-modal-table-select-placeholder">
{{ $placeholder }}
</div>
@endif
@if (! $isDisabled)
<div>
{{ $getAction('select') }}
</div>
@endif
</div>
</x-dynamic-component>

View File

@@ -0,0 +1,24 @@
@php
$fieldWrapperView = $getFieldWrapperView();
$placeholder = $getPlaceholder();
$extraAttributes = $getExtraAttributeBag()
->merge($getExtraInputAttributes(), escape: false)
->merge($getExtraAlpineAttributes(), escape: false)
->merge([
'autocomplete' => false,
'autofocus' => $isAutofocused(),
'disabled' => $isDisabled(),
'id' => $getId(),
'length' => $getLength(),
'placeholder' => filled($placeholder) ? e($placeholder) : null,
'readonly' => $isReadOnly(),
'required' => $isRequired() && (! $isConcealed()),
$applyStateBindingModifiers('wire:model') => $getStatePath(),
], escape: false);
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<x-filament::input.one-time-code
:attributes="\Filament\Support\prepare_inherited_attributes($extraAttributes)"
/>
</x-dynamic-component>

View File

@@ -0,0 +1,41 @@
@props([
'field' => null,
'id' => null,
'label' => null,
'labelTag' => 'label',
])
@php
use Illuminate\View\ComponentAttributeBag;
if ($field) {
$id ??= $field->getId();
$label ??= $field->getLabel();
}
@endphp
<div
data-field-wrapper
{{
(new ComponentAttributeBag)
->merge($field?->getExtraFieldWrapperAttributes() ?? [], escape: false)
->class([
'fi-fo-field',
])
}}
>
@if (filled($label))
<{{ $labelTag }}
@if ($labelTag === 'label')
for="{{ $id }}"
@else
id="{{ $id }}-label"
@endif
class="fi-fo-field-label fi-sr-only"
>
{{ $label }}
</{{ $labelTag }}>
@endif
{{ $slot }}
</div>

View File

@@ -0,0 +1,64 @@
@php
use Filament\Support\Enums\GridDirection;
use Illuminate\View\ComponentAttributeBag;
$fieldWrapperView = $getFieldWrapperView();
$extraInputAttributeBag = $getExtraInputAttributeBag();
$gridDirection = $getGridDirection() ?? GridDirection::Column;
$id = $getId();
$isDisabled = $isDisabled();
$isInline = $isInline();
$statePath = $getStatePath();
$wireModelAttribute = $applyStateBindingModifiers('wire:model');
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
{{
$getExtraAttributeBag()
->when(! $isInline, fn (ComponentAttributeBag $attributes) => $attributes->grid($getColumns(), $gridDirection))
->class([
'fi-fo-radio',
'fi-inline' => $isInline,
])
}}
>
@foreach ($getOptions() as $value => $label)
@php
$inputAttributes = $extraInputAttributeBag
->merge([
'disabled' => $isDisabled || $isOptionDisabled($value, $label),
'id' => $id . '-' . $value,
'name' => $id,
'value' => $value,
$wireModelAttribute => $statePath,
], escape: false);
@endphp
<label class="fi-fo-radio-label">
<input
type="radio"
{{
$inputAttributes->class([
'fi-radio-input',
'fi-valid' => ! $errors->has($statePath),
'fi-invalid' => $errors->has($statePath),
])
}}
/>
<div class="fi-fo-radio-label-text">
<p>
{{ $label }}
</p>
@if ($hasDescription($value))
<p class="fi-fo-radio-label-description">
{{ $getDescription($value) }}
</p>
@endif
</div>
</label>
@endforeach
</div>
</x-dynamic-component>

View File

@@ -0,0 +1,263 @@
@php
use Filament\Actions\Action;
use Filament\Support\Enums\Alignment;
use Illuminate\View\ComponentAttributeBag;
$fieldWrapperView = $getFieldWrapperView();
$items = $getItems();
$addAction = $getAction($getAddActionName());
$addActionAlignment = $getAddActionAlignment();
$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();
$hasItemNumbers = $hasItemNumbers();
$hasItemHeaders = $hasItemHeaders();
$isAddable = $isAddable();
$isCloneable = $isCloneable();
$isCollapsible = $isCollapsible();
$isDeletable = $isDeletable();
$isReorderableWithButtons = $isReorderableWithButtons();
$isReorderableWithDragAndDrop = $isReorderableWithDragAndDrop();
$collapseAllActionIsVisible = $isCollapsible && $collapseAllAction->isVisible();
$expandAllActionIsVisible = $isCollapsible && $expandAllAction->isVisible();
$key = $getKey();
$statePath = $getStatePath();
$itemLabelHeadingTag = $getHeadingTag();
$isItemLabelTruncated = $isItemLabelTruncated();
$labelBetweenItems = $getLabelBetweenItems();
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
{{
$attributes
->merge($getExtraAttributes(), escape: false)
->class([
'fi-fo-repeater',
'fi-collapsible' => $isCollapsible,
])
}}
>
@if ($collapseAllActionIsVisible || $expandAllActionIsVisible)
<div
@class([
'fi-fo-repeater-actions',
'fi-hidden' => count($items) < 2,
])
>
@if ($collapseAllActionIsVisible)
<span
x-on:click="$dispatch('repeater-collapse', '{{ $statePath }}')"
>
{{ $collapseAllAction }}
</span>
@endif
@if ($expandAllActionIsVisible)
<span
x-on:click="$dispatch('repeater-expand', '{{ $statePath }}')"
>
{{ $expandAllAction }}
</span>
@endif
</div>
@endif
@if (count($items))
<ul
x-sortable
{{
(new ComponentAttributeBag)
->grid($getGridColumns())
->merge([
'data-sortable-animation-duration' => $getReorderAnimationDuration(),
'x-on:end.stop' => '$event.oldDraggableIndex !== $event.newDraggableIndex && $wire.mountAction(\'reorder\', { items: $event.target.sortable.toArray() }, { schemaComponent: \'' . $key . '\' })',
], escape: false)
->class(['fi-fo-repeater-items'])
}}
>
@foreach ($items as $itemKey => $item)
@php
$itemLabel = $getItemLabel($itemKey);
$visibleExtraItemActions = array_filter(
$extraItemActions,
fn (Action $action): bool => $action(['item' => $itemKey])->isVisible(),
);
$cloneAction = $cloneAction(['item' => $itemKey]);
$cloneActionIsVisible = $isCloneable && $cloneAction->isVisible();
$deleteAction = $deleteAction(['item' => $itemKey]);
$deleteActionIsVisible = $isDeletable && $deleteAction->isVisible();
$moveDownAction = $moveDownAction(['item' => $itemKey])->disabled($loop->last);
$moveDownActionIsVisible = $isReorderableWithButtons && $moveDownAction->isVisible();
$moveUpAction = $moveUpAction(['item' => $itemKey])->disabled($loop->first);
$moveUpActionIsVisible = $isReorderableWithButtons && $moveUpAction->isVisible();
$reorderActionIsVisible = $isReorderableWithDragAndDrop && $reorderAction->isVisible();
$hasItemHeader = $hasItemHeaders && ($reorderActionIsVisible || $moveUpActionIsVisible || $moveDownActionIsVisible || filled($itemLabel) || $cloneActionIsVisible || $deleteActionIsVisible || $isCollapsible || $visibleExtraItemActions);
@endphp
<li
wire:ignore.self
wire:key="{{ $item->getLivewireKey() }}.item"
x-data="{
isCollapsed: @js($isCollapsed($item)),
}"
x-on:repeater-expand.window="$event.detail === '{{ $statePath }}' && (isCollapsed = false)"
x-on:repeater-collapse.window="$event.detail === '{{ $statePath }}' && (isCollapsed = true)"
x-on:expand="isCollapsed = false"
x-sortable-item="{{ $itemKey }}"
@class([
'fi-fo-repeater-item',
'fi-fo-repeater-item-has-header' => $hasItemHeader,
])
x-bind:class="{ 'fi-collapsed': isCollapsed }"
>
@if ($hasItemHeader)
<div
@if ($isCollapsible)
x-on:click.stop="isCollapsed = !isCollapsed"
@endif
class="fi-fo-repeater-item-header"
>
@if ($reorderActionIsVisible || $moveUpActionIsVisible || $moveDownActionIsVisible)
<ul
class="fi-fo-repeater-item-header-start-actions"
>
@if ($reorderActionIsVisible)
<li x-on:click.stop>
{{ $reorderAction->extraAttributes(['x-sortable-handle' => true], merge: true) }}
</li>
@endif
@if ($moveUpActionIsVisible || $moveDownActionIsVisible)
<li x-on:click.stop>
{{ $moveUpAction }}
</li>
<li x-on:click.stop>
{{ $moveDownAction }}
</li>
@endif
</ul>
@endif
@if (filled($itemLabel))
<{{ $itemLabelHeadingTag }}
@class([
'fi-fo-repeater-item-header-label',
'fi-truncated' => $isItemLabelTruncated,
])
>
{{ $itemLabel }}
@if ($hasItemNumbers)
{{ $loop->iteration }}
@endif
</{{ $itemLabelHeadingTag }}>
@endif
@if ($cloneActionIsVisible || $deleteActionIsVisible || $isCollapsible || $visibleExtraItemActions)
<ul
class="fi-fo-repeater-item-header-end-actions"
>
@foreach ($visibleExtraItemActions as $extraItemAction)
<li x-on:click.stop>
{{ $extraItemAction(['item' => $itemKey]) }}
</li>
@endforeach
@if ($cloneActionIsVisible)
<li x-on:click.stop>
{{ $cloneAction }}
</li>
@endif
@if ($deleteActionIsVisible)
<li x-on:click.stop>
{{ $deleteAction }}
</li>
@endif
@if ($isCollapsible)
<li
class="fi-fo-repeater-item-header-collapsible-actions"
x-on:click.stop="isCollapsed = !isCollapsed"
>
<div
class="fi-fo-repeater-item-header-collapse-action"
>
{{ $getAction('collapse') }}
</div>
<div
class="fi-fo-repeater-item-header-expand-action"
>
{{ $getAction('expand') }}
</div>
</li>
@endif
</ul>
@endif
</div>
@endif
<div
x-show="! isCollapsed"
class="fi-fo-repeater-item-content"
>
{{ $item }}
</div>
</li>
@if (! $loop->last)
@if ($isAddable && $addBetweenAction(['afterItem' => $itemKey])->isVisible())
<li class="fi-fo-repeater-add-between-items-ctn">
<div class="fi-fo-repeater-add-between-items">
{{ $addBetweenAction(['afterItem' => $itemKey]) }}
</div>
</li>
@elseif (filled($labelBetweenItems))
<li class="fi-fo-repeater-label-between-items-ctn">
<div
class="fi-fo-repeater-label-between-items-divider-before"
></div>
<span
class="fi-fo-repeater-label-between-items"
>
{{ $labelBetweenItems }}
</span>
<div
class="fi-fo-repeater-label-between-items-divider-after"
></div>
</li>
@endif
@endif
@endforeach
</ul>
@endif
@if ($isAddable && $addAction->isVisible())
<div
@class([
'fi-fo-repeater-add',
($addActionAlignment instanceof Alignment) ? ('fi-align-' . $addActionAlignment->value) : $addActionAlignment,
])
>
{{ $addAction }}
</div>
@endif
</div>
</x-dynamic-component>

View File

@@ -0,0 +1,129 @@
@php
use Filament\Actions\Action;
use Filament\Support\Enums\Alignment;
use Illuminate\View\ComponentAttributeBag;
$fieldWrapperView = $getFieldWrapperView();
$items = $getItems();
$addAction = $getAction($getAddActionName());
$addActionAlignment = $getAddActionAlignment();
$cloneAction = $getAction($getCloneActionName());
$deleteAction = $getAction($getDeleteActionName());
$moveDownAction = $getAction($getMoveDownActionName());
$moveUpAction = $getAction($getMoveUpActionName());
$reorderAction = $getAction($getReorderActionName());
$extraItemActions = $getExtraItemActions();
$isAddable = $isAddable();
$isCloneable = $isCloneable();
$isDeletable = $isDeletable();
$isReorderableWithButtons = $isReorderableWithButtons();
$isReorderableWithDragAndDrop = $isReorderableWithDragAndDrop();
$key = $getKey();
$statePath = $getStatePath();
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
{{
$attributes
->merge($getExtraAttributes(), escape: false)
->class(['fi-fo-simple-repeater'])
}}
>
@if (count($items))
<ul
x-sortable
{{
(new ComponentAttributeBag)
->grid($getGridColumns())
->merge([
'data-sortable-animation-duration' => $getReorderAnimationDuration(),
'x-on:end.stop' => '$event.oldDraggableIndex !== $event.newDraggableIndex && $wire.mountAction(\'reorder\', { items: $event.target.sortable.toArray() }, { schemaComponent: \'' . $key . '\' })',
], escape: false)
->class(['fi-fo-simple-repeater-items'])
}}
>
@foreach ($items as $itemKey => $item)
@php
$visibleExtraItemActions = array_filter(
$extraItemActions,
fn (Action $action): bool => $action(['item' => $itemKey])->isVisible(),
);
$cloneAction = $cloneAction(['item' => $itemKey]);
$cloneActionIsVisible = $isCloneable && $cloneAction->isVisible();
$deleteAction = $deleteAction(['item' => $itemKey]);
$deleteActionIsVisible = $isDeletable && $deleteAction->isVisible();
$moveDownAction = $moveDownAction(['item' => $itemKey])->disabled($loop->last);
$moveDownActionIsVisible = $isReorderableWithButtons && $moveDownAction->isVisible();
$moveUpAction = $moveUpAction(['item' => $itemKey])->disabled($loop->first);
$moveUpActionIsVisible = $isReorderableWithButtons && $moveUpAction->isVisible();
$reorderActionIsVisible = $isReorderableWithDragAndDrop && $reorderAction->isVisible();
@endphp
<li
wire:key="{{ $item->getLivewireKey() }}.item"
x-sortable-item="{{ $itemKey }}"
class="fi-fo-simple-repeater-item"
>
<div class="fi-fo-simple-repeater-item-content">
{{ $item }}
</div>
@if ($reorderActionIsVisible || $moveUpActionIsVisible || $moveDownActionIsVisible || $cloneActionIsVisible || $deleteActionIsVisible || $visibleExtraItemActions)
<ul class="fi-fo-simple-repeater-item-actions">
@if ($reorderActionIsVisible)
<li x-on:click.stop>
{{ $reorderAction->extraAttributes(['x-sortable-handle' => true], merge: true) }}
</li>
@endif
@if ($moveUpActionIsVisible || $moveDownActionIsVisible)
<li x-on:click.stop>
{{ $moveUpAction }}
</li>
<li x-on:click.stop>
{{ $moveDownAction }}
</li>
@endif
@foreach ($visibleExtraItemActions as $extraItemAction)
<li x-on:click.stop>
{{ $extraItemAction(['item' => $itemKey]) }}
</li>
@endforeach
@if ($cloneActionIsVisible)
<li x-on:click.stop>
{{ $cloneAction }}
</li>
@endif
@if ($deleteActionIsVisible)
<li x-on:click.stop>
{{ $deleteAction }}
</li>
@endif
</ul>
@endif
</li>
@endforeach
</ul>
@endif
@if ($isAddable && $addAction->isVisible())
<div
@class([
'fi-fo-simple-repeater-add',
($addActionAlignment instanceof Alignment) ? ('fi-align-' . $addActionAlignment->value) : $addActionAlignment,
])
>
{{ $addAction }}
</div>
@endif
</div>
</x-dynamic-component>

View File

@@ -0,0 +1,231 @@
@php
use Filament\Actions\Action;
use Filament\Actions\ActionGroup;
use Filament\Support\Enums\Alignment;
use Illuminate\Support\Js;
use Illuminate\View\ComponentAttributeBag;
$fieldWrapperView = $getFieldWrapperView();
$items = $getItems();
$addAction = $getAction($getAddActionName());
$addActionAlignment = $getAddActionAlignment();
$addBetweenAction = $getAction($getAddBetweenActionName());
$cloneAction = $getAction($getCloneActionName());
$deleteAction = $getAction($getDeleteActionName());
$moveDownAction = $getAction($getMoveDownActionName());
$moveUpAction = $getAction($getMoveUpActionName());
$reorderAction = $getAction($getReorderActionName());
$extraItemActions = $getExtraItemActions();
$isAddable = $isAddable();
$isCloneable = $isCloneable();
$isDeletable = $isDeletable();
$isReorderableWithButtons = $isReorderableWithButtons();
$isReorderableWithDragAndDrop = $isReorderableWithDragAndDrop();
$key = $getKey();
$statePath = $getStatePath();
$tableColumns = $getTableColumns();
$isCompact = $isCompact();
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
{{ $attributes
->merge($getExtraAttributes(), escape: false)
->class([
'fi-fo-table-repeater',
'fi-compact' => $isCompact,
]) }}
>
@if (count($items))
<table>
<thead>
<tr>
@if ((count($items) > 1) && ($isReorderableWithButtons || $isReorderableWithDragAndDrop))
<th
class="fi-fo-table-repeater-empty-header-cell"
></th>
@endif
@foreach ($tableColumns as $column)
<th
@class([
'fi-wrapped' => $column->canHeaderWrap(),
(($columnAlignment = $column->getAlignment()) instanceof Alignment) ? ('fi-align-' . $columnAlignment->value) : $columnAlignment,
])
@style([
('width: ' . ($columnWidth = $column->getWidth())) => filled($columnWidth),
])
>
@if (! $column->isHeaderLabelHidden())
{{ $column->getLabel() }}@if ($column->isMarkedAsRequired())<sup class="fi-fo-table-repeater-header-required-mark">*</sup>
@endif
@else
<span class="fi-sr-only">
{{ $column->getLabel() }}
</span>
@endif
</th>
@endforeach
@if (count($extraItemActions) || $isCloneable || $isDeletable)
<th
class="fi-fo-table-repeater-empty-header-cell"
></th>
@endif
</tr>
</thead>
<tbody
x-sortable
{{ (new ComponentAttributeBag)
->merge([
'data-sortable-animation-duration' => $getReorderAnimationDuration(),
'x-on:end.stop' => '$event.oldDraggableIndex !== $event.newDraggableIndex && $wire.mountAction(\'reorder\', { items: $event.target.sortable.toArray() }, { schemaComponent: \'' . $key . '\' })',
], escape: false) }}
>
@foreach ($items as $itemKey => $item)
@php
$visibleExtraItemActions = array_filter(
$extraItemActions,
fn (Action $action): bool => $action(['item' => $itemKey])->isVisible(),
);
$cloneAction = $cloneAction(['item' => $itemKey]);
$cloneActionIsVisible = $isCloneable && $cloneAction->isVisible();
$deleteAction = $deleteAction(['item' => $itemKey]);
$deleteActionIsVisible = $isDeletable && $deleteAction->isVisible();
$moveDownAction = $moveDownAction(['item' => $itemKey])->disabled($loop->last);
$moveDownActionIsVisible = $isReorderableWithButtons && $moveDownAction->isVisible();
$moveUpAction = $moveUpAction(['item' => $itemKey])->disabled($loop->first);
$moveUpActionIsVisible = $isReorderableWithButtons && $moveUpAction->isVisible();
$reorderActionIsVisible = $isReorderableWithDragAndDrop && $reorderAction->isVisible();
$itemStatePath = $item->getStatePath();
@endphp
<tr
wire:key="{{ $item->getLivewireKey() }}.item"
x-sortable-item="{{ $itemKey }}"
>
@if ((count($items) > 1) && ($isReorderableWithButtons || $isReorderableWithDragAndDrop))
<td>
@if ($reorderActionIsVisible || $moveUpActionIsVisible || $moveDownActionIsVisible)
<div
class="fi-fo-table-repeater-actions"
>
@if ($reorderActionIsVisible)
<div x-on:click.stop>
{{ $reorderAction->extraAttributes(['x-sortable-handle' => true], merge: true) }}
</div>
@endif
@if ($moveUpActionIsVisible || $moveDownActionIsVisible)
<div x-on:click.stop>
{{ $moveUpAction }}
</div>
<div x-on:click.stop>
{{ $moveDownAction }}
</div>
@endif
</div>
@endif
</td>
@endif
@php
$counter = 0
@endphp
@foreach ($item->getComponents(withHidden: true) as $schemaComponent)
@php
throw_unless(
$schemaComponent instanceof \Filament\Schemas\Components\Component,
new \Exception('Table repeaters must only contain schema components, but [' . $schemaComponent::class . '] was used.'),
);
@endphp
@if (count($tableColumns) > $counter)
@if ($schemaComponent instanceof \Filament\Forms\Components\Hidden)
{{ $schemaComponent }}
@else
@php
$counter++
@endphp
@if ($schemaComponent->isVisible())
@php
$schemaComponentStatePath = $schemaComponent->getStatePath();
@endphp
<td
x-data="filamentSchemaComponent({
path: @js($schemaComponentStatePath),
containerPath: @js($itemStatePath),
$wire,
})"
@if ($afterStateUpdatedJs = $schemaComponent->getAfterStateUpdatedJs())
x-init="{{ implode(';', array_map(
fn (string $js): string => '$wire.watch(' . Js::from($schemaComponentStatePath) . ', ($state, $old) => isStateChanged($state, $old) && eval(' . Js::from($js) . '))',
$afterStateUpdatedJs,
)) }}"
@endif
>
{{ $schemaComponent }}
</td>
@else
<td class="fi-hidden"></td>
@endif
@endif
@endif
@endforeach
@if (count($extraItemActions) || $isCloneable || $isDeletable)
<td>
@if ($visibleExtraItemActions || $cloneActionIsVisible || $deleteActionIsVisible)
<div
class="fi-fo-table-repeater-actions"
>
@foreach ($visibleExtraItemActions as $extraItemAction)
<div x-on:click.stop>
{{ $extraItemAction(['item' => $itemKey]) }}
</div>
@endforeach
@if ($cloneActionIsVisible)
<div x-on:click.stop>
{{ $cloneAction }}
</div>
@endif
@if ($deleteActionIsVisible)
<div x-on:click.stop>
{{ $deleteAction }}
</div>
@endif
</div>
@endif
</td>
@endif
</tr>
@endforeach
</tbody>
</table>
@endif
@if ($isAddable && $addAction->isVisible())
<div
@class([
'fi-fo-table-repeater-add',
($addActionAlignment instanceof Alignment) ? ('fi-align-' . $addActionAlignment->value) : $addActionAlignment,
])
>
{{ $addAction }}
</div>
@endif
</div>
</x-dynamic-component>

View File

@@ -0,0 +1,227 @@
@php
$customBlocks = $getCustomBlocks();
$extraAttributeBag = $getExtraAttributeBag();
$fieldWrapperView = $getFieldWrapperView();
$id = $getId();
$isDisabled = $isDisabled();
$livewireKey = $getLivewireKey();
$key = $getKey();
$mergeTags = $getMergeTags();
$statePath = $getStatePath();
$tools = $getTools();
$toolbarButtons = $getToolbarButtons();
$floatingToolbars = $getFloatingToolbars();
$fileAttachmentsMaxSize = $getFileAttachmentsMaxSize();
$fileAttachmentsAcceptedFileTypes = $getFileAttachmentsAcceptedFileTypes();
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<x-filament::input.wrapper
:valid="! $errors->has($statePath)"
x-cloak
:attributes="
\Filament\Support\prepare_inherited_attributes($extraAttributeBag)
->class(['fi-fo-rich-editor'])
"
>
<div
x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('rich-editor', 'filament/forms') }}"
x-data="richEditorFormComponent({
acceptedFileTypes: @js($fileAttachmentsAcceptedFileTypes),
acceptedFileTypesValidationMessage: @js($fileAttachmentsAcceptedFileTypes ? __('filament-forms::components.rich_editor.file_attachments_accepted_file_types_message', ['values' => implode(', ', $fileAttachmentsAcceptedFileTypes)]) : null),
activePanel: @js($getActivePanel()),
deleteCustomBlockButtonIconHtml: @js(\Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::Trash, alias: \Filament\Forms\View\FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_CUSTOM_BLOCK_DELETE_BUTTON)->toHtml()),
editCustomBlockButtonIconHtml: @js(\Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::PencilSquare, alias: \Filament\Forms\View\FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_CUSTOM_BLOCK_EDIT_BUTTON)->toHtml()),
extensions: @js($getTipTapJsExtensions()),
key: @js($key),
isDisabled: @js($isDisabled),
isLiveDebounced: @js($isLiveDebounced()),
isLiveOnBlur: @js($isLiveOnBlur()),
liveDebounce: @js($getNormalizedLiveDebounce()),
livewireId: @js($this->getId()),
maxFileSize: @js($fileAttachmentsMaxSize),
maxFileSizeValidationMessage: @js($fileAttachmentsMaxSize ? trans_choice('filament-forms::components.rich_editor.file_attachments_max_size_message', $fileAttachmentsMaxSize, ['max' => $fileAttachmentsMaxSize]) : null),
mergeTags: @js($mergeTags),
noMergeTagSearchResultsMessage: @js($getNoMergeTagSearchResultsMessage()),
placeholder: @js($getPlaceholder()),
state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')", isOptimisticallyLive: false) }},
statePath: @js($statePath),
textColors: @js($getTextColorsForJs()),
uploadingFileMessage: @js($getUploadingFileMessage()),
floatingToolbars: @js($floatingToolbars),
})"
x-bind:class="{
'fi-fo-rich-editor-uploading-file': isUploadingFile,
}"
wire:ignore
wire:key="{{ $livewireKey }}.{{
substr(md5(serialize([
$isDisabled,
])), 0, 64)
}}"
>
@if ((! $isDisabled) && filled($toolbarButtons))
<div class="fi-fo-rich-editor-toolbar">
@foreach ($toolbarButtons as $button => $buttonGroup)
<div class="fi-fo-rich-editor-toolbar-group">
@foreach ($buttonGroup as $button)
{{ $tools[$button] ?? throw new LogicException("Toolbar button [{$button}] cannot be found.") }}
@endforeach
</div>
@endforeach
</div>
@endif
<div
x-show="isUploadingFile"
x-cloak
class="fi-fo-rich-editor-uploading-file-message"
>
{{ \Filament\Support\generate_loading_indicator_html() }}
<span>
{{ $getUploadingFileMessage() }}
</span>
</div>
<div
x-show="! isUploadingFile && fileValidationMessage"
x-cloak
class="fi-fo-rich-editor-file-validation-message"
>
<span
x-text="fileValidationMessage"
x-show="! isUploadingFile && fileValidationMessage"
></span>
</div>
<div
{{ $getExtraInputAttributeBag()->class(['fi-fo-rich-editor-main']) }}
>
<div class="fi-fo-rich-editor-content fi-prose" x-ref="editor">
@foreach ($floatingToolbars as $nodeName => $buttons)
<div
x-ref="floatingToolbar::{{ $nodeName }}"
class="fi-fo-rich-editor-floating-toolbar fi-not-prose"
>
@foreach ($buttons as $button)
{{ $tools[$button] }}
@endforeach
</div>
@endforeach
</div>
@if (! $isDisabled)
<div
x-show="isPanelActive()"
x-cloak
class="fi-fo-rich-editor-panels"
>
<div
x-show="isPanelActive('customBlocks')"
x-cloak
class="fi-fo-rich-editor-panel"
>
<div class="fi-fo-rich-editor-panel-header">
<p class="fi-fo-rich-editor-panel-heading">
{{ __('filament-forms::components.rich_editor.tools.custom_blocks') }}
</p>
<div
class="fi-fo-rich-editor-panel-close-btn-ctn"
>
<button
type="button"
x-on:click="togglePanel()"
class="fi-icon-btn"
>
{{ \Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::XMark, alias: \Filament\Forms\View\FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_CUSTOM_BLOCKS_CLOSE_BUTTON) }}
</button>
</div>
</div>
<div class="fi-fo-rich-editor-custom-blocks-list">
@foreach ($customBlocks as $block)
@php
$blockId = $block::getId();
@endphp
<button
draggable="true"
type="button"
x-data="{ isLoading: false }"
x-on:click="
isLoading = true
$wire.mountAction(
'customBlock',
{ editorSelection, id: @js($blockId), mode: 'insert' },
{ schemaComponent: @js($key) },
)
"
x-on:dragstart="$event.dataTransfer.setData('customBlock', @js($blockId))"
x-on:open-modal.window="isLoading = false"
x-on:run-rich-editor-commands.window="isLoading = false"
class="fi-fo-rich-editor-custom-block-btn"
>
{{
\Filament\Support\generate_loading_indicator_html((new \Illuminate\View\ComponentAttributeBag([
'x-show' => 'isLoading',
])))
}}
{{ $block::getLabel() }}
</button>
@endforeach
</div>
</div>
<div
x-show="isPanelActive('mergeTags')"
x-cloak
class="fi-fo-rich-editor-panel"
>
<div class="fi-fo-rich-editor-panel-header">
<p class="fi-fo-rich-editor-panel-heading">
{{ __('filament-forms::components.rich_editor.tools.merge_tags') }}
</p>
<div
class="fi-fo-rich-editor-panel-close-btn-ctn"
>
<button
type="button"
x-on:click="togglePanel()"
class="fi-icon-btn"
>
{{ \Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::XMark, alias: \Filament\Forms\View\FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_MERGE_TAGS_CLOSE_BUTTON) }}
</button>
</div>
</div>
<div class="fi-fo-rich-editor-merge-tags-list">
@foreach ($mergeTags as $tagId => $tagLabel)
<button
draggable="true"
type="button"
x-on:click="insertMergeTag(@js($tagId))"
x-on:dragstart="$event.dataTransfer.setData('mergeTag', @js($tagId))"
class="fi-fo-rich-editor-merge-tag-btn"
>
<span
data-type="mergeTag"
data-id="{{ $tagId }}"
>
{{ $tagLabel }}
</span>
</button>
@endforeach
</div>
</div>
</div>
@endif
</div>
</div>
</x-filament::input.wrapper>
</x-dynamic-component>

View File

@@ -0,0 +1,200 @@
@php
$fieldWrapperView = $getFieldWrapperView();
$extraInputAttributeBag = $getExtraInputAttributeBag();
$canSelectPlaceholder = $canSelectPlaceholder();
$isAutofocused = $isAutofocused();
$isDisabled = $isDisabled();
$isMultiple = $isMultiple();
$isSearchable = $isSearchable();
$canOptionLabelsWrap = $canOptionLabelsWrap();
$isRequired = $isRequired();
$isConcealed = $isConcealed();
$isHtmlAllowed = $isHtmlAllowed();
$isNative = (! ($isSearchable || $isMultiple) && $isNative());
$isPrefixInline = $isPrefixInline();
$isSuffixInline = $isSuffixInline();
$key = $getKey();
$id = $getId();
$prefixActions = $getPrefixActions();
$prefixIcon = $getPrefixIcon();
$prefixIconColor = $getPrefixIconColor();
$prefixLabel = $getPrefixLabel();
$suffixActions = $getSuffixActions();
$suffixIcon = $getSuffixIcon();
$suffixIconColor = $getSuffixIconColor();
$suffixLabel = $getSuffixLabel();
$statePath = $getStatePath();
$state = $getState();
$livewireKey = $getLivewireKey();
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
class="fi-fo-select-wrp"
>
<x-filament::input.wrapper
:disabled="$isDisabled"
:inline-prefix="$isPrefixInline"
:inline-suffix="$isSuffixInline"
:prefix="$prefixLabel"
:prefix-actions="$prefixActions"
:prefix-icon="$prefixIcon"
:prefix-icon-color="$prefixIconColor"
:suffix="$suffixLabel"
:suffix-actions="$suffixActions"
:suffix-icon="$suffixIcon"
:suffix-icon-color="$suffixIconColor"
:valid="! $errors->has($statePath)"
:attributes="
\Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())
->class([
'fi-fo-select',
'fi-fo-select-has-inline-prefix' => $isPrefixInline && (count($prefixActions) || $prefixIcon || filled($prefixLabel)),
'fi-fo-select-native' => $isNative,
])
"
>
@if ($isNative)
<select
{{
$extraInputAttributeBag
->merge([
'autofocus' => $isAutofocused,
'disabled' => $isDisabled,
'id' => $id,
'required' => $isRequired && (! $isConcealed),
$applyStateBindingModifiers('wire:model') => $statePath,
], escape: false)
->class([
'fi-select-input',
'fi-select-input-has-inline-prefix' => $isPrefixInline && (count($prefixActions) || $prefixIcon || filled($prefixLabel)),
])
}}
>
@if ($canSelectPlaceholder)
<option value="">
@if (! $isDisabled)
{{ $getPlaceholder() }}
@endif
</option>
@endif
@foreach ($getOptions() as $value => $label)
@if (is_array($label))
<optgroup label="{{ $value }}">
@foreach ($label as $groupedValue => $groupedLabel)
<option
@disabled($isOptionDisabled($groupedValue, $groupedLabel))
value="{{ $groupedValue }}"
>
@if ($isHtmlAllowed)
{!! $groupedLabel !!}
@else
{{ $groupedLabel }}
@endif
</option>
@endforeach
</optgroup>
@else
<option
@disabled($isOptionDisabled($value, $label))
value="{{ $value }}"
>
@if ($isHtmlAllowed)
{!! $label !!}
@else
{{ $label }}
@endif
</option>
@endif
@endforeach
</select>
@else
<div
class="fi-hidden"
x-data="{
isDisabled: @js($isDisabled),
init() {
const container = $el.nextElementSibling
container.dispatchEvent(
new CustomEvent('set-select-property', {
detail: { isDisabled: this.isDisabled },
}),
)
},
}"
></div>
<div
x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('select', 'filament/forms') }}"
x-data="selectFormComponent({
canOptionLabelsWrap: @js($canOptionLabelsWrap),
canSelectPlaceholder: @js($canSelectPlaceholder),
isHtmlAllowed: @js($isHtmlAllowed),
getOptionLabelUsing: async () => {
return await $wire.callSchemaComponentMethod(@js($key), 'getOptionLabel')
},
getOptionLabelsUsing: async () => {
return await $wire.callSchemaComponentMethod(
@js($key),
'getOptionLabelsForJs',
)
},
getOptionsUsing: async () => {
return await $wire.callSchemaComponentMethod(
@js($key),
'getOptionsForJs',
)
},
getSearchResultsUsing: async (search) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'getSearchResultsForJs',
{ search },
)
},
initialOptionLabel: @js((blank($state) || $isMultiple) ? null : $getOptionLabel()),
initialOptionLabels: @js((filled($state) && $isMultiple) ? $getOptionLabelsForJs() : []),
initialState: @js($state),
isAutofocused: @js($isAutofocused),
isDisabled: @js($isDisabled),
isMultiple: @js($isMultiple),
isSearchable: @js($isSearchable),
livewireId: @js($this->getId()),
hasDynamicOptions: @js($hasDynamicOptions()),
hasDynamicSearchResults: @js($hasDynamicSearchResults()),
loadingMessage: @js($getLoadingMessage()),
maxItems: @js($getMaxItems()),
maxItemsMessage: @js($getMaxItemsMessage()),
noSearchResultsMessage: @js($getNoSearchResultsMessage()),
options: @js($getOptionsForJs()),
optionsLimit: @js($getOptionsLimit()),
placeholder: @js($getPlaceholder()),
position: @js($getPosition()),
searchDebounce: @js($getSearchDebounce()),
searchingMessage: @js($getSearchingMessage()),
searchPrompt: @js($getSearchPrompt()),
searchableOptionFields: @js($getSearchableOptionFields()),
state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
statePath: @js($statePath),
})"
wire:ignore
wire:key="{{ $livewireKey }}.{{
substr(md5(serialize([
$isDisabled,
])), 0, 64)
}}"
x-on:keydown.esc="select.dropdown.isActive && $event.stopPropagation()"
x-on:set-select-property="$event.detail.isDisabled ? select.disable() : select.enable()"
{{
$attributes
->merge($getExtraAlpineAttributes(), escape: false)
->class(['fi-select-input'])
}}
>
<div x-ref="select"></div>
</div>
@endif
</x-filament::input.wrapper>
</x-dynamic-component>

View File

@@ -0,0 +1,61 @@
@php
$fieldWrapperView = $getFieldWrapperView();
$isVertical = $isVertical();
$pipsMode = $getPipsMode();
$livewireKey = $getLivewireKey();
$isDisabled = $isDisabled();
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
:inline-label-vertical-alignment="\Filament\Support\Enums\VerticalAlignment::Center"
>
<div
x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('slider', 'filament/forms') }}"
x-data="sliderFormComponent({
arePipsStepped: @js($arePipsStepped()),
behavior: @js($getBehaviorForJs()),
decimalPlaces: @js($getDecimalPlaces()),
fillTrack: @js($getFillTrack()),
isDisabled: @js($isDisabled),
isRtl: @js($isRtl()),
isVertical: @js($isVertical),
maxDifference: @js($getMaxDifference()),
minDifference: @js($getMinDifference()),
maxValue: @js($getMaxValue()),
minValue: @js($getMinValue()),
nonLinearPoints: @js($getNonLinearPoints()),
pipsDensity: @js($getPipsDensity()),
pipsFilter: @js($getPipsFilterForJs()),
pipsFormatter: @js($getPipsFormatterForJs()),
pipsMode: @js($pipsMode),
pipsValues: @js($getPipsValues()),
rangePadding: @js($getRangePadding()),
state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }},
step: @js($getStep()),
tooltips: @js($getTooltipsForJs()),
})"
wire:ignore
wire:key="{{ $livewireKey }}.{{
substr(md5(serialize([
$isDisabled,
])), 0, 64)
}}"
{{
$attributes
->merge([
'id' => $getId(),
], escape: false)
->merge($getExtraAttributes(), escape: false)
->merge($getExtraAlpineAttributes(), escape: false)
->class([
'fi-fo-slider',
'fi-fo-slider-has-pips' => $pipsMode,
'fi-fo-slider-has-tooltips' => $hasTooltips(),
'fi-fo-slider-vertical' => $isVertical,
])
}}
></div>
</x-dynamic-component>

View File

@@ -0,0 +1,30 @@
@php
use Filament\Forms\Components\TableSelect\Livewire\TableSelectLivewireComponent;
$fieldWrapperView = $getFieldWrapperView();
$extraAttributes = $getExtraAttributes();
$id = $getId();
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
{{
$attributes
->merge([
'id' => $id,
], escape: false)
->merge($extraAttributes, escape: false)
}}
>
@livewire(TableSelectLivewireComponent::class, [
'isDisabled' => $isDisabled(),
'maxSelectableRecords' => $getMaxItems(),
'model' => $getModel(),
'record' => $getRecord(),
'relationshipName' => $getRelationshipName(),
'tableConfiguration' => base64_encode($getTableConfiguration()),
'tableArguments' => $getTableArguments(),
$applyStateBindingModifiers('wire:model') => $getStatePath(),
], key($getLivewireKey()))
</div>
</x-dynamic-component>

View File

@@ -0,0 +1,131 @@
@php
$fieldWrapperView = $getFieldWrapperView();
$extraAttributes = $getExtraAttributes();
$extraInputAttributeBag = $getExtraInputAttributeBag();
$color = $getColor() ?? 'primary';
$id = $getId();
$isAutofocused = $isAutofocused();
$isDisabled = $isDisabled();
$isPrefixInline = $isPrefixInline();
$isReorderable = (! $isDisabled) && $isReorderable();
$isSuffixInline = $isSuffixInline();
$placeholder = $getPlaceholder();
$prefixActions = $getPrefixActions();
$prefixIcon = $getPrefixIcon();
$prefixIconColor = $getPrefixIconColor();
$prefixLabel = $getPrefixLabel();
$statePath = $getStatePath();
$suffixActions = $getSuffixActions();
$suffixIcon = $getSuffixIcon();
$suffixIconColor = $getSuffixIconColor();
$suffixLabel = $getSuffixLabel();
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
class="fi-fo-tags-input-wrp"
>
<x-filament::input.wrapper
:disabled="$isDisabled"
:inline-prefix="$isPrefixInline"
:inline-suffix="$isSuffixInline"
:prefix="$prefixLabel"
:prefix-actions="$prefixActions"
:prefix-icon="$prefixIcon"
:prefix-icon-color="$prefixIconColor"
:suffix="$suffixLabel"
:suffix-actions="$suffixActions"
:suffix-icon="$suffixIcon"
:suffix-icon-color="$suffixIconColor"
:valid="! $errors->has($statePath)"
:attributes="
\Filament\Support\prepare_inherited_attributes($attributes)
->merge($extraAttributes, escape: false)
->class([
'fi-fo-tags-input',
'fi-disabled' => $isDisabled,
])
"
>
<div
x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('tags-input', 'filament/forms') }}"
x-data="tagsInputFormComponent({
state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
splitKeys: @js($getSplitKeys()),
})"
{{ $getExtraAlpineAttributeBag() }}
>
<input
{{
$extraInputAttributeBag
->merge([
'autocomplete' => 'off',
'autofocus' => $isAutofocused,
'disabled' => $isDisabled,
'id' => $id,
'list' => $id . '-suggestions',
'placeholder' => filled($placeholder) ? e($placeholder) : null,
'type' => 'text',
'x-bind' => 'input',
], escape: false)
->class([
'fi-input',
'fi-input-has-inline-prefix' => $isPrefixInline && (count($prefixActions) || $prefixIcon || filled($prefixLabel)),
'fi-input-has-inline-suffix' => $isSuffixInline && (count($suffixActions) || $suffixIcon || filled($suffixLabel)),
])
}}
/>
<datalist id="{{ $id }}-suggestions">
@foreach ($getSuggestions() as $suggestion)
<template
x-bind:key="@js($suggestion)"
x-if="! (state?.includes(@js($suggestion)) ?? true)"
>
<option value="{{ $suggestion }}" />
</template>
@endforeach
</datalist>
<div wire:ignore>
<template x-cloak x-if="state?.length">
<div
@if ($isReorderable)
x-on:end.stop="reorderTags($event)"
x-sortable
data-sortable-animation-duration="{{ $getReorderAnimationDuration() }}"
@endif
class="fi-fo-tags-input-tags-ctn"
>
<template
x-for="(tag, index) in state"
x-bind:key="`${tag}-${index}`"
>
<x-filament::badge
:color="$color"
:x-bind:x-sortable-item="$isReorderable ? 'index' : null"
:x-sortable-handle="$isReorderable ? '' : null"
@class([
'fi-reorderable' => $isReorderable,
])
>
{{ $getTagPrefix() }}
<span x-text="tag"></span>
{{ $getTagSuffix() }}
<x-slot
name="deleteButton"
x-on:click.stop="deleteTag(tag)"
></x-slot>
</x-filament::badge>
</template>
</div>
</template>
</div>
</div>
</x-filament::input.wrapper>
</x-dynamic-component>

View File

@@ -0,0 +1,115 @@
@php
use Filament\Forms\Components\TextInput\Actions\HidePasswordAction;
use Filament\Forms\Components\TextInput\Actions\ShowPasswordAction;
$fieldWrapperView = $getFieldWrapperView();
$datalistOptions = $getDatalistOptions();
$extraAlpineAttributes = $getExtraAlpineAttributes();
$extraAttributeBag = $getExtraAttributeBag();
$id = $getId();
$isConcealed = $isConcealed();
$isDisabled = $isDisabled();
$isPasswordRevealable = $isPasswordRevealable();
$isPrefixInline = $isPrefixInline();
$isSuffixInline = $isSuffixInline();
$mask = $getMask();
$prefixActions = $getPrefixActions();
$prefixIcon = $getPrefixIcon();
$prefixIconColor = $getPrefixIconColor();
$prefixLabel = $getPrefixLabel();
$suffixActions = $getSuffixActions();
$suffixIcon = $getSuffixIcon();
$suffixIconColor = $getSuffixIconColor();
$suffixLabel = $getSuffixLabel();
$statePath = $getStatePath();
$placeholder = $getPlaceholder();
if ($isPasswordRevealable) {
$xData = '{ isPasswordRevealed: false }';
} elseif (count($extraAlpineAttributes) || filled($mask)) {
$xData = '{}';
} else {
$xData = null;
}
if ($isPasswordRevealable) {
$type = null;
} elseif (filled($mask)) {
$type = 'text';
} else {
$type = $getType();
}
$inputAttributes = $getExtraInputAttributeBag()
->merge($extraAlpineAttributes, escape: false)
->merge([
'autocapitalize' => $getAutocapitalize(),
'autocomplete' => $getAutocomplete(),
'autofocus' => $isAutofocused(),
'disabled' => $isDisabled,
'id' => $id,
'inlinePrefix' => $isPrefixInline && (count($prefixActions) || $prefixIcon || filled($prefixLabel)),
'inlineSuffix' => $isSuffixInline && (count($suffixActions) || $suffixIcon || filled($suffixLabel)),
'inputmode' => $getInputMode(),
'list' => $datalistOptions ? $id . '-list' : null,
'max' => (! $isConcealed) ? $getMaxValue() : null,
'maxlength' => (! $isConcealed) ? $getMaxLength() : null,
'min' => (! $isConcealed) ? $getMinValue() : null,
'minlength' => (! $isConcealed) ? $getMinLength() : null,
'placeholder' => filled($placeholder) ? e($placeholder) : null,
'readonly' => $isReadOnly(),
'required' => $isRequired() && (! $isConcealed),
'step' => $getStep(),
'type' => $type,
$applyStateBindingModifiers('wire:model') => $statePath,
'x-bind:type' => $isPasswordRevealable ? 'isPasswordRevealed ? \'text\' : \'password\'' : null,
'x-mask' . ($mask instanceof \Filament\Support\RawJs ? ':dynamic' : '') => filled($mask) ? $mask : null,
], escape: false)
->class([
'fi-revealable' => $isPasswordRevealable,
]);
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
:inline-label-vertical-alignment="\Filament\Support\Enums\VerticalAlignment::Center"
>
<x-filament::input.wrapper
:disabled="$isDisabled"
:inline-prefix="$isPrefixInline"
:inline-suffix="$isSuffixInline"
:prefix="$prefixLabel"
:prefix-actions="$prefixActions"
:prefix-icon="$prefixIcon"
:prefix-icon-color="$prefixIconColor"
:suffix="$suffixLabel"
:suffix-actions="$suffixActions"
:suffix-icon="$suffixIcon"
:suffix-icon-color="$suffixIconColor"
:valid="! $errors->has($statePath)"
:x-data="$xData"
:attributes="
\Filament\Support\prepare_inherited_attributes($extraAttributeBag)
->class(['fi-fo-text-input'])
"
>
<input
{{
$inputAttributes->class([
'fi-input',
'fi-input-has-inline-prefix' => $isPrefixInline && (count($prefixActions) || $prefixIcon || filled($prefixLabel)),
'fi-input-has-inline-suffix' => $isSuffixInline && (count($suffixActions) || $suffixIcon || filled($suffixLabel)),
])
}}
/>
</x-filament::input.wrapper>
@if ($datalistOptions)
<datalist id="{{ $id }}-list">
@foreach ($datalistOptions as $option)
<option value="{{ $option }}"></option>
@endforeach
</datalist>
@endif
</x-dynamic-component>

View File

@@ -0,0 +1,71 @@
@php
$fieldWrapperView = $getFieldWrapperView();
$extraAttributeBag = $getExtraAttributeBag();
$isConcealed = $isConcealed();
$isDisabled = $isDisabled();
$rows = $getRows();
$placeholder = $getPlaceholder();
$shouldAutosize = $shouldAutosize();
$placeholder = $getPlaceholder();
$statePath = $getStatePath();
$initialHeight = (($rows ?? 2) * 1.5) + 0.75;
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
class="fi-fo-textarea-wrp"
>
<x-filament::input.wrapper
:disabled="$isDisabled"
:valid="! $errors->has($statePath)"
:attributes="
\Filament\Support\prepare_inherited_attributes($extraAttributeBag)
->class([
'fi-fo-textarea',
'fi-autosizable' => $shouldAutosize,
])
"
>
<div wire:ignore.self style="height: '{{ $initialHeight . 'rem' }}'">
<textarea
x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('textarea', 'filament/forms') }}"
x-data="textareaFormComponent({
initialHeight: @js($initialHeight),
shouldAutosize: @js($shouldAutosize),
state: $wire.$entangle('{{ $statePath }}'),
})"
@if ($shouldAutosize)
x-intersect.once="resize()"
x-on:resize.window="resize()"
@endif
x-model="state"
@if ($isGrammarlyDisabled())
data-gramm="false"
data-gramm_editor="false"
data-enable-grammarly="false"
@endif
{{ $getExtraAlpineAttributeBag() }}
{{
$getExtraInputAttributeBag()
->merge([
'autocomplete' => $getAutocomplete(),
'autofocus' => $isAutofocused(),
'cols' => $getCols(),
'disabled' => $isDisabled,
'id' => $getId(),
'maxlength' => (! $isConcealed) ? $getMaxLength() : null,
'minlength' => (! $isConcealed) ? $getMinLength() : null,
'placeholder' => filled($placeholder) ? e($placeholder) : null,
'readonly' => $isReadOnly(),
'required' => $isRequired() && (! $isConcealed),
'rows' => $rows,
$applyStateBindingModifiers('wire:model') => $statePath,
], escape: false)
}}
></textarea>
</div>
</x-filament::input.wrapper>
</x-dynamic-component>

View File

@@ -0,0 +1,54 @@
@php
$fieldWrapperView = $getFieldWrapperView();
$id = $getId();
$isDisabled = $isDisabled();
$isMultiple = $isMultiple();
$statePath = $getStatePath();
$areButtonLabelsHidden = $areButtonLabelsHidden();
$wireModelAttribute = $applyStateBindingModifiers('wire:model');
$extraInputAttributeBag = $getExtraInputAttributeBag()->class(['fi-fo-toggle-buttons-input']);
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
class="fi-fo-toggle-buttons-wrp"
>
<div
{{ $getExtraAttributeBag()->class(['fi-fo-toggle-buttons fi-btn-group']) }}
>
@foreach ($getOptions() as $value => $label)
@php
$inputId = "{$id}-{$value}";
$shouldOptionBeDisabled = $isDisabled || $isOptionDisabled($value, $label);
$color = $getColor($value);
$icon = $getIcon($value);
@endphp
<input
@disabled($shouldOptionBeDisabled)
id="{{ $inputId }}"
@if (! $isMultiple)
name="{{ $id }}"
@endif
type="{{ $isMultiple ? 'checkbox' : 'radio' }}"
value="{{ $value }}"
wire:loading.attr="disabled"
{{ $wireModelAttribute }}="{{ $statePath }}"
{{ $extraInputAttributeBag }}
/>
<x-filament::button
:color="$color"
:disabled="$shouldOptionBeDisabled"
:for="$inputId"
grouped
:icon="$icon"
:label-sr-only="$areButtonLabelsHidden"
tag="label"
>
{{ $label }}
</x-filament::button>
@endforeach
</div>
</x-dynamic-component>

View File

@@ -0,0 +1,66 @@
@php
use Filament\Support\Enums\GridDirection;
use Illuminate\View\ComponentAttributeBag;
$fieldWrapperView = $getFieldWrapperView();
$gridDirection = $getGridDirection() ?? GridDirection::Column;
$id = $getId();
$isDisabled = $isDisabled();
$isInline = $isInline();
$isMultiple = $isMultiple();
$statePath = $getStatePath();
$areButtonLabelsHidden = $areButtonLabelsHidden();
$wireModelAttribute = $applyStateBindingModifiers('wire:model');
$extraInputAttributeBag = $getExtraInputAttributeBag()->class(['fi-fo-toggle-buttons-input']);
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
class="fi-fo-toggle-buttons-wrp"
>
<div
{{
$getExtraAttributeBag()
->when(! $isInline, fn (ComponentAttributeBag $attributes) => $attributes->grid($getColumns(), $gridDirection))
->class([
'fi-fo-toggle-buttons',
'fi-inline' => $isInline,
])
}}
>
@foreach ($getOptions() as $value => $label)
@php
$inputId = "{$id}-{$value}";
$shouldOptionBeDisabled = $isDisabled || $isOptionDisabled($value, $label);
$color = $getColor($value);
$icon = $getIcon($value);
@endphp
<div class="fi-fo-toggle-buttons-btn-ctn">
<input
@disabled($shouldOptionBeDisabled)
id="{{ $inputId }}"
@if (! $isMultiple)
name="{{ $id }}"
@endif
type="{{ $isMultiple ? 'checkbox' : 'radio' }}"
value="{{ $value }}"
{{ $wireModelAttribute }}="{{ $statePath }}"
{{ $extraInputAttributeBag }}
/>
<x-filament::button
:color="$color"
:disabled="$shouldOptionBeDisabled"
:for="$inputId"
:icon="$icon"
:label-sr-only="$areButtonLabelsHidden"
tag="label"
>
{{ $label }}
</x-filament::button>
</div>
@endforeach
</div>
</x-dynamic-component>

View File

@@ -0,0 +1,42 @@
@php
use Illuminate\View\ComponentAttributeBag;
$fieldWrapperView = $getFieldWrapperView();
$statePath = $getStatePath();
$attributes = (new ComponentAttributeBag)
->merge([
'aria-checked' => 'false',
'autofocus' => $isAutofocused(),
'disabled' => $isDisabled(),
'id' => $getId(),
'offColor' => $getOffColor() ?? 'gray',
'offIcon' => $getOffIcon(),
'onColor' => $getOnColor() ?? 'primary',
'onIcon' => $getOnIcon(),
'state' => '$wire.' . $applyStateBindingModifiers('$entangle(\'' . $statePath . '\')'),
'wire:loading.attr' => 'disabled',
'wire:target' => $statePath,
], escape: false)
->merge($getExtraAttributes(), escape: false)
->merge($getExtraAlpineAttributes(), escape: false)
->class(['fi-fo-toggle']);
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
:inline-label-vertical-alignment="\Filament\Support\Enums\VerticalAlignment::Center"
>
@if ($isInline())
<x-slot name="labelPrefix">
<x-filament::toggle
:attributes="\Filament\Support\prepare_inherited_attributes($attributes)"
/>
</x-slot>
@else
<x-filament::toggle
:attributes="\Filament\Support\prepare_inherited_attributes($attributes)"
/>
@endif
</x-dynamic-component>