Collapse

The `Collapse` creates a menu item with a collapsible submenu.

Some useful methods are `expandIfActive` and `expandByDefault`.

use Kompo\`Collapse`;

Collapse::form('Collapse me')
   ->submenu(
      Link::form('Link 1'),
      Link::form('Link 2'),
      Link::form('Link 3')
   )

//The submenu is open on initial load
Collapse::form('Open on initial load')
   ->submenu(...)
   ->expandByDefault()

//The submenu will expand if the user is visiting one of it's child pages.
Collapse::form('Open if active')
   ->submenu(...)
   ->expandIfActive()

Chainable methods

Collapse specific

Method
Parameters
Comment
expandByDefault
none
The collapsible menu will be opened on page load.
expandIfActive
none
The collapsible menu will open if the user is on one of the pages in it's submenu.
href
string $route
The route name or uri.
array|null $parameters
The route parameters (optional).
Sets the href attribute of a link.
url
string $url
The route uri.
array|null $parameters
The route parameters (optional).
Sets the url of an Element using the Laravel `url()` helper function.
inNewTab
none
Opens the link in a new tab, i.e. it sets target="_blank".
addHash
string|null $hash
The desired hash
Adds a desired hash to the href of the komponent.
If parameter is null, a slugged version of the label will be calculated and added as a hash.
Ex: ->addHash('some-hash') will add href="/link#some-hash"
noTurbo
none
Flag for disabling turbo links

Html attributes

Method
Parameters
Comment
id
string $id
The id attribute.
Sets the id attribute of the element.
class
string $classes
The class attribute.
Sets the class attribute of the element.
For multiple classes, use a space-separated string.
replaceClass
string $classes
Adds classes to the element. TODO: replace with overwriteClass or smth...
removeClass
string $classes
Removes a class or space separated classes from the element.
style
string $styles
The CSS style attribute.
Sets the style attribute of the element.
For multiple styles, use a ";" separated string.
attr
array $attributes
Associative array of attribute names and values.
Sets HTML attributes to the element. For example:
->attr([
'title' => 'Some title',
'data-target' => '#target-id'
])
title
string $title
The HTML title attribute
Sets the HTML title attribute of the element.

Label, icons & comments

Method
Parameters
Comment
label
string $label
Overwrite the initially set label.
icon
string $iconString
This is the icon HTML or icon class in <i class="..."></i>
Adds an icon before component's label.
rIcon
string $iconString
This is the icon HTML or icon class in <i class="..."></i>
Adds an icon after component's label.
noLabel
none
This will remove the label.
labelClass
string $labelClass
The label's space separated class attribute.
Sets the class attribute of the elements' label.
For multiple classes, use a space-separated string.
comment
string $comment
The comment. Can be an HTML string too.
Adds a comment below the field. This is additional information to complement the label of the input.
hint
string $hint
The information text that displays on hover.
Adds a help text next to the label that appears on hover. By default, a question mark icon is used.
hintIcon
string $iconClassOrHtml
This is the icon HTML or class in <i class="..."></i>
Sets the hint text's icon or class icon. By default, it is the built-in question mark icon.
hintPlacement
string $infoPlacement
Accepted values are top, bottom, left, right
Sets where the hint text's will show on hover. By default, it displays on top.

AJAX HTTP

Method
Parameters
Comment
get
string $route
The route name or uri.
array|null $parameters
The route parameters (optional).
array|null $ajaxPayload
Additional custom data to add to the request (optional).
Performs a GET request to a route in your application.
post
string $route
The route name or uri.
array|null $parameters
The route parameters (optional).
array|null $ajaxPayload
Additional custom data to add to the request (optional).
Performs a POST request to a route in your application.
put
string $route
The route name or uri.
array|null $parameters
The route parameters (optional).
array|null $ajaxPayload
Additional custom data to add to the request (optional).
Performs a PUT request to a route in your application.
delete
string $route
The route name or uri.
array|null $parameters
The route parameters (optional).
array|null $ajaxPayload
Additional custom data to add to the request (optional).
Performs a DELETE request to a route in your application.
selfGet
string $methodName
The class's method name that will return the new komponents.
array|null $ajaxPayload
Additional custom data to add to the request (optional).
Loads a view with a GET ajax request.
To display the view in a container, you may chain it with the methods `inModal` or `inPanel`. For example:
->getView('get-route-of-view')->inModal()
selfPost
string $methodName
The class's method name that will return the new komponents.
array|null $ajaxPayload
Additional custom data to add to the request (optional).
Loads a view with a POST ajax request.
To display the view in a container, you may chain it with the methods `inModal` or `inPanel`. For example:
->postView('get-route-of-view')->inModal()
selfPut
string $methodName
The class's method name that will return the new komponents.
array|null $ajaxPayload
Additional custom data to add to the request (optional).
Loads a view with a POST ajax request.
To display the view in a container, you may chain it with the methods `inModal` or `inPanel`. For example:
->postView('get-route-of-view')->inModal()
selfDelete
string $methodName
The class's method name that will return the new komponents.
array|null $ajaxPayload
Additional custom data to add to the request (optional).
Loads a view with a POST ajax request.
To display the view in a container, you may chain it with the methods `inModal` or `inPanel`. For example:
->postView('get-route-of-view')->inModal()

Special AJAX

Method
Parameters
Comment
getKomposer
string $methodName
The method name that will return a view or HTML response.
array|null $ajaxPayload
Additional custom data to add to the request (optional).
Loads a fresh Komposer class from the server.
To display the new Komposer, you need to chain a method `inModal` or `inPanel`.
You may also pass it additional data in the $payload argument. This data will be injected in the Komposer's store.
Note that the new Komposer will be separate from the parent Komposer where this call is made. If you wanted to include the Komponents as part of the parent, use `getKomponents()` instead.
For example:
->getKomposer(PostForm::class, ['payload' => 'some-data'])->inModal()
getKomponents
string $methodName
The class's method name that will return the new komponents.
array|null $ajaxPayload
Additional custom data to add to the request (optional).
Includes additional komponents from the server. If they contain Fields, they will be included in the Form data and handled in an Eloquent Form.
To display the new Komponents, you need to chain a method `inModal` or `inPanel`. For example:
->getKomponents('newKomponentsMethod')->inPanel('panel-id')
getView
string $viewPath
The view path as in the view() helper.
array|null $ajaxPayload
Additional custom data to include in the view (optional).
Loads a backend Blade view from the server.
To display the view in a container, you may chain it with the methods `inModal` or `inPanel`.
You may also pass it additional data in the $payload argument. This data will be available with the request() helper.
For example:
->loadView('route-of-view')->inModal()
refresh
null|string|array $komposerIds
The id of the Komposer(s). Keep blank if targeting self.
Refreshes the Komposer(s) by reloading a fresh new version from the backend.
If the argument is left blank, the Komposer will refresh itself. To target another Komposer, add a string or array of target Komposer ids.
getFreshForm
none
Reloads a new empty Form. Useful when chained after a submit() to add another item.
redirect
string $route
The route name or uri.
array|null $parameters
The route parameters (optional).
Redirects to the route/uri if the AJAX request was a success.

Modal, Panels & Alerts

Method
Parameters
Comment
inModal
string|null $modalName
The modal name (optional)
Whatever is loaded by AJAX will be displayed in a modal.
If the modalName is left blank, the default modal will be used.
Otherwise, you have to declare a `<vl-modal>` with the desired name.
warnBeforeClose
string|null $message
Shows a warning message that the user needs to confirm before closing the editing modal.
If message is left empty, it defaults to "Any unsaved changes will be lost. Are you sure you want to close this window?".
keepModalOpen
none
Keeps the modal open after a form submit.
inPanel
string $panelId
The panel id attribute
Whatever is loaded by AJAX will be displayed in the panel with the specified id.
You need to add a `Panel` component to your Form or Query. For example:
Button::form('Click')->loadsView('view-route')->inPanel('panel-id'),
Panel::form('panel-id')
alert
string $message
The message to be displayed
string|boolean|null $icon
An optional icon class. Default is "icon-check".
string|null $alertClass
The class for the alert box. Default is "vlAlertSuccess" (green background).
Displays a Bootstrap-style alert message.
By default, a "check" icon is shown but you may override it by setting your own icon class, or disable it by setting it to false.
You may also add an class to the whole box with the alertClass parameter.
inAlert
string|boolean|null $icon
An optional icon class. Default is "icon-check".
string|null $alertClass
The class for the alert box. Default is "vlAlertSuccess" (green background).
Displays a Bootstrap-style alert message after an AJAX request, using the response from the request as the message.

Form submission

Method
Parameters
Comment
submit
string $methodName
The class's method name that will handle the submit.
Submits the form. By default, it will submit to the handle method. The default trigger is:
On click for Buttons/Links.
On change for fields (after blur).
hideIndicators
none
Hides the submission indicators (spinner, success, error).
displayNone
none
Hides the field or element on the Front-end with Vue's v-if.

Catalog actions

Method
Parameters
Comment
browse
string|null $queryId
The target Query Id or
integer|null $page
The page
Reload the cards of one or many Query(ies). If $queryId is left blank, it will browse cards of it's parent query.
Otherwise, you may set a string or an array of query ids to refresh.
sort
string|null $sortOrders
If field, the value will determine the sort. If trigger (link or th), we need to add a pipe serapated string of column:direction for ordering.
Triggers a sort event of the query. The parameter is a pipe separated string of column:direction. Example: updated_at:DESC|last_name|first_name:ASC.

Front-end actions

Method
Parameters
Comment
toggleId
string $id
The id of the element to be toggled.
boolean|null $toggleOnLoad
Whether the item should be toggled on inital load. Default is true.
Toggles another item identified by the $id. By default, the target item is hidden on load.
hideSelf
none
The Komponent will hide itself after an interaction.

Vue events

Method
Parameters
Comment
emit
string $event
The event name
array|null $data
The optional additional data
Emits a Vue event to the parent Komposer.
You may add an optional payload as the event's first parameter.
emitDirect
string $event
The event name
array|null $data
The optional additional data
Emits a regular Vue event to it's parent Komponent. This is useful for custom Komponents.
You may add an optional payload as the event's first parameter.

Layout grids

Method
Parameters
Comment
col
string $col
The col attribute. Ex: `col-8`.
Sets a specific col value when the element is used inside `Columns`. By default, the columns get equal widths. A 12 column grid system is used here (same as Bootstrap CSS). For example:
Columns::form(
Html::form('Column 1')->col('col-8'),
Html::form('Column 2')->col('col-4')
)

Testing TDD

Method
Parameters
Comment
dusk
array $selector
Dusk selector attribute.
Sets a dusk selector attribute to the element.

Customization

Method
Parameters
Comment
data
array $data
Key/value associative array.
Pass additional data to the element that can be accessed from the Front-end in the `data` property of the object - especially useful if you wish to customize or add new features to the component.