Skip to content

operativeit/nova-input-group

Repository files navigation

Nova Input Group

A Laravel Nova4 text field formatted as input group

Latest Version on Packagist Total Downloads GitHub forks GitHub issues License

image

This custom field allow to append or prepend text and/or heroicon icon. Text can also be HTML. For HTML, a dedicated component is used intead of v-html directive. HTML markup is sanitazed previously sanitized using DOMPurify library to avoid vulnaribility. Note that when you HMTL you can also use Emojis icons.

Installation

composer require eom-plus/nova-input-group

Usage

Import it in your resources and add the InputGroup to fields method. We have added various methods to add flexibility to the component. You can append , prepend or both at the same time.

...
use EomPlus\NovaInputGroup\InputGroup;

public function fields(Request $request)
{
    return [
        ID::make('ID', 'id')->sortable(),
        Text::make('Name', 'name'),
        InputGroup::make('Subdomain', 'subdomain')
           ->appendIcon('cube', 'after')
           ->append('<i>@example.com</i>')
           ->prependIcon('cube')
           ->prepend('test')
           ->prependExtraClasses('bg-green-500 text-white')
           ->asHtml()  

    ];
}
...

But we have maintained the old method for backward compatibility with Decency Input Group

Example using legacy way

...
use EomPlus\NovaInputGroup\InputGroup;

public function fields(Request $request)
{
    return [
        ID::make('ID', 'id')->sortable(),
        Text::make('Name', 'name'),

        InputGroup::make('Subdomain', 'subdomain')
           ->position('after')
           ->text('@example.com'),

    ];
}
...

Methods

  • prepend(value) Prepend text to input field

  • prependIcon(name, position) Prepend heroicon to input field. You can choose between 'before' and 'after'. When not used, 'before' is used.

  • prependExtraClasses(value) Prepend extra css classes to input field to change background or text color for example.

  • append(value) Append text to input field

  • appendIcon(name, position) Append heroicon to input field. You can choose between 'before' and 'after'. When not used, 'before' is used.

  • appendExtraClasses(value) Append extra css classes to input field to change background or text color for example.

  • asHtml() render value as HTML

Legacy methods for backwards compatibility (avoid to use them)

  • position(text) You can choose between 'before' and 'after'. When not used, 'before' is used.
  • text(value) The text to be displayed.

Changelog

Please see CHANGELOG for more information on what has changed recently.

TODO

  • Support other kind of field
  • Testcases
  • PS4 code compliance
  • More examples
  • Fix field length
  • Add buttons and dropdown support

Security and contributions.

If you discover any security related issues, please use the issue tracker. All PRs are welcome

Credits

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

Other Packages You Might Like

Take a look to our Github repositories as we have a lot of forked nova components with fixes that are still not merge into main owner branch.

License

The MIT License (MIT). Please see License File for more information.