Merge pull request #56 from CodeWithDennis/feature/add-prefix-suffix

Feature: add prefix suffix icon and label

resources/css/custom.css

@@ -9,17 +9,6 @@
     background: transparent;
 }
 
-.treeselect {
-    background: white;
-    border-radius: 0.5rem !important;
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
-    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-    --tw-ring-color: rgba(var(--gray-950), 0.1);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 html.dark .treeselect {
     --tw-text-opacity: 1;
     background-color: hsla(0, 0%, 100%, .05);
@@ -62,12 +51,6 @@ html.dark .treeselect > .treeselect-input {
     border: none;
 }
 
-.treeselect-input--focused {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) rgba(var(--primary-600), var(--tw-text-opacity));
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 .treeselect-list__item {
     padding: 1.1rem;
     border-radius: 0.475rem;
@@ -235,6 +218,10 @@ html.dark .treeselect--disabled {
     display: none;
 }
 
+.treeselect-input__arrow {
+    margin-right: 7px;
+}
+
 .treeselect--disabled .treeselect-input__clear {
     display: none;
 }
@@ -246,6 +233,7 @@ html.dark .treeselect--disabled {
 html.dark .treeselect-list__item--disabled .treeselect-list__item-checkbox-container {
     background-color: hsl(0deg 0% 30.77% / 5%);
 }
+
 [dir='rtl'] .treeselect-input__operators {
     left: 2px !important;
     right: unset;

resources/views/select-tree.blade.php

@@ -1,3 +1,10 @@
+@php
+    $prefixLabel = $getPrefixLabel();
+    $suffixLabel = $getSuffixLabel();
+    $prefixIcon = $getPrefixIcon();
+    $suffixIcon = $getSuffixIcon();
+@endphp
+
 <x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
     <div
             wire:key="{{ rand() }}"
@@ -34,7 +41,15 @@
                 rtl: '{{ __('filament-panels::layout.direction') === 'rtl' }}'
             })"
         >
-            <div x-ref="tree"></div>
+            <x-filament::input.wrapper
+                    :suffix="$suffixLabel"
+                    :prefix="$prefixLabel"
+                    :prefix-icon="$prefixIcon"
+                    :suffix-icon="$suffixIcon"
+                    :disabled="$isDisabled()"
+            >
+                <div x-ref="tree"></div>
+            </x-filament::input.wrapper>
         </div>
     </div>
 </x-dynamic-component>

src/SelectTree.php

@@ -5,6 +5,7 @@
 use Closure;
 use Filament\Forms\Components\Concerns\CanBeDisabled;
 use Filament\Forms\Components\Concerns\CanBeSearchable;
+use Filament\Forms\Components\Concerns\HasAffixes;
 use Filament\Forms\Components\Concerns\HasPlaceholder;
 use Filament\Forms\Components\Field;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
@@ -15,6 +16,7 @@ class SelectTree extends Field
 {
     use CanBeDisabled;
     use CanBeSearchable;
+    use HasAffixes;
     use HasPlaceholder;
 
     protected string $view = 'select-tree::select-tree';