ketekny-ui-kit 1.0.17 → 1.0.19

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "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,266 +1,264 @@
 <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 transition-colors"
+            aria-label="Clear selection"
+            @pointerdown.stop.prevent="clearSelection"
+            @click.stop.prevent="clearSelection"
+          >
+            <X class="w-4 h-4" />
+          </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-4 h-4 transition-transform duration-200" :class="{ 'rotate-180': open }" />
+          </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
+          position="popper"
+          :side-offset="6"
+          class="select-content z-[9999] bg-white border border-gray-200 rounded-lg shadow-[0_10px_38px_-10px_rgba(22,23,24,0.35),0_10px_20px_-15px_rgba(22,23,24,0.2)] overflow-hidden"
+        >
+          <div v-if="searchable" class="sticky top-0 z-10 p-1.5 border-b border-gray-100 bg-white">
+            <input
+              ref="searchInput"
+              type="text"
+              v-model="searchQuery"
+              placeholder="Αναζήτηση..."
+              class="w-full px-2.5 py-1.5 text-sm border border-gray-200 rounded-md focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30 transition-colors placeholder-gray-400"
+              role="searchbox"
+              aria-label="Search options"
+              @keydown="handleSearchKeydown"
+              @keyup.stop
+            />
           </div>
-        </div>
 
-        <div v-if="filteredOptions.length === 0" class="px-3 py-2 text-gray-400">Δεν βρέθηκαν αποτελέσματα</div>
-      </div>
-    </Teleport>
+          <SelectViewport
+            ref="viewportRef"
+            class="p-1 overflow-y-auto"
+            :style="{ maxHeight: dropdownHeight }"
+          >
+            <SelectItem
+              v-for="(option, index) in filteredOptions"
+              :key="`${option[optionValue]}-${index}`"
+              :value="option[optionValue]"
+              class="select-item relative flex items-center gap-1.5 rounded-[4px] py-1.5 pl-6 pr-3 text-sm cursor-pointer outline-none select-none text-slate-700
+                     data-[highlighted]:bg-primary data-[highlighted]:text-white
+                     data-[state=checked]:text-primary
+                     data-[state=checked]:data-[highlighted]:text-white"
+            >
+              <span class="absolute left-1.5 flex items-center justify-center w-4 h-4 shrink-0">
+                <SelectItemIndicator>
+                  <Check class="w-3.5 h-3.5" />
+                </SelectItemIndicator>
+              </span>
+              <SelectItemText class="truncate">{{ option[optionLabel] }}</SelectItemText>
+            </SelectItem>
 
-    <!-- Error -->
-    <div class="mt-1 text-red-500" v-if="hasError && error !== true && error !== ''">
+            <div v-if="filteredOptions.length === 0" class="px-3 py-2 text-sm text-gray-400 text-center">
+              Δεν βρέθηκαν επιλογές
+            </div>
+          </SelectViewport>
+        </SelectContent>
+      </SelectPortal>
+    </SelectRoot>
+
+    <div class="mt-1 text-sm text-red-500" v-if="hasError && error !== true && error !== ''">
       {{ error }}
     </div>
 
-    <!-- Info -->
-    <div class="mt-1 text-gray-500" v-if="info">
+    <div class="mt-1 text-sm text-gray-500" v-if="info">
       {{ info }}
     </div>
   </div>
 </template>
 
 <script setup>
-import { X, ChevronDown, ChevronUp, Check } from "lucide-vue-next";
-</script>
+import { computed, nextTick, ref, watch } from "vue";
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from "reka-ui";
+import { X, ChevronDown, Check } from "lucide-vue-next";
 
-<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 },
+  dropdownHeight: { type: String, default: "min(400px, 40vh)" },
+  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 viewportRef = ref(null);
+const generatedId = `select-${Math.random().toString(36).substr(2, 9)}`;
+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 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();
+    });
+    return;
+  }
+  searchQuery.value = "";
+});
 
-      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;
+function clearSelection() {
+  emit("update:modelValue", null);
+  open.value = false;
+}
 
-      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 getOptionNodes() {
+  const el = viewportRef.value?.$el ?? viewportRef.value;
+  if (!el) return [];
+  return Array.from(el.querySelectorAll('[role="option"]:not([data-disabled])'));
+}
 
-      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 handleSearchKeydown(event) {
+  // Always stop propagation to prevent reka-ui typeahead on character keys
+  event.stopPropagation();
 
-      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);
+  if (event.key === "Escape") {
+    event.preventDefault();
+    open.value = false;
+    return;
+  }
 
-      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));
+  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+    event.preventDefault();
+    const nodes = getOptionNodes();
+    if (!nodes.length) return;
+    const activeIndex = nodes.findIndex((n) => n === document.activeElement);
+    if (event.key === "ArrowDown") {
+      const next = activeIndex < nodes.length - 1 ? nodes[activeIndex + 1] : nodes[0];
+      next.focus();
+    } else {
+      const prev = activeIndex > 0 ? nodes[activeIndex - 1] : nodes[nodes.length - 1];
+      prev.focus();
+    }
+    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 === "Home") {
+    event.preventDefault();
+    const nodes = getOptionNodes();
+    nodes[0]?.focus();
+    return;
+  }
+
+  if (event.key === "End") {
+    event.preventDefault();
+    const nodes = getOptionNodes();
+    nodes[nodes.length - 1]?.focus();
+    return;
+  }
+
+  if (event.key === "Enter") {
+    event.preventDefault();
+    const nodes = getOptionNodes();
+    const focused = nodes.find((n) => n === document.activeElement);
+    if (focused) focused.click();
+  }
+}
 </script>
+
+<style scoped>
+.select-content {
+  transform-origin: var(--reka-select-content-transform-origin);
+  width: var(--reka-popper-anchor-width);
+}
+
+.select-content[data-state="open"] {
+  animation: selectOpen 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.select-content[data-state="closed"] {
+  animation: selectClose 0.1s ease-in;
+}
+
+@keyframes selectOpen {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes selectClose {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.97);
+  }
+}
+
+.select-item {
+  transition: background-color 80ms, color 80ms;
+}
+</style>