@hostlink/nuxt-light 1.1.8 → 1.3.0

package/dist/module.json

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

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 { ref, computed, reactive, provide, watch, toRaw } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 
+Loading.show()
 //download system value
 /* import { download } from './../lib/SystemValue'
 await download();
@@ -20,15 +21,28 @@ 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: ["my_favorite_id", "label", "path", "icon"] }],
 })
 
 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);
+
+light.setMyFavorites(toRaw(my.myFavorites))
+
+const myFavorites = computed(() => {
+    return light.getMyFavorites();
+});
+
+const myFavoritesCount = computed(() => {
+    return light.getMyFavorites().length;
+});
 
 quasar.dark.set(light.isDarkMode());
 
@@ -36,7 +50,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 +80,7 @@ const toggleRightDrawer = () => {
 let showViewAs = false;
 if (my && my.roles.indexOf('Administrators') != -1) {
     showViewAs = true;
+    light.isAdmin = true;
 }
 
 const menuOverlayHeader = ref(false)
@@ -188,19 +204,60 @@ const containerStyle = computed(() => {
     }
 })
 
-const fullscreen = ref(document.fullscreenElement)
+const route = useRoute()
+
 
-const onFullscreen = () => {
-    if (document.fullscreenElement) {
-        document.exitFullscreen();
-        fullscreen.value = false;
-    } else {
-        fullscreen.value = true;
+const onToggleFav = async () => {
 
-        document.documentElement.requestFullscreen();
+    if (isFav.value) {
+        await m("removeMyFavorite", {
+            path: route.fullPath,
+        })
+
+        //reload my.myFavorites
+        light.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,
+        })) {
+            light.reloadMyFavorites();
+
+        }
+    })
 }
 
+const isFav = computed(() => {
+    //check my.myFavorites
+    let fav = my.myFavorites.find((item) => {
+        return item.path == route.fullPath;
+    })
+    return fav;
+})
+
+Loading.hide()
+
+const menuWidth = ref(my.styles.menuWidth || 280);
+
+watch(menuWidth, () => {
+    light.setStyle("menuWidth", menuWidth.value)
+})
+
 </script>
 
 <template>
@@ -218,26 +275,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>
@@ -310,12 +374,18 @@ const onFullscreen = () => {
             </q-toolbar>
         </q-header>
 
-        <q-drawer v-model="leftDrawerOpen" bordered show-if-above side="left" :dark="menuDark" :width="280"
+        <q-drawer v-model="leftDrawerOpen" bordered show-if-above side="left" :dark="menuDark" :width="menuWidth"
             :mini-to-overlay="style.miniState" :mini="isMini" @mouseout="isMouseOnDrawer = false"
             @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="myFavorites" :dense="style.dense" v-if="myFavoritesCount > 0" />
+                    <l-menu v-for=" menu  in  menus " :value="menu" :dense="style.dense" />
+
+                </div>
+
             </q-scroll-area>
         </q-drawer>
 
@@ -324,14 +394,14 @@ const onFullscreen = () => {
             <q-scroll-area class="fit">
                 <l-customizer v-model:color="light.color" v-model:theme="light.theme" v-model:miniState="style.miniState"
                     v-model:dense="style.dense" v-model:menuOverlayHeader="style.menuOverlayHeader"
-                    v-model:footer="style.footer" />
+                    v-model:footer="style.footer" v-model:menuWidth="menuWidth" />
             </q-scroll-area>
         </q-drawer>
 
         <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,29 +1,20 @@
 <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';
+import { useI18n } from "vue-i18n";
 
 export interface LBtnProps extends QBtnProps {
     permission?: string;
 }
 
+const { t } = useI18n();
 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 {
+    const a = {
         ...{
             rounded: light.getStyle("buttonRounded"),
             outline: light.getStyle("buttonOutline"),
@@ -32,12 +23,19 @@ const attrs = computed(() => {
         },
         ...props,
     }
+
+    if (a.label !== undefined) {
+        a.label = t(a.label)
+    }
+
+    return a;
+
 });
 
 
 </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,89 @@ 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 onUpdatePermission = async (role: any) => {
+    if (role.granted) {
+        await m("addPermission", {
+            role: role.name,
+            value: props.permission,
+        });
+    } else {
+        //remove permission
+        await m("removePermission", {
+            role: role.name,
+            value: props.permission,
+        })
+    }
+}
+
+
+
 </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">
+                            <q-item-section>
+                                <q-checkbox :label="role.name" v-model="role.granted"
+                                    @update:model-value="onUpdatePermission(role)"></q-checkbox>
+                            </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-customizer.vue

@@ -1,4 +1,9 @@
 <script setup>
+const menuWidth = defineModel('menuWidth', {
+    type: Number,
+    default: 280
+});
+
 const COLORS = [
     'primary',
     'secondary',
@@ -28,6 +33,8 @@ const COLORS = [
     'blue-grey'
 ]
 
+
+
 defineEmits(['update:theme', 'update:menuOverlayHeader', 'update:dense', 'update:color', 'update:miniState', 'update:footer'])
 
 const props = defineProps({
@@ -54,7 +61,8 @@ const props = defineProps({
     footer: {
         type: Boolean,
         default: false
-    }
+    },
+
 })
 
 </script>
@@ -132,6 +140,15 @@ const props = defineProps({
                 <q-toggle :model-value="footer" @update:model-value="$emit('update:footer', $event)" />
             </q-item-section>
         </q-item>
+        <q-separator />
+        <q-item-label header>{{ $t('Menu width') }}</q-item-label>
+        <q-item>
+            <q-item-section>
+                <q-slider v-model="menuWidth" :min="200" :max="360" label :color="$light.color" />
+            </q-item-section>
+
+        </q-item>
+        <q-separator />
 
     </q-list>
 </template>

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

@@ -0,0 +1,21 @@
+<script setup>
+const props = defineProps(["value", "dense"])
+</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="item.icon ?? '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-file-upload.vue

@@ -167,7 +167,7 @@ const onUploadFile = async () => {
                 </q-card-section>
 
                 <q-card-actions align="right">
-                    <q-btn flat :label="$t('Cancel')" color="primary" v-close-popup></q-btn>
+                    <q-btn flat :label="$t('Cancel')" color="primary" @click="uploadFile = null" v-close-popup></q-btn>
                     <q-btn flat :label="$t('Upload')" color="primary" @click="onUploadFile"></q-btn>
                 </q-card-actions>
             </l-card>
@@ -175,5 +175,9 @@ const onUploadFile = async () => {
         <template v-slot:prepend>
             <q-btn dense flat round icon="sym_o_file_upload" @click="show = true"></q-btn>
         </template>
+
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
+        </template>
     </q-input>
 </template>