ketekny-ui-kit 1.0.22 → 1.0.23

package/package.json

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

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}",