@necrolab/dashboard 0.4.221 → 0.5.1

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-light-300;
-    border-width: 2px;
-    --tw-border-opacity: 1;
-    border-color: rgb(41 42 67 / 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/Checkbox.vue

@@ -1,29 +1,138 @@
 <template>
     <button
-        class="check-component"
+        class="modern-checkbox"
         @click="
             checked = !checked;
             $emit('valueUpdate', checked);
         "
-        :class="{ 'border-light-300': !toggled }"
+        :class="{ checked: toggled, 'header-checkbox': isHeader }"
     >
-        <!-- {{ toggled }} -->
-        <div class="flex items-center justify-center w-4 h-4">
-            <transition name="fade">
-                <span v-if="toggled" class="will-change-auto"> <CheckmarkIcon /> </span>
-            </transition>
+        <div class="checkbox-inner">
+            <!-- Header checkbox design -->
+            <div v-if="isHeader" class="header-indicator" :class="{ visible: toggled }"></div>
+
+            <!-- Row checkbox design -->
+            <svg
+                v-else
+                class="checkmark"
+                :class="{ visible: toggled }"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M20 6L9 17L4 12"
+                    stroke="currentColor"
+                    stroke-width="3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                />
+            </svg>
         </div>
     </button>
 </template>
 <style lang="scss" scoped>
-.check-component {
-    @apply border-dashed duration-200 rounded border flex items-center justify-center w-4 h-4;
+.modern-checkbox {
+    @apply relative flex items-center justify-center cursor-pointer flex-shrink-0;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 2px solid oklch(0.28 0 0);
+    background: transparent;
+    transition: all 0.2s ease;
+
+    &:hover {
+        border-color: oklch(0.33 0 0);
+        transform: scale(1.05);
+    }
+
+    &.checked {
+        background: oklch(0.72 0.15 145);
+        border-color: oklch(0.72 0.15 145);
+
+        &:hover {
+            background: oklch(0.78 0.12 145);
+            border-color: oklch(0.78 0.12 145);
+        }
+    }
+
+    &.header-checkbox {
+        width: 16px;
+        height: 16px;
+        border-color: oklch(0.33 0 0);
+
+        &:hover {
+            border-color: oklch(0.72 0.15 145);
+            background: rgba(136, 201, 153, 0.1);
+        }
+
+        &.checked {
+            background: oklch(0.72 0.15 145);
+            border-color: oklch(0.72 0.15 145);
+
+            &:hover {
+                background: oklch(0.78 0.12 145);
+                border-color: oklch(0.78 0.12 145);
+            }
+        }
+    }
+
+    &:focus-visible {
+        outline: 2px solid oklch(0.72 0.15 145);
+        outline-offset: 2px;
+    }
+}
+
+.checkbox-inner {
+    @apply relative w-full h-full flex items-center justify-center;
+}
+
+.checkmark {
+    width: 8px;
+    height: 8px;
+    color: #ffffff;
+    opacity: 0;
+    transform: scale(0.5);
+    transition: all 0.2s ease;
+
+    &.visible {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.header-indicator {
+    width: 6px;
+    height: 6px;
+    background: #ffffff;
+    border-radius: 50%;
+    opacity: 0;
+    transform: scale(0.3);
+    transition: all 0.2s ease;
+
+    &.visible {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@media (hover: hover) {
+    .modern-checkbox:hover {
+        transform: scale(1.05);
+    }
+
+    .modern-checkbox.checked:hover .checkmark {
+        transform: scale(1.1);
+    }
 }
 </style>
 <script setup>
 import { CheckmarkIcon } from "@/components/icons";
 import { ref } from "vue";
-const props = defineProps({ toggled: { type: Boolean, required: false, default: false } });
+const props = defineProps({
+    toggled: { type: Boolean, required: false, default: false },
+    isHeader: { type: Boolean, required: false, default: false }
+});
 
 const checked = ref(props.toggled);
 </script>