General components

In this section, you will find a collection of general components available in the Utils package.

Buttons

Buttons are a fundamental component of any web application. They provide a clear call to action for users to interact with your site. The Utils package includes a variety of button styles to suit your needs.

        <x-pjutils::button>Default button</x-pjutils::button>

        <x-pjutils::button class="neutral">Neutral</x-pjutils::button>
<x-pjutils::button class="success">Success</x-pjutils::button>
<x-pjutils::button class="danger">Danger</x-pjutils::button>
<x-pjutils::button class="warning">Warning</x-pjutils::button>
<x-pjutils::button class="info">Info</x-pjutils::button>

Bordered buttons

Bordered buttons are the same as classic buttons but there is border around the button without background color.

        <x-pjutils::button :bordered="true">Default</x-pjutils::button>

        <x-pjutils::button class="neutral" :bordered="true">Neutral</x-pjutils::button>
<x-pjutils::button class="success" :bordered="true">Success</x-pjutils::button>
<x-pjutils::button class="danger" :bordered="true">Danger</x-pjutils::button>
<x-pjutils::button class="warning" :bordered="true">Warning</x-pjutils::button>
<x-pjutils::button class="info" :bordered="true">Info</x-pjutils::button>

Text buttons

Buttons can also be styled as text buttons by passing the texted attribute.

        <x-pjutils::button :texted="true">Default</x-pjutils::button>

        <x-pjutils::button class="neutral" :texted="true">Neutral</x-pjutils::button>
<x-pjutils::button class="success" :texted="true">Success</x-pjutils::button>
<x-pjutils::button class="danger" :texted="true">Danger</x-pjutils::button>
<x-pjutils::button class="warning" :texted="true">Warning</x-pjutils::button>
<x-pjutils::button class="info" :texted="true">Info</x-pjutils::button>

Button with link

You can also use the button component as a link by passing the href attribute.

Link

        <x-pjutils::button href="#">Link</x-pjutils::button>

Loading button

If you want to show loading state of button you can pass loading attribute.

        <x-pjutils::button :loading="true">Loading</x-pjutils::button>

You can do that with JavaScript like this:

        import {showLoader} from "./vendor/pjutils/helpers/general";
 
const submitButton = document.querySelector('button[type="submit"]');
 
showLoader(submitButton);

Dropdowns

        <x-pjutils::dropdown :items="['Item 1', 'Item 2', 'Item 3']" label="Simple dropdown" />

To make it work, you need to call bindDropdowns function in your JavaScript file.

        import {bindDropdowns} from "./vendor/pjutils/utils/dropdown";
 
bindDropdowns();

If you want to make item selected, you need to pass selected attribute with key of selected item.

        <x-pjutils::dropdown :items="['Item 1', 'Item 2', 'Item 3']" label="Simple dropdown" selected="1" />

Close button

The close button is a simple button with an "x" icon that can be used to close modals, notifications, and other components.

        <x-pjutils::close-button />

Arrows

Arrows are used to indicate the direction of a dropdown or other interactive element. The Utils package includes a variety of arrow styles to suit your needs.

        <x-pjutils::arrow />

        <x-pjutils::arrow direction="up" />
<x-pjutils::arrow direction="down" />
<x-pjutils::arrow direction="left" />
<x-pjutils::arrow direction="right" />

Email

The email component is used to create a consistent layout for email templates. It includes a header, body, and footer section that can be customized to suit your needs.

Here you can find preview of email layout

        <x-pjutils::email.layout>
     <p>Here you will have your HTML content</p>
</x-pjutils::email.layout>

By default we will use logo in header. If you don't want to use logo you can pass use-logo attribute with false value.

If can set up logo path in config/pjutils.php file.

And you can also set up footer text by passing footer-text attribute with your text value. By default only app name will be displayed.

         <x-pjutils::email.layout :use-logo="false" footer-text="Team,">
     <p>Here you will have your HTML content</p>
</x-pjutils::email.layout>