ketekny-ui-kit 1.0.70 → 1.0.72

package/package.json

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

package/src/layout/twoColLayout.vue

@@ -7,7 +7,7 @@
       type="button"
       :aria-label="expandLabel"
       v-tooltip.right="expandLabel"
-      class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#121b2e] text-white shadow-2xl shadow-black/50 transition-all duration-300 hover:bg-[#1a2640] lg:left-[44px] lg:translate-x-full lg:flex"
+      class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#121b2e] text-white shadow-2xl shadow-black/50 transition-all duration-300 hover:bg-[#1a2640] lg:left-[42px] lg:translate-x-full lg:flex"
       @click="toggleSidebar"
     >
       <slot name="collapsed-toggle-icon">
@@ -20,7 +20,7 @@
       type="button"
       :aria-label="collapseLabel"
       v-tooltip.left="collapseLabel"
-      class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#121b2e] text-white shadow-2xl shadow-black/50 transition-all duration-300 hover:bg-[#1a2640] lg:left-[328px] lg:translate-x-full lg:flex"
+      class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#121b2e] text-white shadow-2xl shadow-black/50 transition-all duration-300 hover:bg-[#1a2640] lg:left-[326px] lg:translate-x-full lg:flex"
       @click.stop="toggleSidebar"
     >
       <slot name="toggle-icon">
@@ -270,7 +270,6 @@
 import { h } from "vue";
 import kButton from "../ui/kButton.vue";
 import kIcon from "../ui/kIcon.vue";
-import { RouterLink } from "vue-router";
 
 const SidebarIconLink = {
   props: {
@@ -289,20 +288,24 @@ const SidebarIconLink = {
   methods: {
     handleClick(event) {
       if (this.onClick) this.onClick(event);
+
+      if (this.to && this.$router) {
+        event?.preventDefault?.();
+        this.$router.push(this.to);
+      }
     },
   },
   render() {
     const isLink = Boolean(this.to);
-    const tag = isLink ? RouterLink : this.isExternal ? "a" : "button";
+    const tag = this.isExternal ? "a" : "button";
 
     return h(
       tag,
       {
-        to: this.to,
         href: this.href,
         target: this.isExternal ? this.target : null,
         rel: this.isExternal ? this.rel : null,
-        type: isLink || this.isExternal ? null : "button",
+        type: this.isExternal ? null : "button",
         title: this.title,
         class: [
           "group relative flex h-14 w-14 items-center justify-center rounded-xl border border-white/15 transition",
@@ -310,7 +313,8 @@ const SidebarIconLink = {
             ? "bg-slate-950 text-white"
             : this.warning
             ? "bg-[#d97706] text-white hover:bg-[#b45309]"
-            : "bg-white/5 text-white hover:border-cyan-400/40 hover:bg-white/10",
+          : "bg-white/5 text-white hover:border-cyan-400/40 hover:bg-white/10",
+          isLink ? "cursor-pointer" : "",
         ],
         onClick: this.handleClick,
       },
@@ -325,7 +329,6 @@ export default {
   components: {
     kButton,
     kIcon,
-    RouterLink,
     SidebarIconLink,
   },
   emits: ["logo-click", "signin", "signup", "signout", "edit-profile"],