@necrolab/dashboard 0.4.61 → 0.4.208

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

@@ -1,44 +1,37 @@
 <template>
-    <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' : ''" />
+    <div @click="toggleOpened" class="relative dropdown w-full p-2 h-10 text-white ml-auto rounded ring-0">
+        <span class="gap-3 justify-between items-center z-inf">
+            <span style="width: full" :class="`overflow-hidden block ${capitalize ? 'capitalize' : ''}`">{{
+                currentValue ? currentValue : props.default
+            }}</span>
+            <DownIcon :class="`absolute ${props.rightAmount || 'right-4'} top-3.5`" />
         </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>
-                        <CheckmarkIcon v-if="(f || props.default) === currentValue" class="ml-2" />
-                    </button>
-                </div>
-            </transition>
-        </Teleport>
+        <div
+            class="dropdown-content z-inf custom-dropdown-content max-h-40 overflow-y-auto hidden-scrollbars"
+            v-if="opened"
+        >
+            <div class="grid grid-rows-1">
+                <button
+                    v-bind:key="f"
+                    :class="` cursor-pointer text-left w-full ${
+                        i !== 0 ? `border-t ${props.topPadding || 'pt-3 mt-3'}` : ''
+                    } border-light-300`"
+                    v-for="(f, i) in !allowDefault ? props.options : ['', ...props.options]"
+                    @click="chose(f)"
+                >
+                    <span :class="`overflow-hidden smooth-hover ${capitalize ? 'capitalize' : ''}`">{{
+                        f ? f : props.default
+                    }}</span>
+                </button>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup>
-import { ref, computed, watch } from "vue";
-import { DownIcon, CheckmarkIcon } from "@/components/icons";
+import { ref, computed } from "vue";
+import { DownIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
-import { useDropdownPosition } from "@/composables/useDropdownPosition";
-import { useClickOutside } from "@/composables/useClickOutside";
-
 const ui = useUIStore();
 
 const props = defineProps({
@@ -49,197 +42,35 @@ const props = defineProps({
     allowDefault: { type: Boolean },
     rightAmount: { type: String },
     topPadding: { type: String },
-    capitalize: { type: Boolean },
-    includeAdjacentButtons: { type: Boolean, default: false },
-    variant: { type: String, default: "default" }
+    capitalize: { type: Boolean }
 });
 
 const currentValue = ref(props.value);
-const dropdownRef = ref(null);
-
-// Watch for changes to the value prop and update currentValue
-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);
-        updatePosition();
-    }
+    if (opened.value) ui.setCurrentDropdown("");
+    else ui.setCurrentDropdown(id);
 };
 
 const chose = (f) => {
     ui.logger.Info("Dropdown: chosen", f, "hiding...");
     currentValue.value = f;
-    ui.setCurrentDropdown("");
-    if (props.onClick) props.onClick(f);
-    // Ensure dropdown closes
+    opened.value = false;
     setTimeout(() => {
-        ui.setCurrentDropdown("");
+        opened.value = false;
+        ui.logger.Info("Showing dropdown again");
     }, 50);
+    props.onClick(f);
 };
 </script>
 
 <style scoped>
-.dropdown {
-    @apply relative w-full text-white ml-auto rounded-lg ring-0 h-10;
-    background: linear-gradient(135deg, #2a2b30 0%, #2e2f34 100%);
-    border: 1px solid #3d3e44;
-    padding: 0.75rem;
-}
-
-.dropdown.transparent {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    padding: 0 !important;
-    height: 40px !important;
-}
-
-.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 h-full;
-}
-
-.dropdown-value {
-    @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-all duration-300 flex-shrink-0;
-}
-
-.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-portal::-webkit-scrollbar {
-    display: none;
-}
-
-.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-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-xl;
-}
-
-.dropdown-item:last-child {
-    @apply rounded-b-xl;
-}
-
-.dropdown-item-text {
-    @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;
-}
-
-.dropdown-fade-leave-active {
-    @apply transition-all duration-200;
-}
-
-.dropdown-fade-enter-from {
-    @apply opacity-0;
-    transform: translateY(-8px) scale(0.95);
-}
-
-.dropdown-fade-leave-to {
-    @apply opacity-0;
-    transform: translateY(-4px) scale(0.98);
-}
-
-.dropdown-fade-enter-to,
-.dropdown-fade-leave-from {
-    @apply opacity-100;
-    transform: translateY(0) scale(1);
+.custom-dropdown-content {
+    top: 2.5rem !important;
+    @apply border border-light-300;
+    left: -1px !important;
+    width: calc(100% + 2px);
 }
 </style>

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

@@ -1,55 +1,31 @@
 <template>
-    <div @click="toggleOpened" class="dropdown" ref="dropdownRef">
-        <span class="dropdown-display">
-            <span class="dropdown-value" :class="capitalize ? 'capitalize' : ''">
+    <div @click="toggleOpened" class="relative dropdown w-full p-2 h-10 text-white ml-auto rounded ring-0 px-3.5">
+        <span class="gap-3 justify-between items-center z-inf">
+            <span style="width: full" :class="`overflow-hidden block ${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>
+            <DownIcon :class="`absolute ${props.rightAmount || 'right-3'} top-3.5`" />
         </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)">
-                            <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>
-                </div>
-            </transition>
-        </Teleport>
+        <div
+            class="dropdown-content z-inf custom-dropdown-content max-h-40 overflow-y-auto hidden-scrollbars"
+            v-if="opened"
+        >
+            <div class="grid grid-rows-1">
+                <button
+                    v-for="(option, i) in props.options"
+                    :key="option.value"
+                    :class="`cursor-pointer text-left w-full ${
+                        i !== 0 ? `border-t ${props.topPadding || 'pt-3 mt-3'}` : ''
+                    } border-light-300 flex justify-between items-center`"
+                    @click.stop="toggleOption(option.value)"
+                >
+                    <span :class="`overflow-hidden smooth-hover ${capitalize ? 'capitalize' : ''}`">
+                        {{ option.label }}
+                    </span>
+                    <span v-if="selectedOptions.includes(option.value)" class="ml-2 scale-125"><CheckmarkIcon /></span>
+                </button>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -57,8 +33,6 @@
 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();
 
@@ -68,64 +42,23 @@ const props = defineProps({
     options: { type: Array, required: true },
     rightAmount: { type: String },
     topPadding: { type: String },
-    capitalize: { type: Boolean },
-    includeAdjacentButtons: { type: Boolean, default: false }
+    capitalize: { type: Boolean }
 });
 
 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 <= 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`;
-});
-
-// 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);
-    }
-});
-
-useClickOutside(dropdownRef, () => {
-    if (opened.value) {
-        ui.setCurrentDropdown("");
+        return props.default;
     }
+    return selectedOptions.value.join(", ");
 });
 
 const toggleOpened = () => {
-    if (opened.value) {
-        ui.setCurrentDropdown("");
-    } else {
-        ui.setCurrentDropdown(id);
-        updatePosition();
-    }
+    if (opened.value) ui.setCurrentDropdown("");
+    else ui.setCurrentDropdown(id);
 };
 
 const toggleOption = (option) => {
@@ -135,46 +68,13 @@ const toggleOption = (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) {
+    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);
-    }
-
-    // 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([]);
-        }
-    }
-
-    // Recalculate position after clearing
-    updatePosition();
+    else if (option == props.default) selectedOptions.value = [props.default];
+    if (typeof props.onSelect === "function") props.onSelect(selectedOptions.value);
 };
 
 // Initialize with default option if provided
@@ -184,173 +84,10 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 </script>
 
 <style scoped>
-.dropdown {
-    @apply relative w-full h-10 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;
-        padding: 0.625rem;
-    }
-}
-
-.dropdown-display {
-    @apply flex items-center justify-between z-10;
-}
-
-.dropdown-value {
-    @apply w-full overflow-hidden block truncate pr-2 text-sm;
-}
-
-.dropdown-counter {
-    @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] shadow-sm;
-}
-
-.dropdown-arrow {
-    @apply min-w-4 min-h-4 transition-all duration-300;
-}
-
-.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-portal::-webkit-scrollbar {
-    width: 6px;
-}
-
-.dropdown-menu-portal::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.dropdown-menu-portal::-webkit-scrollbar-thumb {
-    background: #4b5563;
-    border-radius: 3px;
-}
-
-.dropdown-menu-portal::-webkit-scrollbar-thumb:hover {
-    background: #6b7280;
-}
-
-.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 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-xl;
-}
-
-.dropdown-item:last-child {
-    @apply rounded-b-xl;
-}
-
-.dropdown-item-text {
-    @apply overflow-hidden;
-}
-
-/* Checkmark styling */
-.dropdown-item svg {
-    @apply w-4 h-4;
-    color: #10b981;
-}
-
-.selected-summary {
-    @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;
-}
-
-.count-badge {
-    @apply bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm;
-}
-
-.count-label {
-    @apply text-xs font-medium text-light-400;
-}
-
-.clear-button {
-    @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 {
-    @apply transition-all duration-300;
-}
-
-.dropdown-fade-leave-active {
-    @apply transition-all duration-200;
-}
-
-.dropdown-fade-enter-from {
-    @apply opacity-0;
-    transform: translateY(-8px) scale(0.95);
-}
-
-.dropdown-fade-leave-to {
-    @apply opacity-0;
-    transform: translateY(-4px) scale(0.98);
-}
-
-.dropdown-fade-enter-to,
-.dropdown-fade-leave-from {
-    @apply opacity-100;
-    transform: translateY(0) scale(1);
+.custom-dropdown-content {
+    top: 2.5rem !important;
+    @apply border border-light-300 px-3.5;
+    left: -1px !important;
+    width: calc(100% + 2px);
 }
 </style>