@necrolab/dashboard 0.4.221 → 0.5.2

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

@@ -1,37 +1,44 @@
 <template>
-    <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`" />
+    <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>
-        <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>
+        <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>
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
-import { DownIcon } from "@/components/icons";
+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({
@@ -42,35 +49,205 @@ const props = defineProps({
     allowDefault: { type: Boolean },
     rightAmount: { type: String },
     topPadding: { type: String },
-    capitalize: { type: Boolean }
+    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) => {
+        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;
-    opened.value = false;
+    ui.setCurrentDropdown("");
+    if (props.onClick) props.onClick(f);
+    // Ensure dropdown closes
     setTimeout(() => {
-        opened.value = false;
-        ui.logger.Info("Showing dropdown again");
+        ui.setCurrentDropdown("");
     }, 50);
-    props.onClick(f);
 };
 </script>
 
 <style scoped>
-.custom-dropdown-content {
-    top: 2.5rem !important;
-    @apply border border-light-300;
-    left: -1px !important;
-    width: calc(100% + 2px);
+.dropdown {
+    @apply relative w-full text-white ml-auto rounded-lg ring-0 h-10;
+    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.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 {
+    border-color: oklch(0.30 0 0);
+}
+
+.dropdown:not(.transparent):focus-within,
+.dropdown:not(.transparent).opened {
+    border-color: oklch(0.72 0.15 145) !important;
+    outline: 1px solid oklch(0.72 0.15 145) !important;
+    outline-offset: 0;
+}
+
+@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, 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 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-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: oklch(1 0 0);
+}
+
+.dropdown-item:active {
+    @apply bg-dark-650;
+    box-shadow: inset 0 2px 4px oklch(0 0 0 / 0.4);
+}
+
+.dropdown-item.selected {
+    background: oklch(0.72 0.15 145 / 0.15);
+    color: oklch(0.72 0.15 145);
+}
+
+.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: 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);
 }
 </style>

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

@@ -0,0 +1,45 @@
+<template>
+    <button
+        :class="[
+            'btn-primary',
+            {
+                'opacity-50 cursor-not-allowed': loading || disabled,
+                'btn-secondary': variant === 'secondary',
+                'btn-danger': variant === 'danger'
+            }
+        ]"
+        :disabled="loading || disabled"
+        @click="$emit('click')"
+        v-bind="$attrs"
+    >
+        <div v-if="loading" class="flex items-center justify-center gap-2">
+            <div class="loading-spinner"></div>
+            <span v-if="loadingText">{{ loadingText }}</span>
+        </div>
+        <slot v-else />
+    </button>
+</template>
+
+<script setup>
+defineProps({
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    loadingText: {
+        type: String,
+        default: ''
+    },
+    variant: {
+        type: String,
+        default: 'primary',
+        validator: (value) => ['primary', 'secondary', 'danger'].includes(value)
+    }
+});
+
+defineEmits(['click']);
+</script>