wireable_objects_in_livewire.php

<?php

// Livewire component

namespace App\Http\Livewire;

use App\Settings\GeneralSettings;
use Carbon\Carbon;
use Livewire\Component;

class SettingsComponent extends Component
{
    public GeneralSettings $settings;

    public function mount(GeneralSettings $settings)
    {
        $this->settings = $settings;
    }

    public function updatingSettingsBackupDate(&$value)
    {
        $value = Carbon::create($value);
    }

    public function addHour(): void
    {
        $this->settings->backupDate->addHour();
    }

    public function subHour(): void
    {
        $this->settings->backupDate->subHour();
    }

    public function save(): void
    {
        $this->settings->save();
    }

    public function render()
    {
        return view('livewire.settings-component');
    }
}

// Settings DTO (Wireable):
namespace App\Settings;

use Carbon\Carbon;
use Livewire\Wireable;
use Spatie\LaravelSettings\Settings;

class GeneralSettings extends Settings implements Wireable
{
    public Carbon $backupDate;

    public static function group(): string
    {
        return 'general';
    }

    public function toLivewire()
    {
        return $this->toArray();
    }

    public static function fromLivewire($value)
    {
        return new static([
            'backupDate' => Carbon::create($value['backupDate']),
        ]);
    }
}

// Migration for settings:
use Spatie\LaravelSettings\Migrations\SettingsMigration;

class CreateGeneralSettings extends SettingsMigration
{
    public function up(): void
    {
        $this->migrator->add('general.backupDate', now());
    }
}

// Settings Component's view:
@php
    /* @var \App\Settings\GeneralSettings $settings  */
@endphp

<div>
    <table class="border-collapse w-full">
        <thead>
        <tr>
            <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Backup date</th>
            <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Backup hour</th>
        </tr>
        </thead>
        <tbody>
        <tr class="bg-white lg:hover:bg-gray-100 flex lg:table-row flex-row lg:flex-row flex-wrap lg:flex-no-wrap mb-10 lg:mb-0">
            <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">
                {{ $settings->backupDate->toDateString() }}
            </td>
            <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static">
                {{ $settings->backupDate->hour }}
            </td>
        </tr>
        </tbody>
    </table>
    <div class="flex justify-center mt-4 space-x-2">
        <button wire:click="addHour()" class="px-4 py-2 font-semibold text-sm bg-green-500 text-white rounded-none shadow-sm">Add hour</button>
        <button wire:click="subHour()" class="px-4 py-2 font-semibold text-sm bg-red-500 text-white rounded-none shadow-sm">Sub hour</button>
    </div>
    <div class="flex justify-center">
        <div class="flex items-center shrink-0">
            <button wire:click="save()" class="text-center mt-4 px-4 py-2 font-semibold text-sm bg-cyan-500 text-white rounded-full shadow-sm">Save settings</button>
        </div>
    </div>
    <input wire:model="settings.backupDate" type="datetime-local"/>
</div>