camya · Log1x · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023
diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
@@ -15,17 +15,12 @@ jobs:
       fail-fast: true
       matrix:
         os: [ ubuntu-latest, windows-latest ]
-        php: [ 8.0, 8.1 ]
-        laravel: [ 10.*, 9.* ]
+        php: [ 8.1 ]
+        laravel: [ 10.* ]
         stability: [ prefer-lowest, prefer-stable ]
         include:
           - laravel: 10.*
             testbench: 8.*
-          - laravel: 9.*
-            testbench: 7.*
-        exclude:
-          - laravel: 10.*
-            php: 8.0
 
     name: P${{ matrix.php }} - L${{ matrix.laravel }} - ${{ matrix.stability }} - ${{ matrix.os }}
 

diff --git a/README.md b/README.md
@@ -314,7 +314,7 @@ This is needed in order to set Filament's "ignorable" parameter correctly.
 ```php
 \Camya\Filament\Forms\Components\TitleWithSlugInput::make(
     titleRuleUniqueParameters: [
-        'callback' => fn(Unique $rule) => $rule->where('is_published', 1),
+        'modifyRuleUsing' => fn(Unique $rule) => $rule->where('is_published', 1),
         'ignorable' => fn(?Model $record) => $record,
     ],
 )
@@ -328,7 +328,7 @@ Available array keys:
 
 ```php
 'ignorable' (Model | Closure)
-'callback' (?Closure)
+'modifyRuleUsing' (?Closure)
 'ignoreRecord' (bool)
 'table' (string | Closure | null)  
 'column' (string | Closure | null) 

diff --git a/composer.json b/composer.json
@@ -22,22 +22,22 @@
         }
     ],
     "require": {
-        "php": "^8.0.2",
-        "filament/filament": "^2.16",
-        "illuminate/contracts": "^9.0|^10.0",
+        "php": "^8.1",
+        "filament/filament": "^3.0.0",
+        "illuminate/contracts": "^10.0|^11.0",
         "spatie/laravel-package-tools": "^1.13.0"
     },
     "require-dev": {
         "laravel/pint": "^1.0",
-        "nunomaduro/collision": "^6.0",
+        "nunomaduro/collision": "^7.8",
         "nunomaduro/larastan": "^2.0.1",
-        "orchestra/testbench": "^7.0|^8.0",
-        "pestphp/pest": "^1.21",
-        "pestphp/pest-plugin-laravel": "^1.1",
+        "orchestra/testbench": "^8.0",
+        "pestphp/pest": "^2.13",
+        "pestphp/pest-plugin-laravel": "^2.2",
         "phpstan/extension-installer": "^1.1",
         "phpstan/phpstan-deprecation-rules": "^1.0",
         "phpstan/phpstan-phpunit": "^1.0",
-        "phpunit/phpunit": "^9.5",
+        "phpunit/phpunit": "^10.3",
         "roave/security-advisories": "dev-latest",
         "spatie/laravel-ray": "^1.31"
     },

diff --git a/phpunit.xml.dist b/phpunit.xml.dist
@@ -1,36 +1,19 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<phpunit
-    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-    xsi:noNamespaceSchemaLocation="vendor/phpunit/phpunit/phpunit.xsd"
-    backupGlobals="false"
-    backupStaticAttributes="false"
-    bootstrap="vendor/autoload.php"
-    colors="true"
-    convertErrorsToExceptions="true"
-    convertNoticesToExceptions="true"
-    convertWarningsToExceptions="true"
-    processIsolation="false"
-    stopOnFailure="true"
-    executionOrder="default"
-    failOnWarning="true"
-    failOnRisky="true"
-    failOnEmptyTestSuite="true"
-    beStrictAboutOutputDuringTests="true"
-    verbose="true"
->
-    <testsuites>
-        <testsuite name="Camya Test Suite">
-            <directory>tests</directory>
-        </testsuite>
-    </testsuites>
-    <coverage>
-        <include>
-            <directory suffix=".php">./src</directory>
-        </include>
-    </coverage>
-    <php>
-        <env name="APP_KEY" value="ZzkfSECXIvnK5r28GVIWUAxmbBSjTsZZ"/>
-        <env name="DB_CONNECTION" value="sqlite"/>
-        <env name="DB_DATABASE" value=":memory:"/>
-    </php>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://schema.phpunit.de/10.3/phpunit.xsd" backupGlobals="false" bootstrap="vendor/autoload.php" colors="true" processIsolation="false" stopOnFailure="true" executionOrder="default" failOnWarning="true" failOnRisky="true" failOnEmptyTestSuite="true" beStrictAboutOutputDuringTests="true" cacheDirectory=".phpunit.cache" backupStaticProperties="false">
+  <testsuites>
+    <testsuite name="Camya Test Suite">
+      <directory>tests</directory>
+    </testsuite>
+  </testsuites>
+  <coverage/>
+  <php>
+    <env name="APP_KEY" value="ZzkfSECXIvnK5r28GVIWUAxmbBSjTsZZ"/>
+    <env name="DB_CONNECTION" value="sqlite"/>
+    <env name="DB_DATABASE" value=":memory:"/>
+  </php>
+  <source>
+    <include>
+      <directory suffix=".php">./src</directory>
+    </include>
+  </source>
 </phpunit>
diff --git a/resources/dist/filament-title-with-slug.css b/resources/dist/filament-title-with-slug.css
diff --git a/resources/views/forms/fields/slug-input.blade.php b/resources/views/forms/fields/slug-input.blade.php
@@ -1,4 +1,4 @@
-<x-forms::field-wrapper
+<x-filament-forms::field-wrapper.index
     :id="$getId()"
     :label="$getLabel()"
     :label-sr-only="$isLabelHidden()"
@@ -40,6 +40,8 @@ class="-mt-3 filament-seo-slug-input-wrapper"
                     this.state = this.stateInitial;
                 }
 
+                $wire.set('{{ $getStatePath() }}', this.state)
+
                 this.detectModification();
 
                 this.editing = false;
@@ -71,10 +73,10 @@ class="-mt-3 filament-seo-slug-input-wrapper"
     >
 
         <div
-            {{ $attributes->merge($getExtraAttributes())->class(['flex mx-1 items-center justify-between group text-sm filament-forms-text-input-component']) }}
+            {{ $attributes->merge($getExtraAttributes())->class(['flex gap-4 items-center justify-between group text-sm filament-forms-text-input-component']) }}
         >
 
-            @if($getReadonly())
+            @if($getReadOnly())
 
                 <span class="flex">
                     <span class="mr-1">{{ $getLabelPrefix() }}</span>
@@ -83,26 +85,15 @@ class="-mt-3 filament-seo-slug-input-wrapper"
                 </span>
 
                 @if($getSlugInputUrlVisitLinkVisible())
-
-                    <a
-                        href="{{ $getRecordUrl() }}"
+                    <x-filament::link
+                        :href="$getRecordUrl()"
                         target="_blank"
-                        class="
-                            filament-link cursor-pointer text-sm text-primary-600 underline
-                            inline-flex items-center justify-center space-x-1
-                            hover:text-primary-500
-                            dark:text-primary-500 dark:hover:text-primary-400
-                        "
+                        size="sm"
+                        icon="heroicon-m-arrow-top-right-on-square"
+                        icon-position="after"
                     >
-
-                        <span>{{ $getVisitLinkLabel() }}</span>
-
-                        <x-heroicon-o-external-link
-                            stroke-width="2"
-                            class="h-4 w-4"
-                        />
-
-                    </a>
+                        {{ $getVisitLinkLabel() }}
+                    </x-filament::link>
                 @endif
 
             @else
@@ -132,18 +123,13 @@ class="
                             inline-flex items-center justify-center
                             hover:underline hover:text-primary-500
                             dark:hover:text-primary-400
+                            gap-1
                         "
                         :class="context !== 'create' && modified ? 'text-gray-600 bg-gray-100 dark:text-gray-400 dark:bg-gray-700 px-1 rounded-md' : ''"
                     >
                         <span class="mr-1">{{ $getState() }}</span>
 
-                        <x-heroicon-o-pencil-alt
-                            stroke-width="2"
-                            class="
-                                h-4 w-4
-                                text-primary-600 dark:text-primary-500
-                            "
-                        />
+                        @svg('heroicon-m-pencil-square', 'h-4 w-4 text-primary-600 dark:text-primary-400', ['stroke-width' => '2'])
 
                         <span class="sr-only">{{ trans('filament-title-with-slug::package.permalink_action_edit') }}</span>
 
@@ -165,47 +151,50 @@ class="flex-1 mx-2"
                     x-show="editing"
                     style="display: none;"
                 >
-
-                    <input
-                        type="text"
-                        x-ref="slugInput"
-                        x-model="stateInitial"
-                        x-bind:disabled="!editing"
-                        x-on:keydown.enter="submitModification()"
-                        x-on:keydown.escape="cancelModification()"
-                        {!! ($autocomplete = $getAutocomplete()) ? "autocomplete=\"{$autocomplete}\"" : null !!}
-                        id="{{ $getId() }}"
-                        {!! ($placeholder = $getPlaceholder()) ? "placeholder=\"{$placeholder}\"" : null !!}
-                        {!! $isRequired() ? 'required' : null !!}
-                        {{ $getExtraInputAttributeBag()->class(['block w-full transition duration-75 rounded-lg shadow-sm focus:border-primary-600 focus:ring-1 focus:ring-inset focus:ring-primary-600 disabled:opacity-70', 'dark:bg-gray-700 dark:text-white' => config('forms.dark_mode'), 'border-gray-300' => !$errors->has($getStatePath()), 'dark:border-gray-600' => !$errors->has($getStatePath()) && config('forms.dark_mode'), 'border-danger-600 ring-danger-600' => $errors->has($getStatePath())]) }}
-                    />
-
-                    <input type="hidden" {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}" />
+                    <div class="flex overflow-hidden transition duration-75 bg-white rounded-lg shadow-sm fi-input-wrapper ring-1 focus-within:ring-2 dark:bg-white/5 ring-gray-950/10 focus-within:ring-primary-600 dark:ring-white/20 dark:focus-within:ring-primary-500 fi-fo-text-input">
+                        <input
+                            type="text"
+                            x-ref="slugInput"
+                            x-model="stateInitial"
+                            x-bind:disabled="!editing"
+                            x-on:keydown.enter="submitModification()"
+                            x-on:keydown.escape="cancelModification()"
+                            {!! ($autocomplete = $getAutocomplete()) ? "autocomplete=\"{$autocomplete}\"" : null !!}
+                            id="{{ $getId() }}"
+                            {!! ($placeholder = $getPlaceholder()) ? "placeholder=\"{$placeholder}\"" : null !!}
+                            {!! $isRequired() ? 'required' : null !!}
+                            {{ $getExtraInputAttributeBag()->class([
+                                'fi-input block w-full border-none bg-transparent py-1.5 text-base text-gray-950 outline-none transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-xs sm:leading-6 ps-3 pe-3',
+                                'border-danger-600 ring-danger-600' => $errors->has($getStatePath())])
+                            }}
+                        />
+                    </div>
 
                 </div>
 
                 <div
                     x-show="editing"
-                    class="flex space-x-2"
+                    class="flex space-x-2 gap-2"
                     style="display: none;"
                 >
 
                     <a
                         href="#"
                         role="button"
                         x-on:click.prevent="submitModification()"
+                        style="--c-400:var(--primary-400);--c-500:var(--primary-500);--c-600:var(--primary-600);"
                         class="
-                            filament-button filament-button-size-md inline-flex items-center justify-center py-2.5 font-medium rounded-lg border transition-colors focus:outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset dark:focus:ring-offset-0 min-h-[2.25rem] px-4 text-sm text-gray-800 bg-white border-gray-300 hover:bg-gray-50 focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-500 dark:text-gray-200 dark:focus:text-primary-400 dark:focus:border-primary-400 dark:focus:bg-gray-800 filament-page-button-action
+                            fi-btn fi-btn-size-md relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus:ring-2 disabled:pointer-events-none disabled:opacity-70 rounded-lg fi-btn-color-primary gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-custom-600 text-white hover:bg-custom-500 dark:bg-custom-500 dark:hover:bg-custom-400 focus:ring-custom-500/50 dark:focus:ring-custom-400/50 fi-ac-btn-action
                         "
                     >
                         {{ trans('filament-title-with-slug::package.permalink_action_ok') }}
                     </a>
 
                     <x-filament::link
                         x-show="context === 'edit' && modified"
-                        x-on:click="resetModification()"
+                        x-on:click.prevent="resetModification()"
                         class="cursor-pointer ml-4"
-                        icon="heroicon-o-refresh"
+                        icon="heroicon-o-arrow-path"
                         color="gray"
                         size="sm"
                         title="{{ trans('filament-title-with-slug::package.permalink_action_reset') }}"
@@ -214,9 +203,9 @@ class="cursor-pointer ml-4"
                     </x-filament::link>
 
                     <x-filament::link
-                        x-on:click="cancelModification()"
+                        x-on:click.prevent="cancelModification()"
                         class="cursor-pointer"
-                        icon="heroicon-o-x"
+                        icon="heroicon-o-x-mark"
                         color="gray"
                         size="sm"
                         title="{{ trans('filament-title-with-slug::package.permalink_action_cancel') }}"
@@ -232,27 +221,17 @@ class="flex items-center space-x-2"
                 >
 
                     @if($getSlugInputUrlVisitLinkVisible())
-
                         <template x-if="!editing">
-
-                            <a
-
-                                href="{{ $getRecordUrl() }}"
+                            <x-filament::link
+                                :href="$getRecordUrl()"
                                 target="_blank"
-                                class="filament-link inline-flex items-center justify-center space-x-1 hover:underline focus:outline-none focus:underline text-sm text-primary-600 hover:text-primary-500 dark:text-primary-500 dark:hover:text-primary-400 cursor-pointer"
+                                size="sm"
+                                icon="heroicon-m-arrow-top-right-on-square"
+                                icon-position="after"
                             >
-
-                                <span>{{ $getVisitLinkLabel() }}</span>
-
-                                <x-heroicon-o-external-link
-                                    stroke-width="2"
-                                    class="h-4 w-4"
-                                />
-
-                            </a>
-
+                                {{ $getVisitLinkLabel() }}
+                            </x-filament::link>
                         </template>
-
                     @endif
 
             </span>
@@ -263,4 +242,4 @@ class="h-4 w-4"
 
     </div>
 
-</x-forms::field-wrapper>
+</x-filament-forms::field-wrapper.index>
diff --git a/src/FilamentTitleWithSlugServiceProvider.php b/src/FilamentTitleWithSlugServiceProvider.php
@@ -2,10 +2,12 @@
 
 namespace Camya\Filament;
 
-use Filament\PluginServiceProvider;
+use Filament\Support\Assets\Css;
+use Filament\Support\Facades\FilamentAsset;
 use Spatie\LaravelPackageTools\Package;
+use Spatie\LaravelPackageTools\PackageServiceProvider;
 
-class FilamentTitleWithSlugServiceProvider extends PluginServiceProvider
+class FilamentTitleWithSlugServiceProvider extends PackageServiceProvider
 {
     public function configurePackage(Package $package): void
     {
@@ -16,10 +18,10 @@ public function configurePackage(Package $package): void
             ->hasTranslations();
     }
 
-    protected function getStyles(): array
+    public function packageBooted(): void
     {
-        return [
-            'filament-title-with-slug-styles' => __DIR__.'/../resources/dist/filament-title-with-slug.css',
-        ];
+        FilamentAsset::register([
+            Css::make('filament-title-with-slug', __DIR__.'/../resources/dist/filament-title-with-slug.css')->loadedOnRequest(),
+        ], 'filament-title-with-slug');
     }
 }