ketekny-ui-kit 1.0.26 → 1.0.27

package/package.json

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

package/src/style/style.css

@@ -7,16 +7,20 @@
 h1, h2, h3, h4{
     color: theme('colors.primary');
     font-weight: bold;
+    line-height: 1.2;
 }
 h1{
-    font-size: 2.5em;
+    font-size: clamp(1.625rem, 4vw + 0.75rem, 2.5rem);
 }
 
 h2{
-    font-size: 2em;
+    font-size: clamp(1.375rem, 3vw + 0.7rem, 2rem);
 }
 h3{
-    font-size: 1.5em;
+    font-size: clamp(1.125rem, 2vw + 0.6rem, 1.5rem);
+}
+h4{
+    font-size: clamp(1rem, 1.5vw + 0.55rem, 1.25rem);
 }
 
 .group{
@@ -36,4 +40,4 @@ li{
     @apply p-2 rounded cursor-pointer ;
 
 }
-}
+}

package/src/ui/kDatatable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['rounded-lg border border-primary/15', disabled ? 'pointer-events-none opacity-60' : '']">
+  <div :class="['k-datatable-wrapper rounded-lg border border-primary/15', disabled ? 'pointer-events-none opacity-60' : '']">
     <EasyDataTable
       v-bind="$attrs"
       :headers="headers"
@@ -102,6 +102,15 @@ export default {
 </script>
 
 <style>
+.k-datatable-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.k-datatable-wrapper .customize-table {
+  min-width: 640px;
+}
+
 .customize-table {
   --easy-table-border: none;
   --easy-table-row-border: 1px solid #d1d5db;
@@ -143,13 +152,6 @@ export default {
   --easy-table-loading-mask-background-color: rgba(255, 255, 255, 0.6);
 }
 
-.customize-table {
-  --easy-table-border: none;
-  --easy-table-row-border: 1px solid #d1d5db;
-  /* ... your other variables ... */
-  --easy-table-footer-padding: 1rem;
-}
-
 /* Target the rows-per-page dropdown */
 .customize-table .easy-data-table__footer select {
   background-color: #fff; /* white dropdown background */
@@ -164,4 +166,15 @@ export default {
   background-color: #fff;
   color: #1f2937;
 }
+
+@media (max-width: 640px) {
+  .k-datatable-wrapper .customize-table {
+    --easy-table-header-font-size: 12px;
+    --easy-table-header-item-padding: 0.5rem 0.625rem;
+    --easy-table-body-row-font-size: 12px;
+    --easy-table-body-item-padding: 0.5rem 0.625rem;
+    --easy-table-footer-font-size: 12px;
+    --easy-table-footer-padding: 0.75rem;
+  }
+}
 </style>

package/src/ui/kDialog.vue

@@ -8,7 +8,7 @@
     <transition name="dialog">
       <div
         ref="dialogPanel"
-        class="relative bg-white dark:bg-slate-900 shadow-lg overflow-hidden rounded-2xl flex flex-col max-h-[90vh] m-4"
+        class="relative bg-white dark:bg-slate-900 shadow-lg overflow-hidden rounded-2xl flex flex-col max-h-[calc(100dvh-1rem)] sm:max-h-[90vh] m-2 sm:m-4"
         :class="dialogClasses"
         :role="'dialog'"
         :aria-modal="'true'"
@@ -17,8 +17,8 @@
         v-show="visible"
       >
         <!-- Header -->
-        <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 flex-row items-center p-3 text-white bg-sky-800 shrink-0 sm:p-4">
+          <div :id="titleId" class="text-base font-semibold !text-white sm:text-xl">{{ title }}</div>
           <div class="flex-1" />
           <button
             type="button"
@@ -36,12 +36,15 @@
         </div>
 
         <!-- Scrollable slot content -->
-        <div class="flex-1 p-4 overflow-auto bg-secondary dark:bg-slate-800/60">
+        <div class="flex-1 p-3 overflow-auto bg-secondary dark:bg-slate-800/60 sm:p-4">
           <slot></slot>
         </div>
 
         <!-- Footer -->
-        <div v-if="$slots.footer" class="flex flex-row justify-end gap-2 p-4 shrink-0 border-t border-slate-100 dark:border-slate-700">
+        <div
+          v-if="$slots.footer"
+          class="flex flex-col-reverse gap-2 p-3 border-t shrink-0 border-slate-100 dark:border-slate-700 sm:flex-row sm:justify-end sm:p-4"
+        >
           <slot name="footer"></slot>
         </div>
       </div>
@@ -109,15 +112,15 @@ export default {
   },
   computed: {
     computedWidth() {
-      return 'w-[600px] max-w-[calc(100vw-2rem)]'
+      return 'w-[96vw] sm:w-[600px] max-w-[calc(100vw-1rem)] sm:max-w-[calc(100vw-2rem)]'
     },
     dialogClasses() {
       if (this.width) {
-        return this.width
+        return `${this.width} max-w-[calc(100vw-1rem)] sm:max-w-[calc(100vw-2rem)]`
       } else if (this.maximized) {
-        return 'w-[calc(100vw-2rem)] max-w-none h-[90vh]'
+        return 'w-[calc(100vw-1rem)] sm:w-[calc(100vw-2rem)] max-w-none h-[calc(100dvh-1rem)] sm:h-[90vh]'
       } else {
-        return this.computedWidth + ' max-h-[90vh]'
+        return this.computedWidth + ' max-h-[calc(100dvh-1rem)] sm:max-h-[90vh]'
       }
     },
   },

package/src/ui/kDrawer.vue

@@ -7,22 +7,24 @@
     <!-- <div class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm" @click="close"></div> -->
 
     <!-- Drawer -->
-    <div class="fixed top-0 bottom-0 z-50 flex flex-col bg-white dark:bg-slate-900 shadow-xl w-[400px] transition-all duration-500" :class="side === 'right' ? 'right-0' : 'left-0'">
+    <div
+      class="fixed top-0 bottom-0 z-50 flex w-[calc(100vw-1rem)] max-w-full flex-col bg-white shadow-xl transition-all duration-500 dark:bg-slate-900 sm:w-[400px]"
+      :class="side === 'right' ? 'right-0' : 'left-0'">
       <!-- Header -->
-      <div class="flex items-center justify-between p-4 text-white bg-primary dark:bg-sky-800">
-        <div class="text-lg font-semibold">{{ title }}</div>
+      <div class="flex items-center justify-between p-3 text-white bg-primary dark:bg-sky-800 sm:p-4">
+        <div class="text-base font-semibold sm:text-lg">{{ title }}</div>
         <button @click="close" class="text-white hover:text-gray-200">
           <X class="w-5 h-5" />
         </button>
       </div>
 
       <!-- Content -->
-      <div class="flex-1 p-4 overflow-auto bg-secondary dark:bg-slate-800/60">
+      <div class="flex-1 p-3 overflow-auto bg-secondary dark:bg-slate-800/60 sm:p-4">
         <slot></slot>
       </div>
 
       <!-- Footer -->
-      <div class="p-4 bg-gray-100 dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700">
+      <div class="p-3 bg-gray-100 border-t border-slate-200 dark:bg-slate-800 dark:border-slate-700 sm:p-4">
         <slot name="footer"></slot>
       </div>
     </div>

package/src/ui/kMenu.vue

@@ -24,7 +24,7 @@
       <div
         v-if="isOpen"
         ref="menuPanelRef"
-        class="z-[9999] overflow-visible border rounded-lg shadow-lg bg-white/95 backdrop-blur-sm border-primary/20 ring-1 ring-primary/10"
+        class="z-[9999] overflow-auto border rounded-lg shadow-lg bg-white/95 backdrop-blur-sm border-primary/20 ring-1 ring-primary/10 max-h-[70vh]"
         :style="panelStyle"
         role="menu">
         <span
@@ -153,12 +153,14 @@ export default {
       const rect = trigger.getBoundingClientRect();
       const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
       const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-      const panelWidth = this.$refs.menuPanelRef?.offsetWidth || 224;
+      const preferredPanelWidth = this.$refs.menuPanelRef?.offsetWidth || 224;
       const viewportWidth = window.innerWidth;
       const viewportHeight = window.innerHeight;
       const pad = 8;
       const gap = 8;
       const panelHeight = this.$refs.menuPanelRef?.offsetHeight || 0;
+      const maxPanelWidth = Math.max(120, viewportWidth - pad * 2);
+      const panelWidth = Math.min(preferredPanelWidth, maxPanelWidth);
 
       // bottom-end (default): align panel right edge with trigger right edge, below trigger.
       const preferredLeft = rect.right + scrollLeft - panelWidth;

package/src/ui/kSelectButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex overflow-hidden border rounded-md border-primary/25" style="width: fit-content;" :aria-disabled="disabled.toString()">
+  <div class="k-select-button inline-flex max-w-full overflow-x-auto border rounded-md border-primary/25" :aria-disabled="disabled.toString()">
 
     <button
       v-for="(option, index) in options"
@@ -34,7 +34,7 @@ export default {
   emits: ["update:modelValue"],
   computed: {
     baseClasses() {
-      return "px-4 py-2 text-sm font-medium border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-inset";
+      return "shrink-0 whitespace-nowrap px-3 py-2.5 text-sm font-medium border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-inset sm:px-4 sm:py-2";
     },
     activeClasses() {
       return "bg-primary text-white";
@@ -68,3 +68,10 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.k-select-button {
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+}
+</style>

package/src/ui/kTabs.vue

@@ -1,11 +1,16 @@
 <template>
-  <div class="w-full overflow-hidden bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md">
-    <div class="flex">
+  <div class="w-full overflow-hidden bg-white border border-slate-200 rounded-md dark:bg-slate-800 dark:border-slate-700">
+    <div class="k-tabs-scroll flex overflow-x-auto">
       <button
         v-for="tab in tabs"
         :key="tab.id"
         @click="selectTab(tab.id)"
-        :class="['px-8 py-4 text-lg font-medium', modelValue === tab.id ? 'bg-primary text-secondary' : 'text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50']"
+        :class="[
+          'shrink-0 whitespace-nowrap px-4 py-3 text-sm font-medium sm:px-8 sm:py-4 sm:text-lg',
+          modelValue === tab.id
+            ? 'bg-primary text-secondary'
+            : 'text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50',
+        ]"
       >
         {{ tab.title }}
       </button>
@@ -34,3 +39,10 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.k-tabs-scroll {
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+}
+</style>