@necrolab/dashboard 0.4.48 → 0.4.50

package/src/components/ui/controls/CountryChooser.vue

@@ -1,87 +1,225 @@
 <template>
-    <div @click="open = !open">
-        <div class="dropdown input-default p-4 w-16 bg-dark-550 small-dropdown">
-            <span class="flex justify-between items-center z-inf text-white">
-                <div class="flex gap-3 justify-center">
-                    <img class="w-5" :src="`/flags/${ui.currentCountry.siteId.split('_')[1].toLowerCase()}.svg`" />
-                </div>
-            </span>
-            <transition name="fade">
-                <div
-                    v-if="open"
-                    class="dropdown-content special-dropdown mt-2 snap-mandatory snap-y z-inf overflow-scroll hidden-scrollbars"
-                >
-                    <div class="snap-start pt-2 text-sm font-bold text-center">TM</div>
-                    <div
-                        v-bind:key="country.id"
-                        v-for="(country, i) in countries.TM"
-                        :class="`cursor-pointer snap-start w-12  ${i === 0 ? 'pt-2' : 'my-2'}`"
-                        @click="ui.setCurrentCountry(country, true, 'TM')"
-                    >
-                        <div class="flex justify-between smooth-hover">
-                            <span class="text-sm">{{ country.siteId.split("_")[1] }} </span>
-                            <img class="w-5" :src="`/flags/${country.siteId.split('_')[1].toLowerCase()}.svg`" />
-                        </div>
-                    </div>
-                    <div class="snap-start pt-2 text-sm font-bold text-center">AXS</div>
-                    <div
-                        v-bind:key="country.id"
-                        v-for="(country, i) in countries.AXS"
-                        :class="`cursor-pointer snap-start w-12 ${i === 0 ? 'pt-2' : 'my-2'}`"
-                        @click="ui.setCurrentCountry(country, true, 'AXS')"
-                    >
-                        <div class="flex gap-3 justify-between smooth-hover">
-                            <span class="text-sm">{{ country.siteId.split("_")[1] }} </span>
-                            <img class="w-5" :src="`/flags/${country.siteId.split('_')[1].toLowerCase()}.svg`" />
-                        </div>
-                    </div>
-                </div>
-            </transition>
+  <div>
+    <div
+      class="dropdown input-default p-4 w-16 bg-dark-550 small-dropdown"
+      ref="dropdownRef"
+      @click="toggleOpen"
+    >
+      <span class="flex justify-between items-center z-50 text-white">
+        <div class="flex gap-3 justify-center">
+          <img
+            class="w-5"
+            :src="`/flags/${ui.currentCountry.siteId.split('_')[1].toLowerCase()}.svg`"
+          />
         </div>
+      </span>
+      <Teleport to="body">
+        <transition name="fade">
+          <div
+            v-if="open"
+            class="dropdown-content-portal special-dropdown"
+            :style="menuStyle"
+            @click.stop
+            @wheel.stop
+            @touchmove.stop
+          >
+            <div class="header-item">TM</div>
+            <div
+              v-bind:key="country.id"
+              v-for="country in countries.TM"
+              class="country-item"
+              @click="selectCountry(country, 'TM')"
+            >
+              <div class="flex items-center justify-center gap-2">
+                <span class="text-xs font-medium">{{
+                  country.siteId.split("_")[1]
+                }}</span>
+                <img
+                  class="w-5 h-4"
+                  :src="`/flags/${country.siteId.split('_')[1].toLowerCase()}.svg`"
+                />
+              </div>
+            </div>
+            <div class="header-item">AXS</div>
+            <div
+              v-bind:key="country.id"
+              v-for="country in countries.AXS"
+              class="country-item"
+              @click="selectCountry(country, 'AXS')"
+            >
+              <div class="flex items-center justify-center gap-2">
+                <span class="text-xs font-medium">{{
+                  country.siteId.split("_")[1]
+                }}</span>
+                <img
+                  class="w-5 h-4"
+                  :src="`/flags/${country.siteId.split('_')[1].toLowerCase()}.svg`"
+                />
+              </div>
+            </div>
+          </div>
+        </transition>
+      </Teleport>
     </div>
+  </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import { useUIStore } from "@/stores/ui";
 import { countries } from "@/stores/countries";
+import { useDropdownPosition } from "@/composables/useDropdownPosition";
+import { useClickOutside } from "@/composables/useClickOutside";
+
 const ui = useUIStore();
 const open = ref(false);
+const dropdownRef = ref(null);
+
+// Use composables for positioning and click outside
+const { menuStyle, updatePosition } = useDropdownPosition(dropdownRef, {
+  offset: { x: -26, y: 4 },
+  minWidth: 100,
+  maxHeight: 208,
+  estimateHeight: () => {
+    const tmCount = countries.TM?.length || 0;
+    const axsCount = countries.AXS?.length || 0;
+    const totalItems = tmCount + axsCount + 2; // +2 for headers
+    return Math.min(totalItems * 32, 208);
+  },
+});
+
+useClickOutside(dropdownRef, () => {
+  if (open.value) {
+    open.value = false;
+  }
+});
+
+const toggleOpen = () => {
+  open.value = !open.value;
+  if (open.value) {
+    updatePosition();
+  }
+};
+
+const selectCountry = (country, module) => {
+  ui.setCurrentCountry(country, true, module);
+  open.value = false;
+};
 </script>
 
 <style scoped>
 .special-dropdown {
-    @apply min-w-20;
+  @apply min-w-20;
 }
 
 .small-dropdown {
-    background-clip: border-box !important;
-    border-radius: 100% !important;
-    padding: 0;
-    width: 3em !important;
-    height: 3em !important;
-    display: flex;
-    justify-items: center;
-    justify-content: center;
+  background-clip: border-box !important;
+  border-radius: 100% !important;
+  padding: 0;
+  width: 3em !important;
+  height: 3em !important;
+  display: flex;
+  justify-items: center;
+  justify-content: center;
+}
+
+.dropdown-content-portal {
+  @apply bg-dark-400 border border-dark-650 rounded-lg shadow-2xl z-50;
+  padding: 0.5rem;
+  max-height: 208px !important;
+  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;
+  min-width: 100px;
+  width: 100px;
+}
+
+.dropdown-content-portal::-webkit-scrollbar {
+  display: none;
 }
 
-.dropdown-content {
-    left: -1.25rem;
-    background-clip: border-box !important;
-    @apply border border-dark-650;
-    border-width: 2px;
-    --tw-border-opacity: 1;
-    border-color: rgb(61 62 68 / var(--tw-border-opacity));
-    max-height: 13rem;
+.header-item {
+  text-align: center !important;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: white;
+  padding: 8px 4px;
+  cursor: default;
+  pointer-events: none;
+  margin: 4px 2px;
+  position: relative;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.08) 0%,
+    rgba(255, 255, 255, 0.04) 100%
+  );
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  letter-spacing: 0.5px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-@media (max-width: 1024px) {
-    .small-dropdown {
-        @apply bg-dark-550 !important;
-    }
+.header-item:first-child {
+  margin-top: 2px;
+}
+
+.header-item::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.2) 50%,
+    transparent 100%
+  );
+  border-radius: 6px 6px 0 0;
+}
+
+.country-item {
+  padding: 8px 4px;
+  font-size: 0.875rem;
+  color: white;
+  cursor: pointer;
+  border-radius: 6px;
+  margin: 1px 2px;
+  transition: all 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+}
+
+.country-item .flex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  flex-wrap: nowrap;
+}
+
+.country-item .flex span {
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+  text-align: center;
+}
 
-    .dropdown-content {
-        @apply bg-dark-550 !important;
-    }
+.country-item .flex img {
+  width: 18px;
+  height: 14px;
+  flex-shrink: 0;
 }
 </style>

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

@@ -1,164 +1,250 @@
 <template>
-    <div @click="toggleOpened" class="dropdown">
-        <span class="dropdown-display">
-            <span class="dropdown-value" :class="capitalize ? 'capitalize' : ''">
-                {{ currentValue ? currentValue : props.default }}
+  <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>
+    <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>
-            <DownIcon class="dropdown-arrow" :class="opened ? 'rotate-180' : ''" />
-        </span>
-        <transition name="dropdown-fade">
-            <div
-                class="dropdown-menu scrollable"
-                v-if="opened"
-                @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>
-    </div>
+            <CheckmarkIcon v-if="(f || props.default) === currentValue" class="ml-2" />
+          </button>
+        </div>
+      </transition>
+    </Teleport>
+  </div>
 </template>
 
 <script setup>
 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({
-    onClick: { type: Function },
-    default: { type: String },
-    value: { type: String },
-    options: { type: Object },
-    allowDefault: { type: Boolean },
-    rightAmount: { type: String },
-    topPadding: { type: String },
-    capitalize: { type: Boolean }
+  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' }
 });
 
 const currentValue = ref(props.value);
+const dropdownRef = ref(null);
 
 // Watch for changes to the value prop and update currentValue
-watch(() => props.value, (newValue) => {
+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;
+  ui.logger.Info("Dropdown: chosen", f, "hiding...");
+  currentValue.value = f;
+  ui.setCurrentDropdown("");
+  if (props.onClick) props.onClick(f);
+  // Ensure dropdown closes
+  setTimeout(() => {
     ui.setCurrentDropdown("");
-    if (props.onClick) props.onClick(f);
-    // Ensure dropdown closes
-    setTimeout(() => {
-        ui.setCurrentDropdown("");
-    }, 50);
+  }, 50);
 };
-
 </script>
 
 <style scoped>
 .dropdown {
-    @apply relative w-full p-2 h-12 text-white ml-auto rounded-lg ring-0;
+  @apply relative w-full text-white ml-auto rounded-lg ring-0;
+  background: linear-gradient(135deg, #2a2b30 0%, #2e2f34 100%);
+  border: 1px solid #3d3e44;
+  padding: 0.75rem;
+  height: 3.45em;
+}
+
+.dropdown.transparent {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  height: 40px !important;
 }
 
-@media (max-width: 810px) {
-    .dropdown {
-        @apply h-10;
-    }
+.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;
+  @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;
+  @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-transform duration-200 flex-shrink-0;
+  @apply w-4 h-4 transition-all duration-300 flex-shrink-0;
 }
 
-.dropdown-menu {
-    @apply absolute border border-dark-650 rounded-lg shadow-lg max-h-40 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);
+  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::-webkit-scrollbar {
-    width: 8px; /* Chrome, Safari, Edge - show scrollbar for testing */
+.dropdown-menu-portal::-webkit-scrollbar {
+  display: none;
 }
 
-.dropdown-menu::-webkit-scrollbar-track {
-    background: #2e2f34;
+.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-menu::-webkit-scrollbar-thumb {
-    background: #555;
-    border-radius: 4px;
+.dropdown-item:last-child {
+  border-bottom: none;
 }
 
-.dropdown-menu::-webkit-scrollbar-thumb:hover {
-    background: #777;
+.dropdown-item:hover {
+  @apply bg-dark-600;
+  color: #ffffff;
 }
 
-.dropdown-item {
-    @apply cursor-pointer text-left w-full py-2 px-3 text-white hover:bg-dark-400 transition-all duration-150 flex items-center justify-between;
+.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 truncate pr-2;
+  @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;
 }
 
-/* Transition animations */
-.dropdown-fade-enter-active,
 .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>
+</style>