@hostlink/nuxt-light 1.1.8 → 1.2.1

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.1.8"
+  "version": "1.2.1"
 }

package/dist/runtime/components/l-app-main.vue

@@ -1,11 +1,12 @@
 <script setup>
-import { useLight } from "#imports";
-import { useQuasar } from 'quasar';
+import { useRoute } from 'vue-router';
+import { useLight, q, m } from "#imports";
+import { useQuasar, Loading, Dialog } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { q, m, f } from '../';
 import { ref, computed, reactive, provide, watch } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 
+Loading.show()
 //download system value
 /* import { download } from './../lib/SystemValue'
 await download();
@@ -20,15 +21,18 @@ const tt = await q({
     app: ["menus", "viewAsMode", "languages",
         "copyrightYear",
         "copyrightName",
+        "hasFavorite",
         { i18nMessages: ["name", "value"] }],
-    my: ['username', 'first_name', 'last_name', 'roles', "styles", "language", f('granted_storage:granted', { right: "system.storage" }, [])],
+    my: ['username', 'first_name', 'last_name', 'roles', "styles", "language", "permissions", { myFavorites: ["label", "path"] }],
 })
 
 let app = tt.app
-let my = tt.my
+let my = reactive(tt.my)
 
 const light = useLight();
 light.init(my.styles);
+//set permission
+light.setPermissions(my.permissions);
 
 quasar.dark.set(light.isDarkMode());
 
@@ -36,7 +40,8 @@ const i18n = useI18n();
 i18n.locale = my.language || 'en';
 
 let system = null
-if (my.granted_storage) {
+
+if (light.isGranted("system.storage")) {
     system = await q("system", ["diskFreeSpace", "diskUsageSpace", "diskTotalSpace", "diskFreeSpacePercent"]);
 }
 
@@ -65,6 +70,7 @@ const toggleRightDrawer = () => {
 let showViewAs = false;
 if (my && my.roles.indexOf('Administrators') != -1) {
     showViewAs = true;
+    light.isAdmin = true;
 }
 
 const menuOverlayHeader = ref(false)
@@ -188,19 +194,64 @@ const containerStyle = computed(() => {
     }
 })
 
-const fullscreen = ref(document.fullscreenElement)
+const route = useRoute()
+
+const reloadMyFavorites = async () => {
+    const data = await q({
+        my: {
+            myFavorites: {
+                label: true,
+                path: true,
+            }
+        }
+    });
+    my.myFavorites = data.my.myFavorites;
+}
+
+const onToggleFav = async () => {
 
-const onFullscreen = () => {
-    if (document.fullscreenElement) {
-        document.exitFullscreen();
-        fullscreen.value = false;
-    } else {
-        fullscreen.value = true;
+    if (isFav.value) {
+        await m("removeMyFavorite", {
+            path: route.fullPath,
+        })
 
-        document.documentElement.requestFullscreen();
+        //reload my.myFavorites
+        reloadMyFavorites();
+
+        return;
     }
+
+    Dialog.create({
+        title: 'Add to favorite',
+        message: 'Enter favorite label',
+        prompt: {
+            //get window title, remove - and replace with space
+            model: route.name.replace(/-/g, ' '),
+        },
+        cancel: true,
+        persistent: true,
+    }).onOk(async (data) => {
+        if (data === '') return;
+        if (await m("addMyFavorite", {
+            path: route.fullPath,
+            label: data,
+        })) {
+            reloadMyFavorites();
+
+        }
+    })
 }
 
+const isFav = computed(() => {
+    //check my.myFavorites
+    let fav = my.myFavorites.find((item) => {
+        return item.path == route.fullPath;
+    })
+    return fav;
+})
+
+Loading.hide()
+
 </script>
 
 <template>
@@ -218,26 +269,33 @@ const onFullscreen = () => {
 
                 <q-space />
 
-                <q-btn :icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'" round flat dense class="q-mr-sm"
-                    @click="onFullscreen">
+                <q-btn :icon="isFav ? 'favorite' : 'sym_o_favorite'" round flat dense class="q-mr-xs" @click="onToggleFav"
+                    v-if="app.hasFavorite">
+                </q-btn>
 
+                <q-btn :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'" round flat dense class="q-mr-xs"
+                    @click="$q.fullscreen.toggle()">
                 </q-btn>
 
-                <q-btn v-if="languages.length > 1" rounded flat icon="language" :label="my.language" class="q-mr-sm">
+                <q-btn v-if="languages.length > 1" round flat icon="language" class="q-mr-xs">
+                    <q-tooltip>
+                        {{ my.language }}
+                    </q-tooltip>
                     <q-menu>
                         <q-list>
-                            <q-item v-for="language in languages" :key="language.value" v-close-popup clickable
-                                @click="onChangeLocale(language.value)">
+                            <q-item v-for=" language  in  languages " :key="language.value" v-close-popup clickable
+                                @click="onChangeLocale(language.value)" :active="language.value == my.language">
                                 <q-item-section>
                                     <q-item-label>{{ language.name }}</q-item-label>
                                 </q-item-section>
                             </q-item>
                         </q-list>
                     </q-menu>
+
+
                 </q-btn>
 
-                <q-btn icon="sym_o_storage" flat round dense class="q-mr-sm" v-if="my.granted_storage"
-                    :color="storageColor">
+                <q-btn icon="sym_o_storage" flat round dense class="q-mr-sm" v-if="system" :color="storageColor">
                     <q-menu>
                         <q-card style="width:250px">
                             <q-card-section>
@@ -315,7 +373,12 @@ const onFullscreen = () => {
             @mouseover="isMouseOnDrawer = true">
             <!-- drawer content -->
             <q-scroll-area class="fit">
-                <l-menu v-for="menu in menus" :value="menu" :dense="style.dense" />
+                <div class="q-mx-sm">
+                    <l-fav-menu :value="my.myFavorites" :dense="style.dense" v-if="my.myFavorites.length > 0" />
+                    <l-menu v-for=" menu  in  menus " :value="menu" :dense="style.dense" />
+
+                </div>
+
             </q-scroll-area>
         </q-drawer>
 
@@ -331,7 +394,7 @@ const onFullscreen = () => {
         <q-page-container :class="containerClass" :style="containerStyle">
 
             <!-- Error message -->
-            <q-banner dense inline-actions class="bg-grey-4 q-ma-md" v-for="error in errors" rounded>
+            <q-banner dense inline-actions class="bg-grey-4 q-ma-md" v-for=" error  in  errors " rounded>
                 {{ error }}
                 <template v-slot:action>
                     <q-btn flat icon="sym_o_close" round dense @click="light.removeError(error)" />

package/dist/runtime/components/l-btn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type QBtnProps } from "quasar";
-import { ref, computed } from "vue";
-import { q, f, useLight } from '#imports';
+import { computed } from "vue";
+import { useLight } from '#imports';
 
 export interface LBtnProps extends QBtnProps {
     permission?: string;
@@ -11,17 +11,6 @@ const props = defineProps<LBtnProps>();
 
 const light = useLight();
 
-const granted = ref(false);
-if (props.permission) {
-    const my = await q("my", [f("granted", { right: props.permission }, [])]);
-
-    if (my.granted) {
-        granted.value = true;
-    }
-} else {
-    granted.value = true;
-}
-
 const attrs = computed(() => {
     return {
         ...{
@@ -37,7 +26,7 @@ const attrs = computed(() => {
 
 </script>
 <template>
-    <q-btn v-bind="attrs" color="primary" v-if="granted">
+    <q-btn v-bind="attrs" color="primary" v-if="$light.isGranted(permission)">
         <slot></slot>
     </q-btn>
 </template>

package/dist/runtime/components/l-card.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { useLight } from '#imports'
+import { useLight, q, m } from '#imports'
 import { ref, computed } from 'vue'
 import { type QCardProps } from 'quasar';
 
 export interface LCardProps extends QCardProps {
     loading?: boolean;
     title?: string;
+    /**
+     * Permission to access this card, if not granted, the card will not be shown, if the user is admin, a lock icon will be shown to allow the user to grant the permission
+     */
+    permission?: string
 }
 
 const light = useLight();
@@ -40,18 +44,98 @@ const fullScreenIcon = computed(() => fullScreen.value ? "sym_o_fullscreen_exit"
 
 const showBody = computed(() => !minimize.value || fullScreen.value);
 
+const showBar = computed(() => {
+    if (props.title !== undefined) return true;
+    if (showSecurity.value) return true;
+    return false;
+});
+
+
+const showSecurity = computed(() => {
+    if (props.permission === undefined) return false;
+    if (!light.isAdmin) return false;
+    return true;
+});
+
+
+const roles = ref<{
+    name: string;
+    granted: boolean;
+}[]>([]);
+
+if (props.permission && light.isAdmin) {
+    //get role 
+    const data = await q({
+        listRole: {
+            name: true
+        },
+        listPermission: {
+            __args: {
+                filters: {
+                    value: props.permission
+                }
+            }, data: {
+                role: true
+            }
+
+        }
+    });
+
+    roles.value = (data.listRole.map((r: any) => {
+        return {
+            name: r.name,
+            granted: data.listPermission.data.find((p: any) => p.role == r.name) != undefined
+        }
+    }));
+}
+
+const onTogglePermission = async (role: any) => {
+
+    if (role.granted) {
+
+        //remove permission
+        if (await m("removePermission", {
+            role: role.name,
+            value: props.permission,
+        })) {
+            role.granted = false;
+        }
+
+        return;
+    }
+
+    if (await m("addPermission", {
+        role: role.name,
+        value: props.permission,
+    })) {
+        role.granted = true;
+    }
+}
+
+
+
 </script>
 <template>
-    <q-card v-bind="attrs" :class="{ 'fullscreen': fullScreen, 'no-margin': fullScreen }">
-        <q-bar :class="cl" v-if="title">
-            <div>{{ $t(title) }}</div>
+    <q-card v-bind="attrs" :class="{ 'fullscreen': fullScreen, 'no-margin': fullScreen }"
+        v-if="$light.isGranted(permission)" :dark="$q.dark.isActive">
+        <q-bar :class="cl" v-if="showBar">
+            <div>{{ $t(title ?? "") }}</div>
             <q-space />
-            <!-- q-btn-dropdown dense flat icon="sym_o_search" persistent>
-                <div class="q-ma-md">
-                    <q-input></q-input>
-                </div>
-                
-            </q-btn-dropdown -->
+
+            <q-btn dense flat icon="sym_o_lock" persistent v-if="showSecurity">
+                <q-menu>
+                    <q-list>
+                        <q-item clickable v-for="role in roles" @click="onTogglePermission(role)">
+                            <q-item-section>{{ role.name }}</q-item-section>
+                            <q-item-section side>
+                                <q-icon name="sym_o_done" v-if="role.granted" />
+                            </q-item-section>
+                        </q-item>
+
+                    </q-list>
+                </q-menu>
+            </q-btn>
+
             <q-btn dense flat @click="fullScreen = !fullScreen" :icon="fullScreenIcon" />
             <q-btn dense flat :icon="icon" @click="minimize = !minimize" v-if="!fullScreen" />
         </q-bar>

package/dist/runtime/components/l-fav-menu.vue

@@ -0,0 +1,26 @@
+<script setup>
+const props = defineProps(["value", "dense"])
+
+const onClickRemove = () => {
+    console.log("onClickRemove")
+}
+
+</script>
+
+<style scoped>
+.menu-list .q-item{border-radius:12px 12px 12px 12px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,var(--q-primary),rgba(115,103,240,.7));color:#fff}
+</style>
+<template>
+    <q-expansion-item :label="$t('My Favorite')" :dense="dense" ref="expansion" icon="sym_o_favorite">
+        <q-list class="q-pl-md menu-list">
+            <q-item v-ripple :to="item.path" v-for="item in value">
+                <q-item-section avatar>
+                    <q-icon name="sym_o_link" />
+                </q-item-section>
+                <q-item-section>
+                    <q-item-label v-text="$t(item.label)"></q-item-label>
+                </q-item-section>
+            </q-item>
+        </q-list>
+    </q-expansion-item>
+</template>

package/dist/runtime/components/l-login.vue

@@ -194,16 +194,16 @@ onMounted(() => {
       <q-form ref="form1">
         <div class="q-gutter-sm">
           <l-input v-model.trim="data.username" label="Username" :rules="[v => !!v || $t('Username is required')]"
-            clearable :outlined="false" stackLabel/>
+            clearable :outlined="false" stackLabel autocomplete="username" />
           <l-input v-model="data.password" label="Password" type="password" clearable show-password stackLabel
-            :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" :outlined="false" />
+            :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" :outlined="false" autocomplete="current-password" />
           <l-input v-if="twoFactorAuthentication" v-model="data.code" label="2FA code" required type="text" clearable>
           </l-input>
         </div>
       </q-form>
     </q-card-section>
     <q-card-actions>
-      <l-btn label="Login" outline rounded color="primary" icon="sym_o_login" @click="submit" />
+      <l-btn label="Login" outline rounded color="primary" icon="sym_o_login" @click="submit"/>
       <l-btn v-if="hasBioLogin" outline rounded color="primary" icon="sym_o_fingerprint" @click="bioLogin" />
       <l-btn label="Forget password" outline rounded color="primary" icon="sym_o_lock_reset" @click="forgetPassword" />
     </q-card-actions>

package/dist/runtime/components/l-menu.vue

@@ -3,7 +3,6 @@ import { ref } from 'vue'
 const props = defineProps(["value", "dense"])
 const menus = ref(null);
 
-
 const expansion = ref(null);
 
 const onShowChild = (menu) => {
@@ -28,7 +27,7 @@ defineExpose({
 </script>
 
 <style scoped>
-.menu-list .q-item{border-radius:24px 24px 24px 24px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,var(--q-primary),rgba(115,103,240,.7));color:#fff}
+.menu-list .q-item{border-radius:12px 12px 12px 12px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,var(--q-primary),rgba(115,103,240,.7));color:#fff}
 </style>
 <template>
     <q-expansion-item v-if="value.children?.length > 0" :label="$t(value.label)" :icon="value.icon" :dense="dense"
@@ -39,7 +38,9 @@ defineExpose({
         </q-list>
     </q-expansion-item>
     <q-list v-else class="menu-list" :dense="dense">
-        <q-item v-ripple :to="value.to">
+        <q-separator v-if="value.type == 'separator'" :spaced="value.spaced" />
+        <q-item-label header v-if="value.type=='header'">{{ value.label }}</q-item-label>
+        <q-item v-ripple :to="value.to" v-if="!value.type" >
             <q-item-section avatar>
                 <q-icon :name="value.icon" />
             </q-item-section>

package/dist/runtime/components/l-small-box.vue

@@ -2,10 +2,10 @@
 import { computed } from "vue"
 
 export interface LSmallBoxProps {
-    title: string;
-    subtitle: string;
-    icon: string;
-    color: 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | 'brown' | 'grey' | 'blue-grey'
+    title?: string;
+    subtitle?: string;
+    icon?: string;
+    color?: 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | 'brown' | 'grey' | 'blue-grey'
 }
 
 const props = withDefaults(defineProps<LSmallBoxProps>(), {

package/dist/runtime/components/l-tabs.vue

@@ -37,13 +37,15 @@ const localValue = computed({
     }
 })
 
-const color = light.getStyle("color");
+
 
 </script>
 
 <template>
     <l-card>
-        <q-tabs class="text-grey" :active-color="color" :indicator-color="color" align="justify" v-model="localValue">
+        
+        <q-tabs class="text-grey" :active-color="$light.color" :indicator-color="$light.color" align="justify"
+            v-model="localValue">
             <q-tab v-for="tab in tabContents" :label="$t(tab.label)" :name="tab.name"></q-tab>
         </q-tabs>
         <q-tab-panels v-model="localValue">

package/dist/runtime/components/l-user-eventlog.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { model, q } from "#imports";
+const props = defineProps(['id']);
+</script>
+<template>
+    <div>
+        <l-table row-key="eventlog_id" sort-by="eventlog_id:desc"
+            :columns="model('EventLog').columns(['eventlog_id', 'class', 'id', 'action', 'created_time'])" @request="async (req) => {
+                const a = {
+                    listUser: {
+                        __args: {
+                            filters: {
+                                user_id: props.id
+                            }
+                        },
+                        data: {
+                            __args: {
+                                limit: 1
+                            },
+                            eventLog: req.gql
+                        }
+                    }
+                }
+
+                let resp = await q(a);
+                req.setData(resp.listUser.data[0].eventLog)
+            }" />
+    </div>
+</template>

package/dist/runtime/components/l-user-overview.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+
+import { model } from "#imports";
+const props = defineProps(['id']);
+
+const obj = await model('User').get({ user_id: props.id }, ["user_id", "username", "first_name", "last_name", "email", "phone", "roles", 'status', 'join_date'])
+
+</script>
+<template>
+    <l-card class="q-mb-md">
+        <q-card-section>
+            <l-row>
+                <l-col md="5">
+                    <q-list dense separator>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Username') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ obj.username }}</q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('First name') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ obj.first_name }}</q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Last name') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ obj.last_name }}</q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Email') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ obj.email }}</q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Phone') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ obj.phone }}</q-item-section>
+                        </q-item>
+
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Roles') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>
+                                <div class="q-gutter-xs float-left">
+                                    <q-badge v-for="role in obj.roles" :key="role">{{ role }}</q-badge>
+                                </div>
+                            </q-item-section>
+                        </q-item>
+
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Status') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ model('User').columns(["status"])[0].format(obj.status) }}</q-item-section>
+                        </q-item>
+
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label>{{ $t('Join date') }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section>{{ obj.join_date }}</q-item-section>
+                        </q-item>
+                    </q-list>
+
+
+                </l-col>
+            </l-row>
+
+        </q-card-section>
+
+    </l-card>
+</template>

package/dist/runtime/components/l-user-userlog.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { model, q } from "#imports";
+const props = defineProps(['id']);
+
+const columns = model('UserLog').columns(["userlog_id", "login_dt", "last_access_time", "logout_dt", "result", "user_agent"]);
+</script>
+<template>
+    <div>
+        <l-table row-key="userlog_id" sort-by="userlog_id:desc" :columns="columns" @request="async (req) => {
+            req.loadObjects('UserLog', { filters: { user_id: props.id } })
+        }" />
+    </div>
+</template>

package/dist/runtime/formkit/Select.vue

@@ -14,7 +14,7 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-console.log(props.context.node.props.parsedRules);
+//console.log(props.context.node.props.parsedRules);
 
 //check required in parsedRules
 let required = false;

package/dist/runtime/index.d.ts

@@ -1,8 +1,43 @@
+declare const app: {
+    company: string;
+    companyLogo: string;
+    color: string;
+    theme: string;
+    isAdmin: boolean;
+    permissions: string[];
+    isDarkMode: () => boolean;
+    setCompany: (company: string) => void;
+    getCompany: () => string;
+    setCompanyLogo: (logo: string) => void;
+    getCompanyLogo: () => string;
+    getVersion: () => any;
+    addError: (error: String) => void;
+    getErrors: () => String[];
+    removeError: (error: String) => void;
+    getStyle: (name: String) => any;
+    setStyles: (s: Object) => void;
+    getStyles: () => {
+        [key: string]: any;
+    };
+    setStyle: (name: String, value: any) => Promise<void>;
+    setCurrentRoute: (to: any, from: any) => void;
+    getID: () => number | null;
+    init: (styles: any) => void;
+    isGranted: (right?: string | undefined) => boolean;
+    setPermissions: (permissions: string[]) => void;
+};
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        $light: typeof app;
+    }
+}
 export declare const useLight: () => {
     company: string;
     companyLogo: string;
     color: string;
     theme: string;
+    isAdmin: boolean;
+    permissions: string[];
     isDarkMode: () => boolean;
     setCompany: (company: string) => void;
     getCompany: () => string;
@@ -15,12 +50,13 @@ export declare const useLight: () => {
     getStyle: (name: String) => any;
     setStyles: (s: Object) => void;
     getStyles: () => {
-        theme?: String | undefined;
-        color?: String | undefined;
+        [key: string]: any;
     };
     setStyle: (name: String, value: any) => Promise<void>;
     setCurrentRoute: (to: any, from: any) => void;
     getID: () => number | null;
     init: (styles: any) => void;
+    isGranted: (right?: string) => boolean;
+    setPermissions: (permissions: Array<string>) => void;
 };
 export * from "./lib";

package/dist/runtime/index.mjs

@@ -15,6 +15,8 @@ const app = reactive({
   companyLogo: "",
   color: "primary",
   theme: "light",
+  isAdmin: false,
+  permissions: Array(),
   isDarkMode: () => {
     return app.theme == "dark";
   },
@@ -90,6 +92,18 @@ const app = reactive({
     watch(() => app.theme, async () => {
       await app.setStyle("theme", app.theme);
     });
+  },
+  isGranted(right) {
+    if (right === void 0)
+      return true;
+    if (app.isAdmin)
+      return true;
+    if (app.permissions.includes(right))
+      return true;
+    return false;
+  },
+  setPermissions(permissions) {
+    this.permissions = permissions;
   }
 });
 let currentRoute = null;

package/dist/runtime/pages/System/menu/index.vue

@@ -1,12 +1,25 @@
 <script setup>
 import { ref, computed, inject } from 'vue';
-import { m, q } from '../../../'
+import { m, q } from '#imports'
 import { useQuasar } from 'quasar';
 
 const quasar = useQuasar();
-const menus = ref(await q("appMenus", []));
+const appMenus = await q("appMenus", [])
+
+
+const menus = ref([
+    {
+        label: "[Root]",
+        uuid: "ROOT",
+        children: appMenus.map(m => {
+            m.parent = 'ROOT'
+            return m
+        }),
+        type: 'root'
+    }
+]);
 
-const selected = ref(null);
+const selected = ref('ROOT');
 const tree1 = ref(null)
 
 const getUUID = () => {
@@ -20,30 +33,9 @@ const getUUID = () => {
 }
 
 const onReload = async () => {
-    menus.value = await q("appMenus", []);
+    menus.value[0].children = await q("appMenus", []);
 }
 
-const onAdd = () => {
-
-    quasar.dialog({
-        title: 'Add Menu',
-        message: 'Enter menu label',
-        prompt: {
-            model: '',
-        },
-        cancel: true,
-        persistent: true,
-    }).onOk((data) => {
-        if (data === '') return;
-
-        menus.value.push({
-            label: data,
-            uuid: getUUID(),
-            children: [],
-        });
-
-    });
-}
 const onAddChild = (node) => {
 
     quasar.dialog({
@@ -81,9 +73,10 @@ const onRemove = (node) => {
     }
 }
 
-const splitterModel = ref(38)
+const splitterModel = ref(20)
 
 const selectedNode = computed(() => {
+    if (selected.value == 'ROOT') return menus.value[0];
     return tree1.value.getNodeByKey(selected.value);
 });
 const reloadMenu = inject('reloadMenu')
@@ -98,7 +91,7 @@ const onSave = () => {
         persistent: true,
     }).onOk(async () => {
         if (await m("updateAppMenus", {
-            data: menus.value
+            data: menus.value[0].children
         })) {
             quasar.notify({
                 message: 'Menu saved',
@@ -140,20 +133,6 @@ const onMoveConfirm = () => {
     showMove.value = false;
 
 }
-const onMoveToRoot = () => {
-    const selectedNode = tree1.value.getNodeByKey(selected.value);
-
-    //clone selected node
-    const newNode = JSON.parse(JSON.stringify(selectedNode));
-    newNode.parent = null;
-    onRemove(selectedNode);
-
-    //add to target
-
-    menus.value.push(newNode);
-
-    showMove.value = false;
-}
 
 const getParentNode = (node) => {
     if (!node.parent) return {
@@ -197,6 +176,34 @@ const onAddChildMenu = (node, type) => {
         children: [],
     });
 }
+
+const onAddSeparator = (node) => {
+    node.children.push({
+        label: '[Separator]',
+        uuid: getUUID(),
+        parent: node.uuid,
+        children: [],
+        type: 'separator',
+        spaced: true,
+    });
+
+
+}
+
+const onAddHeader = (node) => {
+    node.children.push({
+        label: '[Header]',
+        uuid: getUUID(),
+        parent: node.uuid,
+        children: [],
+        type: 'header',
+    });
+}
+
+
+const menusOnly = computed(() => {
+    return menus.value.filter((item) => !item.type);
+});
 </script>
 
 <template>
@@ -211,79 +218,109 @@ const onAddChildMenu = (node, type) => {
                 <q-card-actions align="right">
                     <q-btn flat label="Cancel" color="primary" v-close-popup />
                     <q-btn flat label="Move" color="primary" @click="onMoveConfirm" />
-                    <q-btn flat label="Move to root" color="primary" @click="onMoveToRoot" />
+                    <!-- q-btn flat label="Move to root" color="primary" @click="onMoveToRoot" /-->
                 </q-card-actions>
             </l-card>
         </q-dialog>
 
         <l-card>
+            <q-card-actions  v-if="selectedNode">
+                <l-btn @click="onSave" label="Save" icon="sym_o_save" />
+                <l-btn @click="onReload" label="Reload" icon="sym_o_refresh" />
+                <template v-if="selectedNode.type == 'root'">
+                    <l-btn color="primary" @click="onAddChild(selectedNode)" label="Add" icon="sym_o_add" />
+                    <l-btn color="primary" @click="onAddHeader(selectedNode)" label="Add Header" icon="sym_o_add" />
+                    <l-btn color="primary" @click="onAddSeparator(selectedNode)" label="Add Separator" icon="sym_o_add" />
+                </template>
+
+                <template v-else>
+                    <q-btn-dropdown color="primary" label="Add" icon="sym_o_add">
+                        <q-list>
+                            <q-item clickable v-close-popup @click="onAddChild(selectedNode)">
+                                <q-item-section>
+                                    <q-item-label>Child</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item clickable v-close-popup @click="onAddHeader(selectedNode)">
+                                <q-item-section>
+                                    <q-item-label>Header</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-item clickable v-close-popup @click="onAddSeparator(selectedNode)">
+                                <q-item-section>
+                                    <q-item-label>Separator</q-item-label>
+                                </q-item-section>
+                            </q-item>
+
+                        </q-list>
+                    </q-btn-dropdown>
+
+                    <l-btn color="primary" @click="onRemove(selectedNode)" label="Remove" icon="sym_o_remove" />
+
+
+                    <l-btn color="primary" @click="onMove(selectedNode)" label="Move" icon="sym_o_move" />
+
+                    <l-btn color="primary" @click="onMoveUp(selectedNode)" label="Up" icon="sym_o_arrow_upward" />
+
+                    <l-btn color="primary" @click="onMoveDown(selectedNode)" label="Down" icon="sym_o_arrow_downward" />
+
+
+                    <q-btn-dropdown color="primary" label="Add menus" icon="sym_o_add">
+                        <q-list>
+                            <q-item clickable v-close-popup @click="onAddChildMenu(selectedNode, 'list')">
+                                <q-item-section>
+                                    <q-item-label>List</q-item-label>
+                                </q-item-section>
+                            </q-item>
+
+                            <q-item clickable v-close-popup @click="onAddChildMenu(selectedNode, 'add')">
+                                <q-item-section>
+                                    <q-item-label>Add</q-item-label>
+                                </q-item-section>
+                            </q-item>
+
+                        </q-list>
+                    </q-btn-dropdown>
+                </template>
+            </q-card-actions>
             <q-splitter v-model="splitterModel" style="height:680px">
                 <template #before>
-                    <q-card-actions>
-                        <l-btn @click="onAdd" label="Add" icon="sym_o_add" />
-                        <l-btn @click="onReload" label="Reload" icon="sym_o_refresh" />
-
-                        <l-btn @click="onSave" label="Save" icon="sym_o_save" />
-                    </q-card-actions>
 
                     <q-tree :nodes="menus" selected-color="primary" default-expand-all v-model:selected="selected"
                         node-key="uuid" ref="tree1" />
                 </template>
 
                 <template #after v-if="selected">
-
-                    <q-card-actions>
-                        <l-btn outline rounded color="primary" @click="onRemove(selectedNode)" label="Remove"
-                            icon="sym_o_remove" />
-
-                        <l-btn outline rounded color="primary" @click="onAddChild(selectedNode)" label="Add Child"
-                            icon="sym_o_add" />
-
-                        <l-btn outline rounded color="primary" @click="onMove(selectedNode)" label="Move"
-                            icon="sym_o_move" />
-
-                        <l-btn outline rounded color="primary" @click="onMoveUp(selectedNode)" label="Up"
-                            icon="sym_o_arrow_upward" />
-
-                        <l-btn outline rounded color="primary" @click="onMoveDown(selectedNode)" label="Down"
-                            icon="sym_o_arrow_downward" />
-
-
-                        <q-btn-dropdown color="primary" label="Add menus" outline rounded icon="sym_o_add">
-                            <q-list>
-                                <q-item clickable v-close-popup @click="onAddChildMenu(selectedNode, 'list')">
-                                    <q-item-section>
-                                        <q-item-label>List</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-
-                                <q-item clickable v-close-popup @click="onAddChildMenu(selectedNode, 'add')">
-                                    <q-item-section>
-                                        <q-item-label>Add</q-item-label>
-                                    </q-item-section>
-                                </q-item>
-
-                            </q-list>
-                        </q-btn-dropdown>
-
-
-                    </q-card-actions>
-
-
                     <q-card-section>
-                        <div class="q-gutter-md">
-                            <l-input label="Label" v-model="selectedNode.label" />
-                            <l-input label="To" v-model="selectedNode.to" />
-                            <l-input label="Icon" v-model="selectedNode.icon" hint="example: sym_o_add" />
-                            <l-input label="Permission" v-model="selectedNode.permission" />
-                            <l-input label="UUID" v-model="selectedNode.uuid" readonly />
-                        </div>
-
-                        <div>
-                            <a href="https://fonts.google.com/icons" target="_blank">Material Icons</a>
-                        </div>
-
+                        <template v-if="!selectedNode.type">
+                            <div class="q-gutter-md">
+                                <l-input label="Label" v-model="selectedNode.label" />
+                                <l-input label="To" v-model="selectedNode.to" />
+                                <l-input label="Icon" v-model="selectedNode.icon" hint="example: sym_o_add" />
+                                <l-input label="Permission" v-model="selectedNode.permission" />
+                                <l-input label="UUID" v-model="selectedNode.uuid" readonly />
+                            </div>
+
+                            <div>
+                                <a href="https://fonts.google.com/icons" target="_blank">Material Icons</a>
+                            </div>
+
+                        </template>
+
+                        <template v-if="selectedNode.type == 'separator'">
+                            <div class="q-gutter-md">
+                                <q-checkbox label="Spaced" v-model="selectedNode.spaced" />
+
+                            </div>
+                        </template>
+
+                        <template v-if="selectedNode.type == 'header'">
+                            <div class="q-gutter-md">
+                                <l-input label="Label" v-model="selectedNode.label" />
+                            </div>
+                        </template>
                     </q-card-section>
+
                 </template>
 
             </q-splitter>

package/dist/runtime/pages/User/_user_id/view.vue

@@ -1,55 +1,41 @@
 <script setup>
-import { model, getObject, getModelFields, q } from '../../../';
+import { useLight } from "#imports";
+import { useRoute } from "vue-router"
+import { ref } from 'vue';
 
-const obj = await getObject(["user_id", "username", "first_name", "last_name", "email", "phone", "roles", 'status', 'join_date']);
+const route = useRoute();
+const light = useLight();
 
+const tab = ref('overview');
+const splitter = ref(10);
+const id = route.params.user_id;
 </script>
 
 <template>
-    <l-page>
+    <l-page edit-btn>
         <template #header>
             <l-btn to="change-password" icon="sym_o_key" permission="user.changePassword" label="Change password"></l-btn>
             <l-btn to="update-role" icon="sym_o_people" permission="user.role.add" label="Update role"></l-btn>
         </template>
 
-        <l-card class="q-mb-md">
-            <l-list v-model="obj" :fields="getModelFields('User', [
-                'username',
-                'first_name',
-                'last_name',
-                'email',
-                'phone',
-                'roles',
-                'status',
-                'join_date'
-            ])">
-            </l-list>
-        </l-card>
-
-        <l-tabs>
-            <l-tab label="Event log">
-                <l-table row-key="eventlog_id" sort-by="eventlog_id:desc"
-                    :columns="model('EventLog').columns(['eventlog_id', 'class', 'id', 'action', 'created_time'])" @request="async (req) => {
-                        const a = {
-                            listUser: {
-                                __args: {
-                                    filters: {
-                                        user_id: obj.user_id
-                                    }
-                                },
-                                data: {
-                                    __args: {
-                                        limit: 1
-                                    },
-                                    eventLog: req.gql
-                                }
-                            }
-                        }
-
-                        let resp = await q(a);
-                        req.setData(resp.listUser.data[0].eventLog)
-                    }" />
-            </l-tab>
-        </l-tabs>
+
+        <q-card flat bordered>
+            <q-tabs v-model="tab" :class="`text-${light.color}`" inline-label align="justify">
+                <q-tab name="overview" icon="sym_o_person" label="Overview" />
+                <q-tab name="userlog" icon="sym_o_description" label="User log" />
+                <q-tab name="eventlog" icon="sym_o_description" label="Event log" />
+            </q-tabs>
+
+            <l-user-overview v-if="tab === 'overview'" :id="id" />
+            <l-user-userlog v-if="tab === 'userlog'" :id="id" />
+            <l-user-eventlog v-if="tab === 'eventlog'" :id="id" />
+
+
+
+        </q-card>
+
+
+
+
     </l-page>
 </template>

package/dist/runtime/pages/User/profile.vue

@@ -51,29 +51,52 @@ eventLogCols.forEach(col => {
             <l-btn icon="sym_o_password" to="setting/password" label="Update password" />
             <l-btn icon="sym_o_key" to="setting/two-factor-auth" label="Two factor auth" />
         </template>
-        <div class="q-gutter-md q-mt-md">
-            <l-card>
-                <l-list>
-                    <l-item label="Username">{{ my.username }}</l-item>
-                    <l-item label="First name">{{ my.first_name }}</l-item>
-                    <l-item label="Last name">{{ my.last_name }}</l-item>
-                    <l-item label="Email">{{ my.email }}</l-item>
-                    <l-item label="Phone">{{ my.phone }}</l-item>
-                    <l-item label="Address">{{ my.addr1 }} {{ my.addr2 }} {{ my.addr3 }}</l-item>
-                    <l-item label="Join date">{{ my.join_date }}</l-item>
-                    <l-item label="Roles">{{ my.roles.join(",") }}</l-item>
-                </l-list>
-            </l-card>
-
-            <l-card title="User Log">
-                <l-table :rows="my.userLog.data" :columns="userlogColumns" searchable :rows-per-page-options="[0]">
-                </l-table>
-            </l-card>
-
-            <l-card title="Event Log">
-                <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable :rows-per-page-options="[0]">
-                </l-table>
-            </l-card>
-        </div>
+
+        <l-row>
+            <l-col md="4">
+
+                <l-card>
+
+                    <q-card-section class="text-h5 text-center">
+                        {{ my.first_name }} {{ my.last_name }}
+                    </q-card-section>
+
+                    <q-card-section class="text-center text-center q-pt-none">
+                        <q-chip v-for="role in my.roles" :key="role" :label="role" :color="$light.color" text-color="white"
+                            class="q-ma-xs" />
+                    </q-card-section>
+
+
+                    <q-separator />
+                    <l-list :bordered="false">
+
+                        <q-item-label header>Details</q-item-label>
+                        <l-item label="Username">{{ my.username }}</l-item>
+                        <l-item label="Email">{{ my.email }}</l-item>
+                        <l-item label="Phone">{{ my.phone }}</l-item>
+                        <l-item label="Address">{{ my.addr1 }} {{ my.addr2 }} {{ my.addr3 }}</l-item>
+                        <l-item label="Join date">{{ my.join_date }}</l-item>
+                    </l-list>
+                </l-card>
+            </l-col>
+
+            <l-col md="8">
+
+                <l-tabs>
+                    <l-tab label="User Log">
+                        <l-table :rows="my.userLog.data" :columns="userlogColumns" searchable :rows-per-page-options="[0]">
+                        </l-table>
+                    </l-tab>
+                    <l-tab label="Event Log">
+                        <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable :rows-per-page-options="[0]">
+                        </l-table>
+                    </l-tab>
+
+                </l-tabs>
+
+
+            </l-col>
+        </l-row>
+
     </l-page>
 </template>

package/dist/runtime/plugin.mjs

@@ -1,4 +1,4 @@
-import { Quasar, Dialog, Notify, Loading } from "quasar";
+import { Quasar, Dialog, Notify, Loading, AppFullscreen } from "quasar";
 import { createI18n } from "vue-i18n";
 import { defineNuxtPlugin } from "#app";
 import { useRouter } from "vue-router";
@@ -24,6 +24,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   defineModel("SystemValue", TypeSystemValue);
   defineModel("MailLog", TypeMailLog);
   defineModel("EventLog", TypeEventLog);
+  nuxtApp.vueApp.config.globalProperties.$light = useLight();
   nuxtApp.vueApp.config.errorHandler = (error) => {
     console.log(error);
     const light = useLight();
@@ -58,7 +59,8 @@ export default defineNuxtPlugin((nuxtApp) => {
     plugins: {
       Dialog,
       Notify,
-      Loading
+      Loading,
+      AppFullscreen
     }
   });
   let locale = localStorage.getItem("locale") || "en";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.1.8",
+  "version": "1.2.1",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",