ketekny-ui-kit 1.0.64 → 1.0.66

package/package.json

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

package/src/layout/twoColLayout.vue

@@ -83,7 +83,7 @@
           <component
             v-for="item in normalizedMainMenu"
             :key="item.key"
-            :is="item.isLink ? RouterLink : item.isExternal ? 'a' : 'button'"
+            :is="menuItemTag(item)"
             v-bind="item.bindings"
             class="flex w-full items-start gap-3 rounded-2xl border px-4 py-4 text-left transition-all duration-200"
             :class="item.classes"
@@ -203,6 +203,7 @@
 </template>
 
 <script>
+import { h } from 'vue'
 import kButton from '../ui/kButton.vue'
 import kIcon from '../ui/kIcon.vue'
 import { RouterLink } from 'vue-router'
@@ -226,23 +227,32 @@ const SidebarIconLink = {
       if (this.onClick) this.onClick(event)
     },
   },
-  template: `
-    <component
-      :is="to ? RouterLink : isExternal ? 'a' : 'button'"
-      :to="to"
-      :href="href"
-      :target="isExternal ? target : null"
-      :rel="isExternal ? rel : null"
-      :type="to || isExternal ? null : 'button'"
-      :title="title"
-      class="group relative flex h-14 w-14 items-center justify-center rounded-xl border border-white/15 transition"
-      :class="active ? 'bg-slate-950 text-white' : warning ? 'bg-[#d97706] text-white hover:bg-[#b45309]' : 'bg-white/5 text-white hover:border-cyan-400/40 hover:bg-white/10'"
-      @click="handleClick"
-    >
-      <kIcon :name="icon" size="20" class="text-current" />
-    </component>
-  `,
-  components: { RouterLink, kIcon },
+  render() {
+    const isLink = Boolean(this.to)
+    const tag = isLink ? RouterLink : 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',
+        title: this.title,
+        class: [
+          'group relative flex h-14 w-14 items-center justify-center rounded-xl border border-white/15 transition',
+          this.active
+            ? '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',
+        ],
+        onClick: this.handleClick,
+      },
+      [h(kIcon, { name: this.icon, size: '20', color: '#ffffff' })]
+    )
+  },
 }
 
 const DEFAULT_STORAGE_KEY = 'two-col-layout-sidebar-collapsed'
@@ -325,6 +335,11 @@ export default {
       this.isSidebarCollapsed = !this.isSidebarCollapsed
       this.persistSidebarState()
     },
+    menuItemTag(item) {
+      if (item?.isLink) return 'RouterLink'
+      if (item?.isExternal) return 'a'
+      return 'button'
+    },
   },
   computed: {
     normalizedMainMenu() {