@necrolab/dashboard 0.4.220 → 0.5.1

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

@@ -1,31 +1,55 @@
 <template>
-    <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' : ''}`">
+    <div @click="toggleOpened" class="dropdown" ref="dropdownRef">
+        <span class="dropdown-display">
+            <span class="dropdown-value" :class="capitalize ? 'capitalize' : ''">
                 {{ displayValue }}
             </span>
-            <DownIcon :class="`absolute ${props.rightAmount || 'right-3'} top-3.5`" />
-        </span>
-        <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 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>
+        </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>
 </template>
 
@@ -33,6 +57,8 @@
 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();
 
@@ -42,23 +68,64 @@ const props = defineProps({
     options: { type: Array, required: true },
     rightAmount: { type: String },
     topPadding: { type: String },
-    capitalize: { type: Boolean }
+    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;
+        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 selectedOptions.value.join(", ");
 });
 
 const toggleOpened = () => {
-    if (opened.value) ui.setCurrentDropdown("");
-    else ui.setCurrentDropdown(id);
+    if (opened.value) {
+        ui.setCurrentDropdown("");
+    } else {
+        ui.setCurrentDropdown(id);
+        updatePosition();
+    }
 };
 
 const toggleOption = (option) => {
@@ -68,13 +135,46 @@ 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);
+    } 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();
 };
 
 // Initialize with default option if provided
@@ -84,10 +184,173 @@ if (props.default && !selectedOptions.value.includes(props.default)) {
 </script>
 
 <style scoped>
-.custom-dropdown-content {
-    top: 2.5rem !important;
-    @apply border border-light-300 px-3.5;
-    left: -1px !important;
-    width: calc(100% + 2px);
+.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);
+    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, 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);
+    overscroll-behavior: contain !important;
+    touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
+    scrollbar-width: thin;
+    scrollbar-color: oklch(0.31 0 0) transparent;
+}
+
+.dropdown-menu-portal::-webkit-scrollbar {
+    width: 6px;
+}
+
+.dropdown-menu-portal::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.dropdown-menu-portal::-webkit-scrollbar-thumb {
+    background: oklch(0.31 0 0);
+    border-radius: 3px;
+}
+
+.dropdown-menu-portal::-webkit-scrollbar-thumb:hover {
+    background: oklch(0.45 0 0);
+}
+
+.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: oklch(1 0 0);
+}
+
+.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: oklch(0.72 0.15 145);
+}
+
+.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);
 }
 </style>

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

@@ -1,21 +1,27 @@
 <template>
-    <label class="switch">
-        <input type="checkbox" v-model="value" />
+    <label class="switch" :class="{ 'disabled': disabled }">
+        <input type="checkbox" v-model="value" :disabled="disabled" />
         <span class="slider round"></span>
     </label>
 </template>
 
 <script setup>
 const value = defineModel();
+const props = defineProps({
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+});
 </script>
 
 <style lang="scss" scoped>
-/* The switch - the box around the slider */
+/* iOS-style switch */
 .switch {
     position: relative;
     display: inline-block;
-    width: 60px;
-    height: 30px;
+    width: 51px;
+    height: 31px;
 }
 
 /* Hide default HTML checkbox */
@@ -33,35 +39,52 @@ const value = defineModel();
     left: 0;
     right: 0;
     bottom: 0;
-    transition: 0.2s;
-    opacity: 0.4;
-    @apply border border-white;
+    background-color: oklch(0.26 0 0);
+    border: 2px solid oklch(0.35 0 0);
+    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .slider:before {
     position: absolute;
     content: "";
-    height: 20px;
-    width: 20px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    transition: 0.2s;
+    height: 23px;
+    width: 23px;
+    left: 2px;
+    bottom: 2px;
+    background-color: oklch(0.50 0 0);
+    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 3px oklch(0 0 0 / 0.3);
 }
 
 input:checked + .slider {
-    opacity: 1;
+    background-color: oklch(0.72 0.15 145);
+    border-color: oklch(0.72 0.15 145);
+}
+
+input:checked + .slider:before {
+    background-color: oklch(1 0 0);
 }
 
 input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
+    transform: translateX(20px);
+}
+
+.switch.disabled {
+    pointer-events: none;
+}
+
+input:disabled + .slider {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+input:disabled + .slider:before {
+    opacity: 0.7;
 }
 
 /* Rounded sliders */
 .slider.round {
-    border-radius: 34px;
+    border-radius: 31px;
 }
 
 .slider.round:before {
@@ -70,15 +93,20 @@ input:checked + .slider:before {
 
 @media (max-width: 810px) {
     .switch {
-        width: 50px;
-        min-width: 50px;
-        height: 22px;
+        width: 44px;
+        min-width: 44px;
+        height: 26px;
 
         .slider:before {
-            width: 15px;
-            top: 3px;
-            height: 15px;
+            width: 22px;
+            height: 22px;
+            left: 2px;
+            bottom: 2px;
         }
     }
+
+    input:checked + .slider:before {
+        transform: translateX(18px);
+    }
 }
 </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
+    };
+}