Coder Social home page Coder Social logo

jeremiahsherrill / nova-text-copy-field Goto Github PK

View Code? Open in Web Editor NEW

This project forked from sixlive/nova-text-copy-field

0.0 0.0 0.0 1.09 MB

Nova text field with click to copy support

License: MIT License

JavaScript 9.43% PHP 20.65% CSS 0.14% Vue 69.78%

nova-text-copy-field's Introduction

Nova Text Copy Field

Packagist Version Packagist Downloads StyleCI

A Laravel Nova text field with click to copy support. This field behaves just like a text field but adds the ability to copy the field value to your clipboard with just a click.

This package can also be found on Nova Packages.

animated screenshot

Installation

> composer require sixlive/nova-text-copy-field

Usage

Add the field to a resource.

use Sixlive\TextCopy\TextCopy;

public function fields(Request $request)
{
    return [
        TextCopy::make('Example Copy Field', 'example_copy_field'),
    ];
}

Truncating long strings

In some cases you may want to truncate the display of a fields value but allow still copy the full value. You can use the truncate() method to accomplish this.

TextCopy::make('Some Long Field')
    ->truncate(100)

Masking the field value

This works great for secrets like API Keys.

TextCopy::make('Some Secret String', 'some_secret_string')
    ->mask('โŒ') // default '*'
    ->truncate(5)

Copy button title

The title of the copy button defaults to the field name prefixed with 'Copy'. For example, TextCopy::make('Some Field', 'some_field') the button title will be "Copy Some Field".

If you would like to manually set the title you can use the copyButtonTitle() method.

TextCopy::make('Some Field', 'some_field')
    ->copyButtonTitle('Some alternative title')

Alternative copy value

You can choose to mutate and that is copied to the users clipboard. You can either pass a value or a Closure.

TextCopy::make('Some Secret String', 'some_long_string')
    ->copyValue(function ($value) {
        return substr($value, -6);
    })

or

TextCopy::make('Some Secret String', 'some_long_string')
    ->copyValue('some fixed copy value')

Only displaying the button on hover

TextCopy::make('Some Secret String', 'some_long_string')
    ->showButtonOnlyOnHover()

Screenshots

Default State

default default

Success State

When the field value has been successfully copied to the user's clipboard. success

Error State

When there is an error adding the field value to the user's clipboard. error

Truncated Display Value

truncated display

Masked Display Value

masked display

Changelog

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

Contributing

Please see CONTRIBUTING for details.

Code Style

StyleCI will apply the Laravel preset.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

License

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.