ketekny-ui-kit 1.0.72 → 1.0.73

package/package.json

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

package/src/layout/twoColLayout.vue

@@ -72,13 +72,7 @@
             :key="item.key"
             :icon="item.icon"
             :active="item.active"
-            :to="item.to"
-            :href="item.href"
-            :title="item.title"
-            :is-external="item.isExternal"
-            :target="item.target"
-            :rel="item.rel"
-            :on-click="item.onClick"
+            v-bind="item.bindings"
             v-tooltip.right="item.label"
           />
         </div>
@@ -266,10 +260,11 @@
   </div>
 </template>
 
-<script>
+  <script>
 import { h } from "vue";
 import kButton from "../ui/kButton.vue";
 import kIcon from "../ui/kIcon.vue";
+import { RouterLink } from "vue-router";
 
 const SidebarIconLink = {
   props: {
@@ -288,24 +283,20 @@ 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 = this.isExternal ? "a" : "button";
+    const tag = isLink ? RouterLink : this.isExternal ? "a" : "button";
 
     return h(
       tag,
       {
+        to: isLink ? this.to : undefined,
         href: this.href,
         target: this.isExternal ? this.target : null,
         rel: this.isExternal ? this.rel : null,
-        type: this.isExternal ? null : "button",
+        type: isLink || 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",
@@ -329,6 +320,7 @@ export default {
   components: {
     kButton,
     kIcon,
+    RouterLink,
     SidebarIconLink,
   },
   emits: ["logo-click", "signin", "signup", "signout", "edit-profile"],
@@ -418,8 +410,8 @@ export default {
       this.persistSidebarState();
     },
     menuItemTag(item) {
-      if (item?.isLink) return "RouterLink";
-      if (item?.isExternal) return "a";
+      if (item?.to) return RouterLink;
+      if (item?.href) return "a";
       return "button";
     },
   },
@@ -461,6 +453,29 @@ export default {
         };
       });
     },
+    menuItemBindings(item) {
+      if (item?.to) {
+        return {
+          to: item.to,
+          title: item.title || item.label,
+          "aria-current": item.active ? "page" : null,
+        };
+      }
+
+      if (item?.href) {
+        return {
+          href: item.href,
+          target: item.target || "_blank",
+          rel: item.rel || "noreferrer",
+          title: item.title || item.label,
+        };
+      }
+
+      return {
+        type: "button",
+        title: item?.title || item?.label,
+      };
+    },
     accountDisplayName() {
       if (!this.account) return "";
       return (