CRUD Drawers

Drawer-based CRUD operation blocks for creating, reading, and updating items using slide-out panels.

Default Create Drawer

Blade code

<x-fwb.blocks.application.crud-create-drawer />

Create Drawer with Custom Fields

New employee

Blade code

<x-fwb.blocks.application.crud-create-drawer
    title="New employee"
    id="employee-create-drawer"
    action="/employees">
    <div class="space-y-4">
        <div>
            <label for="emp-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Full Name</label>
            <input type="text" name="name" id="emp-name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" placeholder="John Doe" required>
        </div>
        <div>
            <label for="emp-role" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Role</label>
            <input type="text" name="role" id="emp-role" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" placeholder="Developer" required>
        </div>
        <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
            Add employee
        </button>
    </div>
</x-fwb.blocks.application.crud-create-drawer>

Default Update Drawer

Blade code

<x-fwb.blocks.application.crud-update-drawer />

Update Drawer with Custom Fields

Edit item

Blade code

<x-fwb.blocks.application.crud-update-drawer
    title="Edit item"
    id="edit-item-drawer"
    action="/items/1">
    <div class="space-y-4">
        <div>
            <label for="item-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
            <input type="text" name="name" id="item-name" value="Existing Item" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" required>
        </div>
        <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
            Save changes
        </button>
    </div>
</x-fwb.blocks.application.crud-update-drawer>

Default Read Drawer

Blade code

<x-fwb.blocks.application.crud-read-drawer />

Read Drawer with Custom Content

Order Details
Order ID
#ORD-12345
Status
Delivered
Total
$459.99

Blade code

<x-fwb.blocks.application.crud-read-drawer
    title="Order Details"
    id="order-details-drawer">
    <dl>
        <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Order ID</dt>
        <dd class="mb-4 font-light text-gray-500 dark:text-gray-400">#ORD-12345</dd>
        <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Status</dt>
        <dd class="mb-4 font-light text-gray-500 dark:text-gray-400">
            <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Delivered</span>
        </dd>
        <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Total</dt>
        <dd class="mb-4 font-light text-gray-500 dark:text-gray-400">$459.99</dd>
    </dl>
</x-fwb.blocks.application.crud-read-drawer>

Component Properties

Create Drawer x-fwb.blocks.application.crud-create-drawer

PropTypeDefaultDescription
title string Add new item The drawer heading text.
id string create-drawer The HTML id for the drawer element.
action string # Form action URL.
slot slot - Form fields and buttons inside the drawer. Wrapped in a POST form.

Update Drawer x-fwb.blocks.application.crud-update-drawer

PropTypeDefaultDescription
title string Update item The drawer heading text.
id string update-drawer The HTML id for the drawer element.
action string # Form action URL. Uses PUT method spoofing.
actions slot - Custom action buttons rendered below the form.
slot slot - Form fields inside the drawer. Wrapped in a PUT form.

Read Drawer x-fwb.blocks.application.crud-read-drawer

PropTypeDefaultDescription
title string Item Details The drawer heading text.
id string read-drawer The HTML id for the drawer element.
actions slot - Custom action buttons rendered below the content with a top border.
slot slot - Detail content inside the drawer body.