ketekny-ui-kit 1.0.17 → 1.0.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [
@@ -40,13 +40,14 @@
   "dependencies": {
     "@primeuix/themes": "^1.1.1",
     "@vuepic/vue-datepicker": "^11.0.2",
-    "json-editor-vue": "^0.18.1",
     "he-tree-vue": "^3.1.2",
+    "json-editor-vue": "^0.18.1",
     "lucide-vue-next": "^0.511.0",
     "moment": "^2.30.1",
     "primeicons": "^7.0.0",
     "primevue": "^4.3.4",
     "quill": "^2.0.3",
+    "reka-ui": "^2.8.2",
     "simple-code-editor": "^2.0.9",
     "vue-router": "^4.6.4",
     "vue3-easy-data-table": "^1.5.47"

package/src/ui/kSelect.vue

@@ -1,102 +1,101 @@
 <template>
   <div class="relative w-full">
-    <!-- Label -->
     <label v-if="label != null" :for="computedId" class="inputLabel" :class="hasError ? 'text-red-500' : 'text-gray-700'">
       {{ label }}
     </label>
 
-    <!-- Input Trigger -->
-    <div
-      ref="trigger"
-      @click="toggleDropdown"
-      @keydown="handleTriggerKeydown"
-      class="relative w-full px-3 py-2 text-gray-700 bg-white border rounded-lg cursor-pointer trigger-box"
-       :class="[defaultStyle, hasError ? errorStyle : '', disabled ? disabledStyle : '']"
-      :aria-haspopup="'listbox'"
-      :aria-expanded="isOpen.toString()"
-      :aria-disabled="disabled.toString()"
-      :aria-controls="dropdownId"
-      :role="'combobox'"
-      :tabindex="disabled ? -1 : 0"
-    >
-      <span class="block pr-10 truncate">{{ selectedLabel || placeholder }}</span>
+    <SelectRoot v-model="internalValue" v-model:open="open" :disabled="disabled">
+      <SelectTrigger as-child>
+        <div
+          :id="computedId"
+          class="relative w-full px-3 py-2 text-gray-700 bg-white border rounded-lg cursor-pointer trigger-box"
+          :class="[defaultStyle, hasError ? errorStyle : '', disabled ? disabledStyle : '']"
+          :aria-label="label || 'Select option'"
+        >
+          <SelectValue :placeholder="placeholder" class="block pr-10 truncate" />
 
-      <!-- Clear button -->
-      <button
-        v-if="clearable && isSelectionSet && !disabled"
-        type="button"
-        class="absolute text-gray-400 -translate-y-1/2 right-8 top-1/2 hover:text-red-500"
-        @click.stop="clearSelection"
-        aria-label="Clear selection">
-        <X class="w-5 h-5 mr-2" />
-      </button>
-
-      <!-- Dropdown icon -->
-      <span class="absolute text-gray-400 -translate-y-1/2 pointer-events-none right-3 top-1/2">
-        <ChevronDown class="w-5 h-5" v-if="!isOpen" />
-        <ChevronUp class="w-5 h-5" v-else />
-      </span>
-    </div>
+          <button
+            v-if="clearable && isSelectionSet && !disabled"
+            type="button"
+            class="absolute text-gray-400 -translate-y-1/2 right-8 top-1/2 hover:text-red-500"
+            aria-label="Clear selection"
+            @pointerdown.stop.prevent="clearSelection"
+            @click.stop.prevent="clearSelection"
+          >
+            <X class="w-5 h-5 mr-2" />
+          </button>
 
-    <!-- Dropdown Menu -->
-    <Teleport to="body">
-      <div
-        v-if="isOpen"
-        ref="dropdown"
-        :id="dropdownId"
-        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"
-        :aria-label="label || 'Select options'"
-      >
-        <!-- Search -->
-        <div class="sticky top-0 z-10 pt-2 pb-2 mx-2 bg-white">
-          <input
-            ref="searchInput"
-            type="text"
-            v-model="searchQuery"
-            placeholder="Αναζήτηση..."
-            class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none"
-            role="searchbox"
-            aria-label="Search options"
-            @keydown.esc.stop.prevent="closeDropdown"
-          />
+          <span class="absolute text-gray-400 -translate-y-1/2 pointer-events-none right-3 top-1/2">
+            <ChevronDown class="w-5 h-5" v-if="!open" />
+            <ChevronUp class="w-5 h-5" v-else />
+          </span>
         </div>
+      </SelectTrigger>
 
-        <!-- Filtered Options -->
-        <div class="flex flex-col gap-[2px] p-2">
-          <div
-            v-for="option in filteredOptions"
-            :id="`${dropdownId}-opt-${option[optionValue]}`"
-            :key="option[optionValue]"
-            @click="selectOption(option)"
-            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()"
-          >
-            <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>
+      <SelectPortal>
+        <SelectContent
+          :id="dropdownId"
+          position="popper"
+          :side-offset="6"
+          class="z-[9999] overflow-hidden 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"
+        >
+          <div v-if="searchable" data-select-search-header class="sticky top-0 z-10 pt-2 pb-2 mx-2 bg-white">
+            <input
+              ref="searchInput"
+              type="text"
+              v-model="searchQuery"
+              placeholder="Αναζήτηση..."
+              class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none"
+              role="searchbox"
+              aria-label="Search options"
+              @keydown.stop="handleSearchKeydown"
+            />
           </div>
-        </div>
 
-        <div v-if="filteredOptions.length === 0" class="px-3 py-2 text-gray-400">Δεν βρέθηκαν αποτελέσματα</div>
-      </div>
-    </Teleport>
+          <div class="relative">
+            <SelectViewport
+              class="p-2 overflow-y-auto"
+              :class="canScrollAny ? 'pt-8 pb-8' : ''"
+              :style="{ maxHeight: viewportMaxHeight }"
+              @scroll="updateScrollState"
+            >
+              <div class="flex flex-col gap-0">
+                <SelectItem
+                  v-for="(option, index) in filteredOptions"
+                  :key="`${option[optionValue]}-${index}`"
+                  :value="option[optionValue]"
+                  class="px-3 py-2 rounded cursor-pointer outline-none text-slate-700 hover:bg-primary/20 hover:text-primary data-[highlighted]:bg-primary data-[highlighted]:text-white data-[state=checked]:text-primary data-[state=checked]:data-[highlighted]:text-white"
+                >
+                  <div class="flex items-center justify-between gap-2">
+                    <SelectItemText class="truncate">{{ option[optionLabel] }}</SelectItemText>
+                    <span class="inline-flex items-center justify-center w-4 h-4 shrink-0">
+                      <SelectItemIndicator>
+                        <Check class="w-4 h-4" />
+                      </SelectItemIndicator>
+                    </span>
+                  </div>
+                </SelectItem>
+              </div>
+
+              <div v-if="filteredOptions.length === 0" class="px-3 py-2 text-gray-400">Δεν βρέθηκαν επιλογές</div>
+            </SelectViewport>
+
+            <SelectScrollUpButton class="absolute top-0 left-0 right-0 z-10 flex items-center justify-center h-6 text-gray-500 bg-white/95">
+              <ChevronUp class="w-4 h-4" />
+            </SelectScrollUpButton>
+
+            <SelectScrollDownButton class="absolute bottom-0 left-0 right-0 z-10 flex items-center justify-center h-6 text-gray-500 bg-white/95">
+              <ChevronDown class="w-4 h-4" />
+            </SelectScrollDownButton>
+          </div>
+        </SelectContent>
+      </SelectPortal>
+    </SelectRoot>
 
-    <!-- Error -->
     <div class="mt-1 text-red-500" v-if="hasError && error !== true && error !== ''">
       {{ error }}
     </div>
 
-    <!-- Info -->
     <div class="mt-1 text-gray-500" v-if="info">
       {{ info }}
     </div>
@@ -104,163 +103,168 @@
 </template>
 
 <script setup>
+import { computed, nextTick, ref, watch } from "vue";
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from "reka-ui";
 import { X, ChevronDown, ChevronUp, Check } from "lucide-vue-next";
-</script>
 
-<script>
-export default {
-  name: "kSelect",
-  props: {
-    options: { type: Array, required: true },
-    modelValue: [String, Number],
-    optionValue: { type: String, default: "value" },
-    optionLabel: { type: String, default: "label" },
-    label: String,
-    info: String,
-    error: [String, Boolean],
-    disabled: { type: Boolean, default: false },
-    placeholder: { type: String, default: "Επιλέξτε μία τιμή" },
-    id: { type: String, default: null },
-    dropdownHeight: { type: String, default: "max-h-80" },
-    clearable: { type: Boolean, default: true },
-  },
-  data() {
-    return {
-      isOpen: false,
-      searchQuery: "",
-      dropdownPositionStyle: {},
-      generatedId: `select-${Math.random().toString(36).substr(2, 9)}`,
-      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400",
-      errorStyle: "border-red-500 focus:ring focus:ring-red-300",
-      disabledStyle: "!bg-gray-100 !text-gray-400 !cursor-not-allowed",
-    };
+const props = defineProps({
+  options: { type: Array, required: true },
+  modelValue: [String, Number],
+  optionValue: { type: String, default: "value" },
+  optionLabel: { type: String, default: "label" },
+  label: String,
+  info: String,
+  error: [String, Boolean],
+  disabled: { type: Boolean, default: false },
+  placeholder: { type: String, default: "Επιλέξτε μία τιμή" },
+  id: { type: String, default: null },
+  clearable: { type: Boolean, default: true },
+  searchable: { type: Boolean, default: true },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const open = ref(false);
+const searchQuery = ref("");
+const searchInput = ref(null);
+const canScrollAny = ref(false);
+const generatedId = `select-${Math.random().toString(36).substr(2, 9)}`;
+const viewportMaxHeight = "400px";
+const defaultStyle = "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400";
+const errorStyle = "border-red-500 focus:ring focus:ring-red-300";
+const disabledStyle = "!bg-gray-100 !text-gray-400 !cursor-not-allowed";
+
+const computedId = computed(() => (props.id != null && props.id !== "" ? props.id : generatedId));
+const dropdownId = computed(() => `${computedId.value}-listbox`);
+
+const hasError = computed(() => props.error != null && props.error !== false);
+const isSelectionSet = computed(() => props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== "");
+
+const internalValue = computed({
+  get() {
+    return props.modelValue === null ? undefined : props.modelValue;
   },
-  computed: {
-    computedId() {
-      return this.id != null && this.id !== "" ? this.id : this.generatedId;
-    },
-    dropdownId() {
-      return `${this.computedId}-listbox`;
-    },
-    selectedValue() {
-      return this.modelValue;
-    },
-    isSelectionSet() {
-      return this.selectedValue !== null && this.selectedValue !== undefined && this.selectedValue !== "";
-    },
-    selectedLabel() {
-      const match = this.options.find((o) => o[this.optionValue] === this.modelValue);
-      return match ? match[this.optionLabel] : "";
-    },
-    filteredOptions() {
-      const q = this.searchQuery.trim().toLowerCase();
-      return this.options.filter((o) => String(o[this.optionLabel] ?? "").toLowerCase().includes(q));
-    },
-    hasError() {
-      return this.error != null && this.error !== false;
-    },
+  set(val) {
+    emit("update:modelValue", val ?? null);
   },
-  methods: {
-    toggleDropdown() {
-      if (this.disabled) return;
-      this.isOpen = !this.isOpen;
-      if (this.isOpen) {
-        this.$nextTick(() => {
-          this.getDropdownPosition();
-          this.$refs.searchInput?.focus();
-        });
-      } else {
-        this.searchQuery = "";
-      }
-    },
-    closeDropdown() {
-      this.isOpen = false;
-      this.searchQuery = "";
-    },
-    selectOption(option) {
-      this.$emit("update:modelValue", option[this.optionValue]);
-      this.closeDropdown();
-    },
-    clearSelection() {
-      this.$emit("update:modelValue", null);
-      this.closeDropdown();
-    },
-    handleTriggerKeydown(event) {
-      if (this.disabled) return;
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        this.toggleDropdown();
-      } else if (event.key === "ArrowDown" && !this.isOpen) {
-        event.preventDefault();
-        this.toggleDropdown();
-      } else if (event.key === "Escape" && this.isOpen) {
-        event.preventDefault();
-        this.closeDropdown();
-      }
-    },
-    closeOnClickOutside(e) {
-      const clickedOutside = !this.$el.contains(e.target) && !(this.$refs.dropdown && this.$refs.dropdown.contains(e.target));
+});
 
-      if (clickedOutside) {
-        this.closeDropdown();
-      }
-    },
-    handleViewportChange() {
-      if (!this.isOpen) return;
-      this.getDropdownPosition();
-    },
+const filteredOptions = computed(() => {
+  if (!props.searchable) return props.options;
+  const q = searchQuery.value.trim().toLowerCase();
+  if (!q) return props.options;
+  return props.options.filter((o) => String(o?.[props.optionLabel] ?? "").toLowerCase().includes(q));
+});
 
-    getDropdownPosition() {
-      const trigger = this.$refs.trigger;
-      if (!trigger) return;
-      const dropdown = this.$refs.dropdown;
+watch(open, (val) => {
+  if (val) {
+    nextTick(() => {
+      if (props.searchable) searchInput.value?.focus();
+      updateScrollState();
+    });
+    return;
+  }
+  searchQuery.value = "";
+  canScrollAny.value = false;
+});
 
-      const rect = trigger.getBoundingClientRect();
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-      const viewportHeight = window.innerHeight;
-      const viewportWidth = window.innerWidth;
-      const pad = 8;
+watch(filteredOptions, () => {
+  if (!open.value) return;
+  nextTick(() => updateScrollState());
+});
 
-      const spaceBelow = viewportHeight - rect.bottom;
-      const spaceAbove = rect.top;
-      const contentHeight = dropdown ? dropdown.scrollHeight : 320;
-      const maxViewportHeight = Math.max(120, viewportHeight - pad * 2);
-      const desiredHeight = Math.min(contentHeight, maxViewportHeight);
+function clearSelection() {
+  emit("update:modelValue", null);
+  open.value = false;
+}
 
-      const shouldOpenAbove = spaceBelow < Math.min(240, desiredHeight) && spaceAbove > spaceBelow;
-      const availableHeight = Math.max(120, (shouldOpenAbove ? spaceAbove : spaceBelow) - pad);
-      const finalHeight = Math.min(desiredHeight, availableHeight);
+function focusFirstOrLastOption(last = false) {
+  const container = document.getElementById(dropdownId.value);
+  if (!container) return;
+  const nodes = Array.from(container.querySelectorAll('[role="option"]:not([data-disabled])'));
+  if (!nodes.length) return;
+  const target = last ? nodes[nodes.length - 1] : nodes[0];
+  target.focus();
+}
 
-      const rawTop = shouldOpenAbove ? rect.top + scrollTop - finalHeight : rect.bottom + scrollTop;
-      const minTop = scrollTop + pad;
-      const maxTop = scrollTop + viewportHeight - finalHeight - pad;
-      const top = Math.min(Math.max(rawTop, minTop), maxTop);
+function moveOptionFocus(step) {
+  const container = document.getElementById(dropdownId.value);
+  if (!container) return;
+  const nodes = Array.from(container.querySelectorAll('[role="option"]:not([data-disabled])'));
+  if (!nodes.length) return;
+  const activeIndex = nodes.findIndex((node) => node === document.activeElement);
+  const baseIndex = activeIndex >= 0 ? activeIndex : step > 0 ? -1 : 0;
+  const nextIndex = Math.min(Math.max(baseIndex + step, 0), nodes.length - 1);
+  nodes[nextIndex].focus();
+}
 
-      const rawLeft = rect.left + scrollLeft;
-      const minLeft = scrollLeft + pad;
-      const maxLeft = scrollLeft + viewportWidth - rect.width - pad;
-      const left = Math.min(Math.max(rawLeft, minLeft), Math.max(minLeft, maxLeft));
+function handleSearchKeydown(event) {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
+    open.value = false;
+    return;
+  }
 
-      this.dropdownPositionStyle = {
-        position: "absolute",
-        top: `${top}px`,
-        left: `${left}px`,
-        minWidth: `${rect.width}px`,
-        maxWidth: `500px`,
-        maxHeight: `${finalHeight}px`,
-      };
-    },
-  },
-  mounted() {
-    document.addEventListener("click", this.closeOnClickOutside);
-    window.addEventListener("resize", this.handleViewportChange);
-    window.addEventListener("scroll", this.handleViewportChange, true);
-  },
-  beforeUnmount() {
-    document.removeEventListener("click", this.closeOnClickOutside);
-    window.removeEventListener("resize", this.handleViewportChange);
-    window.removeEventListener("scroll", this.handleViewportChange, true);
-  },
-};
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    event.stopPropagation();
+    moveOptionFocus(1);
+    return;
+  }
+
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    event.stopPropagation();
+    moveOptionFocus(-1);
+    return;
+  }
+
+  if (event.key === "Home") {
+    event.preventDefault();
+    event.stopPropagation();
+    focusFirstOrLastOption(false);
+    return;
+  }
+
+  if (event.key === "End") {
+    event.preventDefault();
+    event.stopPropagation();
+    focusFirstOrLastOption(true);
+    return;
+  }
+
+  if (event.key === "Enter") {
+    const container = document.getElementById(dropdownId.value);
+    if (!container) return;
+    const active = document.activeElement;
+    if (active && container.contains(active) && active.getAttribute("role") === "option") {
+      event.preventDefault();
+      event.stopPropagation();
+      active.click();
+    }
+  }
+}
+
+function updateScrollState() {
+  const container = document.getElementById(dropdownId.value);
+  const viewport = container?.querySelector("[data-reka-select-viewport]");
+  if (!viewport) {
+    canScrollAny.value = false;
+    return;
+  }
+  canScrollAny.value = viewport.scrollHeight > viewport.clientHeight + 1;
+}
 </script>