Added context menu and some customizations

Fix styling

Fixed livewire dom sniffing issue in menu

Fix styling

Improve code after update from master

Fix styling

add hidden method to actions

Fix styling

Update CheckboxFilter.php

add support of render html in link column

config/livewire-tables-defaults.php

@@ -0,0 +1,9 @@
+<?php
+
+return [
+    'classes' => [
+        'bootstrap-5' => [
+            'loader-top' => 'bg-success p-0 py-0 rounded-0 text-center text-white',
+        ],
+    ],
+];

config/livewire-tables.php

@@ -50,6 +50,16 @@
         ],
     ],
 
+    /**
+     * Configuration options for DateFilter
+     */
+    'monthFilter' => [
+        'defaultConfig' => [
+            'format' => 'Y-m-d',
+            'pillFormat' => 'M Y', // Used to display in the Filter Pills
+        ],
+    ],
+
     /**
      * Configuration options for DateTimeFilter
      */

resources/views/components/actions.blade.php

@@ -0,0 +1,21 @@
+@aware(['component'])
+
+<div>
+    @foreach($component->actions as $action)
+        @continue($action->isHidden())
+        <a {{
+            $attributes->merge($action->attributes)
+            ->class(['btn btn-sm btn-success' => ! $action->hasClass()])
+        }}
+           @if($action->hasWireElement())
+               wire:{{ $action->getWireElementType() }}="{{ $action->getWireElementComponentName() }} , @js($action->getWireElementParams())"
+           @endif
+        >
+            {{ $action->label }}
+
+            @if($action->hasIcon())
+                <i class="ms-1 {{ $action->icon }}"></i>
+            @endif
+        </a>
+    @endforeach
+</div>

resources/views/components/table.blade.php

@@ -56,6 +56,7 @@
             ->class(['table-responsive' => $customAttributes['wrapper']['default'] ?? true])
             ->except(['default','default-styling','default-colors']) }}
     >
+        <div class="overlay d-none" wire:loading.class.remove="d-none" x-init="$el.parentElement.style.position = 'relative'"></div>
         <table
             wire:key="{{ $tableName }}-table"
             {{ $attributes->merge($customAttributes['table'])

resources/views/components/tools/filters/checkbox.blade.php

@@ -0,0 +1,21 @@
+<div>
+    <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
+
+    <div @class([
+        "rounded-md shadow-sm" => $isTailwind,
+        "mb-3 mb-md-0 input-group" => $isBootstrap,
+    ])>
+        <div class="form-check">
+            <input
+                wire:model.live="filterComponents.{{ $filter->getKey() }}"
+                wire:key="{{ $filter->generateWireKey($tableName, 'text') }}"
+                id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+                type="checkbox"
+                class="form-check-input"
+                @checked($filter->getValue() == $filter->getFilterDefaultValue())
+                value="{{ $filter->getValue() }}"
+            >
+            <label class="form-check-label" for="{{ $filter->generateWireKey($tableName, 'text') }}">{{ $filter->getLabel() }}</label>
+        </div>
+    </div>
+</div>

resources/views/components/tools/filters/month.blade.php

@@ -0,0 +1,21 @@
+<div>
+    <x-livewire-tables::tools.filter-label :$filter :$filterLayout :$tableName :$isTailwind :$isBootstrap4 :$isBootstrap5 :$isBootstrap />
+    <div @class([
+        "rounded-md shadow-sm" => $isTailwind,
+        "mb-3 mb-md-0 input-group" => $isBootstrap,
+    ])>
+        <input
+            wire:model.live="filterComponents.{{ $filter->getKey() }}"
+            wire:key="{{ $filter->generateWireKey($tableName, 'date') }}"
+            id="{{ $tableName }}-filter-{{ $filter->getKey() }}@if($filter->hasCustomPosition())-{{ $filter->getCustomPosition() }}@endif"
+            type="month"
+            @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
+            @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif
+            @class([
+                "block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600" => $isTailwind,
+                "form-control" => $isBootstrap,
+            ])
+        />
+    </div>
+</div>

resources/views/includes/columns/link.blade.php

@@ -1,4 +1,9 @@
-<a href="{{ $path }}" {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!}>
+<a
+    @if($column->hasWireElement())
+        wire:{{ $column->getWireElementType() }}="{{ $column->getWireElementComponentName() }} , @js($column->getWireElementParams())"
+    @endif
+    href="{{ $path }}"
+    {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!}>
     @if($column->isHtml())
         {!! $title !!}
     @else

resources/views/includes/columns/menu-item.blade.php

@@ -0,0 +1,36 @@
+@if($column->hasDivider() && $column->dividerPosition() == 'before')
+    <div class="dropdown-divider"></div>
+@endif
+
+@if($form)
+    <form class="d-inline" action="{{ $path }}" method="post">
+        @csrf
+        @method($method)
+        <button {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!}>
+            @if($icon)
+                <i class="{{ $icon }}"></i>
+            @endif
+            {{ __($title) }}
+        </button>
+    </form>
+@else
+    <a
+        href="{{ $path }}"
+        @if($column->hasWireElement())
+            wire:{{ $column->getWireElementType() }}="{{ $column->getWireElementComponentName() }} , @js($column->getWireElementParams())"
+        @endif
+
+        {!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!}>
+        @if($icon)
+            <i class="{{ $icon }}"></i>
+        @endif
+        {{ __($title) }}
+    </a>
+@endif
+
+@if($column->hasDivider() && $column->dividerPosition() == 'after')
+    <div class="dropdown-divider"></div>
+@endif
+
+
+

resources/views/includes/columns/menu.blade.php

@@ -0,0 +1,17 @@
+<div x-data="{ showDropdown: false }" x-init="showDropdown = $refs.dropdownMenu.children.length > 0">
+    <div class="dropdown"{!! count($attributes) ? $column->arrayToAttributes($attributes) : '' !!}>
+        {!! $title !!}
+        <a x-show="showDropdown"  href="#" class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="far fa-ellipsis-h"></i>
+        </a>
+        <div class="dropdown-menu dropdown-menu-end py-0 z-10" x-ref="dropdownMenu" style="z-index: 10!important;">
+            @foreach($actions as $action)
+                @continue((bool)$action->getContents($row) === false)
+                <div>
+                    {!! $action->getContents($row) !!}
+                </div>
+            @endforeach
+        </div>
+    </div>
+
+</div>

resources/views/includes/loading.blade.php

@@ -0,0 +1,3 @@
+<div class="overlay d-none" wire:loading.class.remove="d-none"
+     x-init="$el.parentElement.style.position = 'relative'">
+</div>

src/LaravelLivewireTablesServiceProvider.php

@@ -24,6 +24,10 @@ public function boot(): void
             __DIR__.'/../config/livewire-tables.php', 'livewire-tables'
         );
 
+        $this->mergeConfigFrom(
+            __DIR__.'/../config/livewire-tables-defaults.php', 'livewire-tables-defaults'
+        );
+
         // Load Default Translations
         $this->loadJsonTranslationsFrom(
             __DIR__.'/../resources/lang'

src/Traits/Configuration/CustomColumnConfiguration.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Configuration;
+
+trait CustomColumnConfiguration
+{
+    public function from(callable $callback): self
+    {
+        return $this->label($callback);
+    }
+}

src/Traits/HasWireElement.php

@@ -0,0 +1,79 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits;
+
+use Illuminate\Database\Eloquent\Model;
+
+trait HasWireElement
+{
+    protected ?string $wireElementType = null;
+
+    protected ?string $wireElementComponentName = null;
+
+    protected array $wireElementParams = [];
+
+    protected mixed $wireElementCallback = null;
+
+    public function wireModal($component, $params = []): self
+    {
+        $this->wireElementType = 'modal';
+        $this->wireElementComponentName = $component;
+        $this->wireElementParams = $params;
+
+        return $this;
+    }
+
+    public function wireSlideOver($component, $params = []): self
+    {
+        $this->wireElementType = 'slide-over';
+        $this->wireElementComponentName = $component;
+        $this->wireElementParams = $params;
+
+        return $this;
+    }
+
+    public function wireElement(callable $callback): self
+    {
+        $this->wireElementCallback = $callback;
+
+        return $this;
+    }
+
+    public function getWireElementCallback(): ?callable
+    {
+        return $this->wireElementCallback;
+    }
+
+    public function hasWireElementCallback(): bool
+    {
+        return $this->wireElementCallback !== null;
+    }
+
+    public function setWireElement(Model $row): void
+    {
+        $wireElement = $this->hasWireElementCallback() ? app()->call($this->getWireElementCallback(), ['row' => $row]) : [];
+        $this->wireElementType = $wireElement['type'] ?? null;
+        $this->wireElementComponentName = $wireElement['component'] ?? null;
+        $this->wireElementParams = $wireElement['params'] ?? [];
+    }
+
+    public function hasWireElement(): bool
+    {
+        return $this->wireElementComponentName !== null;
+    }
+
+    public function getWireElementComponentName(): ?string
+    {
+        return $this->wireElementComponentName;
+    }
+
+    public function getWireElementType(): ?string
+    {
+        return $this->wireElementType;
+    }
+
+    public function getWireElementParams(): array
+    {
+        return $this->wireElementParams;
+    }
+}

src/Views/Column.php

@@ -15,7 +15,7 @@ class Column
 
     public function __construct(string $title, ?string $from = null)
     {
-        $this->title = trim($title);
+        $this->title = trim(__($title));
 
         if ($from) {
             $this->from = trim($from);

src/Views/Columns/LinkColumn.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Database\Eloquent\Model;
 use Rappasoft\LaravelLivewireTables\Exceptions\DataTableConfigurationException;
+use Rappasoft\LaravelLivewireTables\Traits\HasWireElement;
 use Rappasoft\LaravelLivewireTables\Views\Column;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Configuration\LinkColumnConfiguration;
 use Rappasoft\LaravelLivewireTables\Views\Traits\Core\{HasLocationCallback,HasTitleCallback};
@@ -15,6 +16,7 @@ class LinkColumn extends Column
         LinkColumnHelpers,
         HasLocationCallback,
         HasTitleCallback;
+    use HasWireElement;
 
     protected string $view = 'livewire-tables::includes.columns.link';
 
@@ -37,6 +39,8 @@ public function getContents(Model $row): null|string|\Illuminate\Support\HtmlStr
             throw new DataTableConfigurationException('You must specify a location callback for an link column.');
         }
 
+        $this->setWireElement($row);
+
         return view($this->getView())
             ->withColumn($this)
             ->withIsTailwind($this->isTailwind())

src/Views/Columns/MenuColumn.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Views\Columns;
+
+use Illuminate\Contracts\Foundation\Application;
+use Illuminate\Contracts\View\Factory;
+use Illuminate\Contracts\View\View;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\HtmlString;
+use Rappasoft\LaravelLivewireTables\Exceptions\DataTableConfigurationException;
+use Rappasoft\LaravelLivewireTables\Views\Column;
+use Rappasoft\LaravelLivewireTables\Views\Traits\Configuration\MenuColumnConfiguration;
+use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasTitleCallback;
+use Rappasoft\LaravelLivewireTables\Views\Traits\Helpers\MenuColumnHelpers;
+
+class MenuColumn extends Column
+{
+    use MenuColumnConfiguration,
+        MenuColumnHelpers;
+    use HasTitleCallback;
+
+    protected array $actions = [];
+
+    protected string $view = 'livewire-tables::includes.columns.menu';
+
+    public function __construct(string $title, ?string $from = null)
+    {
+        parent::__construct($title, $from);
+
+        $this->label(fn () => null);
+    }
+
+    public function getContents(Model $row): null|string|HtmlString|DataTableConfigurationException|Application|Factory|View
+    {
+        return view($this->getView())
+            ->withColumn($this)
+            ->withTitle($this->hasTitleCallback() ? app()->call($this->getTitleCallback(), ['row' => $row]) : '')
+            ->withRow($row)
+            ->withActions($this->getActions())
+            ->withAttributes($this->hasAttributesCallback() ? app()->call($this->getAttributesCallback(), ['row' => $row]) : []);
+    }
+}