Towser Component

Unlike a modal, when lots of data needs to be included within a create/ edit

Props

Prop Name	Type	Default	Description
show	boolean	false	Controls visibility of the tabulator.
title	array	[]	Array of breadcrumb titles with optional links.
actions	array	null	Buttons in the footer, each with title, emit event, and optional class.
double	boolean	false	Enables a two-column layout inside the tabulator.
bodyWidth	number	50	Width of the first column when double is true.
body2Width	number	50	Width of the second column when double is true.

---

Slots

Name	Description
default	Main content inside the tabulator.
body2	Second column content (used when double is true).

---

Emits

Event Name	Description
onClose	Closes the tabulator.
saveAction	Triggers when the save button is clicked (if provided in actions).

---

Functions

Function Name	Description
emit('onClose')	Closes the tabulator.
emit('saveAction')	Calls the save action when triggered.

---

Usage

Basic Usage

<Towser
    :show="showModal"
    :title="[{ name: 'Home', link: '/' }, { name: 'Settings' }]"
    :actions="[{ title: 'Close', emit: 'onClose' }]"
    @onClose="showModal = false"
>
    <p>This is the content of the modal.</p>
</Towser>

---

Example with Two Columns

<Towser
    :show="showTab"
    :double="true"
    :title="[{ name: 'Dashboard' }, { name: 'Details' }]"
    :actions="[
        { title: 'Cancel', emit: 'onClose' },
        { title: 'Save', emit: 'saveAction', class: 'btn' }
    ]"
    @onClose="showTab = false"
    @saveAction="handleSave"
>
    <template #default>
        <p>This is the main content.</p>
    </template>
    <template #body2>
        <p>This is the second column.</p>
    </template>
</Towser>

---

Screenshot

---

Notes

• The component uses a slide-in transition (.towser-enter-active).
• The header dynamically generates breadcrumb navigation.
• If double is true, it automatically creates a split-pane layout.
• Can be customized for different modal sizes.
• If called in as a child component, pass a true in the :showTab and emit a false to open/close