@necrolab/dashboard 0.5.15 → 0.5.17

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

@@ -1,5 +1,16 @@
 <template>
-    <div @click="toggleOpened" class="dropdown" :class="[props.variant, { 'opened': opened }]" ref="dropdownRef">
+    <div
+        @click="toggleOpened"
+        class="dropdown"
+        :class="[props.variant, { 'opened': opened }]"
+        ref="dropdownRef"
+        role="combobox"
+        :aria-expanded="opened"
+        :aria-label="props.default"
+        tabindex="0"
+        @keydown.enter="toggleOpened"
+        @keydown.space.prevent="toggleOpened"
+        @keydown.escape="opened && ui.setCurrentDropdown('')">
         <span class="dropdown-display">
             <span class="dropdown-value" :class="capitalize ? 'capitalize' : ''">
                 {{ currentValue ? currentValue : props.default }}
@@ -12,6 +23,7 @@
                     v-if="opened"
                     class="dropdown-menu-portal scrollable"
                     :style="menuStyle"
+                    role="listbox"
                     @click.stop
                     @wheel.stop>
                     <button
@@ -19,11 +31,13 @@
                         class="dropdown-item"
                         :class="i !== 0 ? 'border-t border-dark-650' : ''"
                         v-for="(f, i) in !allowDefault ? props.options : ['', ...props.options]"
-                        @click.prevent.stop="chose(f)">
-                        <CheckmarkIcon v-if="(f || props.default) === currentValue" class="mr-2 flex-shrink-0" />
+                        role="option"
+                        :aria-selected="(f || props.default) === currentValue"
+                        @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>
@@ -40,16 +54,47 @@ import { useDropdownPosition } from "@/composables/useDropdownPosition";
 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 },
-    includeAdjacentButtons: { type: Boolean, default: false },
-    variant: { type: String, default: "default" }
+    onClick: {
+        type: Function,
+        default: null
+    },
+    default: {
+        type: String,
+        default: ''
+    },
+    value: {
+        type: String,
+        default: ''
+    },
+    options: {
+        type: Object,
+        required: true
+    },
+    allowDefault: {
+        type: Boolean,
+        default: false
+    },
+    rightAmount: {
+        type: String,
+        default: ''
+    },
+    topPadding: {
+        type: String,
+        default: ''
+    },
+    capitalize: {
+        type: Boolean,
+        default: false
+    },
+    includeAdjacentButtons: {
+        type: Boolean,
+        default: false
+    },
+    variant: {
+        type: String,
+        default: 'default',
+        validator: (value) => ['default', 'transparent'].includes(value)
+    }
 });
 
 const currentValue = ref(props.value);
@@ -66,11 +111,11 @@ const id = Math.random();
 const opened = computed(() => ui.currentDropdown === id);
 
 const { menuStyle, updatePosition } = useDropdownPosition(dropdownRef, {
-    maxHeight: Math.floor(window.innerHeight * 0.85), // 85% of viewport
+    maxHeight: 200,
     includeAdjacentButtons: props.includeAdjacentButtons,
     estimateHeight: () => {
         const optionsCount = !props.allowDefault ? props.options?.length || 0 : (props.options?.length || 0) + 1;
-        return Math.min(optionsCount * 44, Math.floor(window.innerHeight * 0.85));
+        return Math.min(optionsCount * 44, 200);
     }
 });
 
@@ -102,39 +147,6 @@ const toggleOpened = () => {
     } else {
         ui.setCurrentDropdown(id);
         updatePosition();
-        // Set all items to same width only if horizontal scrolling is needed
-        setTimeout(() => {
-            const portal = document.querySelector('.dropdown-menu-portal');
-            const items = portal?.querySelectorAll('.dropdown-item');
-            if (items && items.length > 0) {
-                let maxWidth = 0;
-                // Reset styles first to get accurate measurements
-                items.forEach(item => {
-                    item.style.width = '';
-                    item.style.minWidth = '';
-                });
-                portal.style.overflowX = '';
-
-                // Measure actual content width
-                items.forEach(item => {
-                    const contentWidth = item.scrollWidth;
-                    maxWidth = Math.max(maxWidth, contentWidth);
-                });
-
-                // Only enable horizontal scrolling if content is truly wider than the max allowed width
-                const maxAllowedWidth = Math.min(400, window.innerWidth * 0.9);
-                if (maxWidth > maxAllowedWidth) {
-                    // Enable horizontal scrolling for long items
-                    portal.style.overflowX = 'auto';
-                    items.forEach(item => {
-                        item.style.minWidth = maxWidth + 'px';
-                    });
-                } else {
-                    // Normal display - no horizontal scrolling needed
-                    portal.style.overflowX = 'hidden';
-                }
-            }
-        }, 50);
     }
 };
 
@@ -151,34 +163,41 @@ const chose = (f) => {
 
 <style scoped>
 .dropdown {
-    @apply relative w-full text-white ml-auto rounded-lg ring-0 h-10 bg-dark-300 border border-dark-600;
-    padding: 0.75rem;
+    @apply relative w-full text-white ml-auto rounded-lg ring-0 h-10 border-2 bg-bg-input border-border p-3;
 }
 
 .dropdown.transparent {
-    @apply bg-transparent border-0 shadow-none p-0 h-10;
+    @apply !bg-transparent !border-none !shadow-none !p-0 !h-10;
 }
 
 .dropdown.transparent:hover,
 .dropdown.transparent:focus-within,
 .dropdown.transparent.opened {
-    @apply border-0 bg-transparent shadow-none outline-none;
+    @apply !border-none !bg-transparent !shadow-none !outline-none;
+}
+
+.unified-search-group .dropdown:hover {
+    @apply !border-transparent;
 }
 
-.dropdown:not(.transparent):hover {
-    border-color: oklch(0.30 0 0);
+.dropdown:not(.transparent):not(.unified-search-group .dropdown):hover {
+    @apply border-dark-700;
 }
 
-.dropdown:not(.transparent):focus-within,
-.dropdown:not(.transparent).opened {
-    @apply border-border-focus outline outline-1 outline-border-focus;
-    outline-offset: 0;
+.unified-search-group .dropdown:focus-within,
+.unified-search-group .dropdown.opened {
+    @apply !border-0 !outline-0 !border-transparent;
+}
+
+.dropdown:not(.transparent):not(.unified-search-group .dropdown):focus-within,
+.dropdown:not(.transparent):not(.unified-search-group .dropdown).opened {
+    @apply !border-primary !outline !outline-1 !outline-primary;
+    outline-offset: 0 !important;
 }
 
 @media (min-width: 768px) {
     .dropdown {
-        @apply h-10;
-        padding: 0.625rem;
+        @apply h-10 py-2.5 px-2.5;
     }
 }
 
@@ -187,44 +206,25 @@ const chose = (f) => {
 }
 
 .dropdown-value {
-    @apply overflow-hidden truncate min-w-0 flex-1 mr-2 text-sm;
-    padding-right: 2rem; /* Extra space to prevent collision with arrow */
-}
-
-@media (min-width: 768px) {
-    .dropdown-value {
-        font-size: 12px;
-    }
+    @apply overflow-hidden truncate min-w-0 flex-1 text-sm md:text-xs;
 }
 
 .dropdown-arrow {
-    @apply w-4 h-4 transition-all duration-300;
-    position: absolute;
-    right: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    @apply w-4 h-4 transition-all duration-300 flex-shrink-0;
 }
 
 .dropdown-menu-portal {
-    @apply rounded-xl shadow-2xl bg-dark-300 border border-dark-600;
-    backdrop-filter: blur(12px);
-    box-shadow: 0 20px 25px -5px oklch(0 0 0 / 0.4), 0 10px 10px -5px oklch(0 0 0 / 0.2),
-        0 0 0 1px oklch(1 0 0 / 0.05);
-    overflow-x: hidden;
+    @apply rounded-xl z-modal border-2 border-dark-650 bg-dark-400 shadow-dropdown;
+    min-width: 200px;
+    max-width: min(90vw, 600px);
+    overflow-x: auto;
     overflow-y: auto;
     overscroll-behavior: contain;
+    touch-action: pan-x pan-y;
     -webkit-overflow-scrolling: touch;
-    touch-action: pan-y;
     scrollbar-width: thin;
-    scrollbar-color: oklch(0.35 0 0) oklch(0.19 0 0);
-    z-index: 1000;
-    min-width: 200px;
-    max-width: min(400px, 90vw);
-    display: flex;
-    flex-direction: column;
+    scrollbar-color: theme('colors.dark.750') theme('colors.dark.350');
+    scrollbar-gutter: stable;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar {
@@ -233,48 +233,40 @@ const chose = (f) => {
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-track {
-    background: oklch(0.19 0 0);
+    @apply bg-transparent;
+    margin: 12px 0;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-thumb {
-    background: oklch(0.35 0 0);
-    border-radius: 3px;
+    @apply bg-dark-750 rounded-full;
+    border: 2px solid transparent;
+    background-clip: padding-box;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-thumb:hover {
-    background: oklch(0.45 0 0);
+    @apply bg-dark-800;
 }
 
 .dropdown-item {
-    @apply cursor-pointer text-left text-white transition-all duration-200;
-    padding: 0.75rem 1rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    border-bottom: 1px solid rgba(61, 62, 68, 0.3);
-    display: flex !important;
-    align-items: center;
-    gap: 1rem;
-    width: 100%;
-    flex-shrink: 0;
+    @apply cursor-pointer text-left text-white transition-all duration-200 flex items-center justify-between;
+    @apply px-4 py-3 text-sm font-medium border-b border-dark-625/30;
+    min-width: 100%;
 }
 
 .dropdown-item:last-child {
-    border-bottom: none;
+    @apply border-b-0;
 }
 
 .dropdown-item:hover {
-    background: oklch(0.2809 0 0) !important; /* Full width background */
-    color: oklch(1 0 0);
+    @apply bg-dark-550 text-white;
 }
 
 .dropdown-item:active {
-    @apply bg-dark-650;
-    box-shadow: inset 0 2px 4px oklch(0 0 0 / 0.4);
+    @apply bg-dark-650 shadow-input-inset;
 }
 
 .dropdown-item.selected {
-    background: oklch(0.72 0.15 145 / 0.15);
-    color: oklch(0.72 0.15 145);
+    @apply bg-primary/15 text-primary;
 }
 
 .dropdown-item:first-child {
@@ -286,38 +278,10 @@ const chose = (f) => {
 }
 
 .dropdown-item-text {
-    @apply pr-2 flex-1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @apply pr-2 whitespace-nowrap;
 }
 
 .dropdown-item svg {
-    @apply w-4 h-4;
-    color: oklch(0.72 0.15 145);
-}
-
-.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);
+    @apply w-4 h-4 text-primary;
 }
 </style>

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

@@ -34,7 +34,7 @@
                     </div>
 
                     <div v-if="selectedOptions.length > 0" class="selected-summary">
-                        <div class="flex items-center justify-between gap-2">
+                        <div class="flex-gap-2 items-center justify-between">
                             <div class="selected-count">
                                 <span class="count-badge">
                                     {{ selectedOptions.length }}
@@ -71,13 +71,34 @@ 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 },
-    includeAdjacentButtons: { type: Boolean, default: false }
+    onSelect: {
+        type: Function,
+        default: null
+    },
+    default: {
+        type: String,
+        default: 'Select options...'
+    },
+    options: {
+        type: Array,
+        required: true
+    },
+    rightAmount: {
+        type: String,
+        default: ''
+    },
+    topPadding: {
+        type: String,
+        default: ''
+    },
+    capitalize: {
+        type: Boolean,
+        default: false
+    },
+    includeAdjacentButtons: {
+        type: Boolean,
+        default: false
+    }
 });
 
 const selectedOptions = ref([]);
@@ -132,33 +153,6 @@ const toggleOpened = () => {
     } else {
         ui.setCurrentDropdown(id);
         updatePosition();
-        // Set all items to same width only if horizontal scrolling is needed
-        setTimeout(() => {
-            const portal = document.querySelector('.dropdown-menu-portal');
-            const items = portal?.querySelectorAll('.dropdown-item');
-            if (items && items.length > 0) {
-                let maxWidth = 0;
-                items.forEach(item => {
-                    item.style.width = 'max-content';
-                    maxWidth = Math.max(maxWidth, item.scrollWidth);
-                });
-
-                // Only set explicit widths if content is wider than container
-                if (maxWidth > portal.offsetWidth) {
-                    // Enable horizontal scrolling for long items
-                    portal.style.overflowX = 'auto';
-                    items.forEach(item => {
-                        item.style.width = maxWidth + 'px';
-                    });
-                } else {
-                    // Disable horizontal scrolling for short items
-                    portal.style.overflowX = 'hidden';
-                    items.forEach(item => {
-                        item.style.width = '100%';
-                    });
-                }
-            }
-        }, 50);
     }
 };
 
@@ -218,24 +212,22 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 
 <style scoped>
 .dropdown {
-    @apply relative w-full h-10 text-white ml-auto rounded-lg ring-0;
-    background: linear-gradient(135deg, oklch(0.18 0 0) 0%, oklch(0.20 0 0) 100%);
-    border: 1px solid oklch(0.26 0 0);
+    @apply relative w-full h-10 text-white ml-auto rounded-lg ring-0 border-2;
+    @apply bg-bg-input border-border;
     padding: 0.75rem;
 }
 
 .dropdown:hover {
-    border-color: oklch(0.30 0 0);
+    @apply border-dark-650;
 }
 
 .dropdown:focus-within,
 .dropdown.opened {
-    border-color: oklch(0.72 0.15 145) !important;
-    outline: 1px solid oklch(0.72 0.15 145) !important;
-    outline-offset: 0;
+    @apply border-primary outline outline-1 outline-primary;
+    outline-offset: 0 !important;
 }
 
-@media (max-width: 810px) {
+@screen modal {
     .dropdown {
         @apply h-10;
         padding: 0.625rem;
@@ -251,40 +243,30 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 }
 
 .dropdown-counter {
-    @apply flex items-center gap-2 absolute;
-    right: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
+    @apply flex items-center gap-2 absolute right-2;
 }
 
 .counter-badge {
-    @apply text-white text-xs font-semibold px-1.5 py-0.5 rounded-full text-center min-w-[18px] shadow-sm;
-    background: oklch(0.72 0.15 145);
+    @apply text-white text-xs font-semibold px-1.5 py-0.5 rounded-full text-center min-w-4.5 shadow-sm;
+    @apply bg-primary;
 }
 
 .dropdown-arrow {
     @apply min-w-4 min-h-4 transition-all duration-300;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 .dropdown-menu-portal {
-    @apply rounded-xl shadow-2xl;
-    background: linear-gradient(135deg, oklch(0.18 0 0) 0%, oklch(0.20 0 0) 100%);
-    border: 1px solid oklch(0.26 0 0);
-    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-x: auto !important;
-    overflow-y: auto !important;
-    overscroll-behavior: contain !important;
-    touch-action: pan-x pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
-    scrollbar-width: thin;
-    scrollbar-color: oklch(0.35 0 0) oklch(0.19 0 0);
+    @apply rounded-xl z-modal border-2 border-dark-650 bg-dark-400 shadow-dropdown;
     min-width: 200px;
-    max-width: 90vw;
+    max-width: min(90vw, 600px);
+    overflow-x: auto;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    touch-action: pan-x pan-y;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: theme('colors.dark.750') theme('colors.dark.350');
+    scrollbar-gutter: stable;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar {
@@ -293,31 +275,37 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-track {
-    background: oklch(0.19 0 0);
+    @apply bg-transparent;
+    margin: 12px 0;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-thumb {
-    background: oklch(0.35 0 0);
-    border-radius: 3px;
+    @apply bg-dark-750 rounded-full;
+    border: 2px solid transparent;
+    background-clip: padding-box;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-thumb:hover {
-    background: oklch(0.45 0 0);
+    @apply bg-dark-800;
 }
 
 .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;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    touch-action: pan-y;
+}
+
+.dropdown-menu-portal.multi .option-list::-webkit-scrollbar {
+    display: none;
 }
 
 .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);
+    @apply px-4 py-3 text-sm font-medium;
+    border-bottom: 1px solid theme('colors.dark.500 / 0.3');
 }
 
 .dropdown-item:last-child {
@@ -325,13 +313,11 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 }
 
 .dropdown-item:hover {
-    @apply bg-dark-600;
-    color: oklch(1 0 0);
+    @apply bg-dark-550 text-white;
 }
 
 .dropdown-item:active {
-    @apply bg-dark-650;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
+    @apply bg-dark-650 shadow-input-inset;
 }
 
 .dropdown-item:first-child {
@@ -349,13 +335,12 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 
 /* Checkmark styling */
 .dropdown-item svg {
-    @apply w-4 h-4;
-    color: oklch(0.72 0.15 145);
+    @apply w-4 h-4 text-primary;
 }
 
 .selected-summary {
     @apply border-t bg-dark-550 w-full px-4 py-3;
-    border-top: 1px solid rgba(61, 62, 68, 0.5);
+    border-top: 1px solid theme('colors.dark.500 / 0.5');
 }
 
 .selected-count {
@@ -364,7 +349,7 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 
 .count-badge {
     @apply text-white text-xs font-semibold px-2 py-1 rounded-full shadow-sm;
-    background: oklch(0.72 0.15 145);
+    @apply bg-primary;
 }
 
 .count-label {
@@ -373,53 +358,20 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 
 .clear-button {
     @apply text-xs text-white transition-all duration-200 font-medium px-2 py-1.5 rounded-lg shadow-sm flex items-center justify-center;
-    background: oklch(0.55 0.22 25);
+    @apply bg-red-400 hover:bg-red-300;
     min-width: 32px;
 }
 
-.clear-button:hover {
-    background: oklch(0.60 0.22 25);
-}
-
 .done-button {
     @apply text-xs text-white transition-all duration-200 font-medium px-2 py-1.5 rounded-lg shadow-sm flex items-center justify-center;
-    background: oklch(0.72 0.15 145);
+    @apply bg-primary hover:bg-green-400;
     min-width: 32px;
 }
 
-.done-button:hover {
-    background: oklch(0.68 0.15 145);
-}
-
 @media (min-width: 640px) {
     .clear-button,
     .done-button {
         padding: 0.375rem 0.75rem;
     }
 }
-
-/* 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);
-}
 </style>