fat4lix/nova-element-ui

Element UI components for Laravel Nova

Nova + Element UI

This is a set of component Element UI for Laravel Nova

Installation

1. composer require nightkit/nova-element-ui
2. Add NightKit\NovaElements\NovaElementsServiceProvider::class to your config/app.php in providers section
3. php artisan vendor:publish --provider="NightKit\NovaElements\NovaElementsServiceProvider" --tag="public"

Components

This is available component for this time.

use NightKit\NovaElements\Fields\ElementInput\ElementInput;
use NightKit\NovaElements\Fields\ElementPassword\ElementPassword;
use NightKit\NovaElements\Fields\ElementSelect\ElementSelect;
use NightKit\NovaElements\Fields\ElementCheckbox\ElementCheckbox;
use NightKit\NovaElements\Fields\ElementRadio\ElementRadio;
use NightKit\NovaElements\Fields\ElementSwitch\ElementSwitch;
use NightKit\NovaElements\Fields\ElementAutocomplete\ElementAutocomplete;
use NightKit\NovaElements\Fields\ElementNumber\ElementNumber;
use NightKit\NovaElements\Fields\ElementTimezoneAutocomplete\ElementTimezoneAutocomplete;
use NightKit\NovaElements\Fields\ElementTimezoneSelect\ElementTimezoneSelect;
use NightKit\NovaElements\Fields\ElementTabs\ElementTabsRelations;

ElementTabsRelations

ElementTabsRelations it's tabs component to split relation lists view between tabs Supported relation fields: HasMany, BelongsTany, OneToMany, MorphToMany

  public function fields(Request $request)
  {
    ElementTabsRelations::make('Tabs')
        ->addTab('Levels', HasMany::make('Level', 'levels'))
        ->addTab('Setting', HasMany::make('Setting', 'settings'))
        ->activeTab('levels')
        ->borderCard() // border card style for tabs
  }

ElementInput

ElementInput is just simple input element with couple of cool features

You can add it like that

  public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementInput::make('String')
      ];
  }

To make this input with clear action just add clearable()

  public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementInput::make('String')
              ->clearable()
      ];
  }

You can also add prefix or suffix icon with prefixIcon() andsuffixIcon()

  public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementInput::make('String')
              ->clearable()
              ->prefixIcon('el-icon-date') //icon css class 
      ];
  }

If you need a textarea you can simple make it by textarea()

   public function fields(Request $request)
    {
        return [
            ID::make()->sortable(),
            ElementInput::make('String')
                ->textarea(4, true)
        ];
    }

Textarea accepts several parameters, number of rows and autosize

ElementAutocomplete

ElementAutocomplete looks like a input but is used if you need autocomplete

    return [
        ID::make()->sortable(),
        ElementAutocomplete::make('String')
            ->suggestions(['vue', 'laravel', 'nova'])
    ];

This field has a few method

placement() @string Placement of the popup menu (top / top-start / top-end / bottom / bottom-start / bottom-end) default bottom-start

triggerOnFocus @bool Whether show suggestions when input focus (default true)

debounce() @int Debounce delay when typing, in milliseconds (default 300)

ElementSelect

It's just simple select field with more beautiful design

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementSelect::make('String')
              ->options(['vue', 'laravel', 'nova'])
      ];
  }

ElementTimezoneSelect and ElementTimezoneAutocomplete

This two fields depend on ElementSelect and ElementAutocompele to coose timezones more simple

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementTimezoneAutocomplete::make('String'),
          ElementTimezoneSelect::make('String')
      ];
  }

ElementNumber

The number input field on steroids:)

It's depend on Nova native Number field and support all its functions

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementNumber::make('Number')
              ->min(2)
              ->max(6)
              ->step(2)
      ];
  }

Also this field provide several methods

precision() @int Precision of input value

showControls() @bool whether to enable the control buttons

rightControls() Move the control buttons to the right

ElementRadio

Radio element

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementRadio::make('String')
              ->options([
                  ['value' => '1', 'label' => 'vue'],
                  ['value' => '2', 'label' => 'laravel'],
                  ['value' => '3', 'label' => 'nova'],
              ])
      ];
  }

If you want button style radio just use buttons() method

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementRadio::make('String')
              ->options([
                  ['value' => '1', 'label' => 'vue'],
                  ['value' => '2', 'label' => 'laravel'],
                  ['value' => '3', 'label' => 'nova'],
              ])->buttons()
      ];
  }

Or bordered style with bordered()

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementRadio::make('String')
              ->options([
                  ['value' => '1', 'label' => 'vue'],
                  ['value' => '2', 'label' => 'laravel'],
                  ['value' => '3', 'label' => 'nova'],
              ])->bordered()
      ];
  }

ElementCheckbox

ElementCheckbox depends on native Nova Boolean field with couple cool features

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementCheckbox::make('Boolean')
      ];
  }

On detail page and index it's cool looks with el-tag element

Of course you can change standard 'True' 'False' labels on what want to

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementCheckbox::make('Boolean')
              ->falseLabel('Off')
              ->trueLabel('On')
      ];
  }

If you d'not want to be displayed el-tag you can hide it with showTagOnIndex() showTagOnDetail()

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementCheckbox::make('Boolean')
              ->falseLabel('Off')
              ->trueLabel('On')
          ->showTagOnDetail(false)
          ->showTagOnIndex(false)
      ];
  }

When you just see only label

ElementSwitch

ElementSwitch is depends on ElementCheckbox

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementSwitch::make('Boolean')
              ->falseLabel('Off')
              ->trueLabel('On')
      ];
  }

If you want to show your labels on switch use showLabels() method

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementSwitch::make('Boolean')
              ->falseLabel('Off')
              ->trueLabel('On')
              ->showLabels()
      ];
  }

Also you can change active/inactive colors on switch

public function fields(Request $request)
  {
      return [
          ID::make()->sortable(),
          ElementSwitch::make('Boolean')
              ->falseLabel('Off')
              ->trueLabel('On')
              ->showLabels()
          ->activeColor('#13ce66')
          ->inactiveColor('#ff4949')
      ];
  }

Components in progress

• Input
• Number
• Select
• Autocomplete
• Checkbox
• Radio
• Switch
• Date
• Time
• DateTime
• DataTimeRange
• Tabs
• Upload
• Slider
• Cascader
• Upload
• Transfer

Built With

• Laravel Nova - The best admin panel for Laravel
• Element UI - The best set of components for Vue.js

License

This project is licensed under the MIT License - see the LICENSE.md file for details