ketekny-ui-kit 1.0.88 → 1.0.90

package/package.json

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

package/src/layout/twoColLayout.vue

@@ -317,6 +317,7 @@ export default {
           key,
           label: item?.label || "",
           description: item?.description || "",
+          badge: item?.badge ?? null,
           icon: item?.icon || "Dot",
           active,
           hasActiveChild,

package/src/layout/twoColSidebarMenuList.vue

@@ -12,22 +12,29 @@
         <component
           :is="menuItemComponent(item)"
           v-bind="item.bindings"
-          class="flex min-w-0 flex-1 appearance-none items-center gap-3 border-0 bg-transparent px-2 py-1.5 text-left outline-none transition-all duration-150"
+          class="sidebar-menu-item relative flex min-h-[38px] min-w-0 flex-1 items-center gap-2.5 rounded-md px-3 py-2 text-left outline-none transition-colors duration-150"
           :class="itemRowClasses(item)"
           @click="handleItemClick(item, $event)"
         >
           <span
-            class="flex h-5 w-5 shrink-0 items-center justify-center text-[#eef2f7] transition-colors duration-150"
+            v-if="item.active"
+            class="absolute left-0 top-1/2 h-5 w-1 -translate-y-1/2 rounded-r bg-[#2491ff]"
+            aria-hidden="true"
+          />
+          <span
+            class="flex h-4 w-4 shrink-0 items-center justify-center transition-colors duration-150"
+            :class="iconWrapClasses(item)"
           >
             <kIcon
               v-if="showFullIcon(item)"
               :name="item.icon"
-              size="18"
-              color="#eef2f7"
+              size="16"
+              color="currentColor"
+              class="sidebar-menu-item-icon"
             />
             <span
               v-else
-              class="h-1.5 w-1.5 rounded-full bg-current opacity-80"
+              class="h-1.5 w-1.5 rounded-full bg-current"
             />
           </span>
           <span class="min-w-0 flex-1">
@@ -36,18 +43,25 @@
             </span>
             <span
               v-if="item.description"
-              class="mt-1 block truncate"
-              :class="[itemDescriptionClasses, item.active ? 'text-[#9fa6b5]' : 'text-[#6f7786]']"
+              class="block truncate"
+              :class="[itemDescriptionClasses, item.active ? 'text-[#9fa6b5]' : 'sidebar-menu-item-description text-[#6f7786]']"
             >
               {{ item.description }}
             </span>
           </span>
+          <span
+            v-if="item.badge != null"
+            class="ml-auto rounded-full px-1.5 py-0.5 text-[11px] font-medium leading-none tabular-nums transition-colors duration-150"
+            :class="badgeClasses(item)"
+          >
+            {{ item.badge }}
+          </span>
         </component>
 
         <button
           v-if="item.hasChildren"
           type="button"
-          class="flex w-8 shrink-0 appearance-none items-center justify-center border-0 bg-transparent text-[#6f7786] outline-none transition hover:bg-white/6 hover:text-[#cbd5e1]"
+          class="flex w-8 shrink-0 appearance-none items-center justify-center border-0 bg-transparent text-[#6f7786] outline-none transition-colors duration-150 hover:text-[#e5e7eb]"
           :aria-expanded="isExpanded(item)"
           :aria-label="`${isExpanded(item) ? 'Collapse' : 'Expand'} ${item.label}`"
           @click.stop="toggle(item.key)"
@@ -64,7 +78,7 @@
 
       <div
         v-if="item.hasChildren && isExpanded(item)"
-        class="ml-2 pl-4"
+        class="pl-3"
       >
         <TwoColSidebarMenuList
           :items="item.children"
@@ -105,11 +119,6 @@ export default {
         ? "text-[12px] leading-4"
         : "text-[11px] leading-4";
     },
-    activeIndicatorClasses() {
-      return this.level === 0
-        ? "before:left-0"
-        : "before:-left-4";
-    },
   },
   methods: {
     menuItemComponent(item) {
@@ -134,10 +143,28 @@ export default {
     showFullIcon(item) {
       return this.level === 0 && Boolean(item?.icon);
     },
+    iconWrapClasses(item) {
+      if (item.active) return "text-[#eef2f7]";
+      if (item.hasActiveChild) return "text-[#cfd6e4]";
+      return "text-[#7b8494] group-hover:text-[#eef2f7]";
+    },
+    badgeClasses(item) {
+      if (item.active) {
+        return "bg-white/12 text-[#eef2f7]";
+      }
+
+      return "sidebar-menu-item-badge bg-white/8 text-[#8e97a8]";
+    },
     itemRowClasses(item) {
-      return item.active
-        ? `relative rounded-xl bg-[#1f232b] text-white before:absolute before:bottom-2 before:top-2 before:w-[3px] before:rounded-r-full before:bg-[#2491ff] ${this.activeIndicatorClasses}`
-        : "rounded-xl text-[#e5e7eb] hover:bg-[#242424] hover:text-white";
+      if (item.active) {
+        return "sidebar-menu-item--active bg-white/10 text-[#eef2f7]";
+      }
+
+      if (item.hasActiveChild) {
+        return "text-[#eef2f7]";
+      }
+
+      return "text-[#c7cfdb] hover:bg-white/6 hover:text-[#eef2f7]";
     },
     toggle(key) {
       this.$emit("toggle-branch", key);
@@ -145,3 +172,39 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.sidebar-menu-item-icon,
+.sidebar-menu-item-description {
+  transition: color 150ms ease-out;
+}
+
+.sidebar-menu-item--active {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+}
+
+.sidebar-menu-item-icon {
+  color: currentColor !important;
+}
+
+.sidebar-menu-item--active .sidebar-menu-item-icon {
+  color: #eef2f7 !important;
+}
+
+.sidebar-menu-item:hover .sidebar-menu-item-icon {
+  color: #eef2f7 !important;
+}
+
+.sidebar-menu-item:hover {
+  color: #eef2f7;
+}
+
+.sidebar-menu-item:hover .sidebar-menu-item-badge {
+  color: #eef2f7;
+}
+
+.sidebar-menu-item--active .sidebar-menu-item-description,
+.sidebar-menu-item:hover .sidebar-menu-item-description {
+  color: #eef2f7;
+}
+</style>

package/src/layout/twoColSidebarPanel.vue

@@ -211,33 +211,34 @@
       <div v-else class="flex flex-col  px-1">
         <div
           v-if="helpUrl || account.loggedIn"
+          class="flex flex-col gap-0.5"
         >
           <a
             v-if="helpUrl"
             :href="helpUrl"
             target="_blank"
             rel="noreferrer"
-            class="flex w-full items-center gap-3 rounded-xl px-2 py-2 text-lg font-medium text-[#d7dbe3] transition hover:bg-[#242424] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+            class="sidebar-footer-item flex min-h-[38px] w-full items-center gap-2.5 rounded-md bg-transparent px-3 py-2 text-left text-[15px] font-medium text-[#c7cfdb] outline-none transition-colors duration-150 hover:bg-white/6 hover:text-[#eef2f7] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
           >
-            <kIcon name="HelpCircle" size="16" color="#d7dbe3" />
+            <kIcon name="HelpCircle" size="16" color="currentColor" class="sidebar-footer-item-icon" />
             <span>Βοήθεια και υποστήριξη</span>
           </a>
           <button
             v-if="account.loggedIn"
             type="button"
-            class="flex w-full items-center gap-3 rounded-xl px-2 py-2 text-left text-lg font-medium text-[#d7dbe3] transition hover:bg-[#242424] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+            class="sidebar-footer-item flex min-h-[38px] w-full items-center gap-2.5 rounded-md bg-transparent px-3 py-2 text-left text-[15px] font-medium text-[#c7cfdb] outline-none transition-colors duration-150 hover:bg-white/6 hover:text-[#eef2f7] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
             @click="$emit('edit-profile')"
           >
-            <kIcon name="UserRoundCog" size="16" color="#d7dbe3" />
+            <kIcon name="UserRoundCog" size="16" color="currentColor" class="sidebar-footer-item-icon" />
             <span>Το προφίλ μου</span>
           </button>
           <button
             v-if="account.loggedIn"
             type="button"
-            class="flex w-full items-center gap-3 rounded-xl px-2 py-2 text-left text-lg font-medium text-[#f59e0b] transition hover:bg-[#3a1f12] hover:text-[#fbbf24] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#f59e0b]/40"
+            class="sidebar-footer-item sidebar-footer-item--warning flex min-h-[38px] w-full items-center gap-2.5 rounded-md bg-transparent px-3 py-2 text-left text-[15px] font-medium text-[#f59e0b] outline-none transition-colors duration-150 hover:bg-[#3a2410] hover:text-[#fbbf24] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#f59e0b]/40"
             @click="$emit('signout')"
           >
-            <kIcon name="LogOut" size="16" color="#f59e0b" />
+            <kIcon name="LogOut" size="16" color="currentColor" class="sidebar-footer-item-icon" />
             <span>Αποσύνδεση</span>
           </button>
         </div>
@@ -631,3 +632,22 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.sidebar-footer-item-icon {
+  color: #9ca3af !important;
+  transition: color 200ms ease-out;
+}
+
+.sidebar-footer-item:hover .sidebar-footer-item-icon {
+  color: #ffffff !important;
+}
+
+.sidebar-footer-item--warning .sidebar-footer-item-icon {
+  color: #f59e0b !important;
+}
+
+.sidebar-footer-item--warning:hover .sidebar-footer-item-icon {
+  color: #fbbf24 !important;
+}
+</style>