@hostlink/nuxt-light 1.5.2 → 1.6.1

package/dist/module.json

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

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-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("/"),
       });
     }
   }
@@ -198,6 +204,7 @@ const breadcrumbs = computed(() => {
 });
 
 const onClickRow = (evt, row, index) => {
+  console.log("click row", row)
   if (row.type == "folder") {
     preview.value = null;
     return;
@@ -484,7 +491,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 +499,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 +531,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 +541,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 +560,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 +568,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 +606,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 +619,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 +627,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 +654,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-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,8 +375,8 @@ const getFilterValue = () => {
 
 
 const onFilters = () => {
-    console.log("onFilters",filters.value)
-    
+    console.log("onFilters", filters.value)
+
     //clone the filters
     onRequest({
         pagination: {
@@ -572,7 +572,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>

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/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/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/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/package.json

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