Tags (#277)

resources/views/components/autocomplete-text.blade.php

@@ -0,0 +1,64 @@
+@props([
+    "id",
+    "name",
+    "placeholder" => "Search...",
+    "items" => [],
+    "maxResults" => 5,
+    "value" => "",
+])
+
+<script>
+    window['items_' + @js($id)] = @json($items);
+</script>
+
+<div
+    x-data="{
+        q: @js($value),
+        items: window['items_' + @js($id)],
+        resultItems: window['items_' + @js($id)],
+        maxResults: @js($maxResults),
+        init() {
+            this.search()
+        },
+        search() {
+            if (! this.q) {
+                this.resultItems = this.items.slice(0, this.maxResults)
+                return
+            }
+            this.resultItems = this.items
+                .filter((item) => item.toLowerCase().includes(this.q.toLowerCase()))
+                .slice(0, this.maxResults)
+        },
+    }"
+>
+    <input type="hidden" name="{{ $name }}" x-ref="input" x-model="q" />
+    <x-dropdown width="full" :hide-if-empty="true">
+        <x-slot name="trigger">
+            <x-text-input
+                id="$id . '-q"
+                x-model="q"
+                type="text"
+                class="mt-1 w-full"
+                :placeholder="$placeholder"
+                autocomplete="off"
+                x-on:input.debounce.100ms="search"
+            />
+        </x-slot>
+        <x-slot name="content">
+            <div
+                id="{{ $id }}-items-list"
+                x-bind:class="
+                    resultItems.length > 0
+                        ? 'py-1 border border-gray-200 dark:border-gray-600 rounded-md'
+                        : ''
+                "
+            >
+                <template x-for="item in resultItems">
+                    <x-dropdown-link class="cursor-pointer" x-on:click="q = item">
+                        <span x-text="item"></span>
+                    </x-dropdown-link>
+                </template>
+            </div>
+        </x-slot>
+    </x-dropdown>
+</div>

resources/views/components/dropdown-trigger.blade.php

@@ -0,0 +1,10 @@
+<div>
+    <div
+        class="block w-full cursor-pointer rounded-md border border-gray-300 p-2.5 text-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-primary-600 dark:focus:ring-primary-600"
+    >
+        {{ $slot }}
+    </div>
+    <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-2">
+        <x-heroicon name="o-chevron-down" class="h-4 w-4 text-gray-400" />
+    </button>
+</div>

resources/views/components/dropdown.blade.php

@@ -2,12 +2,18 @@
     "open" => false,
     "align" => "right",
     "width" => "48",
-    "contentClasses" => "list-none divide-y divide-gray-100 rounded-md border border-gray-200 bg-white py-1 text-base dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-700",
+    "contentClasses" => "list-none divide-y divide-gray-100 rounded-md bg-white text-base dark:divide-gray-600 dark:bg-gray-700",
     "search" => false,
     "searchUrl" => "",
+    "hideIfEmpty" => false,
+    "closeOnClick" => true,
 ])
 
 @php
+    if (! $hideIfEmpty) {
+        $contentClasses .= " py-1 border border-gray-200 dark:border-gray-600";
+    }
+
     switch ($align) {
         case "left":
             $alignmentClasses = "left-0 origin-top-left";
@@ -25,6 +31,9 @@
         case "48":
             $width = "w-48";
             break;
+        case "56":
+            $width = "w-56";
+            break;
         case "full":
             $width = "w-full";
             break;
@@ -46,31 +55,9 @@
         x-transition:leave-end="scale-95 transform opacity-0"
         class="{{ $width }} {{ $alignmentClasses }} absolute z-50 mt-2 rounded-md"
         style="display: none"
-        @click="open = false"
+        @if ($closeOnClick) @click="open = false" @endif
     >
         <div class="{{ $contentClasses }} rounded-md">
-            @if ($search)
-                <div class="p-2">
-                    <input
-                        type="text"
-                        x-ref="search"
-                        x-model="search"
-                        x-on:keydown.window.prevent.enter="open = false"
-                        x-on:keydown.window.prevent.escape="open = false"
-                        x-on:keydown.window.prevent.arrow-up="
-                            open = true
-                            $refs.search.focus()
-                        "
-                        x-on:keydown.window.prevent.arrow-down="
-                            open = true
-                            $refs.search.focus()
-                        "
-                        class="w-full rounded-md border border-gray-200 p-2"
-                        placeholder="Search..."
-                    />
-                </div>
-            @endif
-
             {{ $content }}
         </div>
     </div>

resources/views/components/heroicons/o-funnel.blade.php

@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    {{ $attributes }}
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
+    />
+</svg>

resources/views/components/heroicons/o-plus.blade.php

@@ -0,0 +1,10 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    {{ $attributes }}
+>
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+</svg>

resources/views/components/heroicons/o-tag.blade.php

@@ -0,0 +1,15 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    {{ $attributes }}
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"
+    />
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
+</svg>

resources/views/components/modal.blade.php

@@ -73,7 +73,7 @@ class="fixed inset-0 transform transition-all"
 
     <div
         x-show="show"
-        class="{{ $maxWidth }} mb-6 transform overflow-hidden rounded-lg bg-white shadow-xl transition-all dark:bg-gray-800 sm:mx-auto sm:w-full"
+        class="{{ $maxWidth }} mb-6 transform overflow-visible rounded-lg bg-white shadow-xl transition-all dark:bg-gray-800 sm:mx-auto sm:w-full"
         x-transition:enter="duration-300 ease-out"
         x-transition:enter-start="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
         x-transition:enter-end="translate-y-0 opacity-100 sm:scale-100"