Merge pull request #44 from joshhanley/next-custom-components

[Next] Custom components
joshhanley · Jul 22, 2024 · 664778d · 664778d
2 parents 785a36d + 6ecd13a
commit 664778d
Show file tree

Hide file tree

Showing 61 changed files with 415 additions and 367 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@ composer require joshhanley/livewire-autocomplete
 <!-- Then include the scripts by putting this tag inside your app layout after `<livewire:scripts />` or you can push it to your scripts stack.
 
 ```html
-<x-autocomplete-scripts />
+<x-autocomplete.scripts />
 ``` -->
 
 ## Usage
@@ -32,15 +32,15 @@ Example
 
 ```html
 <x-autocomplete class="w-[700px]" wire:model="clientId">
-    <x-autocomplete-label>Client:</x-autocomplete-label>
+    <x-autocomplete.label>Client:</x-autocomplete.label>
 
-    <x-autocomplete-input wire:model="clientSearch" as="x-input" :class="$clientId ? 'text-green-500' : ''" />
+    <x-autocomplete.input wire:model="clientSearch" as="x-input" :class="$clientId ? 'text-green-500' : ''" />
 
     <button type="button" x-on:click="clear()">Clear</button>
 
-    <x-autocomplete-list class="mx-2 mt-1" x-cloak>
+    <x-autocomplete.list class="mx-2 mt-1" x-cloak>
         @foreach ($this->users as $user)
-            <x-autocomplete-item
+            <x-autocomplete.item
                 :key="$user->id"
                 :value="$user->name"
                 :isDisabled="$user->id == 1 || $user->id == 5"
@@ -49,29 +49,29 @@ Example
                 >
                 <span>{{ $user->name }}</span>
                 <span class="pl-1 text-gray-400">{{ $user->company?->name }}</span>
-            </x-autocomplete-item>
+            </x-autocomplete.item>
         @endforeach
-    </x-autocomplete-list>
+    </x-autocomplete.list>
 </x-autocomplete>
 ```
 
 Grouped Example
 
 ```html
 <x-autocomplete class="w-[700px]" wire:model="clientId">
-    <x-autocomplete-label>Client:</x-autocomplete-label>
+    <x-autocomplete.label>Client:</x-autocomplete.label>
 
-    <x-autocomplete-input wire:model="clientSearch" as="x-input" :class="$clientId ? 'text-green-500' : ''" />
+    <x-autocomplete.input wire:model="clientSearch" as="x-input" :class="$clientId ? 'text-green-500' : ''" />
 
-    <x-autocomplete-list class="mx-2 mt-1" x-cloak>
+    <x-autocomplete.list class="mx-2 mt-1" x-cloak>
         @foreach ($this->users->groupBy('company_id') as $companyId => $companyUsers)
             <li>
                 <div class="px-3 py-2 bg-gray-200 font-bold text-gray-900">
                     {{ $this->companies->find($companyId)->name }}
                 </div>
 
                 @foreach ($companyUsers as $user)
-                    <x-autocomplete-item
+                    <x-autocomplete.item
                         :key="$user->id"
                         :value="$user->name"
                         :isDisabled="$user->id == 1 || $user->id == 5"
@@ -80,11 +80,11 @@ Grouped Example
                         >
                         <span>{{ $user->name }}</span>
                         {{-- <span class="pl-1 text-gray-400">{{ $user->company?->name }}</span> --}}
-                    </x-autocomplete-item>
+                    </x-autocomplete.item>
                 @endforeach
             </li>
         @endforeach
-    </x-autocomplete-list>
+    </x-autocomplete.list>
 </x-autocomplete>
 ```
 
@@ -93,17 +93,17 @@ x-autocomplete:
 - unstyled
 - wire:model - key property
 
-x-autocomplete-label:
+x-autocomplete.label:
 - unstyled
 
-x-autocomplete-input:
+x-autocomplete.input:
 - unstyled
 - wire:model - value property
 
-x-autocomplete-list:
+x-autocomplete.list:
 - unstyled
 
-x-autocomplete-item:
+x-autocomplete.item:
 - unstyled
 - key - key for that item
 - value - value for that item to display in text box

diff --git a/composer.json b/composer.json
@@ -35,7 +35,7 @@
     "extra": {
         "laravel": {
             "providers": [
-                "LivewireAutocomplete\\ServiceProvider"
+                "LivewireAutocomplete\\LivewireAutocompleteServiceProvider"
             ]
         }
     },

diff --git a/...nents/autocomplete-clear-button.blade.php → ...nents/autocomplete/clear-button.blade.php b/...nents/autocomplete-clear-button.blade.php → ...nents/autocomplete/clear-button.blade.php
diff --git a/...s/components/autocomplete-empty.blade.php → ...s/components/autocomplete/empty.blade.php b/...s/components/autocomplete-empty.blade.php → ...s/components/autocomplete/empty.blade.php
@@ -1,5 +1,5 @@
 @php($componentNamePrefix = config('livewire-autocomplete.use_global_namespace', false) ? '' : (config('livewire-autocomplete.namespace', 'lwa') . '::'))
 
-<x-dynamic-component :component="$componentNamePrefix . 'autocomplete-item'" {{ $attributes }}>
+<x-dynamic-component :component="$componentNamePrefix . 'autocomplete.item'" {{ $attributes }}>
     {{ $slot->isNotEmpty() ? $slot : 'No results found' }}
 </x-dynamic-component>
diff --git a/...s/views/components/autocomplete.blade.php → ...s/components/autocomplete/index.blade.php b/...s/views/components/autocomplete.blade.php → ...s/components/autocomplete/index.blade.php
diff --git a/...nents/autocomplete-input-prefix.blade.php → ...nents/autocomplete/input-prefix.blade.php b/...nents/autocomplete-input-prefix.blade.php → ...nents/autocomplete/input-prefix.blade.php
diff --git a/...nents/autocomplete-input-suffix.blade.php → ...nents/autocomplete/input-suffix.blade.php b/...nents/autocomplete-input-suffix.blade.php → ...nents/autocomplete/input-suffix.blade.php
diff --git a/...s/components/autocomplete-input.blade.php → ...s/components/autocomplete/input.blade.php b/...s/components/autocomplete-input.blade.php → ...s/components/autocomplete/input.blade.php
diff --git a/...ws/components/autocomplete-item.blade.php → ...ws/components/autocomplete/item.blade.php b/...ws/components/autocomplete-item.blade.php → ...ws/components/autocomplete/item.blade.php
diff --git a/...s/components/autocomplete-label.blade.php → ...s/components/autocomplete/label.blade.php b/...s/components/autocomplete-label.blade.php → ...s/components/autocomplete/label.blade.php
diff --git a/.../components/autocomplete-legacy.blade.php → .../components/autocomplete/legacy.blade.php b/.../components/autocomplete-legacy.blade.php → .../components/autocomplete/legacy.blade.php
@@ -57,41 +57,41 @@
     :wire:model.live="$selectedProperty->value"
     >
     @if ($loadOnceOnFocus)
-        <x-dynamic-component :component="$componentNamePrefix . 'autocomplete-input'"
+        <x-dynamic-component :component="$componentNamePrefix . 'autocomplete.input'"
             :wire:model.live="$inputProperty->value"
             :wire:focus.once="$focusAction->value"
             x-bind:disabled="id"
             :attributes="$attributes"
             dusk="autocomplete-input">
-            <x-dynamic-component :component="$componentNamePrefix . 'autocomplete-clear-button'" dusk="clear" />
+            <x-dynamic-component :component="$componentNamePrefix . 'autocomplete.clear-button'" dusk="clear" />
         </x-dynamic-component>
     @else
-        <x-dynamic-component :component="$componentNamePrefix . 'autocomplete-input'"
+        <x-dynamic-component :component="$componentNamePrefix . 'autocomplete.input'"
             :wire:model.live="$inputProperty->value"
             :wire:focus="$focusAction->value"
             x-bind:disabled="id"
             :attributes="$attributes"
             dusk="autocomplete-input">
-            <x-dynamic-component :component="$componentNamePrefix . 'autocomplete-clear-button'" dusk="clear" />
+            <x-dynamic-component :component="$componentNamePrefix . 'autocomplete.clear-button'" dusk="clear" />
         </x-dynamic-component>
     @endif
 
-    <x-dynamic-component :component="$componentNamePrefix . 'autocomplete-list'"
+    <x-dynamic-component :component="$componentNamePrefix . 'autocomplete.list'"
         :inline="$getOption('inline')"
         :containerClass="$getOption('inline') ? $getOption('inline-styles') : $getOption('overlay-styles')"
         class="mx-2 mt-1 max-h-56 overflow-y-auto"
         dusk="autocomplete-dropdown">
-        <x-dynamic-component :component="$componentNamePrefix . 'autocomplete-loading'" dusk="loading" />
+        <x-dynamic-component :component="$componentNamePrefix . 'autocomplete.loading'" dusk="loading" />
 
         @if ($shouldShowPlaceholder($resultsValue, $inputValue))
             {{-- prompt --}}
-            <x-dynamic-component :component="$componentNamePrefix . 'autocomplete-prompt'" wire:key="{{ $name }}-prompt">
+            <x-dynamic-component :component="$componentNamePrefix . 'autocomplete.prompt'" wire:key="{{ $name }}-prompt">
                 Start typing to search...
             </x-dynamic-component>
         @else
             @if ($hasResults($resultsValue) || $allowNew)
                 @if ($allowNew && strlen($inputValue) > 0)
-                    <x-dynamic-component :component="$componentNamePrefix . 'autocomplete-new-item'"
+                    <x-dynamic-component :component="$componentNamePrefix . 'autocomplete.new-item'"
                         :value="$inputValue"
                         wire:key='{{ $name }}-add-new'
                         :active="$getOption('result-focus-styles')"
@@ -107,7 +107,7 @@ class="mx-2 mt-1 max-h-56 overflow-y-auto"
 
                 @if ($resultsValue)
                     @foreach ($resultsValue as $key => $result)
-                        <x-dynamic-component :component="$componentNamePrefix . 'autocomplete-item'"
+                        <x-dynamic-component :component="$componentNamePrefix . 'autocomplete.item'"
                             :key="$result[$getOption('id')] ?? $result"
                             :value="$result[$getOption('text')] ?? $result"
                             wire:key="{{ $name }}-result-{{ $key }}"
@@ -124,7 +124,7 @@ class="mx-2 mt-1 max-h-56 overflow-y-auto"
                 @endif
             @else
                 {{-- no-results --}}
-                <x-dynamic-component :component="$componentNamePrefix . 'autocomplete-empty'" wire:key="{{ $name }}-no-results">
+                <x-dynamic-component :component="$componentNamePrefix . 'autocomplete.empty'" wire:key="{{ $name }}-no-results">
                     No results found
                 </x-dynamic-component>
             @endif

diff --git a/...ws/components/autocomplete-list.blade.php → ...ws/components/autocomplete/list.blade.php b/...ws/components/autocomplete-list.blade.php → ...ws/components/autocomplete/list.blade.php
diff --git a/...components/autocomplete-loading.blade.php → ...components/autocomplete/loading.blade.php b/...components/autocomplete-loading.blade.php → ...components/autocomplete/loading.blade.php
diff --git a/...omponents/autocomplete-new-item.blade.php → ...omponents/autocomplete/new-item.blade.php b/...omponents/autocomplete-new-item.blade.php → ...omponents/autocomplete/new-item.blade.php
@@ -5,6 +5,6 @@
 
 @php($componentNamePrefix = config('livewire-autocomplete.use_global_namespace', false) ? '' : (config('livewire-autocomplete.namespace', 'lwa') . '::'))
 
-<x-dynamic-component :component="$componentNamePrefix . 'autocomplete-item'" :show="$show ?? $value" :$value {{ $attributes }}>
+<x-dynamic-component :component="$componentNamePrefix . 'autocomplete.item'" :show="$show ?? $value" :$value {{ $attributes }}>
     Add new "{{ $value }}"
 </x-dynamic-component>
diff --git a/.../components/autocomplete-prompt.blade.php → .../components/autocomplete/prompt.blade.php b/.../components/autocomplete-prompt.blade.php → .../components/autocomplete/prompt.blade.php
@@ -1,5 +1,5 @@
 @php($componentNamePrefix = config('livewire-autocomplete.use_global_namespace', false) ? '' : (config('livewire-autocomplete.namespace', 'lwa') . '::'))
 
-<x-dynamic-component :component="$componentNamePrefix . 'autocomplete-item'" {{ $attributes }}>
+<x-dynamic-component :component="$componentNamePrefix . 'autocomplete.item'" {{ $attributes }}>
     {{ $slot->isNotEmpty() ? $slot : 'Start typing to search' }}
 </x-dynamic-component>
diff --git a/src/Console/Commands/CustomComponentsCommand.php b/src/Console/Commands/CustomComponentsCommand.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace LivewireAutocomplete\Console\Commands;
+
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\File;
+
+class CustomComponentsCommand extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'autocomplete:custom-components';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Generate custom components for Livewire autocomplete to implement custom styles.';
+
+    /**
+     * Execute the console command.
+     */
+    public function handle()
+    {
+        $packageBasePath = __DIR__.'/../../../';
+        $sourcePath = $packageBasePath.'stubs/custom-components/autocomplete';
+        $destinationPath = 'views/components/autocomplete';
+        $fullDestinationPath = resource_path($destinationPath);
+
+        $this->info('Generating custom components...');
+
+        if (! File::exists($sourcePath)) {
+            $this->error('Source directory does not exist.');
+
+            return 1;
+        }
+
+        if (! File::exists($fullDestinationPath)) {
+            File::makeDirectory($fullDestinationPath, 0755, true);
+        }
+
+        $files = File::allFiles($sourcePath);
+
+        foreach ($files as $file) {
+            $destinationFile = $fullDestinationPath.'/'.$file->getFilename();
+            File::copy($file->getPathname(), $destinationFile);
+            $this->info("Generated: {$destinationPath}/{$file->getFilename()}");
+        }
+
+        $this->info('All custom components have been generated.');
+
+        return 0;
+    }
+}
diff --git a/src/ServiceProvider.php → src/LivewireAutocompleteServiceProvider.php b/src/ServiceProvider.php → src/LivewireAutocompleteServiceProvider.php
@@ -4,8 +4,9 @@
 
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider as BaseServiceProvider;
+use LivewireAutocomplete\Console\Commands\CustomComponentsCommand;
 
-class ServiceProvider extends BaseServiceProvider
+class LivewireAutocompleteServiceProvider extends BaseServiceProvider
 {
     public $name = 'livewire-autocomplete';
     public $namespace = 'lwa';
@@ -34,6 +35,10 @@ public function boot()
         if (config($this->name . '.use_global_namespace', true)) {
             Blade::anonymousComponentNamespace(__DIR__ . '/../resources/views/components');
         }
+
+        $this->commands([
+            CustomComponentsCommand::class,
+        ]);
     }
 
     protected function loadViews($path, $namespace, $useGlobalNamespace = false)

diff --git a/stubs/custom-components/autocomplete/clear-button.blade.php b/stubs/custom-components/autocomplete/clear-button.blade.php
@@ -0,0 +1,3 @@
+<x-lwa::autocomplete.clear-button :attributes="$attributes->class('')" unstyled>
+    {{ $slot }}
+</x-lwa::autocomplete.clear-button>
diff --git a/stubs/custom-components/autocomplete/empty.blade.php b/stubs/custom-components/autocomplete/empty.blade.php
@@ -0,0 +1,3 @@
+<x-lwa::autocomplete.empty :attributes="$attributes->class('')" unstyled>
+    {{ $slot }}
+</x-lwa::autocomplete.empty>
diff --git a/stubs/custom-components/autocomplete/index.blade.php b/stubs/custom-components/autocomplete/index.blade.php
@@ -0,0 +1,3 @@
+<x-lwa::autocomplete :attributes="$attributes->class('')" unstyled>
+    {{ $slot }}
+</x-lwa::autocomplete>
diff --git a/stubs/custom-components/autocomplete/input-prefix.blade.php b/stubs/custom-components/autocomplete/input-prefix.blade.php
@@ -0,0 +1,3 @@
+<x-lwa::autocomplete.input-prefix :attributes="$attributes->class('')" unstyled>
+    {{ $slot }}
+</x-lwa::autocomplete.input-prefix>
diff --git a/stubs/custom-components/autocomplete/input-suffix.blade.php b/stubs/custom-components/autocomplete/input-suffix.blade.php
@@ -0,0 +1,3 @@
+<x-lwa::autocomplete.input-suffix :attributes="$attributes->class('')" unstyled>
+    {{ $slot }}
+</x-lwa::autocomplete.input-suffix>
diff --git a/stubs/custom-components/autocomplete/input.blade.php b/stubs/custom-components/autocomplete/input.blade.php
@@ -0,0 +1,15 @@
+<x-lwa::autocomplete.input :attributes="$attributes->class('')" containerClass="" unstyled>
+    @if (isset($prefix))
+        <x-slot:prefix>
+            {{ $prefix }}
+        </x-slot>
+    @endif
+
+    {{ $slot }}
+
+    @if (isset($suffix))
+        <x-slot:suffix>
+            {{ $suffix }}
+        </x-slot>
+    @endif
+</x-lwa::autocomplete.input>
diff --git a/stubs/custom-components/autocomplete/item.blade.php b/stubs/custom-components/autocomplete/item.blade.php
@@ -0,0 +1,3 @@
+<x-lwa::autocomplete.item :attributes="$attributes->class('')" unstyled>
+    {{ $slot }}
+</x-lwa::autocomplete.item>
diff --git a/stubs/custom-components/autocomplete/label.blade.php b/stubs/custom-components/autocomplete/label.blade.php
@@ -0,0 +1,3 @@
+<x-lwa::autocomplete.label :attributes="$attributes->class('')" unstyled>
+    {{ $slot }}
+</x-lwa::autocomplete.label>
diff --git a/stubs/custom-components/autocomplete/list.blade.php b/stubs/custom-components/autocomplete/list.blade.php
@@ -0,0 +1,3 @@
+<x-lwa::autocomplete.list :attributes="$attributes->class('')" containerClass="" unstyled>
+    {{ $slot }}
+</x-lwa::autocomplete.list>
diff --git a/stubs/custom-components/autocomplete/loading.blade.php b/stubs/custom-components/autocomplete/loading.blade.php
@@ -0,0 +1,3 @@
+<x-lwa::autocomplete.loading :attributes="$attributes->class('')" unstyled>
+    {{ $slot }}
+</x-lwa::autocomplete.loading>
diff --git a/stubs/custom-components/autocomplete/new-item.blade.php b/stubs/custom-components/autocomplete/new-item.blade.php
@@ -0,0 +1 @@
+<x-lwa::autocomplete.new-item :attributes="$attributes->class('')" unstyled />
diff --git a/stubs/custom-components/autocomplete/prompt.blade.php b/stubs/custom-components/autocomplete/prompt.blade.php
@@ -0,0 +1,3 @@
+<x-lwa::autocomplete.prompt :attributes="$attributes->class('')" unstyled>
+    {{ $slot }}
+</x-lwa::autocomplete.prompt>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<x-lwa::autocomplete.new-item :attributes="$attributes->class('')" unstyled />