Initial commit

resources/js/pages/apps/components/SuggestionsDropdown.vue

@@ -0,0 +1,113 @@
+<script setup>
+const props = defineProps({
+  suggestions: Array,
+  selectedIndex: Number,
+  activeModelColor: String,
+});
+const emit = defineEmits(["select", "hover"]);
+</script>
+
+<template>
+  <div class="suggestions-dropdown rounded pa-2">
+    <div class="suggestions-header text-caption text-grey-darken-1 mb-1 px-2">
+      Suggestions
+    </div>
+    <div
+      v-for="(suggestion, index) in suggestions"
+      :key="index"
+      class="suggestion-item pa-2 rounded d-flex align-center"
+      :class="{ 'suggestion-selected': selectedIndex === index }"
+      @click="emit('select', suggestion)"
+      @mouseenter="emit('hover', index)"
+    >
+      <VIcon icon="tabler-search" size="16" class="me-2 text-grey-darken-1" />
+      <span class="suggestion-text">{{ suggestion }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.suggestions-dropdown {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 4px 16px rgba(var(--v-theme-on-surface), 0.15);
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
+  z-index: 15;
+  margin-bottom: 8px;
+  max-height: 240px;
+  overflow-y: auto;
+  animation: suggestions-fade-in 0.2s ease-out;
+}
+
+.suggestions-header {
+  font-weight: 500;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.suggestion-item {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 2px;
+  border: 1px solid transparent;
+}
+
+.suggestion-item:hover,
+.suggestion-item.suggestion-selected {
+  background: rgba(var(--v-theme-primary), 0.08);
+  border-color: rgba(var(--v-theme-primary), 0.2);
+  transform: translateX(2px);
+}
+
+.suggestion-text {
+  font-size: 0.875rem;
+  color: rgb(var(--v-theme-on-surface));
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@keyframes suggestions-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 600px) {
+  .suggestions-dropdown {
+    max-height: 200px;
+  }
+
+  .suggestion-text {
+    font-size: 0.8rem;
+  }
+}
+
+.suggestions-dropdown::-webkit-scrollbar {
+  width: 4px;
+}
+
+.suggestions-dropdown::-webkit-scrollbar-track {
+  background: rgba(var(--v-theme-on-surface), 0.05);
+  border-radius: 2px;
+}
+
+.suggestions-dropdown::-webkit-scrollbar-thumb {
+  background: rgba(var(--v-theme-on-surface), 0.2);
+  border-radius: 2px;
+}
+
+.suggestions-dropdown::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--v-theme-on-surface), 0.3);
+}
+</style>