ketekny-ui-kit 1.0.3

package/src/ui/kMenu.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="relative inline-block text-left">
+    <div @click="toggleMenu">
+      <slot name="trigger"></slot>
+    </div>
+    <div
+      v-if="isOpen"
+      class="absolute right-0 z-10 w-56 mt-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5"
+    >
+      <slot name="items"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'kMenu',
+  data() {
+    return {
+      isOpen: false,
+    }
+  },
+  methods: {
+    toggleMenu() {
+      this.isOpen = !this.isOpen
+    },
+    closeMenu() {
+      this.isOpen = false
+    },
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside)
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.handleClickOutside)
+  },
+  methods: {
+    toggleMenu() {
+      this.isOpen = !this.isOpen
+    },
+    handleClickOutside(event) {
+      if (!this.$el.contains(event.target)) {
+        this.closeMenu()
+      }
+    },
+    closeMenu() {
+      this.isOpen = false
+    },
+  },
+}
+</script>

package/src/ui/kMessage.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="flex rounded-lg overflow-hidden min-h-[50px] border-l-8"
+    :class="['border-semantic-' + type + '-border', 'bg-semantic-' + type + '-bg']"
+  >
+    <!-- Icon Column -->
+    <div class="flex items-start justify-center h-full px-4" :class="iconColor">
+      <component :is="icon" class="mt-3" />
+    </div>
+
+    <!-- Text Column -->
+    <div class="flex flex-col justify-center flex-1 py-2 pr-4">
+      <div v-if="title" :class="['mb-2 text-xl font-medium', textClass]">{{ title }}</div>
+      <p :class="['p-0 m-0 leading-normal', textClass]">
+        <slot></slot>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  Info,
+  TriangleAlert,
+  OctagonX,
+  CircleCheckBig,
+} from 'lucide-vue-next'
+</script>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'warning', // 'info', 'success', 'danger'
+      validator: val => ['info', 'success', 'warning', 'error'].includes(val),
+    },
+    title: { type: String, default: '' },
+  },
+  computed: {
+    bgClass() {
+      return `bg-semantic-${this.type}-bg`
+    },
+    borderClass() {
+      return `border-semantic-${this.type}-border`
+    },
+    textClass() {
+      return `text-semantic-${this.type}-text`
+    },
+    iconColor() {
+      return `text-semantic-${this.type}-text`
+    },
+    icon() {
+      return {
+        info: Info,
+        warning: TriangleAlert,
+        error: OctagonX,
+        success: CircleCheckBig,
+      }[this.type]
+    },
+  },
+}
+</script>

package/src/ui/kSearch.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="relative w-full">
+    <input type="text" v-model="localValue" @input="onInput" :class="defaultStyle" :placeholder="placeholder" />
+    <Search class="absolute w-4 h-4 text-gray-400 -translate-y-1/2 pointer-events-none right-3 top-1/2" />
+  </div>
+</template>
+
+<script setup>
+import { Search } from "lucide-vue-next";
+</script>
+
+<script>
+export default {
+  name: "kSearch",
+  props: {
+    modelValue: { type: String, default: "" },
+    debounce: { type: [String, Number], default: 300 },
+    placeholder: { type: String, default: "Αναζήτηση..." },
+  },
+  data() {
+    return {
+      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-0 focus:border-green-500 bg-white placeholder-gray-400",
+
+      localValue: this.modelValue,
+      debounceTimeout: null,
+    };
+  },
+  watch: {
+    modelValue(newVal) {
+      this.localValue = newVal;
+    },
+  },
+  methods: {
+    onInput() {
+      clearTimeout(this.debounceTimeout);
+      this.debounceTimeout = setTimeout(() => {
+        this.$emit("update:modelValue", this.localValue);
+      }, this.debounce);
+    },
+  },
+  beforeUnmount() {
+    clearTimeout(this.debounceTimeout);
+  },
+};
+</script>

package/src/ui/kSelect.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="relative w-full">
+    <!-- Label -->
+    <label :for="computedId" class="inputLabel" :class="hasError ? 'text-red-500' : 'text-gray-700'">
+      {{ label }}
+    </label>
+
+    <!-- Input Trigger -->
+    <div
+      ref="trigger"
+      @click="toggleDropdown"
+      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()"
+      :role="'combobox'"
+    >
+      <span class="block pr-10 truncate">{{ selectedLabel || placeholder }}</span>
+
+      <!-- Clear button -->
+      <button v-if="selectedValue && !disabled" 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>
+
+    <!-- Dropdown Menu -->
+    <Teleport to="body">
+      <div
+        v-if="isOpen"
+        ref="dropdown"
+        class="absolute z-[9999] mt-1 overflow-auto bg-white border border-gray-200 rounded-lg shadow-lg"
+        :class="dropdownHeight"
+        :style="dropdownPositionStyle"
+        role="listbox"
+      >
+        <!-- Search -->
+        <div class="sticky top-0 z-10 pt-2 pb-2 mx-2 bg-white">
+          <input
+            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"
+          />
+        </div>
+
+        <!-- Filtered Options -->
+        <div class="flex flex-col gap-[2px] p-2">
+          <div
+            v-for="option in filteredOptions"
+            :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'"
+            role="option"
+            :aria-selected="(option[optionValue] === selectedValue).toString()"
+          >
+            {{ option[optionLabel] }}
+          </div>
+        </div>
+
+        <div v-if="filteredOptions.length === 0" class="px-3 py-2 text-gray-400">Δεν βρέθηκαν αποτελέσματα</div>
+      </div>
+    </Teleport>
+
+    <!-- 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>
+  </div>
+</template>
+
+<script setup>
+import { X, ChevronDown, ChevronUp } 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: Boolean,
+    placeholder: { type: String, default: "Επιλέξτε μία τιμή" },
+    id: { type: String, default: "" },
+    dropdownHeight: { type: String, default: "max-h-60" },
+  },
+  data() {
+    return {
+      isOpen: false,
+      searchQuery: "",
+      dropdownPositionStyle: {},
+      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-0 focus:border-green-500 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",
+    };
+  },
+  computed: {
+    computedId() {
+      return this.id || `select-${Math.random().toString(36).substr(2, 9)}`;
+    },
+    selectedValue() {
+      return this.modelValue;
+    },
+    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) => o[this.optionLabel].toLowerCase().includes(q));
+    },
+    hasError() {
+      return this.error != null && this.error !== false;
+    },
+    baseInputClasses() {
+      return "transition shadow-sm focus:ring focus:ring-blue-300";
+    },
+  },
+  methods: {
+    toggleDropdown() {
+      if (this.disabled) return;
+      this.isOpen = !this.isOpen;
+      if (this.isOpen) {
+        this.$nextTick(() => this.getDropdownPosition());
+      }
+    },
+    selectOption(option) {
+      this.$emit("update:modelValue", option[this.optionValue]);
+      this.searchQuery = "";
+      this.isOpen = false;
+    },
+    clearSelection() {
+      this.$emit("update:modelValue", null);
+      this.searchQuery = "";
+      this.isOpen = false;
+    },
+    closeOnClickOutside(e) {
+      const clickedOutside = !this.$el.contains(e.target) && !(this.$refs.dropdown && this.$refs.dropdown.contains(e.target));
+
+      if (clickedOutside) {
+        this.isOpen = false;
+      }
+    },
+
+    getDropdownPosition() {
+      const trigger = this.$refs.trigger;
+      if (!trigger) return;
+
+      const rect = trigger.getBoundingClientRect();
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+      this.dropdownPositionStyle = {
+        position: "absolute",
+        top: `${rect.bottom + scrollTop}px`,
+        left: `${rect.left + scrollLeft}px`,
+        minWidth: `${rect.width}px`,
+        maxWidth: `500px`,
+      };
+    },
+  },
+  mounted() {
+    document.addEventListener("click", this.closeOnClickOutside);
+  },
+  beforeUnmount() {
+    document.removeEventListener("click", this.closeOnClickOutside);
+  },
+};
+</script>

package/src/ui/kSelectButton.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="inline-flex overflow-hidden border border-gray-300 rounded-md" style="width: fit-content;">
+
+    <button
+      v-for="(option, index) in options"
+      :key="option[valueKey]"
+      :class="[
+        baseClasses,
+        isSelected(option) ? activeClasses : inactiveClasses,
+        index === 0 ? 'border-r' : '',
+        index === options.length - 1 ? 'border-l' : 'border-l border-r',
+        disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+      ]"
+      @click="toggle(option)"
+      :disabled="disabled"
+      type="button"
+    >
+      {{ option[labelKey] }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "kSelectButton",
+  props: {
+    modelValue: [String, Number, Array],
+    options: { type: Array, required: true },
+    multiple: { type: Boolean, default: false },
+    valueKey: { type: String, default: "value" },
+    labelKey: { type: String, default: "label" },
+    disabled: { type: Boolean, default: false },
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    baseClasses() {
+      return "px-4 py-2 text-sm font-medium border-none focus:outline-none";
+    },
+    activeClasses() {
+      return "bg-primary text-white";
+    },
+    inactiveClasses() {
+      return "bg-white text-gray-700 hover:bg-gray-100";
+    },
+  },
+  methods: {
+    isSelected(option) {
+      const val = option[this.valueKey];
+      if (this.multiple && Array.isArray(this.modelValue)) {
+        return this.modelValue.includes(val);
+      }
+      return this.modelValue === val;
+    },
+    toggle(option) {
+      if (this.disabled) return;
+      const val = option[this.valueKey];
+
+      if (this.multiple) {
+        const selected = [...(this.modelValue || [])];
+        const index = selected.indexOf(val);
+        if (index === -1) selected.push(val);
+        else selected.splice(index, 1);
+        this.$emit("update:modelValue", selected);
+      } else {
+        this.$emit("update:modelValue", this.modelValue === val ? null : val);
+      }
+    },
+  },
+};
+</script>

package/src/ui/kSpinner.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex items-center justify-center w-16 space-x-1" v-if="type == 'line'">
+    <i class="ml-1 text-blue-500 pi pi-wave-pulse" />
+    <div class="w-2 h-2 bg-blue-500 rounded-full animate-fade" :style="{ animationDelay: '0s' }"></div>
+    <div class="w-2 h-2 bg-blue-500 rounded-full animate-fade" :style="{ animationDelay: '0.15s' }"></div>
+    <div class="w-2 h-2 bg-blue-500 rounded-full animate-fade" :style="{ animationDelay: '0.3s' }"></div>
+    <div class="w-2 h-2 bg-blue-500 rounded-full animate-fade" :style="{ animationDelay: '0.45s' }"></div>
+  </div>
+
+  <Loader class="w-6 h-6 mr-2 animate-spin" style="animation-duration: 1.5s" v-else-if="type == 'circle'" />
+</template>
+
+<script setup>
+import { Loader } from "lucide-vue-next";
+</script>
+
+<script>
+export default {
+  name: "FourDotSpinner",
+  props: { type: { type: String, default: "line" } },
+};
+</script>
+
+<style scoped>
+@keyframes fade {
+  0%,
+  100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.animate-fade {
+  animation: fade 1s ease-in-out infinite;
+}
+</style>

package/src/ui/kTable.vue

@@ -0,0 +1,90 @@
+<template>
+  <div ref="tableWrapper" class="w-full">
+    <table class="table-custom">
+      <!-- Styled Thead -->
+      <thead ref="theadRef" class="hidden sm:table-header-group">
+        <slot name="head"></slot>
+      </thead>
+
+      <!-- Styled Tbody -->
+      <tbody ref="tbodyRef">
+        <slot name="body"></slot>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "kTable",
+  mounted() {
+    this.$nextTick(() => {
+      this.applyMobileLayout();
+
+      // Observe body slot DOM changes (dynamic rows)
+      this._observer = new MutationObserver(() => {
+        this.$nextTick(() => this.applyMobileLayout());
+      });
+
+      this._observer.observe(this.$refs.tbodyRef, {
+        childList: true,
+        subtree: true,
+      });
+    });
+  },
+  beforeUnmount() {
+    if (this._observer) this._observer.disconnect();
+  },
+  methods: {
+    applyMobileLayout() {
+      const thead = this.$refs.theadRef;
+      if (!thead) return;
+
+      const headers = Array.from(thead.querySelectorAll("th")).map((th) => th.textContent.trim());
+
+      const tbody = this.$refs.tbodyRef;
+      const rows = tbody.querySelectorAll("tr");
+
+      rows.forEach((row) => {
+        const cells = row.querySelectorAll("td");
+
+        // Apply responsive row layout
+        row.classList.add("block", "sm:table-row", "mb-4", "sm:mb-0", "transition", "duration-300", "ease-in-out", "hover:bg-gray-50");
+
+        // Apply responsive column layout
+        cells.forEach((cell, index) => {
+          cell.setAttribute("data-label", headers[index] || "");
+          cell.classList.add("block", "sm:table-cell",  "text-left", "h-[3.2rem]", "px-2", "py-2");
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style css>
+.table-custom {
+  @apply table-auto w-full border-collapse border-gray-300 !bg-transparent;
+}
+
+.table-custom th {
+  @apply px-4 py-2 text-left bg-gray-100 border-b border-gray-300 !bg-transparent;
+}
+
+.table-custom td {
+  @apply h-[3.2rem] px-2 py-2;
+}
+
+.table-custom tr {
+  @apply transition duration-300 ease-in-out hover:bg-gray-50;
+}
+
+.table-custom tr:not(:last-child) {
+  @apply border-b border-gray-300;
+}
+
+.table-custom td::before {
+  content: attr(data-label);
+  @apply font-semibold mr-2 block sm:hidden;
+}
+</style>

package/src/ui/kTabs.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="w-full overflow-hidden bg-white border rounded-md">
+    <div class="flex">
+      <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 hover:text-gray-700']"
+      >
+        {{ tab.title }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TabList",
+  props: {
+    modelValue: { type: [String, Number], required: true },
+    tabs: {
+      type: Array,
+      required: true,
+      validator: (value) => {
+        return value.every((tab) => "id" in tab && "title" in tab);
+      },
+    },
+  },
+  emits: ["update:modelValue"],
+  methods: {
+    selectTab(id) {
+      this.$emit("update:modelValue", id);
+    },
+  },
+};
+</script>

package/src/ui/kTags.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="w-full">
+    <div v-if="label != null" class="inputLabel" :class="hasError ? 'text-red-500' : 'text-gray-700'">
+      {{ label }}
+    </div>
+    <div class="flex flex-wrap items-center gap-2 p-2 border border-gray-300 rounded-xl shadow-sm min-h-[3rem]">
+      <span v-for="(tag, index) in internalTags" :key="index" class="flex items-center px-2 py-1 text-blue-700 bg-blue-100 rounded-full">
+        {{ tag }}
+        <button @click="removeTag(index)" class="ml-1 text-blue-500 hover:text-blue-700">&times;</button>
+      </span>
+      <input
+        v-model="newTag"
+        @keydown.enter.prevent="addTag"
+        @keydown.backspace="handleBackspace"
+        :placeholder="placeholder"
+        class="flex-1 p-1 bg-transparent border-none focus:outline-none"
+      />
+    </div>
+    <!-- Error message -->
+    <div class="text-sm text-red-500" v-if="hasError && error !== true && error !== ''">
+      {{ error }}
+    </div>
+
+    <!-- Info message -->
+    <div class="text-sm text-gray-500" v-if="info != null">
+      {{ info }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TagsInput",
+  props: {
+    modelValue: { type: Array, default: () => [] },
+    label: { type: String, default: null },
+    info: { type: String, default: null },
+    error: { type: [String, Boolean], default: null },
+    disabled: { type: Boolean, default: false },
+    icon: { type: String, default: null },
+    placeholder: { type: String, default: null },
+    id: String,
+  },
+  data() {
+    return {
+      newTag: "",
+    };
+  },
+  computed: {
+    hasError() {
+      return this.error != null && this.error !== false;
+    },
+    internalTags: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      },
+    },
+  },
+  methods: {
+    addTag() {
+      const trimmed = this.newTag.trim();
+      if (trimmed && !this.internalTags.includes(trimmed)) {
+        this.internalTags = [...this.internalTags, trimmed];
+      }
+      this.newTag = "";
+    },
+    handleBackspace(e) {
+      if (this.newTag === "" && this.internalTags.length) {
+        this.removeTag(this.internalTags.length - 1);
+      }
+    },
+    removeTag(index) {
+      const updated = [...this.internalTags];
+      updated.splice(index, 1);
+      this.internalTags = updated;
+    },
+  },
+};
+</script>
+
+<style scoped>
+input::-webkit-input-placeholder {
+  color: #9ca3af; /* Tailwind gray-400 */
+}
+</style>