ketekny-ui-kit 1.0.20 → 1.0.22

package/index.js

@@ -22,6 +22,7 @@ import kMenu from './src/ui/kMenu.vue'
 import kTags from './src/ui/kTags.vue'
 import kSearch from './src/ui/kSearch.vue'
 import kArrayList from './src/ui/kArrayList.vue'
+import kList from './src/ui/kList.vue'
 import kSkeleton from './src/ui/kSkeleton.vue'
 import kProgressBar from './src/ui/kProgressBar.vue'
 import kTextArea from './src/ui/kTextArea.vue'
@@ -49,7 +50,7 @@ export {
   kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kTree,
 
   // Form Components
-  kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kTextArea,
+  kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
 
   // Dialogs
   kDialog, kDrawer,

package/package.json

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

package/src/ui/kList.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="w-full">
+    <dl
+      v-if="!isRowFormat"
+      class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
+    >
+      <div
+        v-for="(stat, index) in normalizedStats"
+        :key="resolveKey(stat, index)"
+        class="flex items-center gap-3 p-3 border border-gray-200 rounded-xl bg-white"
+      >
+        <div
+          v-if="stat.icon"
+          class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary"
+        >
+          <kIcon
+            v-if="typeof stat.icon === 'string'"
+            :name="stat.icon"
+            :size="18"
+          />
+          <component
+            :is="stat.icon"
+            v-else
+            class="w-[18px] h-[18px]"
+          />
+        </div>
+
+        <div class="min-w-0">
+          <dt class="text-sm text-gray-500 truncate">{{ stat.label }}</dt>
+          <dd class="text-xl font-semibold text-gray-900 truncate">{{ stat.value }}</dd>
+        </div>
+      </div>
+    </dl>
+
+    <div v-else class="overflow-hidden bg-white border border-gray-200 rounded-xl">
+      <table class="w-full">
+        <tbody>
+          <tr
+            v-for="(stat, index) in normalizedStats"
+            :key="resolveKey(stat, index)"
+            class="border-b border-gray-200 last:border-b-0"
+          >
+            <td class="px-4 py-3 text-sm text-gray-600">
+              <div class="flex items-center gap-2">
+                <div
+                  v-if="stat.icon"
+                  class="flex items-center justify-center w-7 h-7 rounded-md bg-primary/10 text-primary"
+                >
+                  <kIcon
+                    v-if="typeof stat.icon === 'string'"
+                    :name="stat.icon"
+                    :size="14"
+                  />
+                  <component
+                    :is="stat.icon"
+                    v-else
+                    class="w-[14px] h-[14px]"
+                  />
+                </div>
+                <span>{{ stat.label }}</span>
+              </div>
+            </td>
+            <td class="px-4 py-3 text-base font-semibold text-right text-gray-900">
+              {{ stat.value }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import kIcon from './kIcon.vue'
+
+export default {
+  name: 'kList',
+  components: {
+    kIcon,
+  },
+  props: {
+    stats: {
+      type: Array,
+      default: () => [],
+    },
+    format: {
+      type: String,
+      default: 'col',
+      validator: (value) => ['col', 'row'].includes(value),
+    },
+  },
+  computed: {
+    isRowFormat() {
+      return this.format === 'row'
+    },
+    normalizedStats() {
+      return this.stats.map((stat) => ({
+        label: stat?.label ?? '',
+        value: stat?.value ?? '-',
+        icon: stat?.icon ?? null,
+      }))
+    },
+  },
+  methods: {
+    resolveKey(stat, index) {
+      return `${String(stat.label)}-${index}`
+    },
+  },
+}
+</script>

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>