Merge pull request #1612 from DissNik/3.x-search-component

3.x search component
moonshine-software · Mar 9, 2025 · a17c5c5 · a17c5c5
2 parents 55d6372 + 8d7ba2c
commit a17c5c5
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 43 deletions.
diff --git a/src/UI/resources/css/base/layout.css b/src/UI/resources/css/base/layout.css
@@ -93,8 +93,12 @@
     @apply fixed inset-y-0 left-5 z-[101] box-content flex shrink-0 flex-col justify-between lg:pt-6;
     height: calc(100vh - 4rem);
 
-    .search {
-      @apply hidden xl:block;
+    .search-wrapper {
+      @apply mt-4 lg:pr-4 xl:pr-5;
+
+      .search-form-show {
+        @apply text-white;
+      }
     }
   }
 

diff --git a/src/UI/resources/css/components/search.css b/src/UI/resources/css/components/search.css
@@ -2,19 +2,24 @@
 .search {
   @apply relative flex items-center;
 
-  &-form {
-    @apply relative h-12 w-full overflow-hidden xl:max-w-[16rem];
+  .search-form {
+    @apply relative h-12 w-full xl:max-w-[16rem];
 
-    &-field {
-      @apply h-full w-full rounded-full border-transparent bg-gray-200 pr-10 ring-0 transition-all placeholder:text-3xs placeholder:font-normal placeholder:text-slate-600 focus:border-gray-300 focus:bg-white dark:bg-dark-600 dark:placeholder:text-slate-500 focus:dark:border-dark-200;
+    .search-form-field {
+      @apply h-full w-full rounded-full bg-gray-200 pr-20 transition-all placeholder:text-3xs placeholder:font-normal placeholder:text-slate-600 focus:border-gray-300 focus:bg-white dark:bg-dark-600 dark:placeholder:text-slate-500 focus:dark:border-dark-200;
     }
 
-    &-submit {
-      @apply absolute inset-y-0 bottom-0 right-0 z-2 px-3 text-slate-600 hover:text-secondary dark:text-slate-500 dark:hover:text-white;
+    .search-form-submit,
+    .search-form-clear {
+      @apply absolute inset-y-0 bottom-0 right-1 z-2 px-2 text-slate-600 hover:text-secondary dark:text-slate-500 dark:hover:text-white;
 
-      > svg {
+      & > svg {
         @apply h-6 w-6;
       }
     }
+
+    .search-form-clear {
+      @apply right-8;
+    }
   }
 }
diff --git a/src/UI/resources/css/minimalistic.css b/src/UI/resources/css/minimalistic.css
@@ -160,6 +160,14 @@ body.theme-minimalistic {
         }
       }
     }
+
+    .search-wrapper {
+      @apply lg:pr-4 xl:pr-5;
+
+      .search-form-show {
+        @apply text-current;
+      }
+    }
   }
 
   /* Horizontal menu */
@@ -429,20 +437,27 @@ body.theme-minimalistic {
   }
 
   /* Search form */
-  .search-form {
-    @apply h-9;
+  .search {
+    .search-form {
+      @apply h-9;
 
-    &-field {
-      &.form-input {
-        @apply pr-8;
+      .search-form-field {
+        &.form-input {
+          @apply pr-14;
+        }
       }
-    }
 
-    &-submit {
-      @apply px-1.5;
+      .search-form-submit,
+      .search-form-clear {
+        @apply px-1.5 right-0;
 
-      > svg {
-        @apply h-5 w-5;
+        & > svg {
+          @apply h-4 w-4;
+        }
+      }
+
+      .search-form-clear {
+        @apply right-7;
       }
     }
   }

diff --git a/src/UI/resources/views/components/layout/search-form.blade.php b/src/UI/resources/views/components/layout/search-form.blade.php
@@ -0,0 +1,44 @@
+@props([
+    'enabled' => $isEnabled ?? true,
+    'action' => '',
+    'value' => '',
+    'placeholder' => '',
+])
+@if($enabled)
+    <div {{ $attributes->class(['search']) }}>
+        <form action="{{ $action }}"
+              x-ref="searchForm"
+              class="search-form"
+              x-data="{ searchValue: '{{ $value }}' }"
+        >
+            <x-moonshine::form.input
+                x-model="searchValue"
+                x-ref="searchInput"
+                name="search"
+                @keyup.ctrl.k.window="$refs.searchInput.focus()"
+                @keyup.ctrl.period.window="$refs.searchInput.focus()"
+                type="search"
+                class="search-form-field"
+                placeholder="{{ $placeholder }}"
+                required
+            />
+
+            <button
+                type="button"
+                class="search-form-clear"
+                x-show="searchValue"
+                @click="searchValue = ''; $refs.searchInput.value = ''; $refs.searchForm.submit()"
+            >
+                <x-moonshine::icon
+                    icon="x-mark"
+                />
+            </button>
+
+            <button class="search-form-submit" type="submit">
+                <x-moonshine::icon
+                    icon="magnifying-glass"
+                />
+            </button>
+        </form>
+    </div>
+@endif
diff --git a/src/UI/resources/views/components/layout/search.blade.php b/src/UI/resources/views/components/layout/search.blade.php
@@ -5,30 +5,41 @@
     'placeholder' => '',
 ])
 @if($enabled)
-    <div {{ $attributes->class(['search']) }}>
-        <form action="{{ $action }}"
-              x-ref="searchForm"
-              class="search-form"
-        >
-            <x-moonshine::form.input
-                x-data="{}"
-                x-ref="searchInput"
-                name="search"
-                @keyup.ctrl.k.window="$refs.searchInput.focus()"
-                @keyup.ctrl.period.window="$refs.searchInput.focus()"
-                type="search"
-                class="search-form-field form-input"
-                value="{{ $value }}"
-                placeholder="{{ $placeholder }}"
-                required
-            />
+    <div
+        x-data="{
+            isPopover: false,
+            observer: null,
+            init() {
+                this.observer = new ResizeObserver(entries => {
+                    for (let entry of entries) {
+                        const width = entry.contentRect.width;
+                        this.isPopover = width < 100;
+                    }
+                });
+                this.observer.observe(this.$el.parentElement);
+            },
+            destroy() {
+                this.observer.disconnect();
+            }
+        }"
+        x-init="init"
+        x-on:destroy.window="destroy"
+        class="search-wrapper"
+    >
+        <x-moonshine::popover x-show="isPopover" title="" placement="auto">
+            <x-slot:trigger>
+                <button class="flex justify-center w-full search-form-show">
+                    <x-moonshine::icon
+                        icon="magnifying-glass"
+                        size="6"
+                    />
+                </button>
+            </x-slot:trigger>
+            <x-moonshine::layout.search-form :action="$action" :value="$value" :placeholder="$placeholder"/>
+        </x-moonshine::popover>
 
-            <button class="search-form-submit" type="submit">
-                <x-moonshine::icon
-                    icon="magnifying-glass"
-                    size="6"
-                />
-            </button>
-        </form>
+        <div x-show="!isPopover">
+            <x-moonshine::layout.search-form :action="$action" :value="$value" :placeholder="$placeholder"/>
+        </div>
     </div>
 @endif