This Nova field lets you save a signature as a field for your resource. It's based on the work of lab404/nova-signature that works only with Nova 3 as fare as I know.

Behind the scenes WangShayne/vue3-signature is used.

Note that vue3-signature doesn't expose all signature pad components so to get it working with our component it was required to patch library to propagate "begin" and "end" event to parent component as I was unable to use a watcher as in the previous version WangShayne/vue3-signature.

Here our patched fork operativeit/vue3-signature.

composer require eom-plus/nova-signature

In your nova resource make the field EomPlus\NovaSignature\Signature. This field fits perfectly with a TEXT column as it store data in base64 format and can be used both for resources and actions.

use EomPlus\NovaSignature\Signature;

// ...

public function fields()
{
    return [
        // ...
        Signature::make('Signature'),
        // ...
    ];
}

Showed example values are the default ones.

Signature::make('Signature')
    ->color('black') // (string) Any css compatible value: "red", "rgb(0, 0, 0)", ...
    ->bgColor('white') // (string) Same as 'color'
    ->width('100%') // (string) Any css compatible value: "100%", "200px", ...
    ->height('250px') // (string) Same as 'width'
    ->asSvg() // Save image as SVG format, you can use asJpg() to save as JPEG instead. By default format is PNG.

You can use the signature validation rules to check if the signature is valid. We also provide the validSignature method that adds nullable and signature rules.

// With validSignature() 
Signature::make('Signature')
    ->validSignature() // 'nullable' and 'signature' rules

// Your own rules
Signature::make('Signature')
    ->rules('signature', ...) 

### Translations

Currenlty we have include french, spanish and english translations. If you want to add more language you publish translations with the following command

php artisan vendor:publish --provider=EomPlus\NovaSignature\FieldServiceProvider --tags=translations

If you add more languages don't hesitate to send us a PR.

Please give a ⭐️ if this project helped you!

• Nova Rating Field - A Star rating Nova 4 field to use in your Laravel Nova apps.
• Nova Feedback Field - An Emoji feedback Nova 4 field to use in your Laravel Nova apps.
• Nova Input Group - A Laravel Nova 4 text field formatted as input group
• Nova Signature - A Laravel Nova 4 signature pad

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.

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