@necrolab/dashboard 0.4.61 → 0.4.208

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

@@ -1,225 +1,87 @@
 <template>
-  <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 @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>
-      </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;
-}
-
-.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;
+    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;
 }
 
-.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;
+.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: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;
-}
+@media (max-width: 1024px) {
+    .small-dropdown {
+        @apply bg-dark-550 !important;
+    }
 
-.country-item .flex img {
-  width: 18px;
-  height: 14px;
-  flex-shrink: 0;
+    .dropdown-content {
+        @apply bg-dark-550 !important;
+    }
 }
 </style>

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

@@ -1,138 +1,29 @@
 <template>
     <button
-        class="modern-checkbox"
+        class="check-component"
         @click="
             checked = !checked;
             $emit('valueUpdate', checked);
         "
-        :class="{ checked: toggled, 'header-checkbox': isHeader }"
+        :class="{ 'border-light-300': !toggled }"
     >
-        <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>
+        <!-- {{ 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>
     </button>
 </template>
 <style lang="scss" scoped>
-.modern-checkbox {
-    @apply relative flex items-center justify-center cursor-pointer flex-shrink-0;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    border: 2px solid #44454b;
-    background: transparent;
-    transition: all 0.2s ease;
-
-    &:hover {
-        border-color: #52535a;
-        transform: scale(1.05);
-    }
-
-    &.checked {
-        background: #88c999;
-        border-color: #88c999;
-
-        &:hover {
-            background: #9dd3a8;
-            border-color: #9dd3a8;
-        }
-    }
-
-    &.header-checkbox {
-        width: 16px;
-        height: 16px;
-        border-color: #52535a;
-
-        &:hover {
-            border-color: #88c999;
-            background: rgba(136, 201, 153, 0.1);
-        }
-
-        &.checked {
-            background: #88c999;
-            border-color: #88c999;
-
-            &:hover {
-                background: #9dd3a8;
-                border-color: #9dd3a8;
-            }
-        }
-    }
-
-    &:focus-visible {
-        outline: 2px solid #88c999;
-        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);
-    }
+.check-component {
+    @apply border-dashed duration-200 rounded border flex items-center justify-center w-4 h-4;
 }
 </style>
 <script setup>
 import { CheckmarkIcon } from "@/components/icons";
 import { ref } from "vue";
-const props = defineProps({
-    toggled: { type: Boolean, required: false, default: false },
-    isHeader: { type: Boolean, required: false, default: false }
-});
+const props = defineProps({ toggled: { type: Boolean, required: false, default: false } });
 
 const checked = ref(props.toggled);
 </script>