ketekny-ui-kit 1.0.16 → 1.0.17

package/package.json

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

package/src/ui/kDialog.vue

@@ -2,24 +2,32 @@
   <div
     v-if="visible"
     :style="{ zIndex: zIndex }"
-    class="fixed inset-0 flex items-center justify-center overflow-hidden bg-black bg-opacity-50 backdrop-blur-sm"
+    class="fixed inset-0 flex items-center justify-center overflow-hidden bg-black/50 backdrop-blur-sm"
+    @click.self="onBackdropClick"
   >
     <transition name="dialog">
       <div
-        class="relative bg-white shadow-lg overflow-hidden rounded-2xl flex flex-col max-h-[90vh] w-full m-4 sm:min-w-[600px] sm:w-auto"
+        ref="dialogPanel"
+        class="relative bg-white shadow-lg overflow-hidden rounded-2xl flex flex-col max-h-[90vh] m-4"
         :class="dialogClasses"
+        :role="'dialog'"
+        :aria-modal="'true'"
+        :aria-labelledby="titleId"
+        tabindex="-1"
         v-show="visible"
       >
         <!-- Header -->
-        <div class="flex flex-row items-center p-4 text-white bg-primary shrink-0">
-          <div class="text-xl font-semibold !text-white">{{ title }}</div>
+        <div class="flex flex-row items-center p-4 text-white bg-sky-800 shrink-0">
+          <div :id="titleId" class="text-xl font-semibold !text-white">{{ title }}</div>
           <div class="flex-1" />
-          <div
-            class="p-1 text-black transition duration-100 ease-in-out rounded-full cursor-pointer text-secondary hover:bg-white hover:text-primary"
+          <button
+            type="button"
+            class="p-1 text-black transition duration-100 ease-in-out rounded-full cursor-pointer text-secondary hover:bg-white hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+            aria-label="Close dialog"
             @click="close"
           >
-            <x />
-          </div>
+            <X />
+          </button>
         </div>
 
         <!-- Fixed content (optional) -->
@@ -46,6 +54,7 @@ import { X } from 'lucide-vue-next'
 
 // 🔥 Global z-index tracker
 let dialogZIndexCounter = 1000
+let bodyScrollLockCounter = 0
 
 export default {
   name: 'kDialog',
@@ -54,6 +63,14 @@ export default {
     visible: Boolean,
     title: String,
     maximized: Boolean,
+    closeOnBackdrop: {
+      type: Boolean,
+      default: true,
+    },
+    closeOnEsc: {
+      type: Boolean,
+      default: true,
+    },
     width: {
       type: String,
       default: '',
@@ -62,39 +79,77 @@ export default {
   data() {
     return {
       zIndex: 1000, // Default fallback
+      titleId: `dialog-title-${Math.random().toString(36).slice(2, 10)}`,
+      previousActiveElement: null,
     }
   },
   watch: {
-    visible(val) {
-      if (val) {
-        dialogZIndexCounter += 1
-        this.zIndex = dialogZIndexCounter
-      }
+    visible: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          dialogZIndexCounter += 1
+          this.zIndex = dialogZIndexCounter
+          this.previousActiveElement = document.activeElement
+          this.lockBodyScroll()
+          document.addEventListener('keydown', this.handleKeydown)
+          this.$nextTick(() => {
+            this.$refs.dialogPanel?.focus()
+          })
+        } else {
+          this.unlockBodyScroll()
+          document.removeEventListener('keydown', this.handleKeydown)
+          this.$nextTick(() => {
+            this.previousActiveElement?.focus?.()
+            this.previousActiveElement = null
+          })
+        }
+      },
     },
   },
-  //   mounted() {
-  //     // ✅ Assign a new z-index when component is created
-  //     dialogZIndexCounter += 1
-  //     this.zIndex = dialogZIndexCounter
-  //   },
   computed: {
     computedWidth() {
-      return this.width ? this.width : 'sm:w-[600px]'
+      return 'w-[600px] max-w-[calc(100vw-2rem)]'
     },
     dialogClasses() {
       if (this.width) {
-        return this.computedWidth
+        return this.width
       } else if (this.maximized) {
-        return 'max-w-none h-[90vh]'
+        return 'w-[calc(100vw-2rem)] max-w-none h-[90vh]'
       } else {
         return this.computedWidth + ' max-h-[90vh]'
       }
     },
   },
   methods: {
+    onBackdropClick() {
+      if (!this.closeOnBackdrop) return
+      this.close()
+    },
+    handleKeydown(event) {
+      if (!this.visible || !this.closeOnEsc) return
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        this.close()
+      }
+    },
+    lockBodyScroll() {
+      bodyScrollLockCounter += 1
+      if (bodyScrollLockCounter > 1) return
+      document.body.style.overflow = 'hidden'
+    },
+    unlockBodyScroll() {
+      bodyScrollLockCounter = Math.max(0, bodyScrollLockCounter - 1)
+      if (bodyScrollLockCounter > 0) return
+      document.body.style.overflow = ''
+    },
     close() {
       this.$emit('update:visible', false)
     },
   },
+  beforeUnmount() {
+    this.unlockBodyScroll()
+    document.removeEventListener('keydown', this.handleKeydown)
+  },
 }
 </script>

package/src/ui/kInput.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="w-full text-primary/90">
-    <label v-if="label != null" :for="inputId" class="inputLabel" :class="hasError ? theme.labelError : theme.label">
+    <label
+      v-if="label != null"
+      :for="inputId"
+      class="inputLabel"
+      :class="hasError ? theme.labelError : disabled ? theme.labelDisabled : theme.label">
       {{ label }}
     </label>
     <div class="relative">
@@ -22,11 +26,12 @@
         :aria-invalid="hasError ? 'true' : 'false'"
         :aria-describedby="describedById"
       />
-      <component v-if="iconComponent" :is="iconComponent" :class="theme.trailingIcon" />
+      <component v-if="iconComponent" :is="iconComponent" :class="[theme.trailingIcon, disabled ? theme.trailingIconDisabled : '']" />
       <div v-if="isPassword" :class="theme.passwordToggle">
         <button
           type="button"
-          :class="theme.passwordToggleButton"
+          :disabled="disabled"
+          :class="[theme.passwordToggleButton, disabled ? theme.passwordToggleButtonDisabled : '']"
           :aria-label="showPassword ? 'Hide password' : 'Show password'"
           :aria-pressed="showPassword ? 'true' : 'false'"
           @click="showPassword = !showPassword">

package/src/ui/kSelect.vue

@@ -44,7 +44,7 @@
         v-if="isOpen"
         ref="dropdown"
         :id="dropdownId"
-        class="absolute z-[9999] mt-1 overflow-auto bg-white border border-gray-200 rounded-lg shadow-lg"
+        class="absolute z-[9999] mt-1 overflow-auto bg-white border border-gray-200 rounded-lg shadow-[0_20px_45px_-15px_rgba(15,23,42,0.35),0_8px_18px_-10px_rgba(15,23,42,0.25)] ring-1 ring-slate-900/10"
         :class="dropdownHeight"
         :style="dropdownPositionStyle"
         role="listbox"
@@ -71,12 +71,19 @@
             :id="`${dropdownId}-opt-${option[optionValue]}`"
             :key="option[optionValue]"
             @click="selectOption(option)"
-            class="px-3 py-2 rounded cursor-pointer"
-            :class="option[optionValue] === selectedValue ? 'bg-primary text-white' : 'hover:bg-blue-100'"
+            class="px-3 py-2 rounded cursor-pointer transition-colors"
+            :class="
+              option[optionValue] === selectedValue
+                ? 'bg-primary/10 text-primary font-medium'
+                : 'text-slate-700 hover:bg-primary/5'
+            "
             role="option"
             :aria-selected="(option[optionValue] === selectedValue).toString()"
           >
-            {{ option[optionLabel] }}
+            <div class="flex items-center justify-between gap-2">
+              <span class="truncate">{{ option[optionLabel] }}</span>
+              <Check v-if="option[optionValue] === selectedValue" class="w-4 h-4 shrink-0 text-primary" />
+            </div>
           </div>
         </div>
 
@@ -97,7 +104,7 @@
 </template>
 
 <script setup>
-import { X, ChevronDown, ChevronUp } from "lucide-vue-next";
+import { X, ChevronDown, ChevronUp, Check } from "lucide-vue-next";
 </script>
 
 <script>

package/src/ui/kToggle.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="labelStyle === 'inline' ? 'flex items-center' : ''">
     <!-- Block-style label -->
-    <div v-if="showLabel && labelStyle !== 'inline'" class="block mb-1 text-sm font-bold text-primary/90" for="toggle">
+    <div v-if="showLabel && labelStyle !== 'inline'" :class="['block mb-1 text-sm font-bold', disabled ? 'text-slate-500' : 'text-primary/90']" for="toggle">
       {{ label }}
     </div>
 
@@ -13,15 +13,27 @@
       :aria-disabled="disabled.toString()"
       :disabled="disabled"
       :class="[
-        'w-16 h-8 flex items-center rounded-full p-1 transition duration-300',
-        modelValue ? 'bg-primary' : 'bg-gray-400',
-        disabled ? 'opacity-50 cursor-not-allowed' : '',
+        'w-16 h-8 flex items-center rounded-full p-1 transition duration-300 border',
+        disabled
+          ? 'bg-slate-200 border-slate-300 cursor-not-allowed'
+          : modelValue
+            ? 'bg-primary border-primary shadow-sm shadow-primary/30'
+            : 'bg-gray-400 border-gray-400',
       ]">
-      <div :class="['w-6 h-6 bg-white rounded-full shadow-md transform transition duration-300', modelValue ? 'translate-x-8' : 'translate-x-0']"></div>
+      <div
+        :class="[
+          'w-6 h-6 rounded-full shadow-md transform transition duration-300',
+          disabled ? 'bg-slate-100' : modelValue ? 'bg-white ring-2 ring-primary/20' : 'bg-white',
+          modelValue ? 'translate-x-8' : 'translate-x-0',
+        ]"></div>
     </button>
 
     <!-- Inline-style label -->
-    <div v-if="showLabel && labelStyle === 'inline'" class="ml-2 text-sm font-bold cursor-pointer text-primary/90" :for="computedId" @click="toggle">
+    <div
+      v-if="showLabel && labelStyle === 'inline'"
+      :class="['ml-2 text-sm font-bold', disabled ? 'text-slate-500 cursor-not-allowed' : 'text-primary/90 cursor-pointer']"
+      :for="computedId"
+      @click="toggle">
       {{ label }}
     </div>
   </div>

package/src/ui/themes/kInput.theme.js

@@ -1,16 +1,19 @@
 export const K_INPUT_THEME = {
   label: "text-primary/90",
+  labelDisabled: "text-slate-500",
   labelError: "text-rose-800",
   baseInput:
     "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-slate-900 bg-white placeholder-gray-400 focus:ring-2 focus:ring-primary/25 focus:border-primary",
   withRightAdornment: "pr-10",
   withPasswordToggle: "pr-14",
-  disabled: "bg-slate-100 text-slate-500 cursor-not-allowed border-slate-300",
+  disabled: "!bg-slate-50 !text-slate-400 !border-slate-200 !shadow-none cursor-not-allowed placeholder-slate-400",
   errorInput: "border-rose-500 bg-rose-50/40 focus:border-rose-600 focus:ring-rose-500/20",
   infoText: "text-sm text-slate-600",
   errorText: "text-sm text-rose-700",
   trailingIcon: "absolute w-4 h-4 text-primary/70 -translate-y-1/2 pointer-events-none right-3 top-1/2",
+  trailingIconDisabled: "text-slate-400",
   passwordToggle: "absolute inset-y-0 right-0 flex items-center pr-3 text-slate-700",
   passwordToggleButton:
     "text-xs font-medium select-none rounded px-1 py-0.5 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+  passwordToggleButtonDisabled: "text-slate-400 cursor-not-allowed hover:bg-transparent",
 };

package/tailwind-preset.js

@@ -8,7 +8,7 @@ const config = {
                 header: '#256D96',
                 background: '#FEFCF6',
                 accent: '#8C1F1F',
-                primary: '#1E5F7C',
+                primary: '#0369A1',
                 secondary: '#f5f7fa',
                 success: '#228B22',
                 danger: '#A32626',
@@ -50,4 +50,4 @@ const config = {
     plugins: [],
 }
 
-export default config
+export default config

package/tailwind.config.js

@@ -22,7 +22,7 @@ export default {
         header: "#256D96",
         background: "#FEFCF6",
         accent: "#8C1F1F",
-        primary: "#1E5F7C",
+        primary: "#0369A1",
         secondary: "#f5f7fa",
         success: "#228B22",
         danger: "#A32626",