Merge branch 'release/3.0.0'

leandrocfe · Jul 31, 2023 · b01345a · b01345a
2 parents d6ef8bc + 70dc512
commit b01345a
Show file tree

Hide file tree

Showing 31 changed files with 172 additions and 161 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 3.0.0
+
+### Changed
+
+-   Filament V3.
+
 ## 2.0.2
 
 ### Changed

diff --git a/README.md b/README.md
@@ -2,20 +2,20 @@
 
 [Apex Charts](https://apexcharts.com/) integration for [Filament](https://filamentphp.com/)
 
-![dashboard image demo](https://raw.githubusercontent.com/leandrocfe/filament-apex-charts/develop/screenshots/v1-dark-2216.png)
+![dashboard image demo](https://raw.githubusercontent.com/leandrocfe/filament-apex-charts/master/screenshots/v3-dark-2185.png)
 
-[Filament demo with ApexCharts](https://github.com/leandrocfe/filament-demo/tree/apex-charts-plugin)
-
-[Online Filament Project Example](https://filament-apex-charts-demo.leandroferreira.dev.br/)
+[Filament demo with ApexCharts](https://github.com/leandrocfe/filament-demo/tree/apex-charts-plugin-v3)
 
 ## Installation
 
 You can install the package via composer:
 
 ```bash
-composer require leandrocfe/filament-apex-charts:"^2.0"
+composer require leandrocfe/filament-apex-charts:"^3.0"
 ```
 
+**Filament V2** - if you are using Filament v2.x, you can use [this section](https://github.com/leandrocfe/filament-apex-charts/tree/2.0.2)
+
 Optionally, you can publish the views using:
 
 ```bash
@@ -129,13 +129,7 @@ The `getOptions()` method is used to return an array of options based on [Apex C
 
 ## Examples
 
--   [Filament demo with ApexCharts](https://github.com/leandrocfe/filament-demo/tree/apex-charts-plugin)
-
--   [Online Filament Project Example](https://filament-apex-charts-demo.leandroferreira.dev.br/)
-
--   [Github Filament Project Example](https://github.com/leandrocfe/filament-apex-charts-demo)
-
--   [Code Examples](examples/)
+-   [Filament demo with ApexCharts](https://github.com/leandrocfe/filament-demo/tree/apex-charts-plugin-v3)
 
 ## Setting a widget title
 
@@ -156,16 +150,6 @@ You can hide header content by **NOT** providing these
 -   getFormSchema()
 -   getOptions()
 
-## Setting a widget subtitle
-
-You may set a widget subtitle:
-
-```php
-protected static ?string $subheading = 'Lorem Ipsum is simply dummy text';
-```
-
-Optionally, you can use the `getSubheading()` method.
-
 ## Setting a chart id
 
 You may set a chart id:

diff --git a/composer.json b/composer.json
@@ -18,9 +18,9 @@
     ],
     "require": {
         "php": "^8.1",
-        "filament/filament": "^2.16",
+        "filament/filament": "^3.0@beta",
         "illuminate/contracts": "^9.0|^10.0",
-        "livewire/livewire": "^2.11",
+        "livewire/livewire": "^3.0@beta",
         "spatie/laravel-package-tools": "^1.13.0"
     },
     "require-dev": {

diff --git a/resources/views/widgets/apex-chart-widget.blade.php b/resources/views/widgets/apex-chart-widget.blade.php
@@ -15,9 +15,9 @@
     $footer = $this->getFooter();
     $readyToLoad = $this->readyToLoad;
 @endphp
-<x-filament::widget class="filament-widgets-chart-widget filament-apex-charts-widget">
+<x-filament-widgets::widget class="filament-widgets-chart-widget filament-apex-charts-widget">
     <x-filament::card class="filament-apex-charts-card" x-data="{ dropdownOpen: false }"
-        @apexhcharts-dropdown.window="dropdownOpen = event.detail.open">
+        @apexhcharts-dropdown.window="dropdownOpen = $event.detail.open">
 
         <x-filament-apex-charts::header :$heading :$subheading :$filters :$indicatorsCount :$width
             :$filterFormAccessible>
@@ -37,4 +37,4 @@
 
     </x-filament::card>
 
-</x-filament::widget>
+</x-filament-widgets::widget>
diff --git a/resources/views/widgets/components/chart.blade.php b/resources/views/widgets/components/chart.blade.php
@@ -14,7 +14,7 @@
                 theme: {{ $darkMode ? "document.querySelector('html').matches('.dark') ? 'dark' : 'light'" : "'light'" }},
                 init() {
             
-                    $wire.on('updateOptions', async ({ options }) => {
+                    this.$wire.$on('updateOptions', ({ options }) => {
                         this.chart.updateOptions(options, false, true, true);
                     });
             
@@ -25,7 +25,7 @@
                     this.chart.render();
                 }
             }"
-                @dark-mode-toggled.window="chart.updateOptions( { theme: { mode: {{ $darkMode ? '$event.detail' : "'light'" }} } } )"
+                @theme-changed.window="chart.updateOptions( { theme: { mode: {{ $darkMode ? '$event.detail' : "'light'" }} } } )"
                 x-init="$watch('dropdownOpen', value => $wire.dropdownOpen = value)">
             </div>
 
@@ -35,7 +35,7 @@
             @if ($loadingIndicator)
                 {!! $loadingIndicator !!}
             @else
-                <x-filament-support::loading-indicator x-cloak wire:loading.delay class="w-7 h-7" />
+                <x-filament::loading-indicator class="h-7 w-7 text-gray-500 dark:text-gray-400" wire:loading.delay />
             @endif
         </div>
     @endif

diff --git a/resources/views/widgets/components/filter-form.blade.php b/resources/views/widgets/components/filter-form.blade.php
@@ -1,13 +1,36 @@
 @props(['indicatorsCount', 'width'])
-<div class="filament-apex-charts-filter-form">
-    <x-tables::filters.trigger @click="dropdownOpen = !dropdownOpen" :indicators-count="$indicatorsCount" />
+<div class="filament-apex-charts-filter-form relative">
+    <div class="filament-dropdown-trigger cursor-pointer flex items-center justify-center" aria-expanded="false">
+        <button type="button" @click="dropdownOpen = !dropdownOpen"
+            class="fi-icon-btn relative flex items-center justify-center rounded-lg outline-none transition duration-75 focus:ring-2 disabled:pointer-events-none disabled:opacity-70 h-9 w-9 text-gray-400 hover:text-gray-500 focus:ring-primary-600 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:ring-primary-500 fi-ac-icon-btn-action"
+            title="Filter">
+
+            <span class="sr-only">
+                Filter
+            </span>
+
+            <x-filament::icon icon="heroicon-s-funnel" class="h-5 w-5" />
+
+            @if ($indicatorsCount > 0)
+                <div class="absolute start-full top-0 z-10 -ms-1 -translate-x-1/2 rounded-md bg-white dark:bg-gray-900">
+                    <div style="--c-50:var(--primary-50);--c-300:var(--primary-300);--c-400:var(--primary-400);--c-600:var(--primary-600);"
+                        class="fi-badge flex items-center justify-center gap-x-1 whitespace-nowrap rounded-md  text-xs font-medium ring-1 ring-inset px-0.5 min-w-[theme(spacing.4)] tracking-tighter bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30">
+
+                        <span>
+                            {{ $indicatorsCount }}
+                        </span>
+
+                    </div>
+                </div>
+            @endif
+
+        </button>
+    </div>
 
     <div x-show="dropdownOpen" x-cloak @click="dropdownOpen = false" class="fixed inset-0 h-full w-full z-10"></div>
 
     <div x-show="dropdownOpen" x-cloak @class([
-        'absolute right-0 mt-2 divide-y divide-gray-100 rounded-lg bg-white shadow-lg ring-1 ring-black/5 transition z-10',
-        'dark:divide-gray-700 dark:bg-gray-800 dark:ring-white/10' => config(
-            'filament.dark_mode'),
+        'absolute mt-2 z-10 w-screen divide-y divide-gray-100 rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition dark:divide-gray-700 dark:bg-gray-800 dark:ring-white/20',
     ])
         style="{{ match ($width) {
             'xs' => 'width: 20rem;',
@@ -22,19 +45,19 @@
             '6xl' => 'width: 72rem;',
             '7xl' => 'width: 80rem;',
             default => 'width: 20rem;',
-        } }}">
+        } }}; right:0">
         <div class="py-4 px-6">
 
             {{ $slot }}
 
-            <div class="mt-4 text-end flex gap-6 justify-end">
-                <x-tables::button wire:click="submitFiltersForm" color="primary" tag="button" size="sm">
-                    {{ __('filament-support::actions/modal.actions.submit.label') }}
-                </x-tables::button>
-                <x-tables::link @click="$wire.resetFiltersForm;dropdownOpen = false" color="danger" tag="button"
-                    size="sm">
-                    {{ __('tables::table.filters.buttons.reset.label') }}
-                </x-tables::link>
+            <div class="mt-2 text-end flex gap-6 justify-end">
+                <x-filament::link wire:click="submitFiltersForm" color="primary" tag="button" size="sm">
+                    {{ __('filament-actions::modal.actions.submit.label') }}
+                </x-filament::link>
+
+                <x-filament::link wire:click="resetFiltersForm" color="danger" tag="button" size="sm">
+                    {{ __('filament-tables::table.filters.actions.reset.label') }}
+                </x-filament::link>
             </div>
         </div>
 

diff --git a/resources/views/widgets/components/header.blade.php b/resources/views/widgets/components/header.blade.php
@@ -5,9 +5,9 @@
 
             <div>
                 @if ($heading)
-                    <x-filament::card.heading class="filament-apex-charts-heading">
+                    <div class="filament-apex-charts-heading text-base font-semibold leading-6">
                         {!! $heading !!}
-                    </x-filament::card.heading>
+                    </div>
                 @endif
 
                 @if ($subheading)
@@ -20,9 +20,7 @@
             <div>
                 @if ($filters)
                     <select wire:model="filter" @class([
-                        'apex-charts-single-filter w-full text-gray-900 border-gray-300 block h-10 transition duration-75 rounded-lg shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500',
-                        'dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:border-primary-500' => config(
-                            'filament.dark_mode'),
+                        'apex-charts-single-filter w-full text-gray-900 border-gray-300 block h-10 transition duration-75 rounded-lg shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:border-primary-500',
                     ]) wire:loading.class="animate-pulse">
                         @foreach ($filters as $value => $label)
                             <option value="{{ $value }}">

diff --git a/screenshots/v3-dark-2185.png b/screenshots/v3-dark-2185.png
diff --git a/src/Commands/FilamentApexChartsCommand.php b/src/Commands/FilamentApexChartsCommand.php
@@ -47,6 +47,11 @@ class FilamentApexChartsCommand extends Command
      */
     private array $chartOptions;
 
+    /**
+     * Widget Path
+     */
+    private string $widgetPath;
+
     /**
      * Create a new command instance.
      */
@@ -69,7 +74,17 @@ public function handle(): int
 
         //chartType
         $this->chartType = $this->choice(
-            'Chart type', $this->chartOptions,
+            'Chart type',
+            $this->chartOptions,
+        );
+
+        $this->widgetPath = $this->choice(
+            'Using ApexCharts inside a Filament Panel?',
+            [
+                'yes' => 'yes',
+                'no' => 'no (custom TALL-stack app)',
+            ],
+            'yes'
         );
 
         $path = $this->getSourceFilePath();
@@ -86,7 +101,12 @@ public function handle(): int
         $fileCount = count($this->files->files(dirname($path)));
 
         $this->files->put($path, $contents);
-        $this->info("Successfully created {$this->widget}! Check out your new widget on the dashboard page.");
+
+        $infoMessage = $this->widgetPath === 'yes' ?
+            'Check out your new widget on the dashboard page.' :
+            "Render your new widget in any Blade view using the @livewire directive: @livewire(\App\Http\Livewire\\$this->widget::class)";
+
+        $this->info("Successfully created {$this->widget}! {$infoMessage}");
 
         if ($fileCount === 0) {
             $this->welcomeMessage();
@@ -120,8 +140,10 @@ public function getStubPath()
      */
     public function getStubVariables()
     {
+        $namespace = $this->widgetPath === 'yes' ? 'App\\Filament\\Widgets' : 'App\\Http\\Livewire';
+
         return [
-            'NAMESPACE' => 'App\\Filament\\Widgets',
+            'NAMESPACE' => $namespace,
             'CLASS_NAME' => $this->widget,
             'CHART_ID' => Str::of($this->widget)->camel(),
         ];
@@ -148,7 +170,7 @@ public function getStubContents($stub, $stubVariables = [])
         $contents = file_get_contents($stub);
 
         foreach ($stubVariables as $search => $replace) {
-            $contents = Str::of($contents)->replace('$'.$search.'$', $replace);
+            $contents = Str::of($contents)->replace('$' . $search . '$', $replace);
         }
 
         return $contents;
@@ -161,12 +183,14 @@ public function getStubContents($stub, $stubVariables = [])
      */
     public function getSourceFilePath()
     {
+        $path = $this->widgetPath === 'yes' ? 'app/Filament/Widgets/' : 'app/Http/Livewire/';
+
         $widgetPath = match (PHP_OS_FAMILY) {
-            default => 'app/Filament/Widgets/',
-            'Windows' => 'app\\Filament\\Widgets\\'
+            default => $path,
+            'Windows' => Str::of($path)->replace('/', '\\')
         };
 
-        return base_path($widgetPath).$this->widget.'.php';
+        return base_path($widgetPath) . $this->widget . '.php';
     }
 
     /**
@@ -177,7 +201,7 @@ public function getSourceFilePath()
      */
     protected function makeDirectory($path)
     {
-        if (! $this->files->isDirectory($path)) {
+        if (!$this->files->isDirectory($path)) {
             $this->files->makeDirectory($path, 0777, true, true);
         }
 

diff --git a/src/Concerns/CanFilter.php b/src/Concerns/CanFilter.php
@@ -40,9 +40,8 @@ protected function getFilters(): ?array
      */
     public function updatedFilter(): void
     {
-        $this->emitSelf('updateOptions', [
-            'options' => $this->getOptions(),
-        ]);
+        $this->dispatch('updateOptions', options: $this->getOptions())
+            ->self();
     }
 
     /**
@@ -62,11 +61,10 @@ public function submitFiltersForm(): void
     {
         $this->form->validate();
 
-        $this->emitSelf('updateOptions', [
-            'options' => $this->getOptions(),
-        ]);
+        $this->dispatch('updateOptions', options: $this->getOptions())
+            ->self();
 
-        $this->dispatchBrowserEvent('apexhcharts-dropdown', ['open' => false]);
+        $this->dispatch('apexhcharts-dropdown', open: false);
     }
 
     /**
@@ -76,11 +74,11 @@ public function resetFiltersForm(): void
     {
         $this->form->fill();
         $this->form->validate();
-        $this->emitSelf('updateOptions', [
-            'options' => $this->getOptions(),
-        ]);
 
-        $this->dispatchBrowserEvent('apexhcharts-dropdown', ['open' => false]);
+        $this->dispatch('updateOptions', options: $this->getOptions())
+            ->self();
+
+        $this->dispatch('apexhcharts-dropdown', open: false);
     }
 
     /**

diff --git a/src/FilamentApexChartsServiceProvider.php b/src/FilamentApexChartsServiceProvider.php
@@ -2,15 +2,18 @@
 
 namespace Leandrocfe\FilamentApexCharts;
 
-use Filament\PluginServiceProvider;
+use Filament\Support\Assets\Js;
+use Filament\Support\Facades\FilamentAsset;
 use Illuminate\Support\Facades\Blade;
 use Leandrocfe\FilamentApexCharts\Commands\FilamentApexChartsCommand;
+use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;
 use Spatie\LaravelPackageTools\Package;
+use Spatie\LaravelPackageTools\PackageServiceProvider;
 
-class FilamentApexChartsServiceProvider extends PluginServiceProvider
+class FilamentApexChartsServiceProvider extends PackageServiceProvider
 {
-    protected array $beforeCoreScripts = [
-        'filament-apex-charts-scripts' => __DIR__.'/../dist/apexcharts.js',
+    protected array $widgets = [
+        ApexChartWidget::class,
     ];
 
     /**
@@ -44,4 +47,11 @@ public function bootingPackage()
     {
         Blade::componentNamespace('Leandrocfe\\FilamentApexCharts\\Components', 'filament-apex-charts');
     }
+
+    public function packageRegistered(): void
+    {
+        FilamentAsset::register([
+            Js::make('apexcharts', __DIR__.'/../dist/apexcharts.js'),
+        ], package: 'leandrocfe/filament-apex-charts');
+    }
 }