merge($getExtraAttributes())->class([ 'filament-forms-tree-component py-2 px-5 bg-white border border-gray-300 rounded-xl shadow-sm', 'dark:bg-gray-500/10' => config('forms.dark_mode'), ]) }} wire:ignore x-data="{ areAllCheckboxesChecked: false, treeOptions: Array.from($root.querySelectorAll('.filament-forms-tree-component-option-label')), collapsedAll: false, init: function () { this.checkIfAllCheckboxesAreChecked() Livewire.hook('message.processed', () => { this.checkIfAllCheckboxesAreChecked() }) }, checkIfAllCheckboxesAreChecked: function () { this.areAllCheckboxesChecked = this.treeOptions.length === this.treeOptions.filter((checkboxLabel) => checkboxLabel.querySelector('input[type=checkbox]:checked')).length }, toggleAllCheckboxes: function () { state = ! this.areAllCheckboxesChecked this.treeOptions.forEach((checkboxLabel) => { checkbox = checkboxLabel.querySelector('input[type=checkbox]') checkbox.checked = state checkbox.dispatchEvent(new Event('change')) }) this.areAllCheckboxesChecked = state }, toggleCollapseAll: function () { this.collapsedAll = ! this.collapsedAll } }"> @foreach ($getOptions() as $optionValue => $item) @include('filament-tree::forms.tree.option-item', ['optionValue' => $optionValue, 'item' => $item]) @endforeach