ketekny-ui-kit 1.0.96 → 1.0.98

package/index.js

@@ -14,6 +14,7 @@ import kTable from './src/ui/kTable.vue'
 import kTabs from './src/ui/kTabs.vue'
 import kToggle from './src/ui/kToggle.vue'
 import kForm from './src/ui/kForm.vue'
+import kOptionGroup from './src/ui/kOptionGroup.vue'
 import kUploader from './src/ui/kUploader.vue'
 import kEditor from './src/ui/kEditor.vue'
 import kSpinner from './src/ui/kSpinner.vue'
@@ -57,7 +58,7 @@ export {
   kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
 
   // Form Components
-  kButton, kCheckbox, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea, kForm,
+  kButton, kCheckbox, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea, kForm, kOptionGroup,
 
   // Dialogs
   kDialog, kDrawer,

package/package.json

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

package/src/directives/v-tooltip.js

@@ -196,6 +196,18 @@ export default {
       visible: false,
       nodes: null,
       app: null,
+      content,
+    }
+
+    function renderContent(bubble) {
+      const content = state.content
+      if (content.mode === 'text') bubble.textContent = content.text || ''
+      else if (content.mode === 'html') bubble.innerHTML = content.html || ''
+      else if (content.mode === 'component') {
+        state.app?.unmount?.()
+        state.app = createApp({ render: () => h(content.component, content.props || {}) })
+        state.app.mount(bubble)
+      }
     }
 
     function ensureNodes() {
@@ -204,12 +216,7 @@ export default {
       const { wrapper, bubble, arrow } = createNodes()
       document.body.appendChild(wrapper)
 
-      if (content.mode === 'text') bubble.textContent = content.text
-      if (content.mode === 'html') bubble.innerHTML = content.html
-      if (content.mode === 'component') {
-        state.app = createApp({ render: () => h(content.component, content.props || {}) })
-        state.app.mount(bubble)
-      }
+      renderContent(bubble)
 
       state.nodes = { wrapper, bubble, arrow }
       return state.nodes
@@ -297,17 +304,17 @@ export default {
       t.state.placement = nextPlacement
     }
 
-    const content = normalizeValue(binding)
+    t.state.content = normalizeValue(binding)
     if (!t.state.nodes) return
 
     const { bubble } = t.state.nodes
+    const content = t.state.content
     if (content.mode === 'text') bubble.textContent = content.text || ''
     else if (content.mode === 'html') bubble.innerHTML = content.html || ''
     else if (content.mode === 'component') {
       t.state.app?.unmount?.()
-      const app = createApp({ render: () => h(content.component, content.props || {}) })
-      app.mount(bubble)
-      t.state.app = app
+      t.state.app = createApp({ render: () => h(content.component, content.props || {}) })
+      t.state.app.mount(bubble)
     }
   },
 

package/src/twoColLayout/components/MultilevelSidebar.vue

@@ -239,33 +239,38 @@ export default {
 
 <template>
   <aside
-    class="fixed inset-y-0 left-0 z-40 flex h-full shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width,transform] duration-200 ease-out lg:static lg:translate-x-0"
+    class="group/sidebar fixed inset-y-0 left-0 z-40 flex h-full shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width,transform] duration-200 ease-out lg:static lg:translate-x-0"
     :style="sidebarWidthStyle"
     :class="[
       mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
     ]"
   >
-    <div class="flex items-center px-4 py-4" :class="collapsed ? 'justify-center' : 'gap-2.5'">
+    <button
+      type="button"
+      v-tooltip.right="collapsed ? 'Ανάπτυξη πλαϊνού μενού' : 'Σύμπτυξη πλαϊνού μενού'"
+      class="absolute right-0 top-1/2 z-50 hidden h-14 w-6 -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-r-md border border-sidebar-border bg-sidebar-accent text-sidebar-muted opacity-70 shadow-lg shadow-black/30 transition-[color,opacity] hover:opacity-100 hover:text-sidebar-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand lg:inline-flex"
+      :aria-label="collapsed ? 'Ανάπτυξη πλαϊνού μενού' : 'Σύμπτυξη πλαϊνού μενού'"
+      @click="toggleCollapsed"
+    >
+      <PanelLeftOpen v-if="collapsed" class="size-4" :stroke-width="2" />
+      <PanelLeftClose v-else class="size-4" :stroke-width="2" />
+    </button>
+
+    <div class="relative flex items-center px-4 py-4" :class="collapsed ? 'justify-center' : 'gap-2.5'">
       <img
-        :src="
-          collapsed
-            ? 'https://s3.ketekny.gr/public/web-apps/logos/logo-icon-dark.png'
-            : 'https://support.ketekny.gr/logo-dark.png'
-        "
+        v-if="collapsed"
+        src="https://s3.ketekny.gr/public/web-apps/logos/logo-icon-dark.png"
         alt="Ketekny logo"
-        class="object-contain"
-        :class="collapsed ? 'size-9 shrink-0 rounded-lg' : 'h-10 min-w-0 flex-1'"
+        class="size-9 shrink-0 rounded-lg object-contain"
+        @click="handleLogoClick"
+      />
+      <img
+        v-else
+        src="https://support.ketekny.gr/logo-dark.png"
+        alt="Ketekny logo"
+        class="h-10 min-w-0 flex-1 object-contain"
         @click="handleLogoClick"
       />
-      <button
-        v-if="!collapsed"
-        type="button"
-        class="ml-auto hidden rounded-md p-1.5 text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-foreground lg:inline-flex"
-        aria-label="Collapse sidebar"
-        @click="toggleCollapsed"
-      >
-        <PanelLeftClose class="size-4" :stroke-width="2" />
-      </button>
     </div>
 
     <div v-if="title && !collapsed" class="px-4 pb-2">
@@ -291,18 +296,6 @@ export default {
       </div>
     </div>
 
-    <div v-if="collapsed" class="justify-center hidden px-3 pb-1 lg:flex">
-      <button
-        type="button"
-        v-tooltip.right="'Ανάπτυξη πλαϊνού μενού'"
-        class="flex h-10 w-10 items-center justify-center rounded-md text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-foreground"
-        aria-label="Ανάπτυξη πλαϊνού μενού"
-        @click="toggleCollapsed"
-      >
-        <PanelLeftOpen class="size-4" :stroke-width="2" />
-      </button>
-    </div>
-
     <div v-if="!collapsed" class="px-3 pb-2">
       <div class="relative">
         <Search
@@ -376,67 +369,69 @@ export default {
             <Bell class="size-4" :stroke-width="2" />
           </button>
         </div>
-        <button
-          v-for="link in footerLinks"
-          :key="link.id"
-          v-if="collapsed"
-          type="button"
-          v-tooltip.right="link.label"
-          class="flex items-center w-full rounded-md transition-colors duration-150"
-          :class="[
-            'justify-center px-0 py-2',
-            activeId === link.id
-              ? 'bg-brand text-brand-foreground font-medium'
-              : link.id === 'sign-out'
-                ? 'text-orange-300 hover:bg-orange-500/10 hover:text-orange-200'
-                : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-foreground',
-          ]"
-          :aria-label="collapsed ? link.label : undefined"
-          @click="handleFooterSelect(link.id)"
-        >
-          <component
-            :is="link.icon"
-            class="size-4 shrink-0"
-            :class="
+        <template v-if="collapsed">
+          <button
+            v-for="link in footerLinks"
+            :key="link.id"
+            type="button"
+            v-tooltip.right="link.label"
+            class="flex items-center w-full rounded-md transition-colors duration-150"
+            :class="[
+              'justify-center px-0 py-2',
               activeId === link.id
-                ? 'text-brand-foreground'
+                ? 'bg-brand text-brand-foreground font-medium'
                 : link.id === 'sign-out'
-                  ? 'text-orange-400'
-                  : 'text-sidebar-muted'
-            "
-            :stroke-width="2"
-          />
-        </button>
-        <button
-          v-for="link in expandedFooterLinks"
-          :key="`${link.id}-expanded`"
-          v-else
-          type="button"
-          class="flex items-center w-full rounded-md transition-colors duration-150"
-          :class="[
-            'gap-2.5 px-2 py-2 text-left',
-            activeId === link.id
-              ? 'bg-brand text-brand-foreground font-medium'
-              : link.id === 'sign-out'
-                ? 'text-orange-300 hover:bg-orange-500/10 hover:text-orange-200'
-                : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-foreground',
-          ]"
-          @click="handleFooterSelect(link.id)"
-        >
-          <component
-            :is="link.icon"
-            class="size-4 shrink-0"
-            :class="
+                  ? 'text-orange-300 hover:bg-orange-500/10 hover:text-orange-200'
+                  : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-foreground',
+            ]"
+            :aria-label="link.label"
+            @click="handleFooterSelect(link.id)"
+          >
+            <component
+              :is="link.icon"
+              class="size-4 shrink-0"
+              :class="
+                activeId === link.id
+                  ? 'text-brand-foreground'
+                  : link.id === 'sign-out'
+                    ? 'text-orange-400'
+                    : 'text-sidebar-muted'
+              "
+              :stroke-width="2"
+            />
+          </button>
+        </template>
+        <template v-else>
+          <button
+            v-for="link in expandedFooterLinks"
+            :key="`${link.id}-expanded`"
+            type="button"
+            class="flex items-center w-full rounded-md transition-colors duration-150"
+            :class="[
+              'gap-2.5 px-2 py-2 text-left',
               activeId === link.id
-                ? 'text-brand-foreground'
+                ? 'bg-brand text-brand-foreground font-medium'
                 : link.id === 'sign-out'
-                  ? 'text-orange-400'
-                  : 'text-sidebar-muted'
-            "
-            :stroke-width="2"
-          />
-          <span class="truncate">{{ link.label }}</span>
-        </button>
+                  ? 'text-orange-300 hover:bg-orange-500/10 hover:text-orange-200'
+                  : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-foreground',
+            ]"
+            @click="handleFooterSelect(link.id)"
+          >
+            <component
+              :is="link.icon"
+              class="size-4 shrink-0"
+              :class="
+                activeId === link.id
+                  ? 'text-brand-foreground'
+                  : link.id === 'sign-out'
+                    ? 'text-orange-400'
+                    : 'text-sidebar-muted'
+              "
+              :stroke-width="2"
+            />
+            <span class="truncate">{{ link.label }}</span>
+          </button>
+        </template>
       </div>
 
       <div

package/src/twoColLayout/components/SidebarMenuItem.vue

@@ -164,6 +164,7 @@ export default {
             :level="level + 1"
             :active-id="activeId"
             :open-ids="openIds"
+            :collapsed="collapsed"
             @select="$emit('select', $event)"
             @toggle="$emit('toggle', $event)"
           />
@@ -207,6 +208,7 @@ export default {
             :level="0"
             :active-id="activeId"
             :open-ids="openIds"
+            :collapsed="false"
             @select="$emit('select', $event)"
             @toggle="$emit('toggle', $event)"
           />

package/src/ui/kList.vue

@@ -7,7 +7,13 @@
       <div
         v-for="(stat, index) in normalizedStats"
         :key="resolveKey(stat, index)"
-        class="flex items-center gap-3 p-3 border border-gray-200 rounded-xl bg-white dark:bg-slate-800 dark:border-slate-700"
+        class="flex items-center gap-3 border border-gray-200 rounded-xl bg-white p-3 dark:border-slate-700 dark:bg-slate-800"
+        :class="entryClass(stat)"
+        :role="stat.action ? 'button' : undefined"
+        :tabindex="stat.action ? 0 : undefined"
+        @click="handleAction(stat, index)"
+        @keydown.enter.prevent="handleAction(stat, index)"
+        @keydown.space.prevent="handleAction(stat, index)"
       >
         <div
           v-if="stat.icon"
@@ -39,6 +45,12 @@
             v-for="(stat, index) in normalizedStats"
             :key="resolveKey(stat, index)"
             class="border-b border-gray-200 last:border-b-0 dark:border-slate-700"
+            :class="entryClass(stat)"
+            :role="stat.action ? 'button' : undefined"
+            :tabindex="stat.action ? 0 : undefined"
+            @click="handleAction(stat, index)"
+            @keydown.enter.prevent="handleAction(stat, index)"
+            @keydown.space.prevent="handleAction(stat, index)"
           >
             <td class="px-4 py-3 text-sm text-gray-600 dark:text-slate-400">
               <div class="flex items-center gap-2">
@@ -89,15 +101,18 @@ export default {
       validator: (value) => ['col', 'row'].includes(value),
     },
   },
+  emits: ['action'],
   computed: {
     isRowFormat() {
       return this.format === 'row'
     },
     normalizedStats() {
       return this.stats.map((stat) => ({
+        raw: stat,
         label: stat?.label ?? '',
         value: stat?.value ?? '-',
         icon: stat?.icon ?? null,
+        action: typeof stat?.action === 'function' ? stat.action : null,
       }))
     },
   },
@@ -105,6 +120,16 @@ export default {
     resolveKey(stat, index) {
       return `${String(stat.label)}-${index}`
     },
+    entryClass(stat) {
+      return stat.action
+        ? 'cursor-pointer transition hover:border-primary/40 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:hover:bg-slate-700/70'
+        : ''
+    },
+    handleAction(stat, index) {
+      if (!stat.action) return
+      stat.action(stat.raw, index)
+      this.$emit('action', stat.raw, index)
+    },
   },
 }
 </script>

package/src/ui/kOptionGroup.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="w-full">
+    <div
+      v-if="title"
+      :class="titleClass"
+    >
+      {{ title }}
+    </div>
+    <div :class="containerClass">
+      <button
+        v-for="(option, index) in normalizedOptions"
+        :key="resolveKey(option, index)"
+        type="button"
+        class="flex w-full text-left transition"
+        :class="buttonClass(option)"
+        @click="toggleOption(option)"
+      >
+        <div
+          v-if="option.icon"
+          class="shrink-0"
+          :class="iconWrapperClass(option)"
+        >
+          <kIcon
+            v-if="typeof option.icon === 'string'"
+            :name="option.icon"
+            :size="iconSize"
+          />
+          <component
+            :is="option.icon"
+            v-else
+            :class="iconComponentClass"
+          />
+        </div>
+
+        <div class="min-w-0 flex-1">
+          <div :class="contentRowClass">
+            <div class="min-w-0">
+              <div class="truncate text-sm font-semibold">
+                {{ option.label }}
+              </div>
+              <div
+                v-if="option.description"
+                :class="descriptionClass"
+              >
+                {{ option.description }}
+              </div>
+            </div>
+            <span
+              :class="checkClass(option)"
+            >
+              ✓
+            </span>
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import kIcon from "./kIcon.vue";
+
+export default {
+  name: "kOptionGroup",
+  components: {
+    kIcon,
+  },
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => [],
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    selection: {
+      type: String,
+      default: "multiple",
+      validator: (value) => ["single", "multiple"].includes(value),
+    },
+    variant: {
+      type: String,
+      default: "table",
+      validator: (value) => ["table", "card"].includes(value),
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    valueKey: {
+      type: String,
+      default: "value",
+    },
+    labelKey: {
+      type: String,
+      default: "label",
+    },
+    descriptionKey: {
+      type: String,
+      default: "description",
+    },
+    iconKey: {
+      type: String,
+      default: "icon",
+    },
+  },
+  emits: ["update:modelValue", "change"],
+  computed: {
+    isMultiple() {
+      return this.selection === "multiple";
+    },
+    isTableVariant() {
+      return this.variant === "table";
+    },
+    normalizedSelection() {
+      return Array.isArray(this.modelValue) ? this.modelValue : [];
+    },
+    normalizedOptions() {
+      return this.options.map((option) => ({
+        raw: option,
+        value: option?.[this.valueKey],
+        label: option?.[this.labelKey] ?? "",
+        description: option?.[this.descriptionKey] ?? "",
+        icon: option?.[this.iconKey] ?? null,
+      }));
+    },
+    containerClass() {
+      return this.isTableVariant
+        ? "overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
+        : "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3";
+    },
+    titleClass() {
+      return this.isTableVariant
+        ? "mb-2 text-xs font-semibold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400"
+        : "mb-3 text-sm font-semibold text-slate-800 dark:text-slate-100";
+    },
+    contentRowClass() {
+      return this.isTableVariant ? "flex items-center justify-between gap-3" : "flex items-start justify-between gap-3";
+    },
+    descriptionClass() {
+      return this.isTableVariant
+        ? "mt-0.5 text-xs text-gray-500 dark:text-slate-400"
+        : "mt-1 text-xs text-gray-500 dark:text-slate-400";
+    },
+    iconSize() {
+      return this.isTableVariant ? 16 : 18;
+    },
+    iconComponentClass() {
+      return this.isTableVariant ? "h-4 w-4" : "h-[18px] w-[18px]";
+    },
+  },
+  methods: {
+    isSelected(option) {
+      return this.normalizedSelection.includes(option.value);
+    },
+    toggleOption(option) {
+      let nextSelection = [];
+
+      if (this.isMultiple) {
+        nextSelection = [...this.normalizedSelection];
+        const selectedIndex = nextSelection.indexOf(option.value);
+
+        if (selectedIndex === -1) nextSelection.push(option.value);
+        else nextSelection.splice(selectedIndex, 1);
+      } else {
+        nextSelection = this.isSelected(option) ? [] : [option.value];
+      }
+
+      this.$emit("update:modelValue", nextSelection);
+      this.$emit("change", nextSelection);
+    },
+    resolveKey(option, index) {
+      return `${String(option.value ?? option.label)}-${index}`;
+    },
+    buttonClass(option) {
+      if (this.isTableVariant) {
+        return this.isSelected(option)
+          ? "items-center gap-3 border-b border-slate-200 bg-primary/10 px-3 py-3 text-primary last:border-b-0 dark:border-slate-700 dark:bg-primary/15 dark:text-slate-100"
+          : "items-center gap-3 border-b border-slate-200 bg-white px-3 py-3 text-gray-700 hover:bg-slate-50 last:border-b-0 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800";
+      }
+
+      return this.isSelected(option)
+        ? "items-start gap-3 rounded-xl border border-primary bg-primary/10 p-3 text-primary dark:border-primary dark:bg-primary/15 dark:text-slate-100"
+        : "items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 text-gray-700 hover:border-primary/40 hover:bg-primary/5 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-primary/50 dark:hover:bg-primary/10";
+    },
+    iconWrapperClass(option) {
+      if (this.isTableVariant) {
+        return this.isSelected(option)
+          ? "flex h-8 w-8 items-center justify-center rounded-md bg-primary/15 text-primary"
+          : "flex h-8 w-8 items-center justify-center rounded-md bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300";
+      }
+
+      return "flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary";
+    },
+    checkClass(option) {
+      if (this.isTableVariant) {
+        return this.isSelected(option)
+          ? "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-[11px] font-semibold text-white"
+          : "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-slate-300 text-[11px] font-semibold text-transparent dark:border-slate-600";
+      }
+
+      return this.isSelected(option)
+        ? "mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-primary bg-primary text-[11px] font-semibold text-white"
+        : "mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-gray-300 text-[11px] font-semibold text-transparent dark:border-slate-600";
+    },
+  },
+};
+</script>