live search developmet for app pages

public/css/app.css

@@ -47449,6 +47449,10 @@ body{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.hover\:rounded-lg:hover{
+  border-radius: 0.5rem;
+}
+
 .hover\:bg-gray-100:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));

resources/assets/js/views/modules/apps.js

@@ -29,6 +29,10 @@ const app = new Vue({
         AkauntingSlider
     },
 
+    created() {
+        document.addEventListener('click', this.closeIfClickedOutside);
+    },
+
     mounted() {
         if (typeof app_slug !== 'undefined') {
             this.onReleases(1);
@@ -84,6 +88,9 @@ const app = new Vue({
 
             addToCartLoading: false,
             loadMoreLoading: false,
+            live_search_modal: false,
+            live_search_data: [],
+            route_url: url
         }
     },
 
@@ -288,5 +295,32 @@ const app = new Vue({
                 this.loadMoreLoading = false;
             });
         },
+
+        closeIfClickedOutside(event) {
+            let el = this.$refs.liveSearchModal;
+            let target = event.target;
+
+            if (el !== target && target.contains(el)) {
+                this.live_search_modal = false;
+            }
+        },
+
+        onLiveSearch(event) {
+            let target_length = event.target.value.length;
+
+            if (target_length > 2) {
+                window.axios.get(url + '/apps/paid')
+                .then(response => {
+                    this.live_search_data = response.data.data.data;
+                    this.live_search_modal = true;
+                })
+                .catch(error => {
+                    this.live_search_modal = false;
+                    console.log(error);
+                })
+            } else if (target_length == 0) {
+                this.live_search_modal = false;
+            }
+        }
     }
 });

resources/views/components/layouts/modules/bar.blade.php

@@ -73,6 +73,7 @@
                         value="{{ isset($keyword) ? $keyword : '' }}"
                         placeholder="{{ trans('general.search_placeholder') }}"
                         autocomplete="off"
+                        v-on:keyup="onLiveSearch($event)"
                     />
                 </div>
             </form>
@@ -104,4 +105,22 @@
             </x-link>
         </div>
     </div>
-</div>
+
+    <div ref="liveSearchModal" v-if="live_search_modal" class="absolute w-full bg-white rounded-xl shadow-md p-4 top-20 z-10">
+        <ul class="grid sm:grid-cols-6 gap-8">
+            <li v-for="(item, index) in live_search_data" :key="index" class="sm:col-span-3 p-3 rounded-lg hover:bg-gray-100">
+                <a :href="route_url + '/apps/' + item.slug" class="flex items-center space-x-4">
+                    <img v-for="(file, indis) in item.files"
+                        :src="file.path_string"
+                        :alt="item.name"
+                        class="w-12 h-12 rounded-lg object-cover"
+                    />
+                    <div>
+                        <h6 class="font-bold" v-html="item.name"></h6>
+                        <span class="text-sm text-gray-500 line-clamp-3" v-html="item.description"></span>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>