@necrolab/dashboard 0.4.47 → 0.4.49

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

@@ -1,283 +1,362 @@
 <template>
-    <div @click="toggleOpened" class="dropdown">
-        <span class="dropdown-display">
-            <span class="dropdown-value" :class="capitalize ? 'capitalize' : ''">
-                {{ displayValue }}
-            </span>
-            <div class="dropdown-counter">
-                <span v-if="selectedOptions.length > 1" class="counter-badge">
-                    {{ selectedOptions.length }}
-                </span>
-                <DownIcon class="dropdown-arrow" :class="opened ? 'rotate-180' : ''" />
-            </div>
+  <div @click="toggleOpened" class="dropdown" ref="dropdownRef">
+    <span class="dropdown-display">
+      <span class="dropdown-value" :class="capitalize ? 'capitalize' : ''">
+        {{ displayValue }}
+      </span>
+      <div class="dropdown-counter">
+        <span v-if="selectedOptions.length > 1" class="counter-badge">
+          {{ selectedOptions.length }}
         </span>
-        <transition name="dropdown-fade">
-            <div
-                class="dropdown-menu multi scrollable"
-                v-if="opened"
-                :style="{ maxHeight: selectedOptions.length > 0 ? '240px' : '160px' }"
-                @click.stop
-                @wheel.stop
-                @touchmove.stop
+        <DownIcon class="dropdown-arrow" :class="opened ? 'rotate-180' : ''" />
+      </div>
+    </span>
+    <Teleport to="body">
+      <transition name="dropdown-fade">
+        <div
+          v-if="opened"
+          class="dropdown-menu-portal multi scrollable"
+          :style="menuStyle"
+          @click.stop
+          @wheel.stop
+          @touchmove.stop
+        >
+          <div class="option-list scrollable">
+            <button
+              v-for="(option, i) in props.options"
+              :key="option.value"
+              class="dropdown-item"
+              :class="i !== 0 ? 'border-t border-dark-650' : ''"
+              @click.stop="toggleOption(option.value)"
             >
-                <div class="option-list scrollable">
-                    <button
-                        v-for="(option, i) in props.options"
-                        :key="option.value"
-                        class="dropdown-item"
-                        :class="i !== 0 ? 'border-t border-light-300' : ''"
-                        @click.stop="toggleOption(option.value)"
-                    >
-                        <span class="dropdown-item-text" :class="capitalize ? 'capitalize' : ''">
-                            {{ option.label }}
-                        </span>
-                        <CheckmarkIcon v-if="selectedOptions.includes(option.value)" class="ml-2" />
-                    </button>
-                </div>
-
-                <div v-if="selectedOptions.length > 0" class="selected-summary">
-                    <div class="flex items-center justify-between">
-                        <div class="selected-count">
-                            <span class="count-badge">
-                                {{ selectedOptions.length }}
-                            </span>
-                            <span class="count-label">
-                                item{{ selectedOptions.length === 1 ? "" : "s" }} selected
-                            </span>
-                        </div>
-                        <button class="clear-button" @click.stop="clearAll">Clear All</button>
-                    </div>
-                </div>
+              <span class="dropdown-item-text" :class="capitalize ? 'capitalize' : ''">
+                {{ option.label }}
+              </span>
+              <CheckmarkIcon v-if="selectedOptions.includes(option.value)" class="ml-2" />
+            </button>
+          </div>
+
+          <div v-if="selectedOptions.length > 0" class="selected-summary">
+            <div class="flex items-center justify-between">
+              <div class="selected-count">
+                <span class="count-badge">
+                  {{ selectedOptions.length }}
+                </span>
+                <span class="count-label">
+                  item{{ selectedOptions.length === 1 ? "" : "s" }} selected
+                </span>
+              </div>
+              <button class="clear-button" @click.stop="clearAll">Clear All</button>
             </div>
-        </transition>
-    </div>
+          </div>
+        </div>
+      </transition>
+    </Teleport>
+  </div>
 </template>
 
 <script setup>
 import { ref, computed } 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({
-    onSelect: { type: Function },
-    default: { type: String },
-    options: { type: Array, required: true },
-    rightAmount: { type: String },
-    topPadding: { type: String },
-    capitalize: { type: Boolean }
+  onSelect: { type: Function },
+  default: { type: String },
+  options: { type: Array, required: true },
+  rightAmount: { type: String },
+  topPadding: { type: String },
+  capitalize: { type: Boolean },
+  includeAdjacentButtons: { type: Boolean, default: false },
 });
 
 const selectedOptions = ref([]);
+const dropdownRef = ref(null);
 const id = Math.random();
 const opened = computed(() => ui.currentDropdown === id);
 
 const displayValue = computed(() => {
-    if (selectedOptions.value.length === 0) {
-        return props.default || "Select options...";
-    }
-
-    if (selectedOptions.value.length === 1) {
-        const option = props.options.find((opt) => opt.value === selectedOptions.value[0]);
-        return option ? option.label : selectedOptions.value[0];
-    }
+  if (selectedOptions.value.length === 0) {
+    return props.default || "Select options...";
+  }
+
+  if (selectedOptions.value.length === 1) {
+    const option = props.options.find((opt) => opt.value === selectedOptions.value[0]);
+    return option ? option.label : selectedOptions.value[0];
+  }
+
+  if (selectedOptions.value.length <= 2) {
+    const labels = selectedOptions.value.map((val) => {
+      const option = props.options.find((opt) => opt.value === val);
+      return option ? option.label : val;
+    });
+    return labels.join(", ");
+  }
 
-    if (selectedOptions.value.length <= 2) {
-        const labels = selectedOptions.value.map((val) => {
-            const option = props.options.find((opt) => opt.value === val);
-            return option ? option.label : val;
-        });
-        return labels.join(", ");
-    }
+  const firstOption = props.options.find((opt) => opt.value === selectedOptions.value[0]);
+  const firstName = firstOption ? firstOption.label : selectedOptions.value[0];
+  return `${firstName} +${selectedOptions.value.length - 1} more`;
+});
 
-    const firstOption = props.options.find((opt) => opt.value === selectedOptions.value[0]);
-    const firstName = firstOption ? firstOption.label : selectedOptions.value[0];
-    return `${firstName} +${selectedOptions.value.length - 1} more`;
+// Use composables for positioning and click outside
+const { menuStyle, updatePosition } = useDropdownPosition(dropdownRef, {
+  maxHeight: 280,
+  includeAdjacentButtons: props.includeAdjacentButtons,
+  estimateHeight: () => {
+    const optionsCount = props.options?.length || 0;
+    const summaryHeight = selectedOptions.value.length > 0 ? 70 : 0;
+    const baseMaxHeight = selectedOptions.value.length > 0 ? 280 : 200;
+    const optionListHeight = Math.min(optionsCount * 44, 200);
+    return Math.min(optionListHeight + summaryHeight, baseMaxHeight);
+  },
 });
 
-const getSelectedLabels = () => {
-    return selectedOptions.value.map((val) => {
-        const option = props.options.find((opt) => opt.value === val);
-        return option ? option.label : val;
-    });
-};
+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 toggleOption = (option) => {
-    const index = selectedOptions.value.indexOf(option);
-    if (index === -1) {
-        selectedOptions.value.push(option);
-    } else {
-        selectedOptions.value.splice(index, 1);
-    }
-
-    // Handle default logic
-    if (selectedOptions.value.length === 0 && props.default) {
-        selectedOptions.value = [props.default];
-    }
-    if (selectedOptions.value.length > 1 && selectedOptions.value.includes(props.default) && option !== props.default) {
-        selectedOptions.value = selectedOptions.value.filter((e) => e !== props.default);
-    } else if (option === props.default) {
-        selectedOptions.value = [props.default];
-    }
+  const index = selectedOptions.value.indexOf(option);
+  if (index === -1) {
+    selectedOptions.value.push(option);
+  } else {
+    selectedOptions.value.splice(index, 1);
+  }
+
+  // Handle default logic
+  if (selectedOptions.value.length === 0 && props.default) {
+    selectedOptions.value = [props.default];
+  }
+  if (
+    selectedOptions.value.length > 1 &&
+    selectedOptions.value.includes(props.default) &&
+    option !== props.default
+  ) {
+    selectedOptions.value = selectedOptions.value.filter((e) => e !== props.default);
+  } else if (option === props.default) {
+    selectedOptions.value = [props.default];
+  }
 
-    if (typeof props.onSelect === "function") {
-        props.onSelect(selectedOptions.value);
-    }
+  if (typeof props.onSelect === "function") {
+    props.onSelect(selectedOptions.value);
+  }
 
-    // Don't close dropdown when selecting options
+  // Recalculate position after selection changes
+  updatePosition();
 };
 
 const clearAll = () => {
-    // Default to first option instead of empty
-    if (props.options && props.options.length > 0) {
-        selectedOptions.value = [props.options[0].value];
-        if (typeof props.onSelect === "function") {
-            props.onSelect([props.options[0].value]);
-        }
-    } else if (props.default) {
-        selectedOptions.value = [props.default];
-        if (typeof props.onSelect === "function") {
-            props.onSelect([props.default]);
-        }
-    } else {
-        selectedOptions.value = [];
-        if (typeof props.onSelect === "function") {
-            props.onSelect([]);
-        }
+  // Default to first option instead of empty
+  if (props.options && props.options.length > 0) {
+    selectedOptions.value = [props.options[0].value];
+    if (typeof props.onSelect === "function") {
+      props.onSelect([props.options[0].value]);
+    }
+  } else if (props.default) {
+    selectedOptions.value = [props.default];
+    if (typeof props.onSelect === "function") {
+      props.onSelect([props.default]);
     }
+  } else {
+    selectedOptions.value = [];
+    if (typeof props.onSelect === "function") {
+      props.onSelect([]);
+    }
+  }
+
+  // Recalculate position after clearing
+  updatePosition();
 };
 
 // Initialize with default option if provided
 if (props.default && !selectedOptions.value.includes(props.default)) {
-    selectedOptions.value = [props.default];
+  selectedOptions.value = [props.default];
 }
 </script>
 
 <style scoped>
 .dropdown {
-    @apply relative w-full p-2 h-12 text-white ml-auto rounded-lg ring-0;
+  @apply relative w-full h-12 text-white ml-auto rounded-lg ring-0;
+  background: linear-gradient(135deg, #2a2b30 0%, #2e2f34 100%);
+  border: 1px solid #3d3e44;
+  padding: 0.75rem;
+}
+
+.dropdown:hover {
+  @apply border-dark-400;
+}
+
+.dropdown:focus-within {
+  @apply border-blue-500;
 }
 
 @media (max-width: 810px) {
-    .dropdown {
-        @apply h-10;
-    }
+  .dropdown {
+    @apply h-10;
+    padding: 0.625rem;
+  }
 }
 
 .dropdown-display {
-    @apply flex items-center justify-between z-10;
+  @apply flex items-center justify-between z-10;
 }
 
 .dropdown-value {
-    @apply w-full overflow-hidden block truncate pr-2;
+  @apply w-full overflow-hidden block truncate pr-2 text-sm;
 }
 
 .dropdown-counter {
-    @apply flex items-center gap-2 absolute right-2;
+  @apply flex items-center gap-2 absolute right-2;
 }
 
 .counter-badge {
-    @apply bg-green-500 text-white text-xs font-semibold px-1.5 py-0.5 rounded-full text-center min-w-[18px];
+  @apply bg-green-500 text-white text-xs font-semibold px-1.5 py-0.5 rounded-full text-center min-w-[18px] shadow-sm;
 }
 
 .dropdown-arrow {
-    @apply min-w-4 min-h-4 transition-transform duration-200;
+  @apply min-w-4 min-h-4 transition-all duration-300;
 }
 
-.dropdown-menu {
-    @apply absolute border border-light-300 rounded-lg shadow-lg 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);
+  overscroll-behavior: contain !important;
+  touch-action: pan-y !important;
+  -webkit-overflow-scrolling: touch !important;
+  scrollbar-width: thin;
+  scrollbar-color: #4b5563 transparent;
 }
 
-.dropdown-menu::-webkit-scrollbar {
-    width: 8px; /* Chrome, Safari, Edge - show scrollbar for testing */
+.dropdown-menu-portal::-webkit-scrollbar {
+  width: 6px;
 }
 
-.dropdown-menu::-webkit-scrollbar-track {
-    background: #2e2f34;
+.dropdown-menu-portal::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-.dropdown-menu::-webkit-scrollbar-thumb {
-    background: #555;
-    border-radius: 4px;
+.dropdown-menu-portal::-webkit-scrollbar-thumb {
+  background: #4b5563;
+  border-radius: 3px;
 }
 
-.dropdown-menu::-webkit-scrollbar-thumb:hover {
-    background: #777;
+.dropdown-menu-portal::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
 }
 
-.dropdown-menu.multi .option-list {
-    @apply max-h-40 overflow-y-auto;
-    overscroll-behavior: contain !important;
-    touch-action: pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
+.dropdown-menu-portal.multi .option-list {
+  @apply max-h-48 overflow-y-auto;
+  overscroll-behavior: contain !important;
+  touch-action: pan-y !important;
+  -webkit-overflow-scrolling: touch !important;
 }
 
 .dropdown-item {
-    @apply cursor-pointer text-left w-full py-2 px-3 text-white hover:bg-dark-400 transition-all duration-150 flex justify-between items-center;
+  @apply cursor-pointer text-left w-full text-white transition-all duration-200 flex justify-between items-center;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-bottom: 1px solid rgba(61, 62, 68, 0.3);
+}
+
+.dropdown-item:last-child {
+  border-bottom: none;
+}
+
+.dropdown-item:hover {
+  @apply bg-dark-600;
+  color: #ffffff;
+}
+
+.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;
+  @apply overflow-hidden;
+}
+
+/* Checkmark styling */
+.dropdown-item svg {
+  @apply w-4 h-4;
+  color: #10b981;
 }
 
 .selected-summary {
-    @apply border-t border-light-300 bg-dark-600 w-full px-4 py-3;
+  @apply border-t bg-dark-550 w-full px-4 py-3;
+  border-top: 1px solid rgba(61, 62, 68, 0.5);
 }
 
 .selected-count {
-    @apply flex items-center gap-2;
+  @apply flex items-center gap-2;
 }
 
 .count-badge {
-    @apply bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded-full;
+  @apply bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm;
 }
 
 .count-label {
-    @apply text-xs text-light-400 font-medium;
+  @apply text-xs font-medium text-light-400;
 }
 
 .clear-button {
-    @apply text-xs bg-dark-500 hover:bg-dark-400 text-white transition-all duration-150 font-medium px-2 py-1 rounded border border-light-300 hover:border-light-400;
+  @apply text-xs bg-red-500 text-white transition-colors duration-200 font-medium px-3 py-1.5 rounded-lg shadow-sm;
+}
+
+.clear-button:hover {
+  @apply bg-red-400;
 }
 
 /* Transition animations */
-.dropdown-fade-enter-active,
+.dropdown-fade-enter-active {
+  @apply transition-all duration-300;
+}
+
 .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>

package/src/composables/useClickOutside.js

@@ -0,0 +1,21 @@
+import { onMounted, onUnmounted } from "vue";
+
+export function useClickOutside(elementRef, callback) {
+    const handleClickOutside = (event) => {
+        if (elementRef.value && !elementRef.value.contains(event.target)) {
+            callback();
+        }
+    };
+
+    onMounted(() => {
+        document.addEventListener("click", handleClickOutside);
+    });
+
+    onUnmounted(() => {
+        document.removeEventListener("click", handleClickOutside);
+    });
+
+    return {
+        handleClickOutside
+    };
+}