@necrolab/dashboard 0.5.14 → 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);

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

@@ -1,5 +1,16 @@
 <template>
-    <div @click="toggleOpened" class="dropdown" :class="[props.variant, { 'opened': opened }]" ref="dropdownRef">
+    <div
+        @click="toggleOpened"
+        class="dropdown"
+        :class="[props.variant, { 'opened': opened }]"
+        ref="dropdownRef"
+        role="combobox"
+        :aria-expanded="opened"
+        :aria-label="props.default"
+        tabindex="0"
+        @keydown.enter="toggleOpened"
+        @keydown.space.prevent="toggleOpened"
+        @keydown.escape="opened && ui.setCurrentDropdown('')">
         <span class="dropdown-display">
             <span class="dropdown-value" :class="capitalize ? 'capitalize' : ''">
                 {{ currentValue ? currentValue : props.default }}
@@ -12,16 +23,17 @@
                     v-if="opened"
                     class="dropdown-menu-portal scrollable"
                     :style="menuStyle"
+                    role="listbox"
                     @click.stop
-                    @wheel.stop
-                    @touchmove.stop>
+                    @wheel.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]"
-                        @mousedown.prevent.stop="chose(f)"
-                        @touchstart.prevent.stop="chose(f)">
+                        role="option"
+                        :aria-selected="(f || props.default) === currentValue"
+                        @click.stop="chose(f)">
                         <span class="dropdown-item-text" :class="capitalize ? 'capitalize' : ''">
                             {{ f ? f : props.default }}
                         </span>
@@ -42,16 +54,47 @@ import { useDropdownPosition } from "@/composables/useDropdownPosition";
 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 },
-    includeAdjacentButtons: { type: Boolean, default: false },
-    variant: { type: String, default: "default" }
+    onClick: {
+        type: Function,
+        default: null
+    },
+    default: {
+        type: String,
+        default: ''
+    },
+    value: {
+        type: String,
+        default: ''
+    },
+    options: {
+        type: Object,
+        required: true
+    },
+    allowDefault: {
+        type: Boolean,
+        default: false
+    },
+    rightAmount: {
+        type: String,
+        default: ''
+    },
+    topPadding: {
+        type: String,
+        default: ''
+    },
+    capitalize: {
+        type: Boolean,
+        default: false
+    },
+    includeAdjacentButtons: {
+        type: Boolean,
+        default: false
+    },
+    variant: {
+        type: String,
+        default: 'default',
+        validator: (value) => ['default', 'transparent'].includes(value)
+    }
 });
 
 const currentValue = ref(props.value);
@@ -120,34 +163,41 @@ const chose = (f) => {
 
 <style scoped>
 .dropdown {
-    @apply relative w-full text-white ml-auto rounded-lg ring-0 h-10 bg-dark-300 border border-dark-600;
-    padding: 0.75rem;
+    @apply relative w-full text-white ml-auto rounded-lg ring-0 h-10 border-2 bg-bg-input border-border p-3;
 }
 
 .dropdown.transparent {
-    @apply bg-transparent border-0 shadow-none p-0 h-10;
+    @apply !bg-transparent !border-none !shadow-none !p-0 !h-10;
 }
 
 .dropdown.transparent:hover,
 .dropdown.transparent:focus-within,
 .dropdown.transparent.opened {
-    @apply border-0 bg-transparent shadow-none outline-none;
+    @apply !border-none !bg-transparent !shadow-none !outline-none;
+}
+
+.unified-search-group .dropdown:hover {
+    @apply !border-transparent;
 }
 
-.dropdown:not(.transparent):hover {
-    border-color: oklch(0.30 0 0);
+.dropdown:not(.transparent):not(.unified-search-group .dropdown):hover {
+    @apply border-dark-700;
 }
 
-.dropdown:not(.transparent):focus-within,
-.dropdown:not(.transparent).opened {
-    @apply border-border-focus outline outline-1 outline-border-focus;
-    outline-offset: 0;
+.unified-search-group .dropdown:focus-within,
+.unified-search-group .dropdown.opened {
+    @apply !border-0 !outline-0 !border-transparent;
+}
+
+.dropdown:not(.transparent):not(.unified-search-group .dropdown):focus-within,
+.dropdown:not(.transparent):not(.unified-search-group .dropdown).opened {
+    @apply !border-primary !outline !outline-1 !outline-primary;
+    outline-offset: 0 !important;
 }
 
 @media (min-width: 768px) {
     .dropdown {
-        @apply h-10;
-        padding: 0.625rem;
+        @apply h-10 py-2.5 px-2.5;
     }
 }
 
@@ -156,38 +206,25 @@ const chose = (f) => {
 }
 
 .dropdown-value {
-    @apply overflow-hidden truncate min-w-0 flex-1 mr-2 text-sm;
-}
-
-@media (min-width: 768px) {
-    .dropdown-value {
-        font-size: 12px;
-    }
+    @apply overflow-hidden truncate min-w-0 flex-1 text-sm md:text-xs;
 }
 
 .dropdown-arrow {
-    @apply w-4 h-4 transition-all duration-300;
-    position: absolute;
-    right: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    @apply w-4 h-4 transition-all duration-300 flex-shrink-0;
 }
 
 .dropdown-menu-portal {
-    @apply rounded-xl shadow-2xl bg-dark-300 border border-dark-600 overflow-x-auto overflow-y-auto touch-pan-x touch-pan-y;
-    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);
+    @apply rounded-xl z-modal border-2 border-dark-650 bg-dark-400 shadow-dropdown;
+    min-width: 200px;
+    max-width: min(90vw, 600px);
+    overflow-x: auto;
+    overflow-y: auto;
     overscroll-behavior: contain;
+    touch-action: pan-x pan-y;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
-    scrollbar-color: oklch(0.35 0 0) oklch(0.19 0 0);
-    z-index: 1000;
-    min-width: 200px;
-    max-width: 90vw;
+    scrollbar-color: theme('colors.dark.750') theme('colors.dark.350');
+    scrollbar-gutter: stable;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar {
@@ -196,43 +233,40 @@ const chose = (f) => {
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-track {
-    background: oklch(0.19 0 0);
+    @apply bg-transparent;
+    margin: 12px 0;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-thumb {
-    background: oklch(0.35 0 0);
-    border-radius: 3px;
+    @apply bg-dark-750 rounded-full;
+    border: 2px solid transparent;
+    background-clip: padding-box;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar-thumb:hover {
-    background: oklch(0.45 0 0);
+    @apply bg-dark-800;
 }
 
 .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);
+    @apply cursor-pointer text-left text-white transition-all duration-200 flex items-center justify-between;
+    @apply px-4 py-3 text-sm font-medium border-b border-dark-625/30;
+    min-width: 100%;
 }
 
 .dropdown-item:last-child {
-    border-bottom: none;
+    @apply border-b-0;
 }
 
 .dropdown-item:hover {
-    @apply bg-dark-600;
-    color: oklch(1 0 0);
+    @apply bg-dark-550 text-white;
 }
 
 .dropdown-item:active {
-    @apply bg-dark-650;
-    box-shadow: inset 0 2px 4px oklch(0 0 0 / 0.4);
+    @apply bg-dark-650 shadow-input-inset;
 }
 
 .dropdown-item.selected {
-    background: oklch(0.72 0.15 145 / 0.15);
-    color: oklch(0.72 0.15 145);
+    @apply bg-primary/15 text-primary;
 }
 
 .dropdown-item:first-child {
@@ -244,37 +278,10 @@ const chose = (f) => {
 }
 
 .dropdown-item-text {
-    @apply pr-2;
-    white-space: nowrap;
-    overflow: visible;
+    @apply pr-2 whitespace-nowrap;
 }
 
 .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);
+    @apply w-4 h-4 text-primary;
 }
 </style>