From f340353715de0fb83b4aa33b286725404c7662a2 Mon Sep 17 00:00:00 2001
From: 50l3r <500l3r@gmail.com>
Date: Thu, 4 Apr 2024 15:10:40 +0200
Subject: [PATCH] feat: improve components & menu

---
 package.json                                  |  2 +-
 .../data-entry/k-switch/k-switch.vue          |  4 ++-
 src/components/feedback/k-empty/k-empty.vue   |  2 +-
 src/layouts/main/partials/aside/menu.vue      | 25 +++++++++++--------
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index f4bee09..0ffaa49 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "kodama-ui",
-    "version": "0.28.0",
+    "version": "0.30.0",
     "description": "Kodama UI is a Vue 3 component library that provides a set of components & funcionality to build your application.",
     "homepage": "https://50l3r.github.io/kodama-ui",
     "keywords": [
diff --git a/src/components/data-entry/k-switch/k-switch.vue b/src/components/data-entry/k-switch/k-switch.vue
index 9f2da11..ce5b748 100644
--- a/src/components/data-entry/k-switch/k-switch.vue
+++ b/src/components/data-entry/k-switch/k-switch.vue
@@ -71,12 +71,13 @@
                 description: 'Tamaño del switch'
             }
         },
-        emits: ['update:modelValue'],
+        emits: ['update:modelValue', 'change'],
         setup(props, ctx) {
             const hasSlot = (name: string) => !!ctx.slots[name]
 
             const onChange = (val: any) => {
                 ctx.emit('update:modelValue', val.target.checked)
+                ctx.emit('change', val.target.checked)
             }
 
             const model = computed({
@@ -85,6 +86,7 @@
                 },
                 set(val) {
                     ctx.emit('update:modelValue', val)
+                    ctx.emit('change', val)
                 }
             })
 
diff --git a/src/components/feedback/k-empty/k-empty.vue b/src/components/feedback/k-empty/k-empty.vue
index b35710d..41d5aee 100644
--- a/src/components/feedback/k-empty/k-empty.vue
+++ b/src/components/feedback/k-empty/k-empty.vue
@@ -8,7 +8,7 @@
                 :size="3"
                 bolder
                 uppercase
-                class="text-gray-900"
+                class="text-gray-900 dark:text-white"
             >
                 {{ title }}
                 <template v-if="subtitle" #subtitle>
diff --git a/src/layouts/main/partials/aside/menu.vue b/src/layouts/main/partials/aside/menu.vue
index bc8d08a..1381e3a 100644
--- a/src/layouts/main/partials/aside/menu.vue
+++ b/src/layouts/main/partials/aside/menu.vue
@@ -201,7 +201,7 @@
 </template>
 
 <script lang="ts">
-    import { defineComponent, inject, onMounted } from 'vue'
+    import { computed, defineComponent, inject, onMounted } from 'vue'
     import { RouteLocationRaw, useRoute } from 'vue-router'
     import { Accordion } from 'flowbite'
 
@@ -221,24 +221,27 @@
             const $menu: () => Menu[] = inject('$menu') || (() => [])
 
             const SeparatorMenu: Menu[] = [{ separator: true }]
-            const FrontMenu: Menu[] = $menu()
-            const menu: Menu[] = [...FrontMenu, ...SeparatorMenu, ...SysMenu]
+
+            const menu = computed(() => {
+                const FrontMenu: Menu[] = $menu()
+                return [...FrontMenu, ...SeparatorMenu, ...SysMenu]
+            })
 
             const hasActiveChildren = (match: RouteLocationRaw) => {
                 return route.path.indexOf(match.toString()) !== -1
             }
 
-            const checkRoles = (menu: any) => {
-                if (menu.auth !== undefined) return !!menu.auth
+            const checkRoles = (item: any) => {
+                if (item.auth !== undefined) return !!item.auth
                 return true
             }
 
-            const hasOneAccess = (menu: any) => {
-                if (menu.auth) return menu.auth
+            const hasOneAccess = (item: any) => {
+                if (item.auth) return item.auth
 
-                if (menu.pages) {
-                    for (let i = 0; i < menu.pages.length; i++) {
-                        const page = menu.pages[i]
+                if (item.pages) {
+                    for (let i = 0; i < item.pages.length; i++) {
+                        const page = item.pages[i]
 
                         if (page.auth) return page.auth
 
@@ -260,7 +263,7 @@
                 // create an array of objects with the id, trigger element (eg. button), and the content element
                 let accordionItems: any[] = []
                 let i = 0
-                menu.forEach((item) => {
+                menu.value.forEach((item) => {
                     if (item.pages) {
                         item.pages.forEach((page) => {
                             if (page.pages) {