@hostlink/nuxt-light 1.2.1 → 1.3.1

package/dist/module.json

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

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-manager-move.vue

@@ -1,13 +1,13 @@
 <script setup>
 import { ref, computed, watch } from "vue";
+import { useQuasar } from 'quasar';
 import { q, m } from '../';
 const emit = defineEmits(["selected"]);
 const data = await q("fsListFolders", { path: "/" }, ["name", "path"]);
 const folders = ref(data);
 const mode = ref("move");
 const folder = ref("/");
-const parent = ref(null);
-const selected = ref("/");
+const parent = ref("/");
 
 const qua = useQuasar();
 
@@ -30,7 +30,7 @@ const title = computed(() => {
 const newFolder = ref(null);
 
 const onClickCreate = async () => {
-  let f = selected.value + "/" + newFolder.value;
+  let f = folder.value + "/" + newFolder.value;
   await m("fsCreateFolder", { path: f });
 
   folder.value = f;
@@ -42,15 +42,15 @@ const menu = ref(null);
 const onClickMove = async () => {
   qua.dialog({
     title: "Move",
-    message: "Are you sure you want to move?",
+    message: "Are you sure you want to move to \"" + folder.value + "\" ?",
     cancel: true,
     persistent: true,
   }).onOk(async () => {
 
 
     menu.value.hide();
-    emit("selected", selected.value);
-    selected.value = "/";
+    emit("selected", folder.value);
+    folder.value = "/";
     parent.value = null;
     folder.value = "/";
 
@@ -63,22 +63,22 @@ const onClickMove = async () => {
   <q-menu transition-show="jump-down" transition-hide="jump-up" ref="menu" @before-show="show">
     <q-card>
       <q-toolbar>
-        <q-btn flat dense round @click="clickBack()" v-if="parent">
-          <q-icon name="sym_o_arrow_back" />
-        </q-btn>
-        <q-toolbar-title>
-          <template v-if="mode == 'create'">
-            <q-input outlined dense v-model="newFolder">
-              <template v-slot:append>
-                <q-btn round dense flat icon="sym_o_add" @click="onClickCreate" />
-              </template>
-            </q-input>
-          </template>
-
-          <template v-else>
+        <template v-if="mode == 'create'">
+          <q-btn flat dense round @click="mode = 'move'" icon="sym_o_arrow_back" class="q-mr-sm">
+            <q-tooltip>Cancel</q-tooltip>
+          </q-btn>
+
+        </template>
+        <template v-else>
+          <q-btn flat dense round @click="clickBack()" v-if="folder !== '/'" icon="sym_o_arrow_back">
+            <q-tooltip>Back</q-tooltip>
+          </q-btn>
+          <q-toolbar-title>
             {{ title }}
-          </template>
-        </q-toolbar-title>
+          </q-toolbar-title>
+
+        </template>
+
       </q-toolbar>
 
       <template v-if="mode == 'empty folder'">
@@ -86,35 +86,39 @@ const onClickMove = async () => {
       </template>
 
       <template v-if="mode == 'create'">
-        <q-card-section> Create folder at "{{ selected }}" </q-card-section>
+        <q-card-section>
+          <q-input outlined dense v-model="newFolder" :hint="`Create folder at ${folder}`" label="Foler name"
+            stack-label="">
+            <template v-slot:append v-if="newFolder">
+              <q-btn round dense flat icon="sym_o_add" @click="onClickCreate">
+                <q-tooltip>Create</q-tooltip>
+              </q-btn>
+            </template>
+          </q-input>
+        </q-card-section>
       </template>
 
       <template v-if="mode == 'move'">
         <q-list>
-          <q-item v-for="(b, index) in folders" :key="index" clickable @click="selected = b.path"
-            :active="selected === b.path">
-            <q-item-section>
+          <q-item v-for="(b, index) in folders" :key="index" clickable @click="parent = folder; folder = b.path;">
+
+            <q-item-section avatar>
               <q-icon name="sym_o_folder"></q-icon>
             </q-item-section>
             <q-item-section>
               <q-item-label>{{ b.name }}</q-item-label>
             </q-item-section>
 
-            <q-item-section side>
-              <q-btn flat dense outlined @click="
-                parent = folder;
-              folder = b.path;
-              ">
-                <q-icon name="sym_o_navigate_next"></q-icon>
-              </q-btn>
+            <q-item-section side avatar>
+              <q-icon name="sym_o_navigate_next"></q-icon>
             </q-item-section>
           </q-item>
         </q-list>
       </template>
 
       <q-card-actions>
-        <q-btn flat dense @click="mode = 'create'" :disable="mode == 'create'">
-          <q-icon name="sym_o_create_new_folder"></q-icon>
+        <q-btn flat dense @click="mode = 'create'" :disable="mode == 'create'" round icon="sym_o_create_new_folder">
+          <q-tooltip> Create new folder</q-tooltip>
         </q-btn>
         <q-space></q-space>
         <q-btn dense label="Move to here" color="primary" v-if="mode == 'empty folder'">
@@ -123,65 +127,4 @@ const onClickMove = async () => {
       </q-card-actions>
     </q-card>
   </q-menu>
-</template>
-<!-- 
-<script>
-import { listFolders, createFolder } from "./../lib/filemanager";
-
-
-export default {
-  data() {
-    return {
-      selected: "/",
-      folder: null,
-      folders: [],
-      parent: null,
-      mode: "move",
-      newFolder: null,
-    };
-  },
-  watch: {
-    async folder() {
-      this.folders = await listFolders(this.folder);
-
-      if (this.folders.length == 0) {
-        this.mode = "empty folder";
-      }
-    },
-  },
-  computed: {
-    title() {
-      if (this.folder) {
-        return this.folder.split("/").pop();
-      }
-      return "";
-    },
-  },
-
-  methods: {
-    show() {
-      this.folder = "/";
-      this.mode = "move";
-    },
-    async onClickCreate() {
-      let folder = this.selected + "/" + this.newFolder;
-      await createFolder(folder);
-      this.folder = folder;
-    },
-    clickBack() {
-      if (this.mode == "create") {
-        this.mode = "move";
-        return;
-      }
-
-      this.folder = this.parent;
-
-
-      if (this.mode == "empty folder") {
-        this.mode = "move";
-        return;
-      }
-    },
-  },
-};
-</script> -->
+</template>

package/dist/runtime/components/l-file-manager.vue

@@ -587,10 +587,21 @@ const isDark = computed(() => light.isDarkMode());
 
         <q-btn flat round icon="sym_o_drive_file_move" v-if="selected.length > 0">
           <l-file-manager-move @selected="moveToFolder($event)" />
+          <q-tooltip>
+            {{ $t('Move to') }}
+          </q-tooltip>
         </q-btn>
 
-        <q-btn flat round icon="o_delete" @click="onDeleteSelected" v-if="selected.length > 0"></q-btn>
-        <q-btn flat round :icon="grid ? 'list_view' : 'grid_view'" @click="grid = !grid"></q-btn>
+        <q-btn flat round icon="o_delete" @click="onDeleteSelected" v-if="selected.length > 0">
+          <q-tooltip>
+            {{ $t('Delete') }}
+          </q-tooltip>
+        </q-btn>
+        <q-btn flat round :icon="grid ? 'list_view' : 'grid_view'" @click="grid = !grid">
+          <q-tooltip>
+            {{ grid ? $t('List view') : $t('Grid view') }}
+          </q-tooltip>
+        </q-btn>
       </q-toolbar>
 
       <template v-if="grid">

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>