ketekny-ui-kit 1.0.21 → 1.0.23

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.21",
+  "version": "1.0.23",
   "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

@@ -57,7 +57,7 @@
           <SelectViewport
             ref="viewportRef"
             class="select-viewport p-1 overflow-y-scroll"
-            :style="{ maxHeight: dropdownHeight }"
+            :style="{ maxHeight: resolvedDropdownHeight }"
             @keydown="handleViewportKeydown"
           >
             <SelectItem
@@ -138,9 +138,44 @@ const defaultStyle = "w-full px-3 py-2 border rounded-lg transition shadow-sm fo
 const errorStyle = "border-red-500 focus:ring focus:ring-red-300";
 const disabledStyle = "!bg-gray-100 !text-gray-400 !cursor-not-allowed";
 
+function normalizeDropdownHeight(value) {
+  const raw = String(value ?? "").trim();
+  if (!raw) return "min(400px, 40vh)";
+
+  // Accept Tailwind arbitrary values like max-h-[400px] / min-h-[20rem].
+  const arbitraryMatch = raw.match(/^(?:max-h|min-h)-\[(.+)\]$/);
+  if (arbitraryMatch) return arbitraryMatch[1].trim();
+
+  // Accept Tailwind scale values like max-h-80 -> 20rem.
+  const scaleMatch = raw.match(/^(?:max-h|min-h)-(\d+(?:\.\d+)?)$/);
+  if (scaleMatch) {
+    const scale = Number(scaleMatch[1]);
+    if (Number.isFinite(scale)) return `${scale * 0.25}rem`;
+  }
+
+  // Accept common Tailwind keywords.
+  const keywordMap = {
+    "max-h-full": "100%",
+    "min-h-full": "100%",
+    "max-h-screen": "100vh",
+    "min-h-screen": "100vh",
+    "max-h-fit": "fit-content",
+    "min-h-fit": "fit-content",
+    "max-h-min": "min-content",
+    "min-h-min": "min-content",
+    "max-h-max": "max-content",
+    "min-h-max": "max-content",
+  };
+  if (keywordMap[raw]) return keywordMap[raw];
+
+  // Already valid CSS values (e.g. 20rem, 400px, min(400px, 40vh)).
+  return raw;
+}
+
 const computedId = computed(() => (props.id != null && props.id !== "" ? props.id : generatedId));
 const hasError = computed(() => props.error != null && props.error !== false);
 const isSelectionSet = computed(() => props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== "");
+const resolvedDropdownHeight = computed(() => normalizeDropdownHeight(props.dropdownHeight));
 
 const internalValue = computed({
   get() {

package/tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: "class",
   content: [
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",