ketekny-ui-kit 1.0.71 → 1.0.73

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.71",
+  "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,7 +260,7 @@
   </div>
 </template>
 
-<script>
+  <script>
 import { h } from "vue";
 import kButton from "../ui/kButton.vue";
 import kIcon from "../ui/kIcon.vue";
@@ -298,7 +292,7 @@ const SidebarIconLink = {
     return h(
       tag,
       {
-        to: this.to,
+        to: isLink ? this.to : undefined,
         href: this.href,
         target: this.isExternal ? this.target : null,
         rel: this.isExternal ? this.rel : null,
@@ -310,7 +304,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,
       },
@@ -415,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";
     },
   },
@@ -458,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 (