@necrolab/dashboard 0.4.48 → 0.4.49

package/src/components/ui/controls/atomic/Dropdown.vue

@@ -1,164 +1,250 @@
 <template>
-    <div @click="toggleOpened" class="dropdown">
-        <span class="dropdown-display">
-            <span class="dropdown-value" :class="capitalize ? 'capitalize' : ''">
-                {{ currentValue ? currentValue : props.default }}
+  <div @click="toggleOpened" class="dropdown" :class="props.variant" ref="dropdownRef">
+    <span class="dropdown-display">
+      <span class="dropdown-value" :class="capitalize ? 'capitalize' : ''">
+        {{ currentValue ? currentValue : props.default }}
+      </span>
+      <DownIcon class="dropdown-arrow" :class="opened ? 'rotate-180' : ''" />
+    </span>
+    <Teleport to="body">
+      <transition name="dropdown-fade">
+        <div
+          v-if="opened"
+          class="dropdown-menu-portal scrollable"
+          :style="menuStyle"
+          @click.stop
+          @wheel.stop
+          @touchmove.stop
+        >
+          <button
+            v-bind:key="f"
+            class="dropdown-item"
+            :class="i !== 0 ? 'border-t border-dark-650' : ''"
+            v-for="(f, i) in !allowDefault ? props.options : ['', ...props.options]"
+            @click.stop="chose(f)"
+          >
+            <span class="dropdown-item-text" :class="capitalize ? 'capitalize' : ''">
+              {{ f ? f : props.default }}
             </span>
-            <DownIcon class="dropdown-arrow" :class="opened ? 'rotate-180' : ''" />
-        </span>
-        <transition name="dropdown-fade">
-            <div
-                class="dropdown-menu scrollable"
-                v-if="opened"
-                @click.stop
-                @wheel.stop
-                @touchmove.stop
-            >
-                <button
-                    v-bind:key="f"
-                    class="dropdown-item"
-                    :class="i !== 0 ? 'border-t border-dark-650' : ''"
-                    v-for="(f, i) in !allowDefault ? props.options : ['', ...props.options]"
-                    @click.stop="chose(f)"
-                >
-                    <span class="dropdown-item-text" :class="capitalize ? 'capitalize' : ''">
-                        {{f ? f : props.default}}
-                    </span>
-                    <CheckmarkIcon v-if="(f || props.default) === currentValue" class="ml-2" />
-                </button>
-            </div>
-        </transition>
-    </div>
+            <CheckmarkIcon v-if="(f || props.default) === currentValue" class="ml-2" />
+          </button>
+        </div>
+      </transition>
+    </Teleport>
+  </div>
 </template>
 
 <script setup>
 import { ref, computed, watch } from "vue";
 import { DownIcon, CheckmarkIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
+import { useDropdownPosition } from "@/composables/useDropdownPosition";
+import { useClickOutside } from "@/composables/useClickOutside";
+
 const ui = useUIStore();
 
 const props = defineProps({
-    onClick: { type: Function },
-    default: { type: String },
-    value: { type: String },
-    options: { type: Object },
-    allowDefault: { type: Boolean },
-    rightAmount: { type: String },
-    topPadding: { type: String },
-    capitalize: { type: Boolean }
+  onClick: { type: Function },
+  default: { type: String },
+  value: { type: String },
+  options: { type: Object },
+  allowDefault: { type: Boolean },
+  rightAmount: { type: String },
+  topPadding: { type: String },
+  capitalize: { type: Boolean },
+  includeAdjacentButtons: { type: Boolean, default: false },
+  variant: { type: String, default: 'default' }
 });
 
 const currentValue = ref(props.value);
+const dropdownRef = ref(null);
 
 // Watch for changes to the value prop and update currentValue
-watch(() => props.value, (newValue) => {
+watch(
+  () => props.value,
+  (newValue) => {
     currentValue.value = newValue;
-});
+  }
+);
+
 const id = Math.random();
 const opened = computed(() => ui.currentDropdown === id);
 
+// Use composables for positioning and click outside
+const { menuStyle, updatePosition } = useDropdownPosition(dropdownRef, {
+  maxHeight: 200,
+  includeAdjacentButtons: props.includeAdjacentButtons,
+  estimateHeight: () => {
+    const optionsCount = !props.allowDefault
+      ? props.options?.length || 0
+      : (props.options?.length || 0) + 1;
+    return Math.min(optionsCount * 44, 200);
+  },
+});
+
+useClickOutside(dropdownRef, () => {
+  if (opened.value) {
+    ui.setCurrentDropdown("");
+  }
+});
+
 const toggleOpened = () => {
-    if (opened.value) ui.setCurrentDropdown("");
-    else ui.setCurrentDropdown(id);
+  if (opened.value) {
+    ui.setCurrentDropdown("");
+  } else {
+    ui.setCurrentDropdown(id);
+    updatePosition();
+  }
 };
 
 const chose = (f) => {
-    ui.logger.Info("Dropdown: chosen", f, "hiding...");
-    currentValue.value = f;
+  ui.logger.Info("Dropdown: chosen", f, "hiding...");
+  currentValue.value = f;
+  ui.setCurrentDropdown("");
+  if (props.onClick) props.onClick(f);
+  // Ensure dropdown closes
+  setTimeout(() => {
     ui.setCurrentDropdown("");
-    if (props.onClick) props.onClick(f);
-    // Ensure dropdown closes
-    setTimeout(() => {
-        ui.setCurrentDropdown("");
-    }, 50);
+  }, 50);
 };
-
 </script>
 
 <style scoped>
 .dropdown {
-    @apply relative w-full p-2 h-12 text-white ml-auto rounded-lg ring-0;
+  @apply relative w-full text-white ml-auto rounded-lg ring-0;
+  background: linear-gradient(135deg, #2a2b30 0%, #2e2f34 100%);
+  border: 1px solid #3d3e44;
+  padding: 0.75rem;
+  height: 3.45em;
+}
+
+.dropdown.transparent {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  height: 40px !important;
 }
 
-@media (max-width: 810px) {
-    .dropdown {
-        @apply h-10;
-    }
+.dropdown.transparent:hover,
+.dropdown.transparent:focus-within {
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.dropdown:not(.transparent):hover {
+  @apply border-dark-400;
+}
+
+.dropdown:not(.transparent):focus-within {
+  @apply border-blue-500;
+}
+
+@media (min-width: 768px) {
+  .dropdown {
+    height: 40px;
+    padding: 0.625rem;
+  }
 }
 
 .dropdown-display {
-    @apply flex items-center justify-between z-10 w-full;
+  @apply flex items-center justify-between z-10 w-full h-full;
 }
 
 .dropdown-value {
-    @apply overflow-hidden truncate min-w-0 flex-1 mr-2;
+  @apply overflow-hidden truncate min-w-0 flex-1 mr-2 text-sm;
+}
+
+@media (min-width: 768px) {
+  .dropdown-value {
+    font-size: 12px;
+  }
 }
 
 .dropdown-arrow {
-    @apply w-4 h-4 transition-transform duration-200 flex-shrink-0;
+  @apply w-4 h-4 transition-all duration-300 flex-shrink-0;
 }
 
-.dropdown-menu {
-    @apply absolute border border-dark-650 rounded-lg shadow-lg max-h-40 overflow-y-auto;
-    top: 2.5rem;
-    left: -1px;
-    width: calc(100% + 2px);
-    z-index: 10000;
-    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
-    background-color: #2e2f34;
-    overscroll-behavior: contain !important;
-    touch-action: pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
-    scrollbar-width: thin; /* Firefox - show thin scrollbar for testing */
-    scrollbar-color: #555 #2e2f34; /* Firefox scrollbar colors */
+.dropdown-menu-portal {
+  @apply rounded-xl shadow-2xl overflow-hidden;
+  background: linear-gradient(135deg, #2a2b30 0%, #2e2f34 100%);
+  border: 1px solid #3d3e44;
+  backdrop-filter: blur(12px);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+  overflow-y: auto !important;
+  overscroll-behavior: contain !important;
+  touch-action: pan-y !important;
+  -webkit-overflow-scrolling: touch !important;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
-.dropdown-menu::-webkit-scrollbar {
-    width: 8px; /* Chrome, Safari, Edge - show scrollbar for testing */
+.dropdown-menu-portal::-webkit-scrollbar {
+  display: none;
 }
 
-.dropdown-menu::-webkit-scrollbar-track {
-    background: #2e2f34;
+.dropdown-item {
+  @apply cursor-pointer text-left w-full text-white transition-all duration-200 flex items-center justify-between;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-bottom: 1px solid rgba(61, 62, 68, 0.3);
 }
 
-.dropdown-menu::-webkit-scrollbar-thumb {
-    background: #555;
-    border-radius: 4px;
+.dropdown-item:last-child {
+  border-bottom: none;
 }
 
-.dropdown-menu::-webkit-scrollbar-thumb:hover {
-    background: #777;
+.dropdown-item:hover {
+  @apply bg-dark-600;
+  color: #ffffff;
 }
 
-.dropdown-item {
-    @apply cursor-pointer text-left w-full py-2 px-3 text-white hover:bg-dark-400 transition-all duration-150 flex items-center justify-between;
+.dropdown-item:active {
+  @apply bg-dark-650;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
 }
 
 .dropdown-item:first-child {
-    @apply rounded-t-lg;
+  @apply rounded-t-xl;
 }
 
 .dropdown-item:last-child {
-    @apply rounded-b-lg;
+  @apply rounded-b-xl;
 }
 
 .dropdown-item-text {
-    @apply overflow-hidden truncate pr-2;
+  @apply overflow-hidden truncate pr-2;
+}
+
+.dropdown-item svg {
+  @apply w-4 h-4;
+  color: #10b981;
+}
+
+.dropdown-fade-enter-active {
+  @apply transition-all duration-300;
 }
 
-/* Transition animations */
-.dropdown-fade-enter-active,
 .dropdown-fade-leave-active {
-    @apply transition-all duration-200;
+  @apply transition-all duration-200;
+}
+
+.dropdown-fade-enter-from {
+  @apply opacity-0;
+  transform: translateY(-8px) scale(0.95);
 }
 
-.dropdown-fade-enter-from,
 .dropdown-fade-leave-to {
-    @apply opacity-0 transform scale-95 -translate-y-1;
+  @apply opacity-0;
+  transform: translateY(-4px) scale(0.98);
 }
 
 .dropdown-fade-enter-to,
 .dropdown-fade-leave-from {
-    @apply opacity-100 transform scale-100 translate-y-0;
+  @apply opacity-100;
+  transform: translateY(0) scale(1);
 }
-</style>
+</style>