ketekny-ui-kit 1.0.72 → 1.0.74

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.72",
+  "version": "1.0.74",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [
@@ -38,16 +38,12 @@
     "vite": "^6.3.5"
   },
   "dependencies": {
-    "@primeuix/themes": "^1.1.1",
-    "@vuepic/vue-datepicker": "^11.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "1.11.19",
     "element-plus": "^2.13.5",
     "lucide-vue-next": "^0.511.0",
     "moment": "^2.30.1",
-    "primeicons": "^7.0.0",
-    "primevue": "^4.3.4",
     "reka-ui": "^2.8.2",
     "simple-code-editor": "^2.0.9",
     "tailwind-merge": "^3.5.0",

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 (

package/src/style/style.css

@@ -1,6 +1,3 @@
-
-@import "primeicons/primeicons.css";
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package/src/ui/kSpinner.vue

@@ -1,19 +1,15 @@
 <template>
   <div class="flex items-center justify-center w-16 space-x-1" v-if="type == 'line'">
-    <i class="ml-1 text-primary dark:text-sky-200 pi pi-wave-pulse" />
+    <span class="spinner-ring spinner-ring--sm ml-1 text-primary dark:text-sky-200" aria-hidden="true" />
     <div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0s' }"></div>
     <div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0.15s' }"></div>
     <div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0.3s' }"></div>
     <div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0.45s' }"></div>
   </div>
 
-  <Loader class="w-6 h-6 mr-2 animate-spin text-primary dark:text-sky-200" style="animation-duration: 1.5s" v-else-if="type == 'circle'" />
+  <span class="spinner-ring mr-2 text-primary dark:text-sky-200" aria-hidden="true" v-else-if="type == 'circle'" />
 </template>
 
-<script setup>
-import { Loader } from "lucide-vue-next";
-</script>
-
 <script>
 export default {
   name: "FourDotSpinner",
@@ -35,4 +31,25 @@ export default {
 .animate-fade {
   animation: fade 1s ease-in-out infinite;
 }
+
+.spinner-ring {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  animation: spin 1s linear infinite;
+  display: inline-block;
+}
+
+.spinner-ring--sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>