ketekny-ui-kit 1.0.26 → 1.0.28

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "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 ref="tableWrapper" :class="['k-datatable-wrapper rounded-lg border border-primary/15', disabled ? 'pointer-events-none opacity-60' : '']">
     <EasyDataTable
       v-bind="$attrs"
       :headers="headers"
@@ -8,8 +8,10 @@
       :show-select="effectiveSelectionMode !== 'none'"
       :single-select="effectiveSelectionMode === 'single'"
       v-if="effectiveSelectionMode !== 'none'"
-      v-model:items-selected="internalSelection"
+      :items-selected="internalSelection"
+      @update:items-selected="handleSelectionUpdate"
       :itemSelectable="itemSelectable"
+      :body-row-class-name="composeBodyRowClassName"
       alternating
       buttons-pagination
       table-class-name="customize-table"
@@ -21,7 +23,7 @@
     </EasyDataTable>
 
     <!-- Render separate table without v-model when no selection -->
-    <EasyDataTable v-else v-bind="$attrs" :headers="headers" :items="items" :search="search" :show-select="false" alternating buttons-pagination table-class-name="customize-table">
+    <EasyDataTable v-else v-bind="$attrs" :headers="headers" :items="items" :search="search" :show-select="false" :body-row-class-name="composeBodyRowClassName" alternating buttons-pagination table-class-name="customize-table">
       <template v-for="(_, name) in $slots" :key="name" v-slot:[name]="slotProps">
         <slot :name="name" v-bind="slotProps" />
       </template>
@@ -69,8 +71,20 @@ export default {
   data() {
     return {
       internalSelection: this.normalizeModelValue(this.modelValue),
+      pendingSelectionInteraction: null,
+      lastSelectionAnchor: null,
+      lastSelectionAnchorRowNumber: null,
     };
   },
+  created() {
+    this.currentPageRowsCache = [];
+  },
+  mounted() {
+    this.bindSelectionInteractionListener();
+  },
+  beforeUnmount() {
+    this.unbindSelectionInteractionListener();
+  },
   computed: {
     effectiveSelectionMode() {
       return this.disabled ? "none" : this.selectionMode;
@@ -81,16 +95,183 @@ export default {
     modelValue(val) {
       this.internalSelection = this.normalizeModelValue(val);
     },
-    internalSelection(newVal) {
+  },
+
+  methods: {
+    handleSelectionUpdate(newSelection) {
       if (this.selectionMode === "single") {
-        this.$emit("update:modelValue", newVal[0] || null);
-      } else if (this.selectionMode === "multiple") {
-        this.$emit("update:modelValue", newVal);
+        const nextSelection = Array.isArray(newSelection) ? newSelection : [];
+        this.internalSelection = nextSelection;
+        this.$emit("update:modelValue", nextSelection[0] || null);
+        return;
+      }
+
+      if (this.selectionMode === "multiple") {
+        const oldSelection = Array.isArray(this.internalSelection) ? this.internalSelection : [];
+        const candidateSelection = Array.isArray(newSelection) ? newSelection : [];
+        const nextSelection = this.resolveShiftRangeSelection(candidateSelection, oldSelection);
+        this.internalSelection = nextSelection;
+        this.$emit("update:modelValue", nextSelection);
       }
     },
-  },
+    bindSelectionInteractionListener() {
+      this.$refs.tableWrapper?.addEventListener("click", this.captureSelectionInteraction, true);
+    },
+    unbindSelectionInteractionListener() {
+      this.$refs.tableWrapper?.removeEventListener("click", this.captureSelectionInteraction, true);
+    },
+    captureSelectionInteraction(event) {
+      if (this.selectionMode !== "multiple" || this.disabled || !(event.target instanceof Element)) {
+        return;
+      }
 
-  methods: {
+      const checkbox = event.target.closest(".easy-checkbox");
+      if (!checkbox) return;
+
+      // Ignore the header "select all" checkbox.
+      const row = checkbox.closest("tbody tr");
+      if (!row) return;
+
+      const rowNumber = this.resolveClickedRowNumber(row);
+      if (!rowNumber) return;
+      const clickedItem = this.currentPageRowsCache[rowNumber - 1];
+
+      if (!event.shiftKey && clickedItem) {
+        this.lastSelectionAnchor = clickedItem;
+        this.lastSelectionAnchorRowNumber = rowNumber;
+      }
+
+      if (event.shiftKey && this.lastSelectionAnchor && clickedItem) {
+        const anchorIndex = this.findItemIndex(this.lastSelectionAnchor);
+        const targetIndex = this.findItemIndex(clickedItem);
+        if (anchorIndex !== -1 && targetIndex !== -1) {
+          event.preventDefault();
+          event.stopPropagation();
+          const shouldSelectRange = !this.containsItem(this.internalSelection, clickedItem);
+          const nextSelection = this.applyRangeSelection(this.internalSelection, anchorIndex, targetIndex, rowNumber, shouldSelectRange);
+          this.pendingSelectionInteraction = null;
+          this.internalSelection = nextSelection;
+          this.$emit("update:modelValue", nextSelection);
+          return;
+        }
+      }
+
+      this.pendingSelectionInteraction = {
+        shiftKey: event.shiftKey,
+        rowNumber,
+      };
+    },
+    resolveClickedRowNumber(rowElement) {
+      const tbody = rowElement.parentElement;
+      if (!tbody) return null;
+
+      const selectableRows = Array.from(tbody.querySelectorAll("tr")).filter((row) => row.querySelector(".easy-checkbox"));
+      const rowIndex = selectableRows.indexOf(rowElement);
+      return rowIndex === -1 ? null : rowIndex + 1;
+    },
+    composeBodyRowClassName(item, rowNumber) {
+      if (rowNumber === 1) {
+        this.currentPageRowsCache = [];
+      }
+      this.currentPageRowsCache[rowNumber - 1] = this.normalizeItem(item);
+
+      const externalBodyRowClass = this.$attrs["body-row-class-name"] ?? this.$attrs.bodyRowClassName;
+      if (typeof externalBodyRowClass === "function") {
+        return externalBodyRowClass(item, rowNumber);
+      }
+      if (typeof externalBodyRowClass === "string") {
+        return externalBodyRowClass;
+      }
+      return "";
+    },
+    resolveShiftRangeSelection(newSelection, oldSelection = []) {
+      if (this.selectionMode !== "multiple") return newSelection;
+
+      const interaction = this.pendingSelectionInteraction;
+      this.pendingSelectionInteraction = null;
+
+      const toggledItemFromInteraction = interaction?.rowNumber ? this.currentPageRowsCache[interaction.rowNumber - 1] : null;
+      const toggledItem = toggledItemFromInteraction ?? this.getToggledItem(oldSelection, newSelection);
+      if (!toggledItem) return newSelection;
+
+      if (!interaction?.shiftKey || !this.lastSelectionAnchor) {
+        this.lastSelectionAnchor = toggledItem;
+        this.lastSelectionAnchorRowNumber = interaction?.rowNumber ?? null;
+        return newSelection;
+      }
+
+      const anchorIndex = this.findItemIndex(this.lastSelectionAnchor);
+      const targetIndex = this.findItemIndex(toggledItem);
+      if (anchorIndex === -1 || targetIndex === -1) {
+        this.lastSelectionAnchor = toggledItem;
+        this.lastSelectionAnchorRowNumber = interaction?.rowNumber ?? null;
+        return newSelection;
+      }
+
+      const rangeItems = this.getRangeItems(anchorIndex, targetIndex, interaction.rowNumber);
+      if (!rangeItems.length) return newSelection;
+      const shouldSelectRange = this.containsItem(newSelection, toggledItem);
+      return this.applyRangeSelection(newSelection, anchorIndex, targetIndex, interaction.rowNumber, shouldSelectRange);
+    },
+    applyRangeSelection(baseSelection, anchorIndex, targetIndex, targetRowNumber, shouldSelectRange) {
+      const rangeItems = this.getRangeItems(anchorIndex, targetIndex, targetRowNumber);
+      if (!rangeItems.length) return baseSelection;
+
+      let nextSelection = [...baseSelection];
+      if (shouldSelectRange) {
+        rangeItems.forEach((item) => {
+          if (!this.containsItem(nextSelection, item)) {
+            nextSelection.push(this.normalizeItem(item));
+          }
+        });
+      } else {
+        nextSelection = nextSelection.filter((selectedItem) => !rangeItems.some((item) => this.areItemsEqual(selectedItem, item)));
+      }
+
+      return this.areSelectionsEqual(nextSelection, baseSelection) ? baseSelection : nextSelection;
+    },
+    getRangeItems(anchorIndex, targetIndex, targetRowNumber) {
+      const anchorRowNumber = this.lastSelectionAnchorRowNumber;
+      if (anchorRowNumber && targetRowNumber) {
+        const [start, end] = anchorRowNumber <= targetRowNumber ? [anchorRowNumber, targetRowNumber] : [targetRowNumber, anchorRowNumber];
+        const visibleRange = this.currentPageRowsCache.slice(start - 1, end).filter((item) => item);
+        if (visibleRange.length === end - start + 1) {
+          return visibleRange;
+        }
+      }
+
+      const [start, end] = anchorIndex <= targetIndex ? [anchorIndex, targetIndex] : [targetIndex, anchorIndex];
+      return this.items.slice(start, end + 1);
+    },
+    normalizeItem(item) {
+      if (!item || typeof item !== "object") return item;
+      const normalized = { ...item };
+      delete normalized.checkbox;
+      delete normalized.index;
+      return normalized;
+    },
+    areItemsEqual(left, right) {
+      return JSON.stringify(this.normalizeItem(left)) === JSON.stringify(this.normalizeItem(right));
+    },
+    containsItem(collection, item) {
+      return collection.some((current) => this.areItemsEqual(current, item));
+    },
+    getToggledItem(previousSelection, nextSelection) {
+      const added = nextSelection.filter((item) => !this.containsItem(previousSelection, item));
+      if (added.length === 1) return this.normalizeItem(added[0]);
+
+      const removed = previousSelection.filter((item) => !this.containsItem(nextSelection, item));
+      if (removed.length === 1) return this.normalizeItem(removed[0]);
+
+      return null;
+    },
+    findItemIndex(itemToFind) {
+      return this.items.findIndex((item) => this.areItemsEqual(item, itemToFind));
+    },
+    areSelectionsEqual(first, second) {
+      if (first.length !== second.length) return false;
+      return first.every((item) => this.containsItem(second, item));
+    },
     normalizeModelValue(val) {
       if (this.selectionMode === "none") return [];
       if (this.selectionMode === "single") return val ? [val] : [];
@@ -102,6 +283,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 +333,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 +347,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>