ketekny-ui-kit 1.0.20 → 1.0.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/ui/kSelect.vue

@@ -37,15 +37,15 @@
           :side-offset="6"
           class="select-content z-[9999] bg-white border border-gray-200 rounded-lg shadow-[0_10px_38px_-10px_rgba(22,23,24,0.35),0_10px_20px_-15px_rgba(22,23,24,0.2)] overflow-hidden"
         >
-          <div v-if="searchable" class="sticky top-0 z-10 p-1.5 border-b border-gray-100 bg-white">
+          <div v-if="searchable" class="sticky top-0 z-10 p-2 border-b border-gray-100 bg-white">
             <div class="relative">
-              <Search class="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400 pointer-events-none" />
+              <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
               <input
                 ref="searchInput"
                 type="text"
                 v-model="searchQuery"
                 placeholder="Αναζήτηση..."
-                class="w-full pl-7 pr-2.5 py-1.5 text-sm border border-gray-200 rounded-md focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30 transition-colors placeholder-gray-400"
+                class="w-full pl-9 pr-3 py-2 text-base border border-gray-200 rounded-lg focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors placeholder-gray-400"
                 role="searchbox"
                 aria-label="Search options"
                 @keydown="handleSearchKeydown"
@@ -54,13 +54,9 @@
             </div>
           </div>
 
-          <SelectScrollUpButton class="flex items-center justify-center py-1 text-gray-400 hover:text-gray-600 cursor-default bg-white border-b border-gray-100">
-            <ChevronUp class="w-4 h-4" />
-          </SelectScrollUpButton>
-
           <SelectViewport
             ref="viewportRef"
-            class="p-1"
+            class="select-viewport p-1 overflow-y-scroll"
             :style="{ maxHeight: dropdownHeight }"
             @keydown="handleViewportKeydown"
           >
@@ -68,7 +64,7 @@
               v-for="(option, index) in filteredOptions"
               :key="option[optionValue]"
               :value="option[optionValue]"
-              class="select-item relative flex items-center gap-1.5 rounded-[4px] py-2.5 pl-7 pr-3 text-sm cursor-pointer outline-none select-none text-slate-700
+              class="select-item relative flex items-center gap-1.5 rounded-[4px] py-2.5 pl-8 pr-3 text-base cursor-pointer outline-none select-none text-slate-700
                      data-[highlighted]:bg-primary data-[highlighted]:text-white
                      data-[state=checked]:bg-primary/5 data-[state=checked]:text-primary
                      data-[state=checked]:data-[highlighted]:bg-primary data-[state=checked]:data-[highlighted]:text-white"
@@ -81,15 +77,11 @@
               <SelectItemText class="truncate">{{ option[optionLabel] }}</SelectItemText>
             </SelectItem>
 
-            <div v-if="filteredOptions.length === 0" class="flex flex-col items-center gap-1.5 px-3 py-4 text-sm text-gray-400 text-center">
+            <div v-if="filteredOptions.length === 0" class="flex flex-col items-center gap-1.5 px-3 py-4 text-base text-gray-400 text-center">
               <SearchX class="w-5 h-5 text-gray-300" />
               <span>Δεν βρέθηκαν επιλογές</span>
             </div>
           </SelectViewport>
-
-          <SelectScrollDownButton class="flex items-center justify-center py-1 text-gray-400 hover:text-gray-600 cursor-default bg-white border-t border-gray-100">
-            <ChevronDown class="w-4 h-4" />
-          </SelectScrollDownButton>
         </SelectContent>
       </SelectPortal>
     </SelectRoot>
@@ -113,13 +105,11 @@ import {
   SelectItemText,
   SelectPortal,
   SelectRoot,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
   SelectTrigger,
   SelectValue,
   SelectViewport,
 } from "reka-ui";
-import { X, ChevronDown, ChevronUp, Check, Search, SearchX } from "lucide-vue-next";
+import { X, ChevronDown, Check, Search, SearchX } from "lucide-vue-next";
 
 const props = defineProps({
   options: { type: Array, required: true },
@@ -298,5 +288,30 @@ function handleViewportKeydown(event) {
   transition: background-color 80ms, color 80ms;
 }
 
-</style>
+:deep([data-reka-select-viewport]) {
+  scrollbar-gutter: stable;
+  scrollbar-width: auto !important;
+  scrollbar-color: #475569 #cbd5e1 !important;
+  -ms-overflow-style: auto !important;
+}
 
+:deep([data-reka-select-viewport]::-webkit-scrollbar) {
+  display: block !important;
+  width: 12px;
+}
+
+:deep([data-reka-select-viewport]::-webkit-scrollbar-track) {
+  background: #cbd5e1;
+}
+
+:deep([data-reka-select-viewport]::-webkit-scrollbar-thumb) {
+  background-color: #475569;
+  border-radius: 999px;
+  border: 2px solid #cbd5e1;
+}
+
+:deep([data-reka-select-viewport]::-webkit-scrollbar-thumb:hover) {
+  background-color: #334155;
+}
+
+</style>