@hostlink/nuxt-light 1.8.0 → 1.8.2

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.8.0"
+  "version": "1.8.2"
 }

package/dist/runtime/components/L/Revision.vue

@@ -3,6 +3,17 @@ import { Dialog, Notify } from "quasar"
 import { computed, ref, reactive } from "vue";
 import { q, m } from "#imports";
 
+import * as Diff2Html from 'diff2html';
+import 'diff2html/bundles/css/diff2html.min.css';
+
+/* const diffs = '--- a/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n+++ b/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n@@ -1035,6 +1035,17 @@ func Prctl(option int, arg2 uintptr, arg3 uintptr, arg4 uintptr, arg5 uintptr) (\n \n // THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n \n+func Pselect(nfd int, r *FdSet, w *FdSet, e *FdSet, timeout *Timespec, sigmask *Sigset_t) (n int, err error) {\n+\tr0, _, e1 := Syscall6(SYS_PSELECT6, uintptr(nfd), uintptr(unsafe.Pointer(r)), uintptr(unsafe.Pointer(w)), uintptr(unsafe.Pointer(e)), uintptr(unsafe.Pointer(timeout)), uintptr(unsafe.Pointer(sigmask)))\n+\tn = int(r0)\n+\tif e1 != 0 {\n+\t\terr = errnoErr(e1)\n+\t}\n+\treturn\n+}\n+\n+// THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n+\n func read(fd int, p []byte) (n int, err error) {\n \tvar _p0 unsafe.Pointer\n \tif len(p) > 0 {\n';
+const html = Diff2Html.html(diffs, {
+    drawFileList: true,
+    matching: 'lines',
+    outputFormat: 'side-by-side',
+});
+ */
+
 const props = defineProps({
     modelId: {
         type: String,
@@ -25,7 +36,8 @@ const { revisionsByModel } = await q({
         revisionBy: true,
         createdTime: true,
         content: true,
-        delta: true
+        delta: true,
+        diff: true
     }
 })
 
@@ -102,28 +114,50 @@ const getFilteredContent = computed(() => {
     } else {
         return selectedRevision.value.content;
     }
-
 })
+
+const outputFormat = ref('side-by-side');
+const getDiffHtml = (diffs) => {
+    if (!diffs) {
+        return '';
+    }
+    return Diff2Html.html(diffs, {
+        drawFileList: false,
+        matching: 'lines',
+        outputFormat: outputFormat.value,
+        highlight: true
+    });
+}
+
+
 </script>
+
 <template>
     <div>
 
-
+        <div v-html="html"></div>
         <q-dialog v-model="showDialog" full-height full-width>
             <q-card>
                 <q-toolbar>
                     <l-btn label="Restore" icon="sym_o_restore" permission="revision.restore" @click="onRestore"
                         :disabled="!isAllowRestore" />
 
-                    <q-checkbox label="Show delta only" v-model="showOnlyDelta" :color="$light.color"></q-checkbox>
+                    <q-checkbox label="Show changed only" v-model="showOnlyDelta" :color="$light.color"></q-checkbox>
+
+                    <q-btn-toggle class="q-mx-md" v-model="outputFormat" :toggle-color="$light.color"  :options="[
+            { label: 'side-by-side', value: 'side-by-side' }, { label: 'line-by-line', value: 'line-by-line' }
+        ]" />
                     <q-space />
                     <q-btn flat round dense icon="close" @click="showDialog = false" />
                 </q-toolbar>
 
 
                 <div class="q-pa-md">
-                    <div class="text-h4 q-mb-md">
-                        Revision
+
+                    <div class="text-h6 q-mb-md">
+                        Revision by: {{ selectedRevision.revisionBy }} <br>
+                        Created at: {{ selectedRevision.createdTime }}
+
                     </div>
 
                     <q-markup-table dense separator="cell" flat bordered>
@@ -135,23 +169,34 @@ const getFilteredContent = computed(() => {
                                 </th>
                                 <th>Field</th>
                                 <th>Value</th>
-                                <th>Delta</th>
+                                <th>Changed</th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr v-for="(value, key) in getFilteredContent" :key="key">
-                                
-                                <td><q-checkbox v-model="restore_fields" :val="key" :color="$light.color"></q-checkbox>
-                                </td>
-                                <td :class="{ 'bg-yellow-3': selectedRevision.delta[key] != undefined }">
-                                    {{ key }}</td>
-                                <td>
-                                    <pre>{{ value }}</pre>
-                                </td>
-                                <td>
-                                    <pre>{{ selectedRevision.delta[key] }}</pre>
-                                </td>
-                            </tr>
+                            <template v-for="(value, key) in getFilteredContent" :key="key">
+
+                                <tr>
+
+                                    <td><q-checkbox v-model="restore_fields" :val="key"
+                                            :color="$light.color"></q-checkbox>
+                                    </td>
+                                    <td :class="{ 'bg-yellow-3': selectedRevision.delta[key] != undefined }">{{ key }}
+                                    </td>
+                                    <td>
+                                        <pre>{{ value }}</pre>
+                                    </td>
+                                    <td>
+                                        <pre>{{ selectedRevision.delta[key] }}</pre>
+                                    </td>
+
+                                </tr>
+
+                                <tr v-if="getDiffHtml(selectedRevision.diff[key])">
+                                    <td colspan="4">
+                                        <div v-html="getDiffHtml(selectedRevision.diff[key])"></div>
+                                    </td>
+                                </tr>
+                            </template>
                         </tbody>
 
 

package/dist/runtime/components/L/Storage.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { computed } from 'vue';
+import { format } from "quasar"
+const { humanStorageSize } = format
+const props = defineProps({
+    storage: {
+        type: Object,
+        required: true
+    },
+})
+
+
+const usagePercent = computed(() => {
+    return Math.round((props.storage.totalSpace - props.storage.freeSpace) / props.storage.totalSpace)
+})
+
+const progressColor = computed(() => {
+    if (usagePercent.value > 0.95) {
+        return "negative"
+    }
+    if (usagePercent.value > 0.9) {
+        return "warning"
+    }
+    return "primary"
+})
+
+</script>
+<template>
+    <q-card>
+        <q-card-section>
+            {{ $t("Storage") }}
+            <q-linear-progress rounded size="20px" :value="usagePercent" :color="progressColor" class="q-mt-sm" />
+            {{ $t('storage_usage', [humanStorageSize(storage.freeSpace), humanStorageSize(storage.totalSpace)]) }}
+        </q-card-section>
+    </q-card>
+</template>

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

@@ -3,29 +3,56 @@ import { useRoute, useRouter } 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, toRaw, inject } from 'vue';
+import { ref, computed, reactive, provide, watch, toRaw } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 
 Loading.show()
-//download system value
-/* import { download } from './../lib/SystemValue'
-await download();
- */
+
 const config = useRuntimeConfig();
 
 const appVersion = config.public.appVersion ?? '0.0.1';
 
 const quasar = useQuasar();
 const tt = await q({
-    system: ["devMode", "time"],
-    app: ["menus", "viewAsMode", "languages",
-        "copyrightYear",
-        "copyrightName",
-        "hasFavorite",
-        { i18nMessages: ["name", "value"] }],
-    my: ['username', 'first_name', 'last_name', 'roles', "styles", "language", "permissions", "default_page", { myFavorites: ["my_favorite_id", "label", "path", "icon"] }],
+    system: {
+        devMode: true,
+        time: true,
+        storage: {
+            freeSpace: true,
+            usageSpace: true,
+            totalSpace: true,
+        }
+    },
+    app: {
+        menus: true,
+        viewAsMode: true,
+        languages: true,
+        copyrightName: true,
+        copyrightYear: true,
+        hasFavorite: true,
+        i18nMessages: {
+            name: true,
+            value: true
+        }
+    }, my: {
+        username: true,
+        first_name: true,
+        last_name: true,
+        roles: true,
+        styles: true,
+        language: true,
+        permissions: true,
+        default_page: true,
+        myFavorites: {
+            my_favorite_id: true,
+            label: true,
+            path: true,
+            icon: true
+        }
+    }
 })
 
+
 let app = tt.app
 let my = reactive(tt.my)
 
@@ -54,13 +81,6 @@ i18n.locale = my.language || 'en';
 
 let system = tt.system;
 
-if (light.isGranted("system.storage")) {
-    let s = await q("system", ["diskFreeSpace", "diskUsageSpace", "diskTotalSpace", "diskFreeSpacePercent"]);
-    //merge system value
-    system = { ...system, ...s };
-
-}
-
 // message
 let messages = i18n.messages.value[i18n.locale];
 for (let t of app.i18nMessages) {
@@ -168,35 +188,17 @@ const exitViewAs = async () => {
 }
 
 const storageColor = computed(() => {
-    if (system) {
-        if (system.diskFreeSpacePercent < 0.05) {
+    if (system.storage) {
+        const percent = system.storage.freeSpace / system.storage.totalSpace;
+        if (percent < 0.05) {
             return "negative"
         }
-        if (system.diskFreeSpacePercent < 0.1) {
+        if (percent < 0.1) {
             return "warning"
         }
     }
 })
 
-const storageProgressColor = computed(() => {
-    if (system) {
-        if (system.diskFreeSpacePercent < 0.05) {
-            return "negative"
-        }
-        if (system.diskFreeSpacePercent < 0.1) {
-            return "warning"
-        }
-    }
-    return "primary"
-})
-
-const storageUsagePercent = computed(() => {
-    if (system) {
-        return 1 - system.diskFreeSpacePercent;
-    }
-    return 0;
-})
-
 const containerClass = computed(() => {
     return (light.theme == 'dark') ? {} : { 'bg-grey-2': true }
 })
@@ -223,8 +225,6 @@ const onToggleFav = async () => {
 
         //reload my.myFavorites
         light.reloadMyFavorites();
-
-
         return;
     }
 
@@ -320,24 +320,13 @@ if (route.fullPath == "/" && my.default_page) {
                             </q-item>
                         </q-list>
                     </q-menu>
-
-
                 </q-btn>
 
-                <q-btn icon="sym_o_storage" flat round dense class="q-mr-sm" v-if="system" :color="storageColor">
+                <q-btn icon="sym_o_storage" flat round dense class="q-mr-sm" v-if="system.storage"
+                    :color="storageColor">
                     <q-menu>
-                        <q-card style="width:250px">
-                            <q-card-section>
-                                {{ $t("Storage") }}
-                                <q-linear-progress rounded size="20px" :value="storageUsagePercent"
-                                    :color="storageProgressColor" class="q-mt-sm" />
-                                {{ $t('storage_usage', [system.diskFreeSpace, system.diskTotalSpace]) }}
-                            </q-card-section>
-
-                        </q-card>
+                        <l-storage :storage="system.storage" style="width:250px" />
                     </q-menu>
-
-
                 </q-btn>
 
                 <div class="q-mx-sm" v-if="$q.screen.gt.xs">
@@ -422,7 +411,8 @@ if (route.fullPath == "/" && my.default_page) {
             </q-scroll-area>
         </q-drawer>
 
-        <q-page-container :class="containerClass" :style="containerStyle">  <!-- Error message -->
+        <q-page-container :class="containerClass" :style="containerStyle"> <!-- Error message -->
+            <slot name="header"></slot>
             <q-banner dense inline-actions class="bg-grey-4 q-ma-md" v-for=" error  in  errors " rounded>
                 {{ error }}
 
@@ -448,9 +438,8 @@ if (route.fullPath == "/" && my.default_page) {
             <q-item>
                 <q-item-section>
                     {{ light.getCompany() }} {{ appVersion }} - Copyright {{ app.copyrightYear }} {{ app.copyrightName
-                    }}.
-                    Build {{
-        light.getVersion() }}
+                    }}. Build
+                    {{ light.getVersion() }}
                 </q-item-section>
             </q-item>
         </q-footer>

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

@@ -48,7 +48,13 @@ provide('color', color)
     </q-layout>
 
     <l-app-main v-else>
+
+        <template #header>
+            <slot name="header"></slot>
+        </template>
+
         <slot></slot>
+
+
     </l-app-main>
 </template>
-  

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

@@ -3,6 +3,9 @@ import { useLight, q, m } from '#imports'
 import { ref, computed } from 'vue'
 import { type QCardProps } from 'quasar';
 
+const minimized = defineModel<boolean>("minimized", { default: false })
+const maximized = defineModel<boolean>("maximized", { default: false })
+
 export interface LCardProps extends QCardProps {
     loading?: boolean;
     title?: string;
@@ -10,9 +13,9 @@ export interface LCardProps extends QCardProps {
      * Permission to access this card, if not granted, the card will not be shown, if the user is admin, a lock icon will be shown to allow the user to grant the permission
      */
     permission?: string
-    fullscreenable?: boolean
     closeable?: boolean
-    minimizable?: boolean
+    minimizable?: boolean,
+    maximizable?: boolean
 
 }
 
@@ -31,26 +34,16 @@ const attrs = computed(() => {
     return a;
 });
 
-const cl = computed(() => {
+const barClass = computed(() => {
     const c = ["text-white"];
     const color = light.color;
     c.push(`bg-${color}`);
     return c;
 });
 
-const minimize = ref(false);
-
-const icon = computed(() => minimize.value ? "sym_o_add" : "sym_o_remove");
-
-const fullScreen = ref(false);
-
-const fullScreenIcon = computed(() => fullScreen.value ? "sym_o_fullscreen_exit" : "sym_o_fullscreen");
-
-const showBody = computed(() => !minimize.value || fullScreen.value);
-
 const showBar = computed(() => {
     if (props.closeable) return true;
-    if (props.fullscreenable) return true;
+    if (props.maximizable) return true;
     if (props.minimizable) return true;
     if (props.title !== undefined) return true;
     if (showSecurity.value) return true;
@@ -115,9 +108,9 @@ const onUpdatePermission = async (role: any) => {
 
 </script>
 <template>
-    <q-card v-bind="attrs" :class="{ 'fullscreen': fullScreen, 'no-margin': fullScreen }"
+    <q-card v-bind="attrs" :class="{ 'fullscreen': maximized, 'no-margin': maximized }"
         v-if="$light.isGranted(permission)" :dark="$q.dark.isActive">
-        <q-bar :class="cl" v-if="showBar">
+        <q-bar :class="barClass" v-if="showBar">
             <div>{{ $t(title ?? "") }}</div>
             <q-space />
 
@@ -134,11 +127,13 @@ const onUpdatePermission = async (role: any) => {
                 </q-menu>
             </q-btn>
 
-            <q-btn dense flat :icon="icon" @click="minimize = !minimize" v-if="!fullScreen && minimizable" />
-            <q-btn dense flat @click="fullScreen = !fullScreen" :icon="fullScreenIcon" v-if="fullscreenable" />
+            <q-btn dense flat :icon="minimized ? 'sym_o_add' : 'sym_o_remove'" @click="minimized = !minimized"
+                v-if="minimizable && !maximized" />
+            <q-btn dense flat @click="maximized = !maximized"
+                :icon="maximized ? 'sym_o_select_window_2' : 'sym_o_crop_square'" v-if="maximizable" />
             <q-btn dense flat icon="sym_o_close" v-close-popup v-if="closeable" />
         </q-bar>
-        <template v-if="showBody">
+        <template v-if="!minimized || maximized">
             <slot></slot>
         </template>
 

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

@@ -6,6 +6,9 @@ import { t, q, useLight, GQLFieldBuilder, model } from '../';
 import { toQuery } from '@hostlink/light';
 
 
+const minimized = defineModel<boolean>("minimized", { default: false })
+const maximized = defineModel<boolean>("maximized", { default: false })
+
 // extends QTableColumn
 export interface LTableColumn extends QTableColumn {
     searchable?: boolean,
@@ -16,7 +19,8 @@ export interface LTableColumn extends QTableColumn {
     backgroundColor?: string | Function
 }
 
-const errors = ref<InstanceType<any>>([]);
+const errors = ref<InstanceType<any>>([
+]);
 
 export interface LTableProps extends QTableProps {
     columns?: Array<LTableColumn>,
@@ -26,6 +30,8 @@ export interface LTableProps extends QTableProps {
     modelName?: string | null | undefined,
     searchable?: boolean | null | undefined,
     selected?: Array<any>,
+    maximizable: boolean,
+    minimizable: boolean,
 }
 
 const props = withDefaults(defineProps<LTableProps>(), {
@@ -43,6 +49,8 @@ const props = withDefaults(defineProps<LTableProps>(), {
     },
     fullscreen: false,
     searchable: false,
+    maximizable: false,
+    minimizable: false,
     selected: () => [],
     loadingLabel: "Loading...",
     noDataLabel: "No data available",
@@ -158,9 +166,6 @@ const validateData = () => {
 
     if (props.actions.includes("edit")) {
         if (rows.value.length > 0) {
-
-
-
             //get first row
             let row = rows.value[0];
             //check has primary key
@@ -375,7 +380,7 @@ const getFilterValue = () => {
 
 
 const onFilters = () => {
-    
+
     //clone the filters
     onRequest({
         pagination: {
@@ -420,7 +425,6 @@ const attrs = computed(() => {
             bordered: light.getStyle("tableBorder"),
             separator: light.getStyle("tableSeparator"),
         },
-        title: props.title,
         loadingLabel: t(props.loadingLabel),
         noDataLabel: t(props.noDataLabel),
         rowsPerPageOptions: props.rowsPerPageOptions,
@@ -496,93 +500,101 @@ const localSelected = computed({
     }
 });
 
+
 </script>
 
 
 <template>
-    <template v-if="errors.length > 0">
-        <div class="q-gutter-sm">
-            <q-banner inline-actions v-for="e in errors" rounded class="bg-negative text-white">{{ e }}</q-banner>
-        </div>
-    </template>
-
-    <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onRequest" :columns="columns"
-        v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected">
-
-        <template #header="props">
-            <q-tr :props="props">
-                <q-td v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" />
-                </q-td>
-                <q-th v-if="hasRowExpand" auto-width></q-th>
-                <q-th v-if="hasActions" auto-width></q-th>
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
-            </q-tr>
-        </template>
+    <l-card flat bordered :maximizable="maximizable" :minimizable="minimizable" :title="title"
+        v-model:minimized="minimized" v-model:maximized="maximized">
 
-        <template #body="props">
-            <q-tr :props="props">
-                <q-td v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" />
-                </q-td>
-                <q-td v-if="hasRowExpand" auto-width>
-                    <q-btn :class="{ 'text-grey-8': !isDark }" flat round dense
-                        :icon="props.expand ? 'sym_o_expand_more' : 'sym_o_expand_less'"
-                        @click="props.expand = !props.expand"></q-btn>
-                </q-td>
 
-                <q-td v-if="hasActions" auto-width>
-                    <div :class="{ 'text-grey-8': !isDark }" v-if="primaryKey">
-
-                        <l-view-btn v-if="actionView && props.row.canView"
-                            :to="`/${modelName}/${props.row[primaryKey]}/view`" />
-
-                        <l-edit-btn v-if="activeEdit && props.row.canUpdate"
-                            :to="`/${modelName}/${props.row[primaryKey]}/edit`" />
-
-                        <l-delete-btn v-if="actionDelete && props.row.canDelete"
-                            @submit="onDelete(props.row[primaryKey])"></l-delete-btn>
-
-                        <slot name="actions" v-bind="props"></slot>
-                    </div>
-
-                </q-td>
+        <template v-if="errors.length > 0">
+            <div class="q-mb-sm">
+                <div class="q-gutter-sm">
+                    <l-alert type="negative" v-for="e in errors">{{ e }}</l-alert>
+                </div>
+            </div>
+        </template>
 
-                <template v-for="col in props.cols">
-                    <template v-if="ss.indexOf('body-cell-' + col.name) >= 0">
-                        <slot :name="'body-cell-' + col.name" v-bind="props"></slot>
+        <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onRequest" :columns="columns"
+            v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected">
+
+            <template #header="props">
+                <q-tr :props="props">
+                    <q-td v-if="selection != 'none'" auto-width>
+                        <q-checkbox v-model="props.selected" />
+                    </q-td>
+                    <q-th v-if="hasRowExpand" auto-width></q-th>
+                    <q-th v-if="hasActions" auto-width></q-th>
+                    <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
+                </q-tr>
+            </template>
+
+            <template #body="props">
+                <q-tr :props="props">
+                    <q-td v-if="selection != 'none'" auto-width>
+                        <q-checkbox v-model="props.selected" />
+                    </q-td>
+                    <q-td v-if="hasRowExpand" auto-width>
+                        <q-btn :class="{ 'text-grey-8': !isDark }" flat round dense
+                            :icon="props.expand ? 'sym_o_expand_more' : 'sym_o_expand_less'"
+                            @click="props.expand = !props.expand"></q-btn>
+                    </q-td>
+
+                    <q-td v-if="hasActions" auto-width>
+                        <div :class="{ 'text-grey-8': !isDark }" v-if="primaryKey">
+
+                            <l-view-btn v-if="actionView && props.row.canView"
+                                :to="`/${modelName}/${props.row[primaryKey]}/view`" />
+
+                            <l-edit-btn v-if="activeEdit && props.row.canUpdate"
+                                :to="`/${modelName}/${props.row[primaryKey]}/edit`" />
+
+                            <l-delete-btn v-if="actionDelete && props.row.canDelete"
+                                @submit="onDelete(props.row[primaryKey])"></l-delete-btn>
+
+                            <slot name="actions" v-bind="props"></slot>
+                        </div>
+
+                    </q-td>
+
+                    <template v-for="col in props.cols">
+                        <template v-if="ss.indexOf('body-cell-' + col.name) >= 0">
+                            <slot :name="'body-cell-' + col.name" v-bind="props"></slot>
+                        </template>
+                        <template v-else>
+                            <q-td :key="col.name" :props="props" :auto-width="col.autoWidth ?? false"
+                                :style="getCellStyle(col, props.row)" :class="getCellClass(col, props.row)"><template
+                                    v-if="col.to" class="bg-primary">
+                                    <l-link :to="col.to(props.row)">{{ col.value }}</l-link>
+                                </template><template v-else>{{ col.value }}</template></q-td>
+                        </template>
                     </template>
-                    <template v-else>
-                        <q-td :key="col.name" :props="props" :auto-width="col.autoWidth ?? false"
-                            :style="getCellStyle(col, props.row)" :class="getCellClass(col, props.row)"><template
-                                v-if="col.to" class="bg-primary">
-                                <l-link :to="col.to(props.row)">{{ col.value }}</l-link>
-                            </template><template v-else>{{ col.value }}</template></q-td>
+                </q-tr>
+                <q-tr v-show="props.expand" :props="props">
+                    <q-td colspan="100%">
+                        <slot name="row-expand" v-bind="props"></slot>
+                    </q-td>
+                </q-tr>
+            </template>
+
+
+            <template #top-right="props" v-if="searchable">
+                <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>
-                </template>
-            </q-tr>
-            <q-tr v-show="props.expand" :props="props">
-                <q-td colspan="100%">
-                    <slot name="row-expand" v-bind="props"></slot>
-                </q-td>
-            </q-tr>
-        </template>
+                </q-input>
 
 
-        <template #top-right="props" v-if="fullscreen || searchable">
-            <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>
-            </q-input>
 
-            <q-btn v-if="fullscreen" flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
-                @click="props.toggleFullscreen" class="q-ml-md" />
-        </template>
+
+            </template>
 
 
-        <!-- template v-for="col in toColumns" v-slot:[col.slot_name]="props">
+            <!-- template v-for="col in toColumns" v-slot:[col.slot_name]="props">
             <q-td :props="props">
                 <l-link :to="col.to(props.row)">
                     {{ col.field(props.row) }}
@@ -591,44 +603,46 @@ const localSelected = computed({
         </template -->
 
 
-        <template #top-row="props" v-if="hasSearch && isServerSide">
-            <q-tr>
-                <q-td v-if="selection != 'none'" auto-width />
-                <q-td v-if="hasRowExpand" auto-width />
-                <q-td v-if="hasActions" auto-width />
-                <q-td v-for="col in props.cols">
-                    <template v-if="col.searchable">
+            <template #top-row="props" v-if="hasSearch && isServerSide">
+                <q-tr>
+                    <q-td v-if="selection != 'none'" auto-width />
+                    <q-td v-if="hasRowExpand" auto-width />
+                    <q-td v-if="hasActions" auto-width />
+                    <q-td v-for="col in props.cols">
+                        <template v-if="col.searchable">
 
-                        <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="##########" enterkeyhint="search"></q-input>
-                        </template>
+                            <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="##########" 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" :color="$light.color" />
+                            <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" :color="$light.color" />
 
-                        </template>
+                            </template>
 
 
-                        <template v-if="col.searchType == 'date'">
-                            <l-date-picker dense clearable filled square :outlined="false" hide-bottom-space
-                                v-model="filters[col.name]" @update:model-value="onFilters" range @clear="onFilters" />
-                        </template>
+                            <template v-if="col.searchType == 'date'">
+                                <l-date-picker dense clearable filled square :outlined="false" hide-bottom-space
+                                    v-model="filters[col.name]" @update:model-value="onFilters" range
+                                    @clear="onFilters" />
+                            </template>
 
-                        <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"
-                                :color="$light.color"></q-input>
+                            <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" :color="$light.color"></q-input>
 
-                        </template>
+                            </template>
 
-                    </template>
-                </q-td>
-            </q-tr>
-        </template>
+                        </template>
+                    </q-td>
+                </q-tr>
+            </template>
 
-    </q-table>
+        </q-table>
+    </l-card>
 </template>

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

@@ -48,7 +48,7 @@ const localValue = computed({
             v-model="localValue">
             <q-tab v-for="tab in tabContents" :label="$t(tab.label)" :name="tab.name"></q-tab>
         </q-tabs>
-        <q-tab-panels v-model="localValue">
+        <q-tab-panels v-model="localValue" keep-alive >
             <q-tab-panel v-for="tab in tabContents" :name="tab.name">
                 <component :is="tab.content.default"></component>
             </q-tab-panel>

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

@@ -1,11 +1,13 @@
 <script setup>
 import { model } from "#imports"
+import { ref } from 'vue'
 const columns = model('EventLog').columns(['eventlog_id', 'class', 'id', 'action', 'created_time', 'username'])
 </script>
 <template>
     <l-page>
-        <l-table fullscreen @request="$event.loadObjects('EventLog')" :columns="columns" sort-by="eventlog_id:desc"
-            :actions="['view']">
+
+        <l-table @request="$event.loadObjects('EventLog')" :columns="columns"
+            sort-by="eventlog_id:desc" :actions="['view']">
 
         </l-table>
     </l-page>

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

@@ -12,11 +12,10 @@ let columns = [
         name: "username",
         field: "username",
         align: "left",
-
     },
     {
         name: "name",
-        label: "姓名",
+        label: "Name",
         field: "name",
         align: "left",
     }, {
@@ -35,7 +34,10 @@ const router = useRouter();
 const onCickView = async (id) => {
     try {
         if (await m("viewAs", { user_id: id })) {
-            router.back();
+
+            //redirect to last path
+            window.location.reload();
+
         }
     } catch (e) {
         Dialog.create({
@@ -59,10 +61,10 @@ const filtered = computed(() => {
 })
 </script>
 <template>
-    <l-page>
-        <p>
+    <l-page class="q-gutter-md">
+        <q-banner >
             Use this page to view the system as another user. This is useful for testing permissions.
-        </p>
+        </q-banner>
 
         <q-table flat :columns="columns" :rows="filtered" :rows-per-page-options="[0]" dense>
             <template v-slot:top-right>

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

@@ -3,11 +3,9 @@ import { ref } from 'vue'
 import { model } from "#imports"
 const onRequest = async (request) => {
     request.loadObjects("User", { status: status.value });
-    //request.loadObjects("User");
 };
 const columns = model("User").columns(["username", "first_name", "label_name", "email", "phone", "join_date", "status","has2FA"]);
 const status = ref("0");
-const selected = ref([]);
 </script>
 
 <template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",
@@ -40,6 +40,7 @@
     "@nuxt/module-builder": "^0.5.2",
     "@quasar/extras": "^1.16.6",
     "axios": "^1.5.0",
+    "diff2html": "^3.4.47",
     "formkit-quasar": "^0.0.15",
     "json-to-graphql-query": "^2.2.5",
     "quasar": "^2.12.5",