@hostlink/nuxt-light 1.5.2 → 1.6.2

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.5.2"
+  "version": "1.6.2"
 }

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

@@ -34,6 +34,8 @@ const light = useLight({
 });
 light.init(my.styles);
 
+quasar.addressbarColor.set(light.color);
+
 //set permission
 light.setPermissions(my.permissions);
 
@@ -396,7 +398,7 @@ const c1 = computed(() => {
 
                 <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" />
+                    <l-menu :value="menus" :dense="style.dense" />
 
                 </div>
 

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

@@ -18,7 +18,7 @@ const localValue = computed({
 });
 </script>
 <template>
-    <q-checkbox v-bind="$props" v-model="localValue" :label="$t($props.label ?? '')">
+    <q-checkbox v-bind="$props" v-model="localValue" :label="$t($props.label ?? '')" :color="$light.color">
         <slot></slot>
     </q-checkbox>
 </template>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 const menuWidth = defineModel('menuWidth', {
     type: Number,
     default: 280
@@ -35,7 +35,6 @@ const COLORS = [
 ]
 
 
-
 defineEmits(['update:theme', 'update:menuOverlayHeader', 'update:dense', 'update:color', 'update:miniState', 'update:footer'])
 
 const props = defineProps({
@@ -161,12 +160,12 @@ setInterval(() => {
             </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-label>{{ $t('Menu width') }}</q-item-label>
+                <q-item-label><q-slider v-model="menuWidth" :min="200" :max="360" label
+                        :color="$light.color" /></q-item-label>
             </q-item-section>
-
         </q-item>
         <q-separator />
 

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

@@ -16,13 +16,14 @@ const color2 = computed(() => {
     return c;
 });
 
+
 </script>
 
 <style scoped>
 .menu-list .q-item{border-radius:12px 12px 12px 12px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,v-bind(color1),v-bind(color2));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" 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>
@@ -31,6 +32,7 @@ const color2 = computed(() => {
                 <q-item-section>
                     <q-item-label v-text="$t(item.label)"></q-item-label>
                 </q-item-section>
+                
             </q-item>
         </q-list>
     </q-expansion-item>

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

@@ -1,55 +1,56 @@
 <script setup>
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: ""
-  }
+const modelValue = defineModel({
+  type: String,
+  default: ""
 })
-
 const emit = defineEmits(['update:modelValue'])
 const toggleLabel = (type) => {
-
-  if (props.modelValue == type) {
+  if (modelValue.value == type) {
     emit('update:modelValue', null)
   } else {
     emit('update:modelValue', type)
   }
 }
 
+const LABLES = [
+  {
+    type: 'document',
+    icon: 'sym_o_article',
+    label: 'Documents'
+  },
+  {
+    type: 'image',
+    icon: 'sym_o_insert_photo',
+    label: 'Images'
+  },
+  {
+    type: 'video',
+    icon: 'sym_o_videocam',
+    label: 'Videos'
+  },
+  {
+    type: 'audio',
+    icon: 'sym_o_audiotrack',
+    label: 'Audio'
+  },
+  {
+    type: 'other',
+    icon: 'sym_o_text_snippet',
+    label: 'Archives'
+  }
+]
+
 </script>
 <template>
   <q-item-label header>
     {{ $t('Labels') }}
   </q-item-label>
-  <q-item clickable :active="modelValue == 'document'" @click="toggleLabel('document')">
-    <q-item-section avatar>
-      <q-icon name="sym_o_article" />
-    </q-item-section>
-    <q-item-section> {{ $t('Documents') }} </q-item-section>
-  </q-item>
-  <q-item clickable :active="modelValue == 'image'" @click="toggleLabel('image')">
-    <q-item-section avatar>
-      <q-icon name="sym_o_insert_photo" />
-    </q-item-section>
-    <q-item-section> {{ $t('Images') }} </q-item-section>
-  </q-item>
-  <q-item clickable :active="modelValue == 'video'" @click="toggleLabel('video')">
-    <q-item-section avatar>
-      <q-icon name="sym_o_videocam" />
-    </q-item-section>
-    <q-item-section> {{ $t('Videos') }} </q-item-section>
-  </q-item>
-  <q-item clickable :active="modelValue == 'audio'" @click="toggleLabel('audio')">
-    <q-item-section avatar>
-      <q-icon name="sym_o_audiotrack" />
-    </q-item-section>
-    <q-item-section> {{ $t('Audio') }} </q-item-section>
-  </q-item>
-  <q-item clickable :active="modelValue == 'other'" @click="toggleLabel('other')">
+
+  <q-item v-for="label in LABLES" :key="label.type" clickable :active="modelValue == label.type"
+    :active-class="`text-${$light.color}`" @click="toggleLabel(label.type)">
     <q-item-section avatar>
-      <q-icon name="sym_o_text_snippet" />
+      <q-icon :name="label.icon" />
     </q-item-section>
-    <q-item-section> {{ $t('Archives') }} </q-item-section>
+    <q-item-section> {{ $t(label.label) }} </q-item-section>
   </q-item>
 </template>

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

@@ -1,5 +1,8 @@
 <script setup>
+import { format } from "quasar"
 import { q } from '../';
+const { humanStorageSize } = format
+
 const props = defineProps(["modelValue"]);
 
 
@@ -7,6 +10,8 @@ const file = await q("fsFile", {
   path: props.modelValue.path
 }, ["canPreview", "imagePath"])
 
+const size = humanStorageSize(props.modelValue.size)
+
 </script >
 <template>
   <template v-if="file.canPreview">
@@ -17,19 +22,31 @@ const file = await q("fsFile", {
       <q-item-section>
         <q-item-label>Name</q-item-label>
       </q-item-section>
-      <q-item-section side>{{ modelValue.name }} </q-item-section>
+      <q-item-section side>
+        <q-item-label lines="1">
+          {{ modelValue.name }}
+        </q-item-label>
+      </q-item-section>
     </q-item>
     <q-item>
       <q-item-section>
         <q-item-label>Size</q-item-label>
       </q-item-section>
-      <q-item-section side>{{ modelValue.size }} </q-item-section>
+      <q-item-section side>{{ size }} ({{ modelValue.size }}) </q-item-section>
     </q-item>
     <q-item>
       <q-item-section>
         <q-item-label>Location</q-item-label>
       </q-item-section>
-      <q-item-section side>{{ modelValue.path }} </q-item-section>
+      <q-item-section side>
+        <q-item-label lines="1">{{ modelValue.path }}</q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section>
+        <q-item-label>Last modified</q-item-label>
+      </q-item-section>
+      <q-item-section side>{{ modelValue.lastModifiedHuman }}</q-item-section>
     </q-item>
   </q-list>
 </template>

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

@@ -2,14 +2,14 @@
 import { VariableType } from "json-to-graphql-query";
 import { useI18n } from "vue-i18n";
 import { ref, watch, computed } from 'vue';
-import { useQuasar } from 'quasar';
+import { useQuasar, format } from 'quasar';
 import { q, m, useLight } from '#imports';
 import {
   fsListFolders, fsCreateFolder, fsDeleteFolder, fsDeleteFile, fsRenameFile, fsRenameFolder, fsReadFile,
   granted
 
 } from "@hostlink/light";
-
+const { humanStorageSize } = format
 
 const light = useLight();
 const i18n = useI18n();
@@ -17,7 +17,7 @@ const quasar = useQuasar();
 const emit = defineEmits(["input", "close"]);
 
 const props = defineProps({
-  closable: Boolean,
+  closeable: Boolean,
   height: {
     type: String,
     default: "700px",
@@ -60,14 +60,20 @@ const columns = ref([
   {
     name: "last_modified",
     label: i18n.t("Last Modified"),
-    field: "last_modified_human",
+    field: "lastModifiedHuman",
     align: "left",
   },
   {
     name: "size_display",
     label: i18n.t("Size"),
     field: "size",
-    align: "left",
+    align: "right",
+    format: (val) => {
+      if (val == null) {
+        return "";
+      }
+      return humanStorageSize(val)
+    }
   },
   { name: "action" },
 ]);
@@ -126,7 +132,7 @@ const loadItems = async () => {
     filesParams.search = localSearch.value;
   }
 
-  let files = await q("fsListFiles", filesParams, ["name", "size", "mime", "path"]);
+  let files = await q("fsListFiles", filesParams, ["name", "size", "mime", "path", "canPreview", "imagePath", "lastModified", "lastModifiedHuman"]);
   files = files.map((item) => {
     item.type = "file";
     return item;
@@ -189,7 +195,7 @@ const breadcrumbs = computed(() => {
       ps.push(p);
       breadcrumbs.push({
         label: p,
-        path: "/" + ps.join("/"),
+        path: ps.join("/"),
       });
     }
   }
@@ -484,7 +490,7 @@ const isDark = computed(() => light.isDarkMode());
 
         <div>
           <q-input outlined :placeholder="$t('Search for file name')" dense @keyup.enter.native="submitSearch"
-            v-model="search">
+            v-model="search" :color="$light.color">
             <template v-slot:append>
               <q-btn flat dense round icon="sym_o_search"></q-btn>
             </template>
@@ -492,7 +498,7 @@ const isDark = computed(() => light.isDarkMode());
         </div>
 
         <q-space></q-space>
-        <q-btn v-if="closable" icon="close" flat round @click="$emit('close')"></q-btn>
+        <q-btn v-if="closeable" icon="close" flat round @click="$emit('close')"></q-btn>
       </q-toolbar>
     </q-header>
 
@@ -524,7 +530,7 @@ const isDark = computed(() => light.isDarkMode());
             </q-item-section>
           </q-item>
 
-          <q-list>
+          <q-list dense>
             <q-item>
               <q-item-section avatar>
                 <q-icon name="sym_o_storage" />
@@ -534,13 +540,9 @@ const isDark = computed(() => light.isDarkMode());
                 <q-btn dense round flat icon="sym_o_refresh" @click="reloadStorage"></q-btn>
               </q-item-section>
             </q-item>
-            <q-item>
-              <q-item-section>
-                <q-tree ref="folderTree" class="q-pl-md" :nodes="folders" node-key="path" label-key="name"
-                  @lazy-load="onLazyLoad" v-model:selected="path" no-selection-unset>
-                </q-tree>
-              </q-item-section>
-            </q-item>
+            <q-tree ref="folderTree" class="q-pl-md" :nodes="folders" node-key="path" label-key="name"
+              @lazy-load="onLazyLoad" v-model:selected="path" no-selection-unset>
+            </q-tree>
           </q-list>
           <!-- q-expansion-item :label="$t('Storage')" default-expand-all default-opened icon="sym_o_storage" selectable
             @click="path = '/'">
@@ -557,7 +559,6 @@ const isDark = computed(() => light.isDarkMode());
     </q-drawer>
 
     <q-drawer side="right" show-if-above bordered>
-
       <l-file-manager-preview v-model="preview" v-if="preview" :key="preview.path" />
     </q-drawer>
 
@@ -566,19 +567,18 @@ const isDark = computed(() => light.isDarkMode());
       <q-dialog v-model="showUploadFiles" persistent transition-show="scale" transition-hide="scale">
         <l-card style="width:300px">
           <q-card-section>
-
-            <q-file ref="file" v-model="uploadFiles" multiple name="file" label="Files"></q-file>
+            <q-file ref="file" v-model="uploadFiles" multiple name="file" label="Files" :color="light.color"></q-file>
           </q-card-section>
 
           <q-card-actions align="right">
-            <q-btn flat label="Cancel" :color="light.color" v-close-popup></q-btn>
-            <q-btn flat label="Upload" :color="light.color" @click="onUploadFiles"></q-btn>
+            <q-btn flat :label="$t('Cancel')" :color="light.color" v-close-popup></q-btn>
+            <q-btn flat :label="$t('Upload')" :color="light.color" @click="onUploadFiles"></q-btn>
           </q-card-actions>
         </l-card>
       </q-dialog>
 
       <q-toolbar>
-        <q-breadcrumbs>
+        <q-breadcrumbs :active-color="$light.color">
           <q-breadcrumbs-el v-for="(b, index) in breadcrumbs" :label="b.label" :key="index" @click="path = b.path"
             href="javascript:void(0)"></q-breadcrumbs-el>
         </q-breadcrumbs>
@@ -605,10 +605,11 @@ const isDark = computed(() => light.isDarkMode());
       </q-toolbar>
 
       <template v-if="grid">
-        <q-table title="Folders" flat bordered grid :columns="columns" :rows="foldersGrid">
+        <q-table :title="$t('Folders')" flat grid :columns="columns" :rows="foldersGrid" hide-pagination
+          :pagination="{ rowsPerPage: 0 }">
           <template v-slot:item="props">
-            <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
-              <q-card>
+            <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4" @click="onDblclickRow(null, props.row, null)">
+              <q-card flat bordered>
                 <q-item>
                   <q-item-section avatar>
                     <q-icon name="sym_o_folder" size="sm"></q-icon>
@@ -617,7 +618,7 @@ const isDark = computed(() => light.isDarkMode());
                     {{ props.row.name }}
                   </q-item-section>
                   <q-item-section avatar>
-                    <q-checkbox v-model="selected" :val="props.row" />
+                    <q-checkbox v-model="selected" :val="props.row" :color="$light.color" />
                   </q-item-section>
                 </q-item>
               </q-card>
@@ -625,22 +626,26 @@ const isDark = computed(() => light.isDarkMode());
           </template>
         </q-table>
 
-        <q-table title="Files" flat bordered grid :columns="columns" :rows="filesGrid" :pagination="pagination">
+        <q-table :title="$t('Files')" flat grid :columns="columns" :rows="filesGrid" hide-pagination
+          :pagination="{ rowsPerPage: 0 }">
 
           <template v-slot:item="props">
-            <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
-              <q-card>
+            <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4" @click="onClickRow(null, props.row, null)">
+              <q-card flat bordered>
                 <q-item>
                   <q-item-section avatar>
                     <q-icon name="sym_o_description" size="sm"></q-icon>
                   </q-item-section>
-                  <q-item-section>
+                  <q-item-section no-wrap>
                     {{ props.row.name }}
                   </q-item-section>
                   <q-item-section avatar>
-                    <q-checkbox v-model="selected" :val="props.row" />
+                    <q-checkbox v-model="selected" :val="props.row" :color="$light.color" />
                   </q-item-section>
                 </q-item>
+
+                <q-img v-if="props.row.canPreview" :src="props.row.imagePath"></q-img>
+
               </q-card>
             </div>
           </template>
@@ -648,7 +653,7 @@ const isDark = computed(() => light.isDarkMode());
       </template>
       <template v-else>
 
-        <q-table flat bordered :columns="columns" :rows="items" @row-dblclick="onDblclickRow" @row-click="onClickRow"
+        <q-table flat :columns="columns" :rows="items" @row-dblclick="onDblclickRow" @row-click="onClickRow"
           :pagination="pagination" row-key="path" selection="multiple" v-model:selected="selected" dense
           :loading="loading" :loading-label="$t('Loading...')" :no-data-label="$t('No data available')">
           <template #body-cell-icon="props">

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

@@ -4,7 +4,8 @@ import { ref, computed, useAttrs } from "vue";
 import { useLight, m, q } from '#imports';
 import { Loading, Dialog } from "quasar";
 import { useI18n } from "vue-i18n";
-
+import { format } from 'quasar'
+const { humanStorageSize } = format
 const light = useLight();
 const i18n = useI18n();
 
@@ -65,32 +66,6 @@ const attrs = computed(() => {
 });
 
 
-//@param bytes Number of bytes.
-//@param si True to use metric (SI) units, aka powers of 1000. False to use binary (IEC), aka powers of 1024.
-//@param dp Number of decimal places to display.
-const humanFileSize = (bytesSize, si = false, dp = 1) => {
-    const thresh = si ? 1000 : 1024;
-
-    if (Math.abs(bytesSize) < thresh) {
-        return bytesSize + ' B';
-    }
-
-    const units = si
-        ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-        : ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; //: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-    let u = -1;
-    const r = 10 ** dp;
-
-    do {
-        bytesSize /= thresh;
-        ++u;
-    } while (Math.round(Math.abs(bytesSize) * r) / r >= thresh && u < units.length - 1);
-
-    return bytesSize.toFixed(dp) + ' ' + units[u];
-}
-
-
-
 const uploadFile = ref<File | null>(null);
 const rename = ref(true);
 
@@ -109,7 +84,7 @@ const onUploadFile = async () => {
     if (uploadFile.value.size > system.maxUploadSize) {
         Dialog.create({
             title: "Error",
-            message: "File size is too big. Max size is " + humanFileSize(system.maxUploadSize, false, 0),
+            message: "File size is too big. Max size is " + humanStorageSize(system.maxUploadSize),
             color: "negative"
         });
         return;
@@ -162,7 +137,7 @@ const onUploadFile = async () => {
             <l-card style="width:300px">
                 <q-card-section>
                     <q-file ref="file" v-model="uploadFile" name="file" :label="$t('File')" :accept="accept"
-                        :hint="`Max upload size: ${humanFileSize(system.maxUploadSize, false, 0)}`"></q-file>
+                        :hint="`Max upload size: ${humanStorageSize(system.maxUploadSize)}`"></q-file>
                     <!-- q-checkbox v-model="rename" :label="$t('Rename file if exists')"></q-checkbox-->
                 </q-card-section>
 

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

@@ -1,6 +1,6 @@
 <script setup>
 import { useLight } from "#imports";
-import { ref, reactive, onMounted, inject } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { useQuasar, Notify, Dialog } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { m, notify } from '#imports';
@@ -170,13 +170,8 @@ onMounted(() => {
         logo_alignment: 'left'
       }
     );
-
   }
-
 })
-
-
-
 </script>
 
 <template>
@@ -187,18 +182,29 @@ onMounted(() => {
           <q-img src="https://raw.githubusercontent.com/HostLink/.github/master/profile/logo.webp" class="full-width" />
         </template>
       </q-img>
-
       <div class="text-h6">
         {{ light.getCompany() }}
       </div>
       <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 autocomplete="username" />
+            clearable :outlined="false" stackLabel autocomplete="username">
+            <template v-slot:prepend>
+              <q-icon name="sym_o_person" />
+            </template>
+          </l-input>
           <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"
-            autocomplete="current-password" />
-          <l-input v-if="twoFactorAuthentication" v-model="data.code" label="2FA code" required type="text" clearable>
+            autocomplete="current-password">
+            <template v-slot:prepend>
+              <q-icon name="sym_o_lock" />
+            </template>
+          </l-input>
+          <l-input v-if="twoFactorAuthentication" v-model="data.code" label="2FA code"
+            :rules="[v => !!v || $t('2FA code is required')]" type="text" clearable stackLabel :outlined="false">
+            <template v-slot:prepend>
+              <q-icon name="sym_o_key" />
+            </template>
           </l-input>
         </div>
       </q-form>

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

@@ -2,40 +2,14 @@
 import { ref, computed } from 'vue'
 import { useLight } from '#imports'
 const props = defineProps(["value", "dense"])
-const menus = ref(null);
 const light = useLight();
 
-const expansion = ref(null);
-
-const onShowChild = (menu) => {
-    menus.value.forEach((m) => {
-        if (m.value() !== menu) {
-            m.hide()
-        }
-    })
-}
-
-defineExpose({
-    hide: () => {
-        if (expansion.value) {
-            expansion.value.hide();
-        }
-    },
-    value: () => {
-        return props.value;
-    }
-})
-
-const isShowExpansionItem = computed(() => {
-    if (props.value.children) {
-        if (props.value.children.length > 0) {
-            return true;
-
-        }
+const isShowExpansionItem = (menu) => {
+    if (menu.children && menu.children.length > 0) {
+        return true;
     }
     return false;
-
-});
+};
 
 const color1 = computed(() => {
     return light.getColorValue()
@@ -48,28 +22,36 @@ const color2 = computed(() => {
     return c;
 });
 
+//generate a random group name
+const group = Math.random().toString(36).substring(7);
 </script>
 
 <style scoped>
 .menu-list .q-item{border-radius:12px 12px 12px 12px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,v-bind(color1),v-bind(color2));color:#fff}
 </style>
 <template>
-    <q-expansion-item v-if="isShowExpansionItem" :label="$t(value.label)" :icon="value.icon" :dense="dense" ref="expansion">
-        <q-list class="q-pl-md">
-            <l-menu :value="menu" v-for="menu in value.children" :dense="dense" @show="onShowChild(menu)"
-                ref="menus"></l-menu>
-        </q-list>
-    </q-expansion-item>
-    <q-list v-else class="menu-list" :dense="dense">
-        <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>
-            <q-item-section>
-                <q-item-label v-text="$t(value.label)"></q-item-label>
-            </q-item-section>
-        </q-item>
+    <q-list class="menu-list" :dense="dense">
+        <template v-for="menu in value">
+
+            <q-expansion-item  :label="$t(menu.label)" :icon="menu.icon" :dense="dense" v-if="isShowExpansionItem(menu)"
+                :group="group">
+                <l-menu class="q-pl-md" :value="menu.children" :dense="dense"></l-menu>
+            </q-expansion-item>
+
+            <template v-else>
+                <q-separator v-if="menu.type == 'separator'" :spaced="menu.spaced" />
+                <q-item-label header v-if="menu.type == 'header'">{{ menu.label }}</q-item-label>
+
+                <q-item v-ripple :to="menu.to" v-if="!value.type">
+                    <q-item-section avatar>
+                        <q-icon :name="menu.icon" />
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label v-text="$t(menu.label)"></q-item-label>
+                    </q-item-section>
+                </q-item>
+            </template>
+
+        </template>
     </q-list>
 </template>

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

@@ -118,6 +118,8 @@ const attrs = computed(() => {
         a.label = t(props.label);
     }
 
+    if (props.color === undefined) a.color = light.color
+
     return a;
 
 });

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

@@ -375,7 +375,6 @@ const getFilterValue = () => {
 
 
 const onFilters = () => {
-    console.log("onFilters",filters.value)
     
     //clone the filters
     onRequest({
@@ -493,7 +492,6 @@ const localSelected = computed({
         return props.selected;
     },
     set(val) {
-        console.log(val)
         emits("update:selected", val);
     }
 });
@@ -572,7 +570,8 @@ const localSelected = computed({
 
 
         <template #top-right="props" v-if="fullscreen || searchable">
-            <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" :placeholder="$t('Search')">
+            <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" :placeholder="$t('Search')"
+                :color="$light.color">
                 <template v-slot:append>
                     <q-icon name="search" />
                 </template>
@@ -603,13 +602,13 @@ const localSelected = computed({
                         <template v-if="col.searchType == 'number'">
                             <q-input style="min-width: 80px;" dense clearable filled square
                                 v-model.number="filters[col.name]" @keydown.enter.prevent="onFilters" @clear="onFilters"
-                                mask="##########"></q-input>
+                                mask="##########" enterkeyhint="search"></q-input>
                         </template>
 
                         <template v-if="col.searchType == 'select'">
                             <q-select dense clearable filled square v-model="filters[col.name]"
                                 @update:model-value="onFilters" options-dense :options="col.searchOptions" emit-value
-                                map-options :multiple="col.searchMultiple" />
+                                map-options :multiple="col.searchMultiple" :color="$light.color" />
 
                         </template>
 
@@ -621,7 +620,8 @@ const localSelected = computed({
 
                         <template v-if="!col.searchType">
                             <q-input style="min-width: 80px;" dense clearable filled square v-model="filters[col.name]"
-                                @keydown.enter.prevent="onFilters" @clear="onFilters" enterkeyhint="search"></q-input>
+                                @keydown.enter.prevent="onFilters" @clear="onFilters" enterkeyhint="search"
+                                :color="$light.color"></q-input>
 
                         </template>
 

package/dist/runtime/formkit/OptionGroup.vue

@@ -15,7 +15,7 @@ const value = computed({
 
 </script>
 <template>
-    <l-field label="Roles" stack-label :label="context.label" :error="error" :error-message="errorMessage">
+    <l-field stack-label :label="context.label" :error="error" :error-message="errorMessage">
         <q-option-group type="checkbox" :options="context.options" v-model="value" inline v-bind="context.attrs" :color="$light.color">
         </q-option-group>
     </l-field>

package/dist/runtime/formkit/Select.vue

@@ -14,8 +14,6 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-//console.log(props.context.node.props.parsedRules);
-
 //check required in parsedRules
 let required = false;
 for (let rule of props.context.node.props.parsedRules ?? []) {

package/dist/runtime/locales/zh-hk.json

@@ -1,4 +1,8 @@
 {
+    "Menu width": "選單寬度",
+    "File system": "檔案系統",
+    "Folders": "資料夾",
+    "Files": "檔案",
     "Server time": "伺服器時間",
     "Developer": "開發者",
     "Modules": "模組",

package/dist/runtime/pages/Permission/all.vue

@@ -1,8 +1,9 @@
 <script setup>
 import { reactive } from 'vue'
-import { m } from '../../'
-
+import { m } from '#imports'
+import { useI18n } from 'vue-i18n';
 import { query } from '@hostlink/light';
+const { t } = useI18n();
 
 const { app, listRole: roles } = await query({
     app: {
@@ -15,7 +16,7 @@ const { app, listRole: roles } = await query({
 })
 
 const columns = [{
-    label: "Permission",
+    label: t("Permission"),
     field: "permission",
     align: "left",
 }];
@@ -77,13 +78,9 @@ const onUpdate = (value, role, permission) => {
                     </q-td>
                     <q-td v-for="role in roles">
                         <q-checkbox v-model="props.row[role.name]"
-                            @update:model-value="onUpdate($event, role.name, props.row.permission)" 
-                            
-                            :color="$light.color"
-                            />
+                            @update:model-value="onUpdate($event, role.name, props.row.permission)" :color="$light.color" />
                     </q-td>
                 </q-tr>
-
             </template>
         </q-table>
     </l-page>

package/dist/runtime/pages/Role/index.vue

@@ -2,7 +2,8 @@
 import { useQuasar } from 'quasar'
 import { q, m, notify } from '#imports'
 import { ref } from "vue"
-
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 const qua = useQuasar();
 
 const loadData = async () => {
@@ -40,7 +41,7 @@ const columns = [
     {
         name: "name",
         field: "name",
-        label: "Name",
+        label: t("Name"),
         align: "left",
         sortable: true,
     }, {
@@ -124,8 +125,8 @@ const onRemoveUser = async (value, user) => {
 
             <template #body-cell-children="props">
                 <q-td>
-                    <q-select :options="role_options" v-model="props.row.children" multiple use-chips
-                        dense @remove="onRemoveChild(props.row.name, $event)" @add="onAddChild(props.row.name, $event)">
+                    <q-select :options="role_options" v-model="props.row.children" multiple use-chips dense
+                        @remove="onRemoveChild(props.row.name, $event)" @add="onAddChild(props.row.name, $event)">
 
                     </q-select>
                 </q-td>

package/dist/runtime/pages/System/database/backup.vue

@@ -1,7 +1,14 @@
 <script setup>
 import { q } from "#imports"
+import { Loading } from "quasar";
 const onClickDownload = async () => {
 
+    //show loading
+    Loading.show({
+        message: "Exporting database..."
+    });
+
+
     const data = await q({
         system: {
             database: {
@@ -10,6 +17,9 @@ const onClickDownload = async () => {
         }
     });
 
+    //hide loading
+    Loading.hide();
+
     const file = new File([data.system.database.export], "backup.sql", {
         type: "text/plain;charset=utf-8"
     });
@@ -24,6 +34,6 @@ const onClickDownload = async () => {
 </script>
 <template>
     <l-page>
-        <q-btn color="primary" label="Download" icon="sym_o_download" @click="onClickDownload"></q-btn>
+        <l-btn label="Download" icon="sym_o_download" @click="onClickDownload"></l-btn>
     </l-page>
 </template>

package/dist/runtime/pages/System/database/table.vue

@@ -14,12 +14,11 @@ const { system: { database } } = await query({
 <template>
     <l-page>
         <q-card flat bordered>
-            <q-list  bordered class="rounded-borders" separator>
-                <q-expansion-item :label="table.name" v-for="table in database.table">
-                    <div class=" q-ma-sm">
-                        <q-table
-                        separator="cell"
-                         dense :rows="table.columns" :rows-per-page-options="[0]" hide-pagination flat bordered></q-table>
+            <q-list class="rounded-borders" separator bordered>
+                <q-expansion-item :label="table.name" v-for="table in database.table" dense>
+                    <div class="q-ma-sm">
+                        <q-table separator="cell" dense :rows="table.columns" :rows-per-page-options="[0]" hide-pagination
+                            flat bordered></q-table>
                     </div>
 
                 </q-expansion-item>

package/dist/runtime/pages/System/fs.vue

@@ -50,17 +50,11 @@ const columns = [
         field: row => row.type,
         format: val => `${val}`,
         sortable: true
-    },
-    {
-        name: 'location',
-        required: true,
-        label: 'Location',
+    }, {
+        name: 'data',
+        label: 'Data',
         align: 'left',
-        field: row => row.location,
-        format: val => `${val}`,
-        sortable: true
     }
-
 ]
 </script>
 <template>
@@ -79,25 +73,33 @@ const columns = [
                     <FormKit type="l-input" label="Name" name="name" validation="required"></FormKit>
                     <FormKit type="l-select" label="Type" name="type" validation="required" :options="[
                         { label: 'Local', value: 'local' },
-                        { label: 'S3', value: 'S3' }
+                        { label: 'S3', value: 'S3' },
+                        { label: 'HostLink storage', value: 'hostlink' }
                     ]"></FormKit>
 
-                    <template v-if="value.type == 'local'">
-                        <FormKit type="l-input" label="Location" name="location" validation="required"></FormKit>
-                    </template>
-
-                    <template v-if="value.type == 'S3'">
-                        <FormKit type="l-input" label="Bucket" name="bucket" validation="required"></FormKit>
-                        <FormKit type="l-input" label="Access Key" name="accessKey" validation="required"></FormKit>
-                        <FormKit type="l-input" label="Secret Key" name="secretKey" validation="required"></FormKit>
-                        <FormKit type="l-input" label="Region" name="region" validation="required"></FormKit>
-                        <FormKit type="l-input" label="Endpoint" name="endpoint" validation="required"></FormKit>
-                        <FormKit type="l-input" label="Prefix" name="prefix"></FormKit>
-                        <FormKit type="l-select" label="Visibility" name="visibility" validation="required" :options="[
-                            { label: 'Public', value: 'public' },
-                            { label: 'Private', value: 'private' }
-                        ]"></FormKit>
-                    </template>
+                    <FormKit type="group" name="data">
+                        <template v-if="value.type == 'local'">
+                            <FormKit type="l-input" label="Location" name="location" validation="required"></FormKit>
+                        </template>
+
+                        <template v-if="value.type == 'S3'">
+                            <FormKit type="l-input" label="Bucket" name="bucket" validation="required"></FormKit>
+                            <FormKit type="l-input" label="Access Key" name="accessKey" validation="required"></FormKit>
+                            <FormKit type="l-input" label="Secret Key" name="secretKey" validation="required"></FormKit>
+                            <FormKit type="l-input" label="Region" name="region" validation="required"></FormKit>
+                            <FormKit type="l-input" label="Endpoint" name="endpoint" validation="required"></FormKit>
+                            <FormKit type="l-input" label="Prefix" name="prefix"></FormKit>
+                            <FormKit type="l-select" label="Visibility" name="visibility" validation="required" :options="[
+                                { label: 'Public', value: 'public' },
+                                { label: 'Private', value: 'private' }
+                            ]"></FormKit>
+                        </template>
+
+                        <template v-if="value.type == 'hostlink'">
+                            <FormKit type="l-input" label="Endpoint" name="endpoint" validation="required"></FormKit>
+                            <FormKit type="l-input" label="Token" name="token" validation="required"></FormKit>
+                        </template>
+                    </FormKit>
 
                 </FormKit>
             </q-card>
@@ -114,6 +116,10 @@ const columns = [
 
             </template>
 
+            <template #body-cell-data="props">
+                <q-td><pre>{{ props.row.data }}</pre></q-td>
+            </template>
+
         </l-table>
     </l-page>
 </template>

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

@@ -1,8 +1,10 @@
 <script setup>
 import { ref, computed, inject } from 'vue';
 import { m, q } from '#imports'
-import { useQuasar } from 'quasar';
+import { useQuasar, Dialog } from 'quasar';
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const quasar = useQuasar();
 const appMenus = await q("appMenus", [])
 
@@ -38,14 +40,14 @@ const onReload = async () => {
 
 const onAddChild = (node) => {
 
-    quasar.dialog({
-        title: 'Add Child Menu',
-        message: 'Enter menu label',
+    Dialog.create({
+        title: t('Add child menu'),
+        message: t('Enter menu label'),
         prompt: {
             model: '',
         },
         cancel: true,
-        persistent: true,
+        persistent: true
     }).onOk((data) => {
         if (data === '') return;
 

package/dist/runtime/pages/System/setting.vue

@@ -106,13 +106,13 @@ const tab = ref('general')
                         access_token_expire: obj.access_token_expire,
                     }" v-if="tab == 'security'" @submit="onSubmit">
                         <q-field label="Password policy" stack-label>
-                            <FormKit type="q-checkbox" label="Upper Case" name="password_contains_uppercase" true-value="1"
+                            <FormKit type="l-checkbox" label="Upper Case" name="password_contains_uppercase" true-value="1"
                                 false-value="0" />
-                            <FormKit type="q-checkbox" label="Lower Case" name="password_contains_lowercase" true-value="1"
+                            <FormKit type="l-checkbox" label="Lower Case" name="password_contains_lowercase" true-value="1"
                                 false-value="0" />
-                            <FormKit type="q-checkbox" label="Number" name="password_contains_numeric" true-value="1"
+                            <FormKit type="l-checkbox" label="Number" name="password_contains_numeric" true-value="1"
                                 false-value="0" />
-                            <FormKit type="q-checkbox" label="Special Character" name="password_contains_symbol"
+                            <FormKit type="l-checkbox" label="Special Character" name="password_contains_symbol"
                                 true-value="1" false-value="0" />
                         </q-field>
 
@@ -122,7 +122,7 @@ const tab = ref('general')
 
 
                         <q-field label="Two factor authentication" stack-label>
-                            <FormKit type="q-checkbox" label="Enable" name="two_factor_authentication" true-value="1"
+                            <FormKit type="l-checkbox" label="Enable" name="two_factor_authentication" true-value="1"
                                 false-value="0" />
                         </q-field>
 
@@ -144,7 +144,7 @@ const tab = ref('general')
 
                     }" v-if="tab == 'Modules'" @submit="onSubmit">
                         <q-field label="File manager" stack-label>
-                            <FormKit type="q-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
+                            <FormKit type="l-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
                         </q-field>
                     </FormKit>
 

package/dist/runtime/pages/Translate/index.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { ref, reactive } from 'vue';
-import { m, q } from '../../'
+import { m, q } from '#imports'
 import { Notify } from 'quasar';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 const app = await q("app", ["languages"])
 
 const splitterModel = ref(62)
@@ -44,7 +46,7 @@ const columns = [
         name: "_delete"
     },
     {
-        label: "Name",
+        label: t("Name"),
         name: "name",
         field: "name",
         align: "left",
@@ -98,8 +100,7 @@ const onDelete = async (name) => {
         <l-card>
             <q-splitter v-model="splitterModel" style="height:680px">
                 <template #before>
-                    <q-table :rows="all" flat :rows-per-page-options="[0]" :columns="columns" dense
-                        separator="cell">
+                    <q-table :rows="all" flat :rows-per-page-options="[0]" :columns="columns" dense separator="cell">
                         <template #body="props">
                             <q-tr :props="props">
                                 <q-td key="_delete" auto-width>

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

@@ -1,8 +1,6 @@
 <script setup>
 import { reactive } from "vue"
-import { useRouter } from "vue-router";
 import { q } from '#imports'
-const router = useRouter()
 const obj = reactive({
     username: null,
     password: null,

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

@@ -69,9 +69,10 @@ eventLogCols.forEach(col => {
 
                     <q-separator />
                     <l-list :bordered="false">
-
-                        <q-item-label header>Details</q-item-label>
+                        <q-item-label header>{{ $t('Details') }}</q-item-label>
                         <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>

package/dist/runtime/pages/User/setting/open_id.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { reactive, onMounted } from "vue"
+import { reactive, onMounted, nextTick } from "vue"
 import { Notify } from "quasar";
-import { q, m } from '../../../'
+import { q, m } from '#imports'
 let { app, my } = await q({ app: ['googleClientId'], my: ["gmail"] })
 
 my = reactive(my);
@@ -25,6 +25,7 @@ const handleGoogleCredentialResponse = async (response) => {
 }
 
 onMounted(() => {
+
     if (app.googleClientId) {
         if (!window.google) {
             Notify.create({
@@ -38,23 +39,30 @@ onMounted(() => {
         }
     }
 
-    //google 
-    google.accounts.id.initialize({
-        client_id: app.googleClientId,
-        callback: handleGoogleCredentialResponse,
-    });
-
-    google.accounts.id.renderButton(
-        document.getElementById('g_id_signin'),
-        {
-            type: 'profile',
-            shape: 'pill',
-            theme: 'outline',
-            text: 'signin_with',
-            size: 'large',
-            logo_alignment: 'left'
-        }
-    );
+    //nextTick
+
+    nextTick(() => {
+
+        //google 
+        google.accounts.id.initialize({
+            client_id: app.googleClientId,
+            callback: handleGoogleCredentialResponse,
+        });
+
+        google.accounts.id.renderButton(
+            document.getElementById('g_id_signin'),
+            {
+                type: 'profile',
+                shape: 'pill',
+                theme: 'outline',
+                text: 'signin_with',
+                size: 'large',
+                logo_alignment: 'left'
+            }
+        );
+
+    })
+
 
 });
 
@@ -79,7 +87,7 @@ const unlink = async () => {
                 <div>
                     <l-btn label="Unlink" @click="unlink" icon="sym_o_delete"></l-btn>
                 </div>
-                
+
             </q-card-section>
 
             <q-card-section v-else>

package/dist/runtime/plugin.mjs

@@ -1,4 +1,4 @@
-import { Quasar, Dialog, Notify, Loading, AppFullscreen } from "quasar";
+import { Quasar, Dialog, Notify, Loading, AppFullscreen, AddressbarColor } from "quasar";
 import { createI18n } from "vue-i18n";
 import { defineNuxtPlugin } from "#app";
 import { useRouter } from "vue-router";
@@ -60,7 +60,8 @@ export default defineNuxtPlugin((nuxtApp) => {
       Dialog,
       Notify,
       Loading,
-      AppFullscreen
+      AppFullscreen,
+      AddressbarColor
     }
   });
   let locale = localStorage.getItem("locale") || "en";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.5.2",
+  "version": "1.6.2",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",
@@ -23,7 +23,7 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "dev": "nuxi dev playground",
+    "dev": "nuxi dev playground --host",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxi prepare playground",
     "release:org": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",