@hostlink/nuxt-light 1.2.1 → 1.3.0

package/dist/module.json

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

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

@@ -3,7 +3,7 @@ import { useRoute } from 'vue-router';
 import { useLight, q, m } from "#imports";
 import { useQuasar, Loading, Dialog } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { ref, computed, reactive, provide, watch } from 'vue';
+import { ref, computed, reactive, provide, watch, toRaw } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 
 Loading.show()
@@ -23,7 +23,7 @@ const tt = await q({
         "copyrightName",
         "hasFavorite",
         { i18nMessages: ["name", "value"] }],
-    my: ['username', 'first_name', 'last_name', 'roles', "styles", "language", "permissions", { myFavorites: ["label", "path"] }],
+    my: ['username', 'first_name', 'last_name', 'roles', "styles", "language", "permissions", { myFavorites: ["my_favorite_id", "label", "path", "icon"] }],
 })
 
 let app = tt.app
@@ -34,6 +34,16 @@ 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());
 
 const i18n = useI18n();
@@ -196,17 +206,6 @@ const containerStyle = computed(() => {
 
 const route = useRoute()
 
-const reloadMyFavorites = async () => {
-    const data = await q({
-        my: {
-            myFavorites: {
-                label: true,
-                path: true,
-            }
-        }
-    });
-    my.myFavorites = data.my.myFavorites;
-}
 
 const onToggleFav = async () => {
 
@@ -216,7 +215,8 @@ const onToggleFav = async () => {
         })
 
         //reload my.myFavorites
-        reloadMyFavorites();
+        light.reloadMyFavorites();
+
 
         return;
     }
@@ -236,7 +236,7 @@ const onToggleFav = async () => {
             path: route.fullPath,
             label: data,
         })) {
-            reloadMyFavorites();
+            light.reloadMyFavorites();
 
         }
     })
@@ -252,6 +252,12 @@ const isFav = computed(() => {
 
 Loading.hide()
 
+const menuWidth = ref(my.styles.menuWidth || 280);
+
+watch(menuWidth, () => {
+    light.setStyle("menuWidth", menuWidth.value)
+})
+
 </script>
 
 <template>
@@ -368,13 +374,14 @@ Loading.hide()
             </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">
+
                 <div class="q-mx-sm">
-                    <l-fav-menu :value="my.myFavorites" :dense="style.dense" v-if="my.myFavorites.length > 0" />
+                    <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>
@@ -387,7 +394,7 @@ Loading.hide()
             <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>
 

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

@@ -2,17 +2,19 @@
 import { type QBtnProps } from "quasar";
 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 attrs = computed(() => {
-    return {
+    const a = {
         ...{
             rounded: light.getStyle("buttonRounded"),
             outline: light.getStyle("buttonOutline"),
@@ -21,6 +23,13 @@ const attrs = computed(() => {
         },
         ...props,
     }
+
+    if (a.label !== undefined) {
+        a.label = t(a.label)
+    }
+
+    return a;
+
 });
 
 

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

@@ -89,26 +89,18 @@ if (props.permission && light.isAdmin) {
     }));
 }
 
-const onTogglePermission = async (role: any) => {
-
+const onUpdatePermission = async (role: any) => {
     if (role.granted) {
-
+        await m("addPermission", {
+            role: role.name,
+            value: props.permission,
+        });
+    } else {
         //remove permission
-        if (await m("removePermission", {
+        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;
+        })
     }
 }
 
@@ -125,13 +117,12 @@ const onTogglePermission = async (role: any) => {
             <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 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>

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

@@ -1,21 +1,16 @@
 <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-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-icon :name="item.icon ?? 'sym_o_link'" />
                 </q-item-section>
                 <q-item-section>
                     <q-item-label v-text="$t(item.label)"></q-item-label>

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>