phases one of time logged now with log display

This commit is contained in:
Mark Gregory
2026-06-22 12:53:56 +01:00
parent c1a9d0de27
commit 052bae718e
231 changed files with 15113 additions and 12891 deletions
@@ -1,6 +1,6 @@
<div class="d-flex align-items-center" x-data>
<form class="mr-2"
x-on:submit.prevent="
x-on:submit.prevent="
$refs.exportBtn.disabled = true;
var oTable = LaravelDataTables['{{ $tableId }}'];
var baseUrl = oTable.ajax.url() === '' ? window.location.toString() : oTable.ajax.url();
@@ -8,10 +8,10 @@
var url = new URL(baseUrl);
var searchParams = new URLSearchParams(url.search);
searchParams.set('action', 'exportQueue');
searchParams.set('exportType', '{{$fileType}}');
searchParams.set('sheetName', '{{$sheetName}}');
searchParams.set('buttonName', '{{$buttonName}}');
searchParams.set('emailTo', '{{urlencode($emailTo)}}');
searchParams.set('exportType', '{{ $fileType }}');
searchParams.set('sheetName', '{{ $sheetName }}');
searchParams.set('buttonName', '{{ $buttonName }}');
searchParams.set('emailTo', '{{ urlencode($emailTo) }}');
var tableParams = $.param(oTable.ajax.params());
if (tableParams) {
@@ -30,33 +30,30 @@
$wire.exporting = false;
$wire.exportFailed = true;
});
"
>
<button type="submit"
x-ref="exportBtn"
:disabled="$wire.exporting"
class="{{ $class }}"
>{{$buttonName}}
">
<button type="submit" x-ref="exportBtn" :disabled="$wire.exporting"
class="{{ $class }}">{{ $buttonName }}
</button>
</form>
@if($exporting && $emailTo)
@if ($exporting && $emailTo)
<div class="d-inline">Export will be emailed to {{ $emailTo }}.</div>
@endif
@if($exporting && !$exportFinished)
@if ($exporting && !$exportFinished)
<div class="d-inline" wire:poll="updateExportProgress">Exporting...please wait.</div>
@endif
@if($exportFinished && !$exportFailed && !$autoDownload)
<span>Done. Download file <a href="#" class="text-primary" wire:click.prevent="downloadExport">here</a></span>
@if ($exportFinished && !$exportFailed && !$autoDownload)
<span>Done. Download file <a href="#" class="text-primary"
wire:click.prevent="downloadExport">here</a></span>
@endif
@if($exportFinished && !$exportFailed && $autoDownload && $downloaded)
@if ($exportFinished && !$exportFailed && $autoDownload && $downloaded)
<span>Done. File has been downloaded.</span>
@endif
@if($exportFailed)
@if ($exportFailed)
<span>Export failed, please try again later.</span>
@endif
</div>
+13 -10
View File
@@ -1,15 +1,18 @@
document.addEventListener("DOMContentLoaded", function(){
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }} = window.{{ config('datatables-html.namespace', 'LaravelDataTables') }} || {};
$.ajaxSetup({headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'}});
@foreach($editors as $editor)
var {{$editor->instance}} = window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}["%1$s-{{$editor->instance}}"] = new $.fn.dataTable.Editor({!! $editor->toJson() !!});
{!! $editor->scripts !!}
@foreach ((array) $editor->events as $event)
{{$editor->instance}}.on('{!! $event['event'] !!}', {!! $event['script'] !!});
@endforeach
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }} =
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }} || {};
$.ajaxSetup({headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'}});
@foreach ($editors as $editor)
var {{ $editor->instance }} =
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}["%1$s-{{ $editor->instance }}"] = new
$.fn.dataTable.Editor({!! $editor->toJson() !!});
{!! $editor->scripts !!}
@foreach ((array) $editor->events as $event)
{{ $editor->instance }}.on('{!! $event['event'] !!}', {!! $event['script'] !!});
@endforeach
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}["%1$s"] = $("#%1$s").DataTable(%2$s);
@endforeach
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}["%1$s"] = $("#%1$s").DataTable(%2$s);
});
@foreach ($scripts as $script)
@include($script)
@include($script)
@endforeach
+12 -8
View File
@@ -1,14 +1,18 @@
window.dtx = window.dtx || {};
window.dtx["%1$s"] = function(opts) {
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }} = window.{{ config('datatables-html.namespace', 'LaravelDataTables') }} || {};
@if(isset($editors))
@foreach($editors as $editor)
var {{$editor->instance}} = window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}["%1$s-{{$editor->instance}}"] = new $.fn.dataTable.Editor({!! $editor->toJson() !!});
{!! $editor->scripts !!}
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }} =
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }} || {};
@if (isset($editors))
@foreach ($editors as $editor)
var {{ $editor->instance }} =
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}["%1$s-{{ $editor->instance }}"] = new
$.fn.dataTable.Editor({!! $editor->toJson() !!});
{!! $editor->scripts !!}
@foreach ((array) $editor->events as $event)
{{$editor->instance}}.on('{!! $event['event'] !!}', {!! $event['script'] !!});
{{ $editor->instance }}.on('{!! $event['event'] !!}', {!! $event['script'] !!});
@endforeach
@endforeach
@endif
return window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}["%1$s"] = $("#%1$s").DataTable($.extend(%2$s, opts));
@endif
return window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}["%1$s"] =
$("#%1$s").DataTable($.extend(%2$s, opts));
}
@@ -1,14 +1,15 @@
$(function(){
@foreach($editors as $editor)
{{ config('datatables-html.namespace', 'LaravelDataTables') }}["%1$s-{{$editor->instance}}"].on('preSubmit', function(e, data, action) {
if (action !== 'remove') return;
@foreach ($editors as $editor)
{{ config('datatables-html.namespace', 'LaravelDataTables') }}["%1$s-{{ $editor->instance }}"].on('preSubmit',
function(e, data, action) {
if (action !== 'remove') return;
for (let row_id of Object.keys(data.data))
{
data.data[row_id] = {
DT_RowId: data.data[row_id].DT_RowId
};
}
});
@endforeach
for (let row_id of Object.keys(data.data))
{
data.data[row_id] = {
DT_RowId: data.data[row_id].DT_RowId
};
}
});
@endforeach
});
+5 -3
View File
@@ -1,6 +1,8 @@
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }} = window.{{ config('datatables-html.namespace', 'LaravelDataTables') }} || {};
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }} =
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }} || {};
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}.options = %2$s
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}.editors = [];
@foreach($editors as $editor)
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}.editors["{{$editor->instance}}"] = {!! $editor->toJson() !!}
@foreach ($editors as $editor)
window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}.editors["{{ $editor->instance }}"] =
{!! $editor->toJson() !!}
@endforeach
+38 -32
View File
@@ -1,38 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Print Table</title>
<meta charset="UTF-8">
<meta name=description content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
body {margin: 20px}
</style>
</head>
<body>
<div data-dusk="page-ready" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);" aria-hidden="true"></div>
<table class="table table-bordered table-condensed table-striped">
@foreach($data as $row)
@if ($loop->first)
<tr>
@foreach($row as $key => $value)
<th>{!! $key !!}</th>
@endforeach
</tr>
@endif
<head>
<title>Print Table</title>
<meta charset="UTF-8">
<meta name=description content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
body {
margin: 20px
}
</style>
</head>
<body>
<div data-dusk="page-ready" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);"
aria-hidden="true"></div>
<table class="table table-bordered table-condensed table-striped">
@foreach ($data as $row)
@if ($loop->first)
<tr>
@foreach($row as $key => $value)
@if(is_string($value) || is_numeric($value))
<td>{!! $value !!}</td>
@else
<td></td>
@endif
@foreach ($row as $key => $value)
<th>{!! $key !!}</th>
@endforeach
</tr>
@endforeach
</table>
</body>
@endif
<tr>
@foreach ($row as $key => $value)
@if (is_string($value) || is_numeric($value))
<td>{!! $value !!}</td>
@else
<td></td>
@endif
@endforeach
</tr>
@endforeach
</table>
</body>
</html>
+20 -20
View File
@@ -1,23 +1,23 @@
$(function(){
$('#%1$s').on('xhr.dt', function (e, settings, json, xhr) {
if (json == null || !('disableOrdering' in json)) return;
$('#%1$s').on('xhr.dt', function (e, settings, json, xhr) {
if (json == null || !('disableOrdering' in json)) return;
let table = {{ config('datatables-html.namespace', 'LaravelDataTables') }}[$(this).attr('id')];
if (json.disableOrdering) {
table.settings()[0].aoColumns.forEach(function(column) {
column.bSortable = false;
$(column.nTh).removeClass('sorting_asc sorting_desc sorting').addClass('sorting_disabled');
});
} else {
let changed = false;
table.settings()[0].aoColumns.forEach(function(column) {
if (column.bSortable) return;
column.bSortable = true;
changed = true;
});
if (changed) {
table.draw();
}
}
});
let table = {{ config('datatables-html.namespace', 'LaravelDataTables') }}[$(this).attr('id')];
if (json.disableOrdering) {
table.settings()[0].aoColumns.forEach(function(column) {
column.bSortable = false;
$(column.nTh).removeClass('sorting_asc sorting_desc sorting').addClass('sorting_disabled');
});
} else {
let changed = false;
table.settings()[0].aoColumns.forEach(function(column) {
if (column.bSortable) return;
column.bSortable = true;
changed = true;
});
if (changed) {
table.draw();
}
}
});
});
+1 -1
View File
@@ -1,4 +1,4 @@
document.addEventListener("DOMContentLoaded",function(){window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}=window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}||{};window.{{ config('datatables-html.namespace', 'LaravelDataTables') }}["%1$s"]=$("#%1$s").DataTable(%2$s);});
@foreach ($scripts as $script)
@include($script)
@include($script)
@endforeach
@@ -21,34 +21,18 @@
$actionIsModalFooterSticky = $action->isModalFooterSticky();
$actionIsModalHeaderSticky = $action->isModalHeaderSticky();
$actionModalWidth = $action->getModalWidth();
$actionLivewireCallMountedActionName = $action->hasFormWrapper() ? $action->getLivewireCallMountedActionName() : null;
$actionLivewireCallMountedActionName = $action->hasFormWrapper()
? $action->getLivewireCallMountedActionName()
: null;
$actionModalWireKey = "{$this->getId()}.actions.{$action->getName()}.modal";
@endphp
<x-filament::modal
:alignment="$actionModalAlignment"
:autofocus="$actionIsModalAutofocused"
:close-button="$actionHasModalCloseButton"
:close-by-clicking-away="$actionIsModalClosedByClickingAway"
:close-by-escaping="$actionIsModalClosedByEscaping"
:description="$actionModalDescription"
:extra-modal-window-attribute-bag="$actionExtraModalWindowAttributeBag"
:extra-modal-overlay-attribute-bag="$actionExtraModalOverlayAttributeBag"
:footer-actions="$actionModalFooterActions"
:footer-actions-alignment="$actionModalFooterActionsAlignment"
:heading="$actionModalHeading"
:icon="$actionModalIcon"
:icon-color="$actionModalIconColor"
:id="$actionModalId"
:slide-over="$actionIsModalSlideOver"
:slide-over-position="$actionModalSlideOverPosition"
:sticky-footer="$actionIsModalFooterSticky"
:sticky-header="$actionIsModalHeaderSticky"
:width="$actionModalWidth"
:wire:key="$actionModalWireKey"
<x-filament::modal :alignment="$actionModalAlignment" :autofocus="$actionIsModalAutofocused" :close-button="$actionHasModalCloseButton" :close-by-clicking-away="$actionIsModalClosedByClickingAway" :close-by-escaping="$actionIsModalClosedByEscaping"
:description="$actionModalDescription" :extra-modal-window-attribute-bag="$actionExtraModalWindowAttributeBag" :extra-modal-overlay-attribute-bag="$actionExtraModalOverlayAttributeBag" :footer-actions="$actionModalFooterActions" :footer-actions-alignment="$actionModalFooterActionsAlignment" :heading="$actionModalHeading"
:icon="$actionModalIcon" :icon-color="$actionModalIconColor" :id="$actionModalId" :slide-over="$actionIsModalSlideOver" :slide-over-position="$actionModalSlideOverPosition" :sticky-footer="$actionIsModalFooterSticky"
:sticky-header="$actionIsModalHeaderSticky" :width="$actionModalWidth" :wire:key="$actionModalWireKey"
:wire:submit.prevent="$actionLivewireCallMountedActionName"
:x-on:modal-closed="'if ($event.detail.id === ' . \Illuminate\Support\Js::from($actionModalId) . ') $wire.unmountAction(false)'"
>
:x-on:modal-closed="'if ($event.detail.id === ' . \Illuminate\Support\Js::from($actionModalId) . ') $wire.unmountAction(false)'">
{{ FilamentView::renderHook(ActionsRenderHook::MODAL_CUSTOM_CONTENT_BEFORE, scopes: static::class, data: ['action' => $action]) }}
{{ $action->getModalContent() }}
@@ -37,9 +37,7 @@
->triggerView($triggerView)
->view($view);
$badge === true
? $group->badge()
: $group->badge($badge);
$badge === true ? $group->badge() : $group->badge($badge);
if ($button) {
$group
@@ -1,13 +1,9 @@
@if ($this instanceof \Filament\Actions\Contracts\HasActions && (! $this->hasActionsModalRendered))
<div
wire:partial="action-modals"
x-data="filamentActionModals({
livewireId: @js($this->getId()),
})"
style="height: 0"
>
@if ($this instanceof \Filament\Actions\Contracts\HasActions && !$this->hasActionsModalRendered)
<div wire:partial="action-modals" x-data="filamentActionModals({
livewireId: @js($this->getId()),
})" style="height: 0">
@foreach ($this->getMountedActions() as $action)
@if ((! $loop->last) || $this->mountedActionShouldOpenModal())
@if (!$loop->last || $this->mountedActionShouldOpenModal())
{{ $action->toModalHtmlable() }}
@endif
@endforeach
@@ -44,34 +44,17 @@
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
{{
$attributes
->merge($getExtraAttributes(), escape: false)
->class([
'fi-fo-builder',
'fi-collapsible' => $isCollapsible,
])
}}
>
{{ $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,
])
>
<div @class(['fi-fo-builder-actions', 'fi-hidden' => count($items) < 2])>
@if ($collapseAllActionIsVisible)
<span
x-on:click="$dispatch('builder-collapse', '{{ $statePath }}')"
>
<span x-on:click="$dispatch('builder-collapse', '{{ $statePath }}')">
{{ $collapseAllAction }}
</span>
@endif
@if ($expandAllActionIsVisible)
<span
x-on:click="$dispatch('builder-expand', '{{ $statePath }}')"
>
<span x-on:click="$dispatch('builder-expand', '{{ $statePath }}')">
{{ $expandAllAction }}
</span>
@endif
@@ -79,9 +62,7 @@
@endif
@if (count($items))
<ul
x-sortable
data-sortable-animation-duration="{{ $getReorderAnimationDuration() }}"
<ul x-sortable data-sortable-animation-duration="{{ $getReorderAnimationDuration() }}"
x-on:end.stop="
$wire.mountAction(
'reorder',
@@ -89,8 +70,7 @@
{ schemaComponent: '{{ $key }}' },
)
"
class="fi-fo-builder-items"
>
class="fi-fo-builder-items">
@php
$hasBlockLabels = $hasBlockLabels();
$hasBlockIcons = $hasBlockIcons();
@@ -102,7 +82,7 @@
@php
$visibleExtraItemActions = array_filter(
$extraItemActions,
fn (Action $action): bool => $action(['item' => $itemKey])->isVisible(),
fn(Action $action): bool => $action(['item' => $itemKey])->isVisible(),
);
$cloneAction = $cloneAction(['item' => $itemKey]);
$cloneActionIsVisible = $isCloneable && $cloneAction->isVisible();
@@ -115,39 +95,33 @@
$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);
$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: @if ($persistCollapsed) $persist(@js($isCollapsed($item))).as(`builder-${@js($key)}-${@js($itemKey)}-isCollapsed`) @else @js($isCollapsed($item)) @endif,
}"
<li wire:ignore.self wire:key="{{ $item->getLivewireKey() }}.item" x-data="{
isCollapsed: @if ($persistCollapsed) $persist(@js($isCollapsed($item))).as(`builder-${@js($key)}-${@js($itemKey)}-isCollapsed`) @else @js($isCollapsed($item)) @endif,
}"
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 }"
>
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"
>
<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"
>
<ul class="fi-fo-builder-item-header-start-actions">
@if ($reorderActionIsVisible)
<li x-on:click.stop>
{{ $reorderAction->extraAttributes(['x-sortable-handle' => true], merge: true) }}
@@ -171,28 +145,29 @@
@endphp
@if ($hasBlockIcons && filled($blockIcon))
{{ \Filament\Support\generate_icon_html($blockIcon, attributes: (new \Illuminate\View\ComponentAttributeBag)->class(['fi-fo-builder-item-header-icon'])) }}
{{ \Filament\Support\generate_icon_html($blockIcon, attributes: 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,
])
>
<{{ $blockLabelHeadingTag }} @class([
'fi-fo-builder-item-header-label',
'fi-truncated' => $isBlockLabelTruncated,
])>
{{ $item->getParentComponent()->getLabel($item->getRawState(), $itemKey, $loop->index) }}
@if ($hasBlockNumbers)
{{ $loop->iteration }}
@endif
</{{ $blockLabelHeadingTag }}>
</{{ $blockLabelHeadingTag }}>
@endif
@if ($editActionIsVisible || $cloneActionIsVisible || $deleteActionIsVisible || $isCollapsible || $visibleExtraItemActions)
<ul
class="fi-fo-builder-item-header-end-actions"
>
@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]) }}
@@ -218,19 +193,13 @@
@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"
>
<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"
>
<div class="fi-fo-builder-item-header-expand-action">
{{ $getAction('expand') }}
</div>
</li>
@@ -240,29 +209,23 @@
</div>
@endif
<div
x-show="! isCollapsed"
@class([
'fi-fo-builder-item-content',
'fi-fo-builder-item-content-has-preview' => $hasBlockPreviews && $item->getParentComponent()->hasPreview(),
])
>
<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,
])
>
<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>
@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 }}
@@ -270,19 +233,13 @@
</div>
</li>
@if (! $loop->last)
@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-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>
@@ -292,17 +249,13 @@
</li>
@elseif (filled($labelBetweenItems))
<li class="fi-fo-builder-label-between-items-ctn">
<div
class="fi-fo-builder-label-between-items-divider-before"
></div>
<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>
<div class="fi-fo-builder-label-between-items-divider-after"></div>
</li>
@endif
@endif
@@ -311,14 +264,8 @@
@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-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>
@@ -15,33 +15,22 @@
'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,
]),
)
"
>
<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,
]),
)">
<x-slot name="trigger">
{{ $trigger }}
</x-slot>
<x-filament::dropdown.list>
<div
{{ (new ComponentAttributeBag)->grid($columns, GridDirection::Column) }}
>
<div {{ new ComponentAttributeBag()->grid($columns, GridDirection::Column) }}>
@foreach ($blocks as $block)
@php
$blockIcon = $block->getIcon();
@@ -57,11 +46,7 @@
$wireClickAction = "mountAction('{$action->getName()}', {$wireClickActionArguments}, { schemaComponent: '{$key}' })";
@endphp
<x-filament::dropdown.list.item
:icon="$blockIcon"
x-on:click="close"
:wire:click="$wireClickAction"
>
<x-filament::dropdown.list.item :icon="$blockIcon" x-on:click="close" :wire:click="$wireClickAction">
{{ $block->getLabel() }}
</x-filament::dropdown.list.item>
@endforeach
@@ -15,50 +15,30 @@
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
x-load
<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)
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-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"
/>
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"
>
<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"
>
<span x-show="areAllCheckboxesChecked" x-on:click="toggleAllCheckboxes()"
wire:key="{{ $livewireKey }}.actions.deselect-all">
{{ $getAction('deselectAll') }}
</span>
</div>
@@ -66,22 +46,15 @@
@endif
<div
{{
$getExtraAttributeBag()
->grid($getColumns(), $gridDirection)
->merge([
{{ $getExtraAttributeBag()->grid($getColumns(), $gridDirection)->merge(
[
'x-show' => $isSearchable ? 'visibleCheckboxListOptions.length' : null,
], escape: false)
->class([
'fi-fo-checkbox-list-options',
])
}}
>
],
escape: false,
)->class(['fi-fo-checkbox-list-options']) }}>
@forelse ($options as $value => $label)
<div
wire:key="{{ $livewireKey }}.options.{{ $value }}"
@if ($isSearchable)
x-show="
<div wire:key="{{ $livewireKey }}.options.{{ $value }}"
@if ($isSearchable) x-show="
$el
.querySelector('.fi-fo-checkbox-list-option-label')
?.innerText.toLowerCase()
@@ -90,29 +63,20 @@
.querySelector('.fi-fo-checkbox-list-option-description')
?.innerText.toLowerCase()
.includes(search.toLowerCase())
"
@endif
class="fi-fo-checkbox-list-option-ctn"
>
" @endif
class="fi-fo-checkbox-list-option-ctn">
<label class="fi-fo-checkbox-list-option">
<input
type="checkbox"
{{
$extraInputAttributeBag
->merge([
<input type="checkbox"
{{ $extraInputAttributeBag->merge(
[
'disabled' => $isDisabled || $isOptionDisabled($value, $label),
'value' => e($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),
])
}}
/>
],
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">
@@ -124,9 +88,7 @@
</span>
@if ($hasDescription($value))
<p
class="fi-fo-checkbox-list-option-description"
>
<p class="fi-fo-checkbox-list-option-description">
{{ $getDescription($value) }}
</p>
@endif
@@ -139,11 +101,8 @@
</div>
@if ($isSearchable)
<div
x-cloak
x-show="search && ! visibleCheckboxListOptions.length"
class="fi-fo-checkbox-list-no-search-results-message"
>
<div x-cloak x-show="search && ! visibleCheckboxListOptions.length"
class="fi-fo-checkbox-list-no-search-results-message">
{{ $getNoSearchResultsMessage() }}
</div>
@endif
@@ -2,28 +2,27 @@
$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(
[
'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-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"
>
<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 }} />
@@ -13,36 +13,21 @@
@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-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({
canWrap: @js($canWrap()),
isDisabled: @js($isDisabled),
isLive: @js($isLive),
isLiveDebounced: @js($isLiveDebounced),
isLiveOnBlur: @js($isLiveOnBlur),
liveDebounce: @js($liveDebounce),
language: @js($language?->value),
state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')", isOptimisticallyLive: false) }},
})"
wire:ignore
wire:key="{{ $livewireKey }}.{{
substr(md5(serialize([
$isDisabled,
$language?->value,
])), 0, 64)
}}"
{{ $getExtraAlpineAttributeBag() }}
>
canWrap: @js($canWrap()),
isDisabled: @js($isDisabled),
isLive: @js($isLive),
isLiveDebounced: @js($isLiveDebounced),
isLiveOnBlur: @js($isLiveOnBlur),
liveDebounce: @js($liveDebounce),
language: @js($language?->value),
state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')", isOptimisticallyLive: false) }},
})" 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>
@@ -20,94 +20,63 @@
$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)"
x-on:focus-input.stop="$el.querySelector('input')?.focus()"
:attributes="
\Filament\Support\prepare_inherited_attributes($extraAttributeBag)
->class('fi-fo-color-picker')
"
>
<div
x-load
<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-on:focus-input.stop="$el.querySelector('input')?.focus()" :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()"
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()"
x-on:focusout="if (isOpen() && ! $el.contains($event.relatedTarget)) $refs.panel.close()"
{{ $getExtraAlpineAttributeBag()->class(['fi-input-wrp-content']) }}
>
<input
x-on:focus="$refs.panel.open($refs.input)"
x-on:keydown.enter.prevent.stop="togglePanelVisibility()"
{{ $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([
{{ $getExtraInputAttributeBag()->merge(
[
'autocomplete' => 'off',
'disabled' => $isDisabled,
'id' => $getId(),
'placeholder' => filled($placeholder) ? e($placeholder) : null,
'required' => $isRequired() && (! $isConcealed()),
'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)),
])
}}
/>
],
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"
<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,
'fi-empty': !state,
}"
x-bind:style="{ 'background-color': state }"
></div>
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"
>
<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';
$tag =
match ($getFormat()) {
'hsl' => 'hsl-string',
'rgb' => 'rgb-string',
'rgba' => 'rgba-string',
default => 'hex',
} . '-color-picker';
@endphp
<{{ $tag }} x-ref="picker" color="{{ $getState() }}" />
@@ -34,33 +34,17 @@
$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)"
x-on:focus-input.stop="$el.querySelector('input:not([type=hidden])')?.focus()"
:attributes="\Filament\Support\prepare_inherited_attributes($extraAttributeBag)->class(['fi-fo-date-time-picker'])"
>
<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-on:focus-input.stop="$el.querySelector('input:not([type=hidden])')?.focus()"
:attributes="\Filament\Support\prepare_inherited_attributes($extraAttributeBag)->class([
'fi-fo-date-time-picker',
])">
@if ($isNative())
<input
{{
$extraInputAttributeBag
->merge($extraAlpineAttributes, escape: false)
->merge([
{{ $extraInputAttributeBag->merge($extraAlpineAttributes, escape: false)->merge(
[
'autofocus' => $isAutofocused,
'disabled' => $isDisabled,
'id' => $id,
@@ -69,62 +53,45 @@
'min' => $hasTime ? $minDate : ($minDate ? \Carbon\Carbon::parse($minDate)->toDateString() : null),
'placeholder' => filled($placeholder) ? e($placeholder) : null,
'readonly' => $isReadOnly,
'required' => $isRequired && (! $isConcealed),
'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)),
])
}}
/>
],
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
<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() }}
>
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) }}"
/>
<input x-ref="disabledDates" type="hidden" value="{{ json_encode($disabledDates) }}" />
<button
x-ref="button"
x-on:click="togglePanelVisibility()"
<button x-ref="button" x-on:click="togglePanelVisibility()"
x-on:keydown.enter.prevent.stop="
if (! $el.disabled) {
isOpen() ? selectDate() : togglePanelVisibility()
@@ -137,93 +104,42 @@
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"
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',
])
/>
@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',
])
>
<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"
>
<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>
<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"
/>
<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 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 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"
<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),
@@ -231,59 +147,33 @@
'fi-selected': dayIsSelected(day),
'fi-disabled': dayIsDisabled(day),
}"
class="fi-fo-date-time-picker-calendar-day"
></div>
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-on:blur="checkTimeInputValidity"
x-on:invalid="timeInputInvalid"
x-model.debounce="hour"
/>
<input max="23" min="0" step="{{ $getHoursStep() }}" type="number"
inputmode="numeric" x-on:blur="checkTimeInputValidity" x-on:invalid="timeInputInvalid"
x-model.debounce="hour" />
<span
class="fi-fo-date-time-picker-time-input-separator"
>
<span class="fi-fo-date-time-picker-time-input-separator">
:
</span>
<input
max="59"
min="0"
step="{{ $getMinutesStep() }}"
type="number"
inputmode="numeric"
x-on:blur="checkTimeInputValidity"
x-on:invalid="timeInputInvalid"
x-model.debounce="minute"
/>
<input max="59" min="0" step="{{ $getMinutesStep() }}" type="number"
inputmode="numeric" x-on:blur="checkTimeInputValidity" x-on:invalid="timeInputInvalid"
x-model.debounce="minute" />
@if ($hasSeconds)
<span
class="fi-fo-date-time-picker-time-input-separator"
>
<span class="fi-fo-date-time-picker-time-input-separator">
:
</span>
<input
max="59"
min="0"
step="{{ $getSecondsStep() }}"
type="number"
inputmode="numeric"
x-on:blur="checkTimeInputValidity"
x-on:invalid="timeInputInvalid"
x-model.debounce="second"
/>
<input max="59" min="0" step="{{ $getSecondsStep() }}" type="number"
inputmode="numeric" x-on:blur="checkTimeInputValidity"
x-on:invalid="timeInputInvalid" x-model.debounce="second" />
@endif
</div>
@endif
@@ -28,7 +28,8 @@
if ($field) {
$hasInlineLabel ??= $field->hasInlineLabel();
$hasNestedRecursiveValidationRules ??= $field instanceof \Filament\Forms\Components\Contracts\HasNestedRecursiveValidationRules;
$hasNestedRecursiveValidationRules ??=
$field instanceof \Filament\Forms\Components\Contracts\HasNestedRecursiveValidationRules;
$id ??= $field->getId();
$isDisabled ??= $field->isDisabled();
$label ??= $field->getLabel();
@@ -50,83 +51,88 @@
$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}.*")))));
$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}.*") : []);
$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);
$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,
])
}}
>
<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 }}"
@if ($labelTag === 'label') for="{{ $id }}"
@else
id="{{ $id }}-label"
@endif
class="fi-fo-field-label fi-sr-only"
>
id="{{ $id }}-label" @endif
class="fi-fo-field-label fi-sr-only">
{{ $label }}
</{{ $labelTag }}>
</{{ $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,
])
>
@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,
])
>
<div @class([
'fi-fo-field-label-ctn',
$label instanceof \Illuminate\View\ComponentSlot
? $label->attributes->get('class')
: null,
])>
{{ $beforeLabelSchema }}
@if ((filled($label) && (! $labelSrOnly)) || $labelPrefix || $labelSuffix)
@if ((filled($label) && !$labelSrOnly) || $labelPrefix || $labelSuffix)
<{{ $labelTag }}
@if ($labelTag === 'label')
for="{{ $id }}"
@if ($labelTag === 'label') for="{{ $id }}"
@else
id="{{ $id }}-label"
@endif
class="fi-fo-field-label"
>
id="{{ $id }}-label" @endif
class="fi-fo-field-label">
{{ $labelPrefix }}
@if (filled($label) && (! $labelSrOnly))
@if (filled($label) && !$labelSrOnly)
<span class="fi-fo-field-label-content">
{{ $label }}@if ($required && (! $isDisabled))<sup class="fi-fo-field-label-required-mark">*</sup>
{{ $label }}@if ($required && !$isDisabled)
<sup class="fi-fo-field-label-required-mark">*</sup>
@endif
</span>
@endif
{{ $labelSuffix }}
</{{ $labelTag }}>
</{{ $labelTag }}>
@endif
{{ $afterLabelSchema }}
@@ -136,7 +142,15 @@
</div>
@endif
@if ((! \Filament\Support\is_slot_empty($slot)) || $hasError || $aboveContentSchema || $belowContentSchema || $beforeContentSchema || $afterContentSchema || $aboveErrorMessageSchema || $belowErrorMessageSchema)
@if (
!\Filament\Support\is_slot_empty($slot) ||
$hasError ||
$aboveContentSchema ||
$belowContentSchema ||
$beforeContentSchema ||
$afterContentSchema ||
$aboveErrorMessageSchema ||
$belowErrorMessageSchema)
<div class="fi-fo-field-content-col">
{{ $aboveContentSchema }}
@@ -160,10 +174,7 @@
{{ $aboveErrorMessageSchema }}
@if (filled($errorMessages))
<ul
data-validation-error
class="fi-fo-field-wrp-error-list"
>
<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)
@@ -175,17 +186,11 @@
@endforeach
</ul>
@elseif ($areHtmlErrorMessagesAllowed)
<div
data-validation-error
class="fi-fo-field-wrp-error-message"
>
<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"
>
<p data-validation-error class="fi-fo-field-wrp-error-message">
{{ $errorMessage }}
</p>
@endif
@@ -18,238 +18,193 @@
$alignment = $getAlignment() ?? Alignment::Start;
if (! $alignment instanceof Alignment) {
$alignment = filled($alignment) ? (Alignment::tryFrom($alignment) ?? $alignment) : null;
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-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()),
automaticallyCropImagesAspectRatio: @js($automaticallyCropImagesAspectRatio),
automaticallyOpenImageEditorForAspectRatio: @js($getAutomaticallyOpenImageEditorForAspectRatio()),
automaticallyResizeImagesMode: @js($getAutomaticallyResizeImagesMode()),
automaticallyResizeImagesHeight: @js($automaticallyResizeImagesHeight),
automaticallyResizeImagesWidth: @js($automaticallyResizeImagesWidth),
cancelUploadUsing: (fileKey) => {
$wire.cancelUpload(`{{ $statePath }}.${fileKey}`)
acceptedFileTypes: @js($getAcceptedFileTypes()),
automaticallyCropImagesAspectRatio: @js($automaticallyCropImagesAspectRatio),
automaticallyOpenImageEditorForAspectRatio: @js($getAutomaticallyOpenImageEditorForAspectRatio()),
automaticallyResizeImagesMode: @js($getAutomaticallyResizeImagesMode()),
automaticallyResizeImagesHeight: @js($automaticallyResizeImagesHeight),
automaticallyResizeImagesWidth: @js($automaticallyResizeImagesWidth),
cancelUploadUsing: (fileKey) => {
$wire.cancelUpload(`{{ $statePath }}.${fileKey}`)
},
canEditSvgs: @js($canEditSvgs()),
confirmSvgEditingMessage: @js(__('filament-forms::components.file_upload.editor.svg.messages.confirmation')),
deleteUploadedFileUsing: async (fileKey) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'deleteUploadedFile', { fileKey },
)
},
disabledSvgEditingMessage: @js(__('filament-forms::components.file_upload.editor.svg.messages.disabled')),
getUploadedFilesUsing: async () => {
return await Livewire.fireAction(
$wire.__instance,
'callSchemaComponentMethod',
[@js($key), 'getUploadedFiles'], { async: true },
)
},
hasCircleCropper: @js($hasCircleCropper),
hasImageEditor: @js($hasImageEditor),
imageEditorEmptyFillColor: @js($getImageEditorEmptyFillColor()),
imageEditorMode: @js($getImageEditorMode()),
imageEditorViewportHeight: @js($getImageEditorViewportHeight()),
imageEditorViewportWidth: @js($getImageEditorViewportWidth()),
imagePreviewHeight: @js($getImagePreviewHeight()),
isAvatar: @js($isAvatar),
isDeletable: @js($isDeletable()),
isDisabled: @js($isDisabled),
isDownloadable: @js($isDownloadable()),
isImageEditorExplicitlyEnabled: @js($isImageEditorExplicitlyEnabled),
isMultiple: @js($isMultiple),
isOpenable: @js($isOpenable()),
isPasteable: @js($isPasteable()),
isPreviewable: @js($isPreviewable()),
isReorderable: @js($isReorderable()),
isSvgEditingConfirmed: @js($isSvgEditingConfirmed()),
itemPanelAspectRatio: @js($getItemPanelAspectRatio()),
loadingIndicatorPosition: @js($getLoadingIndicatorPosition()),
locale: @js(app()->getLocale()),
maxFiles: @js($maxFiles = $getMaxFiles()),
maxFilesValidationMessage: @js($maxFiles ? trans_choice('validation.max.array', $maxFiles, ['attribute' => $getValidationAttribute(), 'max' => $maxFiles]) : null),
maxParallelUploads: @js($getMaxParallelUploads()),
maxSize: @js(($size = $getMaxSize()) ? "{$size}KB" : null),
mimeTypeMap: @js($getMimeTypeMap()),
minSize: @js(($size = $getMinSize()) ? "{$size}KB" : null),
panelAspectRatio: @js($getPanelAspectRatio()),
panelLayout: @js($getPanelLayout()),
placeholder: @js($getPlaceholder()),
removeUploadedFileButtonPosition: @js($getRemoveUploadedFileButtonPosition()),
removeUploadedFileUsing: async (fileKey) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'removeUploadedFile', { fileKey },
)
},
reorderUploadedFilesUsing: async (fileKeys) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'reorderUploadedFiles', { fileKeys },
)
},
shouldAppendFiles: @js($shouldAppendFiles()),
shouldAutomaticallyUpscaleImagesWhenResizing: @js($shouldAutomaticallyUpscaleImagesWhenResizing()),
shouldOrientImageFromExif: @js($shouldOrientImagesFromExif()),
shouldTransformImage: @js($automaticallyCropImagesAspectRatio || $automaticallyResizeImagesHeight || $automaticallyResizeImagesWidth),
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)
},
canEditSvgs: @js($canEditSvgs()),
confirmSvgEditingMessage: @js(__('filament-forms::components.file_upload.editor.svg.messages.confirmation')),
deleteUploadedFileUsing: async (fileKey) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'deleteUploadedFile',
{ fileKey },
)
error,
(progressEvent) => {
progress(true, progressEvent.detail.progress, 100)
},
disabledSvgEditingMessage: @js(__('filament-forms::components.file_upload.editor.svg.messages.disabled')),
getUploadedFilesUsing: async () => {
return await Livewire.fireAction(
$wire.__instance,
'callSchemaComponentMethod',
[@js($key), 'getUploadedFiles'],
{ async: true },
)
},
hasCircleCropper: @js($hasCircleCropper),
hasImageEditor: @js($hasImageEditor),
imageEditorEmptyFillColor: @js($getImageEditorEmptyFillColor()),
imageEditorMode: @js($getImageEditorMode()),
imageEditorViewportHeight: @js($getImageEditorViewportHeight()),
imageEditorViewportWidth: @js($getImageEditorViewportWidth()),
imagePreviewHeight: @js($getImagePreviewHeight()),
isAvatar: @js($isAvatar),
isDeletable: @js($isDeletable()),
isDisabled: @js($isDisabled),
isDownloadable: @js($isDownloadable()),
isImageEditorExplicitlyEnabled: @js($isImageEditorExplicitlyEnabled),
isMultiple: @js($isMultiple),
isOpenable: @js($isOpenable()),
isPasteable: @js($isPasteable()),
isPreviewable: @js($isPreviewable()),
isReorderable: @js($isReorderable()),
isSvgEditingConfirmed: @js($isSvgEditingConfirmed()),
itemPanelAspectRatio: @js($getItemPanelAspectRatio()),
loadingIndicatorPosition: @js($getLoadingIndicatorPosition()),
locale: @js(app()->getLocale()),
maxFiles: @js($maxFiles = $getMaxFiles()),
maxFilesValidationMessage: @js($maxFiles ? trans_choice('validation.max.array', $maxFiles, ['attribute' => $getValidationAttribute(), 'max' => $maxFiles]) : null),
maxParallelUploads: @js($getMaxParallelUploads()),
maxSize: @js(($size = $getMaxSize()) ? "{$size}KB" : null),
mimeTypeMap: @js($getMimeTypeMap()),
minSize: @js(($size = $getMinSize()) ? "{$size}KB" : null),
panelAspectRatio: @js($getPanelAspectRatio()),
panelLayout: @js($getPanelLayout()),
placeholder: @js($getPlaceholder()),
removeUploadedFileButtonPosition: @js($getRemoveUploadedFileButtonPosition()),
removeUploadedFileUsing: async (fileKey) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'removeUploadedFile',
{ fileKey },
)
},
reorderUploadedFilesUsing: async (fileKeys) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'reorderUploadedFiles',
{ fileKeys },
)
},
shouldAppendFiles: @js($shouldAppendFiles()),
shouldAutomaticallyUpscaleImagesWhenResizing: @js($shouldAutomaticallyUpscaleImagesWhenResizing()),
shouldOrientImageFromExif: @js($shouldOrientImagesFromExif()),
shouldTransformImage: @js($automaticallyCropImagesAspectRatio || $automaticallyResizeImagesHeight || $automaticallyResizeImagesWidth),
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([
)
},
})" 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,
])
}}
>
],
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)
}}
/>
<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>
<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([
@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,
'fi-fo-file-upload-editor-crop-only' => ! $isImageEditorExplicitlyEnabled,
])
>
<div
aria-hidden="true"
class="fi-fo-file-upload-editor-overlay"
></div>
'fi-fo-file-upload-editor-crop-only' => !$isImageEditorExplicitlyEnabled,
])>
<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"
/>
<img x-ref="editor" class="fi-fo-file-upload-editor-image" />
</div>
<div class="fi-fo-file-upload-editor-control-panel">
@if ($isImageEditorExplicitlyEnabled)
<div
class="fi-fo-file-upload-editor-control-panel-main"
>
<div
class="fi-fo-file-upload-editor-control-panel-group"
>
<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' => __('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'] !!}"
<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-ref="{{ $input['ref'] }}" x-on:keydown.enter.prevent
type="text" class="fi-input" />
<x-slot name="suffix">
{{ $input['unit'] }}
@@ -259,19 +214,14 @@
@endforeach
</div>
<div
class="fi-fo-file-upload-editor-control-panel-group"
>
<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"
<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"
>
class="fi-btn">
{{ $action['iconHtml'] }}
</button>
@endforeach
@@ -280,28 +230,22 @@
</div>
@if (count($aspectRatios = $getImageEditorAspectRatioOptionsForJs()))
<div
class="fi-fo-file-upload-editor-control-panel-group"
>
<div
class="fi-fo-file-upload-editor-control-panel-group-title"
>
<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"
<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"
>
class="fi-btn">
{{ $label }}
</button>
@endforeach
@@ -312,59 +256,30 @@
</div>
@endif
<div
class="fi-fo-file-upload-editor-control-panel-footer"
>
<div class="fi-fo-file-upload-editor-control-panel-footer">
@if ($isImageEditorExplicitlyEnabled)
<button
type="button"
x-on:click.prevent="pond.imageEditEditor.oncancel"
class="fi-btn"
>
<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'])
}}
>
<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'])
}}
>
<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>
@else
<button
type="button"
x-on:click.prevent="saveEditor"
{{
(new \Illuminate\View\ComponentAttributeBag)
->color(\Filament\Support\View\Components\ButtonComponent::class, 'success')
->class(['fi-btn'])
}}
>
<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>
<button
type="button"
x-on:click.prevent="pond.imageEditEditor.oncancel"
class="fi-btn"
>
<button type="button" x-on:click.prevent="pond.imageEditEditor.oncancel"
class="fi-btn">
{{ __('filament-forms::components.file_upload.editor.actions.cancel.label') }}
</button>
@endif
@@ -1,12 +1,9 @@
<input
{{
$attributes
->merge([
{{ $attributes->merge(
[
'id' => $getId(),
'type' => 'hidden',
$applyStateBindingModifiers('wire:model') => $getStatePath(),
], escape: false)
->merge($getExtraAttributes(), escape: false)
->class(['fi-fo-hidden'])
}}
/>
],
escape: false,
)->merge($getExtraAttributes(), escape: false)->class(['fi-fo-hidden']) }} />
@@ -14,46 +14,20 @@
$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-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'])
}}
>
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>
@if ($isReorderable && !$isDisabled)
<th scope="col" x-show="rows.length" class="fi-has-action"></th>
@endif
<th scope="col">
@@ -64,66 +38,39 @@
{{ $getValueLabel() }}
</th>
@if ($isDeletable && (! $isDisabled))
<th
scope="col"
x-show="rows.length"
class="fi-has-action"
></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)"
@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))
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"
>
<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"
/>
<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"
/>
<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))
@if ($isDeletable && !$isDisabled)
<td class="fi-has-action">
<div x-on:click="deleteRow(index)">
{{ $getAction('delete') }}
@@ -135,11 +82,8 @@
</tbody>
</table>
@if ($isAddable && (! $isDisabled))
<div
x-on:click="addRow"
class="fi-fo-key-value-add-action-ctn"
>
@if ($isAddable && !$isDisabled)
<div x-on:click="addRow" class="fi-fo-key-value-add-action-ctn">
{{ $getAction('add') }}
</div>
@endif
@@ -8,13 +8,12 @@
@if (filled($id) || filled($extraAttributes))
{!! '<div' !!}
{{-- Avoid formatting issues with unclosed elements --}}
{{
$attributes
->merge([
{{ $attributes->merge(
[
'id' => $id,
], escape: false)
->merge($extraAttributes, escape: false)
}}
],
escape: false,
)->merge($extraAttributes, escape: false) }}
>
@endif
@@ -15,63 +15,50 @@
{!! 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-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($hasFileAttachments()),
isLiveDebounced: @js($isLiveDebounced()),
isLiveOnBlur: @js($isLiveOnBlur()),
label: @js($label),
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)
})
canAttachFiles: @js($hasFileAttachments()),
isLiveDebounced: @js($isLiveDebounced()),
isLiveOnBlur: @js($isLiveOnBlur()),
label: @js($label),
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() }}
>
})
},
})" wire:ignore {{ $getExtraAlpineAttributeBag() }}>
<textarea x-ref="editor" x-cloak></textarea>
</div>
</x-filament::input.wrapper>
@@ -12,21 +12,19 @@
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
{{
$attributes
->merge([
{{ $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())))
],
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)
@@ -60,7 +58,7 @@
</div>
@endif
@if (! $isDisabled)
@if (!$isDisabled)
<div>
{{ $getAction('select') }}
</div>
@@ -1,10 +1,9 @@
@php
$fieldWrapperView = $getFieldWrapperView();
$placeholder = $getPlaceholder();
$extraAttributes = $getExtraAttributeBag()
->merge($getExtraAlpineAttributes(), escape: false);
$extraInputAttributes = $getExtraInputAttributeBag()
->merge([
$extraAttributes = $getExtraAttributeBag()->merge($getExtraAlpineAttributes(), escape: false);
$extraInputAttributes = $getExtraInputAttributeBag()->merge(
[
'autocomplete' => false,
'autofocus' => $isAutofocused(),
'disabled' => $isDisabled(),
@@ -12,18 +11,15 @@
'length' => $getLength(),
'placeholder' => filled($placeholder) ? e($placeholder) : null,
'readonly' => $isReadOnly(),
'required' => $isRequired() && (! $isConcealed()),
'required' => $isRequired() && !$isConcealed(),
$applyStateBindingModifiers('wire:model') => $getStatePath(),
], escape: false);
],
escape: false,
);
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<x-filament::input.one-time-code
:attributes="\Filament\Support\prepare_inherited_attributes($extraAttributes)"
>
<x-slot
name="input"
:attributes="\Filament\Support\prepare_inherited_attributes($extraInputAttributes)"
></x-slot>
<x-filament::input.one-time-code :attributes="\Filament\Support\prepare_inherited_attributes($extraAttributes)">
<x-slot name="input" :attributes="\Filament\Support\prepare_inherited_attributes($extraInputAttributes)"></x-slot>
</x-filament::input.one-time-code>
</x-dynamic-component>
@@ -14,27 +14,16 @@
}
@endphp
<div
data-field-wrapper
{{
(new ComponentAttributeBag)
->merge($field?->getExtraFieldWrapperAttributes() ?? [], escape: false)
->class([
'fi-fo-field',
])
}}
>
<div data-field-wrapper
{{ new ComponentAttributeBag()->merge($field?->getExtraFieldWrapperAttributes() ?? [], escape: false)->class(['fi-fo-field']) }}>
@if (filled($label))
<{{ $labelTag }}
@if ($labelTag === 'label')
for="{{ $id }}"
@if ($labelTag === 'label') for="{{ $id }}"
@else
id="{{ $id }}-label"
@endif
class="fi-fo-field-label fi-sr-only"
>
id="{{ $id }}-label" @endif
class="fi-fo-field-label fi-sr-only">
{{ $label }}
</{{ $labelTag }}>
</{{ $labelTag }}>
@endif
{{ $slot }}
@@ -14,39 +14,29 @@
<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,
])
}}
>
{{ $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([
$inputAttributes = $extraInputAttributeBag->merge(
[
'autofocus' => $loop->first && $isAutofocused(),
'disabled' => $isDisabled || $isOptionDisabled($value, $label),
'id' => e($id . '-' . $value),
'name' => $id,
'value' => e($value),
$wireModelAttribute => $statePath,
], escape: false);
],
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),
])
}}
/>
<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>
@@ -42,34 +42,17 @@
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
{{
$attributes
->merge($getExtraAttributes(), escape: false)
->class([
'fi-fo-repeater',
'fi-collapsible' => $isCollapsible,
])
}}
>
{{ $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,
])
>
<div @class(['fi-fo-repeater-actions', 'fi-hidden' => count($items) < 2])>
@if ($collapseAllActionIsVisible)
<span
x-on:click="$dispatch('repeater-collapse', '{{ $statePath }}')"
>
<span x-on:click="$dispatch('repeater-collapse', '{{ $statePath }}')">
{{ $collapseAllAction }}
</span>
@endif
@if ($expandAllActionIsVisible)
<span
x-on:click="$dispatch('repeater-expand', '{{ $statePath }}')"
>
<span x-on:click="$dispatch('repeater-expand', '{{ $statePath }}')">
{{ $expandAllAction }}
</span>
@endif
@@ -77,24 +60,23 @@
@endif
@if (count($items))
<ul
x-sortable
{{
(new ComponentAttributeBag)
->grid($getGridColumns())
->merge([
<ul x-sortable
{{ new ComponentAttributeBag()->grid($getGridColumns())->merge(
[
'data-sortable-animation-duration' => $getReorderAnimationDuration(),
'x-on:end.stop' => '$wire.mountAction(\'reorder\', { items: $event.target.sortable.toArray() }, { schemaComponent: \'' . $key . '\' })',
], escape: false)
->class(['fi-fo-repeater-items'])
}}
>
'x-on:end.stop' =>
'$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, $loop->index);
$visibleExtraItemActions = array_filter(
$extraItemActions,
fn (Action $action): bool => $action(['item' => $itemKey])->isVisible(),
fn(Action $action): bool => $action(['item' => $itemKey])->isVisible(),
);
$cloneAction = $cloneAction(['item' => $itemKey]);
$cloneActionIsVisible = $isCloneable && $cloneAction->isVisible();
@@ -105,36 +87,33 @@
$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);
$hasItemHeader =
$hasItemHeaders &&
($reorderActionIsVisible ||
$moveUpActionIsVisible ||
$moveDownActionIsVisible ||
filled($itemLabel) ||
$cloneActionIsVisible ||
$deleteActionIsVisible ||
$isCollapsible ||
$visibleExtraItemActions);
@endphp
<li
wire:ignore.self
wire:key="{{ $item->getLivewireKey() }}.item"
x-data="{
isCollapsed: @if ($persistCollapsed) $persist(@js($isCollapsed($item))).as(`repeater-${@js($key)}-${@js($itemKey)}-isCollapsed`) @else @js($isCollapsed($item)) @endif,
}"
<li wire:ignore.self wire:key="{{ $item->getLivewireKey() }}.item" x-data="{
isCollapsed: @if ($persistCollapsed) $persist(@js($isCollapsed($item))).as(`repeater-${@js($key)}-${@js($itemKey)}-isCollapsed`) @else @js($isCollapsed($item)) @endif,
}"
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 }}"
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 }"
>
]) x-bind:class="{ 'fi-collapsed': isCollapsed }">
@if ($hasItemHeader)
<div
@if ($isCollapsible)
x-on:click.stop="isCollapsed = !isCollapsed"
@endif
class="fi-fo-repeater-item-header"
>
<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"
>
<ul class="fi-fo-repeater-item-header-start-actions">
@if ($reorderActionIsVisible)
<li x-on:click.stop>
{{ $reorderAction->extraAttributes(['x-sortable-handle' => true], merge: true) }}
@@ -154,24 +133,20 @@
@endif
@if (filled($itemLabel))
<{{ $itemLabelHeadingTag }}
@class([
'fi-fo-repeater-item-header-label',
'fi-truncated' => $isItemLabelTruncated,
])
>
<{{ $itemLabelHeadingTag }} @class([
'fi-fo-repeater-item-header-label',
'fi-truncated' => $isItemLabelTruncated,
])>
{{ $itemLabel }}
@if ($hasItemNumbers)
{{ $loop->iteration }}
@endif
</{{ $itemLabelHeadingTag }}>
</{{ $itemLabelHeadingTag }}>
@endif
@if ($cloneActionIsVisible || $deleteActionIsVisible || $isCollapsible || $visibleExtraItemActions)
<ul
class="fi-fo-repeater-item-header-end-actions"
>
<ul class="fi-fo-repeater-item-header-end-actions">
@foreach ($visibleExtraItemActions as $extraItemAction)
<li x-on:click.stop>
{{ $extraItemAction(['item' => $itemKey]) }}
@@ -191,19 +166,13 @@
@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"
>
<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"
>
<div class="fi-fo-repeater-item-header-expand-action">
{{ $getAction('expand') }}
</div>
</li>
@@ -213,15 +182,12 @@
</div>
@endif
<div
x-show="! isCollapsed"
class="fi-fo-repeater-item-content"
>
<div x-show="! isCollapsed" class="fi-fo-repeater-item-content">
{{ $item }}
</div>
</li>
@if (! $loop->last)
@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">
@@ -230,19 +196,13 @@
</li>
@elseif (filled($labelBetweenItems))
<li class="fi-fo-repeater-label-between-items-ctn">
<div
class="fi-fo-repeater-label-between-items-divider-before"
></div>
<div class="fi-fo-repeater-label-between-items-divider-before"></div>
<span
class="fi-fo-repeater-label-between-items"
>
<span class="fi-fo-repeater-label-between-items">
{{ $labelBetweenItems }}
</span>
<div
class="fi-fo-repeater-label-between-items-divider-after"
></div>
<div class="fi-fo-repeater-label-between-items-divider-after"></div>
</li>
@endif
@endif
@@ -251,12 +211,12 @@
@endif
@if ($isAddable && $addAction->isVisible())
<div
@class([
'fi-fo-repeater-add',
($addActionAlignment instanceof Alignment) ? ('fi-align-' . $addActionAlignment->value) : $addActionAlignment,
])
>
<div @class([
'fi-fo-repeater-add',
$addActionAlignment instanceof Alignment
? 'fi-align-' . $addActionAlignment->value
: $addActionAlignment,
])>
{{ $addAction }}
</div>
@endif
@@ -27,31 +27,24 @@
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
{{
$attributes
->merge($getExtraAttributes(), escape: false)
->class(['fi-fo-simple-repeater'])
}}
>
<div {{ $attributes->merge($getExtraAttributes(), escape: false)->class(['fi-fo-simple-repeater']) }}>
@if (count($items))
<ul
x-sortable
{{
(new ComponentAttributeBag)
->grid($getGridColumns())
->merge([
<ul x-sortable
{{ new ComponentAttributeBag()->grid($getGridColumns())->merge(
[
'data-sortable-animation-duration' => $getReorderAnimationDuration(),
'x-on:end.stop' => '$wire.mountAction(\'reorder\', { items: $event.target.sortable.toArray() }, { schemaComponent: \'' . $key . '\' })',
], escape: false)
->class(['fi-fo-simple-repeater-items'])
}}
>
'x-on:end.stop' =>
'$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(),
fn(Action $action): bool => $action(['item' => $itemKey])->isVisible(),
);
$cloneAction = $cloneAction(['item' => $itemKey]);
$cloneActionIsVisible = $isCloneable && $cloneAction->isVisible();
@@ -64,16 +57,19 @@
$reorderActionIsVisible = $isReorderableWithDragAndDrop && $reorderAction->isVisible();
@endphp
<li
wire:key="{{ $item->getLivewireKey() }}.item"
x-sortable-item="{{ $itemKey }}"
class="fi-fo-simple-repeater-item"
>
<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)
@if (
$reorderActionIsVisible ||
$moveUpActionIsVisible ||
$moveDownActionIsVisible ||
$cloneActionIsVisible ||
$deleteActionIsVisible ||
$visibleExtraItemActions)
<ul class="fi-fo-simple-repeater-item-actions">
@if ($reorderActionIsVisible)
<li x-on:click.stop>
@@ -116,12 +112,12 @@
@endif
@if ($isAddable && $addAction->isVisible())
<div
@class([
'fi-fo-simple-repeater-add',
($addActionAlignment instanceof Alignment) ? ('fi-align-' . $addActionAlignment->value) : $addActionAlignment,
])
>
<div @class([
'fi-fo-simple-repeater-add',
$addActionAlignment instanceof Alignment
? 'fi-align-' . $addActionAlignment->value
: $addActionAlignment,
])>
{{ $addAction }}
</div>
@endif
@@ -36,35 +36,27 @@
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
{{ $attributes
->merge($getExtraAttributes(), escape: false)
->class([
'fi-fo-table-repeater',
'fi-compact' => $isCompact,
]) }}
>
{{ $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>
@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: ' . e($columnWidth = $column->getWidth())) => filled($columnWidth),
])
>
@if (! $column->isHeaderLabelHidden())
{{ $column->getLabel() }}@if ($column->isMarkedAsRequired())<sup class="fi-fo-table-repeater-header-required-mark">*</sup>
<th @class([
'fi-wrapped' => $column->canHeaderWrap(),
($columnAlignment = $column->getAlignment()) instanceof Alignment
? 'fi-align-' . $columnAlignment->value
: $columnAlignment,
]) @style([
'width: ' . e($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">
@@ -75,26 +67,27 @@
@endforeach
@if (count($extraItemActions) || $isCloneable || $isDeletable)
<th
class="fi-fo-table-repeater-empty-header-cell"
></th>
<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' => '$wire.mountAction(\'reorder\', { items: $event.target.sortable.toArray() }, { schemaComponent: \'' . $key . '\' })',
], escape: false) }}
>
<tbody x-sortable
{{ new ComponentAttributeBag()->merge(
[
'data-sortable-animation-duration' => $getReorderAnimationDuration(),
'x-on:end.stop' =>
'$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(),
fn(Action $action): bool => $action(['item' => $itemKey])->isVisible(),
);
$cloneAction = $cloneAction(['item' => $itemKey]);
$cloneActionIsVisible = $isCloneable && $cloneAction->isVisible();
@@ -108,16 +101,11 @@
$itemStatePath = $item->getStatePath();
@endphp
<tr
wire:key="{{ $item->getLivewireKey() }}.item"
x-sortable-item="{{ $itemKey }}"
>
@if ((count($items) > 1) && ($isReorderableWithButtons || $isReorderableWithDragAndDrop))
<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"
>
<div class="fi-fo-table-repeater-actions">
@if ($reorderActionIsVisible)
<div x-on:click.stop>
{{ $reorderAction->extraAttributes(['x-sortable-handle' => true], merge: true) }}
@@ -139,14 +127,18 @@
@endif
@php
$counter = 0
$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.'),
new \Exception(
'Table repeaters must only contain schema components, but [' .
$schemaComponent::class .
'] was used.',
),
);
@endphp
@@ -155,7 +147,7 @@
{{ $schemaComponent }}
@else
@php
$counter++
$counter++;
@endphp
@if ($schemaComponent->isVisible())
@@ -164,11 +156,13 @@
$columnVerticalAlignment = $currentColumn?->getVerticalAlignment();
@endphp
<td
@class([
($columnVerticalAlignment instanceof VerticalAlignment) ? ('fi-vertical-align-' . $columnVerticalAlignment->value) : (is_string($columnVerticalAlignment) ? $columnVerticalAlignment : ''),
])
>
<td @class([
$columnVerticalAlignment instanceof VerticalAlignment
? 'fi-vertical-align-' . $columnVerticalAlignment->value
: (is_string($columnVerticalAlignment)
? $columnVerticalAlignment
: ''),
])>
{!! $schemaComponent->toSchemaHtml() !!}
</td>
@else
@@ -181,9 +175,7 @@
@if (count($extraItemActions) || $isCloneable || $isDeletable)
<td>
@if ($visibleExtraItemActions || $cloneActionIsVisible || $deleteActionIsVisible)
<div
class="fi-fo-table-repeater-actions"
>
<div class="fi-fo-table-repeater-actions">
@foreach ($visibleExtraItemActions as $extraItemAction)
<div x-on:click.stop>
{{ $extraItemAction(['item' => $itemKey]) }}
@@ -212,12 +204,12 @@
@endif
@if ($isAddable && $addAction->isVisible())
<div
@class([
'fi-fo-table-repeater-add',
($addActionAlignment instanceof Alignment) ? ('fi-align-' . $addActionAlignment->value) : $addActionAlignment,
])
>
<div @class([
'fi-fo-table-repeater-add',
$addActionAlignment instanceof Alignment
? 'fi-align-' . $addActionAlignment->value
: $addActionAlignment,
])>
{{ $addAction }}
</div>
@endif
@@ -20,72 +20,55 @@
@endphp
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<x-filament::input.wrapper
:disabled="$isDisabled"
:valid="! $errors->has($statePath)"
x-cloak
:attributes="
\Filament\Support\prepare_inherited_attributes($extraAttributeBag)
->class(['fi-fo-rich-editor'])
"
>
<div
x-load
<x-filament::input.wrapper :disabled="$isDisabled" :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()),
canAttachFiles: @js($hasFileAttachments()),
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()),
floatingToolbars: @js($floatingToolbars),
getMentionLabelsUsing: async (mentions) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'getMentionLabelsForJs',
{ mentions },
)
},
getMentionSearchResultsUsing: async (query, char) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'getMentionSearchResultsForJs',
{ search: query, char },
)
},
hasResizableImages: @js($hasResizableImages()),
isDisabled: @js($isDisabled),
label: @js($label),
isLiveDebounced: @js($isLiveDebounced()),
isLiveOnBlur: @js($isLiveOnBlur()),
key: @js($key),
linkProtocols: @js($linkProtocols),
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),
mentions: @js($mentions),
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()),
})"
acceptedFileTypes: @js($fileAttachmentsAcceptedFileTypes),
acceptedFileTypesValidationMessage: @js($fileAttachmentsAcceptedFileTypes ? __('filament-forms::components.rich_editor.file_attachments_accepted_file_types_message', ['values' => implode(', ', $fileAttachmentsAcceptedFileTypes)]) : null),
activePanel: @js($getActivePanel()),
canAttachFiles: @js($hasFileAttachments()),
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()),
floatingToolbars: @js($floatingToolbars),
getMentionLabelsUsing: async (mentions) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'getMentionLabelsForJs', { mentions },
)
},
getMentionSearchResultsUsing: async (query, char) => {
return await $wire.callSchemaComponentMethod(
@js($key),
'getMentionSearchResultsForJs', { search: query, char },
)
},
hasResizableImages: @js($hasResizableImages()),
isDisabled: @js($isDisabled),
label: @js($label),
isLiveDebounced: @js($isLiveDebounced()),
isLiveOnBlur: @js($isLiveOnBlur()),
key: @js($key),
linkProtocols: @js($linkProtocols),
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),
mentions: @js($mentions),
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()),
})"
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))
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">
@@ -101,11 +84,7 @@
</div>
@endif
<div
x-show="isUploadingFile"
x-cloak
class="fi-fo-rich-editor-uploading-file-message"
>
<div x-show="isUploadingFile" x-cloak class="fi-fo-rich-editor-uploading-file-message">
{{ \Filament\Support\generate_loading_indicator_html() }}
<span>
@@ -113,26 +92,16 @@
</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 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 {{ $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"
>
<div x-ref="floatingToolbar::{{ $nodeName }}"
class="fi-fo-rich-editor-floating-toolbar fi-not-prose">
@foreach ($buttons as $button)
@if (is_string($button))
{{ $tools[$button] }}
@@ -144,30 +113,16 @@
@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"
>
@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"
>
<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>
@@ -176,25 +131,18 @@
<div class="fi-fo-rich-editor-custom-blocks-ctn">
@foreach ($groupedCustomBlocks as $customBlockGroupLabel => $groupBlocks)
@if (filled($customBlockGroupLabel))
<h4
class="fi-fo-rich-editor-custom-blocks-group-header"
>
<h4 class="fi-fo-rich-editor-custom-blocks-group-header">
{{ $customBlockGroupLabel }}
</h4>
@endif
<div
class="fi-fo-rich-editor-custom-blocks-list"
>
<div class="fi-fo-rich-editor-custom-blocks-list">
@foreach ($groupBlocks as $block)
@php
$blockId = $block::getId();
@endphp
<button
draggable="true"
type="button"
x-data="{ isLoading: false }"
<button draggable="true" type="button" x-data="{ isLoading: false }"
x-on:click="
isLoading = true
@@ -207,13 +155,12 @@
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([
class="fi-fo-rich-editor-custom-block-btn">
{{ \Filament\Support\generate_loading_indicator_html(
new \Illuminate\View\ComponentAttributeBag([
'x-show' => 'isLoading',
])))
}}
]),
) }}
{{ $block::getLabel() }}
</button>
@@ -223,24 +170,14 @@
</div>
</div>
<div
x-show="isPanelActive('mergeTags')"
x-cloak
class="fi-fo-rich-editor-panel"
>
<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"
>
<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>
@@ -248,17 +185,11 @@
<div class="fi-fo-rich-editor-merge-tags-list">
@foreach ($mergeTags as $tagId => $tagLabel)
<button
draggable="true"
type="button"
<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 }}"
>
class="fi-fo-rich-editor-merge-tag-btn">
<span data-type="mergeTag" data-id="{{ $tagId }}">
{{ $tagLabel }}
</span>
</button>
@@ -13,7 +13,7 @@
$isRequired = $isRequired();
$isConcealed = $isConcealed();
$isHtmlAllowed = $isHtmlAllowed();
$isNative = (! ($isSearchable || $isMultiple || $isHtmlAllowed) && $isNative());
$isNative = !($isSearchable || $isMultiple || $isHtmlAllowed) && $isNative();
$isPrefixInline = $isPrefixInline();
$isSuffixInline = $isSuffixInline();
$key = $getKey();
@@ -31,59 +31,41 @@
$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)"
<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)"
:x-on:focus-input.stop="$isNative ? '$el.querySelector(\'select\')?.focus()' : '$el.querySelector(\'.fi-select-input-btn\')?.focus()'"
: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,
])
"
>
: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)
@php
$options = $getOptions();
@endphp
<select
{{
$extraInputAttributeBag
->merge([
{{ $extraInputAttributeBag->merge(
[
'autofocus' => $isAutofocused,
'disabled' => $isDisabled,
'id' => $id,
'required' => $isRequired && (! $isConcealed),
'wire:key' => $hasDynamicOptions ? ($livewireKey . '.' . substr(md5(serialize($options)), 0, 64)) : null,
'required' => $isRequired && !$isConcealed,
'wire:key' => $hasDynamicOptions ? $livewireKey . '.' . substr(md5(serialize($options)), 0, 64) : null,
$applyStateBindingModifiers('wire:model') => $statePath,
], escape: false)
->class([
'fi-select-input',
'fi-select-input-has-inline-prefix' => $isPrefixInline && (count($prefixActions) || $prefixIcon || filled($prefixLabel)),
])
}}
>
],
escape: false,
)->class([
'fi-select-input',
'fi-select-input-has-inline-prefix' =>
$isPrefixInline && (count($prefixActions) || $prefixIcon || filled($prefixLabel)),
]) }}>
@if ($canSelectPlaceholder)
<option value="">
@if (! $isDisabled)
@if (!$isDisabled)
{{ $getPlaceholder() }}
@endif
</option>
@@ -93,10 +75,7 @@
@if (is_array($label))
<optgroup label="{{ $value }}">
@foreach ($label as $groupedValue => $groupedLabel)
<option
@disabled($isOptionDisabled($groupedValue, $groupedLabel))
value="{{ $groupedValue }}"
>
<option @disabled($isOptionDisabled($groupedValue, $groupedLabel)) value="{{ $groupedValue }}">
@if ($isHtmlAllowed)
{!! $groupedLabel !!}
@else
@@ -106,10 +85,7 @@
@endforeach
</optgroup>
@else
<option
@disabled($isOptionDisabled($value, $label))
value="{{ $value }}"
>
<option @disabled($isOptionDisabled($value, $label)) value="{{ $value }}">
@if ($isHtmlAllowed)
{!! $label !!}
@else
@@ -120,102 +96,83 @@
@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
<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),
getOptionLabelUsing: async () => {
return await Livewire.fireAction(
$wire.__instance,
'callSchemaComponentMethod',
[@js($key), 'getOptionLabel'],
{ async: true },
)
},
getOptionLabelsUsing: async () => {
return await Livewire.fireAction(
$wire.__instance,
'callSchemaComponentMethod',
[@js($key), 'getOptionLabelsForJs'],
{ async: true },
)
},
getOptionsUsing: async () => {
return await Livewire.fireAction(
$wire.__instance,
'callSchemaComponentMethod',
[@js($key), 'getOptionsForJs'],
{ async: true },
)
},
getSearchResultsUsing: async (search) => {
return await Livewire.fireAction(
$wire.__instance,
'callSchemaComponentMethod',
[@js($key), 'getSearchResultsForJs', { search }],
{ async: true },
)
},
hasDynamicOptions: @js($hasDynamicOptions),
hasDynamicSearchResults: @js($hasDynamicSearchResults()),
hasInitialNoOptionsMessage: @js($hasInitialNoOptionsMessage),
initialOptionLabel: @js((blank($state) || $isMultiple) ? null : $getOptionLabel()),
initialOptionLabels: @js((filled($state) && $isMultiple) ? $getOptionLabelsForJs() : []),
initialState: @js($state),
isAutofocused: @js($isAutofocused),
isDisabled: @js($isDisabled),
isHtmlAllowed: @js($isHtmlAllowed),
isMultiple: @js($isMultiple),
isReorderable: @js($isReorderable),
isSearchable: @js($isSearchable),
livewireId: @js($this->getId()),
loadingMessage: @js($getLoadingMessage()),
maxItems: @js($getMaxItems()),
maxItemsMessage: @js($getMaxItemsMessage()),
noOptionsMessage: @js($getNoOptionsMessage()),
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,
$isReorderable,
])), 0, 64)
}}"
canOptionLabelsWrap: @js($canOptionLabelsWrap),
canSelectPlaceholder: @js($canSelectPlaceholder),
getOptionLabelUsing: async () => {
return await Livewire.fireAction(
$wire.__instance,
'callSchemaComponentMethod',
[@js($key), 'getOptionLabel'], { async: true },
)
},
getOptionLabelsUsing: async () => {
return await Livewire.fireAction(
$wire.__instance,
'callSchemaComponentMethod',
[@js($key), 'getOptionLabelsForJs'], { async: true },
)
},
getOptionsUsing: async () => {
return await Livewire.fireAction(
$wire.__instance,
'callSchemaComponentMethod',
[@js($key), 'getOptionsForJs'], { async: true },
)
},
getSearchResultsUsing: async (search) => {
return await Livewire.fireAction(
$wire.__instance,
'callSchemaComponentMethod',
[@js($key), 'getSearchResultsForJs', { search }], { async: true },
)
},
hasDynamicOptions: @js($hasDynamicOptions),
hasDynamicSearchResults: @js($hasDynamicSearchResults()),
hasInitialNoOptionsMessage: @js($hasInitialNoOptionsMessage),
initialOptionLabel: @js(blank($state) || $isMultiple ? null : $getOptionLabel()),
initialOptionLabels: @js(filled($state) && $isMultiple ? $getOptionLabelsForJs() : []),
initialState: @js($state),
isAutofocused: @js($isAutofocused),
isDisabled: @js($isDisabled),
isHtmlAllowed: @js($isHtmlAllowed),
isMultiple: @js($isMultiple),
isReorderable: @js($isReorderable),
isSearchable: @js($isSearchable),
livewireId: @js($this->getId()),
loadingMessage: @js($getLoadingMessage()),
maxItems: @js($getMaxItems()),
maxItemsMessage: @js($getMaxItemsMessage()),
noOptionsMessage: @js($getNoOptionsMessage()),
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, $isReorderable])), 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'])
}}
>
{{ $attributes->merge($getExtraAlpineAttributes(), escape: false)->class(['fi-select-input']) }}>
<div x-ref="select"></div>
</div>
@endif
@@ -6,56 +6,43 @@
$isDisabled = $isDisabled();
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
:inline-label-vertical-alignment="\Filament\Support\Enums\VerticalAlignment::Center"
>
<div
x-load
<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([
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>
],
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>
@@ -8,24 +8,26 @@
<x-dynamic-component :component="$fieldWrapperView" :field="$field">
<div
{{
$attributes
->merge([
{{ $attributes->merge(
[
'id' => $id,
], escape: false)
->merge($extraAttributes, escape: false)
}}
>
@livewire(TableSelectLivewireComponent::class, [
'isDisabled' => $isDisabled(),
'maxSelectableRecords' => $getMaxItems(),
'model' => $getModel(),
'record' => $getRecord(),
'relationshipName' => $getRelationshipName(),
'shouldIgnoreRelatedRecords' => $shouldIgnoreRelatedRecords(),
'tableConfiguration' => base64_encode($getTableConfiguration()),
'tableArguments' => $getTableArguments(),
$applyStateBindingModifiers('wire:model') => $getStatePath(),
], key($getLivewireKey()))
],
escape: false,
)->merge($extraAttributes, escape: false) }}>
@livewire(
TableSelectLivewireComponent::class,
[
'isDisabled' => $isDisabled(),
'maxSelectableRecords' => $getMaxItems(),
'model' => $getModel(),
'record' => $getRecord(),
'relationshipName' => $getRelationshipName(),
'shouldIgnoreRelatedRecords' => $shouldIgnoreRelatedRecords(),
'tableConfiguration' => base64_encode($getTableConfiguration()),
'tableArguments' => $getTableArguments(),
$applyStateBindingModifiers('wire:model') => $getStatePath(),
],
key($getLivewireKey())
)
</div>
</x-dynamic-component>
@@ -7,7 +7,7 @@
$isAutofocused = $isAutofocused();
$isDisabled = $isDisabled();
$isPrefixInline = $isPrefixInline();
$isReorderable = (! $isDisabled) && $isReorderable();
$isReorderable = !$isDisabled && $isReorderable();
$isSuffixInline = $isSuffixInline();
$placeholder = $getPlaceholder();
$prefixActions = $getPrefixActions();
@@ -21,47 +21,21 @@
$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)"
x-on:focus-input.stop="$el.querySelector('input')?.focus()"
:attributes="
\Filament\Support\prepare_inherited_attributes($attributes)
->merge($extraAttributes, escape: false)
->class([
'fi-fo-tags-input',
'fi-disabled' => $isDisabled,
])
"
>
<div
x-load
<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)" x-on:focus-input.stop="$el.querySelector('input')?.focus()" :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() }}
>
state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
splitKeys: @js($getSplitKeys()),
})" {{ $getExtraAlpineAttributeBag() }}>
<input
{{
$extraInputAttributeBag
->merge([
{{ $extraInputAttributeBag->merge(
[
'autocomplete' => 'off',
'autofocus' => $isAutofocused,
'disabled' => $isDisabled,
@@ -70,21 +44,20 @@
'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)),
])
}}
/>
],
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)"
>
<template x-bind:key="@js($suggestion)"
x-if="! (state?.includes(@js($suggestion)) ?? true)">
<option value="{{ $suggestion }}" />
</template>
@endforeach
@@ -92,37 +65,25 @@
<div wire:ignore>
<template x-cloak x-if="state?.length">
<div
@if ($isReorderable)
x-on:end.stop="reorderTags($event)"
<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"
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-bind:aria-label="'\'' . __('filament-forms::components.tags_input.actions.delete.label') . ': \' + tag'"
></x-slot>
<x-slot name="deleteButton" x-on:click.stop="deleteTag(tag)"
:x-bind:aria-label="'\''.__('filament-forms::components.tags_input.actions.delete.label').
': \' + tag'"></x-slot>
</x-filament::badge>
</template>
</div>
@@ -42,68 +42,48 @@
$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)
->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"
x-on:focus-input.stop="$el.querySelector('input')?.focus()"
:attributes="
\Filament\Support\prepare_inherited_attributes($extraAttributeBag)
->class(['fi-fo-text-input'])
"
>
<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" x-on:focus-input.stop="$el.querySelector('input')?.focus()"
: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)),
])
}}
/>
{{ $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)
@@ -9,63 +9,46 @@
$placeholder = $getPlaceholder();
$statePath = $getStatePath();
$initialHeight = (($rows ?? 2) * 1.5) + 0.75;
$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,
])
"
>
<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
<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
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"
@if ($isGrammarlyDisabled()) data-gramm="false"
data-gramm_editor="false"
data-enable-grammarly="false"
@endif
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>
{{ $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>
@@ -9,15 +9,8 @@
$extraInputAttributeBag = $getExtraInputAttributeBag()->class(['fi-fo-toggle-buttons-input']);
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
tabindex="-1"
class="fi-fo-toggle-buttons-wrp"
>
<div
{{ $getExtraAttributeBag()->class(['fi-fo-toggle-buttons fi-btn-group']) }}
>
<x-dynamic-component :component="$fieldWrapperView" :field="$field" tabindex="-1" 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}";
@@ -27,29 +20,13 @@
$tooltip = $getTooltip($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 }}
/>
<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"
:tooltip="$tooltip"
>
<x-filament::button :color="$color" :disabled="$shouldOptionBeDisabled" :for="$inputId" grouped :icon="$icon"
:label-sr-only="$areButtonLabelsHidden" tag="label" :tooltip="$tooltip">
{{ $label }}
</x-filament::button>
@endforeach
@@ -14,22 +14,9 @@
$extraInputAttributeBag = $getExtraInputAttributeBag()->class(['fi-fo-toggle-buttons-input']);
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:field="$field"
tabindex="-1"
class="fi-fo-toggle-buttons-wrp"
>
<x-dynamic-component :component="$fieldWrapperView" :field="$field" tabindex="-1" 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,
])
}}
>
{{ $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}";
@@ -40,28 +27,13 @@
@endphp
<div class="fi-fo-toggle-buttons-btn-ctn">
<input
@if ($loop->first && $isAutofocused()) autofocus @endif
@disabled($shouldOptionBeDisabled)
id="{{ $inputId }}"
@if (! $isMultiple)
name="{{ $id }}"
@endif
type="{{ $isMultiple ? 'checkbox' : 'radio' }}"
value="{{ $value }}"
{{ $wireModelAttribute }}="{{ $statePath }}"
{{ $extraInputAttributeBag }}
/>
<input @if ($loop->first && $isAutofocused()) autofocus @endif @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"
:tooltip="$tooltip"
>
<x-filament::button :color="$color" :disabled="$shouldOptionBeDisabled" :for="$inputId" :icon="$icon"
:label-sr-only="$areButtonLabelsHidden" tag="label" :tooltip="$tooltip">
{{ $label }}
</x-filament::button>
</div>
@@ -4,39 +4,34 @@
$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)
$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"
>
<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-filament::toggle :attributes="\Filament\Support\prepare_inherited_attributes($attributes)" />
</x-slot>
@else
<x-filament::toggle
:attributes="\Filament\Support\prepare_inherited_attributes($attributes)"
/>
<x-filament::toggle :attributes="\Filament\Support\prepare_inherited_attributes($attributes)" />
@endif
</x-dynamic-component>
@@ -20,8 +20,8 @@
$shouldOpenUrlInNewTab ??= $entry->shouldOpenUrlInNewTab();
}
if (! $alignment instanceof Alignment) {
$alignment = filled($alignment) ? (Alignment::tryFrom($alignment) ?? $alignment) : null;
if (!$alignment instanceof Alignment) {
$alignment = filled($alignment) ? Alignment::tryFrom($alignment) ?? $alignment : null;
}
$beforeLabelContainer = $entry?->getChildSchema($entry::BEFORE_LABEL_SCHEMA_KEY)?->toHtmlString();
@@ -31,15 +31,7 @@
@endphp
<div
{{
$attributes
->merge($entry?->getExtraEntryWrapperAttributes() ?? [], escape: false)
->class([
'fi-in-entry',
'fi-in-entry-has-inline-label' => $hasInlineLabel,
])
}}
>
{{ $attributes->merge($entry?->getExtraEntryWrapperAttributes() ?? [], escape: false)->class(['fi-in-entry', 'fi-in-entry-has-inline-label' => $hasInlineLabel]) }}>
@if ($label && $labelSrOnly)
<div class="fi-in-entry-label fi-sr-only" role="term">
{{ $label }}
@@ -49,27 +41,20 @@
<div class="fi-in-entry-label-col">
{{ $entry?->getChildSchema($entry::ABOVE_LABEL_SCHEMA_KEY) }}
@if (($label && (! $labelSrOnly)) || $beforeLabelContainer || $afterLabelContainer)
<div
@class([
'fi-in-entry-label-ctn',
($label instanceof \Illuminate\View\ComponentSlot) ? $label->attributes->get('class') : null,
])
>
@if (($label && !$labelSrOnly) || $beforeLabelContainer || $afterLabelContainer)
<div @class([
'fi-in-entry-label-ctn',
$label instanceof \Illuminate\View\ComponentSlot
? $label->attributes->get('class')
: null,
])>
{{ $beforeLabelContainer }}
@if ($label && (! $labelSrOnly))
<div
{{
(
($label instanceof \Illuminate\View\ComponentSlot)
? $label->attributes
: (new ComponentAttributeBag)
)
->class(['fi-in-entry-label'])
}}
role="term"
>
@if ($label && !$labelSrOnly)
<div {{ ($label instanceof \Illuminate\View\ComponentSlot ? $label->attributes : new ComponentAttributeBag())->class(
['fi-in-entry-label'],
) }}
role="term">
{{ $label }}
</div>
@endif
@@ -88,13 +73,15 @@
{{ $beforeContentContainer }}
@if (filled($url))
<a
{{ \Filament\Support\generate_href_html($url, $shouldOpenUrlInNewTab) }}
<a {{ \Filament\Support\generate_href_html($url, $shouldOpenUrlInNewTab) }}
@class([
'fi-in-entry-content',
(($alignment instanceof Alignment) ? "fi-align-{$alignment->value}" : (is_string($alignment) ? $alignment : '')),
])
>
$alignment instanceof Alignment
? "fi-align-{$alignment->value}"
: (is_string($alignment)
? $alignment
: ''),
])>
{{ $slot }}
</a>
@elseif (filled($action))
@@ -102,25 +89,26 @@
$wireClickAction = $action->getLivewireClickHandler();
@endphp
<button
type="button"
wire:click="{{ $wireClickAction }}"
wire:loading.attr="disabled"
wire:target="{{ $wireClickAction }}"
@class([
<button type="button" wire:click="{{ $wireClickAction }}" wire:loading.attr="disabled"
wire:target="{{ $wireClickAction }}" @class([
'fi-in-entry-content',
(($alignment instanceof Alignment) ? "fi-align-{$alignment->value}" : (is_string($alignment) ? $alignment : '')),
])
>
$alignment instanceof Alignment
? "fi-align-{$alignment->value}"
: (is_string($alignment)
? $alignment
: ''),
])>
{{ $slot }}
</button>
@else
<div
@class([
'fi-in-entry-content',
(($alignment instanceof Alignment) ? "fi-align-{$alignment->value}" : (is_string($alignment) ? $alignment : '')),
])
>
<div @class([
'fi-in-entry-content',
$alignment instanceof Alignment
? "fi-align-{$alignment->value}"
: (is_string($alignment)
? $alignment
: ''),
])>
{{ $slot }}
</div>
@endif
@@ -11,30 +11,13 @@
@endphp
<div class="fi-no-database">
<x-filament::modal
:alignment="$hasNotifications ? null : Alignment::Center"
close-button
:description="$hasNotifications ? null : __('filament-notifications::database.modal.empty.description')"
:heading="$hasNotifications ? null : __('filament-notifications::database.modal.empty.heading')"
:icon="$hasNotifications ? null : \Filament\Support\Icons\Heroicon::OutlinedBellSlash"
:icon-alias="
$hasNotifications
<x-filament::modal :alignment="$hasNotifications ? null : Alignment::Center" close-button :description="$hasNotifications ? null : __('filament-notifications::database.modal.empty.description')" :heading="$hasNotifications ? null : __('filament-notifications::database.modal.empty.heading')" :icon="$hasNotifications ? null : \Filament\Support\Icons\Heroicon::OutlinedBellSlash"
:icon-alias="$hasNotifications
? null
: \Filament\Notifications\View\NotificationsIconAlias::DATABASE_MODAL_EMPTY_STATE
"
:icon-color="$hasNotifications ? null : 'gray'"
id="database-notifications"
slide-over
:sticky-header="$hasNotifications"
teleport="body"
width="md"
class="fi-no-database"
:attributes="
new \Illuminate\View\ComponentAttributeBag([
'wire:poll.' . $pollingInterval => $pollingInterval ? '' : false,
])
"
>
: \Filament\Notifications\View\NotificationsIconAlias::DATABASE_MODAL_EMPTY_STATE" :icon-color="$hasNotifications ? null : 'gray'" id="database-notifications" slide-over :sticky-header="$hasNotifications" teleport="body"
width="md" class="fi-no-database" :attributes="new \Illuminate\View\ComponentAttributeBag([
'wire:poll.' . $pollingInterval => $pollingInterval ? '' : false,
])">
@if ($trigger = $this->getTrigger())
<x-slot name="trigger">
{{ $trigger->with(['unreadNotificationsCount' => $unreadNotificationsCount]) }}
@@ -49,12 +32,7 @@
@if ($unreadNotificationsCount)
<span
{{
(new ComponentAttributeBag)->color(BadgeComponent::class, 'primary')->class([
'fi-badge fi-size-xs',
])
}}
>
{{ new ComponentAttributeBag()->color(BadgeComponent::class, 'primary')->class(['fi-badge fi-size-xs']) }}>
{{ $unreadNotificationsCount }}
</span>
@endif
@@ -73,12 +51,10 @@
</x-slot>
@foreach ($notifications as $notification)
<div
@class([
'fi-no-notification-read-ctn' => ! $notification->unread(),
'fi-no-notification-unread-ctn' => $notification->unread(),
])
>
<div @class([
'fi-no-notification-read-ctn' => !$notification->unread(),
'fi-no-notification-unread-ctn' => $notification->unread(),
])>
{{ $this->getNotification($notification)->inline() }}
</div>
@endforeach
@@ -4,14 +4,11 @@
@endphp
<div>
<div
@class([
'fi-no',
'fi-align-' . static::$alignment->value,
'fi-vertical-align-' . static::$verticalAlignment->value,
])
role="status"
>
<div @class([
'fi-no',
'fi-align-' . static::$alignment->value,
'fi-vertical-align-' . static::$verticalAlignment->value,
]) role="status">
@foreach ($notifications as $notification)
{{ $notification }}
@endforeach
@@ -25,9 +22,9 @@
(notification) => {
setTimeout(
() =>
$wire.handleBroadcastNotification(
notification,
),
$wire.handleBroadcastNotification(
notification,
),
500,
)
},
@@ -7,12 +7,4 @@
$alt = __('filament-panels::layout.avatar.alt', ['name' => filament()->getTenantName($tenant)]);
@endphp
<x-filament::avatar
:circular="false"
:src="$src"
:alt="$alt"
:attributes="
\Filament\Support\prepare_inherited_attributes($attributes)
->class(['fi-tenant-avatar'])
"
/>
<x-filament::avatar :circular="false" :src="$src" :alt="$alt" :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->class(['fi-tenant-avatar'])" />
@@ -7,11 +7,4 @@
$alt = __('filament-panels::layout.avatar.alt', ['name' => filament()->getUserName($user)]);
@endphp
<x-filament::avatar
:src="$src"
:alt="$alt"
:attributes="
\Filament\Support\prepare_inherited_attributes($attributes)
->class(['fi-user-avatar'])
"
/>
<x-filament::avatar :src="$src" :alt="$alt" :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->class(['fi-user-avatar'])" />
@@ -6,14 +6,7 @@
'subheading' => null,
])
<header
{{
$attributes->class([
'fi-header',
'fi-header-has-breadcrumbs' => $breadcrumbs,
])
}}
>
<header {{ $attributes->class(['fi-header', 'fi-header-has-breadcrumbs' => $breadcrumbs]) }}>
<div>
@if ($breadcrumbs)
<x-filament::breadcrumbs :breadcrumbs="$breadcrumbs" />
@@ -37,8 +30,14 @@
</div>
@php
$beforeActions = \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_HEADER_ACTIONS_BEFORE, scopes: $this->getRenderHookScopes());
$afterActions = \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_HEADER_ACTIONS_AFTER, scopes: $this->getRenderHookScopes());
$beforeActions = \Filament\Support\Facades\FilamentView::renderHook(
\Filament\View\PanelsRenderHook::PAGE_HEADER_ACTIONS_BEFORE,
scopes: $this->getRenderHookScopes(),
);
$afterActions = \Filament\Support\Facades\FilamentView::renderHook(
\Filament\View\PanelsRenderHook::PAGE_HEADER_ACTIONS_AFTER,
scopes: $this->getRenderHookScopes(),
);
@endphp
@if (filled($beforeActions) || $actions || filled($afterActions))
@@ -46,10 +45,7 @@
{{ $beforeActions }}
@if ($actions)
<x-filament::actions
:actions="$actions"
:alignment="$actionsAlignment"
/>
<x-filament::actions :actions="$actions" :alignment="$actionsAlignment" />
@endif
{{ $afterActions }}
@@ -9,23 +9,20 @@
$hasTopNavigation = filament()->hasTopNavigation();
$hasNavigation = filament()->hasNavigation();
$renderHookScopes = $livewire?->getRenderHookScopes();
$maxContentWidth ??= (filament()->getMaxContentWidth() ?? Width::SevenExtraLarge);
$maxContentWidth ??= filament()->getMaxContentWidth() ?? Width::SevenExtraLarge;
if (is_string($maxContentWidth)) {
$maxContentWidth = Width::tryFrom($maxContentWidth) ?? $maxContentWidth;
}
@endphp
<x-filament-panels::layout.base
:livewire="$livewire"
@class([
'fi-body-has-navigation' => $hasNavigation,
'fi-body-has-sidebar-collapsible-on-desktop' => $isSidebarCollapsibleOnDesktop,
'fi-body-has-sidebar-fully-collapsible-on-desktop' => $isSidebarFullyCollapsibleOnDesktop,
'fi-body-has-topbar' => $hasTopbar,
'fi-body-has-top-navigation' => $hasTopNavigation,
])
>
<x-filament-panels::layout.base :livewire="$livewire" @class([
'fi-body-has-navigation' => $hasNavigation,
'fi-body-has-sidebar-collapsible-on-desktop' => $isSidebarCollapsibleOnDesktop,
'fi-body-has-sidebar-fully-collapsible-on-desktop' => $isSidebarFullyCollapsibleOnDesktop,
'fi-body-has-topbar' => $hasTopbar,
'fi-body-has-top-navigation' => $hasTopNavigation,
])>
@if ($hasTopbar)
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TOPBAR_BEFORE, scopes: $renderHookScopes) }}
@@ -33,27 +30,14 @@
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TOPBAR_AFTER, scopes: $renderHookScopes) }}
@elseif ($hasNavigation)
<div
@if ($isSidebarFullyCollapsibleOnDesktop)
x-data="{}"
x-bind:class="{ 'lg:fi-hidden': $store.sidebar.isOpen }"
@endif
<div @if ($isSidebarFullyCollapsibleOnDesktop) x-data="{}"
x-bind:class="{ 'lg:fi-hidden': $store.sidebar.isOpen }" @endif
@class([
'fi-layout-sidebar-toggle-btn-ctn',
'lg:fi-hidden' => ! $isSidebarFullyCollapsibleOnDesktop,
])
>
<x-filament::icon-button
color="gray"
:icon="\Filament\Support\Icons\Heroicon::OutlinedBars3"
:icon-alias="\Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON"
icon-size="lg"
:label="__('filament-panels::layout.actions.sidebar.expand.label')"
x-cloak
x-data="{}"
x-on:click="$store.sidebar.open()"
class="fi-layout-sidebar-toggle-btn"
/>
'lg:fi-hidden' => !$isSidebarFullyCollapsibleOnDesktop,
])>
<x-filament::icon-button color="gray" :icon="\Filament\Support\Icons\Heroicon::OutlinedBars3" :icon-alias="\Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON" icon-size="lg" :label="__('filament-panels::layout.actions.sidebar.expand.label')"
x-cloak x-data="{}" x-on:click="$store.sidebar.open()" class="fi-layout-sidebar-toggle-btn" />
</div>
@endif
@@ -61,21 +45,13 @@
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::LAYOUT_START, scopes: $renderHookScopes) }}
@if ($hasNavigation)
<div
x-cloak
x-data="{}"
x-on:click="$store.sidebar.close()"
x-show="$store.sidebar.isOpen"
x-transition.opacity.300ms
class="fi-sidebar-close-overlay"
></div>
<div x-cloak x-data="{}" x-on:click="$store.sidebar.close()" x-show="$store.sidebar.isOpen"
x-transition.opacity.300ms class="fi-sidebar-close-overlay"></div>
@livewire(filament()->getSidebarLivewireComponent())
@endif
<div
@if ($isSidebarCollapsibleOnDesktop)
x-data="{}"
<div @if ($isSidebarCollapsibleOnDesktop) x-data="{}"
x-bind:class="{
'fi-main-ctn-sidebar-open': $store.sidebar.isOpen,
}"
@@ -88,20 +64,18 @@
}"
x-bind:style="'display: flex; opacity:1;'"
{{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}}
@elseif (! ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop || $hasTopNavigation || (! $hasNavigation)))
@elseif (!($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop || $hasTopNavigation || !$hasNavigation))
x-data="{}"
x-bind:style="'display: flex; opacity:1;'" {{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}}
@endif
class="fi-main-ctn"
>
x-bind:style="'display: flex; opacity:1;'" {{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}} @endif
class="fi-main-ctn">
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::CONTENT_BEFORE, scopes: $renderHookScopes) }}
<main
@class([
'fi-main',
($maxContentWidth instanceof Width) ? "fi-width-{$maxContentWidth->value}" : $maxContentWidth,
])
>
<main @class([
'fi-main',
$maxContentWidth instanceof Width
? "fi-width-{$maxContentWidth->value}"
: $maxContentWidth,
])>
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::CONTENT_START, scopes: $renderHookScopes) }}
{{ $slot }}
@@ -4,7 +4,7 @@
$livewire ??= null;
$renderHookScopes = $livewire?->getRenderHookScopes();
$maxContentWidth ??= (filament()->getSimplePageMaxContentWidth() ?? Width::Large);
$maxContentWidth ??= filament()->getSimplePageMaxContentWidth() ?? Width::Large;
if (is_string($maxContentWidth)) {
$maxContentWidth = Width::tryFrom($maxContentWidth) ?? $maxContentWidth;
@@ -37,12 +37,12 @@
@endif
<div class="fi-simple-main-ctn">
<main
@class([
'fi-simple-main',
($maxContentWidth instanceof Width) ? "fi-width-{$maxContentWidth->value}" : $maxContentWidth,
])
>
<main @class([
'fi-simple-main',
$maxContentWidth instanceof Width
? "fi-width-{$maxContentWidth->value}"
: $maxContentWidth,
])>
{{ $slot }}
</main>
</div>
@@ -5,9 +5,9 @@
$darkModeBrandLogo = filament()->getDarkModeBrandLogo();
$hasDarkModeBrandLogo = filled($darkModeBrandLogo);
$getLogoClasses = fn (bool $isDarkMode): string => \Illuminate\Support\Arr::toCssClasses([
$getLogoClasses = fn(bool $isDarkMode): string => \Illuminate\Support\Arr::toCssClasses([
'fi-logo',
'fi-logo-light' => $hasDarkModeBrandLogo && (! $isDarkMode),
'fi-logo-light' => $hasDarkModeBrandLogo && !$isDarkMode,
'fi-logo-dark' => $isDarkMode,
]);
@@ -16,33 +16,14 @@
@capture($content, $logo, $isDarkMode = false)
@if ($logo instanceof \Illuminate\Contracts\Support\Htmlable)
<div
{{
$attributes
->class([$getLogoClasses($isDarkMode)])
->style([$logoStyles])
}}
>
<div {{ $attributes->class([$getLogoClasses($isDarkMode)])->style([$logoStyles]) }}>
{{ $logo }}
</div>
@elseif (filled($logo))
<img
alt="{{ __('filament-panels::layout.logo.alt', ['name' => $brandName]) }}"
src="{{ $logo }}"
{{
$attributes
->class([$getLogoClasses($isDarkMode)])
->style([$logoStyles])
}}
/>
<img alt="{{ __('filament-panels::layout.logo.alt', ['name' => $brandName]) }}" src="{{ $logo }}"
{{ $attributes->class([$getLogoClasses($isDarkMode)])->style([$logoStyles]) }} />
@else
<div
{{
$attributes->class([
$getLogoClasses($isDarkMode),
])
}}
>
<div {{ $attributes->class([$getLogoClasses($isDarkMode)]) }}>
{{ $brandName }}
</div>
@endif
@@ -11,33 +11,24 @@
@endphp
<div
{{
$attributes->class([
'fi-page',
'fi-height-full' => $fullHeight,
'fi-page-has-sub-navigation' => $subNavigation,
"fi-page-has-sub-navigation-{$subNavigationPosition->value}" => $subNavigation,
...$this->getPageClasses(),
])
}}
>
{{ $attributes->class([
'fi-page',
'fi-height-full' => $fullHeight,
'fi-page-has-sub-navigation' => $subNavigation,
"fi-page-has-sub-navigation-{$subNavigationPosition->value}" => $subNavigation,
...$this->getPageClasses(),
]) }}>
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_START, scopes: $this->getRenderHookScopes()) }}
<div class="fi-page-header-main-ctn">
@if ($subNavigation)
<div
class="fi-page-main-sub-navigation-mobile-menu-render-hook-ctn"
>
<div class="fi-page-main-sub-navigation-mobile-menu-render-hook-ctn">
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_MOBILE_MENU_BEFORE, scopes: $this->getRenderHookScopes()) }}
</div>
<x-filament-panels::page.sub-navigation.mobile-menu
:navigation="$subNavigation"
/>
<x-filament-panels::page.sub-navigation.mobile-menu :navigation="$subNavigation" />
<div
class="fi-page-main-sub-navigation-mobile-menu-render-hook-ctn"
>
<div class="fi-page-main-sub-navigation-mobile-menu-render-hook-ctn">
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_MOBILE_MENU_AFTER, scopes: $this->getRenderHookScopes()) }}
</div>
@endif
@@ -54,13 +45,8 @@
@endphp
@if (filled($headerActions) || $breadcrumbs || filled($heading) || filled($subheading))
<x-filament-panels::header
:actions="$headerActions"
:actions-alignment="$headerActionsAlignment"
:breadcrumbs="$breadcrumbs"
:heading="$heading"
:subheading="$subheading"
>
<x-filament-panels::header :actions="$headerActions" :actions-alignment="$headerActionsAlignment" :breadcrumbs="$breadcrumbs" :heading="$heading"
:subheading="$subheading">
@if ($heading instanceof \Illuminate\Contracts\Support\Htmlable)
<x-slot name="heading">
{{ $heading }}
@@ -81,9 +67,7 @@
@if ($subNavigationPosition === SubNavigationPosition::Start)
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_START_BEFORE, scopes: $this->getRenderHookScopes()) }}
<x-filament-panels::page.sub-navigation.sidebar
:navigation="$subNavigation"
/>
<x-filament-panels::page.sub-navigation.sidebar :navigation="$subNavigation" />
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_START_AFTER, scopes: $this->getRenderHookScopes()) }}
@endif
@@ -91,9 +75,7 @@
@if ($subNavigationPosition === SubNavigationPosition::Top)
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_TOP_BEFORE, scopes: $this->getRenderHookScopes()) }}
<x-filament-panels::page.sub-navigation.tabs
:navigation="$subNavigation"
/>
<x-filament-panels::page.sub-navigation.tabs :navigation="$subNavigation" />
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_TOP_AFTER, scopes: $this->getRenderHookScopes()) }}
@endif
@@ -118,9 +100,7 @@
@if ($subNavigation && $subNavigationPosition === SubNavigationPosition::End)
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_END_BEFORE, scopes: $this->getRenderHookScopes()) }}
<x-filament-panels::page.sub-navigation.sidebar
:navigation="$subNavigation"
/>
<x-filament-panels::page.sub-navigation.sidebar :navigation="$subNavigation" />
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_END_AFTER, scopes: $this->getRenderHookScopes()) }}
@endif
@@ -131,18 +111,18 @@
@endif
</div>
@if (! ($this instanceof \Filament\Tables\Contracts\HasTable))
@if (!($this instanceof \Filament\Tables\Contracts\HasTable))
<x-filament-actions::modals />
@elseif ($this->isTableLoaded() && filled($this->defaultTableAction))
<div
wire:init="mountAction(@js($this->defaultTableAction) , @if (filled($this->defaultTableActionArguments)) @js($this->defaultTableActionArguments) @else {} @endif , @js(['table' => true, 'recordKey' => $this->defaultTableActionRecord]))"
></div>
wire:init="mountAction(@js($this->defaultTableAction) , @if (filled($this->defaultTableActionArguments)) @js($this->defaultTableActionArguments) @else {} @endif , @js(['table' => true, 'recordKey' => $this->defaultTableActionRecord]))">
</div>
@endif
@if (filled($this->defaultAction))
<div
wire:init="mountAction(@js($this->defaultAction) @if (filled($this->defaultActionArguments) || filled($this->defaultActionContext)) , @if (filled($this->defaultActionArguments)) @js($this->defaultActionArguments) @else {} @endif @endif @if (filled($this->defaultActionContext)) , @js($this->defaultActionContext) @endif)"
></div>
wire:init="mountAction(@js($this->defaultAction) @if (filled($this->defaultActionArguments) || filled($this->defaultActionContext)) , @if (filled($this->defaultActionArguments)) @js($this->defaultActionArguments) @else {} @endif @endif @if (filled($this->defaultActionContext)) , @js($this->defaultActionContext) @endif)">
</div>
@endif
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_END, scopes: $this->getRenderHookScopes()) }}
@@ -161,13 +141,15 @@
@else
@script
<script>
setUpUnsavedDataChangesAlert({ $wire })
setUpUnsavedDataChangesAlert({
$wire
})
</script>
@endscript
@endif
@endif
@if (! app()->hasDebugModeEnabled())
@if (!app()->hasDebugModeEnabled())
@script
<script>
window.filamentErrorNotifications = @js($this->hasErrorNotifications() ? $this->getErrorNotifications() : null)
@@ -14,17 +14,13 @@
<div class="fi-simple-page-content">
@if (filled($heading) || $hasLogo || filled($subheading))
<x-filament-panels::header.simple
:heading="$heading"
:logo="$hasLogo"
:subheading="$subheading"
/>
<x-filament-panels::header.simple :heading="$heading" :logo="$hasLogo" :subheading="$subheading" />
@endif
{{ $slot }}
</div>
@if (! $this instanceof \Filament\Tables\Contracts\HasTable)
@if (!$this instanceof \Filament\Tables\Contracts\HasTable)
<x-filament-actions::modals />
@endif
@@ -1,15 +1,6 @@
@props([
'navigation',
])
@props(['navigation'])
<x-filament::dropdown
placement="bottom-start"
width="xs"
:attributes="
\Filament\Support\prepare_inherited_attributes($attributes)
->class(['fi-page-sub-navigation-dropdown'])
"
>
<x-filament::dropdown placement="bottom-start" width="xs" :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->class(['fi-page-sub-navigation-dropdown'])">
<x-slot name="trigger">
@php
$activeItem = null;
@@ -27,12 +18,7 @@
}
@endphp
<x-filament::button
color="gray"
:icon="\Filament\Support\Icons\Heroicon::ChevronDown"
:icon-alias="\Filament\View\PanelsIconAlias::SUB_NAVIGATION_MOBILE_MENU_BUTTON"
icon-position="after"
>
<x-filament::button color="gray" :icon="\Filament\Support\Icons\Heroicon::ChevronDown" :icon-alias="\Filament\View\PanelsIconAlias::SUB_NAVIGATION_MOBILE_MENU_BUTTON" icon-position="after">
{{ $activeItem?->getLabel() }}
</x-filament::button>
</x-slot>
@@ -50,21 +36,16 @@
@php
$navigationItemBadge = $navigationItem->getBadge();
$navigationItemBadgeColor = $navigationItem->getBadgeColor($navigationItemBadge);
$navigationItemIcon = $navigationItem->isActive() ? ($navigationItem->getActiveIcon() ?? $navigationItem->getIcon()) : $navigationItem->getIcon();
$navigationItemIcon = $navigationItem->isActive()
? $navigationItem->getActiveIcon() ?? $navigationItem->getIcon()
: $navigationItem->getIcon();
$navigationItemUrl = $navigationItem->getUrl();
$shouldNavigationItemOpenUrlInNewTab = $navigationItem->shouldOpenUrlInNewTab();
$navigationItemExtraAttributes = $navigationItemChild->getExtraAttributeBag();
@endphp
<x-filament::dropdown.list.item
:badge="$navigationItemBadge"
:badge-color="$navigationItemBadgeColor"
:href="$navigationItemUrl"
:icon="$navigationItemIcon"
tag="a"
:target="$shouldNavigationItemOpenUrlInNewTab ? '_blank' : null"
:attributes="\Filament\Support\prepare_inherited_attributes($navigationItemExtraAttributes)"
>
<x-filament::dropdown.list.item :badge="$navigationItemBadge" :badge-color="$navigationItemBadgeColor" :href="$navigationItemUrl"
:icon="$navigationItemIcon" tag="a" :target="$shouldNavigationItemOpenUrlInNewTab ? '_blank' : null" :attributes="\Filament\Support\prepare_inherited_attributes($navigationItemExtraAttributes)">
{{ $navigationItemChild->getLabel() }}
</x-filament::dropdown.list.item>
@endforeach
@@ -1,10 +1,6 @@
@props([
'navigation',
])
@props(['navigation'])
<div
{{ $attributes->class(['fi-page-sub-navigation-sidebar-ctn']) }}
>
<div {{ $attributes->class(['fi-page-sub-navigation-sidebar-ctn']) }}>
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_SUB_NAVIGATION_SIDEBAR_BEFORE, scopes: $this->getRenderHookScopes()) }}
<ul class="fi-page-sub-navigation-sidebar">
@@ -18,16 +14,8 @@
$navigationGroupExtraSidebarAttributeBag = $navigationGroup->getExtraSidebarAttributeBag();
@endphp
<x-filament-panels::sidebar.group
:active="$isNavigationGroupActive"
:collapsible="$isNavigationGroupCollapsible"
:icon="$navigationGroupIcon"
:items="$navigationGroupItems"
:label="$navigationGroupLabel"
:sidebar-collapsible="false"
sub-navigation
:attributes="\Filament\Support\prepare_inherited_attributes($navigationGroupExtraSidebarAttributeBag)"
/>
<x-filament-panels::sidebar.group :active="$isNavigationGroupActive" :collapsible="$isNavigationGroupCollapsible" :icon="$navigationGroupIcon" :items="$navigationGroupItems"
:label="$navigationGroupLabel" :sidebar-collapsible="false" sub-navigation :attributes="\Filament\Support\prepare_inherited_attributes($navigationGroupExtraSidebarAttributeBag)" />
@endforeach
</ul>
@@ -1,10 +1,6 @@
@props([
'navigation',
])
@props(['navigation'])
<x-filament::tabs
:attributes="\Filament\Support\prepare_inherited_attributes($attributes)->class(['fi-page-sub-navigation-tabs'])"
>
<x-filament::tabs :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->class(['fi-page-sub-navigation-tabs'])">
@foreach ($navigation as $navigationGroup)
@php
$navigationGroupLabel = $navigationGroup->getLabel();
@@ -15,10 +11,7 @@
@if ($navigationGroupLabel)
<x-filament::dropdown placement="bottom-start">
<x-slot name="trigger">
<x-filament::tabs.item
:active="$isNavigationGroupActive"
:icon="$navigationGroupIcon"
>
<x-filament::tabs.item :active="$isNavigationGroupActive" :icon="$navigationGroupIcon">
{{ $navigationGroupLabel }}
</x-filament::tabs.item>
</x-slot>
@@ -29,22 +22,16 @@
$navigationItemBadge = $navigationItem->getBadge();
$navigationItemBadgeColor = $navigationItem->getBadgeColor($navigationItemBadge);
$navigationItemBadgeTooltip = $navigationItem->getBadgeTooltip($navigationItemBadge);
$navigationItemIcon = $navigationItem->isActive() ? ($navigationItem->getActiveIcon() ?? $navigationItem->getIcon()) : $navigationItem->getIcon();
$navigationItemIcon = $navigationItem->isActive()
? $navigationItem->getActiveIcon() ?? $navigationItem->getIcon()
: $navigationItem->getIcon();
$navigationItemUrl = $navigationItem->getUrl();
$shouldNavigationItemOpenUrlInNewTab = $navigationItem->shouldOpenUrlInNewTab();
$navigationItemExtraAttributes = $navigationItem->getExtraAttributeBag();
@endphp
<x-filament::dropdown.list.item
:badge="$navigationItemBadge"
:badge-color="$navigationItemBadgeColor"
:badge-tooltip="$navigationItemBadgeTooltip"
:href="$navigationItemUrl"
:icon="$navigationItemIcon"
tag="a"
:target="$shouldNavigationItemOpenUrlInNewTab ? '_blank' : null"
:attributes="\Filament\Support\prepare_inherited_attributes($navigationItemExtraAttributes)"
>
<x-filament::dropdown.list.item :badge="$navigationItemBadge" :badge-color="$navigationItemBadgeColor" :badge-tooltip="$navigationItemBadgeTooltip"
:href="$navigationItemUrl" :icon="$navigationItemIcon" tag="a" :target="$shouldNavigationItemOpenUrlInNewTab ? '_blank' : null" :attributes="\Filament\Support\prepare_inherited_attributes($navigationItemExtraAttributes)">
{{ $navigationItem->getLabel() }}
@if ($navigationItemIcon instanceof \Illuminate\Contracts\Support\Htmlable)
@@ -63,23 +50,16 @@
$navigationItemBadge = $navigationItem->getBadge();
$navigationItemBadgeColor = $navigationItem->getBadgeColor($navigationItemBadge);
$navigationItemBadgeTooltip = $navigationItem->getBadgeTooltip($navigationItemBadge);
$navigationItemIcon = $navigationItem->isActive() ? ($navigationItem->getActiveIcon() ?? $navigationItem->getIcon()) : $navigationItem->getIcon();
$navigationItemIcon = $navigationItem->isActive()
? $navigationItem->getActiveIcon() ?? $navigationItem->getIcon()
: $navigationItem->getIcon();
$navigationItemUrl = $navigationItem->getUrl();
$shouldNavigationItemOpenUrlInNewTab = $navigationItem->shouldOpenUrlInNewTab();
$navigationItemExtraAttributes = $navigationItem->getExtraAttributeBag();
@endphp
<x-filament::tabs.item
:active="$isNavigationItemActive"
:badge="$navigationItemBadge"
:badge-color="$navigationItemBadgeColor"
:badge-tooltip="$navigationItemBadgeTooltip"
:href="$navigationItemUrl"
:icon="$navigationItemIcon"
tag="a"
:target="$shouldNavigationItemOpenUrlInNewTab ? '_blank' : null"
:attributes="\Filament\Support\prepare_inherited_attributes($navigationItemExtraAttributes)"
>
<x-filament::tabs.item :active="$isNavigationItemActive" :badge="$navigationItemBadge" :badge-color="$navigationItemBadgeColor" :badge-tooltip="$navigationItemBadgeTooltip"
:href="$navigationItemUrl" :icon="$navigationItemIcon" tag="a" :target="$shouldNavigationItemOpenUrlInNewTab ? '_blank' : null" :attributes="\Filament\Support\prepare_inherited_attributes($navigationItemExtraAttributes)">
{{ $navigationItem->getLabel() }}
@if ($navigationItemIcon instanceof \Illuminate\Contracts\Support\Htmlable)
@@ -6,27 +6,21 @@
{{ \Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::OutlinedBell, alias: \Filament\View\PanelsIconAlias::SIDEBAR_OPEN_DATABASE_NOTIFICATIONS_BUTTON, size: \Filament\Support\Enums\IconSize::Large) }}
<span
@if ($isSidebarCollapsibleOnDesktop)
x-show="$store.sidebar.isOpen"
@if ($isSidebarCollapsibleOnDesktop) x-show="$store.sidebar.isOpen"
x-transition:enter="fi-transition-enter"
x-transition:enter-start="fi-transition-enter-start"
x-transition:enter-end="fi-transition-enter-end"
@endif
class="fi-sidebar-database-notifications-btn-label"
>
x-transition:enter-end="fi-transition-enter-end" @endif
class="fi-sidebar-database-notifications-btn-label">
{{ __('filament-panels::layout.actions.open_database_notifications.label') }}
</span>
@if ($unreadNotificationsCount)
<span
@if ($isSidebarCollapsibleOnDesktop)
x-show="$store.sidebar.isOpen"
@if ($isSidebarCollapsibleOnDesktop) x-show="$store.sidebar.isOpen"
x-transition:enter="fi-transition-enter"
x-transition:enter-start="fi-transition-enter-start"
x-transition:enter-end="fi-transition-enter-end"
@endif
class="fi-sidebar-database-notifications-btn-badge-ctn"
>
x-transition:enter-end="fi-transition-enter-end" @endif
class="fi-sidebar-database-notifications-btn-badge-ctn">
<x-filament::badge>
{{ $unreadNotificationsCount }}
</x-filament::badge>
@@ -13,31 +13,16 @@
$hasDropdown = filled($label) && filled($icon) && $sidebarCollapsible;
@endphp
<li
x-data="{ label: @js($subNavigation ? "sub_navigation_{$label}" : $label) }"
data-group-label="{{ $subNavigation ? "sub_navigation_{$label}" : $label }}"
<li x-data="{ label: @js($subNavigation ? "sub_navigation_{$label}" : $label) }" data-group-label="{{ $subNavigation ? "sub_navigation_{$label}" : $label }}"
x-bind:class="{ 'fi-collapsed': $store.sidebar.groupIsCollapsed(label) }"
{{
$attributes->class([
'fi-sidebar-group',
'fi-active' => $active,
'fi-collapsible' => $collapsible,
])
}}
>
{{ $attributes->class(['fi-sidebar-group', 'fi-active' => $active, 'fi-collapsible' => $collapsible]) }}>
@if ($label)
<div
@if ($collapsible)
x-on:click="$store.sidebar.toggleCollapsedGroup(label)"
@endif
@if ($sidebarCollapsible)
x-show="$store.sidebar.isOpen"
<div @if ($collapsible) x-on:click="$store.sidebar.toggleCollapsedGroup(label)" @endif
@if ($sidebarCollapsible) x-show="$store.sidebar.isOpen"
x-transition:enter="fi-transition-enter"
x-transition:enter-start="fi-transition-enter-start"
x-transition:enter-end="fi-transition-enter-end"
@endif
class="fi-sidebar-group-btn"
>
x-transition:enter-end="fi-transition-enter-end" @endif
class="fi-sidebar-group-btn">
@if ($icon)
{{ \Filament\Support\generate_icon_html($icon, size: \Filament\Support\Enums\IconSize::Large) }}
@endif
@@ -47,27 +32,17 @@
</span>
@if ($collapsible)
<x-filament::icon-button
color="gray"
:icon="\Filament\Support\Icons\Heroicon::ChevronUp"
:icon-alias="\Filament\View\PanelsIconAlias::SIDEBAR_GROUP_COLLAPSE_BUTTON"
:label="$label"
x-bind:aria-expanded="! $store.sidebar.groupIsCollapsed(label)"
x-on:click.stop="$store.sidebar.toggleCollapsedGroup(label)"
class="fi-sidebar-group-collapse-btn"
/>
<x-filament::icon-button color="gray" :icon="\Filament\Support\Icons\Heroicon::ChevronUp" :icon-alias="\Filament\View\PanelsIconAlias::SIDEBAR_GROUP_COLLAPSE_BUTTON" :label="$label"
x-bind:aria-expanded="!$store.sidebar.groupIsCollapsed(label)"
x-on:click.stop="$store.sidebar.toggleCollapsedGroup(label)" class="fi-sidebar-group-collapse-btn" />
@endif
</div>
@endif
@if ($hasDropdown)
<x-filament::dropdown
:placement="(__('filament-panels::layout.direction') === 'rtl') ? 'left-start' : 'right-start'"
x-show="! $store.sidebar.isOpen"
>
<x-filament::dropdown :placement="(__('filament-panels::layout.direction') === 'rtl') ? 'left-start' : 'right-start'" x-show="! $store.sidebar.isOpen">
<x-slot name="trigger">
<button
x-data="{ tooltip: false }"
<button x-data="{ tooltip: false }"
x-effect="
tooltip = $store.sidebar.isOpen
? false
@@ -77,9 +52,7 @@
theme: $store.theme,
}
"
x-tooltip.html="tooltip"
class="fi-sidebar-group-dropdown-trigger-btn"
>
x-tooltip.html="tooltip" class="fi-sidebar-group-dropdown-trigger-btn">
{{ \Filament\Support\generate_icon_html($icon, size: \Filament\Support\Enums\IconSize::Large) }}
</button>
</x-slot>
@@ -89,10 +62,7 @@
foreach ($items as $item) {
if ($childItems = $item->getChildItems()) {
$lists[] = [
$item,
...$childItems,
];
$lists[] = [$item, ...$childItems];
$lists[] = [];
continue;
@@ -127,22 +97,14 @@
$itemBadgeColor = $item->getBadgeColor($itemBadge);
$itemBadgeTooltip = $item->getBadgeTooltip($itemBadge);
$itemUrl = $item->getUrl();
$itemIcon = $itemIsActive ? ($item->getActiveIcon() ?? $item->getIcon()) : $item->getIcon();
$itemIcon = $itemIsActive ? $item->getActiveIcon() ?? $item->getIcon() : $item->getIcon();
$shouldItemOpenUrlInNewTab = $item->shouldOpenUrlInNewTab();
$itemExtraAttributes = $item->getExtraAttributeBag();
@endphp
<x-filament::dropdown.list.item
:badge="$itemBadge"
:badge-color="$itemBadgeColor"
:badge-tooltip="$itemBadgeTooltip"
:color="$itemIsActive ? 'primary' : 'gray'"
:href="$itemUrl"
:icon="$itemIcon"
tag="a"
:target="$shouldItemOpenUrlInNewTab ? '_blank' : null"
:attributes="\Filament\Support\prepare_inherited_attributes($itemExtraAttributes)"
>
<x-filament::dropdown.list.item :badge="$itemBadge" :badge-color="$itemBadgeColor" :badge-tooltip="$itemBadgeTooltip"
:color="$itemIsActive ? 'primary' : 'gray'" :href="$itemUrl" :icon="$itemIcon" tag="a" :target="$shouldItemOpenUrlInNewTab ? '_blank' : null"
:attributes="\Filament\Support\prepare_inherited_attributes($itemExtraAttributes)">
{{ $item->getLabel() }}
</x-filament::dropdown.list.item>
@endforeach
@@ -151,26 +113,20 @@
</x-filament::dropdown>
@endif
<ul
@if (filled($label))
@if ($sidebarCollapsible)
<ul @if (filled($label)) @if ($sidebarCollapsible)
x-show="$store.sidebar.isOpen ? ! $store.sidebar.groupIsCollapsed(label) : ! @js($hasDropdown)"
@else
x-show="! $store.sidebar.groupIsCollapsed(label)"
@endif
x-collapse.duration.200ms
@endif
@if ($sidebarCollapsible)
x-transition:enter="fi-transition-enter"
x-show="! $store.sidebar.groupIsCollapsed(label)" @endif
x-collapse.duration.200ms @endif
@if ($sidebarCollapsible) x-transition:enter="fi-transition-enter"
x-transition:enter-start="fi-transition-enter-start"
x-transition:enter-end="fi-transition-enter-end"
@endif
x-transition:enter-end="fi-transition-enter-end" @endif
class="fi-sidebar-group-items"
>
>
@foreach ($items as $item)
@php
$isItemChildItemsActive = $item->isChildItemsActive();
$isItemActive = (! $isItemChildItemsActive) && $item->isActive();
$isItemActive = !$isItemChildItemsActive && $item->isActive();
$itemActiveIcon = $item->getActiveIcon();
$itemBadge = $item->getBadge();
$itemBadgeColor = $item->getBadgeColor($itemBadge);
@@ -186,29 +142,19 @@
$itemIcon = null;
$itemActiveIcon = null;
} else {
throw new \Exception('Navigation group [' . $label . '] has an icon but one or more of its items also have icons. Either the group or its items can have icons, but not both. This is to ensure a proper user experience.');
throw new \Exception(
'Navigation group [' .
$label .
'] has an icon but one or more of its items also have icons. Either the group or its items can have icons, but not both. This is to ensure a proper user experience.',
);
}
}
@endphp
<x-filament-panels::sidebar.item
:active="$isItemActive"
:active-child-items="$isItemChildItemsActive"
:active-icon="$itemActiveIcon"
:badge="$itemBadge"
:badge-color="$itemBadgeColor"
:badge-tooltip="$itemBadgeTooltip"
:child-items="$itemChildItems"
:first="$loop->first"
:grouped="filled($label)"
:icon="$itemIcon"
:last="$loop->last"
:should-open-url-in-new-tab="$shouldItemOpenUrlInNewTab"
:sidebar-collapsible="$sidebarCollapsible"
:sub-navigation="$subNavigation"
:url="$itemUrl"
:attributes="\Filament\Support\prepare_inherited_attributes($itemExtraAttributes)"
>
<x-filament-panels::sidebar.item :active="$isItemActive" :active-child-items="$isItemChildItemsActive" :active-icon="$itemActiveIcon" :badge="$itemBadge"
:badge-color="$itemBadgeColor" :badge-tooltip="$itemBadgeTooltip" :child-items="$itemChildItems" :first="$loop->first" :grouped="filled($label)"
:icon="$itemIcon" :last="$loop->last" :should-open-url-in-new-tab="$shouldItemOpenUrlInNewTab" :sidebar-collapsible="$sidebarCollapsible" :sub-navigation="$subNavigation"
:url="$itemUrl" :attributes="\Filament\Support\prepare_inherited_attributes($itemExtraAttributes)">
{{ $item->getLabel() }}
@if ($itemIcon instanceof \Illuminate\Contracts\Support\Htmlable)
@@ -22,20 +22,15 @@
@endphp
<li
{{
$attributes->class([
'fi-sidebar-item',
'fi-active' => $active,
'fi-sidebar-item-has-active-child-items' => $activeChildItems,
'fi-sidebar-item-has-url' => filled($url),
])
}}
>
<a
{{ \Filament\Support\generate_href_html($url, $shouldOpenUrlInNewTab) }}
{{ $attributes->class([
'fi-sidebar-item',
'fi-active' => $active,
'fi-sidebar-item-has-active-child-items' => $activeChildItems,
'fi-sidebar-item-has-url' => filled($url),
]) }}>
<a {{ \Filament\Support\generate_href_html($url, $shouldOpenUrlInNewTab) }}
x-on:click="window.matchMedia(`(max-width: 1024px)`).matches && $store.sidebar.close()"
@if ($sidebarCollapsible && (! $subNavigation))
x-data="{ tooltip: false }"
@if ($sidebarCollapsible && !$subNavigation) x-data="{ tooltip: false }"
x-effect="
tooltip = $store.sidebar.isOpen
? false
@@ -45,35 +40,27 @@
theme: $store.theme,
}
"
x-tooltip.html="tooltip"
@endif
class="fi-sidebar-item-btn"
>
@if (filled($icon) && ((! $subGrouped) || ($sidebarCollapsible && (! $subNavigation))))
{{
\Filament\Support\generate_icon_html(($active && $activeIcon) ? $activeIcon : $icon, attributes: (new \Illuminate\View\ComponentAttributeBag([
'x-show' => ($subGrouped && $sidebarCollapsible) ? '! $store.sidebar.isOpen' : false,
]))->class(['fi-sidebar-item-icon']), size: \Filament\Support\Enums\IconSize::Large)
}}
x-tooltip.html="tooltip" @endif
class="fi-sidebar-item-btn">
@if (filled($icon) && (!$subGrouped || ($sidebarCollapsible && !$subNavigation)))
{{ \Filament\Support\generate_icon_html(
$active && $activeIcon ? $activeIcon : $icon,
attributes: new \Illuminate\View\ComponentAttributeBag([
'x-show' => $subGrouped && $sidebarCollapsible ? '! $store.sidebar.isOpen' : false,
])->class(['fi-sidebar-item-icon']),
size: \Filament\Support\Enums\IconSize::Large,
) }}
@endif
@if ((blank($icon) && $grouped) || $subGrouped)
<div
@if (filled($icon) && $subGrouped && $sidebarCollapsible && (! $subNavigation))
x-show="$store.sidebar.isOpen"
@endif
class="fi-sidebar-item-grouped-border"
>
@if (! $first)
<div
class="fi-sidebar-item-grouped-border-part-not-first"
></div>
<div @if (filled($icon) && $subGrouped && $sidebarCollapsible && !$subNavigation) x-show="$store.sidebar.isOpen" @endif
class="fi-sidebar-item-grouped-border">
@if (!$first)
<div class="fi-sidebar-item-grouped-border-part-not-first"></div>
@endif
@if (! $last)
<div
class="fi-sidebar-item-grouped-border-part-not-last"
></div>
@if (!$last)
<div class="fi-sidebar-item-grouped-border-part-not-last"></div>
@endif
<div class="fi-sidebar-item-grouped-border-part"></div>
@@ -81,31 +68,22 @@
@endif
<span
@if ($sidebarCollapsible && (! $subNavigation))
x-show="$store.sidebar.isOpen"
@if ($sidebarCollapsible && !$subNavigation) x-show="$store.sidebar.isOpen"
x-transition:enter="fi-transition-enter"
x-transition:enter-start="fi-transition-enter-start"
x-transition:enter-end="fi-transition-enter-end"
@endif
class="fi-sidebar-item-label"
>
x-transition:enter-end="fi-transition-enter-end" @endif
class="fi-sidebar-item-label">
{{ $slot }}
</span>
@if (filled($badge))
<span
@if ($sidebarCollapsible && (! $subNavigation))
x-show="$store.sidebar.isOpen"
@if ($sidebarCollapsible && !$subNavigation) x-show="$store.sidebar.isOpen"
x-transition:enter="fi-transition-enter"
x-transition:enter-start="fi-transition-enter-start"
x-transition:enter-end="fi-transition-enter-end"
@endif
class="fi-sidebar-item-badge-ctn"
>
<x-filament::badge
:color="$badgeColor"
:tooltip="$badgeTooltip"
>
x-transition:enter-end="fi-transition-enter-end" @endif
class="fi-sidebar-item-badge-ctn">
<x-filament::badge :color="$badgeColor" :tooltip="$badgeTooltip">
{{ $badge }}
</x-filament::badge>
</span>
@@ -117,7 +95,7 @@
@foreach ($childItems as $childItem)
@php
$isChildItemChildItemsActive = $childItem->isChildItemsActive();
$isChildActive = (! $isChildItemChildItemsActive) && $childItem->isActive();
$isChildActive = !$isChildItemChildItemsActive && $childItem->isActive();
$childItemActiveIcon = $childItem->getActiveIcon();
$childItemBadge = $childItem->getBadge();
$childItemBadgeColor = $childItem->getBadgeColor($childItemBadge);
@@ -128,23 +106,9 @@
$childItemExtraAttributes = $childItem->getExtraAttributeBag();
@endphp
<x-filament-panels::sidebar.item
:active="$isChildActive"
:active-child-items="$isChildItemChildItemsActive"
:active-icon="$childItemActiveIcon"
:badge="$childItemBadge"
:badge-color="$childItemBadgeColor"
:badge-tooltip="$childItemBadgeTooltip"
:first="$loop->first"
grouped
:icon="$childItemIcon"
:last="$loop->last"
:should-open-url-in-new-tab="$shouldChildItemOpenUrlInNewTab"
sub-grouped
:sub-navigation="$subNavigation"
:url="$childItemUrl"
:attributes="\Filament\Support\prepare_inherited_attributes($childItemExtraAttributes)"
>
<x-filament-panels::sidebar.item :active="$isChildActive" :active-child-items="$isChildItemChildItemsActive" :active-icon="$childItemActiveIcon" :badge="$childItemBadge"
:badge-color="$childItemBadgeColor" :badge-tooltip="$childItemBadgeTooltip" :first="$loop->first" grouped :icon="$childItemIcon" :last="$loop->last"
:should-open-url-in-new-tab="$shouldChildItemOpenUrlInNewTab" sub-grouped :sub-navigation="$subNavigation" :url="$childItemUrl" :attributes="\Filament\Support\prepare_inherited_attributes($childItemExtraAttributes)">
{{ $childItem->getLabel() }}
</x-filament-panels::sidebar.item>
@endforeach
@@ -11,15 +11,19 @@
$items = $this->getTenantMenuItems();
$canSwitchTenants = filament()->hasTenantSwitcher() && filled($tenants = array_filter(
filament()->getUserTenants(filament()->auth()->user()),
fn (\Illuminate\Database\Eloquent\Model $tenant): bool => ! $tenant->is($currentTenant),
));
$canSwitchTenants =
filament()->hasTenantSwitcher() &&
filled(
$tenants = array_filter(
filament()->getUserTenants(filament()->auth()->user()),
fn(\Illuminate\Database\Eloquent\Model $tenant): bool => !$tenant->is($currentTenant),
),
);
$isSearchable = $canSwitchTenants && (filament()->isTenantMenuSearchable() ?? (count($tenants) >= 10));
$isSearchable = $canSwitchTenants && (filament()->isTenantMenuSearchable() ?? count($tenants) >= 10);
$itemsBeforeAndAfterTenantSwitcher = collect($items)
->groupBy(fn (Action $item): bool => $canSwitchTenants && ($item->getSort() < 0), preserveKeys: true)
->groupBy(fn(Action $item): bool => $canSwitchTenants && $item->getSort() < 0, preserveKeys: true)
->all();
$itemsBeforeTenantSwitcher = $itemsBeforeAndAfterTenantSwitcher[true] ?? collect();
$itemsAfterTenantSwitcher = $itemsBeforeAndAfterTenantSwitcher[false] ?? collect();
@@ -29,19 +33,10 @@
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TENANT_MENU_BEFORE) }}
<x-filament::dropdown
placement="bottom-start"
size
:teleport="$teleport"
:attributes="
\Filament\Support\prepare_inherited_attributes($attributes)
->class(['fi-tenant-menu'])
"
>
<x-filament::dropdown placement="bottom-start" size :teleport="$teleport" :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->class(['fi-tenant-menu'])">
<x-slot name="trigger">
<button
@if ($isSidebarCollapsibleOnDesktop)
x-data="{ tooltip: false }"
@if ($isSidebarCollapsibleOnDesktop) x-data="{ tooltip: false }"
x-effect="
tooltip = $store.sidebar.isOpen
? false
@@ -51,22 +46,12 @@
theme: $store.theme,
}
"
x-tooltip.html="tooltip"
@endif
type="button"
class="fi-tenant-menu-trigger"
>
<x-filament-panels::avatar.tenant
:tenant="$currentTenant"
loading="lazy"
/>
x-tooltip.html="tooltip" @endif
type="button" class="fi-tenant-menu-trigger">
<x-filament-panels::avatar.tenant :tenant="$currentTenant" loading="lazy" />
<span
@if ($isSidebarCollapsibleOnDesktop)
x-show="$store.sidebar.isOpen"
@endif
class="fi-tenant-menu-trigger-text"
>
<span @if ($isSidebarCollapsibleOnDesktop) x-show="$store.sidebar.isOpen" @endif
class="fi-tenant-menu-trigger-text">
@if ($currentTenant instanceof \Filament\Models\Contracts\HasCurrentTenantLabel)
<span class="fi-tenant-menu-trigger-current-tenant-label">
{{ $currentTenant->getCurrentTenantLabel() }}
@@ -78,11 +63,13 @@
</span>
</span>
{{
\Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::ChevronDown, alias: \Filament\View\PanelsIconAlias::TENANT_MENU_TOGGLE_BUTTON, attributes: new \Illuminate\View\ComponentAttributeBag([
{{ \Filament\Support\generate_icon_html(
\Filament\Support\Icons\Heroicon::ChevronDown,
alias: \Filament\View\PanelsIconAlias::TENANT_MENU_TOGGLE_BUTTON,
attributes: new \Illuminate\View\ComponentAttributeBag([
'x-show' => $isSidebarCollapsibleOnDesktop ? '$store.sidebar.isOpen' : null,
]))
}}
]),
) }}
</button>
</x-slot>
@@ -103,12 +90,9 @@
{{ __('filament-panels::layout.tenant_menu.search_field.label') }}
</label>
<x-filament::input
x-bind:id="$id('input')"
x-model="search"
<x-filament::input x-bind:id="$id('input')" x-model="search"
placeholder="{{ __('filament-panels::layout.tenant_menu.search_field.placeholder') }}"
type="search"
/>
type="search" />
</div>
@endif
@@ -125,13 +109,8 @@
@js($tenantName).replace(/ /g, '')
.toLowerCase()
.includes(search.replace(/ /g, '').toLowerCase())
"
>
<x-filament::dropdown.list.item
:href="$tenantUrl"
:image="$tenantImage"
tag="a"
>
">
<x-filament::dropdown.list.item :href="$tenantUrl" :image="$tenantImage" tag="a">
{{ $tenantName }}
</x-filament::dropdown.list.item>
</div>
@@ -1,28 +1,21 @@
@props([
'icon',
'theme',
])
@props(['icon', 'theme'])
@php
$label = __("filament-panels::layout.actions.theme_switcher.{$theme}.label");
@endphp
<button
aria-label="{{ $label }}"
type="button"
x-on:click="(theme = @js($theme)) && close()"
<button aria-label="{{ $label }}" type="button" x-on:click="(theme = @js($theme)) && close()"
x-tooltip="{
content: @js($label),
theme: $store.theme,
}"
x-bind:class="{ 'fi-active': theme === @js($theme) }"
class="fi-theme-switcher-btn"
>
{{
\Filament\Support\generate_icon_html($icon, alias: match ($theme) {
x-bind:class="{ 'fi-active': theme === @js($theme) }" class="fi-theme-switcher-btn">
{{ \Filament\Support\generate_icon_html(
$icon,
alias: match ($theme) {
'light' => \Filament\View\PanelsIconAlias::THEME_SWITCHER_LIGHT_BUTTON,
'dark' => \Filament\View\PanelsIconAlias::THEME_SWITCHER_DARK_BUTTON,
'system' => \Filament\View\PanelsIconAlias::THEME_SWITCHER_SYSTEM_BUTTON,
})
}}
},
) }}
</button>
@@ -1,26 +1,11 @@
<div
x-data="{ theme: null }"
x-init="
$watch('theme', () => {
$dispatch('theme-changed', theme)
})
<div x-data="{ theme: null }" x-init="$watch('theme', () => {
$dispatch('theme-changed', theme)
})
theme = localStorage.getItem('theme') || @js(filament()->getDefaultThemeMode()->value)
"
class="fi-theme-switcher"
>
<x-filament-panels::theme-switcher.button
:icon="\Filament\Support\Icons\Heroicon::Sun"
theme="light"
/>
theme = localStorage.getItem('theme') || @js(filament()->getDefaultThemeMode()->value)" class="fi-theme-switcher">
<x-filament-panels::theme-switcher.button :icon="\Filament\Support\Icons\Heroicon::Sun" theme="light" />
<x-filament-panels::theme-switcher.button
:icon="\Filament\Support\Icons\Heroicon::Moon"
theme="dark"
/>
<x-filament-panels::theme-switcher.button :icon="\Filament\Support\Icons\Heroicon::Moon" theme="dark" />
<x-filament-panels::theme-switcher.button
:icon="\Filament\Support\Icons\Heroicon::ComputerDesktop"
theme="system"
/>
<x-filament-panels::theme-switcher.button :icon="\Filament\Support\Icons\Heroicon::ComputerDesktop" theme="system" />
</div>
@@ -1,9 +1,2 @@
<x-filament::icon-button
:badge="$unreadNotificationsCount ?: null"
color="gray"
:icon="\Filament\Support\Icons\Heroicon::OutlinedBell"
:icon-alias="\Filament\View\PanelsIconAlias::TOPBAR_OPEN_DATABASE_NOTIFICATIONS_BUTTON"
icon-size="lg"
:label="__('filament-panels::layout.actions.open_database_notifications.label')"
class="fi-topbar-database-notifications-btn"
/>
<x-filament::icon-button :badge="$unreadNotificationsCount ?: null" color="gray" :icon="\Filament\Support\Icons\Heroicon::OutlinedBell" :icon-alias="\Filament\View\PanelsIconAlias::TOPBAR_OPEN_DATABASE_NOTIFICATIONS_BUTTON" icon-size="lg"
:label="__('filament-panels::layout.actions.open_database_notifications.label')" class="fi-topbar-database-notifications-btn" />
@@ -13,24 +13,14 @@
$tag = $url ? 'a' : 'button';
@endphp
<li
{{
$attributes->class([
'fi-topbar-item',
'fi-active' => $active,
])
}}
>
<li {{ $attributes->class(['fi-topbar-item', 'fi-active' => $active]) }}>
<{{ $tag }}
@if ($url)
{{ \Filament\Support\generate_href_html($url, $shouldOpenUrlInNewTab) }}
@if ($url) {{ \Filament\Support\generate_href_html($url, $shouldOpenUrlInNewTab) }}
@else
type="button"
@endif
class="fi-topbar-item-btn"
>
type="button" @endif
class="fi-topbar-item-btn">
@if ($icon || $activeIcon)
{{ \Filament\Support\generate_icon_html(($active && $activeIcon) ? $activeIcon : $icon, attributes: (new \Illuminate\View\ComponentAttributeBag)->class(['fi-topbar-item-icon'])) }}
{{ \Filament\Support\generate_icon_html($active && $activeIcon ? $activeIcon : $icon, attributes: new \Illuminate\View\ComponentAttributeBag()->class(['fi-topbar-item-icon'])) }}
@endif
<span class="fi-topbar-item-label">
@@ -38,17 +28,13 @@
</span>
@if (filled($badge))
<x-filament::badge
:color="$badgeColor"
size="sm"
:tooltip="$badgeTooltip"
>
<x-filament::badge :color="$badgeColor" size="sm" :tooltip="$badgeTooltip">
{{ $badge }}
</x-filament::badge>
@endif
@if (! $url)
{{ \Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::ChevronDown, alias: \Filament\View\PanelsIconAlias::TOPBAR_GROUP_TOGGLE_BUTTON, attributes: (new \Illuminate\View\ComponentAttributeBag)->class(['fi-topbar-group-toggle-icon'])) }}
@if (!$url)
{{ \Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::ChevronDown, alias: \Filament\View\PanelsIconAlias::TOPBAR_GROUP_TOGGLE_BUTTON, attributes: new \Illuminate\View\ComponentAttributeBag()->class(['fi-topbar-group-toggle-icon'])) }}
@endif
</{{ $tag }}>
</{{ $tag }}>
</li>
@@ -12,17 +12,21 @@
$items = $this->getUserMenuItems();
$itemsBeforeAndAfterThemeSwitcher = collect($items)
->groupBy(fn (Action $item): bool => $item->getSort() < 0, preserveKeys: true)
->groupBy(fn(Action $item): bool => $item->getSort() < 0, preserveKeys: true)
->all();
$itemsBeforeThemeSwitcher = $itemsBeforeAndAfterThemeSwitcher[true] ?? collect();
$itemsAfterThemeSwitcher = $itemsBeforeAndAfterThemeSwitcher[false] ?? collect();
$hasProfileHeader = $itemsBeforeThemeSwitcher->has('profile') &&
$hasProfileHeader =
$itemsBeforeThemeSwitcher->has('profile') &&
blank(($item = Arr::first($itemsBeforeThemeSwitcher))->getUrl()) &&
(! $item->hasAction());
!$item->hasAction();
if ($itemsBeforeThemeSwitcher->has('profile')) {
$itemsBeforeThemeSwitcher = $itemsBeforeThemeSwitcher->prepend($itemsBeforeThemeSwitcher->pull('profile'), 'profile');
$itemsBeforeThemeSwitcher = $itemsBeforeThemeSwitcher->prepend(
$itemsBeforeThemeSwitcher->pull('profile'),
'profile',
);
}
$position ??= filament()->getUserMenuPosition();
@@ -32,45 +36,30 @@
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::USER_MENU_BEFORE) }}
<x-filament::dropdown
:placement="($position === UserMenuPosition::Topbar) ? 'bottom-end' : 'top-end'"
:teleport="$position === UserMenuPosition::Topbar"
:attributes="
\Filament\Support\prepare_inherited_attributes($attributes)
->class(['fi-user-menu'])
"
>
<x-filament::dropdown :placement="$position === UserMenuPosition::Topbar ? 'bottom-end' : 'top-end'" :teleport="$position === UserMenuPosition::Topbar" :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->class(['fi-user-menu'])">
<x-slot name="trigger">
@if ($position === UserMenuPosition::Topbar)
<button
aria-label="{{ __('filament-panels::layout.actions.open_user_menu.label') }}"
type="button"
class="fi-user-menu-trigger"
>
<button aria-label="{{ __('filament-panels::layout.actions.open_user_menu.label') }}" type="button"
class="fi-user-menu-trigger">
<x-filament-panels::avatar.user :user="$user" loading="lazy" />
</button>
@else
<button
aria-label="{{ __('filament-panels::layout.actions.open_user_menu.label') }}"
type="button"
class="fi-user-menu-trigger"
>
<button aria-label="{{ __('filament-panels::layout.actions.open_user_menu.label') }}" type="button"
class="fi-user-menu-trigger">
<x-filament-panels::avatar.user :user="$user" loading="lazy" />
<span
@if ($isSidebarCollapsibleOnDesktop)
x-show="$store.sidebar.isOpen"
@endif
class="fi-user-menu-trigger-text"
>
<span @if ($isSidebarCollapsibleOnDesktop) x-show="$store.sidebar.isOpen" @endif
class="fi-user-menu-trigger-text">
{{ filament()->getUserName($user) }}
</span>
{{
\Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::ChevronUp, alias: \Filament\View\PanelsIconAlias::USER_MENU_TOGGLE_BUTTON, attributes: new \Illuminate\View\ComponentAttributeBag([
{{ \Filament\Support\generate_icon_html(
\Filament\Support\Icons\Heroicon::ChevronUp,
alias: \Filament\View\PanelsIconAlias::USER_MENU_TOGGLE_BUTTON,
attributes: new \Illuminate\View\ComponentAttributeBag([
'x-show' => $isSidebarCollapsibleOnDesktop ? '$store.sidebar.isOpen' : null,
]))
}}
]),
) }}
</button>
@endif
</x-slot>
@@ -109,7 +98,7 @@
</x-filament::dropdown.list>
@endif
@if (filament()->hasDarkMode() && (! filament()->hasDarkModeForced()))
@if (filament()->hasDarkMode() && !filament()->hasDarkModeForced())
<x-filament::dropdown.list>
<x-filament-panels::theme-switcher />
</x-filament::dropdown.list>
@@ -7,62 +7,42 @@
<div class="fi-global-search-ctn">
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::GLOBAL_SEARCH_START) }}
<div
x-on:focus-first-global-search-result.stop="$el.querySelector('.fi-global-search-result-link')?.focus()"
class="fi-global-search"
>
<div x-on:focus-first-global-search-result.stop="$el.querySelector('.fi-global-search-result-link')?.focus()"
class="fi-global-search">
<div x-id="['input']" class="fi-global-search-field">
<label x-bind:for="$id('input')" class="fi-sr-only">
{{ __('filament-panels::global-search.field.label') }}
</label>
<x-filament::input.wrapper
:prefix-icon="\Filament\Support\Icons\Heroicon::MagnifyingGlass"
:prefix-icon-alias="\Filament\View\PanelsIconAlias::GLOBAL_SEARCH_FIELD"
inline-prefix
:suffix="$suffix"
inline-suffix
wire:target="search"
>
<input
autocomplete="off"
maxlength="1000"
placeholder="{{ __('filament-panels::global-search.field.placeholder') }}"
type="search"
wire:key="global-search.field.input"
x-bind:id="$id('input')"
<x-filament::input.wrapper :prefix-icon="\Filament\Support\Icons\Heroicon::MagnifyingGlass" :prefix-icon-alias="\Filament\View\PanelsIconAlias::GLOBAL_SEARCH_FIELD" inline-prefix :suffix="$suffix" inline-suffix
wire:target="search">
<input autocomplete="off" maxlength="1000"
placeholder="{{ __('filament-panels::global-search.field.placeholder') }}" type="search"
wire:key="global-search.field.input" x-bind:id="$id('input')"
x-on:keydown.down.prevent.stop="$dispatch('focus-first-global-search-result')"
wire:model.live.debounce.{{ $debounce }}="search"
x-mousetrap.global.{{ collect($keyBindings)->map(fn (string $keyBinding): string => str_replace('+', '-', $keyBinding))->implode('.') }}="document.getElementById($id('input'))?.focus()"
class="fi-input fi-input-has-inline-prefix"
/>
x-mousetrap.global.{{ collect($keyBindings)->map(fn(string $keyBinding): string => str_replace('+', '-', $keyBinding))->implode('.') }}="document.getElementById($id('input'))?.focus()"
class="fi-input fi-input-has-inline-prefix" />
</x-filament::input.wrapper>
</div>
@if ($results !== null)
<div
x-data="{
isOpen: false,
open(event) {
this.isOpen = true
},
close(event) {
this.isOpen = false
},
}"
x-init="$nextTick(() => open())"
x-on:click.away="close()"
x-on:keydown.escape.window="close()"
x-on:keydown.up.prevent="$focus.wrap().previous()"
<div x-data="{
isOpen: false,
open(event) {
this.isOpen = true
},
close(event) {
this.isOpen = false
},
}" x-init="$nextTick(() => open())" x-on:click.away="close()"
x-on:keydown.escape.window="close()" x-on:keydown.up.prevent="$focus.wrap().previous()"
x-on:keydown.down.prevent="$focus.wrap().next()"
x-on:open-global-search-results.window="$nextTick(() => open())"
x-show="isOpen"
x-transition:enter-start="fi-transition-enter-start"
x-transition:leave-end="fi-transition-leave-end"
class="fi-global-search-results-ctn"
>
x-on:open-global-search-results.window="$nextTick(() => open())" x-show="isOpen"
x-transition:enter-start="fi-transition-enter-start" x-transition:leave-end="fi-transition-leave-end"
class="fi-global-search-results-ctn">
@if ($results->getCategories()->isEmpty())
<p class="fi-global-search-no-results-message">
{{ __('filament-panels::global-search.no_results_message') }}
@@ -71,56 +51,37 @@
<ul class="fi-global-search-results">
@foreach ($results->getCategories() as $group => $groupedResults)
<li class="fi-global-search-result-group">
<h3
class="fi-global-search-result-group-header"
>
<h3 class="fi-global-search-result-group-header">
{{ $group }}
</h3>
<ul
class="fi-global-search-result-group-results"
>
<ul class="fi-global-search-result-group-results">
@foreach ($groupedResults as $result)
@php
$resultVisibleActions = $result->getVisibleActions();
@endphp
<li
@class([
'fi-global-search-result',
'fi-global-search-result-has-actions' => $resultVisibleActions,
])
>
<a
{{ \Filament\Support\generate_href_html($result->url) }}
x-on:click="close()"
class="fi-global-search-result-link"
>
<h4
class="fi-global-search-result-heading"
>
<li @class([
'fi-global-search-result',
'fi-global-search-result-has-actions' => $resultVisibleActions,
])>
<a {{ \Filament\Support\generate_href_html($result->url) }}
x-on:click="close()" class="fi-global-search-result-link">
<h4 class="fi-global-search-result-heading">
{{ $result->title }}
</h4>
@if ($result->details)
<dl
class="fi-global-search-result-details"
>
<dl class="fi-global-search-result-details">
@foreach ($result->details as $label => $value)
<div
class="fi-global-search-result-detail"
>
<div class="fi-global-search-result-detail">
@if ($isAssoc ??= \Illuminate\Support\Arr::isAssoc($result->details))
<dt
class="fi-global-search-result-detail-label"
>
<dt class="fi-global-search-result-detail-label">
{{ $label }}:
</dt>
@endif
<dd
class="fi-global-search-result-detail-value"
>
<dd class="fi-global-search-result-detail-value">
{{ $value }}
</dd>
</div>
@@ -130,9 +91,7 @@
</a>
@if ($resultVisibleActions)
<div
class="fi-global-search-result-actions"
>
<div class="fi-global-search-result-actions">
@foreach ($resultVisibleActions as $action)
{{ $action }}
@endforeach
@@ -9,76 +9,46 @@
@endphp
{{-- format-ignore-start --}}
<aside
x-data="{}"
@if ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop)
x-cloak
<aside x-data="{}"
@if ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop) x-cloak
@else
x-cloak="-lg"
@endif
x-bind:class="{ 'fi-sidebar-open': $store.sidebar.isOpen }"
class="fi-sidebar fi-main-sidebar"
>
x-cloak="-lg" @endif
x-bind:class="{ 'fi-sidebar-open': $store.sidebar.isOpen }" class="fi-sidebar fi-main-sidebar">
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::SIDEBAR_START) }}
<div class="fi-sidebar-header-ctn">
<header
class="fi-sidebar-header"
>
@if ((! $hasTopbar) && $isSidebarCollapsibleOnDesktop)
<x-filament::icon-button
color="gray"
:icon="$isRtl ? \Filament\Support\Icons\Heroicon::OutlinedChevronLeft : \Filament\Support\Icons\Heroicon::OutlinedChevronRight"
{{-- @deprecated Use `PanelsIconAlias::SIDEBAR_EXPAND_BUTTON_RTL` instead of `PanelsIconAlias::SIDEBAR_EXPAND_BUTTON` for RTL. --}}
:icon-alias="
$isRtl
? [
\Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON_RTL,
\Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON,
]
: \Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON
"
icon-size="lg"
:label="__('filament-panels::layout.actions.sidebar.expand.label')"
x-cloak
x-data="{}"
x-on:click="$store.sidebar.open()"
x-show="! $store.sidebar.isOpen"
class="fi-sidebar-open-collapse-sidebar-btn"
/>
<header class="fi-sidebar-header">
@if (!$hasTopbar && $isSidebarCollapsibleOnDesktop)
<x-filament::icon-button color="gray" :icon="$isRtl
? \Filament\Support\Icons\Heroicon::OutlinedChevronLeft
: \Filament\Support\Icons\Heroicon::OutlinedChevronRight" {{-- @deprecated Use `PanelsIconAlias::SIDEBAR_EXPAND_BUTTON_RTL` instead of `PanelsIconAlias::SIDEBAR_EXPAND_BUTTON` for RTL. --}} :icon-alias="$isRtl
? [
\Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON_RTL,
\Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON,
]
: \Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON"
icon-size="lg" :label="__('filament-panels::layout.actions.sidebar.expand.label')" x-cloak x-data="{}" x-on:click="$store.sidebar.open()"
x-show="! $store.sidebar.isOpen" class="fi-sidebar-open-collapse-sidebar-btn" />
@endif
@if ((! $hasTopbar) && ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop))
<x-filament::icon-button
color="gray"
:icon="$isRtl ? \Filament\Support\Icons\Heroicon::OutlinedChevronRight : \Filament\Support\Icons\Heroicon::OutlinedChevronLeft"
{{-- @deprecated Use `PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON_RTL` instead of `PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON` for RTL. --}}
:icon-alias="
$isRtl
? [
\Filament\View\PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON_RTL,
\Filament\View\PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON,
]
: \Filament\View\PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON
"
icon-size="lg"
:label="__('filament-panels::layout.actions.sidebar.collapse.label')"
x-cloak
x-data="{}"
x-on:click="$store.sidebar.close()"
x-show="$store.sidebar.isOpen"
class="fi-sidebar-close-collapse-sidebar-btn"
/>
@if (!$hasTopbar && ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop))
<x-filament::icon-button color="gray" :icon="$isRtl
? \Filament\Support\Icons\Heroicon::OutlinedChevronRight
: \Filament\Support\Icons\Heroicon::OutlinedChevronLeft" {{-- @deprecated Use `PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON_RTL` instead of `PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON` for RTL. --}} :icon-alias="$isRtl
? [
\Filament\View\PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON_RTL,
\Filament\View\PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON,
]
: \Filament\View\PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON"
icon-size="lg" :label="__('filament-panels::layout.actions.sidebar.collapse.label')" x-cloak x-data="{}"
x-on:click="$store.sidebar.close()" x-show="$store.sidebar.isOpen"
class="fi-sidebar-close-collapse-sidebar-btn" />
@endif
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::SIDEBAR_LOGO_BEFORE) }}
<div
@if ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop)
x-show="$store.sidebar.isOpen"
@endif
class="fi-sidebar-header-logo-ctn"
>
<div @if ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop) x-show="$store.sidebar.isOpen" @endif
class="fi-sidebar-header-logo-ctn">
@if ($homeUrl = filament()->getHomeUrl())
<a {{ \Filament\Support\generate_href_html($homeUrl) }}>
<x-filament-panels::logo />
@@ -96,12 +66,9 @@
<x-filament-panels::tenant-menu />
@endif
@if (filament()->isGlobalSearchEnabled() && filament()->getGlobalSearchPosition() === \Filament\Enums\GlobalSearchPosition::Sidebar)
<div
@if ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop)
x-show="$store.sidebar.isOpen"
@endif
>
@if (filament()->isGlobalSearchEnabled() &&
filament()->getGlobalSearchPosition() === \Filament\Enums\GlobalSearchPosition::Sidebar)
<div @if ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop) x-show="$store.sidebar.isOpen" @endif>
@livewire(Filament\Livewire\GlobalSearch::class)
</div>
@endif
@@ -120,14 +87,8 @@
$groupExtraSidebarAttributeBag = $group->getExtraSidebarAttributeBag();
@endphp
<x-filament-panels::sidebar.group
:active="$isGroupActive"
:collapsible="$isGroupCollapsible"
:icon="$groupIcon"
:items="$groupItems"
:label="$groupLabel"
:attributes="\Filament\Support\prepare_inherited_attributes($groupExtraSidebarAttributeBag)"
/>
<x-filament-panels::sidebar.group :active="$isGroupActive" :collapsible="$isGroupCollapsible" :icon="$groupIcon"
:items="$groupItems" :label="$groupLabel" :attributes="\Filament\Support\prepare_inherited_attributes($groupExtraSidebarAttributeBag)" />
@endforeach
</ul>
@@ -139,13 +100,7 @@
if (collapsedGroups === null || collapsedGroups === 'null') {
localStorage.setItem(
'collapsedGroups',
JSON.stringify(@js(
collect($navigation)
->filter(fn (\Filament\Navigation\NavigationGroup $group): bool => $group->isCollapsed())
->map(fn (\Filament\Navigation\NavigationGroup $group): string => $group->getLabel())
->values()
->all()
)),
JSON.stringify(@js(collect($navigation)->filter(fn(\Filament\Navigation\NavigationGroup $group): bool => $group->isCollapsed())->map(fn(\Filament\Navigation\NavigationGroup $group): string => $group->getLabel())->values()->all())),
)
}
@@ -176,8 +131,13 @@
@php
$isAuthenticated = filament()->auth()->check();
$hasDatabaseNotificationsInSidebar = filament()->hasDatabaseNotifications() && filament()->getDatabaseNotificationsPosition() === \Filament\Enums\DatabaseNotificationsPosition::Sidebar;
$hasUserMenuInSidebar = filament()->hasUserMenu() && filament()->getUserMenuPosition() === \Filament\Enums\UserMenuPosition::Sidebar;
$hasDatabaseNotificationsInSidebar =
filament()->hasDatabaseNotifications() &&
filament()->getDatabaseNotificationsPosition() ===
\Filament\Enums\DatabaseNotificationsPosition::Sidebar;
$hasUserMenuInSidebar =
filament()->hasUserMenu() &&
filament()->getUserMenuPosition() === \Filament\Enums\UserMenuPosition::Sidebar;
$shouldRenderFooter = $isAuthenticated && ($hasDatabaseNotificationsInSidebar || $hasUserMenuInSidebar);
@endphp
@@ -1,8 +1,6 @@
<div>
<div class="fi-simple-user-menu-ctn">
<x-filament-panels::user-menu
:position="\Filament\Enums\UserMenuPosition::Topbar"
/>
<x-filament-panels::user-menu :position="\Filament\Enums\UserMenuPosition::Topbar" />
</div>
<x-filament-actions::modals />
@@ -12,83 +12,45 @@
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TOPBAR_START) }}
@if ($hasNavigation)
<x-filament::icon-button
color="gray"
:icon="\Filament\Support\Icons\Heroicon::OutlinedBars3"
:icon-alias="\Filament\View\PanelsIconAlias::TOPBAR_OPEN_SIDEBAR_BUTTON"
icon-size="lg"
:label="__('filament-panels::layout.actions.sidebar.expand.label')"
x-cloak
x-data="{}"
x-on:click="$store.sidebar.open()"
x-show="! $store.sidebar.isOpen"
class="fi-topbar-open-sidebar-btn"
/>
<x-filament::icon-button color="gray" :icon="\Filament\Support\Icons\Heroicon::OutlinedBars3" :icon-alias="\Filament\View\PanelsIconAlias::TOPBAR_OPEN_SIDEBAR_BUTTON" icon-size="lg" :label="__('filament-panels::layout.actions.sidebar.expand.label')"
x-cloak x-data="{}" x-on:click="$store.sidebar.open()" x-show="! $store.sidebar.isOpen"
class="fi-topbar-open-sidebar-btn" />
<x-filament::icon-button
color="gray"
:icon="\Filament\Support\Icons\Heroicon::OutlinedXMark"
:icon-alias="\Filament\View\PanelsIconAlias::TOPBAR_CLOSE_SIDEBAR_BUTTON"
icon-size="lg"
:label="__('filament-panels::layout.actions.sidebar.collapse.label')"
x-cloak
x-data="{}"
x-on:click="$store.sidebar.close()"
x-show="$store.sidebar.isOpen"
class="fi-topbar-close-sidebar-btn"
/>
<x-filament::icon-button color="gray" :icon="\Filament\Support\Icons\Heroicon::OutlinedXMark" :icon-alias="\Filament\View\PanelsIconAlias::TOPBAR_CLOSE_SIDEBAR_BUTTON" icon-size="lg" :label="__('filament-panels::layout.actions.sidebar.collapse.label')"
x-cloak x-data="{}" x-on:click="$store.sidebar.close()" x-show="$store.sidebar.isOpen"
class="fi-topbar-close-sidebar-btn" />
@endif
<div class="fi-topbar-start">
@if ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop)
<div
x-show="$store.sidebar.isOpen || @js($isSidebarCollapsibleOnDesktop)"
class="fi-topbar-collapse-sidebar-btn-ctn"
>
<div x-show="$store.sidebar.isOpen || @js($isSidebarCollapsibleOnDesktop)"
class="fi-topbar-collapse-sidebar-btn-ctn">
@if ($isSidebarCollapsibleOnDesktop)
<x-filament::icon-button
color="gray"
:icon="$isRtl ? \Filament\Support\Icons\Heroicon::OutlinedChevronLeft : \Filament\Support\Icons\Heroicon::OutlinedChevronRight"
{{-- @deprecated Use `PanelsIconAlias::SIDEBAR_EXPAND_BUTTON_RTL` instead of `PanelsIconAlias::SIDEBAR_EXPAND_BUTTON` for RTL. --}}
:icon-alias="
$isRtl
<x-filament::icon-button color="gray" :icon="$isRtl
? \Filament\Support\Icons\Heroicon::OutlinedChevronLeft
: \Filament\Support\Icons\Heroicon::OutlinedChevronRight" {{-- @deprecated Use `PanelsIconAlias::SIDEBAR_EXPAND_BUTTON_RTL` instead of `PanelsIconAlias::SIDEBAR_EXPAND_BUTTON` for RTL. --}}
:icon-alias="$isRtl
? [
\Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON_RTL,
\Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON,
]
: \Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON
"
icon-size="lg"
:label="__('filament-panels::layout.actions.sidebar.expand.label')"
x-cloak
x-data="{}"
x-on:click="$store.sidebar.open()"
x-show="! $store.sidebar.isOpen"
class="fi-topbar-open-collapse-sidebar-btn"
/>
: \Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON" icon-size="lg" :label="__('filament-panels::layout.actions.sidebar.expand.label')" x-cloak x-data="{}"
x-on:click="$store.sidebar.open()" x-show="! $store.sidebar.isOpen"
class="fi-topbar-open-collapse-sidebar-btn" />
@endif
@if ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop)
<x-filament::icon-button
color="gray"
:icon="$isRtl ? \Filament\Support\Icons\Heroicon::OutlinedChevronRight : \Filament\Support\Icons\Heroicon::OutlinedChevronLeft"
{{-- @deprecated Use `PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON_RTL` instead of `PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON` for RTL. --}}
:icon-alias="
$isRtl
<x-filament::icon-button color="gray" :icon="$isRtl
? \Filament\Support\Icons\Heroicon::OutlinedChevronRight
: \Filament\Support\Icons\Heroicon::OutlinedChevronLeft" {{-- @deprecated Use `PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON_RTL` instead of `PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON` for RTL. --}}
:icon-alias="$isRtl
? [
\Filament\View\PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON_RTL,
\Filament\View\PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON,
]
: \Filament\View\PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON
"
icon-size="lg"
:label="__('filament-panels::layout.actions.sidebar.collapse.label')"
x-cloak
x-data="{}"
x-on:click="$store.sidebar.close()"
x-show="$store.sidebar.isOpen"
class="fi-topbar-close-collapse-sidebar-btn"
/>
: \Filament\View\PanelsIconAlias::SIDEBAR_COLLAPSE_BUTTON" icon-size="lg" :label="__('filament-panels::layout.actions.sidebar.collapse.label')" x-cloak x-data="{}"
x-on:click="$store.sidebar.close()" x-show="$store.sidebar.isOpen"
class="fi-topbar-close-collapse-sidebar-btn" />
@endif
</div>
@endif
@@ -106,7 +68,7 @@
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TOPBAR_LOGO_AFTER) }}
</div>
@if ($hasTopNavigation || (! $hasNavigation))
@if ($hasTopNavigation || !$hasNavigation)
@if ($hasTenancy && filament()->hasTenantMenu())
<x-filament-panels::tenant-menu teleport />
@endif
@@ -126,16 +88,9 @@
@endphp
@if ($groupLabel)
<x-filament::dropdown
placement="bottom-start"
teleport
:attributes="\Filament\Support\prepare_inherited_attributes($groupExtraTopbarAttributeBag)"
>
<x-filament::dropdown placement="bottom-start" teleport :attributes="\Filament\Support\prepare_inherited_attributes($groupExtraTopbarAttributeBag)">
<x-slot name="trigger">
<x-filament-panels::topbar.item
:active="$isGroupActive"
:icon="$groupIcon"
>
<x-filament-panels::topbar.item :active="$isGroupActive" :icon="$groupIcon">
{{ $groupLabel }}
</x-filament-panels::topbar.item>
</x-slot>
@@ -145,10 +100,7 @@
foreach ($group->getItems() as $item) {
if ($childItems = $item->getChildItems()) {
$lists[] = [
$item,
...$childItems,
];
$lists[] = [$item, ...$childItems];
$lists[] = [];
continue;
@@ -177,22 +129,18 @@
$itemBadgeColor = $item->getBadgeColor($itemBadge);
$itemBadgeTooltip = $item->getBadgeTooltip($itemBadge);
$itemUrl = $item->getUrl();
$itemIcon = $isItemActive ? ($item->getActiveIcon() ?? $item->getIcon()) : $item->getIcon();
$itemIcon = $isItemActive
? $item->getActiveIcon() ?? $item->getIcon()
: $item->getIcon();
$shouldItemOpenUrlInNewTab = $item->shouldOpenUrlInNewTab();
$itemExtraAttributes = $item->getExtraAttributeBag();
@endphp
<x-filament::dropdown.list.item
:badge="$itemBadge"
:badge-color="$itemBadgeColor"
:badge-tooltip="$itemBadgeTooltip"
:color="$isItemActive ? 'primary' : 'gray'"
:href="$itemUrl"
:icon="$itemIcon"
tag="a"
:target="$shouldItemOpenUrlInNewTab ? '_blank' : null"
:attributes="\Filament\Support\prepare_inherited_attributes($itemExtraAttributes)"
>
<x-filament::dropdown.list.item :badge="$itemBadge" :badge-color="$itemBadgeColor"
:badge-tooltip="$itemBadgeTooltip" :color="$isItemActive ? 'primary' : 'gray'" :href="$itemUrl"
:icon="$itemIcon" tag="a" :target="$shouldItemOpenUrlInNewTab ? '_blank' : null" :attributes="\Filament\Support\prepare_inherited_attributes(
$itemExtraAttributes,
)">
{{ $item->getLabel() }}
</x-filament::dropdown.list.item>
@endforeach
@@ -213,17 +161,9 @@
$itemExtraAttributes = $item->getExtraAttributeBag();
@endphp
<x-filament-panels::topbar.item
:active="$isItemActive"
:active-icon="$itemActiveIcon"
:badge="$itemBadge"
:badge-color="$itemBadgeColor"
:badge-tooltip="$itemBadgeTooltip"
:icon="$itemIcon"
:should-open-url-in-new-tab="$shouldItemOpenUrlInNewTab"
:url="$itemUrl"
:attributes="\Filament\Support\prepare_inherited_attributes($itemExtraAttributes)"
>
<x-filament-panels::topbar.item :active="$isItemActive" :active-icon="$itemActiveIcon" :badge="$itemBadge"
:badge-color="$itemBadgeColor" :badge-tooltip="$itemBadgeTooltip" :icon="$itemIcon" :should-open-url-in-new-tab="$shouldItemOpenUrlInNewTab"
:url="$itemUrl" :attributes="\Filament\Support\prepare_inherited_attributes($itemExtraAttributes)">
{{ $item->getLabel() }}
</x-filament-panels::topbar.item>
@endforeach
@@ -233,24 +173,22 @@
@endif
@endif
<div
@if ($hasTenancy)
x-persist="topbar.end.panel-{{ filament()->getId() }}.tenant-{{ filament()->getTenant()?->getKey() }}"
<div @if ($hasTenancy) x-persist="topbar.end.panel-{{ filament()->getId() }}.tenant-{{ filament()->getTenant()?->getKey() }}"
@else
x-persist="topbar.end.panel-{{ filament()->getId() }}"
@endif
class="fi-topbar-end"
>
x-persist="topbar.end.panel-{{ filament()->getId() }}" @endif
class="fi-topbar-end">
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::GLOBAL_SEARCH_BEFORE) }}
@if (filament()->isGlobalSearchEnabled() && filament()->getGlobalSearchPosition() === \Filament\Enums\GlobalSearchPosition::Topbar)
@if (filament()->isGlobalSearchEnabled() &&
filament()->getGlobalSearchPosition() === \Filament\Enums\GlobalSearchPosition::Topbar)
@livewire(Filament\Livewire\GlobalSearch::class)
@endif
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::GLOBAL_SEARCH_AFTER) }}
@if (filament()->auth()->check())
@if (filament()->hasDatabaseNotifications() && filament()->getDatabaseNotificationsPosition() === \Filament\Enums\DatabaseNotificationsPosition::Topbar)
@if (filament()->hasDatabaseNotifications() &&
filament()->getDatabaseNotificationsPosition() === \Filament\Enums\DatabaseNotificationsPosition::Topbar)
@livewire(filament()->getDatabaseNotificationsLivewireComponent(), [
'lazy' => filament()->hasLazyLoadedDatabaseNotifications(),
])
@@ -4,11 +4,7 @@
<x-filament-widgets::widget class="fi-account-widget">
<x-filament::section>
<x-filament-panels::avatar.user
size="lg"
:user="$user"
loading="lazy"
/>
<x-filament-panels::avatar.user size="lg" :user="$user" loading="lazy" />
<div class="fi-account-widget-main">
<h2 class="fi-account-widget-heading">
@@ -20,21 +16,11 @@
</p>
</div>
<form
action="{{ filament()->getLogoutUrl() }}"
method="post"
class="fi-account-widget-logout-form"
>
<form action="{{ filament()->getLogoutUrl() }}" method="post" class="fi-account-widget-logout-form">
@csrf
<x-filament::button
color="gray"
:icon="\Filament\Support\Icons\Heroicon::ArrowLeftEndOnRectangle"
:icon-alias="\Filament\View\PanelsIconAlias::WIDGETS_ACCOUNT_LOGOUT_BUTTON"
labeled-from="sm"
tag="button"
type="submit"
>
<x-filament::button color="gray" :icon="\Filament\Support\Icons\Heroicon::ArrowLeftEndOnRectangle" :icon-alias="\Filament\View\PanelsIconAlias::WIDGETS_ACCOUNT_LOGOUT_BUTTON" labeled-from="sm" tag="button"
type="submit">
{{ __('filament-panels::widgets/account-widget.actions.logout.label') }}
</x-filament::button>
</form>
@@ -1,47 +1,28 @@
<x-filament-widgets::widget class="fi-filament-info-widget">
<x-filament::section>
<div class="fi-filament-info-widget-main">
<a
href="https://filamentphp.com"
rel="noopener noreferrer"
target="_blank"
>
<svg
aria-label="Filament"
fill="currentColor"
role="img"
viewBox="0 0 1988.74 399.55"
xmlns="http://www.w3.org/2000/svg"
class="fi-filament-info-widget-logo"
>
<a href="https://filamentphp.com" rel="noopener noreferrer" target="_blank">
<svg aria-label="Filament" fill="currentColor" role="img" viewBox="0 0 1988.74 399.55"
xmlns="http://www.w3.org/2000/svg" class="fi-filament-info-widget-logo">
<path
d="M115.85,138.9v-20.22c0-31.15,10.38-54.64,41.53-54.64h27.87V.1h-27.87C85.79.1,48.64,44.36,48.64,118.68v20.22H0v53.55h48.64v201.63h67.21v-201.63h82.19v-53.55h-82.19Z"
/>
d="M115.85,138.9v-20.22c0-31.15,10.38-54.64,41.53-54.64h27.87V.1h-27.87C85.79.1,48.64,44.36,48.64,118.68v20.22H0v53.55h48.64v201.63h67.21v-201.63h82.19v-53.55h-82.19Z" />
<rect x="382.68" y=".11" width="66.67" height="393.98" />
<path
d="M628.22,335.07c-36.62,0-70.49-27.87-70.49-68.85s33.88-68.86,70.49-68.86,69.94,24.59,69.94,68.86-33.88,68.85-69.94,68.85M698.16,170.59c-18.57-28.42-56.28-37.16-79.23-37.16-67.21,0-130.06,50.82-130.06,132.79s62.84,132.79,130.06,132.79c25.14,0,62.84-11.48,79.23-37.71v32.79h66.67v-255.2h-66.67v31.7Z"
/>
d="M628.22,335.07c-36.62,0-70.49-27.87-70.49-68.85s33.88-68.86,70.49-68.86,69.94,24.59,69.94,68.86-33.88,68.85-69.94,68.85M698.16,170.59c-18.57-28.42-56.28-37.16-79.23-37.16-67.21,0-130.06,50.82-130.06,132.79s62.84,132.79,130.06,132.79c25.14,0,62.84-11.48,79.23-37.71v32.79h66.67v-255.2h-66.67v31.7Z" />
<path
d="M1116.15,133.44c-20.22,0-56.28,6.01-80.33,48.09-14.21-31.16-40.98-45.36-81.42-47.55-24.04,0-59.01,11.48-73.22,42.63v-37.7h-66.67v255.19h66.67v-136.07c0-43.71,26.23-59.56,53.55-59.56s46.45,19.68,47,55.19v140.44h66.66v-136.07c0-38.79,21.86-59.56,51.92-59.56,27.32,0,48.09,20.22,48.09,56.83v138.8h66.12v-145.9c0-74.87-36.61-114.75-98.36-114.75"
/>
d="M1116.15,133.44c-20.22,0-56.28,6.01-80.33,48.09-14.21-31.16-40.98-45.36-81.42-47.55-24.04,0-59.01,11.48-73.22,42.63v-37.7h-66.67v255.19h66.67v-136.07c0-43.71,26.23-59.56,53.55-59.56s46.45,19.68,47,55.19v140.44h66.66v-136.07c0-38.79,21.86-59.56,51.92-59.56,27.32,0,48.09,20.22,48.09,56.83v138.8h66.12v-145.9c0-74.87-36.61-114.75-98.36-114.75" />
<path
d="M1314.33,243.27c4.92-34.43,32.23-54.1,67.21-54.1,32.78,0,59.01,19.12,63.93,54.1h-131.14ZM1380.99,133.44c-72.68,0-132.24,51.91-132.24,132.24s59.56,133.87,132.24,133.87c46.99,0,96.17-18.03,119.12-61.74-16.39-8.75-34.97-18.58-50.82-27.32-12.02,21.86-38.25,32.78-63.93,32.78-37.71,0-66.12-20.76-70.49-54.64h194.53c.55-6.01,1.09-16.4,1.09-22.95,0-80.33-56.83-132.24-129.51-132.24"
/>
d="M1314.33,243.27c4.92-34.43,32.23-54.1,67.21-54.1,32.78,0,59.01,19.12,63.93,54.1h-131.14ZM1380.99,133.44c-72.68,0-132.24,51.91-132.24,132.24s59.56,133.87,132.24,133.87c46.99,0,96.17-18.03,119.12-61.74-16.39-8.75-34.97-18.58-50.82-27.32-12.02,21.86-38.25,32.78-63.93,32.78-37.71,0-66.12-20.76-70.49-54.64h194.53c.55-6.01,1.09-16.4,1.09-22.95,0-80.33-56.83-132.24-129.51-132.24" />
<path
d="M1698.38,133.44c-29.51,0-61.75,15.84-75.96,43.17v-37.7h-66.66v255.19h66.66v-136.07c0-44.26,25.69-59.56,55.74-59.56s48.64,19.68,48.64,56.83v138.8h66.66v-150.82c0-72.13-35.51-109.84-95.08-109.84"
/>
d="M1698.38,133.44c-29.51,0-61.75,15.84-75.96,43.17v-37.7h-66.66v255.19h66.66v-136.07c0-44.26,25.69-59.56,55.74-59.56s48.64,19.68,48.64,56.83v138.8h66.66v-150.82c0-72.13-35.51-109.84-95.08-109.84" />
<polygon
points="1868.52 41.64 1868.52 138.9 1822.07 138.9 1822.07 192.45 1868.52 192.45 1868.52 394.09 1934.64 394.09 1934.64 192.45 1988.74 192.45 1988.74 138.9 1934.64 138.9 1934.64 41.64 1868.52 41.64"
/>
points="1868.52 41.64 1868.52 138.9 1822.07 138.9 1822.07 192.45 1868.52 192.45 1868.52 394.09 1934.64 394.09 1934.64 192.45 1988.74 192.45 1988.74 138.9 1934.64 138.9 1934.64 41.64 1868.52 41.64" />
<path
d="M277.05,80.43c22.95,0,42.07-17.49,42.07-40.44S300,.11,277.05.11s-43.17,17.48-43.17,39.89,19.67,40.44,43.17,40.44"
/>
d="M277.05,80.43c22.95,0,42.07-17.49,42.07-40.44S300,.11,277.05.11s-43.17,17.48-43.17,39.89,19.67,40.44,43.17,40.44" />
<path
d="M323.62,164.94l-40.54-24.73,2.36-20.71-42.93,1.25.26,1.6c.38,2.33.06,5.14-.29,8.12-.71,6.12-1.52,13.07,4.08,17.83,1.93,1.64,8.35,5.31,15.14,9.19,4.29,2.45,9.81,5.6,12.53,7.37-1.73.58-4.17.44-6.56.31-1.56-.09-3.15-.19-4.59-.07l-2.06.14c-6.77.44-13.01.91-14.89,1.8-3.26,1.55-4.26,8.19-3.8,13.71.23,2.77,1.22,9.52,5.54,12.25l26.35,15.94-27.62,2.43-.53.15c-2.69,1.35-3.09,6.74-3.08,9.83,0,5.09,1.15,12.03,4.67,15.03l27.31,16.82c-1.02.02-2.05.06-3.07.08-8.85.23-18.02.46-26.14,2.81l-.44.22c-2.03,1.52-2.19,11.99-.76,17.93.85,3.58,2.3,5.87,4.09,6.72l26.38,15.93-26.59,2.44-.49.13c-5.61,2.66-3.51,17.42-2.07,21.75l.23.7,30.04,19.34-26.51,1.8c-1.81.09-2.69,1.08-3.38,1.99-2.17,2.88-2.03,13.55-1.59,29.49.23,7.83.43,15.22-.06,18.24l-.36,2.25h38.49l.21-23.88,45.27-4.62.38-.04.3-.21c1.94-1.39,2.28-6.6,2.3-9.58.02-2.34-.14-10.21-3-13.37l-28.81-18.02,28.71-2.66.31-.23c2.37-1.76,2.67-12.39,1.09-18.54-.98-3.82-2.63-6.25-4.65-7.1l-26.3-15.92c2.59-.14,5.31-.21,8.12-.28,6.36-.16,12.94-.33,18.45-1.47,1.94-.41,3.34-2.03,4.12-4.84,1.6-5.69.46-15.62-2.22-19.32-1.28-1.76-7.11-5.22-20.58-12.82-3.97-2.24-7.74-4.37-9.73-5.6,2.12-.09,4.84-.12,7.66-.14,11.65-.11,20.1-.36,22.78-2.58,2.23-1.86,2.89-12.01,1.22-18.4-.91-3.44-2.42-5.68-4.31-6.56l-26.32-15.92,26.83-2.23.53-.15c3.22-1.62,3.79-9.61,3.39-14.27-.27-3.21-1.26-8.94-4.89-11.31"
/>
d="M323.62,164.94l-40.54-24.73,2.36-20.71-42.93,1.25.26,1.6c.38,2.33.06,5.14-.29,8.12-.71,6.12-1.52,13.07,4.08,17.83,1.93,1.64,8.35,5.31,15.14,9.19,4.29,2.45,9.81,5.6,12.53,7.37-1.73.58-4.17.44-6.56.31-1.56-.09-3.15-.19-4.59-.07l-2.06.14c-6.77.44-13.01.91-14.89,1.8-3.26,1.55-4.26,8.19-3.8,13.71.23,2.77,1.22,9.52,5.54,12.25l26.35,15.94-27.62,2.43-.53.15c-2.69,1.35-3.09,6.74-3.08,9.83,0,5.09,1.15,12.03,4.67,15.03l27.31,16.82c-1.02.02-2.05.06-3.07.08-8.85.23-18.02.46-26.14,2.81l-.44.22c-2.03,1.52-2.19,11.99-.76,17.93.85,3.58,2.3,5.87,4.09,6.72l26.38,15.93-26.59,2.44-.49.13c-5.61,2.66-3.51,17.42-2.07,21.75l.23.7,30.04,19.34-26.51,1.8c-1.81.09-2.69,1.08-3.38,1.99-2.17,2.88-2.03,13.55-1.59,29.49.23,7.83.43,15.22-.06,18.24l-.36,2.25h38.49l.21-23.88,45.27-4.62.38-.04.3-.21c1.94-1.39,2.28-6.6,2.3-9.58.02-2.34-.14-10.21-3-13.37l-28.81-18.02,28.71-2.66.31-.23c2.37-1.76,2.67-12.39,1.09-18.54-.98-3.82-2.63-6.25-4.65-7.1l-26.3-15.92c2.59-.14,5.31-.21,8.12-.28,6.36-.16,12.94-.33,18.45-1.47,1.94-.41,3.34-2.03,4.12-4.84,1.6-5.69.46-15.62-2.22-19.32-1.28-1.76-7.11-5.22-20.58-12.82-3.97-2.24-7.74-4.37-9.73-5.6,2.12-.09,4.84-.12,7.66-.14,11.65-.11,20.1-.36,22.78-2.58,2.23-1.86,2.89-12.01,1.22-18.4-.91-3.44-2.42-5.68-4.31-6.56l-26.32-15.92,26.83-2.23.53-.15c3.22-1.62,3.79-9.61,3.39-14.27-.27-3.21-1.26-8.94-4.89-11.31" />
<path
d="M279.71,0c-23.51,0-43.2,17.5-43.2,39.92s19.69,40.46,43.2,40.46,42.11-17.5,42.11-40.46S302.68,0,279.71,0"
/>
d="M279.71,0c-23.51,0-43.2,17.5-43.2,39.92s19.69,40.46,43.2,40.46,42.11-17.5,42.11-40.46S302.68,0,279.71,0" />
</svg>
</a>
@@ -51,32 +32,17 @@
</div>
<div class="fi-filament-info-widget-links">
<x-filament::link
color="gray"
href="https://filamentphp.com/docs"
:icon="\Filament\Support\Icons\Heroicon::BookOpen"
:icon-alias="\Filament\View\PanelsIconAlias::WIDGETS_FILAMENT_INFO_OPEN_DOCUMENTATION_BUTTON"
rel="noopener noreferrer"
target="_blank"
>
<x-filament::link color="gray" href="https://filamentphp.com/docs" :icon="\Filament\Support\Icons\Heroicon::BookOpen" :icon-alias="\Filament\View\PanelsIconAlias::WIDGETS_FILAMENT_INFO_OPEN_DOCUMENTATION_BUTTON"
rel="noopener noreferrer" target="_blank">
{{ __('filament-panels::widgets/filament-info-widget.actions.open_documentation.label') }}
</x-filament::link>
<x-filament::link
color="gray"
href="https://github.com/filamentphp/filament"
:icon-alias="\Filament\View\PanelsIconAlias::WIDGETS_FILAMENT_INFO_OPEN_GITHUB_BUTTON"
rel="noopener noreferrer"
target="_blank"
>
<x-filament::link color="gray" href="https://github.com/filamentphp/filament" :icon-alias="\Filament\View\PanelsIconAlias::WIDGETS_FILAMENT_INFO_OPEN_GITHUB_BUTTON"
rel="noopener noreferrer" target="_blank">
<x-slot name="icon">
<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
<path
clip-rule="evenodd"
fill="currentColor"
fill-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
/>
<path clip-rule="evenodd" fill="currentColor" fill-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
</svg>
</x-slot>
@@ -7,30 +7,28 @@
$isSticky = $isSticky();
$verticalAlignment = $getVerticalAlignment();
if (! $verticalAlignment instanceof VerticalAlignment) {
$verticalAlignment = filled($verticalAlignment) ? (VerticalAlignment::tryFrom($verticalAlignment) ?? $verticalAlignment) : null;
if (!$verticalAlignment instanceof VerticalAlignment) {
$verticalAlignment = filled($verticalAlignment)
? VerticalAlignment::tryFrom($verticalAlignment) ?? $verticalAlignment
: null;
}
@endphp
<div
@if ($isSticky)
x-data="filamentActionsSchemaComponent()"
<div @if ($isSticky) x-data="filamentActionsSchemaComponent()"
x-intersect:enter.half="disableSticky"
x-intersect:leave="enableSticky"
x-bind:class="{ 'fi-sticky': isSticky }"
@endif
{{
$attributes
->merge([
x-bind:class="{ 'fi-sticky': isSticky }" @endif
{{ $attributes->merge(
[
'id' => $getId(),
], escape: false)
->merge($getExtraAttributes(), escape: false)
->class([
'fi-sc-actions',
($verticalAlignment instanceof VerticalAlignment) ? "fi-vertical-align-{$verticalAlignment->value}" : $verticalAlignment,
])
}}
>
],
escape: false,
)->merge($getExtraAttributes(), escape: false)->class([
'fi-sc-actions',
$verticalAlignment instanceof VerticalAlignment
? "fi-vertical-align-{$verticalAlignment->value}"
: $verticalAlignment,
]) }}>
@if (filled($label = $getLabel()))
<div class="fi-sc-actions-label-ctn">
{{ $getChildSchema($schemaComponent::BEFORE_LABEL_SCHEMA_KEY) }}
@@ -47,12 +45,8 @@
{{ $aboveContentContainer }}
@endif
<x-filament::actions
:actions="$actions"
:alignment="$alignment"
:full-width="$isFullWidth"
:x-bind:style="$isSticky ? 'isSticky ? `width: ${width}px;` : \'\'' : null"
/>
<x-filament::actions :actions="$actions" :alignment="$alignment" :full-width="$isFullWidth"
:x-bind:style="$isSticky ? 'isSticky ? `width: ${width}px;` : \'\'' : null" />
@if ($belowContentContainer = $getChildSchema($schemaComponent::BELOW_CONTENT_SCHEMA_KEY)?->toHtmlString())
{{ $belowContentContainer }}
@@ -12,18 +12,8 @@
$iconSize = $getIconSize() ?? IconSize::Large;
@endphp
<x-filament::callout
:attributes="
\Filament\Support\prepare_inherited_attributes($extraAttributeBag)
->class(['fi-sc-callout'])
"
:color="$color ?? 'gray'"
:description="$description"
:heading="$heading"
:icon="$icon"
:icon-color="$iconColor"
:icon-size="$iconSize"
>
<x-filament::callout :attributes="\Filament\Support\prepare_inherited_attributes($extraAttributeBag)->class(['fi-sc-callout'])" :color="$color ?? 'gray'" :description="$description" :heading="$heading" :icon="$icon"
:icon-color="$iconColor" :icon-size="$iconSize">
<x-slot name="footer">
{{ $footer }}
</x-slot>
@@ -10,22 +10,7 @@
$isContained = $isContained();
@endphp
<div
{{
$attributes
->merge($getExtraAttributes(), escape: false)
->class(['fi-sc-empty-state'])
}}
>
<x-filament::empty-state
:compact="$isCompact"
:contained="$isContained"
:description="$description"
:footer="$footer"
:heading="$heading"
:heading-tag="$headingTag"
:icon="$icon"
:icon-color="$iconColor"
:icon-size="$iconSize"
/>
<div {{ $attributes->merge($getExtraAttributes(), escape: false)->class(['fi-sc-empty-state']) }}>
<x-filament::empty-state :compact="$isCompact" :contained="$isContained" :description="$description" :footer="$footer" :heading="$heading"
:heading-tag="$headingTag" :icon="$icon" :icon-color="$iconColor" :icon-size="$iconSize" />
</div>
@@ -6,19 +6,14 @@
$isContained = $isContained();
@endphp
<x-filament::fieldset
:contained="$isContained"
:label="$label"
:label-hidden="$isLabelHidden"
:required="isset($isMarkedAsRequired) ? $isMarkedAsRequired() : false"
:attributes="
\Filament\Support\prepare_inherited_attributes($attributes)
->merge([
'id' => $id,
], escape: false)
->merge($extraAttributes, escape: false)
->class(['fi-sc-fieldset'])
"
>
<x-filament::fieldset :contained="$isContained" :label="$label" :label-hidden="$isLabelHidden" :required="isset($isMarkedAsRequired) ? $isMarkedAsRequired() : false" :attributes="\Filament\Support\prepare_inherited_attributes($attributes)
->merge(
[
'id' => $id,
],
escape: false,
)
->merge($extraAttributes, escape: false)
->class(['fi-sc-fieldset'])">
{{ $getChildSchema() }}
</x-filament::fieldset>
@@ -11,30 +11,29 @@
$verticalAlignment = $getVerticalAlignment();
$alignment = $getAlignment();
if (! $verticalAlignment instanceof VerticalAlignment) {
$verticalAlignment = filled($verticalAlignment) ? (VerticalAlignment::tryFrom($verticalAlignment) ?? $verticalAlignment) : null;
if (!$verticalAlignment instanceof VerticalAlignment) {
$verticalAlignment = filled($verticalAlignment)
? VerticalAlignment::tryFrom($verticalAlignment) ?? $verticalAlignment
: null;
}
if (! $alignment instanceof Alignment) {
$alignment = filled($alignment) ? (Alignment::tryFrom($alignment) ?? $alignment) : null;
if (!$alignment instanceof Alignment) {
$alignment = filled($alignment) ? Alignment::tryFrom($alignment) ?? $alignment : null;
}
@endphp
<div
{{
$attributes
->merge($getExtraAttributes(), escape: false)
->class([
'fi-sc-flex',
'fi-dense' => $isDense(),
'fi-from-' . ($fromBreakpoint ?? 'default'),
($verticalAlignment instanceof VerticalAlignment) ? "fi-vertical-align-{$verticalAlignment->value}" : $verticalAlignment,
($alignment instanceof Alignment) ? "fi-align-{$alignment->value}" : $alignment,
])
}}
>
{{ $attributes->merge($getExtraAttributes(), escape: false)->class([
'fi-sc-flex',
'fi-dense' => $isDense(),
'fi-from-' . ($fromBreakpoint ?? 'default'),
$verticalAlignment instanceof VerticalAlignment
? "fi-vertical-align-{$verticalAlignment->value}"
: $verticalAlignment,
$alignment instanceof Alignment ? "fi-align-{$alignment->value}" : $alignment,
]) }}>
@foreach ($getChildSchema()->getComponents() as $schemaComponent)
@if (($schemaComponent instanceof Action) || ($schemaComponent instanceof ActionGroup))
@if ($schemaComponent instanceof Action || $schemaComponent instanceof ActionGroup)
<div>
{{ $schemaComponent }}
</div>
@@ -46,31 +45,33 @@
$schemaComponentStatePath = $schemaComponent->getStatePath();
@endphp
<div
x-data="filamentSchemaComponent({
path: @js($schemaComponentStatePath),
containerPath: @js($statePath),
$wire,
})"
@if ($afterStateUpdatedJs = $schemaComponent->getAfterStateUpdatedJs())
x-init="{!! implode(';', array_map(
fn (string $js): string => '$wire; $wire.watch(' . Js::from($schemaComponentStatePath) . ', ($state, $old) => isStateChanged($state, $old) && eval(' . Js::from($js) . '))',
$afterStateUpdatedJs,
)) !!}"
@endif
@if (filled($visibilityJs = match ([filled($hiddenJs), filled($visibleJs)]) {
[true, true] => "(! ({$hiddenJs})) && ({$visibleJs})",
[true, false] => "! ({$hiddenJs})",
[false, true] => $visibleJs,
default => null,
}))
x-bind:class="{ 'fi-hidden': ! ({!! $visibilityJs !!}) }"
x-cloak
@endif
<div x-data="filamentSchemaComponent({
path: @js($schemaComponentStatePath),
containerPath: @js($statePath),
$wire,
})" @if ($afterStateUpdatedJs = $schemaComponent->getAfterStateUpdatedJs()) x-init="{!! implode(
';',
array_map(
fn(string $js): string => '$wire; $wire.watch(' .
Js::from($schemaComponentStatePath) .
', ($state, $old) => isStateChanged($state, $old) && eval(' .
Js::from($js) .
'))',
$afterStateUpdatedJs,
),
) !!}" @endif
@if (filled(
$visibilityJs = match ([filled($hiddenJs), filled($visibleJs)]) {
[true, true] => "(! ({$hiddenJs})) && ({$visibleJs})",
[true, false] => "! ({$hiddenJs})",
[false, true] => $visibleJs,
default => null,
})) x-bind:class="{ 'fi-hidden': ! ({!! $visibilityJs !!}) }"
x-cloak @endif
@class([
'fi-growable' => ($schemaComponent instanceof Component) && $schemaComponent->canGrow(),
])
>
'fi-growable' =>
$schemaComponent instanceof Component && $schemaComponent->canGrow(),
])>
{{ $schemaComponent }}
</div>
@endif
@@ -1,17 +1,11 @@
<form
{{
$attributes
->merge([
{{ $attributes->merge(
[
'id' => $getId(),
'wire:submit' => $getLivewireSubmitHandler(),
], escape: false)
->merge($getExtraAttributes(), escape: false)
->class([
'fi-sc-form',
'fi-dense' => $isDense(),
])
}}
>
],
escape: false,
)->merge($getExtraAttributes(), escape: false)->class(['fi-sc-form', 'fi-dense' => $isDense()]) }}>
{{ $getChildSchema($schemaComponent::HEADER_SCHEMA_KEY) }}
{{ $getChildSchema() }}
@@ -8,7 +8,7 @@
$errorMessage = null;
foreach ($getChildComponentContainer()->getComponents() as $childComponent) {
if (! ($childComponent instanceof Field)) {
if (!($childComponent instanceof Field)) {
continue;
}
@@ -31,7 +31,7 @@
break;
}
if (! ($childComponent instanceof HasNestedRecursiveValidationRules)) {
if (!($childComponent instanceof HasNestedRecursiveValidationRules)) {
continue;
}
@@ -50,24 +50,15 @@
}
@endphp
<x-dynamic-component
:component="$fieldWrapperView"
:error-message="$errorMessage"
:error-messages="$errorMessages"
:are-html-error-messages-allowed="$areHtmlValidationMessagesAllowed ?? false"
:should-show-all-validation-messages="$shouldShowAllValidationMessages ?? false"
:field="$schemaComponent"
>
<x-dynamic-component :component="$fieldWrapperView" :error-message="$errorMessage" :error-messages="$errorMessages" :are-html-error-messages-allowed="$areHtmlValidationMessagesAllowed ?? false" :should-show-all-validation-messages="$shouldShowAllValidationMessages ?? false"
:field="$schemaComponent">
<div
{{
$attributes
->merge([
{{ $attributes->merge(
[
'id' => $getId(),
], escape: false)
->merge($getExtraAttributes(), escape: false)
->class(['fi-sc-fused-group'])
}}
>
],
escape: false,
)->merge($getExtraAttributes(), escape: false)->class(['fi-sc-fused-group']) }}>
{{ $getChildSchema() }}
</div>
</x-dynamic-component>
@@ -1,11 +1,9 @@
<div
{{
$attributes
->merge([
{{ $attributes->merge(
[
'id' => $getId(),
], escape: false)
->merge($getExtraAttributes(), escape: false)
}}
>
],
escape: false,
)->merge($getExtraAttributes(), escape: false) }}>
{{ $getChildSchema() }}
</div>
@@ -6,26 +6,14 @@
$width = $getImageWidth();
$tooltip = $getTooltip();
if (! $alignment instanceof Alignment) {
$alignment = filled($alignment) ? (Alignment::tryFrom($alignment) ?? $alignment) : null;
if (!$alignment instanceof Alignment) {
$alignment = filled($alignment) ? Alignment::tryFrom($alignment) ?? $alignment : null;
}
@endphp
<img
alt="{{ $getAlt() }}"
src="{{ $getUrl() }}"
@if (filled($tooltip))
x-tooltip="{ content: @js($tooltip), theme: $store.theme, allowHTML: @js($tooltip instanceof \Illuminate\Contracts\Support\Htmlable) }"
@endif
{{
$getExtraAttributeBag()
->class([
'fi-sc-image',
($alignment instanceof Alignment) ? "fi-align-{$alignment->value}" : $alignment,
])
->style([
('height: ' . e($height)) => $height,
('width: ' . e($width)) => $width,
])
}}
/>
<img alt="{{ $getAlt() }}" src="{{ $getUrl() }}"
@if (filled($tooltip)) x-tooltip="{ content: @js($tooltip), theme: $store.theme, allowHTML: @js($tooltip instanceof \Illuminate\Contracts\Support\Htmlable) }" @endif
{{ $getExtraAttributeBag()->class(['fi-sc-image', $alignment instanceof Alignment ? "fi-align-{$alignment->value}" : $alignment])->style([
'height: ' . e($height) => $height,
'width: ' . e($width) => $width,
]) }} />
@@ -6,13 +6,12 @@
@if (filled($id) || filled($extraAttributes))
{!! '<div' !!}
{{-- Avoid formatting issues with unclosed elements --}}
{{
$attributes
->merge([
{{ $attributes->merge(
[
'id' => $id,
], escape: false)
->merge($extraAttributes, escape: false)
}}
],
escape: false,
)->merge($extraAttributes, escape: false) }}
>
@endif
@@ -20,22 +20,25 @@
$isSecondary = $isSecondary();
$id = $getId();
$stateResetHandler = ($isCollapsible && (! $isAside) && (! $shouldPersistCollapsed))
? ('if (($event.detail.livewireId === ' . Js::from($this->getId()) . ') && ($event.detail.schemaKey === ' . Js::from($getRootContainer()->getKey()) . ')) $nextTick(() => isCollapsed = ' . Js::from($isCollapsed) . ')')
: null;
$stateResetHandler =
$isCollapsible && !$isAside && !$shouldPersistCollapsed
? 'if (($event.detail.livewireId === ' .
Js::from($this->getId()) .
') && ($event.detail.schemaKey === ' .
Js::from($getRootContainer()->getKey()) .
')) $nextTick(() => isCollapsed = ' .
Js::from($isCollapsed) .
')'
: null;
@endphp
<div
{{
$attributes
->merge([
{{ $attributes->merge(
[
'id' => $id,
], escape: false)
->merge($getExtraAttributes(), escape: false)
->merge($getExtraAlpineAttributes(), escape: false)
->class(['fi-sc-section'])
}}
>
],
escape: false,
)->merge($getExtraAttributes(), escape: false)->merge($getExtraAlpineAttributes(), escape: false)->class(['fi-sc-section']) }}>
@if (filled($label = $getLabel()))
<div class="fi-sc-section-label-ctn">
{{ $getChildSchema($schemaComponent::BEFORE_LABEL_SCHEMA_KEY) }}
@@ -52,28 +55,11 @@
{{ $aboveContentContainer }}
@endif
<x-filament::section
:x-on:reset-schema-component-state.window="$stateResetHandler"
:after-header="$afterHeader"
:aside="$isAside"
:collapsed="$isCollapsed"
:collapse-id="$id"
:collapsible="$isCollapsible && (! $isAside)"
:compact="$isCompact"
:contained="$isContained"
:content-before="$isFormBefore"
:description="$description"
:divided="$isDivided"
:footer="$footer"
:has-content-el="false"
:heading="$heading"
:heading-tag="$headingTag"
:icon="$icon"
:icon-color="$iconColor"
:icon-size="$iconSize"
:persist-collapsed="$shouldPersistCollapsed"
:secondary="$isSecondary"
>
<x-filament::section :x-on:reset-schema-component-state.window="$stateResetHandler" :after-header="$afterHeader"
:aside="$isAside" :collapsed="$isCollapsed" :collapse-id="$id" :collapsible="$isCollapsible && !$isAside" :compact="$isCompact" :contained="$isContained"
:content-before="$isFormBefore" :description="$description" :divided="$isDivided" :footer="$footer" :has-content-el="false" :heading="$heading"
:heading-tag="$headingTag" :icon="$icon" :icon-color="$iconColor" :icon-size="$iconSize" :persist-collapsed="$shouldPersistCollapsed"
:secondary="$isSecondary">
{{ $getChildSchema()->extraAttributes(['class' => 'fi-section-content']) }}
</x-filament::section>
@@ -34,7 +34,8 @@
$dropdownJs = match ($mode) {
'inline' => "(!withinDropdownMounted || withinDropdownIndex === null || {$index} < withinDropdownIndex)",
'trigger' => "(withinDropdownMounted && withinDropdownIndex !== null && {$index} >= withinDropdownIndex && '{$tabKey}' === tab)",
'trigger'
=> "(withinDropdownMounted && withinDropdownIndex !== null && {$index} >= withinDropdownIndex && '{$tabKey}' === tab)",
default => null,
};
@@ -43,63 +44,45 @@
@endphp
@if (blank($livewireProperty))
<div
x-data="tabsSchemaComponent({
activeTab: @js($activeTab),
isScrollable: @js($isScrollable),
isTabPersisted: @js($isTabPersisted()),
isTabPersistedInQueryString: @js($isTabPersistedInQueryString()),
livewireId: @js($this->getId()),
schemaKey: @js($getRootContainer()->getKey()),
tab: @if ($isTabPersisted() && filled($id)) $persist(null).as(@js($id)) @else @js(null) @endif,
tabQueryStringKey: @js($getTabQueryStringKey()),
})"
x-load
<div x-data="tabsSchemaComponent({
activeTab: @js($activeTab),
isScrollable: @js($isScrollable),
isTabPersisted: @js($isTabPersisted()),
isTabPersistedInQueryString: @js($isTabPersistedInQueryString()),
livewireId: @js($this->getId()),
schemaKey: @js($getRootContainer()->getKey()),
tab: @if ($isTabPersisted() && filled($id)) $persist(null).as(@js($id)) @else @js(null) @endif,
tabQueryStringKey: @js($getTabQueryStringKey()),
})" x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('tabs', 'filament/schemas') }}"
wire:ignore.self
{{
$attributes
->merge([
{{ $attributes->merge(
[
'id' => $id,
'wire:key' => $getLivewireKey() . '.container',
], escape: false)
->merge($getExtraAttributes(), escape: false)
->merge($getExtraAlpineAttributes(), escape: false)
->class([
'fi-sc-tabs',
'fi-contained' => $isContained,
'fi-vertical' => $isVertical,
])
}}
>
<input
type="hidden"
value="{{ collect($tabs)->filter(static fn (Tab $tab): bool => $tab->isVisible())->map(static fn (Tab $tab) => $tab->getKey(isAbsolute: false))->values()->toJson() }}"
x-ref="tabsData"
/>
],
escape: false,
)->merge($getExtraAttributes(), escape: false)->merge($getExtraAlpineAttributes(), escape: false)->class(['fi-sc-tabs', 'fi-contained' => $isContained, 'fi-vertical' => $isVertical]) }}>
<input type="hidden"
value="{{ collect($tabs)->filter(static fn(Tab $tab): bool => $tab->isVisible())->map(static fn(Tab $tab) => $tab->getKey(isAbsolute: false))->values()->toJson() }}"
x-ref="tabsData" />
<x-filament::tabs
:contained="$isContained"
:label="$label"
:vertical="$isVertical"
x-cloak
:x-bind:class="! $isScrollable ? '{ \'fi-invisible\': ! withinDropdownMounted }' : null"
:x-data="
$hasDeferredBadges ? '{
deferredBadges: {},
isLoadingDeferredBadges: true,
async init() {
try {
const badges = await $wire.callSchemaComponentMethod(' . \Illuminate\Support\Js::from($tabsKey) . ', \'getDeferredTabBadges\')
<x-filament::tabs :contained="$isContained" :label="$label" :vertical="$isVertical" x-cloak
:x-bind:class="!$isScrollable ? '{ \'fi-invisible\': ! withinDropdownMounted }' : null" :x-data="$hasDeferredBadges ? '{
deferredBadges: {},
isLoadingDeferredBadges: true,
async init() {
try {
const badges = await $wire.callSchemaComponentMethod(' . \Illuminate\Support\Js::from($tabsKey) . ', \'getDeferredTabBadges\')
this.deferredBadges = badges ?? {}
} finally {
}
finally {
this.isLoadingDeferredBadges = false
}
},
}' : null
"
>
}
' : null">
@foreach ($getStartRenderHooks() as $startRenderHook)
{{ \Filament\Support\Facades\FilamentView::renderHook($startRenderHook, scopes: $renderHookScopes) }}
@endforeach
@@ -120,31 +103,16 @@
$tabVisibilityJs = $getTabVisibilityJs($tab, $index, 'inline');
@endphp
<x-filament::tabs.item
:alpine-active="'tab === \'' . $tabKey . '\''"
:alpine-deferred-badge-data="$isTabBadgeDeferred ? 'deferredBadges[' . \Illuminate\Support\Js::from($index) . ']' : null"
:alpine-deferred-badge-loading="$isTabBadgeDeferred ? 'isLoadingDeferredBadges' : null"
:attributes="$tabExtraAttributeBag"
:badge="$tabBadge"
:badge-color="$tabBadgeColor"
:badge-icon="$tabBadgeIcon"
:badge-icon-position="$tabBadgeIconPosition"
:badge-tooltip="$tabBadgeTooltip"
:data-tab-key="$tabKey"
:icon="$tabIcon"
:icon-position="$tabIconPosition"
:x-cloak="$tabVisibilityJs !== null"
:x-on:click="'tab = \'' . $tabKey . '\''"
:x-show="$tabVisibilityJs"
>
<x-filament::tabs.item :alpine-active="'tab === \'' . $tabKey . '\''" :alpine-deferred-badge-data="$isTabBadgeDeferred ? 'deferredBadges[' . \Illuminate\Support\Js::from($index) . ']' : null" :alpine-deferred-badge-loading="$isTabBadgeDeferred ? 'isLoadingDeferredBadges' : null" :attributes="$tabExtraAttributeBag"
:badge="$tabBadge" :badge-color="$tabBadgeColor" :badge-icon="$tabBadgeIcon" :badge-icon-position="$tabBadgeIconPosition" :badge-tooltip="$tabBadgeTooltip"
:data-tab-key="$tabKey" :icon="$tabIcon" :icon-position="$tabIconPosition" :x-cloak="$tabVisibilityJs !== null"
:x-on:click="'tab = \'' . $tabKey . '\''" :x-show="$tabVisibilityJs">
{{ $tabLabel }}
</x-filament::tabs.item>
@endforeach
@if (! $isScrollable)
<x-filament::dropdown
:placement="__('filament-panels::layout.direction') === 'ltr' ? 'bottom-start' : 'bottom-end'"
>
@if (!$isScrollable)
<x-filament::dropdown :placement="__('filament-panels::layout.direction') === 'ltr' ? 'bottom-start' : 'bottom-end'">
<x-slot name="trigger">
@foreach ($tabs as $index => $tab)
@php
@@ -158,30 +126,20 @@
$tabVisibilityJs = $getTabVisibilityJs($tab, $index, 'trigger');
@endphp
<x-filament::tabs.item
:alpine-active="'tab === \'' . $tabKey . '\''"
:alpine-deferred-badge-data="$isTabBadgeDeferred ? 'deferredBadges[' . \Illuminate\Support\Js::from($index) . ']' : null"
:alpine-deferred-badge-loading="$isTabBadgeDeferred ? 'isLoadingDeferredBadges' : null"
:attributes="$tabExtraAttributeBag"
:badge="$tabBadge"
:badge-color="$tabBadgeColor"
:badge-tooltip="$tabBadgeTooltip"
:icon="Heroicon::ChevronDown"
:icon-alias="SchemaIconAlias::COMPONENTS_TABS_DROPDOWN_TRIGGER_BUTTON"
:x-cloak="$tabVisibilityJs !== null"
:x-show="$tabVisibilityJs"
>
<x-filament::tabs.item :alpine-active="'tab === \'' . $tabKey . '\''" :alpine-deferred-badge-data="$isTabBadgeDeferred
? 'deferredBadges[' . \Illuminate\Support\Js::from($index) . ']'
: null" :alpine-deferred-badge-loading="$isTabBadgeDeferred ? 'isLoadingDeferredBadges' : null"
:attributes="$tabExtraAttributeBag" :badge="$tabBadge" :badge-color="$tabBadgeColor" :badge-tooltip="$tabBadgeTooltip"
:icon="Heroicon::ChevronDown" :icon-alias="SchemaIconAlias::COMPONENTS_TABS_DROPDOWN_TRIGGER_BUTTON" :x-cloak="$tabVisibilityJs !== null" :x-show="$tabVisibilityJs">
{{ $tabLabel }}
</x-filament::tabs.item>
@endforeach
<x-filament::tabs.item x-show="isDropdownButtonVisible">
{{
\Filament\Support\generate_icon_html(
Heroicon::EllipsisHorizontal,
alias: SchemaIconAlias::COMPONENTS_TABS_MORE_TABS_BUTTON,
)
}}
{{ \Filament\Support\generate_icon_html(
Heroicon::EllipsisHorizontal,
alias: SchemaIconAlias::COMPONENTS_TABS_MORE_TABS_BUTTON,
) }}
</x-filament::tabs.item>
</x-slot>
@@ -197,17 +155,12 @@
$tabLabel = $tab->getLabel();
@endphp
<x-filament::dropdown.list.item
:alpine-deferred-badge-data="$isTabBadgeDeferred ? 'deferredBadges[' . \Illuminate\Support\Js::from($index) . ']' : null"
:alpine-deferred-badge-loading="$isTabBadgeDeferred ? 'isLoadingDeferredBadges' : null"
:badge="$tabBadge"
:badge-color="$tabBadgeColor"
:badge-tooltip="$tabBadgeTooltip"
:icon="$tabIcon"
<x-filament::dropdown.list.item :alpine-deferred-badge-data="$isTabBadgeDeferred
? 'deferredBadges[' . \Illuminate\Support\Js::from($index) . ']'
: null" :alpine-deferred-badge-loading="$isTabBadgeDeferred ? 'isLoadingDeferredBadges' : null" :badge="$tabBadge"
:badge-color="$tabBadgeColor" :badge-tooltip="$tabBadgeTooltip" :icon="$tabIcon"
x-bind:class="{ 'fi-selected': tab === '{{ $tabKey }}' }"
:x-on:click="'tab = \'' . $tabKey . '\'; close($event);'"
:x-show="$index . ' >= withinDropdownIndex'"
>
:x-on:click="'tab = \'' . $tabKey . '\'; close($event);'" :x-show="$index . ' >= withinDropdownIndex'">
{{ $tabLabel }}
</x-filament::dropdown.list.item>
@endforeach
@@ -239,9 +192,7 @@
$activeTab = strval($this->{$livewireProperty});
@endphp
<div
@if ($hasDeferredBadges)
x-data="{
<div @if ($hasDeferredBadges) x-data="{
deferredBadges: {},
isLoadingDeferredBadges: true,
@@ -257,27 +208,15 @@
this.isLoadingDeferredBadges = false
}
},
}"
@endif
{{
$attributes
->merge([
}" @endif
{{ $attributes->merge(
[
'id' => $id,
'wire:key' => $getLivewireKey() . '.container',
], escape: false)
->merge($getExtraAttributes(), escape: false)
->class([
'fi-sc-tabs',
'fi-contained' => $isContained,
'fi-vertical' => $isVertical,
])
}}
>
<x-filament::tabs
:contained="$isContained"
:label="$label"
:vertical="$isVertical"
>
],
escape: false,
)->merge($getExtraAttributes(), escape: false)->class(['fi-sc-tabs', 'fi-contained' => $isContained, 'fi-vertical' => $isVertical]) }}>
<x-filament::tabs :contained="$isContained" :label="$label" :vertical="$isVertical">
@foreach ($getStartRenderHooks() as $startRenderHook)
{{ \Filament\Support\Facades\FilamentView::renderHook($startRenderHook, scopes: $renderHookScopes) }}
@endforeach
@@ -297,20 +236,10 @@
$tabLabel = $tab->getLabel() ?? $this->generateTabLabel($tabKey);
@endphp
<x-filament::tabs.item
:active="$activeTab === $tabKey"
:alpine-deferred-badge-data="$isTabBadgeDeferred ? 'deferredBadges[' . \Illuminate\Support\Js::from($tabKey) . ']' : null"
:alpine-deferred-badge-loading="$isTabBadgeDeferred ? 'isLoadingDeferredBadges' : null"
:attributes="$tabExtraAttributeBag"
:badge="$tabBadge"
:badge-color="$tabBadgeColor"
:badge-icon="$tabBadgeIcon"
:badge-icon-position="$tabBadgeIconPosition"
:badge-tooltip="$tabBadgeTooltip"
:icon="$tabIcon"
:icon-position="$tabIconPosition"
:wire:click="'$set(\'' . $livewireProperty . '\', ' . (filled($tabKey) ? ('\'' . $tabKey . '\'') : 'null') . ')'"
>
<x-filament::tabs.item :active="$activeTab === $tabKey" :alpine-deferred-badge-data="$isTabBadgeDeferred ? 'deferredBadges[' . \Illuminate\Support\Js::from($tabKey) . ']' : null" :alpine-deferred-badge-loading="$isTabBadgeDeferred ? 'isLoadingDeferredBadges' : null" :attributes="$tabExtraAttributeBag"
:badge="$tabBadge" :badge-color="$tabBadgeColor" :badge-icon="$tabBadgeIcon" :badge-icon-position="$tabBadgeIconPosition" :badge-tooltip="$tabBadgeTooltip"
:icon="$tabIcon" :icon-position="$tabIconPosition"
:wire:click="'$set(\'' . $livewireProperty . '\', ' . (filled($tabKey) ? ('\'' . $tabKey . '\'') : 'null') . ')'">
{{ $tabLabel }}
</x-filament::tabs.item>
@endforeach
@@ -8,41 +8,34 @@
$childSchema = $getChildSchema();
@endphp
@if (! empty($childSchema->getComponents()))
@if (!empty($childSchema->getComponents()))
@if (blank($livewireProperty))
<div
x-bind:class="{
'fi-active': tab === @js($key),
}"
<div x-bind:class="{
'fi-active': tab === @js($key),
}"
x-on:expand="tab = @js($key)"
{{
$attributes
->merge([
{{ $attributes->merge(
[
'aria-labelledby' => $id,
'id' => $id,
'role' => 'tabpanel',
'wire:key' => $getLivewireKey() . '.container',
], escape: false)
->merge($getExtraAttributes(), escape: false)
->class(['fi-sc-tabs-tab'])
}}
>
],
escape: false,
)->merge($getExtraAttributes(), escape: false)->class(['fi-sc-tabs-tab']) }}>
{{ $childSchema }}
</div>
@elseif (strval($this->{$livewireProperty}) === strval($key))
<div
{{
$attributes
->merge([
{{ $attributes->merge(
[
'aria-labelledby' => $id,
'id' => $id,
'role' => 'tabpanel',
'wire:key' => $getLivewireKey() . '.container',
], escape: false)
->merge($getExtraAttributes(), escape: false)
->class(['fi-sc-tabs-tab fi-active'])
}}
>
],
escape: false,
)->merge($getExtraAttributes(), escape: false)->class(['fi-sc-tabs-tab fi-active']) }}>
{{ $childSchema }}
</div>
@endif
@@ -21,12 +21,7 @@
@endphp
@if ($isBadge())
<x-filament::badge
:color="$color"
:icon="$icon"
:icon-position="$iconPosition"
:icon-size="$iconSize"
:size="$size instanceof \Filament\Support\Enums\TextSize ? $size->value : $size"
<x-filament::badge :color="$color" :icon="$icon" :icon-position="$iconPosition" :icon-size="$iconSize" :size="$size instanceof \Filament\Support\Enums\TextSize ? $size->value : $size"
:x-on:click="
$isCopyable ? '
window.navigator.clipboard.writeText(' . \Illuminate\Support\Js::from($copyableState) . ')
@@ -35,44 +30,30 @@
timeout: ' . \Illuminate\Support\Js::from($copyMessageDuration) . ',
})
' : null
"
:tag="$isCopyable ? 'button' : 'span'"
:tooltip="$tooltip"
:attributes="\Filament\Support\prepare_inherited_attributes($getExtraAttributeBag()->class(['fi-sc-text']))"
>
" :tag="$isCopyable ? 'button' : 'span'" :tooltip="$tooltip" :attributes="\Filament\Support\prepare_inherited_attributes($getExtraAttributeBag()->class(['fi-sc-text']))">
{{ $content }}
</x-filament::badge>
@else
<span
@if ($isCopyable)
x-on:click="
@if ($isCopyable) x-on:click="
window.navigator.clipboard.writeText(@js($copyableState))
$tooltip(@js($copyMessage), {
theme: $store.theme,
timeout: @js($copyMessageDuration),
})
"
@endif
@if (filled($tooltip))
x-tooltip="{
" @endif
@if (filled($tooltip)) x-tooltip="{
content: @js($tooltip),
theme: $store.theme,
allowHTML: @js($tooltip instanceof \Illuminate\Contracts\Support\Htmlable),
}"
@endif
{{
(new \Illuminate\View\ComponentAttributeBag)
->color(TextComponent::class, $color)
->class([
'fi-sc-text',
'fi-copyable' => $isCopyable,
($size instanceof \BackedEnum) ? "fi-size-{$size->value}" : $size,
($weight instanceof FontWeight) ? "fi-font-{$weight->value}" : $weight,
($fontFamily instanceof FontFamily) ? "fi-font-{$fontFamily->value}" : $fontFamily,
])
->merge($getExtraAttributes(), escape: false)
}}
>
}" @endif
{{ new \Illuminate\View\ComponentAttributeBag()->color(TextComponent::class, $color)->class([
'fi-sc-text',
'fi-copyable' => $isCopyable,
$size instanceof \BackedEnum ? "fi-size-{$size->value}" : $size,
$weight instanceof FontWeight ? "fi-font-{$weight->value}" : $weight,
$fontFamily instanceof FontFamily ? "fi-font-{$fontFamily->value}" : $fontFamily,
])->merge($getExtraAttributes(), escape: false) }}>
{{ $content }}
</span>
@endif
@@ -1,13 +1,8 @@
<ul
{{
$getExtraAttributeBag()
->grid($getColumns(), \Filament\Support\Enums\GridDirection::Column)
->class([
'fi-sc-unordered-list',
(($size = $getSize()) instanceof \Filament\Support\Enums\TextSize) ? "fi-size-{$size->value}" : $size,
])
}}
>
{{ $getExtraAttributeBag()->grid($getColumns(), \Filament\Support\Enums\GridDirection::Column)->class([
'fi-sc-unordered-list',
($size = $getSize()) instanceof \Filament\Support\Enums\TextSize ? "fi-size-{$size->value}" : $size,
]) }}>
@foreach ($getChildSchema()->getComponents() as $schemaComponent)
<li>
{{ $schemaComponent }}
@@ -7,141 +7,96 @@
$isHeaderHidden = $isHeaderHidden();
@endphp
<div
x-load
<div x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('wizard', 'filament/schemas') }}"
x-data="wizardSchemaComponent({
isSkippable: @js($isSkippable()),
isStepPersistedInQueryString: @js($isStepPersistedInQueryString()),
key: @js($key),
livewireId: @js($this->getId()),
schemaKey: @js($getRootContainer()->getKey()),
startStep: @js($getStartStep()),
stepQueryStringKey: @js($getStepQueryStringKey()),
})"
isSkippable: @js($isSkippable()),
isStepPersistedInQueryString: @js($isStepPersistedInQueryString()),
key: @js($key),
livewireId: @js($this->getId()),
schemaKey: @js($getRootContainer()->getKey()),
startStep: @js($getStartStep()),
stepQueryStringKey: @js($getStepQueryStringKey()),
})"
x-on:next-wizard-step.window="if ($event.detail.key === @js($key)) goToNextStep()"
x-on:go-to-wizard-step.window="$event.detail.key === @js($key) && goToStep($event.detail.step)"
wire:ignore.self
{{
$attributes
->merge([
{{ $attributes->merge(
[
'id' => $getId(),
], escape: false)
->merge($getExtraAttributes(), escape: false)
->merge($getExtraAlpineAttributes(), escape: false)
->class([
'fi-sc-wizard',
'fi-contained' => $isContained,
'fi-sc-wizard-header-hidden' => $isHeaderHidden,
])
}}
>
<input
type="hidden"
value="{{
collect($steps)
->filter(static fn (\Filament\Schemas\Components\Wizard\Step $step): bool => $step->isVisible())
->map(static fn (\Filament\Schemas\Components\Wizard\Step $step): ?string => $step->getKey())
->values()
->toJson()
}}"
x-ref="stepsData"
/>
],
escape: false,
)->merge($getExtraAttributes(), escape: false)->merge($getExtraAlpineAttributes(), escape: false)->class(['fi-sc-wizard', 'fi-contained' => $isContained, 'fi-sc-wizard-header-hidden' => $isHeaderHidden]) }}>
<input type="hidden"
value="{{ collect($steps)->filter(static fn(\Filament\Schemas\Components\Wizard\Step $step): bool => $step->isVisible())->map(static fn(\Filament\Schemas\Components\Wizard\Step $step): ?string => $step->getKey())->values()->toJson() }}"
x-ref="stepsData" />
@if (! $isHeaderHidden)
<ol
@if (filled($label = $getLabel()))
aria-label="{{ $label }}"
@endif
role="list"
x-cloak
x-ref="header"
class="fi-sc-wizard-header"
>
@if (!$isHeaderHidden)
<ol @if (filled($label = $getLabel())) aria-label="{{ $label }}" @endif role="list" x-cloak
x-ref="header" class="fi-sc-wizard-header">
@foreach ($steps as $step)
<li
class="fi-sc-wizard-header-step"
<li class="fi-sc-wizard-header-step"
x-bind:class="{
'fi-active': getStepIndex(step) === {{ $loop->index }},
'fi-completed': getStepIndex(step) > {{ $loop->index }},
}"
>
<button
type="button"
}">
<button type="button"
x-bind:aria-current="getStepIndex(step) === {{ $loop->index }} ? 'step' : null"
x-on:click="step = @js($step->getKey())"
x-bind:disabled="! isStepAccessible(@js($step->getKey())) || @js($previousAction->isDisabled())"
class="fi-sc-wizard-header-step-btn"
>
x-bind:disabled="!isStepAccessible(@js($step->getKey())) || @js($previousAction->isDisabled())"
class="fi-sc-wizard-header-step-btn">
<div class="fi-sc-wizard-header-step-icon-ctn">
@php
$completedIcon = $step->getCompletedIcon();
@endphp
{{
\Filament\Support\generate_icon_html(
$completedIcon ?? \Filament\Support\Icons\Heroicon::OutlinedCheck,
alias: filled($completedIcon) ? null : \Filament\Schemas\View\SchemaIconAlias::COMPONENTS_WIZARD_COMPLETED_STEP,
attributes: new \Illuminate\View\ComponentAttributeBag([
'x-cloak' => 'x-cloak',
'x-show' => "getStepIndex(step) > {$loop->index}",
]),
size: \Filament\Support\Enums\IconSize::Large,
)
}}
{{ \Filament\Support\generate_icon_html(
$completedIcon ?? \Filament\Support\Icons\Heroicon::OutlinedCheck,
alias: filled($completedIcon) ? null : \Filament\Schemas\View\SchemaIconAlias::COMPONENTS_WIZARD_COMPLETED_STEP,
attributes: new \Illuminate\View\ComponentAttributeBag([
'x-cloak' => 'x-cloak',
'x-show' => "getStepIndex(step) > {$loop->index}",
]),
size: \Filament\Support\Enums\IconSize::Large,
) }}
@if (filled($icon = $step->getIcon()))
{{
\Filament\Support\generate_icon_html(
$icon,
attributes: new \Illuminate\View\ComponentAttributeBag([
'x-cloak' => 'x-cloak',
'x-show' => "getStepIndex(step) <= {$loop->index}",
]),
size: \Filament\Support\Enums\IconSize::Large,
)
}}
{{ \Filament\Support\generate_icon_html(
$icon,
attributes: new \Illuminate\View\ComponentAttributeBag([
'x-cloak' => 'x-cloak',
'x-show' => "getStepIndex(step) <= {$loop->index}",
]),
size: \Filament\Support\Enums\IconSize::Large,
) }}
@else
<span
x-show="getStepIndex(step) <= {{ $loop->index }}"
class="fi-sc-wizard-header-step-number"
>
<span x-show="getStepIndex(step) <= {{ $loop->index }}"
class="fi-sc-wizard-header-step-number">
{{ str_pad($loop->index + 1, 2, '0', STR_PAD_LEFT) }}
</span>
@endif
</div>
<div class="fi-sc-wizard-header-step-text">
@if (! $step->isLabelHidden())
@if (!$step->isLabelHidden())
<span class="fi-sc-wizard-header-step-label">
{{ $step->getLabel() }}
</span>
@endif
@if (filled($description = $step->getDescription()))
<span
class="fi-sc-wizard-header-step-description"
>
<span class="fi-sc-wizard-header-step-description">
{{ $description }}
</span>
@endif
</div>
</button>
@if (! $loop->last)
<svg
fill="none"
preserveAspectRatio="none"
viewBox="0 0 22 80"
aria-hidden="true"
class="fi-sc-wizard-header-step-separator"
>
<path
d="M0 -2L20 40L0 82"
stroke-linejoin="round"
stroke="currentcolor"
vector-effect="non-scaling-stroke"
></path>
@if (!$loop->last)
<svg fill="none" preserveAspectRatio="none" viewBox="0 0 22 80" aria-hidden="true"
class="fi-sc-wizard-header-step-separator">
<path d="M0 -2L20 40L0 82" stroke-linejoin="round" stroke="currentcolor"
vector-effect="non-scaling-stroke"></path>
</svg>
@endif
</li>
@@ -154,13 +109,7 @@
@endforeach
<div x-cloak class="fi-sc-wizard-footer">
<div
x-cloak
@if (! $previousAction->isDisabled())
x-on:click="goToPreviousStep"
@endif
x-show="! isFirstStep()"
>
<div x-cloak @if (!$previousAction->isDisabled()) x-on:click="goToPreviousStep" @endif x-show="! isFirstStep()">
{{ $previousAction }}
</div>
@@ -168,18 +117,12 @@
{{ $getCancelAction() }}
</div>
<div
x-cloak
@if (! $nextAction->isDisabled())
x-on:click="requestNextStep()"
@endif
x-bind:class="{ 'fi-hidden': isLastStep() }"
wire:loading.class="fi-disabled"
>
<div x-cloak @if (!$nextAction->isDisabled()) x-on:click="requestNextStep()" @endif
x-bind:class="{ 'fi-hidden': isLastStep() }" wire:loading.class="fi-disabled">
{{ $nextAction }}
</div>
<div x-bind:class="{ 'fi-hidden': ! isLastStep() }">
<div x-bind:class="{ 'fi-hidden': !isLastStep() }">
{{ $getSubmitAction() }}
</div>
</div>
@@ -6,8 +6,7 @@
$alpineSubmitHandler = $hasFormWrapper() ? $wizard->getAlpineSubmitHandler() : null;
@endphp
<{{ filled($alpineSubmitHandler) ? 'form' : 'div' }}
x-bind:tabindex="$el.querySelector('[autofocus]') ? '-1' : '0'"
<{{ filled($alpineSubmitHandler) ? 'form' : 'div' }} x-bind:tabindex="$el.querySelector('[autofocus]') ? '-1' : '0'"
x-bind:class="{
'fi-active': step === @js($key),
}"
@@ -18,26 +17,20 @@
step = @js($key)
"
@if (filled($alpineSubmitHandler))
x-on:submit.prevent="isLastStep() ? {!! $alpineSubmitHandler !!} : requestNextStep()"
@endif
x-cloak
x-ref="step-{{ $key }}"
{{
$attributes
->merge([
@if (filled($alpineSubmitHandler)) x-on:submit.prevent="isLastStep() ? {!! $alpineSubmitHandler !!} : requestNextStep()" @endif
x-cloak x-ref="step-{{ $key }}"
{{ $attributes->merge(
[
'aria-labelledby' => $id,
'id' => $id,
'role' => 'tabpanel',
], escape: false)
->merge($getExtraAttributes(), escape: false)
->class(['fi-sc-wizard-step'])
}}
>
],
escape: false,
)->merge($getExtraAttributes(), escape: false)->class(['fi-sc-wizard-step']) }}>
{{ $getChildSchema() }}
@if (filled($alpineSubmitHandler))
{{-- This is a hack to allow the form to submit when the user presses the enter key, even if there is no other submit button in the form. --}}
<input type="submit" hidden />
@endif
</{{ filled($alpineSubmitHandler) ? 'form' : 'div' }}>
</{{ filled($alpineSubmitHandler) ? 'form' : 'div' }}>
@@ -10,102 +10,65 @@
'reorderAnimationDuration' => 300,
])
<div
@if ($hasReorderableColumns)
x-sortable
<div @if ($hasReorderableColumns) x-sortable
x-on:end.stop="reorderColumns($event.target.sortable.toArray())"
data-sortable-animation-duration="{{ $reorderAnimationDuration }}"
@endif
{{
(new ComponentAttributeBag)
->grid($columns, GridDirection::Column)
->class(['fi-ta-col-manager-items'])
}}
>
<template
x-for="(column, index) in columns.filter((column) => ! column.isHidden && column.label)"
x-bind:key="(column.type === 'group' ? 'group::' : 'column::') + column.name + '_' + index"
>
data-sortable-animation-duration="{{ $reorderAnimationDuration }}" @endif
{{ new ComponentAttributeBag()->grid($columns, GridDirection::Column)->class(['fi-ta-col-manager-items']) }}>
<template x-for="(column, index) in columns.filter((column) => ! column.isHidden && column.label)"
x-bind:key="(column.type === 'group' ? 'group::' : 'column::') + column.name + '_' + index">
<div
@if ($hasReorderableColumns)
x-bind:x-sortable-item="column.type === 'group' ? 'group::' + column.name : 'column::' + column.name"
@endif
>
@if ($hasReorderableColumns) x-bind:x-sortable-item="column.type === 'group' ? 'group::' + column.name : 'column::' + column.name" @endif>
<template x-if="column.type === 'group'">
<div class="fi-ta-col-manager-group">
<div class="fi-ta-col-manager-item">
<label class="fi-ta-col-manager-label">
@if ($hasToggleableColumns)
<input
type="checkbox"
class="fi-checkbox-input fi-valid"
<input type="checkbox" class="fi-checkbox-input fi-valid"
x-bind:id="'group-' + column.name"
x-bind:checked="(groupedColumns[column.name] || {}).checked || false"
x-bind:disabled="(groupedColumns[column.name] || {}).disabled || false"
x-effect="$el.indeterminate = (groupedColumns[column.name] || {}).indeterminate || false"
x-on:change="toggleGroup(column.name)"
/>
x-on:change="toggleGroup(column.name)" />
@endif
<span x-html="column.label"></span>
</label>
@if ($hasReorderableColumns)
<button
x-sortable-handle
x-on:click.stop
class="fi-ta-col-manager-reorder-handle fi-icon-btn"
type="button"
>
<button x-sortable-handle x-on:click.stop
class="fi-ta-col-manager-reorder-handle fi-icon-btn" type="button">
{{ \Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::Bars2, alias: \Filament\Tables\View\TablesIconAlias::REORDER_HANDLE) }}
</button>
@endif
</div>
<div
@if ($hasReorderableColumns)
x-sortable
<div @if ($hasReorderableColumns) x-sortable
x-on:end.stop="reorderGroupColumns($event.target.sortable.toArray(), column.name)"
data-sortable-animation-duration="{{ $reorderAnimationDuration }}"
@endif
class="fi-ta-col-manager-group-items"
>
data-sortable-animation-duration="{{ $reorderAnimationDuration }}" @endif
class="fi-ta-col-manager-group-items">
<template
x-for="
(groupColumn, index) in
column.columns.filter((column) => ! column.isHidden && column.label)
"
x-bind:key="'column::' + groupColumn.name + '_' + index"
>
x-bind:key="'column::' + groupColumn.name + '_' + index">
<div
@if ($hasReorderableColumns)
x-bind:x-sortable-item="'column::' + groupColumn.name"
@endif
>
@if ($hasReorderableColumns) x-bind:x-sortable-item="'column::' + groupColumn.name" @endif>
<div class="fi-ta-col-manager-item">
<label class="fi-ta-col-manager-label">
@if ($hasToggleableColumns)
<input
type="checkbox"
class="fi-checkbox-input fi-valid"
<input type="checkbox" class="fi-checkbox-input fi-valid"
x-bind:id="'column-' + groupColumn.name.replace('.', '-')"
x-bind:checked="(getColumn(groupColumn.name, column.name) || {}).isToggled || false"
x-bind:disabled="(getColumn(groupColumn.name, column.name) || {}).isToggleable === false"
x-on:change="toggleColumn(groupColumn.name, column.name)"
/>
x-on:change="toggleColumn(groupColumn.name, column.name)" />
@endif
<span
x-html="groupColumn.label"
></span>
<span x-html="groupColumn.label"></span>
</label>
@if ($hasReorderableColumns)
<button
x-sortable-handle
x-on:click.stop
class="fi-ta-col-manager-reorder-handle fi-icon-btn"
type="button"
>
<button x-sortable-handle x-on:click.stop
class="fi-ta-col-manager-reorder-handle fi-icon-btn" type="button">
{{ \Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::Bars2, alias: \Filament\Tables\View\TablesIconAlias::REORDER_HANDLE) }}
</button>
@endif
@@ -119,26 +82,19 @@
<div class="fi-ta-col-manager-item">
<label class="fi-ta-col-manager-label">
@if ($hasToggleableColumns)
<input
type="checkbox"
class="fi-checkbox-input fi-valid"
<input type="checkbox" class="fi-checkbox-input fi-valid"
x-bind:id="'column-' + column.name.replace('.', '-')"
x-bind:checked="(getColumn(column.name, null) || {}).isToggled || false"
x-bind:disabled="(getColumn(column.name, null) || {}).isToggleable === false"
x-on:change="toggleColumn(column.name)"
/>
x-on:change="toggleColumn(column.name)" />
@endif
<span x-html="column.label"></span>
</label>
@if ($hasReorderableColumns)
<button
x-sortable-handle
x-on:click.stop
class="fi-ta-col-manager-reorder-handle fi-icon-btn"
type="button"
>
<button x-sortable-handle x-on:click.stop class="fi-ta-col-manager-reorder-handle fi-icon-btn"
type="button">
{{ \Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::Bars2, alias: \Filament\Tables\View\TablesIconAlias::REORDER_HANDLE) }}
</button>
@endif
@@ -13,46 +13,35 @@
'resetActionPosition' => ColumnManagerResetActionPosition::Header,
])
<div
x-data="filamentTableColumnManager({
columns: $wire.entangle('tableColumns'),
isLive: {{ $applyAction->isVisible() ? 'false' : 'true' }},
})"
class="fi-ta-col-manager"
>
<div x-data="filamentTableColumnManager({
columns: $wire.entangle('tableColumns'),
isLive: {{ $applyAction->isVisible() ? 'false' : 'true' }},
})" class="fi-ta-col-manager">
<div class="fi-ta-col-manager-header">
<{{ $headingTag }} class="fi-ta-col-manager-heading">
{{ __('filament-tables::table.column_manager.heading') }}
</{{ $headingTag }}>
</{{ $headingTag }}>
@if ($resetActionPosition === ColumnManagerResetActionPosition::Header)
<div>
<x-filament::link
:attributes="
\Filament\Support\prepare_inherited_attributes(
new ComponentAttributeBag([
'color' => 'danger',
'tag' => 'button',
'wire:click' => 'resetTableColumnManager',
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => '',
'wire:target' => 'resetTableColumnManager',
'x-on:click' => 'resetDeferredColumns',
])
)
"
>
{{ __('filament-tables::table.column_manager.actions.reset.label') }}
</x-filament::link>
</div>
@endif
@if ($resetActionPosition === ColumnManagerResetActionPosition::Header)
<div>
<x-filament::link :attributes="\Filament\Support\prepare_inherited_attributes(
new ComponentAttributeBag([
'color' => 'danger',
'tag' => 'button',
'wire:click' => 'resetTableColumnManager',
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => '',
'wire:target' => 'resetTableColumnManager',
'x-on:click' => 'resetDeferredColumns',
]),
)">
{{ __('filament-tables::table.column_manager.actions.reset.label') }}
</x-filament::link>
</div>
@endif
</div>
<x-filament-tables::column-manager.content
:columns="$columns"
:has-reorderable-columns="$hasReorderableColumns"
:has-toggleable-columns="$hasToggleableColumns"
:reorder-animation-duration="$reorderAnimationDuration"
/>
<x-filament-tables::column-manager.content :columns="$columns" :has-reorderable-columns="$hasReorderableColumns" :has-toggleable-columns="$hasToggleableColumns"
:reorder-animation-duration="$reorderAnimationDuration" />
@if ($applyAction->isVisible() || $resetActionPosition === ColumnManagerResetActionPosition::Footer)
<div class="fi-ta-col-manager-actions-ctn">
@@ -61,11 +50,7 @@
@endif
@if ($resetActionPosition === ColumnManagerResetActionPosition::Footer)
<x-filament::button
color="danger"
wire:click="resetTableColumnManager"
x-on:click="resetDeferredColumns"
>
<x-filament::button color="danger" wire:click="resetTableColumnManager" x-on:click="resetDeferredColumns">
{{ __('filament-tables::table.column_manager.actions.reset.label') }}
</x-filament::button>
@endif
@@ -1,18 +1,7 @@
{{-- @deprecated Copy the code from this view directly into your own view to improve performance. --}}
@props([
'components',
'record',
'recordKey' => null,
'rowLoop' => null,
])
@props(['components', 'record', 'recordKey' => null, 'rowLoop' => null])
@foreach ($components as $layoutComponent)
{{
$layoutComponent
->record($record)
->recordKey($recordKey)
->rowLoop($rowLoop)
->renderInLayout()
}}
{{ $layoutComponent->record($record)->recordKey($recordKey)->rowLoop($rowLoop)->renderInLayout() }}
@endforeach
@@ -2,38 +2,29 @@
use Filament\Tables\Enums\FiltersResetActionPosition;
@endphp
@props([
'applyAction',
'form',
'headingTag' => 'h3',
'resetActionPosition' => FiltersResetActionPosition::Header,
])
@props(['applyAction', 'form', 'headingTag' => 'h3', 'resetActionPosition' => FiltersResetActionPosition::Header])
<div {{ $attributes->class(['fi-ta-filters']) }}>
<div class="fi-ta-filters-header">
<{{ $headingTag }} class="fi-ta-filters-heading">
{{ __('filament-tables::table.filters.heading') }}
</{{ $headingTag }}>
</{{ $headingTag }}>
@if ($resetActionPosition === FiltersResetActionPosition::Header)
<div>
<x-filament::link
:attributes="
\Filament\Support\prepare_inherited_attributes(
new \Illuminate\View\ComponentAttributeBag([
'color' => 'danger',
'tag' => 'button',
'wire:click' => 'resetTableFiltersForm',
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => '',
'wire:target' => 'resetTableFiltersForm',
])
)
"
>
{{ __('filament-tables::table.filters.actions.reset.label') }}
</x-filament::link>
</div>
@endif
@if ($resetActionPosition === FiltersResetActionPosition::Header)
<div>
<x-filament::link :attributes="\Filament\Support\prepare_inherited_attributes(
new \Illuminate\View\ComponentAttributeBag([
'color' => 'danger',
'tag' => 'button',
'wire:click' => 'resetTableFiltersForm',
'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => '',
'wire:target' => 'resetTableFiltersForm',
]),
)">
{{ __('filament-tables::table.filters.actions.reset.label') }}
</x-filament::link>
</div>
@endif
</div>
{{ $form }}
@@ -45,10 +36,7 @@
@endif
@if ($resetActionPosition === FiltersResetActionPosition::Footer)
<x-filament::button
color="danger"
wire:click="resetTableFiltersForm"
>
<x-filament::button color="danger" wire:click="resetTableFiltersForm">
{{ __('filament-tables::table.filters.actions.reset.label') }}
</x-filament::button>
@endif
@@ -13,34 +13,25 @@
$wireModelAttribute = $onBlur ? 'wire:model.live.blur' : "wire:model.live.debounce.{$debounce}";
@endphp
<div
x-id="['input']"
{{ $attributes->class(['fi-ta-search-field']) }}
>
<div x-id="['input']" {{ $attributes->class(['fi-ta-search-field']) }}>
<label x-bind:for="$id('input')" class="fi-sr-only">
{{ __('filament-tables::table.fields.search.label') }}
</label>
<x-filament::input.wrapper
inline-prefix
:prefix-icon="\Filament\Support\Icons\Heroicon::MagnifyingGlass"
:prefix-icon-alias="\Filament\Tables\View\TablesIconAlias::SEARCH_FIELD"
:wire:target="$wireModel"
>
<x-filament::input
:attributes="
(new ComponentAttributeBag)->merge([
'autocomplete' => 'off',
'inlinePrefix' => true,
'maxlength' => 1000,
'placeholder' => $placeholder,
'type' => 'search',
'wire:key' => $this->getId() . '.table.' . $wireModel . '.field.input',
$wireModelAttribute => $wireModel,
'x-bind:id' => '$id(\'input\')',
'x-on:keyup' => 'if ($event.key === \'Enter\') { $wire.$refresh() }',
], escape: false)
"
/>
<x-filament::input.wrapper inline-prefix :prefix-icon="\Filament\Support\Icons\Heroicon::MagnifyingGlass" :prefix-icon-alias="\Filament\Tables\View\TablesIconAlias::SEARCH_FIELD" :wire:target="$wireModel">
<x-filament::input :attributes="new ComponentAttributeBag()->merge(
[
'autocomplete' => 'off',
'inlinePrefix' => true,
'maxlength' => 1000,
'placeholder' => $placeholder,
'type' => 'search',
'wire:key' => $this->getId() . '.table.' . $wireModel . '.field.input',
$wireModelAttribute => $wireModel,
'x-bind:id' => '$id(\'input\')',
'x-on:keyup' => 'if ($event.key === \'Enter\') { $wire.$refresh() }',
],
escape: false,
)" />
</x-filament::input.wrapper>
</div>
@@ -21,12 +21,14 @@
use Filament\Tables\Enums\RecordCheckboxPosition;
if ($groupsOnly && $groupColumn) {
$columns = collect($columns)
->reject(fn (Column $column): bool => $column->getName() === $groupColumn)
->all();
$columns = collect($columns)->reject(fn(Column $column): bool => $column->getName() === $groupColumn)->all();
}
$hasPageSummary = $pageSummary && (! $groupsOnly) && $records instanceof \Illuminate\Contracts\Pagination\Paginator && $records->hasPages();
$hasPageSummary =
$pageSummary &&
!$groupsOnly &&
$records instanceof \Illuminate\Contracts\Pagination\Paginator &&
$records->hasPages();
$pageTableSummaryQuery = $hasPageSummary ? $this->getPageTableSummaryQuery() : null;
$allTableSummaryQuery = $allTableSummary ? $this->getAllTableSummaryQuery() : null;
@@ -34,7 +36,10 @@
@if ($hasPageSummary)
<tr class="fi-ta-row fi-ta-summary-header-row fi-striped">
@if ($placeholderColumns && $actions && in_array($actionsPosition, [RecordActionsPosition::BeforeCells, RecordActionsPosition::BeforeColumns]))
@if (
$placeholderColumns &&
$actions &&
in_array($actionsPosition, [RecordActionsPosition::BeforeCells, RecordActionsPosition::BeforeColumns]))
<td></td>
@endif
@@ -50,30 +55,30 @@
@foreach ($columns as $column)
@php
$columnHasSummary = ($pageTableSummaryQuery && $column->hasSummary($pageTableSummaryQuery)) || $column->hasSummary($allTableSummaryQuery);
$columnHasSummary =
($pageTableSummaryQuery && $column->hasSummary($pageTableSummaryQuery)) ||
$column->hasSummary($allTableSummaryQuery);
@endphp
@if ($placeholderColumns || $columnHasSummary)
@php
$alignment = $column->getAlignment() ?? Alignment::Start;
if (! $alignment instanceof Alignment) {
$alignment = filled($alignment) ? (Alignment::tryFrom($alignment) ?? $alignment) : null;
if (!$alignment instanceof Alignment) {
$alignment = filled($alignment) ? Alignment::tryFrom($alignment) ?? $alignment : null;
}
$hasColumnHeaderLabel = (! $placeholderColumns) || $columnHasSummary;
$hasColumnHeaderLabel = !$placeholderColumns || $columnHasSummary;
@endphp
<td
{{
$column->getExtraHeaderAttributeBag()->class([
{{ $column->getExtraHeaderAttributeBag()->class([
'fi-ta-cell fi-ta-summary-header-cell',
'fi-wrapped' => $column->canHeaderWrap(),
(($alignment instanceof Alignment) ? "fi-align-{$alignment->value}" : (is_string($alignment) ? $alignment : '')) => (! ($loop->first && (! $extraHeadingColumn))) && $hasColumnHeaderLabel,
])
}}
>
@if ($loop->first && (! $extraHeadingColumn))
$alignment instanceof Alignment ? "fi-align-{$alignment->value}" : (is_string($alignment) ? $alignment : '') =>
!($loop->first && !$extraHeadingColumn) && $hasColumnHeaderLabel,
]) }}>
@if ($loop->first && !$extraHeadingColumn)
{{ __('filament-tables::table.summary.heading', ['label' => $pluralModelLabel]) }}
@elseif ($hasColumnHeaderLabel)
{{ $column->getLabel() }}
@@ -82,7 +87,10 @@
@endif
@endforeach
@if ($placeholderColumns && $actions && in_array($actionsPosition, [RecordActionsPosition::AfterColumns, RecordActionsPosition::AfterCells]))
@if (
$placeholderColumns &&
$actions &&
in_array($actionsPosition, [RecordActionsPosition::AfterColumns, RecordActionsPosition::AfterCells]))
<td></td>
@endif
@@ -95,18 +103,8 @@
$selectedState = $this->getTableSummarySelectedState($pageTableSummaryQuery)[0] ?? [];
@endphp
<x-filament-tables::summary.row
:actions="$actions"
:actions-position="$actionsPosition"
:columns="$columns"
:extra-heading-column="$extraHeadingColumn"
:heading="__('filament-tables::table.summary.subheadings.page', ['label' => $pluralModelLabel])"
:placeholder-columns="$placeholderColumns"
:query="$pageTableSummaryQuery"
:record-checkbox-position="$recordCheckboxPosition"
:selected-state="$selectedState"
:selection-enabled="$selectionEnabled"
/>
<x-filament-tables::summary.row :actions="$actions" :actions-position="$actionsPosition" :columns="$columns" :extra-heading-column="$extraHeadingColumn"
:heading="__('filament-tables::table.summary.subheadings.page', ['label' => $pluralModelLabel])" :placeholder-columns="$placeholderColumns" :query="$pageTableSummaryQuery" :record-checkbox-position="$recordCheckboxPosition" :selected-state="$selectedState" :selection-enabled="$selectionEnabled" />
@endif
@if ($allTableSummary)
@@ -114,20 +112,14 @@
$selectedState = $this->getTableSummarySelectedState($allTableSummaryQuery)[0] ?? [];
@endphp
<x-filament-tables::summary.row
:actions="$actions"
:actions-position="$actionsPosition"
:columns="$columns"
:extra-heading-column="$extraHeadingColumn"
:groups-only="$groupsOnly"
:heading="__(($hasPageSummary ? 'filament-tables::table.summary.subheadings.all' : 'filament-tables::table.summary.heading'), ['label' => $pluralModelLabel])"
:placeholder-columns="$placeholderColumns"
:query="$allTableSummaryQuery"
:record-checkbox-position="$recordCheckboxPosition"
:selected-state="$selectedState"
:selection-enabled="$selectionEnabled"
@class([
'fi-striped' => ! $hasPageSummary,
])
/>
<x-filament-tables::summary.row :actions="$actions" :actions-position="$actionsPosition" :columns="$columns" :extra-heading-column="$extraHeadingColumn"
:groups-only="$groupsOnly" :heading="__(
$hasPageSummary
? 'filament-tables::table.summary.subheadings.all'
: 'filament-tables::table.summary.heading',
['label' => $pluralModelLabel],
)" :placeholder-columns="$placeholderColumns" :query="$allTableSummaryQuery" :record-checkbox-position="$recordCheckboxPosition"
:selected-state="$selectedState" :selection-enabled="$selectionEnabled" @class([
'fi-striped' => !$hasPageSummary,
]) />
@endif
@@ -20,14 +20,15 @@
use Filament\Tables\Enums\RecordCheckboxPosition;
if ($groupsOnly && $groupColumn) {
$columns = collect($columns)
->reject(fn (Column $column): bool => $column->getName() === $groupColumn)
->all();
$columns = collect($columns)->reject(fn(Column $column): bool => $column->getName() === $groupColumn)->all();
}
@endphp
<tr {{ $attributes->class(['fi-ta-row fi-ta-summary-row']) }}>
@if ($placeholderColumns && $actions && in_array($actionsPosition, [RecordActionsPosition::BeforeCells, RecordActionsPosition::BeforeColumns]))
@if (
$placeholderColumns &&
$actions &&
in_array($actionsPosition, [RecordActionsPosition::BeforeCells, RecordActionsPosition::BeforeColumns]))
<td></td>
@endif
@@ -58,26 +59,31 @@
@endif
@foreach ($columns as $column)
@if (($loop->first || $extraHeadingColumn || $groupsOnly || ($loop->iteration > $headingColumnSpan)) && ($placeholderColumns || $column->hasSummary($query)))
@if (
($loop->first || $extraHeadingColumn || $groupsOnly || $loop->iteration > $headingColumnSpan) &&
($placeholderColumns || $column->hasSummary($query)))
@php
$alignment = $column->getAlignment() ?? Alignment::Start;
if (! $alignment instanceof Alignment) {
$alignment = filled($alignment) ? (Alignment::tryFrom($alignment) ?? $alignment) : null;
if (!$alignment instanceof Alignment) {
$alignment = filled($alignment) ? Alignment::tryFrom($alignment) ?? $alignment : null;
}
@endphp
<td
colspan="{{ ($loop->first && (! $extraHeadingColumn) && (! $groupsOnly) && ($headingColumnSpan > 1)) ? $headingColumnSpan : null }}"
<td colspan="{{ $loop->first && !$extraHeadingColumn && !$groupsOnly && $headingColumnSpan > 1 ? $headingColumnSpan : null }}"
@class([
'fi-ta-cell',
($alignment instanceof Alignment) ? "fi-align-{$alignment->value}" : (is_string($alignment) ? $alignment : ''),
'fi-ta-summary-row-heading-cell' => $loop->first && (! $extraHeadingColumn) && (! $groupsOnly),
])
>
@if ($loop->first && (! $extraHeadingColumn) && (! $groupsOnly))
$alignment instanceof Alignment
? "fi-align-{$alignment->value}"
: (is_string($alignment)
? $alignment
: ''),
'fi-ta-summary-row-heading-cell' =>
$loop->first && !$extraHeadingColumn && !$groupsOnly,
])>
@if ($loop->first && !$extraHeadingColumn && !$groupsOnly)
{{ $heading }}
@elseif ((! $placeholderColumns) || $column->hasSummary($query))
@elseif (!$placeholderColumns || $column->hasSummary($query))
@foreach ($column->getSummarizers($query) as $summarizer)
{{ $summarizer->query($query)->selectedState($selectedState) }}
@endforeach
@@ -86,7 +92,10 @@
@endif
@endforeach
@if ($placeholderColumns && $actions && in_array($actionsPosition, [RecordActionsPosition::AfterColumns, RecordActionsPosition::AfterCells]))
@if (
$placeholderColumns &&
$actions &&
in_array($actionsPosition, [RecordActionsPosition::AfterColumns, RecordActionsPosition::AfterCells]))
<td></td>
@endif
File diff suppressed because it is too large Load Diff
@@ -13,23 +13,12 @@
@endphp
<x-filament-widgets::widget class="fi-wi-chart">
<x-filament::section
:description="$description"
:heading="$heading"
:collapsible="$isCollapsible"
>
<x-filament::section :description="$description" :heading="$heading" :collapsible="$isCollapsible">
@if ($filters || method_exists($this, 'getFiltersSchema'))
<x-slot name="afterHeader">
@if ($filters)
<x-filament::input.wrapper
inline-prefix
wire:target="filter"
class="fi-wi-chart-filter"
>
<x-filament::input.select
inline-prefix
wire:model.live="filter"
>
<x-filament::input.wrapper inline-prefix wire:target="filter" class="fi-wi-chart-filter">
<x-filament::input.select inline-prefix wire:model.live="filter">
@foreach ($filters as $value => $label)
<option value="{{ $value }}">
{{ $label }}
@@ -40,12 +29,7 @@
@endif
@if (method_exists($this, 'getFiltersSchema'))
<x-filament::dropdown
placement="bottom-end"
shift
width="xs"
class="fi-wi-chart-filter"
>
<x-filament::dropdown placement="bottom-end" shift width="xs" class="fi-wi-chart-filter">
<x-slot name="trigger">
{{ $this->getFiltersTriggerAction() }}
</x-slot>
@@ -54,9 +38,7 @@
{{ $this->getFiltersSchema() }}
@if (method_exists($this, 'hasDeferredFilters') && $this->hasDeferredFilters())
<div
class="fi-wi-chart-filter-content-actions-ctn"
>
<div class="fi-wi-chart-filter-content-actions-ctn">
{{ $this->getFiltersApplyAction() }}
{{ $this->getFiltersResetAction() }}
@@ -68,58 +50,24 @@
</x-slot>
@endif
<div
@if ($pollingInterval = $this->getPollingInterval())
wire:poll.{{ $pollingInterval }}="updateChartData"
@endif
>
<div
x-load
<div @if ($pollingInterval = $this->getPollingInterval()) wire:poll.{{ $pollingInterval }}="updateChartData" @endif>
<div x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chart', 'filament/widgets') }}"
wire:ignore
data-chart-type="{{ $type }}"
x-data="chart({
cachedData: @js($this->getCachedData()),
options: @js($this->getOptions()),
type: @js($type),
})"
{{
(new ComponentAttributeBag)
->color(ChartWidgetComponent::class, $color)
->class([
'fi-wi-chart-canvas-ctn',
'fi-wi-chart-canvas-ctn-no-aspect-ratio' => $hasMaxHeight,
])
}}
>
<canvas
x-ref="canvas"
@style([
'width: 100%',
'height: 100%; max-height: 100%' => ! $hasMaxHeight,
('max-height: ' . e($maxHeight)) => $hasMaxHeight,
])
></canvas>
wire:ignore data-chart-type="{{ $type }}" x-data="chart({
cachedData: @js($this->getCachedData()),
options: @js($this->getOptions()),
type: @js($type),
})"
{{ new ComponentAttributeBag()->color(ChartWidgetComponent::class, $color)->class(['fi-wi-chart-canvas-ctn', 'fi-wi-chart-canvas-ctn-no-aspect-ratio' => $hasMaxHeight]) }}>
<canvas x-ref="canvas" @style(['width: 100%', 'height: 100%; max-height: 100%' => !$hasMaxHeight, 'max-height: ' . e($maxHeight) => $hasMaxHeight])></canvas>
<span
x-ref="backgroundColorElement"
class="fi-wi-chart-bg-color"
></span>
<span x-ref="backgroundColorElement" class="fi-wi-chart-bg-color"></span>
<span
x-ref="borderColorElement"
class="fi-wi-chart-border-color"
></span>
<span x-ref="borderColorElement" class="fi-wi-chart-border-color"></span>
<span
x-ref="gridColorElement"
class="fi-wi-chart-grid-color"
></span>
<span x-ref="gridColorElement" class="fi-wi-chart-grid-color"></span>
<span
x-ref="textColorElement"
class="fi-wi-chart-text-color"
></span>
<span x-ref="textColorElement" class="fi-wi-chart-text-color"></span>
</div>
</div>
</x-filament::section>
@@ -1,5 +1,3 @@
<div
{{ $attributes->gridColumn($this->getColumnSpan(), $this->getColumnStart())->class(['fi-wi-widget']) }}
>
<div {{ $attributes->gridColumn($this->getColumnSpan(), $this->getColumnStart())->class(['fi-wi-widget']) }}>
{{ $slot }}
</div>
@@ -10,13 +10,13 @@
@php
if (is_array($columns)) {
$columns['lg'] ??= ($columns ? (is_array($columns) ? null : $columns) : 2);
$columns['lg'] ??= $columns ? (is_array($columns) ? null : $columns) : 2;
}
@endphp
<div {{ $attributes->grid($columns)->class(['fi-wi']) }}>
@php
$normalizeWidgetClass = function (string | Filament\Widgets\WidgetConfiguration $widget): string {
$normalizeWidgetClass = function (string|Filament\Widgets\WidgetConfiguration $widget): string {
if ($widget instanceof \Filament\Widgets\WidgetConfiguration) {
return $widget->widget;
}
@@ -30,10 +30,6 @@
$widgetClass = $normalizeWidgetClass($widget);
@endphp
@livewire(
$widgetClass,
[...(($widget instanceof \Filament\Widgets\WidgetConfiguration) ? [...$widget->widget::getDefaultProperties(), ...$widget->getProperties()] : $widget::getDefaultProperties()), ...$data],
key("{$widgetClass}-{$widgetKey}"),
)
@livewire($widgetClass, [...$widget instanceof \Filament\Widgets\WidgetConfiguration ? [...$widget->widget::getDefaultProperties(), ...$widget->getProperties()] : $widget::getDefaultProperties(), ...$data], key("{$widgetClass}-{$widgetKey}"))
@endforeach
</div>
@@ -8,16 +8,13 @@
$hasDescription = filled($description);
@endphp
<x-filament-widgets::widget
:attributes="
(new \Illuminate\View\ComponentAttributeBag)
->merge([
'wire:poll.' . $pollingInterval => $pollingInterval ? true : null,
], escape: false)
->class([
'fi-wi-stats-overview',
])
"
>
<x-filament-widgets::widget :attributes="new \Illuminate\View\ComponentAttributeBag()
->merge(
[
'wire:poll.' . $pollingInterval => $pollingInterval ? true : null,
],
escape: false,
)
->class(['fi-wi-stats-overview'])">
{{ $this->content }}
</x-filament-widgets::widget>
@@ -14,16 +14,8 @@
@endphp
<{!! $tag !!}
@if ($url)
{{ \Filament\Support\generate_href_html($url, $shouldOpenUrlInNewTab()) }}
@endif
{{
$getExtraAttributeBag()
->class([
'fi-wi-stats-overview-stat',
])
}}
>
@if ($url) {{ \Filament\Support\generate_href_html($url, $shouldOpenUrlInNewTab()) }} @endif
{{ $getExtraAttributeBag()->class(['fi-wi-stats-overview-stat']) }}>
<div class="fi-wi-stats-overview-stat-content">
<div class="fi-wi-stats-overview-stat-label-ctn">
{{ \Filament\Support\generate_icon_html($getIcon()) }}
@@ -39,10 +31,9 @@
@if ($description = $getDescription())
<div
{{ (new ComponentAttributeBag)->color(DescriptionComponent::class, $descriptionColor)->class(['fi-wi-stats-overview-stat-description']) }}
>
{{ new ComponentAttributeBag()->color(DescriptionComponent::class, $descriptionColor)->class(['fi-wi-stats-overview-stat-description']) }}>
@if ($descriptionIcon && in_array($descriptionIconPosition, [IconPosition::Before, 'before']))
{{ \Filament\Support\generate_icon_html($descriptionIcon, attributes: (new \Illuminate\View\ComponentAttributeBag)) }}
{{ \Filament\Support\generate_icon_html($descriptionIcon, attributes: new \Illuminate\View\ComponentAttributeBag()) }}
@endif
<span>
@@ -50,7 +41,7 @@
</span>
@if ($descriptionIcon && in_array($descriptionIconPosition, [IconPosition::After, 'after']))
{{ \Filament\Support\generate_icon_html($descriptionIcon, attributes: (new \Illuminate\View\ComponentAttributeBag)) }}
{{ \Filament\Support\generate_icon_html($descriptionIcon, attributes: new \Illuminate\View\ComponentAttributeBag()) }}
@endif
</div>
@endif
@@ -59,28 +50,20 @@
@if ($chart = $getChart())
{{-- An empty function to initialize the Alpine component with until it's loaded with `x-load`. This removes the need for `x-ignore`, allowing the chart to be updated via Livewire polling. --}}
<div x-data="{ statsOverviewStatChart() {} }">
<div
x-load
<div x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('stats-overview/stat/chart', 'filament/widgets') }}"
x-data="statsOverviewStatChart({
dataChecksum: @js($chartDataChecksum),
labels: @js(array_keys($chart)),
values: @js(array_values($chart)),
})"
{{ (new ComponentAttributeBag)->color(StatsOverviewWidgetStatChartComponent::class, $chartColor)->class(['fi-wi-stats-overview-stat-chart']) }}
>
dataChecksum: @js($chartDataChecksum),
labels: @js(array_keys($chart)),
values: @js(array_values($chart)),
})"
{{ new ComponentAttributeBag()->color(StatsOverviewWidgetStatChartComponent::class, $chartColor)->class(['fi-wi-stats-overview-stat-chart']) }}>
<canvas x-ref="canvas"></canvas>
<span
x-ref="backgroundColorElement"
class="fi-wi-stats-overview-stat-chart-bg-color"
></span>
<span x-ref="backgroundColorElement" class="fi-wi-stats-overview-stat-chart-bg-color"></span>
<span
x-ref="borderColorElement"
class="fi-wi-stats-overview-stat-chart-border-color"
></span>
<span x-ref="borderColorElement" class="fi-wi-stats-overview-stat-chart-border-color"></span>
</div>
</div>
@endif
</{!! $tag !!}>
</{!! $tag !!}>

Some files were not shown because too many files have changed in this diff Show More