@necrolab/dashboard 0.5.15 → 0.5.16

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="dropdown input-default p-4 w-16 bg-dark-550 small-dropdown"
+      class="dropdown input-default !rounded-full !p-0 !w-[3em] !h-[3em] flex justify-center items-center !bg-clip-border bg-dark-550"
       ref="dropdownRef"
       @click="toggleOpen"
     >
@@ -17,42 +17,42 @@
         <transition name="fade">
           <div
             v-if="open"
-            class="dropdown-content-portal special-dropdown"
+            class="bg-dark-400 border border-dark-650 rounded-lg shadow-2xl z-50 p-2 !max-h-52 !overflow-y-auto custom-scrollbar-y min-w-20 w-25"
             :style="menuStyle"
             @click.stop
             @wheel.stop
             @touchmove.stop
           >
-            <div class="header-item">TM</div>
+            <div class="country-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">{{
+              <div class="flex items-center justify-center gap-1.5 w-full flex-nowrap">
+                <span class="text-xs font-medium whitespace-nowrap flex-shrink-0 text-center">{{
                   country.siteId.split("_")[1]
                 }}</span>
                 <img
-                  class="w-5 h-4"
+                  class="w-4.5 h-3.5 flex-shrink-0"
                   :src="`/flags/${country.siteId.split('_')[1].toLowerCase()}.svg`"
                 />
               </div>
             </div>
-            <div class="header-item">AXS</div>
+            <div class="country-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">{{
+              <div class="flex items-center justify-center gap-1.5 w-full flex-nowrap">
+                <span class="text-xs font-medium whitespace-nowrap flex-shrink-0 text-center">{{
                   country.siteId.split("_")[1]
                 }}</span>
                 <img
-                  class="w-5 h-4"
+                  class="w-4.5 h-3.5 flex-shrink-0"
                   :src="`/flags/${country.siteId.split('_')[1].toLowerCase()}.svg`"
                 />
               </div>
@@ -108,74 +108,37 @@ const selectCountry = (country, module) => {
 </script>
 
 <style scoped>
-.special-dropdown {
-  @apply min-w-20;
-}
-
-.small-dropdown {
-  @apply bg-clip-border rounded-full w-12 h-12 flex justify-center items-center;
-  padding: 0;
-}
-
-.dropdown-content-portal {
-  @apply bg-dark-400 border border-dark-650 rounded-lg shadow-2xl z-50;
-  @apply max-h-52 overflow-y-auto touch-pan-y;
-  padding: 0.5rem;
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  min-width: 100px;
-  width: 100px;
-}
-
-.dropdown-content-portal::-webkit-scrollbar {
-  display: none;
-}
-
-.header-item {
+.country-header-item {
   @apply text-center text-xs font-bold text-white;
-  @apply py-2 px-1 mx-0.5 my-1 rounded-md;
+  @apply py-2 px-1 my-1 mx-0.5;
+  @apply cursor-default pointer-events-none;
+  @apply border rounded-md tracking-wider;
   @apply flex items-center justify-center;
-  @apply pointer-events-none cursor-default;
   @apply 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);
-  letter-spacing: 0.5px;
+  border-color: rgba(255, 255, 255, 0.1);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.header-item:first-child {
+.country-header-item:first-of-type {
   @apply mt-0.5;
 }
 
-.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-header-item::before {
+  content: '';
+  @apply absolute top-0 left-0 right-0 h-px rounded-t-md;
+  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
 }
 
 .country-item {
-  @apply py-2 px-1 mx-0.5 my-px text-sm text-white;
-  @apply cursor-pointer rounded-md min-h-8;
+  @apply py-2 px-1 my-px mx-0.5 min-h-8;
+  @apply text-sm text-white cursor-pointer rounded-md;
   @apply flex items-center justify-center;
-  transition: all 0.15s ease;
+  @apply transition-all duration-150 ease-in-out;
 }
 
-/* Flex layout already defined in template with Tailwind classes */
+.country-item:hover {
+  @apply bg-dark-650;
+}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-    <button @click="toggle" class="w-22 cursor-pointer">
+    <button @click="toggle" class="w-22 cursor-pointer" :aria-label="value ? 'Hide' : 'Show'" :aria-pressed="value">
         <img v-if="value" class="w-5 h-5" src="@/assets/img/eyes/open.svg" alt="Open Eye" />
         <img v-else class="w-5 h-5" src="@/assets/img/eyes/closed.svg" alt="Closed Eye" />
     </button>

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

@@ -1,137 +1,56 @@
 <template>
     <button
-        class="modern-checkbox"
+        class="checkbox-base"
+        :class="[
+            isHeader ? 'size-4.5 border-dark-550' : 'size-5 border-2 border-dark-700',
+            toggled ? 'bg-accent-green border-accent-green hover:bg-accent-green-hover hover:border-accent-green-hover' : 'hover:border-dark-550',
+            isHeader && !toggled ? 'hover:border-accent-green hover:bg-accent-green/10' : ''
+        ]"
+        role="checkbox"
+        :aria-checked="toggled"
+        :aria-label="isHeader ? 'Select all' : 'Select item'"
         @click="
             checked = !checked;
             $emit('valueUpdate', checked);
         "
-        :class="{ checked: toggled, 'header-checkbox': isHeader }"
     >
-        <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>
+        <!-- Header checkbox indicator -->
+        <div
+            v-if="isHeader"
+            class="size-1.5 rounded-full bg-white transition-all duration-200 ease-out"
+            :class="toggled ? 'opacity-100 scale-100' : 'opacity-0 scale-[0.3]'"
+        ></div>
+
+        <!-- Row checkbox checkmark -->
+        <svg
+            v-else
+            class="size-2 text-white transition-all duration-200 ease-out hover:[@media(hover:hover)]:scale-110"
+            :class="toggled ? 'opacity-100 scale-100' : 'opacity-0 scale-50'"
+            viewBox="0 0 24 24"
+            fill="none"
+        >
+            <path
+                d="M20 6L9 17L4 12"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+        </svg>
     </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 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 },
-    isHeader: { type: Boolean, required: false, default: false }
+    toggled: {
+        type: Boolean,
+        default: false
+    },
+    isHeader: {
+        type: Boolean,
+        default: false
+    }
 });
 
 const checked = ref(props.toggled);