Components

This package uses laravel anonymous components to leverage the power of laravel and promote code re-usability.

Form Components

Input component

example:

<x-form.input type="text" col="6" :req="true" label="Blog Title" id="blog_title" name="blog_title" value="{{ old('blog_title') }}" />

Prop Name	Default Value	Required	Description
name	none	Yes	The name of the input field, used for form submission and validation.
id	Value of $name prop	No	The ID of the input field.
label	'Label'	No	The label text for the input field.
class	empty	No	Additional CSS classes to apply to the input field.
value	empty	No	The initial value of the input field.
type	'text'	No	The type of the input field (e.g., text, email, password).
message	empty	No	The validation error message to display if there's an error.
col	12	No	The Bootstrap column width for the input field.
req	false	No	A boolean indicating whether the field is required or not. If true, an asterisk (*) will be added next to the label.
labelDisplay	true	No	A boolean indicating whether to display the label or not.
tooltip	false	No	A boolean indicating whether to display a tooltip or not.
tooltip_text	'Tooltip on top'	No	The text to display in the tooltip.

Button component

example:

 <x-form.button class="btn btn-sm btn-dark" type="submit"><i class='bx bx-save bx-xs'></i> Save</x-form.button>

Prop Name	Default Value	Required	Description
(Slot Content)	-	Yes	The content to be displayed inside the button element.
id	'id'	No	The ID of the button element.
class	empty	No	Additional CSS classes to apply to the button element.
type	'submit'	No	The type of the button (e.g., 'submit', 'button', 'reset').

Textarea component

example:

<x-form.textarea label="Description" :req="true" id="description" name="description" value="{{ old('description') }}" rows="5" cols="5"/>

Prop Name	Default Value	Required	Description
name	-	Yes	The name of the textarea field, used for form submission and validation.
id	Value of $name prop	No	The ID of the textarea field.
label	'Label'	No	The label text for the textarea field.
class	empty	No	Additional CSS classes to apply to the textarea field.
value	empty	No	The initial value of the textarea field.
message	empty	No	The validation error message to display if there's an error.
col	12	No	The Bootstrap column width for the textarea field.
req	false	No	A boolean indicating whether the field is required or not. If true, an asterisk (*) will be added next to the label.

Checkbox

example:

<x-form.checkbox label="Status" id="status" name="status" value="1" class="form-check-input" isEditMode="yes" :isChecked="'checked'" col="6" />

Prop Name	Default Value	Required	Description
name	-	Yes	The name of the checkbox field, used for form submission and validation.
id	Value of $name prop	No	The ID of the checkbox field.
label	'CheckBox'	No	The label text for the checkbox field.
class	empty	No	Additional CSS classes to apply to the checkbox field.
value	1	No	The value of the checkbox field when checked.
message	empty	No	The validation error message to display if there's an error.
isChecked	empty	No	A boolean or string value indicating whether the checkbox should be checked or not.
isEditMode	empty	No	A boolean or string value indicating whether the checkbox is in edit mode or not.
col	12	No	The Bootstrap column width for the checkbox field.

Row Component

example:

 <x-form.row>
       <x-form.input type="text" col="6" label="Title" id="title" name="title" :req="true" value="{{ old('title') }}" />
       <x-form.input type="text" col="6" label="Slug" id="slug" name="slug" :req="true" value="{{ old('slug') }}" />
</x-form.row>

Prop Name	Default Value	Required	Description
(Slot Content)	-	Yes	The content to be displayed inside the div element.
($attributes)	-	No	Additional HTML attributes to apply to the div element.

Select Component

example:

<x-form.select name="role_id" :options="$roles" label="Role" :model="$role->role_id"></x-form.select>

Prop Name	Default Value	Required	Description
name	-	Yes	The name of the select field, used for form submission and validation.
id	Value of $name prop	No	The ID of the select field.
label	'Select'	No	The label text for the select field.
class	'form-control'	No	Additional CSS classes to apply to the select field.
value	empty	No	The initial value of the select field (not used in this component).
message	empty	No	The validation error message to display if there's an error.
col	12	No	The Bootstrap column width for the select field.
req	false	No	A boolean indicating whether the field is required or not. If true, an asterisk (*) will be added next to the label.
labelDisplay	true	No	A boolean indicating whether to display the label or not.
optionDisplay	true	No	A boolean indicating whether to display a default "Select {label}" option or not.
model	null	No	The model value to be selected in the options.
_key	null	No	A key value used for selecting the default option when no model is provided.
options	-	Yes	An array of key-value pairs representing the options to be displayed in the select field.
(Slot Content)	-	No	Additional content to be displayed inside the select element.

Enum Select

Prop Name	Default Value	Required	Description
name	-	Yes	The name of the select field, used for form submission and validation.
id	Value of $name prop	No	The ID of the select field.
label	'Select'	No	The label text for the select field.
class	'form-control text-14'	No	Additional CSS classes to apply to the select field.
value	empty	No	The initial value of the select field (not used in this component).
message	empty	No	The validation error message to display if there's an error.
col	12	No	The Bootstrap column width for the select field.
req	false	No	A boolean indicating whether the field is required or not. If true, an asterisk (*) will be added next to the label.
model	null	No	The model value to be selected in the options.
optionDisplay	true	No	A boolean indicating whether to display a default "Select {label}" option or not.
labelDisplay	true	No	A boolean indicating whether to display the label or not.
options	-	Yes	An array of objects representing the options to be displayed in the select field, where each object has a value and a name property.

Sidebar Components

Single-Level Sidebar Component

To create a sidebar item for your Dashboard:

Use this code:

<x-sidebar-item 
    route="{{ route('home') }}"
    name="Dashboard" 
    uri="home"
>
    <i class="menu-icon tf-icons bx bx-home-circle"></i>
</x-sidebar-item>

This code does the following:

• Sets the route to 'home'

• Displays "Dashboard" as the name

• Uses '/home' as the URL

Multi-Level Sidebar

To create a sidebar item with multiple subitems:

Use this structure:

<x-sidebar-multilist-head 
    icon="bx bxs-report" 
    name="Reports" 
    :routes="[
        'admin/package/reports',
        'admin/package/filters',
    ]"
>
    <x-sidebar-item 
        route="{{ route('admin.package-reports.filters') }}"
        name="Package Filter" 
        uri="admin/package/filters"
    >
    </x-sidebar-item>

    <x-sidebar-item 
        route="{{ route('admin.package-reports.index') }}"
        name="Package Report" 
        uri="admin/package/reports"
    >
    </x-sidebar-item>
</x-sidebar-multilist-head>

This code does the following:

• Creates a main sidebar item called "Reports" with a report icon

• Specifies two routes that will be part of this multihead item

• Adds two subitems: "Package Filter" and "Package Report"

• Each subitem has its own route, name, and URI